现代 CSS--掘金小册课程推荐/优惠

你将获得

• 掌握新奇、实用的 CSS 新特性；
• 解锁 CSS 高级技能，搞定复杂设计需求；
• 最佳案例与实践，有效提升 CSS 编写能力；
• 建立系统的现代 CSS 内容体系。

作者介绍

大漠，W3CPlus 创始人，《现代 Web 布局》、《防御式 CSS 精讲》、《现代 CSS》、《Web 动画之旅》和《深入浅出 SVG》小册作者，曾就职于淘宝。对 HTML、CSS 和 A11Y 等领域有一定的认识和丰富的实践经验。CSS 中国布道者，2014 年出版《图解 CSS3：核心技术与案例实战》。

小册介绍

近几年有关于 CSS 方面的实体书或电子书寥寥无几，即使有，大多都还停留在几年前的 CSS 技术上。事实上，自 2020 年开始，CSS 得到了质的发展，这短短几年时间就出现了很多 Web 开发者一直期待的 CSS 特性与功能模块。

这些新特性和技术可以帮助开发者更加轻松地实现各种复杂的设计需求，还可以解决老的 CSS 问题。同时，现代 CSS 技术还可以提高 Web 的可访问性和可维护性。

那么，这些新特性为 CSS 带来了哪些改变和提升呢？我们看几个例子。

强大的 CSS 选择器： 除了可以更精确的选择和控制页面中的元素之外，在部分场景之下还可以替代 JavaScript 脚本，实现可动态交互的组件。

容器查询和样式查询： 这些新特性可以帮助开发者基于 Web 组件驱动方式来开发组件，除了使页面可以根据不同设备屏幕尺寸来适应调整宏观布局之外，还可以使组件根据容器尺寸和样式来调整微观布局，以提高用户体验。

高清颜色：现代 CSS 提供了更多支持广色域的 CSS 函数，可以为 Web 元素的颜色提供更高清的色彩，使得 Web 页面不会在高清屏幕下失真。

改变 CSS 的编写和组织方式：现代 CSS 提供了多种模块化和组件化的方式，例如CSS 变量、CSS 嵌套、CSS 作用域、CSS 级联层等，可以帮助开发者更加方便地维护和更新网站的样式。

Web 排版特性：现代 CSS 新增了彩色字体、可变字体、文本装饰、文本断行、首字下沉等各种新特性，可以帮助开发者更加方便地为文本提供一个更好的排版样式，提高网站的用户体验。

上面所列的仅是现代 CSS 中的冰山一角，还有很多有趣的新特性等待大家发现。

总体来说，现代 CSS 除了可以利用这些新特性解决老的 CSS 问题之外，更加注重灵活性、响应式设计、可访问性和可维护性，可以帮助开发者更加轻松地实现各种复杂的设计需求，并提高网站的用户体验和可维护性，从而提高我们的工作效率，提升职业竞争力，让我们在求职和升职方面更具优势！

这本小册将围绕现代 CSS 的新特性分 8 个模块，从 CSS 选择器到 CSS 的动效，涵盖 CSS 的选择器、CSS 单位、CSS 颜色、布局、代码组织和动效等，详细讲解现代 CSS 的方方面面，带你一次实现进阶！

适宜人群

所有的 Web 开发者，对 CSS 有基础认知，具有 1 ~ 2 年开发经验，希望提高自己的 CSS 能力，快速定位和排查 CSS 问题。

名人推荐

• CSS 的父选择器：:has()

• CSS 选择器 :has() 能解决什么问题？

• CSS 选择器：:where() vs. :is()

• CSS 选择器：:has() 与 :not() 的组合

• CSS 焦点样式：:focus-visible 和 :focus-within

• 用于美化模态框的 :modal 和 ::backdrop

• CSS Custom Highlight API：Web 文本范围高亮的未来

• 画中画：CSS 的 :picture-in-picture 伪类

• 现代 CSS 中的颜色格式： RGB，HSL，HWB，LAB 和 LCH

• CSS 显式默认值：inherit，initial，unset 和 revert

• 新的 CSS 颜色空间：为 Web 设置高清颜色

• CSS 中的 OKLCH 和 OKLAB

• CSS 的混合颜色：color-mix()

• Web 控件 UI 颜色的定制：accent-color 和 color-scheme

• 颜色对比度：color-contrast()

• CSS 的比较函数： min()， max() 和 clamp()

• CSS 的三角函数

• F-mods：可用于 @font-face 的新特性

• CSS 的 text-box-trim 和 text-box-edge 给排版带来的变化

• Web 上的可变字体

• 首字母下沉： initial-letter

• Web 上的彩色字体

• 经典排版技术：使用 text-wrap: balance 实现文本平衡换行

• CSS 自定义属性你知道多少

• 现代 CSS 中的相对单位

• CSS 自定义属性可以用来做些什么

• CSS 逻辑属性和逻辑值

• CSS 媒体查询新特性：@media

• CSS 判断：@supports

• CSS 自定义属性: @property

• CSS 滚动驱动动效

• CSS 容器查询之样式查询和状态查询

• CSS 宽高比：aspect-ratio

• CSS 动画合成：animation-composition

• CSS 分层：@layer

• CSS 容器查询之尺寸查询

• CSS 的嵌套和作用域：& 和 @scope

• CSS 计数器：@counter-style

• CSS 变换之单个变换

• CSS Grid 之瀑布流布局：masonry 和 masonry-auto-flow

• CSS 路径动画

• CSS 的锥形渐变

• CSS 的 object-view-box

• CSS 的 Clipping 和 Masking

• CSS 图像处理与特效指南

• 解锁 CSS View Transitions API 的魔力

• CSS 锚点定位： 探索下一代 Web 布局