CSS { In Real Life }

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

Find out 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

  • 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