Look mum, no breakpoints!
An excellent overview of how to approach fluid design on the web. Lots of excellent references and techniques, particularly those around using Flex layout with flex-basis to control widths, or […]
Archives
Why centring is so hard
Every web developer has torn their hair out trying to align an icon with some text, or two separate pieces of text with each other, or (god forbid) a whole sequence of text nodes, icons, form […]
Bidirectional text in HTML
Today's obscure HTML element: <bdi>. It stands for "bidirectional" and refers to text that can include both RTL and LTR languages (does not appear to care about other […]
The good, the bad, the web components
An excellent overview of the current state of web components, including suggestions on how they could be […]
Removing list styles without affecting semantics.
A simple tweak that simplifies the common approach to "lists that don't look like lists" with HTML/CSS and sidesteps any semantic/accessibility concerns. […]
What is utility-first CSS?
As acerbic and cutting a critique of utility-first CSS (and that particular framework) as you would expect from Heydon, but hidden amongst the humour are some (also equally expected) jewels […]
When to use <meter>
A solid example of where HTML semantics can be a little problematic: the <meter> element. Also a good overview of where/when this element is […]
One Neat CSS Trick
Using pseudo-selectors like :where and :not to invert style rules, allowing for better code encapsulation and context sharing across a codebase.
Time to rethink mobile-first CSS?
An interesting look at whether the current mobile-first paradigm is problematic. Ultimately, the title feels a little like click-bait; to me the solution proposed remains mobile-first, but suggests […]
Some use cases for display: contents
There have long been issues (mainly due to browser regressions) with using display: contents; in the wild, but there are still some potential use-cases for effectively removing non-semantic elements […]
HTML web components
An excellent look into the new trend of no-or-low-JavaScript web components, which almost operate more like HTML fragments, with graceful fallbacks to native elements. Jeremy proposes terming these […]
Re-evaluating px vs em in media queries
An overview of the state of media queries and accessible overrides (page zoom, text zoom, min/max font size settings etc.), seeking to determine which of em, rem, or px is the best option. Turns out […]
Specificity calculator
An extremely useful tool for comparing and visualising the specificity of a given CSS selector. […]
Classic rock, Mario Kart, and why we can't agree on Tailwind
Josh may have written the perfect article on Tailwind. As someone who has also spent quite a lot of time (both professionally and personally) working with Tailwind, I couldn't agree more, […]
Using CSS transitions on auto dimensions
A selection of possible workarounds for animating CSS values with auto keywords (e.g. height, width, etc.). Not a huge fan of the Flexbox option, but the max-height trick is a very useful one to […]
Animating the height of content using CSS grid
A useful trick for animating the height of a specific piece of content. You cannot transform a height in CSS to the auto keyword; you have to provide a fixed value, which is obviously suboptimal in […]
Nuclear anchored sidenotes
I have long sought a web-native way to achieve sidenotes with CSS, and it turns out Eric is in the same boat. The new Anchor Position API in CSS is seeking to solve that problem, and whilst it […]
React modal using <dialog> element
An extremely detailed overview of how to use the native <dialog> element in React to build a state-driven modal component. As ever, the answer is significantly more complicated than it would be […]