The `<details>` and `<summary>` elements are getting an upgrade
Stephanie Stimac shares some useful changes arriving to simplify styling these elements.
A Friendly Introduction to Container Queries
Josh is here again with another stunner of an article.
Foundations: form validation and error messages
Demelza Feltham has written a fantastic run-down on form validation with some great tips about providing an accessible and user-friendly experience.
Creating Design System-Friendly Snowflakes with Utility Classes
Stu Robson shows us the power of utility classes in design systems to tackle those in-context specifics that always come around.
An HTML Email Template with Basic Typography and Dark/Light Modes
Chris Coyier shows how keeping it simple with email templates brings great results, even on the old clients.
HTML for people
Blake Watson has just launched a fantastic resource to help you learn HTML from scratch.
Building a robust frontend using progressive enhancement
When the gov design team offer a rundown like this, you have to read it because that team are some of the best in the business of great user experience.
I wasted a day on CSS selector performance to make a website load 2ms faster
Trys Mudford goes on what they thought was an epic CSS performance refactor with a not so surprising result.
Introducing TODS – a typographic and OpenType default stylesheet
Richard Rutter walks us through their thoroughly useful, new typographic and OpenType default stylesheet, step by step.
Masonry and good defaults
Rachel Andrew outlines some understandable concerns about masonry potentially being a part of grid.
The Undeniable Utility Of CSS :
A fantastic rundown of CSS :has() by one of the best in the business at explaining things.
Daily Dev
An interesting alternative to discovering articles and resources for developers.
CSS @property and the New Style
Ryan Mulligan steps through a stunning animated button component that uses the now widely supported @property really effectively.
The Dev Tools Performance Monitor Panel
Dave Rupert shows us how they used some lesser-know dev tools performance features to debug a common performance hit caused by animation.
My under-engineered way to avoid a Flash of inAccurate coloR Theme (FART)
A super simpler solution to applying a theme preference from local storage.
Responsive bar charts in HTML and CSS
A fascinating run-through of how Mathias and the 9Elements crew levelled up their charting from JS powered calculations to clean, semantic HTML and CSS.
Every Layout
Learn to write better, resilient CSS by helping the browser to make decisions for itself with the simple, composable layouts this book teaches you to read.
State of CSS 2024
The 2024 State of CSS survey is here and it’s about time we got a more diverse set of responses.
What if you used Container Units for… everything?
Chris Coyier ponders whether they can use container queries for everything and unearths some rather frustrating, but predictable outcomes.
Just Build Websites
Quite possibly one of the best analogies I’ve seen in a long time about Just Building Websites™
The anchor element
An incredibly well articulated, informative and entertaining run-down of the mighty HTML anchor element.
How to animate around a circle
A handy, quick post from Robin Rendle about a really common pitfall of trying to animate around shapes.
Getting stuck: all the ways position:sticky can fail
Sticky position in CSS can be super awkward and low-key enraging to work with. There’s plenty of little things you have to account for which Kilian Valkhof outlines really well.
CSS One-Liners to Improve (Almost) Every Project
A handy collection of simple CSS solutions to add little improvements to any web page by Alvaro Montoro.
No No-JavaScript
A quick and handy run-down of the CSS media query scripting features by David Bushell.
CSS Grid Areas
A really useful, highly interactive guide on CSS grid areas and how you can use them for every day layouts by Ahmad Shadeed.
Fit-to-Width Text: A New Technique
Sure, there’s a million ways to do fit text and you can technically already do it with CSS, but this approach Roman Komarov is interesting.
Replacing GSAP with scroll animations
A really handy re-working of a GSAP demo with CSS scroll animations that certainly helped them stick for me.
The 3 Types of CSS Utility Classes
A really handy breakdown of how to the separate concerns of your utility classes.
code-pen Web Component
A really handy web component that progressively enhances code blocks into CodePen editors.
Accessible SVG Forms
An extremely deep dive in how to build highly visual form functionality in an accessible manner.
Consent, LLM scrapers, and poisoning the well
An interesting approach to tackling the relentless scourge of LLM scrapers stealing content.
The Basics
Geoff Graham has published a brand new course for absolute beginners and it looks fantastic.
Opinions for writing good CSS
A great run down of useful advice to help you write good CSS.
I Need Your Help to Make 11ty Fully Independent and Sustainable in 2024
Zach writes how he is trying to work 100% full time on 11ty. To do that, the project needs financial support, so let’s make that happen.
Look Mum, No Breakpoints!
Rob McCormick breaks down how they refactored their front-end with fluid type, flexible layouts and importantly, giving the browser more control.
Manifesto for a Humane Web
Michelle Barker has published a manifesto which is stunning — both visually and content-wise.
What the heck is an SVG sprite sheet?
Ryan Trimble gives us the run-down on SVG sprites, how they work and how you can build a nice pipeline for them.
What is Motion Sensitivity? How to Design Accessible Web Animations
Elizabeth Meshioye runs down how animations can affect people negatively and how you can prevent that while still producing lovely, interactive work.
Finally Understanding How Array.sort(comparator) Works
James Kerr explains how the Array.sort() function actually works!
Testing HTML With Modern CSS
Heydon Pickering unleashes the power that CSS gives us with selectors and custom properties to create handy tests to make sure your markup is up to scratch.
How would you build Wordle with just HTML & CSS?
Scott Jehl has written a super detailed run-down of how they tried to recreate Wordle with HTML and CSS.
An Interactive Guide to CSS Container Queries
Bored of the same old card demos for Container Queries and struggling to see where you’d use them in real projects? I was too until Ahmad Shadeed published yet another great guide.
CSS Button Styles You Might Not Know
David Bushell shares some unbelievably good tips on styling buttons and explains exactly how they work too.
404 Media Now Has a Full Text RSS Feed
404 Media has invested really well in RSS and broken all the decisions and process down in a nice article.
A Guide To Designing For Older Adults
The one and only Vitaly Friedman takes a deep-dive into a lesser thought about focus of user-centric design.
Arguments for opening links in a new tab or window
Jason Grigsby asks for data to support an apparent preference for people defaulting to links opening in new tabs.
Can you feel the rhythm‽
Adam Argyle shows some really cool baseline grid stuff that modern CSS empowers us to do.
ECSS - an interesting CSS methodology
I got sent a link to a CSS methodology called ECSS and thought I’d note down what I like and what I don’t like about it.
How I Solved My Font Rendering Problem
Michelle Barker yet again, shares a life-saver of a CSS tip!
The Fifty-Fifty Split and Overflow
Ryan Mulligan demonstrates not just some elegant layout work but also, a very tidy method of dealing with overflow content.
CSS :has() Interactive Guide
Ahmad Shadeed has done it again with a stunning interactive guide that
Speedier tunes
Jeremy Keith showcases a proper real-world performance improvement using content-visibility.
Tailwind vs. Semantic CSS
A really interesting study by Tero Piirainen, comparing a build of the exact same page using Tailwind vs semantic CSS.
Removing list styles without affecting semantics
Manuel Matuzović solves an age-old problem with dealing with list styles when you don’t want them and I riff about my reset.
Smashing hour - April 30th 2024
Join Vitaly Friedman and myself as we talk about design, CSS and all sorts in April.
CSS Scroll-triggered Animations with Style Queries
I stumbled across Ryan Mulligan’s excellent article on scroll-triggered animations which helps them make more sense to me.
Some use cases for revert-layer
A damn useful run-down of revert-layer — a more useful CSS revert tool — by Mayank
The legendary Codrops are on Patreon
One of the best publications in the biz are feeling the pinch of rising costs and fewer sponsors, so they’ve set up a Patreon that I hope you will support.
Offloading JavaScript With Custom Properties
Heydon Pickering perfectly illustrates why it’s important to understand both CSS and JavaScript well.
New GitHub Copilot Research Finds “Downward Pressure on Code Quality”
I’ve noted down some thoughts about research that shows CoPilot use, lowers the quality of code, overall.
How to align the text of the last paragraph line
Stefan Judis runs us through the rather useful text-align-last CSS property with a handy demo.
Utopia SCSS Library
Utopia — the extremely handy fluid type and space tool — now has an SCSS (Sass) library which looks great.
ShopTalk reaches 600th episode
The ultimate stalwart of podcasts about the web hits yet another major milestone, so I wanted to congratulate them.
Kind of annoyed at React
A really interesting commentary on the state of React by one of the best in the biz: Cassidy Williams.
Steady has a great new homepage
This new homepage demonstrates how concise content mixed with clear design — riddled with delightful flare — is super effective.
12 Modern CSS One-Line Upgrades
A handy run down of newer stable, stable enhancement and progressive enhancement CSS features by Stephanie Eckles.
Automated weekly links posts with raindrop.io and Eleventy
A really clever setup by Sophie that automates a weekly links post, based on articles she saves in a third party service.