Home Guide How to Create Browser Specific CSS Code

How to Create Browser Specific CSS Code

By Neha Vaidya, Community Contributor -

Table of Contents

Every web page renders differently in different browsers. When a browser reads the code behind a website, it translates the information in the default settings. For instance, Safari and Internet Explorer have different default fonts, which means the font on a specific site changes when viewed in these browsers. Safari defaults to the Helvetica family and Microsoft’s Internet Explorer defaults to the Arial font family.

Default issues are likely the most common reason for variance between browsers. When working with HTML and CSS, it is common to face browser-specific issues for the same web application. Therefore, it becomes necessary to develop browser-specific CSS code to assure a seamless user experience, regardless of the browser they use.

This article discusses how to create browser-specific CSS code to ensure cross-browser compatibility for a website.

Let’s begin with browser-specific CSS code for IE, Chrome, Mozilla, Edge and Safari browsers.

CSS Code for Google Chrome Compatibility


All browsers behave differently and have its own type of CSS. In case of Chrome browsers, devs need to set the webkit pixel ratio. The code below demonstrates how to do so with various Chrome versions.

/* Chrome version 29 and above */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
selector{ property:value; }
}

/* Chrome version 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
selector { -chrome-:only (;
property:value;
);}
}

/* Chrome, Safari, and also the Edge Browser and Firefox */
@media and (-webkit-min-device-pixel-ratio:0) {
selector { property:value; }
}

If you are looking out to test your website across different Chrome browser versions, try this free tool.

CSS Code for Internet Explorer(IE) Compatibility

In the case of IE browsers, use conditional statements for CSS code. The example here uses the if conditional for all sections, like the header section, HTML elements, etc.

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="only-ie.css" />
<![endif]-->

/* Using conditional comments with head section CSS */
<!--[if IE]>
<style type="text/css">
/************ css for all IE browsers ****************/
</style>
<![endif]-->

/* Using conditional comments with HTML elements */
<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

/* IE10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
selector { property:value; }
}

/* IE6,7,9,10 */
@media screen and (min-width: 640px), screen\9 {
selector { property:value; }
}

/* IE6,7 */
@media screen\9 {
selector { property:value; }
}

/* IE8 */
@media \0screen {
selector { property:value; }
}

/* IE9,10 */
@media screen and (min-width:0\0){
selector { property:value; }
}

Developer Tip: Want to run a quick website test on legacy IE browser versions? Try now.


CSS Code for Microsoft Edge Compatibility


When it comes to Microsoft Edge browser, the process is simple as it involves a simple selector that has a property value. It also provides automatic alignment which is considered the easy way to create browser-specific CSS code.

@supports (-ms-ime-align:auto) {
selector {
property: value;
}
}

Popular Read: Cross Browser Compatibility Testing beyond Chrome & Firefox


CSS Code for Mozilla Firefox Compatibility

In Firefox, first use the prefix for the URL. Or, use moz-appearance to show an element using platform-native styling based on the operating system’s theme.

@-moz-document url-prefix() {
selector {
property:value;
}
}

Or

@supports (-moz-appearance:none) {
selector { property:value; }
}

CSS Code for Safari Compatibility

In the case of Safari web browsers, the media uses minimum resolution and WebKit appearance properties in the recent versions. In the previous Safari versions, it used pixel ratio for a CSS property.

/* Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
selector { 
property:value; 
}
}}

/* Safari 10.1 */
@media not all and (min-resolution:.001dpcm){ 
@supports (-webkit-appearance:none) and (not (stroke-color:transparent)) {
selector { 
property:value; 
}
}}

/* Safari 6.1-10.0 (but not 10.1) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0){ 
@media {
selector { 
property:value;
}
}}

Once code has been created, it must be tested on real browsers and devices to ensure that the CSS code is rendering accurately across different browsers. The easiest way to do this is to conduct tests on a real device cloud.

BrowserStack offers 2000+ real browsers and devices for manual and automated Selenium testing. Testers can simply sign up for free, pick the device-browser-OS combination they want, and start testing their website performance. It is easy enough to see what features do not render or function on which browsers – and then backtrack to the CSS to identify and resolve the issue.

Since BrowserStack only provides real browsers and devices, testers do not have to deal with the limitations of emulators and simulators. They get instant feedback on a website’s UX as it appears in the real world.

Try Testing Website on Real Devices for Free

In a world where each website is accessed through multiple browsers and browser versions, developers, testers, and organizations cannot afford to alienate users of a particular browser by letting incompatible CSS escape into production.

Incorporate the information in this article when creating CSS code for website development. It will ensure that devs and testers don’t have to work as hard to provide a positive, highly optimized user experience as part of every website they create.

Tags
Cross browser testing Manual Testing

Featured Articles

CSS techniques for Improved Cross Browser Compatibility

How to make a Web Applications’ HTML5 code Cross Browser Compatible?

Understanding ExpectedConditions in Selenium

BrowserStack Logo Test Instantly on 2000+ Real Devices & Browsers Contact us Get Started Free