CSS { In Real Life }

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

  • Testing the Performance of Social Media Embeds

    I’ve been writing and speaking about web sustainability quite a bit this past year. One thing I’ve done periodically for my talks is to test the data transfer size of various social media embeds — they’re pretty bad!

    Read more

  • Wrapping Up National Blog Posting Month 2023

    We made it! I tasked myself with writing 30 posts in 30 days for National Blog Posting Month, and somehow I just about managed it (well, including this post — yes, I cheated!). So, what have I learned?

    Read more

  • Quick tip

    Hide and Debug Empty Elements with CSS

    A tiny tip today, but a good one: use the :empty pseudo-class to hide pesky empty elements (commonly found in user-generated content).

    Read more

  • Oh No, Overflow!

    The overflow CSS property (shorthand for overflow-x and overflow-y) controls what happens when the stuff you put inside a box is bigger than the box itself. Should it bleed out of the box (overflow: visible, the default)? Hidden completely (overflow: hidden)? Or should the content be scrollable (overflow: scroll or overflow: auto)?

    Read more

  • Kicking the Excessive JavaScript Habit

    The video of Ryan Townsend’s talk from Performance Now(), The Unbearable Weight of Massive JavaScript is well worth a watch. Excessive JS, seemingly turbo-charged by JS frameworks, has long been a problem on the web, with bundle sizes showing no sign of decreasing.

    Read more

  • Quick note

    You Have Something to Say That’s Worth Hearing

    A recent post by Melinda Seckington, The Myth of not Having Anything To Talk About really resonated with me. I’ve been doing talks about CSS for a few years now, and for a while before that I was an organiser of web conferences, so I’ve seen a fair few talks. I can definitely say that some of the best talks I’ve seen are not necessarily by the people with the most expertise in a given subject, but by people who share their story, their perspective — whether it’s on a particular technology, design problem, workflow, project case study, or something else entirely. Making it personal makes it relateable. As Melinda says:

    Read more

  • Quick tip

    Preventing Scroll “Bounce” with CSS

    When you scroll rapidly to the top or bottom of a webpage you might notice a “bounce” effect, where the browser momentarily allows you to scroll beyond the uppermost or lowermost point, before bouncing you to correct position.

    Read more

  • Why You Should Hold Onto Your Devices For Longer

    My iPhone 8 is still going, four years after I bought it. That shouldn’t be a great achievement, but somehow it is. The battery life isn’t great (it’s already been replaced once), some apps are noticeably slower, and Apple have announced that the iPhone 8 won’t support the iOS 17 update, which means I’ll have to seriously consider upgrading in the not-too-distant future. I’m hoping to make it to the five-year mark, but we’ll see.

    Read more

  • What to Blog About When You Don’t Know What to Blog About

    Read more

  • Choosing a Green Web Host

    Earlier this month, Jeremy Keith posed the question: “How green is my server?”. As Jeremy notes, it’s surprisingly hard to get that information! So how do you ensure that you’re hosting your website on a green server?

    Read more

  • Demo

    Scroll Timeline Parallax Effect

    I’ve been playing around with scroll-driven animations a bit lately. Scroll timelines allow us to link the progress of element’s animation to the progress of a scroll container, as I wrote about not long ago for MDN.

    Read more

  • Quick note

    Reality Check: A Series for Building Real Layouts

    Reality Check is a new article series from Set Studio that focuses on CSS layout with real-world case studies. Each issue takes a design from Dribbble (or a similar platform) and demonstrates how to code it in CSS in a way that plays to the strengths of the medium, rather than aiming for pixel-perfect recreations. As Andy says in the first article:

    Read more