How to target for Chrome only browsers CSS
I've tested the following code in Microsoft Edge 42.17134.1.0, Firefox 65.0 (64-bit), and Chrome Version 72.0.3626.81 (Official Build) (64-bit) and it works as expected in Chrome.
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.selector:not(*:root), .chrome {
color: green;
}
}
Note that .chrome
is a class name and you can change with other class names.
Check the following JsFiddle or snippet:
.test {color:red;}
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector:not(*:root), .chrome { color: green; }}
<p class="test chrome">I Should be Green if you're in chrome, Red in all other browsers</p>
Is there a way to set any style for a specific browser in CSS?
For example, if I want to set the corner radius in Webkit, Firefox and other than I can use the following CSS
No, that isn't how it works.
Vendor prefixed properties are used for experimental features. Either because the specification for the property hasn't been locked down or because the browser implementor knows their are problems with the implementation.
In general, you shouldn't use them in production code because they are experimental.
Support for the vendor prefixed versions is removed as support stabilises.
Is there a way to set any style for a specific browser in CSS?
There are several methods that have been used for that effect.
Parser bugs
By exploiting bugs or unsupported features in specific CSS engines (e.g. some versions of IE will ignore a *
character on the front of a property name while other browsers will (correctly) discard the entire rule).
Conditional comments
Older versions of Internet Explorer supported an extended HTML comment syntax that could be used to add <link>
or <style>
elements specifically for certain versions of IE.
Support for this has been dropped.
JavaScript
Classes can be added to elements (typically the body
element) using JavaScript after doing browser detection in JS.
Related Topics
How to Center ≪Ul≫ ≪Li≫ into a Div
Is Float For Layout Bad? What Should Be Used in Its Place
Hiding the Scroll Bar on an HTML Page
Custom CSS Scrollbar For Firefox
Using Only Css, Show Div on Hover Over Another Element
How to Disable Margin-Collapsing
How to Combine :Nth-Child() or :Nth-Of-Type() With an Arbitrary Selector
Why Can't an Element With a Z-Index Value Cover Its Child
Which Characters Are Valid in CSS Class Names/Selectors
How to Make Bootstrap Columns All the Same Height
Bootstrap Center Vertical and Horizontal Alignment
Css3 Selector :First-Of-Type With Class Name
Svg Data Image Not Working as a Background-Image in a Pseudo Element
How to Fade the Edge of a Div With Just CSS
Stretch Child Div Height to Fill Parent That Has Dynamic Height