CSS Grid经过这么多年的发展已经越来越受人青眯了，到目前为止支持率得到近88%的比例。经过这么多年的跟踪和学习，对CSS Grid的特性也是略有所知，但还未达到完全的融汇贯通。因为它有很多的特性，而且这些特性对于CSSer来说很多都是新的概念，比如我们今天要说的分数单位fr就是一个新东东。那么这篇文章，咱们就来一起看看这个特性有什么特性，给我们又能带来什么好处。感兴趣的同学，请继续往下阅读。

在《探索Web上图片使用方式》一文中介绍了Web上图片的各种使用方式，从引入图片、图片效果处理、图片适配、图片加载以及图片优化几个方面介绍Web的图片使用方式。其中有一个值得我们去探讨的话题，那就是如何根据用户的设备为其提供正确的图片。那在这篇文章中我们就一起来聊聊这方面的技术。

如果您对前端方面有所关注，那么对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中关于逻辑属性和值的特性。