• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Apply CSS styles only to a web browser

Discover in this tutorial how to make CSS changes that affect only to one web browser (Chrome, Firefox, Edge, Safari…).

One of the challenges for web designers/developers/implementers is that we have to make sure that the end result of our work on the web looks correct, not only in a myriad of different resolutions, but also in all web browsers.

If you’ve work at this long enough you’ll have noticed that browsers don’t render content exactly the same.

This is because they use different rendering engines. Currently there are 3 predominant ones:

  • Blink/Chromium (developed by Google) > Chrome, Edge, Brave…
  • Gecko (developed by Mozilla) > Firefox
  • WebKit (developed by Apple) > Safari

If you find yourself in a situation where one of the browsers does not render content the same as the rest and you want to correct it, you are in luck as you can do so using a few lines of CSS.

Let’s see how to do it:

Snippets to modify CSS in a given browser

Below you can see what code you have to use if you only want it to affect one type of browser:

To see this and another 839 code snippets of this website, login or subscribe here.

Just choose the browser and replace the selector, property and value with the ones you are interested in.

As you can see, in the case of Firefox and Safari you have two possible strategies. And you can also use the last snippet if you want to make modifications in both Safari and Chrome.

Conclusions

Now you know how to make CSS modifications that only affect certain web browsers.

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂

CSS

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?