Debugging and Performance

Find and fix layout problems fast with the developer tools, recognize the bugs everyone meets, check whether a feature works in the browsers your readers use, and keep your CSS from slowing the page down.

Updated

Debugging Layouts

  1. Debugging Layouts with Developer Tools (Journeyman): A seven-step routine for "why does it look like that?", using the Computed pane, the box model diagram, the flex and grid overlays, switching rules off, forcing :hover and :focus, and the outline trick.
  2. Common Layout Bugs and How to Fix Them (Journeyman): The seven layout bugs almost everyone meets, from a page that scrolls sideways to a z-index that won't work, each with its symptom, its cause and the fix that removes the cause instead of hiding it.

Fast and Reliable CSS

  1. Will It Work Everywhere? Browser Support and @supports (Journeyman): Check whether a CSS feature works in your readers' browsers with Baseline and caniuse.com, then use it safely with fallbacks the cascade gives you for free, @supports, and progressive enhancement.
  2. CSS Performance: What Slows a Page, and Critical CSS (Freelancer): See why a stylesheet holds up the first paint, find unused CSS with the Coverage panel, animate transform instead of layout, skip off-screen work with content-visibility, inline the critical CSS, and measure the result with Lighthouse.

Exercise: Fix the Broken Recipe Blog

  1. Exercise: Fix the Broken Recipe Blog (Freelancer): Find and fix five layout bugs on a recipe blog's home page with the developer tools, write down the cause of each, and let the checks confirm every fix.