Intro
Thoughts on web development, design, and building things for the web. Practical notes, experiments, and lessons learned along the way.
Blog
- Let Components React to CSS Variables With Style Queries
CSS style queries let components react to custom properties on their ancestors. Compare theme and density examples with var(), classes, and support limits.
- Sticky and Snapped Elements With CSS Scroll-State Queries
CSS scroll-state queries can style stuck headers and snapped cards, or hint at more scrollable content. See the container setup and fallback choices.
- CSS border-shape Can Draw Boxes clip-path Cannot
CSS border-shape lets borders and shadows follow a custom outline. Compare it with clip-path, try complete examples, and keep a usable rounded fallback.
- CSS corner-shape Goes Beyond Rounded Corners
CSS corner-shape adds bevels, scoops, and squircles to ordinary boxes. See how it works with border-radius, normal borders, and a rounded-card fallback.
- CSS Calculations With sibling-index() and sibling-count()
Use CSS sibling-index() and sibling-count() for staggered animations and position-based calculations, with working examples and browser support checks.
- Using HTML Attribute Values Inside CSS With attr()
CSS attr() reads HTML attributes for generated labels and typed calculations. Use working examples, check support, and handle missing or invalid values.
- Smarter Responsive Calculations With CSS round()
CSS round() snaps responsive values to useful steps. See rounding strategies, spacing scales, and a column calculation, with browser support checks.
- What the Browser Already Does Without a Framework
Before adding a frontend framework, check what HTML, CSS, forms, responsive images, preferences, and browser navigation already provide.