It's not often I'm in the market for CSS processing tools. I was very into Sass but stopped using it when CSS became more capable and PostCSS became more useful to me.PostCSS is very useful for me and the wider team. Here's what our postcss.config.mjs file looks like for this website:import postcssGlobalData from '@csstools/postcss-global-data';import postcssImportExtGlob from 'postcss-import-ext-glob';import postcssCustomMedia from 'postcss-custom-media';import cssnano from 'cssnano';const isProduction = process.env.NODE_ENV === 'production';export default { plugins: [ postcssGlobalData({ files: [ './src/global/variables.css' ] }), postcssImportExtGlob(), postcssCustomMedia(), isProduction && cssnano() ]};This setup allows a couple of useful features for us such as defining non-standard custom property-like variables for media queries, for when we actually need them.The main thing PostCSS does for us though is importing globs, such as this:@import-glob 'compositions/*.css';@import-glo

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