How to Craft Browser Specific CSS Code

Why Browser Specific CSS?

A universal code is developed as per standards, yet popular syntaxes do not operate on all browsers. Such code might result in CSS inconsistencies and, in extreme instances, the absence of elements on the web page.

This key issue is highlighted in an MDN study, which polled developers from all over the world. The image below depicts the most common cross-browser issues.

Also Read - 10 Ways To Avoid Cross-Browser Compatibility Issues

For example, let’s take “Responsiveness”. Due to the sheer penetration of mobile device usage, responsive web design has become a standard for releasing online apps. However, it is difficult to execute this design across all screen sizes, browsers, versions, and resolutions.

A legacy browser version may not render a CSS style, or property introduced later by the CSS community. Sometimes, a browser requests a different syntax, while the browser only supports a partial implementation.

This is true for many browser-specific CSS properties. As a result, designing a web application with a consistent user experience can be challenging if you are unaware of browser-specific CSS properties.

Read - Why Is Responsive Web Design Important?

Google Chrome Browser Specific CSS code

Writing a Google Chrome specific CSS code is not as easy as writing conditional statements. For each property you write the CSS code, you should know the target CSS code for specific Chrome versions. There are no universal statements.

With that being said, Google Chrome also supports various browser-specific CSS properties from its prior versions, and therefore you might not feel the need to add extra code for this browser. In addition, many Chrome users also use the latest versions, which relieves us of overthinking unsupported browser-specific CSS properties in earlier versions.

To write browser-specific CSS code in Google Chrome, you can follow these browser-specific CSS properties:

• To target the support of browser-specific CSS properties on the Webkit browsers (including Safari) for all Chrome versions:.selector:not(*:root) { property:value; }
• To target the support of properties on Chrome versions >= 29:@supports (-webkit-appearance:none) {}
• To target the support of properties on Chrome versions < 29:.selector { (;property: value;); } .selector { [;property: value;]; }
• To target media queries on Chrome versions from 22 to 28:@media \\0 screen {}
• To target media queries on Chrome versions above 28:@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

These are the most popularly used browser-specific CSS properties in Google Chrome and will probably work for a majority of web applications.

Read - Best Chrome Extensions for Developers and Designers

Safari Browser Specific CSS code

Safari is another webkit-based browser that allows developers to reuse the same webkit targeting functionality that we built in Chrome. As a result, the three browser-specific CSS properties listed below for Google Chrome will also work on Safari.

• .selector:not(*:root) { property:value; }
• @supports (-webkit-appearance:none) {}
• .selector { (;property: value;); } .selector { [;property: value;]; }

Besides that, there are a few other browser-specific CSS properties you can use to target Safari for your CSS code. For example, if your CSS code includes a few media queries, you’ll need to include the following snippet to target specific Safari browsers:

• For Safari 4:@media screen and (min-width:0\0) {}
• For Safari >=6:@media screen { @media (min-width: 0px) {} }

  If your CSS code contains selector code (to select a few elements from the web page), the following snippet is required to target Safari browsers:

• For Safari 2:html:first-child .selector {}
• For Safari 2 and Safari 3:html[xmlns*=""] body:last-child .selector {} html[xmlns*=""]:root .selector {}
• For Safari 2 and Safari 3.1:*|html[xmlns*=""] .selector {}
• For Safari 5.1 and Safari 6:_::-moz-svg-foreign-content, :root .selector {}

  If your CSS code contains a few media queries, the following snippet will help you target specific Safari browsers:

• For Safari >= 7:@media \\0 screen {}

Also Read - Remote Debugging Webpages In iOS Safari

Now run your browser testing on iPad simulator!!!

Mozilla Firefox Browser Specific CSS code

Mozilla Firefox is a challenging browser to deal with. However, it has always isolated itself from Internet Explorer and has been open about it. Furthermore, unlike Chrome and Safari, it is not built on the webkit engine. As a result, developers can use the browser-specific CSS codes for Mozilla Firefox shown below.

If your CSS code aims at selecting the elements, the following Firefox browser-specific CSS properties will help:

• For Firefox 1.5 and Firefox 2:body:empty .selector {}
• For Firefox version greater than 2:body:last-child .selector, x:-moz-any-link {}
• For Firefox versions greater than 3:body:last-child .selector, x:-moz-any-link, x:default {}
• For Firefox versions greater than 3.5:body:not(:-moz-handler-blocked) .selector {}
• For Firefox versions greater than 6:_::-moz-progress-bar, body:last-child .selector {}
• For Firefox versions greater than 21:_::-moz-range-track, body:last-child .selector {}
• For all the Firefox versions:_:-moz-tree-row(hover), .selector {}

In the above codes, the selectors are different for different purposes. Please go through their implementations before applying them to your web page.

Read More - The Ultimate CSS Selectors Cheat Sheet You Must Know

If your CSS code is targeting media queries in other browsers, the following additions will create Firefox-specific media query code:

• For Firefox versions <= 3:@media \0 all {}
• For Firefox >= 3.6:@media screen and (-moz-images-in-menus:0) {}
• For Firefox >= 4:@media screen and (min--moz-device-pixel-ratio:0) {}
• For Firefox >= 8:@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: .001dpcm) {} @media all and (-moz-images-in-menus:0) and (min-resolution: .001dpcm) {}
• For Firefox >= 11:@media all and (min--moz-device-pixel-ratio:0) { @media (min-width: 0px) {} } @media all and (-moz-images-in-menus:0) { @media (min-width: 0px) {} }
• For Firefox >= 29:@media all and (min--moz-device-pixel-ratio:0) and (min-resolution: 3e1dpcm) {}

Microsoft Edge Browser Specific CSS code

Microsoft Edge is the reason why Microsoft no longer cares about Internet Explorer. Edge is more robust, keeps up with current trends, is built on Chromium, and is faster. It was released in 2015 and is now the world’s third most popular browser.

Because of its ubiquity and ease of use, this browser is one of the top priorities for web developers. The code snippets below can help in creating Microsoft Edge-specific CSS code:

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

Except for the above, everything functions properly in Microsoft Edge as it was only developed in 2015. By then, many of the standards had been established, and there had been no significant change in the properties. Other browsers were released in the early 2000s, and as a result, they demand special attention since over 60 versions have been released.

Read More - Are You Testing Your Website On Microsoft Edge?

Opera Browser Specific CSS code

Opera is one of the market’s oldest browsers, active for over 30 years. Earlier, Opera used Presto’s engine but eventually switched to WebKit. This offers us the advantage that the previously described WebKit CSS codes will also work properly on Opera.

To summarize, the following browser-specific CSS properties are WebKit based for CSS:

• .selector:not(*:root) { property:value; }
• @supports (-webkit-appearance:none) {}
• .selector { (;property: value;); }
• .selector { [;property: value;]; }
• @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }

Apart from these, you can use one more CSS selector code for Opera versions greater than 9.5:

_:-o-prefocus, body:last-child .selector {}

The main issue we confront while designing a web application is managing the elements across multiple browsers and engines. However, applying these browser-specific CSS does not ensure that our code will function properly. Therefore, we need to be certain about our code after it has been validated.

Read - Top 5 Browser Compatibility Issues in CSS For Developers

Can AI Agents Check Browser-Specific CSS Across Real Engines?

Partly, and only for structural differences. Microsoft's Playwright MCP server, an open source Model Context Protocol server, lets an AI coding agent drive Chromium, Firefox, and WebKit through one interface instead of a person opening each browser by hand to check a CSS fix.

The agent calls tools such as browser_navigate and browser_snapshot to load the same page in each engine and compare the accessibility tree each one returns. If a Chrome-only property such as -webkit-appearance leaves an element with a different role or state in Firefox, the agent can flag the mismatch without a developer opening three browser windows side by side.

This does not replace the browser-specific CSS covered in this article. Playwright MCP compares the accessibility tree, not rendered pixels, so a WebKit-only mask, a vendor-prefixed gradient, or a shadow that renders differently but leaves the DOM unchanged will not show up.

The agent also needs each browser engine installed locally through Playwright's own setup step, so it cannot check a browser it does not have. It never writes the fix either. A developer still has to add the correct vendor-prefixed rule once the agent reports where the engines disagree.

What’s your hack for Browser Specific CSS?

There are various browsers available today, and if you use them, they all are different in their way. Since they come with many features, you might never know what your end-user is using to open your web application. The most we can do is be prepared for all the target browsers. This is not an easy task, though. Knowing browser-specific issues to implement browser-specific CSS code needs careful analysis and work.

This post highlighted the same methods to let you make websites that can be rendered flawlessly on every latest and legacy browser and operating system. With this, I hope you might have found your own hacks and specific codes to work on as a web developer.

Let us know them in the comment section, and we will try to update the most used ones in this post.