|
|
|
|
|
|
終于找到了，最新針對Chrome的CSS hack代碼
作者:admin 時間:2022-5-6 13:6:20 瀏覽:前面介紹過CSS識別Chrome、Firefox、IE11的代碼，不過文章并沒有提及單獨針對Chrome的CSS hack，而是針對Firefox和IE11編寫獨立代碼，Chrome使用的是公共主體代碼。我今天在國外網站，找到了單獨針對Chrome的CSS hack代碼，測試有效！
實例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body{
background:#ccc;
}
div{
color:blue;
}
/* firefox */
@-moz-document url-prefix(){
div{
color:red;
}
}
/* IE11+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
div{
color:yellow;
}
}
/* Chrome */
@supports (-webkit-appearance:none) and (not (overflow:-webkit-marquee))
and (not (-ms-ime-align:auto)) and (not (-moz-appearance:none)) {
div{
color:white;
}
}
</style>
</head>
<body>
<div>
卡卡網 www.cuckooft.com
</div>
</body>
</html>
執行結果
Chrome
Firefox
IE11
執行結果符合預期。
代碼解釋
我們看到，針對Chrome的CSS，使用了 @supports 標識，但是這個標識現在并非Chrome獨有，對 @supports 功能的支持，Firefox 也添加了。
網上還出現其他針對Chrome的CSS hack代碼，但必須要說的是，這些hack代碼是與瀏覽器的版本相關的，某些hack代碼或許只適用某一瀏覽器的某些版本，或許過一段時間后，其他瀏覽器也支持這個寫法了，從而導致針對某一瀏覽器的hack代碼又失效了。所以，在編寫代碼是，需要檢測代碼的有效性。
總結
至少到目前為止，文章中介紹的hack Chrome瀏覽器的css代碼，還是有效的。
在一個名叫 browserhacks 的國外網站，有各設備和各種瀏覽器（含版本）的最新css hack信息。
參考文章
標簽: Chrome CSS識別瀏覽器代碼 hack css-hack
相關文章
x
