CSS { In Real Life }

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

Find out more
  • Sustainable Hardware Choices

    I’m pretty proud that I managed to keep my iPhone 8 going for over five years (with one battery replacement in that time). But recently it’s been increasingly unreliable, switching itself off at random times, and spontaneously draining the battery after doing anything remotely taxing. This combined with the fact that software updates are no longer available for this model led me to the conclusion that buying a new phone was probably a good idea at this point.

    Read more

  • Education Needs Teachers, Not More Technology

    Baldur Bjarnason shared an article in a recent edition of his newsletter about AI in education. As a parent of an 8-year-old, this is something that’s been on my mind a lot recently. Like most other parents I’ve encountered, I find the idea that teachers can be “replaced” by AI so preposterous that I’d imagine no one who’s ever had a child, met a child, or even been a child would take it seriously. Apparently though, there are some for whom the idea of taking an immeasurably complex, still-forming, constantly changing human brain, understanding, caring for and nurturing it, and imbuing it with the wisdom of the universe in a way that inspires excitement, passion and curiosity are the kind of tasks that should be done by a computer. Go figure.

    Read 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