CSS { In Real Life }

A blog about CSS, front-end development, the web, and beyond.

Find out more
  • Demo

    Another Anchor Positioning Demo: Multiple Anchors

    Here’s a new demo where we’re positioning article references for a body of text relative to two different anchors for the block and inline axes. Each reference is positioned so that it aligns vertically with the position it’s referred to in the text, but appears adjacent to the main content wrapper on the horizontal axis.

    Read more

  • Demo

    Progressively Enhanced Popover Toggletips

    The CSS Anchor Positioning specification enables us to position elements relative to an anchor, wherever they are in our web page. As I wrote recently, one thing that particularly excites me is being able to combine anchor positioning with the Popover API to show and hide elements.

    Read more

  • Quick note

    Perspective

    This week I climbed a mountain. There are some things that make me care not one tiny bit about web development, and being on top of a mountain is one of them. The web helped me with this adventure, though.

    Read more

  • Anchor Positioning and the Popover API for a JS-Free Site Menu

    Anchor positioning in CSS enables us to position an element relative to an anchor element anywhere on the page. Prior to this we could only position an element relative to its closest positioned ancestor, which sometimes meant doing some HTML and CSS gymnastics or, more often than not, resorting to Javascript for positioning elements like tooltips or nested submenus.

    Read more

  • RSS is Good, Isn’t It?!

    My son gets a weekly magazine delivered to our home. It’s full of his favourite comic strips by fantastic authors and artists, he gets the pleasure of receiving something in the post just for him, and (even better) it doesn’t come with a load of plastic tat like you get with magazines in the supermarket. It’s not packed full of ads either, apart from a few for the comic book company’s workshops and merchandise, which I consider a small trade-off. Wouldn’t it be awesome to get a magazine full of articles by your favourite bloggers every week? Anyway, that’s kind of what RSS is like.

    Read more

  • Quick note

    Manifesto for a Humane Web

    I’m sure I’m not alone in noticing the recent proliferation of articles lamenting the impending (or, indeed, already happening) destruction of the web as we know it, due in large part to the influx of AI-generated content. For the most part, I share their pessimism. It’s hard not to see the devaluation of human content as anything but a negative.

    Read more

  • Shades of Grey with color-mix()

    Greys. Who doesn’t love ’em? When it comes to building websites, it can be handy having a few shades of grey at your disposal, no matter your colour palette. We use them for borders and subtle dividers, shadows, and to indicate state changes without overwhelming the user with colour. Some designers feel that a website needs quite a few shades of grey in order to convey subtleties. I once worked on a project that literally had 50 shades of grey.

    Read more

  • Published on Branch

    The Perfect Site Doesn’t Exist

    There’s something special about starting a new web or software project. Like a blank canvas, it has so much potential. Surely this is where we’re about to do our best work...

    Read it on Branch

  • Time to Ditch Analytics? Tracking Scripts and Web Sustainability

    This article on privacy-focussed web design by Paul Jardine and Becky Thorn of sustainably-minded web design agency Root raises some great points about the link between invasive tracking scripts and the carbon footprint of a website. I’ve often been frustrated by the negative performance impact of adding Google Analytics or Google Tag Manager to a site. Sites that were previously reasonably fast would subsequently perform poorly with regard to Google’s own Core Web Vitals. It seems that many of the products Google actively encourage web authors to add to their sites are paradoxically the ones that have the worst impact on performance. (Don’t get me started on YouTube videos.)

    Read more

  • Quick note

    Talking About Web Sustainability on ShopTalk Show

    When you get an invite from Chris and Dave to appear on ShopTalk Show it’s hard to say no! Despite my longstanding fear of sounding like an idiot on the airwaves, I swallowed my nerves and joined them for an episode on web sustaibaility — althought we managed to delve into a few other topics too. Naturally, right afterwards I thought of a whole bunch of things I forgot to mention (hopefully I’ll get around to writing one or two follow-up blog posts!), but I was pleased to get the chance to talk about this important subject on such an esteemed podcast. I hope listeners will take away one or two things, and be inspired to do their own research.

    Read more

  • Published on MDN

    Creating Color Palettes with the CSS color-mix() Function

    Colors can sometimes get out of hand in a project. We often start with a few well-chosen brand colors, but over time, we may find ourselves adding variations as our project grows. Perhaps we realize that we need to adjust the lightness of a button color for accessibility reasons, or that we need a slightly different variant of a component. How do we ensure that the colors we choose fit within the design system for our project?

    Read it on MDN

  • February 2024 Bookmarks

    I was just collating all the articles I’ve read over the past month in order to post them here when, coincidentally, Matthias Ott’s latest Own Your Web newsletter lands in my inbox! This month it’s all about bookmarks: how you collate them, where you keep them, and how you share them. I definitely need a better way to organise mine, which is why I’m sharing them here.

    Read more