CSS { In Real Life }

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

Find out more
  • Feedback

    Hearing you’re doing a good job matters. Like anyone, there have been plenty of times when I’ve felt disinvested from a job, when I’ve lacked motivation or felt disconnected. There are lots of reasons why those feelings can arise in anyone, but one that triggers them often is a lack of feedback.

    Read more

  • Modern CSS Layout is Awesome: Talking and Thinking About CSS Layout

    I recently gave a CSS layout talk at Pixel Pioneers conference in my (sort of) home city of Bristol. I’ve spoken about CSS layout quite a bit over the years, but I feel like there’s always a lot to talk about, as things are changing all the time!

    Read 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