现代 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 脚本，实现可动态交互的组件。

CSS选择器示例

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

容器查询示例

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

高清颜色示例

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

CSS组织方式示例

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

排版特性示例

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

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

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

现代CSS

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

名人推荐1

名人推荐2

名人推荐3