Developing and designing for every browser type can be a very challenging (some might say impossible) task. Every browser has its own unique inherent styling that (even with the use of a reset) can be difficult to override or get rid of completely, and not every browser supports some of the newer, cool CSS properties and techniques. For these reasons, it can be really tricky to make sure that your site designs look good and consistent (and functional!) across every single browser. While accounting for cross browser compatibility can be a daunting task, it can be made easier by applying the following tips.
Use Vendor Prefixes
This one is probably the most common way to avoid cross browser compatibility issues. A lot of CSS properties (particularly the newer ones) aren’t supported on most browsers, unless you use a vendor prefix. As a developer, you may want to cover all your bases when using a CSS property that isn’t widely supported (like, for example, the transition property) to make sure that your designs (or in the case of the transition property, your animated effects) actually work in every browser. The following is a list of the vendor prefixes that can be used for every browser:
-webkit- //chrome, android, safari, ios -o- //opera -moz- //firefox -ms- //internet explorer
Here’s how you would use them in context:
What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.
div{
transition: all .5s ease;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
}
Don’t forget to include hyphens on either side of your prefix keyword!
Browser Hacks
If you want to target a specific property or style rule to behave a particular way based on the browser, there are a number of different CSS “hacks” that will allow you to target a specific browser and apply style rules to HTML elements only if they appear on one particular browser. This works well when you’re trying to compensate for a style or property that might work on all browsers except for one. This way, you can use a hack to single out a specific browser and change the styling only for that one to make sure your design doesn’t look funky or your functionality isn’t compromised without the unsupported CSS property. Check out the list of hacks for common browsers below:
/* Internet Explorer Versions 9+ */
@<span class="hljs-keyword">media</span> screen and (min-width:<span class="hljs-number">0</span>\<span class="hljs-number">0</span>) {
<span class="hljs-selector-class">.<strong>yourElement</strong></span> {
font-size: 12px;
}
}
/* Firefox Versions 3+ */
<span class="hljs-selector-tag">html</span>><span class="hljs-comment">/**/</span><span class="hljs-selector-tag">body</span> <span class="hljs-selector-class">.<strong>yourElement</strong></span>, <span class="hljs-selector-tag">x</span><span class="hljs-selector-pseudo">:-moz-any-link</span>, <span class="hljs-selector-tag">x</span><span class="hljs-selector-pseudo">:default</span> {
<span class="hljs-attribute">font-size: 12px;</span><span class="hljs-meta">
</span>}
/* Chrome and Safari */
@<span class="hljs-keyword">media</span> screen and (-webkit-min-device-pixel-ratio:<span class="hljs-number">0</span>) {
<span class="hljs-selector-class">.<strong>yourElement</strong></span> {
<span class="hljs-attribute">font-size</span>: 12px;<span class="hljs-number">
</span>}
}
Make sure you insert the name of the element you’d like to single out in the spot where it’s written .yourElement in bold.
Use CSS @supports Rule
The CSS @supports allows you to wrap your CSS rules within the @supports query so that the rule will only be applied if it’s supported on a particular browser. If a rule isn’t supported, it’ll get skipped over as if the rule weren’t there, which can really come in handy for those properties you want to use but don’t want to look terrible if they happen to not be supported on a browser. Here’s how you would use it in context:
@supports(transition: all .5s ease){
div{
transition: all .5s ease;
}
}
In order to use @supports, you’ll have to pass through the CSS rule you want to account for as a parameter, and then the code will take care of the rest.
