CSS { In Real Life }

Tips, tricks and tutorials on the web’s most beautiful language.

Search by topic...

115 posts

  • Simplifying Form Styles With accent-color

    The new CSS accent-color property makes it quick and easy to roll out our brand colors to certain form inputs by leveraging user agent styles. In this article we’ll take a look at what it does and how to use it alongside color-scheme for simple, accessible checkboxes and radio buttons — and imagine how we might use it in the future.

  • Simpler Block Spacing in WordPress with :is() and :where()

    The :is() and :where() pseudo-selectors are relatively new additions to CSS, which allow us to target elements that meet the criteria in their parentheses. For example, using :is() we can target any p, h2 or ul element with a class of test:

  • Developer Decisions For Building Flexible Components

    One of the key skills of a front-end developer is to be able to take designs and turn them into code. These designs are often presented as static mock-ups, which visualize the “ideal” experience of browsing the website.

  • Learning in the Open

    Over the years I’ve tried out a lot of different ways of learning CSS and JS: books, online courses, articles, video tutorials… But for me, there’s really no substitute for learning by doing. In fact, I’d do so far as to say that this is probably the best way for anyone to learn front end coding (and perhaps most other disciplines too!). That’s not to say that the above resources aren’t useful — I still use of them frequently. But I consider them supplementary to actually learning “on the job”. Here I’d like to share what’s been successful for me when learning new front end skills, and some things that might help you too.

  • New Length Debugging Tool in Chrome Canary

    A few weeks ago I blogged about inspecting sizes in the browser dev tools, lamenting the lack of a way to toggle between different unit types for length values:

  • Masking One Element With Another

    Somehow it escaped my knowledge until recently that the CSS element() function is supported in Firefox. In fact, it has been for a good while (although it still needs a prefix). “What is the element() function?”, I hear you cry. It’s a way to render a HTML element as an image value for use in our CSS. The example given on MDN is using an image rendered on a <canvas> as a background image. That’s a pretty cool use case, although the CSS Paint API already allows us to create a paint worklet and use it in our CSS – check out this tutorial by Temani Afif. Perhaps that’s one reason why browser support seems to have stalled?

  • Is it Time to Ditch the Design Grid?

    I came across this website, Gridless Design recently, and it immediately struck a chord. It’s something I’ve been thinking about for a long time — the way that the usual design process, where designers hand off static mockups based, so often, on a 12-column grid, is not fit for purpose. I know I’m far from the first person to think that way, but increasingly with the advancements in CSS layout in recent years, the design grid feels more like a hangover from print than ever. A solution to a problem that, on the web, we simply don’t have.

  • Building A Dynamic Header With Intersection Observer

    Have you ever needed to build a UI where some component on the page needs to respond to elements as they’re scrolled to a certain threshold within the viewport — or perhaps in and out of the viewport itself?

  • Inspecting Sizes

    I don’t know about you, but I’ve often had a designer, looking over a site I’m developing, say something like “Can you move that five pixels to the left?”. The problem is, most of the time I’m not using pixels. It’s frustrating that despite rem or em units generally being a better choice for the web, design tools tend to favour pixels. It means that designers and developers are often speaking different languages when it comes to sizes.

  • Detecting Hover-Capable Devices

    With a greater proliferation of devices than ever before, we developers can no longer rely on viewport size as the factor that determines the styles we serve up to our website users. Up until fairly recently, we might have caught ourselves making assumptions based on the size of a device: that mobile devices would rely on touch input, for instance, while for larger screen sizes we might assume the majority of users would interact with our webpage using a mouse. We might provide different experiences with a media query:

  • Video: Dev Roulette Live

    Last week I had the honour of participating in Dev Roulette Live — a new video series co-ordinated by Stephanie Eckles, where developers are paired up for live conversation about their specialist subjects. The added twist is a roulette wheel, spun at different points to choose topics at random. One of my favourite things to do is talk about CSS, so this was super fun to be a part of!

  • Trigonometry in CSS and JS: A Series

    While working on some demos earlier this year, I started to get really interested in trigonometry. Having left the subject alone since school, I initially started brushing up on my knowledge to solve a specific problem. But I was soon drawn in by how a grasp of trigonometry opens up the possibilities for creative coding!