I've been working on a navigation component for a web application where I have several anchor tags styled to look and behave like buttons. What I'm trying to achieve is that when these button-like anchors are clicked or interacted with, the text within them should not be selectable. This is important for the user experience to ensure the anchors feel like native application buttons. Initially, I tried using the `user-select` CSS property, which is supposed to control the ability of the user to select text. This worked great in most modern browsers, but I encountered inconsistencies and lack of support in earlier versions and some specific scenarios.
Here's a basic example of how one of these anchors is styled:


However, when attempting to disable text selection, I realized there isn't a one-size-fits-all solution since some older browsers require specific prefixes. I used `-moz-user-select` for Firefox, but I'm aware this isn't an overall strategy for all browsers.
I'm inclined to find a method that is widely accepted as the best practice for this situation, considering cross-browser compatibility (including mobile browsers). I want to ensure that I'm using a solution that professional developers would implement. Is there a more standard or clean way in CSS to prevent text selection across all browsers or do I need to fallback to JavaScript event handlers? And what would be the best practice to handle older browsers that don't support these CSS properties?

To achieve a cross-browser compatible way of disabling text selection, you should utilize vendor prefixes along with the unprefixed version of `user-select`. You should also include `-webkit-user-select` as it covers browsers that are based on WebKit like Safari, `-ms-user-select` for Internet Explorer, and the standard `user-select` for modern, compliant browsers. Here's how you should apply it to your anchors:


Make sure that the unprefixed version comes last in your list so that it is the one applied if the browser supports it, following the CSS cascade rules.

It's worth mentioning that while the CSS approach is the most straightforward for disabling text selection, it is not always foolproof in preventing all forms of text interaction. For instance, even with text selection disabled, a double-click on an element might still cause the browser to react, such as trying to select the closest selectable text.
If you find that CSS isn't enough for your case (which might be quite rare), you could consider a small JavaScript snippet to prevent default interactions on mouse events for these button-like anchors, but I would regard this as a last resort.

While the CSS property `user-select` is probably the best approach, in some highly interactive web applications, you might also want to prevent the default drag behavior, as users might try to drag the text or the button itself. This can be done by setting the `draggable` attribute to false on the anchor tag.
Here is how you can add it to your button-like anchors:


Remember this won't be necessary for most cases, but if your app has draggable elements or you are implementing custom drag-and-drop features, it's something you might want to take into consideration.