共计 1295 个字符,预计需要花费 4 分钟才能阅读完成。
因为各大浏览器的兼容问题,autoprefixer 插件 就能够帮咱们主动补齐前缀。它和 less
、scss
这样的预处理器不同,它属于 后置处理器。
- 预处理器:在打包之前进行解决
- 后置处理器:在代码打包生成后再进行解决
autoprefixer
其实是 postCss
的一个插件,postCss
自身是一个用 JavaScript
工具和插件转换 CSS
代码的工具,它提供了许多弱小的解决 CSS
的性能。
autoprefixer
插件广泛应用于前端我的项目的打包配置中,具体配置请参考官网文档。
Autoprefixer css 补全前缀性能
Autoprefixer
解决前 css
代码
display: flex;
Autoprefixer
解决后 css
代码
display: -webkit-box;
display: -ms-flexbox;
display: flex;
点击这里,在线测试 css 款式在不同浏览器的主动补全成果!
CSS- 文本超出显示省略号
布局款式中,常常会遇到超出显示省略号的需要,有的显示一行,有的显示两行、三行,通常采纳如下款式:
-
单行文本省略
// 文本溢出省略号 .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
- 多行文本省略
这里应用的是 less
混合传参的形式
.clamp_fun(@line: 1) {
overflow: hidden;
text-overflow: ellipsis;
/* autoprefixer: off*/
-webkit-box-orient: vertical;
/* autoprefixer: on*/
display: -webkit-box;
-webkit-line-clamp: @line;
}
.clamp_1 {.clamp_fun(1);
}
.clamp_2 {.clamp_fun(2);
}
.clamp_3 {.clamp_fun(3);
}
display: -webkit-box;
将对象作为弹性伸缩盒子模型显示。-webkit-line-clamp: 2;
这个属性不是 css 的标准属性,须要组合下面两个属性,示意显示的行数。-webkit-box-orient: vertical;
从上到下垂直排列子元素(设置伸缩盒子的子元素排列形式)
编译报错问题解决
下面通过正文 autoprefixer off on
,编译中报错,错误信息如下:
(43:3)Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
这种写法曾经过期了,采纳上面的写法:
/* autoprefixer: ignore next */
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
我是 甜点 cc☭
微信公众号:【看见另一种可能】
酷爱前端开发,也喜爱专研各种跟本职工作关系不大的技术,技术、产品趣味宽泛且浓重。本号次要致力于分享集体经验总结,心愿能够给一小部分人一些渺小帮忙。
正文完