CSS { In Real Life }

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

Find out more
  • Quick note

    CSS Masonry Layout Syntax

    Ahmad Shadeed has published a great article digging into the proposed CSS masonry layout syntax. In case you’re unaware, the term “masonry” for layout is used to describe the kind of grid layout where instead of items of various heights being aligned in neat horizontal rows, they are shifted to fill the leftover space, effectively creating a brickwork effect. It was popularised by the website Pinterest some years ago, and became a widespread UI design trend for a while.

    Read more

  • AI Environmental Impact Report

    The Green Web Foundation have published a thorough and insightful report into the sustainability of AI, and the results are pretty damning. Over the couple of years I’ve been talking about web sustainability I haven’t really touched upon AI a whole lot, partly as there wasn’t a lot of publicly available hard data about its environmental impact. Now, however, it’s become an issue that’s too big to ignore. We can’t not talk about it.

    Read more

  • A Versatile Markdown Shortcode for Eleventy

    When writing blog posts in Markdown files I often find myself needing to add HTML elements that aren’t accounted for in Markdown. Some common ones are <aside> elements, where I include content tangentially related to the post itself, or external references.

    Read more

  • I’ve Been Doing Blockquotes Wrong

    True to form, Heydon Pickering has written another blistering account of one of the most ubiquitous HTML elements, the <blockquote>. You’ve probably used a <blockquote> when writing HTML. I know I’ve used literally hundreds of them. What I didn’t know is that I’ve been using them wrong all these years.

    Read more

  • Notes From Green IO Conference

    Last week I attended Green IO, a conference in London all about sustainability in digital technology, organised by Gaël Duez (who also hosts the Green IO podcast). It was a fantastic conference, and amazing to see so many people who are passionate about this stuff all in one room!

    Read more

  • Demo

    Limitation Breeds Creativity: A Study in Composition with Custom Properties

    It’s been a little while since I’ve played around with making creative stuff with CSS just for fun. My trip to State of the Browser conference at the weekend reminded me why I love the web and the creative community around it. If you haven’t already, you should check out Hidde’s summary of the conference. Every talk was absolutely top quality (and some were downright jaw-dropping — Katie Fenn’s live Daft Punk performance in particular!).

    Read more

  • Logical Properties in Size Queries

    I came across a post from Elad Shechter lamenting not being able to use logical properties in media queries. As he correctly notes, the following won’t work:

    Read more

  • The Problem With Surveys (and Why You Should Take This One)

    If you’re a regular user of CSS (and hey, if you’re reading this you probably are) you should definitely complete the State of CSS survey, an annual survey of CSS features. Registering your opinion of CSS features, frameworks, tools and resources is helpful to the CSS world as it helps browsers and working groups figure out what to prioritise. If enough people shout loudly enough about a particular feature then it increases the chance that we’ll get to be able to use that feature a bit sooner.

    Read more

  • Published on Piccalilli

    Styling Tables the Modern CSS Way

    In this article for Andy Bell’s blog Piccalilli, we explore something I’ve been consumed with styling a lot recently: data tables. Not to be confused with using tables for layout (as in the bad old days of CSS), HTML tables are vital for displaying tabular data (data with row and column relationships) accessibly. They come with a few quirks, however, and some less-familiar CSS properties that are handy for styling.

    Read it on Piccalilli

  • Quick note

    Everybody’s Free (to Write Websites)

    If anybody needs some free advice on how to build websites, Sara Joy has got it absolutely nailed. (With supporting voiceover from Keenan, and an accompanying video from Robb Knight.)

    Read 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