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 with the many inadequacies of emulators and simulators; run your code in real user conditions.
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; }
}
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.
/* Using conditional comments with head section CSS */
/* Using conditional comments with HTML elements */
/* 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; }
}
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;
}
}
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;
}
}}
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.
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.
Top comments (0)