Home >Web Front-end >CSS Tutorial >How Can I Target Chrome-Specific CSS Rules?
When customizing web elements with CSS, you may encounter situations where you need to apply specific styles to certain DOM elements only in the Chrome browser. Here are a few solutions to achieve this:
/* Chrome, Safari, Edge, Firefox */ @media screen and (-webkit-min-device-pixel-ratio:0) { div{top:10;} }
/* Chrome 29+ */ @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) { div{top:0;} }
/* Chrome 22-28 */ @media screen and(-webkit-min-device-pixel-ratio:0) { .selector {-chrome-:only(; property:value; );} }
You can also use JavaScript to check if a browser is Chrome and apply the desired styles accordingly:
if (navigator.appVersion.indexOf("Chrome/") != -1) { // modify button }
The above is the detailed content of How Can I Target Chrome-Specific CSS Rules?. For more information, please follow other related articles on the PHP Chinese website!