时至今日，Web页面或Web应用上色彩都是很丰富的。一般情况之下，开发者给Web上色大多是根据视觉设计师提供的设计稿来定义。颜色除了能决定Web在视觉上的美观之外，还能直接影响Web可访问性。因为访问或使用你产品的用户可能会在较亮的环境下（比如阳光下），或设备陈旧上（比如低分辨率显式器），颜色可以直接决定用户能否较好的访问。除此之外，可能有一些视觉障碍的用户（比如视弱，色盲）使用你的产品，这群用户群体同样会受颜色影响。

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

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

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

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媒体查询新增了哪些特性。

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

最近在翻阅信息时发现很多人都在聊一个新的东西，这个新东西就是Neumorphism，对此我也感到好奇，花了一点时间去了解了一下为什么这么多人都在聊“Neumorphism”。原来 “Neumorphism”是一种UI设计风格，该UI风格是因为设计师 @Alexander Plyuto 在Dribble上发表的一份作品而变得流行起来。很多人都认为“Neumorphism”会成为2020年的一种设计趋势，事实上在过去几个月它已经成为一种新的设计潮流，但事实真正是这样的吗？如果是，作为Web开发者又如何能快速响应设计师的需求，快速而又精准的还原出“Neumorphism” UI效果。那么今天我们就来聊聊这方面的话题。

看到该标题，我想你可能会感到非常的意外和好奇，“CSS怎么能加把锁呢”？其实这里所说的给CSS加把锁是指业内所说的CSS Locks（或者CSS calc Lock）。该概念是@Tim Brown在2012年提出的一个概念，该技术其主要致力于解决文本排版可读性相关的技术难度，特别是在实现一些精准的流式布局中的文本排版。在《Web技术10》中也提到过，@Mike Riethmuller、@Tim Brown和@Geoff Graham都在致力于这方面的研究，而且找到了使用CSS锁技术方案来锁定流式排版。让我们实现一个精准的流式排版不再是难题。在今天这篇文章，我们来一起探讨一下CSS锁的故事。

Web布局可以说是灵活的也是久被受限的。在众多的开发者眼里，Web的布局就应该是方方正正的，因为Web中的每个元素都类似一个盒子，这些盒子就是方方正正，规规矩矩地。同时在很多视觉的眼里也认为，Web的布局无法打破矩形排列的限制。比如说，要在Web中实现一个类似杂志的排版是非常困难的，甚至是不太可能的。值得庆幸的是，时至今日，Web的技术在不断的革新，很多新的特性可以让我们打破这样的限制，让你在Web上实现像杂志一样的排版布局。接下来，我们就来看看，在Web中实现媒体布局会有哪些亮点，有可能会用到哪些特性。