「 我是如何记住CSS Grid的属性的 」

CSS Grid布局是CSS中一个强大的布局系统，与Flex不同，Grid是一个基于网格的二维布局方式，你可以同时处理行和列的结构。Grid的强大决定了Grid有很多的属性，每个属性又有多个属性值，所以要记住这些属性并能灵活运用不是一件简单的事。作者在该文中介绍了他是怎么记住这些...

维护CSS代码的关键：排序（order)

CSS作为软件开发中的二等公民，它被设计用来显示内容并设定样式排版。然而开发者们经常会为了一堆杂乱的CSS代码头疼，维护这种CSS代码的时候，有时候不知道如何下手，生怕改一个属性就会引起不知道的bug。文中讲述了一种写出可维护的CSS代码的方法，就是为CSS属性进行排序。作者排序...

web性能101

web性能为什么重要？加载很慢的网站会让人很不舒服；web性能直接影响你的产品；什么样的网站算是快的网站？加载快；运行快（动画不掉帧，滚动很顺滑等）；服务器响应时间短；应用加载和渲染的很快。文中介绍了几种提升网站加载和渲染速度的方法：JavaScript。JavaScript通常...

CSS和网络性能

总体上来说，下面这些是为什么CSS对性能这么重要的原因： 浏览器必须等到渲染树完全渲染才能渲染页面； 渲染树的DOM和CSSOM整合到一起的结果； DOM是阻塞JavaScript渲染的HTML等； CSSOM是所有被应用到DOM上的CSS规则； 可以给JavaScript设置...

前端项目共有的CSS问题

当浏览器应用一个用户交互界面时，一种很好的方式是可以最小化差异和问题，UI是可预测的。想要追踪到所有的差异是比较困难的，所以我将这些共同问题整理成一个列表，为你在做新项目时提供一个简单易用的参考指南。 1.重置button和input元素的背景 当我们添加button时，重置bu...

使用CSS变量创建一个切换暗黑/浅色模式的功能

随着苹果在 MacOS 和 iOS 上相继推出暗黑模式，越来越多的Web网站也开始推出响应的暗黑模式，创建暗黑模式的方式有很多个，作者介绍了一种使用CSS变量的方式来实现一个方便将网站切换到暗黑模式的一种切换器。 要很好地理解本文的内容，需要对CSS变量的概念和实践有一些经验。 ...

有多少个CSS属性？

故事起源于Twitter上的一个笑话Tweet（给所有的CSS属性命名）和它的一个回答。最后，延伸成一个npm包，你可以用下面的命令查看有多少个CSS属性： npx get-all-css-properties Duang！一共返回了259个属性。 ╭- 🤖 🤖 🤖 ...

不止在CSS过渡动画中使用easing

过渡一般分线性和缓和曲线。线性过渡是以全速开始，移动的过程和结束都是全速的进行，不像我们在现实中的场景，比如你扔一个东西不会立即全速坠落。 在写CSS动画的时候，大家应该经常会用到贝塞尔曲线，一个好的贝塞尔曲线可以让动画变得圆滑，仿照现实生活中的样子。其实，只要是在两个状态之间过...

如何用CSS创建打印机友好的页面

不是所有的页面都需要考虑兼容打印机，这篇文章通览以下通过CSS创建打印机友好的页面的艺术。需要兼容打印机的页面大概有以下几种： 打印旅行或音乐会门票 复印旅途方向或时间表 保存线下阅读的复印件 获取连接不良地区的信息 危险或肮脏地区的有用数据-比如，厨房或工厂 手写注释的草稿内...

CSS4来了！

我们这些被W3C CSS WG支持的Web开发者们，在说“CSS4来了”，并一直在讨论它将会怎么改变业内的现状，改变现有的CSS实践。 CSS4到底有什么新特性？这些新特性对业内将有什么影响呢？建议阅读原文。