Menu

CSS

ARIA in CSS

November 10th, 2020

Jeremey reacting to Sara’s tweet, about using [aria-*] selectors instead of classes when the styling you are applying is directly related to the ARIA state. … this is my preferred way of hooking up CSS and JavaScript interactions. Here’s [an] old CodePen where you can see it in action Which is this classic matchup: [aria-hidden=’true’] { display:…

How to Write Loops with Preprocessors

November 4th, 2020

Loops are one of those features that you don’t need every day. But when you do, it’s awfully nice that preprocessors can do it because native HTML and CSS cannot. Sass (SCSS) for Loop CodePen Embed Fallback while Loop CodePen Embed Fallback each Loop CodePen Embed Fallback Less for Loop CodePen Embed Fallback while Loop…

Additive Animations in CSS

November 3rd, 2020

Daniel C. Wilson explains how with CSS @keyframe animations when multiple of them are applied to an element, they do both works. But if any properties are repeated, only the last one works. They override each other. I’ve seen this limitation overcome by applying keyframes to nested elements so you don’t have to do deal…

More on content-visibility

October 28th, 2020

Back in August 2020, when the content-visiblity property in CSS trickled its way into Chrome browsers, Una Kravets and Vladimir Levin wrote about it and we covered it. The weirdest part is that to get the performance value out of it, you pair it with contain-intrinsic-size on these big chunks of the page where you…

Comparing Various Ways to Hide Things in CSS

October 27th, 2020

You would think that hiding content with CSS is a straightforward and solved problem, but there are multiple solutions, each one being unique. Developers most commonly use display: none to hide the content on the page. Unfortunately, this way of hiding content isn’t bulletproof because now that content is now “inaccessible” to screen readers. It’s…

Creating CSS Shapes with Emoji

October 23rd, 2020

CSS Shapes is a standard that lets us create geometric shapes over floated elements that cause the inline contents — usually text — around those elements to wrap along with the specified shapes. Such a shaped flow of text looks good in editorial designs or designs that work with text-heavy contents to add some visual…

CSS in 3D: Learning to Think in Cubes Instead of Boxes

October 23rd, 2020

My path to learning CSS was a little unorthodox. I didn’t start as a front-end developer. I was a Java developer. In fact, my earliest recollections of CSS were picking colors for things in Visual Studio. It wasn’t until later that I got to tackle and find my love for the front end. And exploring…

Comparing Styling Methods in 2020

October 19th, 2020

Over on Smashing, Adebiyi Adedotun Lukman covers all these styling methods. It’s in the context of Next.js, which is somewhat important as Next.js has some specific ways you work with these tools, is React and, thus, is a components-based architecture. But the styling methods talked about transcend Next.js, and can apply broadly to lots of…

Full Bleed

October 15th, 2020

We’ve covered techniques before for when you want a full-width element within a constrained-width column, like an edge-to-edge image within a narrower column of text. There are loads of techniques. Perhaps my favorite is this little utility class: .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } That works…

How to Create a Realistic Motion Blur with CSS Transitions

October 14th, 2020

Before we delve into making a realistic motion blur in CSS, it’s worth doing a quick dive into what motion blur is, so we can have a better idea of what we’re trying to reproduce. Have you ever taken a photo of something moving quickly, especially under low light, and it turned into a blurry…