I'll be honest, I find the newer CSS colour stuff really hard to understand.That's fine: we shouldn't fret too much about having weaker aspects of our skillset and knowledge. It's better to embrace what you're really good at and keep a reasonable level of the other stuff in your brain, in my opinion.I find the colour spaces the hardest to understand because I'm not a very technical person! I do appreciate what they bring though: better colours and a better way to interface with colour in general. That's only a good thing.What I really needed was a CSS-Tricks Guide™ as a quick reference when I need it — just like their legendary flexbox one — and would you know it? They've only gone and made one!I appreciate how detailed the guide is on colour spaces, colour functions, the relative colour syntax and loads of links out to good content on the site about colours.Nice work, gang 👏Check it out!

We always want to do better here at Piccalilli and we have ideas. It'll be really helpful if you could give us your opinion on those and also our bread and butter: educational content for the real world.Our focus here is always the reader above everything else. We want to make sure we're maintaining that and delivering everything we possibly can for you.We've created a survey and we'd love you to spend a moment filling it out for us. I know surveys are a bit annoying, but I can assure you, your opinions will definitely make an impact. We're a small team at the end of the day!FYIIt should take between 2 and 10 minutes, based on how much detail you want to give us.Get started (opens in a new tab)I'll close out by saying a huge thank you to everyone who reads Piccalilli. We brought this place back to life last year and it's evolved so much since then. We want to push that even further, fuelled by your consistent support.You're the best 💛

Let me break down some bits that we covered in the video for you.In order to make the footer sit below the <main> element — and any other siblings — we need to make sure its z-index wins.By applying position: relative to the <main> element, we create a new stacking context. We can then apply z-index to that. Without creating a new stacking context, our z-index will be ignored. Because the <footer> is position: sticky, that is also a new stacking context. There's a few ways you can do it without using position too.We also need to apply a background colour because when the <footer> isn't in its docked state and because it's sticky, it will be behind the <main> and getting in the way of content as you scroll the site.main { position: relative; z-index: 1; background: var(--color-light);}Our <header> is also a sibling of the <footer> and the <main>, so we applied the same treatment to that too.FYISafari can be quite a problematic browser for this sort of treatment. You might find as you sc

A huge part of building for the web is making experiences responsive. Usually, we think of responsive design in terms of making sites adapt to different viewport sizes, but what about being responsive to different mediums too?Buried away within CSS lies potential for transforming a jumbled, ink-draining mess into a clean, sleek, readable document. But much like writing good error messages, print stylesheets are frequently a neglected afterthought, leading to frustrated users and wasted resources.Why bother?“Everyone's got computers with lovely high-resolution screens!” I hear you screaming, “Why should we care about designing for print?”Well, there are plenty of reasons.The first major one is for accessibility. To put it plainly, not everyone is able to view a screen for an extended period of time, and they need alternative ways to consume content. Separate from that, some people just prefer reading hard copies. Much like there are many people who use and prefer physical books to e-rea

This is a really interesting article!One of the most controversial things I've ever done in this industry is introduce groupings in class attributes.<div class="[ my-element ] [ cluster ] [ bg-primary color-secondary ]"> …</div>It's a real love it or hate it thing, but historically in my CSS consulting days, it was extremely useful — especially in large teams which were light on CSS specialists.That's the trick you see: it's all about making sure your system doesn't end up becoming append-only. Grouping classes in attributes really helps with that because not only are related classes grouped — therefore being easier to scan — but they follow a specific order too:Blocks (or main element class for non-CUBE CSS contexts)Compositions (or layouts for non-CUBE CSS contexts)UtilitiesI like how Terence has explored this further by adding further documentation in class attributes:<article class=" 'Cards_updated_with_2025_setting' card //section_box_to_be_deprecated_next_year section box #Colour