这篇文章主要介绍”CSS3的私有前缀有哪些”,在日常操作中,相信很多人在CSS3的私有前缀有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答“CSS3的私有前缀有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
CSS3作为页面样式的表现语言,增加了很多新的属性,但是部分CSS3属性在一些浏览器上还处于试验阶段,所以为了有效的显示CSS3的样式,对应不同的浏览器内核需要不同的前缀声明,例如:
<强> CSS3中的私有前缀
-moz -: Firefox,壁虎引擎
Webkit -: Safari和Chrome, Webkit引擎
- o -:歌剧(早期),转眼间引擎,后改为Webkit引擎
- ms -: InternetExplorer,三叉戟引擎
使用这些前缀,才能保证CSS3的属性在特定浏览器渲染引擎下生效。统一引擎一般不识别其它引擎的前缀,目前移动端的浏览器相对比较统一,都是采用的Webkit引擎,所以如果我们只需要兼容移动端,只需要带Webkit -前缀即可。
<强> CSS3前缀如何使用
在使用CSS3新属性的时候,一般需要把带有前缀的属性放于前面,把不带前缀的版本放到最后一行:
1-webkit-box-shadow: 05 px5pxrgba (0, 0, 0, 0。5);
2-moz-box-shadow: 05 px5pxrgba (0, 0, 0, 0。5);
3-o-box-shadow: 05 px5pxrgba (0, 0, 0, 0。5);
4不必:05 px5pxrgba (0, 0, 0, 0。5);
随着浏览器的升级,目前大多数新版本浏览器都已经支持不带前缀的写法了,所以带前缀只是为了兼容低版本,不带前端的才是标准属性。
那么如果想移除这些前缀,同时又满足兼容的办法也是有的。我们可以选择Autoprefixer工具,一个以最好的方式处理浏览器前缀的后处理插件,无论你是用webpack,吞咽,呼噜声还是fis,它都能完美配合。
使用Autoprefixer你可以完全忘记有CSS前缀这东西,尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀。像这样:1
{
2显示:flex; 3}
Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀,输出:
复制代码1
{
2显示:-webkit-box;
3显示:-webkit-flex;
4显示:-ms-flexbox;
5显示:flex 6}
到此,关于“CSS3的私有前缀有哪些”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!
