Unchain My Inaccessibly-Labelled Heart | CSS-Tricks

Suzy Naschansky from the HTMHell Advent Calendar: <h2 id=”article1-heading”>All About Dragons</h2> <p>I like dragons. Blah blah blah blah blah.</p> <p> <a id=”article1-read-more” aria-labelledby=”article1-read-more article1-heading”>Read more</a> </p> See that aria-labelledby attribute? It chains two IDs from the markup, one for the heading (#article1-heading) and one for the link (#article1-read-more). What happens there is a screenreader will replace the existing semantic label between the link tags and use the content from both

Read More

A Few Times Container Size Queries Would Have Helped Me Out | CSS-Tricks

CSS Container Queries are still gaining traction and many of us are getting our hands wet with them, even if it’s for little experiments or whatnot. They’ve got great, but not quite full, browser support — enough to justify using them in some projects, but maybe not to the extent where we might be tempted to start replacing media queries from past projects with shiny new container size queries. They

Read More

Saving Settings for a Custom WordPress Block in the Block Editor | CSS-Tricks

We’ve accomplished a bunch of stuff in this series! We created a custom WordPress block that fetches data from an external API and renders it on the front end. Then we took that work and extended it so the data also renders directly in the WordPress block editor. After that, we created a settings UI for the block using components from the WordPress InspectorControls package. There’s one last bit for

Read More

CSS Infinite Slider Flipping Through Polaroid Images | CSS-Tricks

In the last article, we made a pretty cool little slider (or “carousel” if that’s what you prefer) that rotates in a circular direction. This time we are going to make one that flips through a stack of Polaroid images. CodePen Embed Fallback Cool right? Don’t look at the code quite yet because there’s a lot to unravel. Join me, will ya? The basic setup Most of the HTML and

Read More

Animated Background Stripes That Transition on Hover | CSS-Tricks

How often to do you reach for the CSS background-size property? If you’re like me — and probably lots of other front-end folks — then it’s usually when you background-size: cover an image to fill the space of an entire element. Well, I was presented with an interesting challenge that required more advanced background sizing: background stripes that transition on hover. Check this out and hover it with your cursor:

Read More

Adding Box Shadows to WordPress Blocks and Elements | CSS-Tricks

I stumbled across this tweet from Ana Segota looking for a way to add a CSS box-shadow to a button’s hover state in WordPress in the theme.json file. Is it possible to add a box-shadow for the button on hover state in theme.json? #WordPress — Ana Segota (@Ana_Segota) November 1, 2022 She’s asking because theme.json is where WordPress wants us to start moving basic styles for block themes. Traditionally, we’d

Read More

CSS is OK, I guess. | CSS-Tricks

Nothing but ear-to-ear smiles as I was watching this video from @quayjn on YouTube. (No actual name in the byline, though I think it’s Brian Katz if my paper trail is correct). The best is this Pen you can use to sing along… CodePen Embed Fallback The little song Una did for memorizing for JavaScript’s map(), filter(), and reduce()methods at the end of this article comes to mind for sure.

Read More

Does WWW still belong in URLs? | CSS-Tricks

For years, a small pedantry war has been raging in our address bars. In one corner are brands like Google, Instagram, and Facebook. This group has chosen to redirect example.com to www.example.com. In the opposite corner: GitHub, DuckDuckGo, and Discord. This group has chosen to do the reverse and redirect www.example.com to example.com. Does “WWW” belong in a URL? Some developers hold strong opinions on the subject. We’ll explore arguments for and against it after a

Read More

Apple Messages & Color Contrast | CSS-Tricks

Well, color me this! I was griping to myself last night about just how gosh dang hard it is to read text messages in Apple Messages. You know, not the blue bubbles that you get when messaging other iPhone users. Those are iMessages. What I’m talking about are the green bubbles you get when messaging non-iPhone users. Those are standard text messages. iMessage (left) and text message (right) Let’s run

Read More

More Than “Slapping Paint on a Website” | CSS-Tricks

I’m a sucker for anything about front-end job titles. Anselm Hannemann: CSS evolved and we’re beyond the point where everyone can just do it as a side interest. We all can learn it and build amazing stuff with it, but using it wisely and correctly in a large-scale context isn’t an easy job anymore. It deserves people whose work is to focus on that part of the code. Anselm is

Read More