rem / Vender Prefix / CSS extensions

rem / Vender Prefix / CSS extensions
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

我們知道,rem可以用來控制字型大小,也就是font-size,那麼rem也可以用在例如height和width地方嗎,完全使用rem把px取代掉,可以嗎?

我自己寫了個demo,發現有一個很奇怪的現象:rem可以用在width和height,但是有點不準確。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>紅綠燈動畫</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
-webkit-text-size-adjust: none;
}
html{
font-size: 12px;
}
.traffic-light{
height: 5rem;
width: 5rem;
background: rgba(255,0,0,1);
}
</style>
</head>
<body>
<div class="traffic-light">
123
</div>
<script>
</script>
</body>
</html>

12/16等於75%,而62.5%/100%等於62.5%。

這不是有毒嗎?說好的現在瀏覽器font-size初始值等於16px呢?

經過一系列排查,發現是chrome的初始font-size在小於12px時,還是會取12px,例如我們這裡想設定為10px,但是還是會回到12px。

度娘告訴我:
chrome瀏覽器最小字型是12px,小於12px也會取為12px

解決辦法:
可以將font-size設定為625%,或者設定初始值到100px

但是這顯然不如10px方便,因為在移動端開發中,10px級的需求是更常見的,改成100px每次都去除以10,很麻煩。

最後在google經過一系列的關鍵詞索引搜尋,終於找到一個stackoverflow上的優質問答:Font-size <12px doesn’t have effect in Google Chrome

* {
-webkit-text-size-adjust: none;
}

但是並沒有什麼卵用,有一個哥們兒說這玩意兒在chrome27以後就不能用了,然後甩出一個更不靠譜的回答。
規範裡也沒說到底1rem等於多少,MDN的文件也說得不太對,chrome的rem值怎麼成31px了…所以我們還是暫時認個慫,就設定成100px算吧,用12px或者20px算更麻煩。

雖然沒有解決我們的本質問題:1rem==10px,但是有新的收穫!

不知道大家有沒有注意過,當我們遇到一些奇怪的css的問題的時候,總是會有-webkit,-moz等等開頭的奇怪的css屬性。

這些奇怪的-webkit,moz是什麼呢?他們到底是什麼呢?

通常的答案就是:瀏覽器字首。錯!最標準的答案是供應商字首!

MDN上有一篇非常好的文章,專門講供應商字首:Vender Prefix

我這裡簡單總結下核心要點:CSS字首,介面字首和屬性方法字首。

CSS prefixes
主要的瀏覽器在用以下的字首:

* -webkit- (Chrome,Safari,較新的Opera,幾乎所有的iOS瀏覽器,包括iOS的Firefox版本;基本上,所有支援WebKit的瀏覽器)
* -moz- (FireFox) 
* -o- (舊的,舊Webkit,部分Opera)
* -ms- (IE和Edge)

API prefixes
歷史上,供應商們也會用帶字首的實驗性的API。如果一個完整的介面是實驗性的,那麼介面的名稱是字首(但是屬性和方法不會包括在內)。如果一個實驗性API或者方法被加入到一個標準的介面,獨立的方法或者屬性也會加上字首。

Interface prefixes
介面名稱的字首一般是首字母大寫的

* WebKit:(Chrome,Safari,較新的Opera,幾乎所有的iOS瀏覽器,包括iOS的Firefox:版本;基本上,所有支援WebKit的瀏覽器)
* Moz:(FireFox) 
* O:(舊的,舊Webkit,部分Opera)
* MS:(IE和Edge)

Property and method prefixes
屬性或者方法的字首是小寫的:

* webkit:Chrome,Safari,較新的Opera,幾乎所有的iOS瀏覽器,包括iOS的Firefox版本;基本上,所有支援WebKit的瀏覽器)
* moz:(FireFox) 
* o:(舊的,舊Webkit,部分Opera)
* ms:(IE和Edge)

但是光知道他們是供應商字首中的CSS字首還遠遠不夠,*{ -webkit-text-size-adjust: none; }這個玩意我們還沒搞清楚,只知道-webkit是字首了,那後面的text-size-adjust是什麼,一個完整的-webkit-text-size-adjust是什麼,難道僅僅是一個實驗性的css屬性嗎?

當然不是,因為-webkit-text-size-adjust的正確分類是CSS extensions,你沒有看錯,就是CSS外掛,CSS也有外掛!(注意,這裡的外掛指的是瀏覽器引擎內部底層的外掛,去約束或者定義一些CSS該如何執行的,而不是那種stylish之類的瀏覽器外掛)

WebKit CSS extensionshttps://developer.mozilla.org…
Mozilla CSS extensionshttps://developer.mozilla.org…
Microsoft CSS extensionshttps://developer.mozilla.org…

此處我將以WebKit CSS extensions為例,進行一些探索:
基於WebKit或者Blink的應用,例如Safari和Chrome,支援很多特殊的WebKit CSS外掛。這些外掛通常帶一個字首-webkit。所有的-webkit字首屬性可以用-apple字首替代。一部分也支援-epub字首。

WebKit-only properties(avoid using on websites)
注意:這些屬性只能在WebKit應用程式中使用,並不在標準軌道上。
-webkit-aspect-ratio

WebKit-prefixed properties on the standards track
標準棧上的WebKit的字首屬性
-webkit-appearance

Formerly proprietary properties that are now standard
以前是現在標準的專有屬性
注:為了最大限度地提高CSS的相容性,您應該使用沒有字首的標準屬性,而不是下面列出的字首。
-webkit-animation

Pseudo-elements and pseudo-classes
偽元素和偽類
:-webkit-autofill
::-webkit-file-upload-button

Media features
媒體特性
-webkit-animation

至於 Mozilla CSS extensions和Microsoft CSS extensions,本質上都是瀏覽器廠商各自引擎內部的外掛,大概瞭解下就可以了。

吐槽一句,關注js的我昨天阿里電話一面被問了很多css問題,涼涼,後面要把css也抓起來,前端不紮實就走node後端這條路,感覺有點難走,唉,行路難啊…

That it !

相關文章

前端開發 最新文章