Advance CSS

Cards of different heights that fit together without gaps, like a photo wall, used to need a JavaScript library or CSS tricks. With CSS Grid Lanes you build them in a few lines of CSS, starting with display: grid-lanes.

This book teaches it by building one project, a photo gallery. You start with a plain grid that leaves gaps, and you finish with a responsive gallery that works for keyboard and screen-reader users and still looks right in browsers without support.

Grid Lanes is new, and browsers do not agree on everything yet. Where they differ, the book shows the measurement instead of guessing.

• Build one project, a photo gallery, from a plain CSS Grid that leaves gaps to a finished masonry layout
• Learn the exact placement rule behind display: grid-lanes, and test it with a short script
• Handle what masonry does to keyboard and screen-reader order, and fall back cleanly in browsers without support
• Every number and claim in the book is checked by a script in WebKit, Chromium and Firefox, and every screenshot is captured from the running project

• Explain why CSS Grid cannot produce masonry and what the web did instead
• Build grid lanes in columns and in rows, and switch between them with a media query
• Predict where every item lands using the placement rule, spanning and pinning
• Tune flow-tolerance to settle ties between lanes
• Align captions across a layout with subgrid, and know where subgrid stops working
• Count lanes, prevent overflow, and use container queries for responsive masonry
• Reduce the keyboard and screen-reader order problem, and test for it with a script
• Detect support with @supports and ship a fallback for every browser
• Measure performance and use content-visibility without breaking the layout

Front-end developers who are comfortable with HTML and CSS and have used Flexbox and CSS Grid. You do not need to have used a masonry library or to know anything about Grid Lanes. If your Grid is rusty, Chapter 2 covers what the rest of the book relies on. Two chapters include short JavaScript, for a fallback and for testing, and both are explained line by line.

CSS Houdini promised to let developers extend the browser's own styling engine. Ten years on, its five APIs have had five very different fates. @property works in every browser and is one of the most useful additions to CSS in years. The Typed OM works everywhere except Firefox. The Paint API runs only in Chrome and Edge. The Layout API and Animation Worklet never shipped, and native CSS now covers most of what people wanted them for.

In this practical book, Sandeep Kumar Patel shows you which parts of Houdini to build on today, which to use with care, and what to use instead. You learn by building: every chapter hands you a copy of the same small app, Gauge, an analytics panel with stat cards, sparklines, ring meters and a theme switch, exactly as the previous chapter left it, and you add that chapter's feature a few lines at a time, checking each step in the browser. Where the obvious code goes wrong, you write it, watch it fail, and fix it.

With this book, you'll:

• Animate custom properties, gradients and whole themes with @property
• Read and write CSS values as typed numbers with the Typed OM, with a fallback for Firefox
• Write paint worklets that draw grids, charts, rings and patterns, each with a plain-CSS fallback
• Build a masonry layout and a scroll effect as worklets, then replace them with display: grid-lanes and animation-timeline: scroll()
• Measure what Houdini costs, test it in three browser engines, and roll it out with kill switches
• Handle the real-world traps: shadow DOM, server rendering, Content Security Policy, caching, printing, high contrast and reduced motion

Every step of every chapter is a real file, run automatically in Chrome, Firefox and Safari's engine to confirm it does what the page says, and every browser-support claim is dated and traced to its source. You need only the basics of HTML, CSS and JavaScript. The complete code, including a starting copy of the app for every chapter, is a free download.