时间如梭，又一年双11圆满收官了。作为技术宅男除了买买买之外还能和大家聊的就是前端技术了。"淘宝盖楼"上热搜了，我想你应该也参加了双十一淘宝盖楼吧，是不是觉得特别的酸爽。今年有幸参与盖楼的互动活动的开发中备感荣幸，因为我们的努力让全民都爽了。在开始之前要先感谢一下曾经努力的自己！楼盖完了，我们回过头来聊聊这次多人互动PK在开发的时候用了哪些有意思的前端技术。感兴趣的同学，请继续往下阅读。

构建可访问性Web应用时，很多人都可能会认为这应该是HTML的事情，或者说是WAI-ARIA的事情。或许也会问，可访问性和CSS又有啥关系呢？虽然CSS有很多特性（特别是发展到今天）可以让我们美化Web页面或应用程序变得更简单和更灵活，但这些强大的特性也可能让我们的用户体验变得特别的糟糕。实际上，仅用一行代码*{outline:none 0}就可以使一个网站或Web应用的可访问性变得非常的糟糕。也就是说，编写CSS可以直接影响Web的可访问性。在这篇文章中，我收集了一些技术、注意事项和方法来帮助你在编写CSS时不会影响Web可访问性，反而提高Web的可访问性。

最近@Robin Rendle和@stefanjudis先后写了篇文章，从同一个角度抛出两个话题：“为什么创建无障碍网站这么难”？和“应该通过增强浏览器开发者工具实时提供开发者开发无障碍网站存在的问题”！那么我想问的是，开发无障碍网站为什么会令大家感觉难以及工具上的实时提示就能让开发变得更容易了吗？如果不是，怎么样来开发一个网站才能符合无障碍规范相关的要求，即具有高可访问性。更直接一点，怎么才能让开发者创建无障碍网站是件轻易而不再觉得是件困难的事情。在接下来的内容，将作为前端开发者的角度来和大家一起探讨这方面的话题。如果你感兴趣的话，请继续往下阅读。

伪元素已经不是什么新东东了，平时大家在实际生产中肯定有使用过伪元素。但伪元素能帮助我们做些什么呢？针对该问题，有很多同学能很好的回答，但也有很多场景并不是所有开发人员都完全了解的。今天再次花时间来整理一下伪元素能帮助我们做些什么？我想接下来的内容和实例肯定会有不少同学感兴趣的。如果你是其中的一位，那么请继续往下阅读。

给网站添加暗黑模式是随着macOS中的暗黑模式（Dark Mode）出现之后的一个热门话题，今年上半年在《如何使用CSS实现暗黑模式和高亮模式的切换》一文中就和大家一起聊了聊怎么通过CSS来实现暗黑模式和高亮模式切换。事实上，社区上有关于这方面的讨论也很多，都在围绕着怎么给网站添加暗黑模式。今天在这篇文章再次和大家一起聊聊这个已久的话题，不同的是，这篇文章将和大家从不同的角度来聊怎么给网站添加暗黑模式。感兴趣的同学，请继续往下阅读。

CSS的flex-basis是Flexbox属性flex的简写属性之一。大部分同学在很多时候都认为flex（当然也包括flex-basis）属性非常的简单，但事实上并非如此，如果你阅读过《聊聊Flexbox布局中的flex的演算法》和《深入理解 flex 布局以及计算》会发现这flex并不容易。在W3C规范中flex-basis是一个基准值，它接受width和height相同的值。如果你熟悉的话，width和height是隶属于CSS Intrinsic & Extrinsic Sizing Module Level 3规范，而且该规范除了width、height属性之外还有min-width（或min-height）、max-width（或max-height）、min-content、max-content和fit-content等。那么问题就来了，在Flexbox布局中，flex-basis和CSS Intrinsic & Extrinsic Sizing Module Level 3提到的各属性有何差异呢？这就是今天将要和大家一起探讨的。如果你感兴趣，欢迎继续往下阅读。

随着Web技术不断的革新，以往很多依赖于图片展示的布局能较轻易地通过代码来实现，而且现在的布局也不仅仅局限于平面的布局。实际上也有一些伪3D，甚至是3D的布局效果。前两天看到@Preethi分享的一个效果就是我们平时难于用代码实现的一个效果。就这样的效果放到今天来说，我们通过CSS可以实现，而且这样的一个效果是一个典型的效果，所以今天和大家一起来探讨这样的一个布局效果。刚才提到借助于Web的一些特性，我们可以实现伪3D的效果（看上去像上一个3D的布局）。这样的布局主要目的是为了增强一个立体的空间感。

熟悉CSS的同学都知道，使用CSS可以绘制一些图形，在业内有很多这方面的案例，比如使用CSS绘制不同的纹理、CSS绘制Icons、使用一个div绘制不同的图形等等。而在Web的实际开发中也经常会碰到一些图形的运用，比如我们今天要聊的圆（比如圆形容器，圆形缩略图，圆形按钮）。使用CSS绘制圆还是会碰到一些棘手的问题。如果你对这方面感兴趣的话，那么接着阅读下面的内容，你一定会有所收获。

这个话题是@Rachel Andrew于2019年9月在英国爱丁堡举办的Finch front的一场演讲，其原标题是Does it work? Using the new CSS Layout，我在这里将其译为这些用于布局的新属性能用吗？。这个话题中的内容非常的有意思，其中有些内容在小站上也有过相应的介绍。今天看了该PPT，觉得有些内容还是非常的有意思，值得和大家分享。

把浮动放到今天来聊，可能很多小伙伴会觉得没有任何意义。会说“CSS都发展到这种程度了，Web的布局还会有谁用浮动呢”？那么真的是如此吗？浮动真的要退出CSS的舞台成为历史吗？我的答案是不可能的。不管CSS怎么发展，浮动都还有其存在的意义和作用，而且在一些场景中是离开不浮动的，最起码近几年之内是不可能的。至于为什么，请继续往下阅读。