1

I encountered this question while browsing the Q&A section of an online course on advanced responsive design. I found an answer for it, shared it, and decided to post it here as well in case anyone else might have the same dillema.

The dillema is that it could be a lot easier for ensuring browser compatibility if we could define a different style for certain browsers that behave differently from most, e.g. Internet Explorer and, in the case of my website at least, Safari.

So how do we go about doing that? Check out my answer below to find out, and feel free to contribute if you think you know a better way to target specific browsers for specific media queries unique to them.

Sebastian Neferu
  • 65
  • 10

1 Answers1

1

Using caniuse (https://caniuse.com/), look for a specific property that is only supported by the specific browser you want to target. Then, using the @support query, target that browser with the property you've found is unique to it. Then, whatever styling you apply within that query will only apply to the browser(s) that support(s) the property by which you defined the query.

That is, the properties inside the brackets of a @support query are used to define when - for which browsers - the styling inside the curly braces will apply; they do not need to be the same, that is, you do not need to use the same property styled within the curly braces to define the query in the brackets, so you can choose any property that targets the specific browser(s) you want to display the styling for.

Update:

I found this site that seems to provide the solution to targeting specific browsers and browser versions in the caniuse style, sparing you the need to test each property by hand:

http://browserhacks.com/

This article offers a briefing on how to use it:

https://www.templatemonster.com/help/how-to-create-browser-specific-css-rules-styles.html

Update:

For Internet Explorer only, older versions only, you can create a separate stylesheet to load for them using conditional comments in your HTML. This can be a copy of your general stylesheet, tweaked to work on old IE versions, but loaded only if those versions are detected, therefore not interfering with display on other browsers. They are not, unfortunately, usable for other browsers. This article explains how to use conditional statements.

https://www.quirksmode.org/css/condcom.html

Update:

The most effective solution to this problem seems to me to be to implement some javascript that detects the browser version and then applies specific styles or even modifies the DOM based on the browser(s) you target.

This explains the principle and some applications nicely:

Is there any equivalent to IE conditional comment for chrome and safari?

This, if rather old, is still a very useful such application:

http://rafael.adm.br/css_browser_selector/

And that's it! The ability to ensure browser compatibility with most any browser!

Sebastian Neferu
  • 65
  • 10