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. 🙂
