How to Create Browser Specific CSS Code

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.

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

Common CSS Browser Compatibility Issues

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.

• CSS Grid: CSS Grid is widely used in web design. It provides a grid framework, within which elements can be placed and properties applied as required. Given its ease of use and flexibility, CSS Grid has become a fixture among web designers and developers.

However, elements of CSS Grid do not function consistently on all browsers. For example, animated grids operate seamlessly in Mozilla’s Gecko engine but not on Chromium and Webkit.

• CSS position: sticky: This property freezes an element on the viewport, even when a user is scrolling on the page. Usually, it is used to fix navigation bars on top of the screen. It usually works quite well with headers and navigation bars, but inconsistencies show up when it is deployed with other elements such as the header of a table. In this case, it fails in Chromium. There are also numerous inconsistencies that show up with implementing this in Safari.
• CSS Flexbox: CSS Flexbox is widely popular, thanks to its versatile nature and its effortless ability to create a container and populate it with elements. However, users will often face issues with handling aspect ratio (height and width) within Flexbox. This usually applies to cases when they have to manage images within the containers established by CSS Flexbox. Additionally, issues also pop up when it comes to aligning items within containers on multiple elements and scales. For example, it has been noticed that visibility: collapse does not operate on the Blink engine – an instance of CSS browser incompatibility.

Solutions for managing Cross Browser Compatibility Issues in CSS

The most effective way to address and resolve the aforementioned issues is to write and implement browser-specific CSS code. Browser-specific code for Chrome, Internet Explorer, Edge, Firefox, and Safari is given below.

Bear in mind that once a site is ready to be tested, it must be verified and validated on real browsers and devices. Don’t limit your tests to the many inadequacies of emulators and simulators; run your code in real user conditions.

Test Websites on Real Browsers 

To add Browser-specific code in CSS, it is essential to detect the browser. This can be done using CSS and JavaScript as seen in the section below.

Detect Browser using CSS and JavaScript

While detecting the browser is not a good practice because it can hinder browsers to access the website as other browsers do and relies on the browser user–agent. However, you might still use it sometimes to offer a consistent user experience by doing a workaround, especially when certain CSS Features and Properties are not fully supported by the browsers.

The better way to ensure Browser Compatibility is by using Feature Detection for Cross Browser Compatibility

You can determine the browser in use just by accessing the navigator.userAgent. However, userAgent will not be able to generate the Browser Names directly, and you can use the below JavaScript code.

function whichBrowser() {
if (isFirefox()) {
return "Firefox";
} else if (isEdge()) {
return "Edge";
} else if (isIE()) {
return "Internet Explorer";
} else if (isOpera()) {
return "Opera";
} else if (isVivaldi()) {
return "Vivalid";
} else if (isChrome()) {
return "Chrome";
} else if (isSafari()) {
return "Safari";
} else {
return "Unknown";
}
}

function agentHas(keyword) {
return navigator.userAgent.toLowerCase().search(keyword.toLowerCase()) > -1;
}

function isIE() {
return !!document.documentMode;
}

function isSafari() {
return (!!window.ApplePaySetupFeature || !!window.safari) && agentHas("Safari") && !agentHas("Chrome") && !agentHas("CriOS");
}

function isChrome() {
return agentHas("CriOS") || agentHas("Chrome") || !!window.chrome;
}

function isFirefox() {
return agentHas("Firefox") || agentHas("FxiOS") || agentHas("Focus");
}

function isEdge() {
return agentHas("Edg");
}

function isOpera() {
return agentHas("OPR");
}

function isVivaldi() {
return agentHas("Vivaldi");
}

Code to Detect Browser using CSS

/** Internet Explorer */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
div {
display: block;
}
}

/** Microsoft Edge */
@supports (-ms-ime-align: auto) {
div {
display: block;
}
}

/** Mozilla Firefox */
@-moz-document url-prefix() {
div
display: block;
}
}

/** Safari */
@media not all and (min-resolution: 0.001dpcm) {
div
display: block;
}
}

/** Chrominum */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
div:not(*:root) {
display: block;
}
}

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 their own type of CSS. In the 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; }
}

/* Test website on real Chrome version 29 and above */

/* 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; }
}

Test your website across Chrome versions

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 the 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; 
}
}}
/* Test website on real Safari 11+ */

/* 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;
}
}}

Test website across Safari versions for Free

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 3000+ 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.

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.