rem / Vender Prefix / CSS extensions

khs1994 发布于2019-08-30 13:56 / 1678人阅读

摘要：如果一个完整的界面是实验性的，那么界面的名称是前缀但是属性和方法不会包括在内。如果一个实验性或者方法被加入到一个标准的接口，独立的方法或者属性也会加上前缀。注意这些属性只能在应用程序中使用，并不在标准轨道上。

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

我自己写了个demo，发现有一个很奇怪的现象：rem可以用在width和height，但是有点不准确。

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 extensions：https://developer.mozilla.org...
Mozilla CSS extensions：https://developer.mozilla.org...
Microsoft CSS extensions：https://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 !

云服务器 GPU云服务器 Vender prefix prefix策略 extensible

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115651.html

PostCSS真的太好用了！

摘要：下面的代码违反规则下面的代码符合规则禁止使用十六进制颜色十六进制的颜色违反规则无效的十六进制色同样违规下面的是符合规则的自动将十六进制色转换为大写或者小写可以使用实现同样的功能。 showImg(https://segmentfault.com/img/remote/1460000014782565); 在PostCSS官网有着这样的对PostCSS特性介绍，箭头后面是对应功能的插件及...

SKYZACK 2019-08-29 15:18 评论0 收藏0
Webpack 4.X 从入门到精通 - 第三方库（六）

摘要：在开发的时候会时常用到第三方的库或者框架，比如耳熟能详的。使用第三方库在入口文件当中直接导入安装目录结构如图内容如下内容如下陈学辉内容如下这是自带的内容如下内容如下引入后打开页面会看到最后一个标签有了一个绿色的背景。在开发的时候会时常用到第三方的库或者框架，比如耳熟能详的jquery。借助它们能提高开发效率，但是如何在webpack中使用呢。这篇文章介绍两个东西，如何使用第三方库以及...

dunizb 2019-08-23 11:32 评论0 收藏0
k8s ：kube-apiserver 启动流程 - 1

摘要：前言看源代码有一段时间，总感觉在迷宫里乱窜，有时候觉得终于找到出口了，一下子又撞墙了，总结下来还是自己的内功不够深厚，本文是对遗留，即将废弃初始化流程以及数据结构的一个梳理，算是做个路标，便于以后在迷宫中还能找到回来的路主要功能是提供接前言看 k8s 源代码有一段时间，总感觉在迷宫里乱窜，有时候觉得终于找到出口了，一下子又撞墙了，总结下来还是自己的内功不够深厚，本文是对 kube-...

wwolf 2019-07-01 17:29 评论0 收藏0
k8s ：kube-apiserver 启动流程 - 1

摘要：前言看源代码有一段时间，总感觉在迷宫里乱窜，有时候觉得终于找到出口了，一下子又撞墙了，总结下来还是自己的内功不够深厚，本文是对遗留，即将废弃初始化流程以及数据结构的一个梳理，算是做个路标，便于以后在迷宫中还能找到回来的路主要功能是提供接前言看 k8s 源代码有一段时间，总感觉在迷宫里乱窜，有时候觉得终于找到出口了，一下子又撞墙了，总结下来还是自己的内功不够深厚，本文是对 kube-...

RayKr 2019-07-01 16:41 评论0 收藏0
Next框架与主流工具的整合（二）—— 完善与优化

摘要：从概念来说，就是设备的物理像素与设备独立像素也就是逻辑像素，以下就称为逻辑像素的比率。通过这个标签，我们可以实现初始缩放，就可以达到的逻辑像素眼睛在设备上看起来的，换句话说可以在上充满竖屏的整个宽度。前言：18年12月24日项目成功上线了，在经历了两周的线上bug、UI以及代码优化后，解决了不少问题，于是再完善与优化一下这个项目。布局优化高清配置 antd-mobile 自定义...

teren 2019-08-23 14:49 评论0 收藏0