属性选择器是很强大很神奇的。很多时候可以帮助你摆脱一些棘手的问题，可以让你避免类名的添加，甚至还可以指出代码中的一些问题。属性选择器是复杂而又强大的，但不用担心，因为它也是易于学习和使用的。在本文中，将会学习到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属性。那么面对这么多的变化，以及使用的场景，我们应该怎么来选择，才是最优的选择。今天这篇文章，我们就来一起探讨一下这些东西，希望大家会喜欢。

首先要声明的是，我们在这篇文章中要了解的不是CSS混合模式如何使用，而是来一起探索CSS混合模式的一些高级运用以及它能做些什么，又会带来什么样的效果。操作过像Photoshop这样的图像处理软件的同学，对于图层混合模式一定不会感到陌生，但对于CSS中的混合模式，估计还是有不少的同学会感到陌生或者好奇。在这篇文章并不会介绍CSS的混合模式相关的属性怎么使用，而会探讨CSS的混合模式的一些高级运用，以及对应的效果。

如果考虑周全，滚动捕捉可以是一个有用的设计工具。CSS Scroll Snap Points允许你连接到浏览器的本机滚动交互，因此你的界面感觉无缝且平滑。随着JavaScript API的出现，这些功能将变得更加强大。CSS Scroll Snap（CSS 滚动捕捉）允许你在用户完成滚动后多锁定特定的元素或位置。

@evilmartians的《滚动的特性》一文介绍了目前有关于滚动相关的特性。今天我想花点时间重新整理一下，时至今日，CSS中为浏览器滚动提供的相关新特性究竟能给用户带来哪些新的体验。