《现代CSS技术应用与实践》小册完结啦！

历时 125 天，《现代CSS技术应用与实践》小册迎来了完结，总篇数 40 篇，约 11 万字。后续还会继续更新，欢迎订阅支持我。

《现代CSS技术应用与实践》是一本专注于现代CSS技术应用与实践的指导手册。小册旨在帮助读者深入理解现代CSS新特性的概念、原理和应用，掌握现代CSS 技术的最新进展和实践经验，从而提升网页设计和开发的技能。小册内容涵盖现代CSS 的基础知识、CSS 嵌套及作用域、CSS 布局技术与技巧、CSS 动画与过渡、CSS 实战案例等内容。

小册共分为四个篇章：开篇、基础篇、实践篇和完结篇。

开篇

• 1.《现代CSS技术应用与实践》小册介绍

基础篇

• 2. 现代CSS：Modern CSS Reset
• 3. 现代CSS：CSS 原生嵌套
• 4. 现代CSS：CSS 作用域 @scope
• 5. 现代CSS：CSS 计数器 @counter-style
• 6. 现代CSS：自定义属性 @property
• 7. 现代CSS：媒体查询新功能 prefers-reduced-transparency
• 8. 现代CSS：容器查询 @container
• 9. 现代CSS：级联层 @layer
• 10. 现代CSS：定义初始样式 @starting-style
• 11. 现代CSS：CSS 伪类 :in-range 和 :out-of-range
• 12. 现代CSS：CSS 伪类 :user-valid 和 :user-invalid
• 13. 现代CSS：CSS 伪类 :focus-within 和 :focus-visible
• 14. 现代CSS：CSS 伪类 :fullscreen 和 :modal
• 15. 现代CSS：CSS 伪类 :has()、:not() 和 :empty
• 16. 现代CSS：CSS 伪类 :dir()
• 17. 现代CSS：CSS 伪元素 ::highlight()
• 18. 现代CSS：CSS 属性 field-sizing
• 19. 现代CSS：CSS 属性 initial-letter
• 20. 现代CSS：CSS 属性 text-wrap:balance
• 21. 现代CSS：CSS 属性 overlay
• 22. 现代CSS：CSS 数学函数 calc()、min()、max() 和 clamp()
• 23. 现代CSS：CSS 三角函数 sin()、cos() 和 tan()
• 24. 现代CSS：CSS 颜色函数 color-mix()
• 25. 现代CSS：CSS 锚点定位函数 anchor()
• 26. 现代CSS：CSS 动态视口单位 dvh、svh 和 lvh
• 27. 现代CSS：CSS 滚动驱动动画
• 28. 现代CSS：CSS 路径动画
• 29. 现代CSS：CSS 属性动画
• 30. 现代CSS：View Transition 动画

实践篇

• 31. 现代CSS：实现响应式 Vue logo
• 32. 现代CSS：实现暗黑模式
• 33. 现代CSS：实现倒计时效果
• 34. 现代CSS：实现漩涡 Loading 动画
• 35. 现代CSS：实现微信语音音频动画
• 36. 现代CSS：实现外卖骑手送餐 Loading 效果
• 37. 现代CSS：使用三角函数实现时钟效果
• 38. 现代CSS：View Transitions API 项目实践

完结篇

• 39. 《现代CSS技术应用与实践》小册完结啦！
• 40. CSS 相关学习资源推荐

总结与展望

通过本小册的学习，希望大家可以对现代 CSS的相关知识有一个系统的掌握和提升。

CSS 从 1.0 进化到 3.0，带来众多特性更新，尤其在 CSS 3.0 引入了渐变、阴影、动画、转换等新特性，支持了多列布局和媒体查询，使得网页设计更加丰富和动态。

现代 CSS 的众多特性已经被现代浏览器所支持，从基础到展现，再到交互，让开发人员实现了曾经认为在 Web 开发中不可能实现的众多功能。