Different css different browser

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 .

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()

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; >>

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.