在Web中通过HTML的表单和用户交互是最常见的方式之一，同时HTML的表单也是Web最为复杂的交互部分之一。正因为其复杂，Web中的表单开发也令开发较为头疼。另外，Web表单涵盖了很多部分，除了我们最为熟悉的的<input>、<button>、<select>等表单元素之外，还有其他新的表单元素，比如在HTML5新增的<datalist>、<output>、<progress>和<meter>等元素。简单地说，这些元素可以构建出人与机对话或交互用户界面，然而由于历史和技术上的原因，如何充分发挥它们的潜力并不总是显而易见的。就拿<input>来说吧，要想彻底了解和懂得用<input>并不是易。既然如此，我们在这篇文章中就来和大家聊聊<input>中的故事。

颜色的魅力是无穷的，它可以让本身很平淡的东西瞬间变得漂亮、美丽起来。正如古话所言，佛靠金装，人靠衣装一样，网页也是如此，随着互联网的迅速发展，只有简单的文字和图片的网页，无法满足人们的需求了，一个网页给人们留下的第一印象，既不是他的内容，也不是他的设计，而是整站的整体颜色，这将决定用户是否继续浏览下去。为了能够达到人们的需求，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排版和传统的印刷排版之间的差距不是一点点，而且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更具语义化，更具可访问性的时候，这小小的差异就很值得我们去花时间探讨。

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