本文作者：高峰，360奇舞团前端工程师，W3C性能工作组成员，同时参与WOT工作组的学习。 我们都知道对于网站来说，性能至关重要，CSS作为页面渲染和内容展现的重要环节，影响着用户对整个网站的第一体验。因此，与其相关的性能优化是不容忽视的。 对于性能优化我们常常在项目完成时才去考虑，经常被推迟到项目的末期，甚至到暴露出严重的性能问题时才进行性能优化，相信大多数人对此深有体会。 笔者

要问2018最让人兴奋的CSS技术是什么，CSS Houdini当之无愧，甚至可以去掉2018这个限定。其实这个技术在2016年就出来了，但是在今年3月发布的Chrome 65才正式支持。CSS Houdini可以做些什么？谷歌开发者文档列了几…

前情提要 此文内容涉及： 素数的判定与筛选CSS 计数器及其作用域伪元素生成内容层叠样式flex突发奇想某天在查 nth-child 伪类的时候，突然想到，既然 nth-child 伪类可以选择【处于某个数的所有倍数位置】上的元素…

简评：使用图片和 CSS 样式来制作网页图标的日子已经过去了，随着网页字体的爆发，图标字体成为展示图标的第一解决方案。字体都是向量，所以你不必担心分辨率的问题。它们能作为文本来用 CSS 属性修饰，所以你能够…

在页面构建中，能明显提升页面显示质量的一些CSS小技巧。很多简洁美观的页面表现，可以使用CSS3代码即可实现，减少图片的使用。

最近在做公司的登录页，UE同学希望第三方登录的图标在hover的时候有一个圆形的缩放效果（原话是波纹效果-_-||），效果参考腾讯新闻和网易新闻的分享按钮。 腾讯新闻的分享按钮hover效果（新闻页面）：

Preload 作为一个新的web标准，旨在提高性能和为web开发人员提供更细粒度的加载控制。Preload使开发者能够自定义资源的加载逻辑，且无需忍受基于脚本的资源加载器带来的性能损失。在 HTML 代码中，它看上去大概是…

这篇文章发布于 2016年06月8日，星期三，01:17，归类于 CSS相关。 阅读 161075 次, 今日 17 次 81 条评论 by zhangxinxu from http://www.zhangxinxu.com 本文地址：http://www.zhangxinxu.com/wordpress/?p=5429 补充于2018-11-26 有多个比本文更好的实现方法，请参考这篇文章：&

导读：本文描述了企业微信前端团队是如何借助Stylelint 做自动化Code Review 以提升CSS 代码质量。内容包括从一开始的技术选型到开始制定规则，再然后如何在团队中进行有效的推动及配合svn hook 等探索各种自动化的监督机制。其中遇到的难点在于如何处理旧的项目代码，以及如何进行有效

CSS 技术的演进CSS 是 Web 开发中不可或缺的一部分，在前端工程化的不断进步的今天，一方面在 CSS 特性随着规范的升级越来越丰富，另一方面，前端业务复杂性的增加带来的工程愈加庞大，驱使者开发者不断寻找CSS工…

如何利用工具进行首屏的提取，来看看

by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6426 本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。 一、iPhone X的刘海发型和衍生的交互 iPhone X造型上有个显著的特质，就是有个明显的刘海。 然后&#