聊聊CSS

现代 CSS 应该是 2023 年前端圈热门话题之一，这些新特性可以帮助开发者更加轻松地实现各种复杂的设计需求，解决老的 CSS 问题，同时现代 CSS 技术还可以提高 Web 的可访问性和可维护性。

在 CSS 中，我们有很多种方式为元素设置透明度，常见的是给元素设置透明度和给颜色设置透明度，不同的方式将会带来不一样的效果。那么今天，我们就一起来聊聊 CSS 中的不透明度。感兴趣的同学，请继续往下

最近 Google I/O 大会开的是热火朝天，我也一直在关注与 Web UI 和 CSS 有关的话题。在这篇文章中介绍了有关于 Web UI 和 CSS 方面的近 20个新特性

如何使自己构建的 UI 或编写的 CSS 代码更具防御性（健壮性），确保还原的 UI 在不同的条件下都能工作，不打破 Web 布局或 Web UI，是每位专业的 Web 前端开发者必备的技能。

上个周末因为自己要写PPT而没来得急整理，所以又错过了一期。在这一期中，大部分内容将围绕着@Bill Mei的《Top 10 most deadly CSS mistakes made by new and experienced developers》文章中提到观点来展开。这…

上周又断档一期了，这周不能再断了。这两天翻阅了@hj_chen在新家坡组织的Talk.css沙龙中的一些PPT，有些内容还是蛮有意思了。国外氛围真不错，其实国内也有不少同学在搞沙龙。前面社区活动也不少，这周参加了腾讯Live前端大会。下个月@裕波在成都举办第五届FEDay。 广…

上一期咱们围绕着Web动画展开，其中有的动画对部分用户群体会造成不良的反应，会引起癫痫。为此，为了避免这种现象出现，可以使用条件CSS中@media中的prefers-reduced-motion条件来做处理。除此之外，prefers-reduced-motion在<pictu…

这一期中我们将围绕着Web中的font来展开。在现代Web中除了能使用font-family属性给Web应用指定字体之外，还有其他一些用于字体的特性，比如@font-face可以加载非系统的字体，字体变体属性font-variation-*让Web上排版和印刷上排版之间的差距在…

任何一门语言都有自己的小技巧和新特性，比如Web的三大基石HTML、CSS和JavaScript，在各自的社区中总是有同学在不同的时候梳理一些相关的新特性和小技巧。让这些特性更好的服务于社区，尽量的让大家更好的理解和掌握。另外一个目的是，让更多的同学能把这些新特性运用于自己的项…

在这一期中咱们一起来聊聊HTML5中的表单。说到HTML，可能很多同学会说，HTML5有什么好聊的，不就是一些HTML的标签吗？事实上并非如此，就拿HTML中的表单中的input元素为例吧，input元素及其相关属性和类型的支持情况都会因为浏览器的不同而存在较大的差异。甚至在支…

自从响应式设计的概念的提出至今也有近10年的时间了，虽然不乏看到响应式设计的身影，但还是有很多同学不太了解什么是响应式设计或响应式设计中常会碰到的问题以及如何解决。特别是流式（自适应）排版和响应式设计难以分清楚，但这两种排版都为我们提供了很多机会来更好的设计Web页面，而且更能…

这一期中我们主要来聊聊全屏的事情。对于全屏的布局，大家可能首先想到的是100%（或100vw）来实现，但如果你要在一个限宽的容器中实现一个全屏效果呢？比如说，一个Banner区全屏显示。类似这样的效果在PC端是非常常见的一个效果。可能会有很多同学会说，这样的效果有什么好聊的，不…

前段时间在项目使用div元素模拟body时使用了will-change时触发了一个奇特的问题，最终以删除will-change而解决。那么这一期中我们先来聊聊will-change、transform和层有关的事情，然后再和大家一起分享几个在Web中的JavaScript相关的…

借此话题，在这一期中就围绕着Web的动效来展开。Web动效不管是从设计到实现都有很多的话题可聊，比如，动画的设计、交互、实现等等。甚至是实现的技术方案或工具。 说到动效，可能大家都会觉得Web动效是现代Web才具有的特性，事实上并非如此，Web出现不久，甚至CSS还未来的时候，…

在上一期中我们提到了CSS的混合模式算法和滤镜相关的知识，正好在这周周会老板也提到滤镜相关的特性。主要使用滤镜来改变颜色和使用混合模式来让视频变得更有意思。那在这一期中，我们接着来聊CSS滤镜对颜色的处理以及滤镜对图标（图像）的处理。除了滤镜来改变颜色相关的知识之外，还会向大家…

时至今日，可用于现代 Web 布局的特性非常的多，可能大家最为熟知的还是 Flexbox，都觉得 Flexbox 布局可以一把梭。虽然说 Flexbox 布局已非常强大了，但他始终还是一维布局，对于一

虽然近些年 CSS 变化很快，但我认为 2021 年是 CSS 的元年。在即将过去的 2021 年，CSS 变化非常地大，其中新增了很多特性，比如 CSS 容器查询、CSS 父选择器、CSS 层叠控制

自 @Ahmad Shadeed 去年在博客上发表了《The Just in Case Mindset in CSS》的时候，我自己也有一种冲动，也想整理一篇这方面的文章，但一直未动笔（说实话，整理一

组件驱动式 Web 设计的到来或者说 CSS 容器查询、作用域样式、级联层控制等特性的出现，这些先进的特性使我们有机会从页面布局、全局样式和用户样式中孤立组件样式，从而实现更具弹性的响应式设计。

2022年CSS Day于2022年6月9日和10日在阿姆斯特丹举行，这是时隔三年后再次举办的一次有关于CSS主题的盛会（上一届是2019年）。今年的CSS Day一共有14个关于CSS方面的话题，其