成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

rem / Vender Prefix / CSS extensions

khs1994 / 1696人閱讀

摘要：如果一個(gè)完整的界面是實(shí)驗(yàn)性的，那么界面的名稱是前綴但是屬性和方法不會(huì)包括在內(nèi)。如果一個(gè)實(shí)驗(yàn)性或者方法被加入到一個(gè)標(biāo)準(zhǔn)的接口，獨(dú)立的方法或者屬性也會(huì)加上前綴。注意這些屬性只能在應(yīng)用程序中使用，并不在標(biāo)準(zhǔn)軌道上。

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

我自己寫了個(gè)demo，發(fā)現(xiàn)有一個(gè)很奇怪的現(xiàn)象：rem可以用在width和height，但是有點(diǎn)不準(zhǔn)確。




    
    
    紅綠燈動(dòng)畫
    
    


    

        123

12/16等于75%，而62.5%/100%等于62.5%。

這不是有毒嗎？說好的現(xiàn)在瀏覽器font-size初始值等于16px呢？

經(jīng)過一系列排查，發(fā)現(xiàn)是chrome的初始font-size在小于12px時(shí)，還是會(huì)取12px，例如我們這里想設(shè)置為10px，但是還是會(huì)回到12px。

度娘告訴我：
chrome瀏覽器最小字體是12px，小于12px也會(huì)取為12px

解決辦法：
可以將font-size設(shè)置為625%，或者設(shè)置初始值到100px

但是這顯然不如10px方便，因?yàn)樵谝苿?dòng)端開發(fā)中，10px級(jí)的需求是更常見的，改成100px每次都去除以10，很麻煩。

最后在google經(jīng)過一系列的關(guān)鍵詞索引搜索，終于找到一個(gè)stackoverflow上的優(yōu)質(zhì)問答：Font-size <12px doesn"t have effect in Google Chrome

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

但是并沒有什么卵用，有一個(gè)哥們兒說這玩意兒在chrome27以后就不能用了，然后甩出一個(gè)更不靠譜的回答。
規(guī)范里也沒說到底1rem等于多少，MDN的文檔也說得不太對(duì)，chrome的rem值怎么成31px了...所以我們還是暫時(shí)認(rèn)個(gè)慫，就設(shè)置成100px算吧，用12px或者20px算更麻煩。

雖然沒有解決我們的本質(zhì)問題：1rem==10px，但是有新的收獲！

不知道大家有沒有注意過，當(dāng)我們遇到一些奇怪的css的問題的時(shí)候，總是會(huì)有-webkit，-moz等等開頭的奇怪的css屬性。

這些奇怪的-webkit，moz是什么呢？他們到底是什么呢？

通常的答案就是：瀏覽器前綴。錯(cuò)！最標(biāo)準(zhǔn)的答案是供應(yīng)商前綴！

MDN上有一篇非常好的文章，專門講供應(yīng)商前綴：Vender Prefix

我這里簡單總結(jié)下核心要點(diǎn)：CSS前綴，接口前綴和屬性方法前綴。

CSS prefixes
主要的瀏覽器在用以下的前綴：

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

API prefixes
歷史上，供應(yīng)商們也會(huì)用帶前綴的實(shí)驗(yàn)性的API。如果一個(gè)完整的界面是實(shí)驗(yàn)性的，那么界面的名稱是前綴（但是屬性和方法不會(huì)包括在內(nèi)）。如果一個(gè)實(shí)驗(yàn)性API或者方法被加入到一個(gè)標(biāo)準(zhǔn)的接口，獨(dú)立的方法或者屬性也會(huì)加上前綴。

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)

但是光知道他們是供應(yīng)商前綴中的CSS前綴還遠(yuǎn)遠(yuǎn)不夠，*{ -webkit-text-size-adjust: none; }這個(gè)玩意我們還沒搞清楚，只知道-webkit是前綴了，那后面的text-size-adjust是什么，一個(gè)完整的-webkit-text-size-adjust是什么，難道僅僅是一個(gè)實(shí)驗(yàn)性的css屬性嗎？

當(dāng)然不是，因?yàn)?webkit-text-size-adjust的正確分類是CSS extensions，你沒有看錯(cuò)，就是CSS插件，CSS也有插件?。ㄗ⒁?，這里的插件指的是瀏覽器引擎內(nèi)部底層的插件，去約束或者定義一些CSS該如何執(zhí)行的，而不是那種stylish之類的瀏覽器插件）

WebKit CSS extensions：https://developer.mozilla.org...
Mozilla CSS extensions：https://developer.mozilla.org...
Microsoft CSS extensions：https://developer.mozilla.org...

此處我將以WebKit CSS extensions為例，進(jìn)行一些探索：
基于WebKit或者Blink的應(yīng)用，例如Safari和Chrome，支持很多特殊的WebKit CSS插件。這些插件通常帶一個(gè)前綴-webkit。所有的-webkit前綴屬性可以用-apple前綴替代。一部分也支持-epub前綴。

WebKit-only properties(avoid using on websites)
注意：這些屬性只能在WebKit應(yīng)用程序中使用，并不在標(biāo)準(zhǔn)軌道上。
-webkit-aspect-ratio

WebKit-prefixed properties on the standards track
標(biāo)準(zhǔn)棧上的WebKit的前綴屬性
-webkit-appearance

Formerly proprietary properties that are now standard
以前是現(xiàn)在標(biāo)準(zhǔn)的專有屬性
注：為了最大限度地提高CSS的兼容性，您應(yīng)該使用沒有前綴的標(biāo)準(zhǔn)屬性，而不是下面列出的前綴。
-webkit-animation

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

Media features
媒體特性
-webkit-animation

至于 Mozilla CSS extensions和Microsoft CSS extensions，本質(zhì)上都是瀏覽器廠商各自引擎內(nèi)部的插件，大概了解下就可以了。

吐槽一句，關(guān)注js的我昨天阿里電話一面被問了很多css問題，涼涼，后面要把css也抓起來，前端不扎實(shí)就走node后端這條路，感覺有點(diǎn)難走，唉，行路難啊...

That it !

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115651.html

相關(guān)文章

  • PostCSS真的太好用了！

    摘要：下面的代碼違反規(guī)則下面的代碼符合規(guī)則禁止使用十六進(jìn)制顏色十六進(jìn)制的顏色違反規(guī)則無效的十六進(jìn)制色同樣違規(guī)下面的是符合規(guī)則的自動(dòng)將十六進(jìn)制色轉(zhuǎn)換為大寫或者小寫可以使用實(shí)現(xiàn)同樣的功能。 showImg(https://segmentfault.com/img/remote/1460000014782565); 在PostCSS官網(wǎng)有著這樣的對(duì)PostCSS特性介紹，箭頭后面是對(duì)應(yīng)功能的插件及...

    SKYZACK 評(píng)論0 收藏0

  • Webpack 4.X 從入門到精通 - 第三方庫（六）

    摘要：在開發(fā)的時(shí)候會(huì)時(shí)常用到第三方的庫或者框架，比如耳熟能詳?shù)?。使用第三方庫在入口文件?dāng)中直接導(dǎo)入安裝目錄結(jié)構(gòu)如圖內(nèi)容如下內(nèi)容如下陳學(xué)輝內(nèi)容如下這是自帶的內(nèi)容如下內(nèi)容如下引入后打開頁面會(huì)看到最后一個(gè)標(biāo)簽有了一個(gè)綠色的背景。 在開發(fā)的時(shí)候會(huì)時(shí)常用到第三方的庫或者框架，比如耳熟能詳?shù)膉query。借助它們能提高開發(fā)效率，但是如何在webpack中使用呢。這篇文章介紹兩個(gè)東西，如何使用第三方庫以及...

    dunizb 評(píng)論0 收藏0

  • k8s ：kube-apiserver 啟動(dòng)流程 - 1

    摘要：前言看源代碼有一段時(shí)間，總感覺在迷宮里亂竄，有時(shí)候覺得終于找到出口了，一下子又撞墻了，總結(jié)下來還是自己的內(nèi)功不夠深厚，本文是對(duì)遺留，即將廢棄初始化流程以及數(shù)據(jù)結(jié)構(gòu)的一個(gè)梳理，算是做個(gè)路標(biāo)，便于以后在迷宮中還能找到回來的路主要功能是提供接 前言 看 k8s 源代碼有一段時(shí)間，總感覺在迷宮里亂竄，有時(shí)候覺得終于找到出口了，一下子又撞墻了，總結(jié)下來還是自己的內(nèi)功不夠深厚，本文是對(duì) kube-...

    wwolf 評(píng)論0 收藏0

  • k8s ：kube-apiserver 啟動(dòng)流程 - 1

    摘要：前言看源代碼有一段時(shí)間，總感覺在迷宮里亂竄，有時(shí)候覺得終于找到出口了，一下子又撞墻了，總結(jié)下來還是自己的內(nèi)功不夠深厚，本文是對(duì)遺留，即將廢棄初始化流程以及數(shù)據(jù)結(jié)構(gòu)的一個(gè)梳理，算是做個(gè)路標(biāo)，便于以后在迷宮中還能找到回來的路主要功能是提供接 前言 看 k8s 源代碼有一段時(shí)間，總感覺在迷宮里亂竄，有時(shí)候覺得終于找到出口了，一下子又撞墻了，總結(jié)下來還是自己的內(nèi)功不夠深厚，本文是對(duì) kube-...

    RayKr 評(píng)論0 收藏0

  • Next框架與主流工具的整合（二）—— 完善與優(yōu)化

    摘要：從概念來說，就是設(shè)備的物理像素與設(shè)備獨(dú)立像素也就是邏輯像素，以下就稱為邏輯像素的比率。通過這個(gè)標(biāo)簽，我們可以實(shí)現(xiàn)初始縮放，就可以達(dá)到的邏輯像素眼睛在設(shè)備上看起來的，換句話說可以在上充滿豎屏的整個(gè)寬度。 前言：18年12月24日項(xiàng)目成功上線了，在經(jīng)歷了兩周的線上bug、UI以及代碼優(yōu)化后，解決了不少問題，于是再完善與優(yōu)化一下這個(gè)項(xiàng)目。 布局優(yōu)化 高清配置 antd-mobile 自定義...

    teren 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<