CSS has come a long way since the days of float-based layouts and table hacks. These days, we've got proper tools that actually make sense. Container queries, subgrid, custom properties—these aren't just fancy new features, they're game-changers that make building websites less of a headache.
I've been using these techniques in projects for Swindon businesses, and they've made a real difference. Let me show you what's actually useful and what you can safely use in production (because browser support matters, and I've checked).
Container Queries: Finally, Component-Based Responsive Design
Right, so container queries are brilliant. They're like media queries, but instead of responding to the viewport size, they respond to the size of the container element. This is a game-changer for component-based design.
Here's the thing: with media queries, you're always thinking about screen size. But what if your component is in a sidebar? Or a narrow column? Container queries let components adapt based on their actual available space, not the screen size. It's like having responsive design that actually makes sense.
Browser support is excellent now—Chrome 105+, Firefox 110+, Safari 16+, Edge 105+. That's about 95% of users on modern browsers, so you can use this in production. Here's how it works:
.card-container {
container-type: inline-size;
container-name: card;
}
.card {
display: grid;
grid-template-columns: 1fr;
}
@container card (min-width: 400px) {
.card {
grid-template-columns: 1fr 2fr;
}
}This means your card component adapts based on how much space it has, not the screen size. Brilliant for reusable components. If you want help implementing container queries in your Swindon business website, get in touch and we can discuss how this could improve your site.
CSS Subgrid: Aligning Things Properly
Subgrid is one of those features that solves a problem you didn't know you had until you try to align nested grids. It lets grid items participate in their parent grid's layout, which means you can create complex, aligned layouts without the nightmare of nested grids.
Browser support is good—Firefox 71+, Safari 16+, Chrome 117+, Edge 117+. That's about 95-97% coverage for modern browsers. If you're building for modern browsers (which most Swindon businesses should be), you can use this.
It's particularly useful for card layouts where you want all cards to have the same row heights, regardless of content. Here's how:
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.card {
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
}All your cards align properly without having to mess about with flexbox hacks or JavaScript. It's the kind of thing that makes you wonder how we managed without it.
CSS Custom Properties: Variables That Actually Work
CSS custom properties (variables) have been around for a while now, and they're properly supported everywhere. But I still see developers not using them, which is a shame because they're genuinely useful.
You can use them for theming, dynamic values, and even create responsive designs without media queries. Here's a technique I use a lot:
:root {
--base-size: 1rem;
--scale: 1.2;
--heading-1: calc(var(--base-size) * var(--scale) * var(--scale) * var(--scale));
--heading-2: calc(var(--base-size) * var(--scale) * var(--scale));
--heading-3: calc(var(--base-size) * var(--scale));
}
h1 { font-size: var(--heading-1); }
h2 { font-size: var(--heading-2); }
h3 { font-size: var(--heading-3); }This creates a consistent typographic scale that's easy to adjust. Change the base size or scale, and everything updates. No more hunting through your CSS to change heading sizes.
Logical Properties: Future-Proofing Your CSS
Logical properties are one of those things that seem unnecessary until you need to support right-to-left languages or different text directions. Instead of using left and right, you use inline-start and inline-end, which adapt automatically.
This makes your CSS more maintainable and your websites more accessible to international audiences. Plus, it's just better practice. Here's the difference:
/* The old way (breaks in RTL) */
.element {
margin-left: 1rem;
padding-right: 2rem;
}
/* The better way (works everywhere) */
.element {
margin-inline-start: 1rem;
padding-inline-end: 2rem;
}It's a small change, but it makes your code more robust. If you're building websites for Swindon businesses that might expand internationally, this is worth getting right from the start. Let's chat if you want help implementing this properly.
Modern Layout Techniques That Actually Work
Combining Flexbox and Grid gives you proper layout capabilities. Use Grid for overall page structure and Flexbox for component-level layouts. Simple, but effective.
The min(), max(), and clamp() functions are brilliant for responsive design. They let you set boundaries without writing loads of media queries:
.responsive-container {
width: min(100% - 2rem, 1200px);
margin-inline: auto;
}
.responsive-text {
font-size: clamp(1rem, 2.5vw, 1.5rem);
}The container will never be wider than 1200px, but it'll shrink on smaller screens. The text scales smoothly between 1rem and 1.5rem based on viewport width. No media queries needed. It's the kind of thing that makes responsive design actually enjoyable.
Performance: Making Things Actually Fast
Modern CSS can improve performance if you use it right. The content-visibility property is particularly useful for long pages—it lets the browser skip rendering off-screen content:
.long-section {
content-visibility: auto;
contain-intrinsic-size: 0 500px;
}This can significantly improve rendering performance for pages with lots of content. The browser knows roughly how tall the section will be (500px in this case), so it can calculate scroll position, but it doesn't render the content until it's needed.
For Swindon businesses with content-heavy websites, this can make a real difference to page speed. Fast websites rank better in Google and convert better. If you want help optimising your website's performance, get in touch and we can discuss how modern CSS techniques could improve your site's speed.
Putting It All Together
These modern CSS techniques can help you build more efficient, maintainable, and performant websites. Container queries, subgrid, custom properties, logical properties—they're all tools that make development easier and websites better.
Browser support for these features is excellent now, so you can use them in production without worrying about breaking things for most users. The key is knowing what's safe to use and what needs fallbacks.
If you're a Swindon business looking to modernise your website or build something new, these techniques can make a real difference. They result in faster, more maintainable code, which means better websites and lower development costs. If you want to discuss how modern CSS could improve your website, let's have a conversation about your project.