颜色的魅力是无穷的，它可以让本身很平淡的东西瞬间变得漂亮、美丽起来。正如古话所言，佛靠金装，人靠衣装一样，网页也是如此，随着互联网的迅速发展，只有简单的文字和图片的网页，无法满足人们的需求了，一个网页给人们留下的第一印象，既不是他的内容，也不是他的设计，而是整站的整体颜色，这将决定用户是否继续浏览下去。为了能够达到人们的需求，Web设计师除了需要掌握网站制作的技术之外，还必须能够很好的应用Web颜色。换句话说，网站颜色的使用好坏，直接影响网站的生存力。

在A11Y 101系列的构建可访问性应用的2W1H中和大家聊了构建Web可访问性的重要性。构建可访问的Web是Web开发的重要组成部分之一，构建出一个具有可访问性的Web页面或应用程序能确保有障碍的人士能够平等的访问Web，使他们能够享有访问Web的权力，也能让他们更好的融入于社会，使其生活变得更有意义。这也是Web开发者应该担当的责任。在这篇文章中，将和大家聊聊，构建Web可访问性的检查清单。希望能帮助更多的开发者能更容易开发出更具可访问性的Web页面或Web应用。

试问一下，你可知道CSS中有多少个属性呢？说实在的还真答不上来。根据 CSS Reference 统计来看，差不多有200个属性（不包括浏览器自带的私有属性）。在这些CSS属性中，很多属性的值是关键词 auto，比如我们熟悉的margin、padding和overflow等。虽然他们的值都可以取值auto，但是差别却很大。CSS就是这么的神奇，充满魔性，如果不了解的话，会无声无息地将你带入坑中。另外一点，搞懂CSS中会让你很兴奋，至少我是这样的。今天就和大家一起来聊聊auto。

在Web的开发中，对于下拉选项的称谓各有不同，比如下拉菜单，下拉选择框等等。不同的场景之下，采用的方式也有所不同，比如在表单中会使用<select>元素，在自动输入框时会使用HTML的<datalist>和<input>结合使用。而表单中的控件在Web中是件复杂的事情，特别是CSS样式方面更是如此。在这篇文章中，我们就一起来聊聊Web下拉选项相关的事情。

在Web中给文本添加下划线常常出现在<a>链接的文本上，早期一般使用text-decoration属性给文本添加下划线、删除线等。除了text-decoration之外，CSS还有很多技术方案可以给文本添加下划线效果，比如border-bottom、box-shadow、background-image等。对于Web开发者而言，更庆幸的是，CSS还有更多的，更灵活的特性实现文本下划线的效果。在这篇文章中，将和大家一起聊聊CSS中其他的特性怎么实现一个更有创意的效果。

图像是Web中最常见的媒体属性之一，对于开发者而言，都知道使用HTML的<img>元素或CSS的background-image属性可以将图像放到Web上，但更多的时候都在聊，如何使用CSS相关的属性来处理Web中的图像，比如使用图像的适配、图像效果的处理等。事实上，HTML中的<img>元素也有很多属性对于我们在Web中使用图像起着重要的作用，特别是随着前端技术革新，<img>新增了一些新的属性，比如srcset、sizes、loading和intrinsicsize等。

Web排版和传统的印刷排版之间的差距不是一点点，而且Web排版一直以来都令Web开发者感到头痛，由其是Web中的字体。或许你在平时开发Web页面或Web应用的时候已经发现在Web上需要渲染一些更具艺术风格的字体，或者希望在响应式Web排版的设计中让文字能根据断点做出相应的响应等。虽然通过一些技术手段可以实现类似的效果，但同时也会造成许多新的问题产生。幸运的是，2015年开始推出了OpenType字体格式，以一些非常显著的方式改变了开发者面临的实际困难。他们有能力在较小的文件下为Web带来更丰富的排版性，但随着新的可能性和优势，新的挑战和复杂性也随之出现。那么，OpenType字体的引入之后会给Web带来什么样的变化？我们又应该在Web中怎么使用？接下来，我们一起来探讨这方面的话题。

在探索A11Y和H5 Dark Mode的时候，我们发现使用CSS的一些属性可以识别出用户的偏好设置，比如prefers-reduced-motion来识别设备是否开启了Reduce Motion功能，用prefers-color-scheme来识别设备是否开启了Dark Mode模式。而这些都是CSS新的媒体特性，即 Media Queries Level 5规范中介绍的特性，该规范除了这两个新特之外，还有其他的新特性，接下来，我们来一起看看CSS媒体查询新增了哪些特性。

写CSS有些年头了，经历了不同的时期用不同的姿势来编写CSS，其目的就是给Web元素添加样式。但编写样式着实令人感到烦恼，甚至是效率低下，成本极高。也正因如此，社区中有很多CSS方法论和框架来帮助开发快速有效编写CSS。虽然这些方法论和框架有助于我们快速编写CSS，构建UI组件，但也有令人感到头痛之处，比如冗余的代码，代码的覆盖等。随着功能第一（Utility-First）CSS的出现，让我看到了编写CSS的另一种有效的方式，该方式也被认为是现代Web中构建Web界面最好的选择。其中Utility-First CSS的典型作品之一就是Tailwind CSS。接下来，我们就来了探讨Tailwind CSS，我们将了解基于组件的样式有哪些问题，以及为什么要基于Utility-First CSS来构建组件。

链接和按钮在Web中可以说是最常见不过的东东了。但很少人会去问自己在构建Web的时候，链接和按钮是否用对了，或者说什么时候用链接或按钮？事实上呢？在现代的Web中，特别是在移动端，构建链接和按钮不在局限于<a>或<button>标签上了，可以说是HTML中的其他元素，比如大家喜欢用的<div>、<span>，甚至还有不少用<p>以及其他标签。作为一位专业的Web开发者来说，这样做真的无所谓呢？还是可以改进呢？特别是想让Web更具语义化，更具可访问性的时候，这小小的差异就很值得我们去花时间探讨。