如果您对前端方面有所关注，那么对CSS一定不会陌生，你也肯定听说过一些CSS的新特性。在使用CSS新特性之前，你应该对这个新一代样式表语言的来龙去脉有个基本了解。在本章节中，你将知道一个CSS属性的制定将会经历哪些过程，为什么会有浏览器的私有前缀以及如何更好的处理这些私有前缀，在文章最后简单的介绍了开发人员如何对CSS新特性做一些渐进增强，优雅降级的处理，给你的用户有一个更好的，更佳的体验。

从这篇文章开始，将会花几篇文章的篇幅来介绍如何构建一个在线的计算器，将前面学习的一些知识串在一起，通过实战加强对理论知识的理解。实现计算器主要分为两个部分，一个是构建计算器的UI，另一个通过JavaScript实现计算器的功能。在完成这两个部分内容的学习，建议您需要对下面的几个知识点有所了解： 网格布局和 渐变。

在开始聊CSS选择器Level 4（Selectors Level 4）之前，先要明确一个简单的概念。时至今日，在CSS的世界之中再不会有大版本的称谓，比如以前大家熟悉的CSS2.1、CSS3。现在的CSS都只会以CSS模块的版本来进行区分，比如我们今天要聊的CSS选择器，其最新版本就是：CSS Selectors Level 4。在CSS Selectors Level 4中为选择器增添了不少的新特性，当然这些新特性有的已得到浏览器的支持，有的只得到部分主流浏览器的支持。所以接下来，花点时间学习一下，以备后用。

属性选择器是很强大很神奇的。很多时候可以帮助你摆脱一些棘手的问题，可以让你避免类名的添加，甚至还可以指出代码中的一些问题。属性选择器是复杂而又强大的，但不用担心，因为它也是易于学习和使用的。在本文中，将会学习到CSS属性选择器的强大功能以及如何在实际工作中运用它。并提供了一些关于如何使用属性选择器的一些个人想法。

前段时间@Zell Liew的博客深入的介绍了CSS中伪选择器:empty和:blank相关的知识。那么:empty和:blank究竟有什么作用，又在什么场景下使用呢？今天我们来一起看看，它们怎么使用，更应该应用在哪个场景之下呢？

记得在去年双11的互动页面中，我们折腾了一波iPhone8、iPhone8 plus和iPhone X的适配，特别是iPhone X刘海区域的适配。针对这方面的页面适配，沉淀出相应的适配方案。而今年的双11期间，苹果又推出了iPhone XS、iPhone XR和iPhone XR Max以及众多的安卓刘海设备。言外之意，前端在这方面的适配变得越来越复杂。面对众多场景，我们应该怎么去面对呢？接下来聊聊我在今年双11的主互动玩法中是怎么处理的。

到目前为止，CSS的渐变属性linear-gradient和radial-gradient已经是很成熟的CSS特性了，而且repeating-linear-gradient和conic-gradient也越来越成熟。CSS渐变特性对于我们的帮助已经非常强大了，它们可以帮助我们绘图、创建图片占位符、制作环形进度条等等。另外还可以通过transition和animation让渐变动起来。

2017年5月18日，W3C的 CSS工作组（CSS Working Group） 发布了 CSS逻辑属性和值（CSS Logical Properties and Values Level 1） 的首份工作草案（First Public Working Draft）。不同的书写模式（writing mode）中，可以抽取出共性的抽象概念（如开始位置，或行），这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式（而不是基于物理坐标、书写方向和维映射等）控制布局的逻辑属性和取值（logical properties and values）。这个模块来源于CSS21中关于逻辑属性和值的特性。

在CSS中，使用border-radius指定八个半径值时，可以创建不同的形状。先来看一个为该特性制定的工具。@Rachel Andrew今年在苏黎世的前端会议上谈到了CSS Grid布局的优势。在她演讲的最后，她提到了一个在我脑海中挥之不去的CSS 属性:通过border-radius可以使图像有良好的形状效果。听完这个演讲之后，我认为你肯定可以创造出更多的圆圈，并开始深入挖掘使用border-radius可以做什么？

图片在Web上的使用占比已经非常的高，特别是在手淘互动这样的环境之下，我们每一个项目的图片使用量都非常的大。如果能把图片用好，的确是件不容易的事情，而且面对的挑战也不小。经常会碰到有关于图片如何加载，如何适配，如何优化等等。另外在移动端开发中，很多同学在Web上使用图片的方法一般都是通过<img>标签和CSS的background-image属性来处理。也正因如此，很多同学却忘记了这两者应该如何？怎么使用又是最优的。甚至有很多前端同学都已经忘记了这两者的差异是什么？加上Web的技术不断革新，事实上除了前面提到的加载图片的方式之外，还有其他的方式，比如HTML5的<picture>（虽然这个元素标签曾经一度废弃过，但后来又添加回来了）。就算还是使用img标签，也有了新的优化，比如img的srcset属性。那么面对这么多的变化，以及使用的场景，我们应该怎么来选择，才是最优的选择。今天这篇文章，我们就来一起探讨一下这些东西，希望大家会喜欢。