Search

An interesting read that covers some of the basic terminologies of typesetting, as well as the technicalities of how browsers actually interpret the line-height value. Hint: it's not what you'd …

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 …

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 …

A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The …

Andy always has some interesting thoughts about CSS, and this reset is no exception. Lots of interesting things here that fit very nicely with both my own experience and other resets that I've …

A great overview of techniques to help improve text legibility, working with the browser rather than against it to be as inclusive as …

Malte has put together a brilliant overview of the various techniques that are currently available on the web natively for loading images in the most performant and user-centric ways possible. I'm …

A website for exporting real-world terrain maps; extremely niche, but also extremely useful if …

Last night I did something incredibly simple which I have been terrified of doing for four months: I uploaded a photograph I took during our time on …

An attempted experiment to replicate the blog layout of ilovetypography.com, which uses floats to great effect, with more modern CSS Grid and Flex techniques. Turned out to not be quite so simple, but taught me a lot about the benefits and limitations of CSS Grid.

Important Caveat: YMMV on this trick. Matt himself notes that there are potential issues and there's a discussion with Šime in the comments which highlights actual problems in …

A great breakdown from Dave as to why the typical card UI pattern has some inherent issues. Some elements – like making cards all the same height and dealing with responsively collapsing card lists …

I've been playing Pokémon Go for a little while now (as has Alison) so when it was announced that a real-world event would finally be coming to London this year I was quite excited. …

Great write up on the current best practices around hiding elements keeping all users in …

When Eric first tweeted about the new design on his site, I thought something a bit unusual was going on with the CSS layout. I actually dove straight into the source that day and learnt a little …

... otherwise known as the Great Vulture Failure of 2020 …

What do you do when a website has loaded but the content is still being fetched from an API? One answer is to fill the page with animated placeholders, creating a skeleton of what the user can expect, with a dash of CSS animation to let them know that something's still going on behind the scenes.

Craft CMS can be a very enjoyable mobile authoring experience, but it can be improved with some clever plugins and a few relatively new core features.

Robb has come out with some very cool ideas over the years, but wow, seeing CSS-only specular highlighting and holograms is such a neat trick 🤯 I immediately want to co-opt some of this for the …

A halfway solution to a design pattern that I see often, but have yet to find an easy way to implement: text that wraps so it is always fattest in the middle, and thinnest at either end.

I've been saying for a couple of years that we are on the brink of a "fluid design" revolution in front-end development, similar to what happened around the late 2000s with "responsive design". …

Animating a grid element provides a lot of potential for fancy UIs and interesting interactions, but it's not immediately obvious when searching online how it needs to work and what the limitations are.

I read the entirety of the EAA – including all supporting documentation – so you don't have to.

Josh has added some additional thoughts to Andy's CSS reset. Personally, I like a combination of the two (with a dash of Stephanie's best practices thrown in for good measure), but wanted to capture …

The color-mix property enables a lot of interesting functionality when you realise that you can use it to mix transparency into colours, including design tokens.

A complete overview of the most recent WCAG 2.2 spec as it enters RC status, including quick overviews on the most common solutions to meet each new success …

Patrick Brosset covers a range of new(ish) web and browser APIs that allow PWAs to benefit from OS-level functionality to style and utilise more of the browser chrome. Specifically, the Windows …

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 …