Link tags: css

1174

Codestin Search App

Performance-Optimized Video Embeds with Zero JavaScript – Frontend Masters Blog

This is a clever technique for a CSS/HTML only way of just-in-time loading of iframes using details and summary.

An in-depth guide to customising lists with CSS - Piccalilli

Think you know about styling lists with CSS? Think again!

This is just a taste of the kind of in-depth knowledge that Rich will be beaming directly into our brains at Web Day Out

Reduce the JS Workload with no- or lo-JS options

This is an excellent one-stop shop of interface patterns:

This is an organic collection of common JS patterns that can be replaced with just HTML, CSS, and no, or very low, JS. As HTML and CSS continue to mature, this collection should expand.

What’s new in web typography? | Clagnut by Richard Rutter

There have been so many advances in HTML, CSS and browser support over the past few years. These are enabling phenomenal creativity and refinement in web typography, and I’ve got a mere 28 minutes to tell you all about it.

I’ve been talking to Rich about his Web Day Out talk, and let me tell you, you don’t want to miss it!

It’s gonna be a wild ride! Join me at Web Day Out in Brighton on 12 March 2026. Use JOIN_RICH to get 10% off and you’ll also get a free online ticket for State of the Browser.

CSS in 2026: The new features reshaping frontend development - LogRocket Blog

Jemima runs through just some of the exciting new additions to CSS:

Replacing 150+ lines of JavaScript with just a few CSS features is genuinely wild. We’re able to achieve the same amount of complexity that we’ve always had, but now it’s a lot less work to do so.

And Jemima will be opening the show at Web Day Out in Brighton on the 12th of March if you want to hear more of this!

Don’t judge a book by its cover

Some neat CSS from Tess that’s a great example of progressive enhancement; these book covers look good in all browsers, but they look even better in some.

699: Jeremy Keith on Web Day Out – ShopTalk

This episode of the Shop Talk Show is the dictionary definition of “rambling” but I had a lot of fun rambling with Chris and Dave!

Lowering the specificity of multiple rules at once - Manuel Matuzovic

This is clever, and seems obvious in hindsight: use an anonymous @layer for your CSS reset rules!

Why we teach our students progressive enhancement | Blog Cyd Stumpel

Progressive enhancement is about building something robust, that works everywhere, and then making it better where possible.

NoLoJS: Reducing the JS Workload with HTML and CSS - Web Performance Calendar

You might not need (much) JavaScript for these common interface patterns.

While we all love the power and flexibility JS provides, we should also respect it, and our users, by limiting its use to only what it needs to do.

Yes! Client-side JavaScript should do what only client-side JavaScript can do.

I’m speaking at Web Day Out 2026 - Manuel Matuzovic

The core idea of the event is to get you up to speed on the most powerful web platform features that you can use right now. I love that because it aligns perfectly with what I’ve been working on over the last couple of years: finding ways to break old habits to get the most out of CSS.

Can’t wait!

Web development tip: disable pointer events on link images

Here’s a little snippet of CSS that solves a problem I’ve never considered:

The problem is that Live Text, “Select text in images to copy or take action,” is enabled by default on iOS devices (Settings → General → Language & Region), which can interfere with the contextual menu in Safari. Pressing down on the above link may select the text inside the image instead of selecting the link URL.

CSS-in-JS: The Great Betrayal of Frontend Sanity - The New Stack

This is a spot-on analysis of how CSS-in-JS failed to deliver on any of its promises:

CSS-in-JS was born out of good intentions — modularity, predictability and componentization. But what we got was complexity disguised as progress.

Responsive Letter Spacing – Cloud Four

Another clever use of clamp() and calc() for web typography, but this time it’s adjusting letter-spacing.

The only frontend stack we should talk about

Explore the platform. Challenge yourself to discover what the modern web can do natively. Pure HTML, CSS, and a bit of vanilla JS…

Custom Asidenotes – Eric’s Archived Thoughts

An excellent example of an HTML web component from Eric:

Extend HTML to do things automatically!

He layers on the functionality and styling, considering potential gotchas at every stage. This is resilient web design in action.

Write Code That Runs in the Browser, or Write Code the Browser Runs - Jim Nielsen’s Blog

So instead of asking yourself, “How can I write code that does what I want?” Consider asking yourself, “Can I write code that ties together things the browser already does to accomplish what I want (or close enough to it)?”

Layoutit Terra - CSS Terrain Generator

It’s wild what you can do with CSS these days!

Quantity queries using has() selector

Here’s a handy little tool for generating CSS with :has() selectors in order to do quantity queries.

Who needs a flying car when you have display: grid

I’m not the only one who’s amazed by how much you can do with just a little CSS these days.