|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
終于找到了，最新針對Chrome的CSS hack代碼
作者:admin 時間:2022-5-6 13:6:20 瀏覽:前面介紹過CSS識別Chrome、Firefox、IE11的代碼，不過文章并沒有提及單獨(dú)針對Chrome的CSS hack，而是針對Firefox和IE11編寫?yīng)毩⒋a，Chrome使用的是公共主體代碼。我今天在國外網(wǎng)站，找到了單獨(dú)針對Chrome的CSS hack代碼，測試有效！
實(shí)例
<!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>
卡卡網(wǎng) howtostagehomes.com
</div>
</body>
</html>
執(zhí)行結(jié)果
Chrome
Firefox
IE11
執(zhí)行結(jié)果符合預(yù)期。
代碼解釋
我們看到，針對Chrome的CSS，使用了 @supports 標(biāo)識，但是這個標(biāo)識現(xiàn)在并非Chrome獨(dú)有，對 @supports 功能的支持，F(xiàn)irefox 也添加了。
網(wǎng)上還出現(xiàn)其他針對Chrome的CSS hack代碼，但必須要說的是，這些hack代碼是與瀏覽器的版本相關(guān)的，某些hack代碼或許只適用某一瀏覽器的某些版本，或許過一段時間后，其他瀏覽器也支持這個寫法了，從而導(dǎo)致針對某一瀏覽器的hack代碼又失效了。所以，在編寫代碼是，需要檢測代碼的有效性。
總結(jié)
至少到目前為止，文章中介紹的hack Chrome瀏覽器的css代碼，還是有效的。
在一個名叫 browserhacks 的國外網(wǎng)站，有各設(shè)備和各種瀏覽器（含版本）的最新css hack信息。
參考文章
標(biāo)簽: Chrome CSS識別瀏覽器代碼 hack css-hack
相關(guān)文章
x
- 站長推薦
