[分享]css只在谷歌浏览器执行

有时候我们希望某些 css 样式只在特定的浏览器上执行。比如说，我们想要只在谷歌浏览器上执行某个 css 样式，而在其他浏览器上不执行。这时候就需要用到条件注释。在头部引入条件注释： 上述代码表示，...

有时候我们希望某些 css 样式只在特定的浏览器上执行。比如说，我们想要只在谷歌浏览器上执行某个 css 样式，而在其他浏览器上不执行。这时候就需要用到条件注释。

在头部引入条件注释：

<!–[if Google]>
  <link rel="stylesheet" type="text/css" href="google.css" />
<![endif]–> 

上述代码表示，如果是在谷歌浏览器里打开该网页，就会加载 google.css 文件，其他浏览器则不会加载。

在 css 文件中使用条件注释：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    /* 在 Safari 和 Chrome 上执行 */
}

@media screen and (min--moz-device-pixel-ratio:0) {
    /* 在 Firefox 上执行 */
}

@media screen and (-o-min-device-pixel-ratio:0/1) {
    /* 在 Opera 上执行 */
}

@media screen and (min-resolution: 192dpi) {
    /* 在高分辨率设备上执行 */
} 

上述代码表示，使用 media query 媒体查询来判断当前浏览器是否是某个特定的浏览器或特定设备，然后给出相应的样式

需要注意的是，这种方式只能针对特定的浏览器或设备，而不能针对特定的浏览器版本或操作系统版本。