CSS Secrets
Tags
Summary
CSS Secrets is the representative work of Lea Verou, a Greek front-end expert and invited expert of the W3C CSS Working Group; the Chinese edition was translated by the well-known Chinese CSS expert CSS Magic (Zhang Peng). Built around 47 styling challenges drawn from real-world scenarios, the book unfolds across seven major areas—backgrounds and borders, shapes, visual effects, typography, user experience, structure and layout, and transitions and animations—demonstrating one by one how to replace clunky images, redundant DOM structures, and outdated hacks with more elegant CSS solutions without sacrificing maintainability, scalability, or standards compliance. Each case in the book follows a progressive structure: problem—conventional solutions and their limitations—a better solution—analysis of the underlying principles—compatibility notes. Why translucent borders get swallowed by the background color, how to achieve multiple borders with a single element, adaptive ellipses, parallelogram and diamond images, beveled corners and trapezoidal tabs, one-sided shadows and frosted glass, hyphenation and custom underlines, custom checkboxes and scroll hints, vertical centering and footers that stick to the bottom, easing and frame-by-frame animation… These seemingly scattered techniques all ultimately point to the same thing: truly understanding how CSS features work together. The book is printed in full color, with code presented alongside effect screenshots, and is suitable for intermediate and advanced front-end developers who already have a grasp of HTML/CSS fundamentals and want to break through the bottleneck of "knowing a little about everything but getting stuck on complex problems."
Editor's review
很多 CSS 书教的是「这个属性有哪些取值」，而这本书教的是「遇到这个问题该怎样思考」。Lea Verou 身为 W3C CSS 工作组的特邀专家，把标准制定者的视角带进了日常开发：她给出的每个方案，都同时考虑优雅、DRY、可维护与向后兼容，而不是一味炫技。 这本书最难得的地方在于结构。它并不按属性手册的顺序罗列知识点，而是把 47 个技巧按「你想解决什么」来组织，从最基础的边框背景一路推到动画与布局；书末又附上「按规范分类」的索引，让读者可以顺着 CSS 规范的脉络再读一遍。同一份内容，两种阅读路径，既适合顺手翻查，也适合系统通读。 中文版由 CSS 魔法（张鹏）翻译，术语准确、行文顺畅，彩色印刷让代码与效果图的对照一目了然。近十年过去，书中的部分写法已被新特性取代，但那种把 CSS 当作一门语言来理解、而非当作技巧库来背诵的思路，依然不会过时。
Who it's for
A good fit for
- 已掌握 HTML/CSS 基础、想突破进阶瓶颈的前端工程师
- 常与设计稿打交道、需要还原复杂视觉效果的网页开发者
- 希望理解 CSS 特性背后原理、减少 hack 与图片依赖的开发者
- 前端面试备考者，可用来梳理布局、层叠与动画的系统性知识
Not a good fit for
- 完全零基础、尚未写过 HTML 与 CSS 的初学者
- 只想查属性速查表、不打算动手复现代码的读者
- 以 React、Vue 等框架组件用法为主要诉求的开发者
Reading tips
- 先读第 1 章的编码技巧与「Web 标准」讨论，建立全书的思考基调。
- 每读一个案例先在 CodePen 等沙盒里亲手复现，再对照书中原理与兼容性说明。
- 通读一遍后，用书末「按规范分类」索引二刷，把零散技巧串成规范脉络。
- 遇到书中写法已被新特性取代时，顺手查 MDN 做对照笔记，形成自己的现代方案库。
About the publisher
Posts & Telecom Press
China · Founded in 1953
Posts & Telecom Press is known for its strengths in science and technology, computing, and information and communications titles, and has extended its publishing into photography, art, software learning, and inspirational growth, giving it a fairly diverse range. Its catalog includes computing and communications works such as Refactoring and Patterns (Revised Edition) and Huawei Switch Learning Guide (Second Edition), alongside bilingual collector's editions such as The Little Prince (Chinese-English-French illustrated collector's edition), The Great Gatsby, and Three Days to See. Beijing Ten Years: 1980-1990 and Ghost Blade: WLOP Personal Illustration Collection reflect its presence in photography and art. Its authors include Antoine de Saint-Exupéry, Helen Keller, Joshua Kerievsky, Wang Da, Zhang Zhaozeng, and WLOP.
Contents
- Translator's Preface
- Foreword
- Preface
- Acknowledgments
- How This Book Came to Be
- About This Book
- Chapter 1: Introduction: Web Standards—Friend or Foe?; CSS Coding Techniques
- Chapter 2: Backgrounds and Borders: Translucent Borders, Multiple Borders, Flexible Background Positioning, Inner Rounded Corners on Borders, Striped Backgrounds, Complex Background Patterns, Pseudo-Random Backgrounds, Continuous Image Borders
- Chapter 3: Shapes: Adaptive Ellipses, Parallelograms, Diamond Images, Cut-Corner Effects, Trapezoidal Tabs, Simple Pie Charts
- Chapter 4: Visual Effects: One-Sided Drop Shadows, Irregular Drop Shadows, Tinting Effects, Frosted-Glass Effects, Folded-Corner Effects
- Chapter 5: Typography: Hyphenated Line Breaking, Inserting Line Breaks, Zebra-Striped Text Lines, Adjusting Tab Width, Ligatures, The Fancy & Symbol, Custom Underlines, Realistic Text Effects, Circular Text
- Chapter 6: User Experience: Choosing the Right Mouse Cursor, Enlarging Click Targets, Custom Checkboxes, Dimming the Background with Shadows, Dimming the Background with Blur, Scroll Hints, Interactive Image Comparison Controls
- Chapter 7: Structure and Layout: Adaptive Inner Elements, Precise Control of Table Column Widths, Styling Based on the Number of Sibling Elements, Full-Bleed Backgrounds with Fixed-Width Content, Vertical Centering, Footers That Hug the Bottom
- Chapter 8: Transitions and Animations: Easing Effects, Frame-by-Frame Animation, Blinking Effects, Typing Animation, Animations with Smooth State Changes, Animations That Translate Along a Circular Path
- Index by Specification
FAQ
这本书适合零基础学 CSS 的人吗？
不太适合。书中默认读者熟悉选择器、盒模型、层叠与优先级等基础，直接讲进阶方案与兼容性权衡。零基础读者建议先打好基础，再回来看这本书。
中文版和英文原版 CSS Secrets 内容一致吗？
内容对应英文原版 CSS Secrets: Better Solutions to Everyday Web Design Problems，中文版由 CSS 魔法（张鹏）翻译，保留原文的 47 个技巧与章节结构，并做了中文排版与术语适配。
书中的技巧现在还有用吗？
部分具体写法已被新特性简化，例如圆角、渐变与滤镜的支持更普遍，但书中「先分析问题、再权衡方案、最后验证兼容性」的解题思路并不过时，仍是进阶 CSS 的核心训练。
读这本书需要配合哪些工具？
建议准备一个在线沙盒（如 CodePen）或本地浏览器开发者工具，边读边改代码；同时备一份 MDN 文档，用于核对属性在目标浏览器中的支持情况。
这本书的难度大概在什么水平？
属于中高级。作者会解释每个方案的原理与取舍，但默认读者能读懂 CSS 语法与常见布局概念，适合已有一两年实际页面开发经验的人精读。
Comments
Find this book
This site is an index: you start “Search all sources” in your browser, and the entries it lists all point to third-party sites; please judge their availability yourself.
