链接和按钮在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中实现媒体布局会有哪些亮点，有可能会用到哪些特性。

在《如何使用CSS实现黑暗模式和高亮模式的切换》和《给网站添加暗黑模式指南》主要围绕着如何使用CSS的技术给Web添加Dark Mode的功能。在这篇文章中我们把重点放在了React环境中，详细介绍了如何在React中实现Dark Mode的效果，另外还向大家介绍了一Darkmode.js这样的JavaScript怎样实现Dark Mode的效果。感兴趣的欢迎继续往下阅读。

最新版本的Firefox（v72）浏览器的发布，在CSS方面带来了一些变化，比如对CSS路径动画（CSS Motion Path）的支持和CSS Transforms Module Level 2部分功能的支持。在这篇文章，我们就来一探CSS Transforms Module Level 2给CSS Transform带来的变化以及和CSS Transforms Module Level 1的差异。但在这篇文章中我们不会和大家聊所有Level 2中的内容，只是聊聊和level 1的变化，如果你感兴趣的话，请继续往下阅读。

在Web网站或Web应用程序上经常能看到动效的效果，而且实现动效的方式有很多种，比如说CSS、SVG、Canvas、WebGL以及JavaScript等技术手段都可以实现。到目前为止，CSS Animations Level 1、CSS Transitions、Web Animation API以及CSS Houdini的CSS Animation Worklet API等规范可以很好的指导我们如何制作Web动效。特别是CSS的animation和transition令CSSer感到兴奋，因为它们可以让我们使用纯CSS就可以实现以前很多需要依赖JavaScript才能实现的动效。CSS的animation和transition实现从A点到B点的动画效果很简单，而且效果也不错，但这些效果都具有一个特性，即 沿着一条直线运动。即使你使用贝塞尔曲线也无法让某物体（运动对象）沿着曲线路径运动。简单地说，就是无法很好或者轻易的实现路径动画效果。

众所周之，Web上的任何一个元素都是一个盒子（框模型），对于该盒子在CSS中有一个专业的术语，即CSS盒模型。其中CSS的display属性可以改变盒子的格式化上下文，每个格式化上下文都拥有自己不同的渲染规则，而这些规则是用来决定其子元素是如何定位，以及和其他元素的关系，这些关系中也包括了盒子大小。换句话说，Web中的任何一个元素都是有大小的，即使没有给元素设置任何有关于大小的属性。了解如何设置元素大小是非常重要的，因为它们直接会影响一个元素的渲染，特别是在页面布局的时候非常重要，而且在使用Flexbox和Grid布局时，元素大小变得就越来越重要。另外在Flexbox和Grid中有很多内置的灵活性，因为它们管理项目在容器中怎么显示。在CSS中有一个独立的功能模块（CSS Intrinsic & Extrinsic Sizing Module Level 3）是用来定义元素大小的。接下来的内容，我们就来一起探讨该模块中的相关属性与特性。

2019年对于CSSer来说是幸运的一年。年中的时候业界出了一份CSS状态报告，而且在年末的时候Web图鉴也对CSS做出相应的分析。这些数据对于一位Web的从业者来说是非常有利的，这些重要的数据告诉CSSer们CSS目前的一种状态，以及应该去掌握哪些CSS特性等。今天要和大家聊的既可以说是新特性（因为很多同学觉得这些东西离实际使用还很远），但也是旧的东西（因为对于时刻关注CSS发展的同学来说是旧的）。前段时间刚结束的2019年Chrome Dev Summit（CDS）大会上，@Adam Argyle和@Una Kravets一起分享了一个非常有趣的话题，这个话题就是有关于CSS特性的东东。也被称为是应用于下一代Web的样式。

几米的绘本《向左走，向右走》自1999年出版，就一直是爱情的代名词。在Web的世界中有着同样的故事，即Web的向左向右，指的就是Web的排版方式（比如，左浮动、右浮动，Box Alignment中对齐方式等）、对齐方式（比如左对齐、右对齐）、书写方式（比如从左向右、从右向左）等。而Web中的向左向右和书写习惯（比如Writing Mode）有着紧密的关系，社区中很多开发者可能只习惯于自己的书写方式（比如从左向右），但事实上世界中还有很多其他语言，不同的语言其书写方式是不同，比如阿拉伯语，它就是从右向左。如果希望给用户提供一个更具体验的Web网站或应用，作为开发者就有必要掌握如何针对不同语言提供不同的呈现方式。这就是我和大家将要一起聊的Web中向左向右。