CSS Basics

The Figcaption Problem When an image isn't

The Figcaption Problem: "When an image isn't 'full width', but you want that caption underneath to wrap at the end of the image." #CSS frontendmasters.com/blog/the-fig...

Frontend Performance Checklist For 2025 In the speed-obsessed world of today, better performance comes with serious business gains. This frontend performance checklist is a cumulative list of items that we at Crystallize found important in…

Frontend Performance Checklist For 2025: "In the speed-obsessed world of today, better performance comes with serious business gains. This frontend #performance checklist is a cumulative list of items that we found important when creating a Superfast web application." crystallize.com/blog/fronten...

CSS Hyphens, Words, Syllables, and Languages There's a newish CSS feature called hyphens that specifies how you want words to be hyphenated when the text wraps. But if you use it, you're going to need to make sure you're also correctly…

#CSS Hyphens, Words, Syllables, and Languages: "If you use CSS hyphens (and really you should), you’re going to need to make sure you’re also correctly identifying the language. And to understand why that matters, we need to talk about words and syllables." blog.frankmtaylor.com/2025/07/17/c...

How to Discover a CSS Trick | CSS-Tricks Do we invent or discover CSS tricks? Lee Meyer discusses how creative limitations, recursive thinking, and unexpected combinations lead to his most interesting ideas.

How to Discover a #CSS Trick: "Do we invent or discover CSS tricks? Lee Meyer discusses how creative limitations, recursive thinking, and unexpected combinations lead to his most interesting ideas." css-tricks.com/how-to-disco...

The :has() CSS pseudo-class I finally got a chance to work with the :has() CSS pseudo-class as part of Kelp, my UI library for people who love HTML. Today, I wanted to quickly look at what it is and how it works. Let’s dig in!…

The :has() #CSS pseudo-class: "What if you wanted to apply styles to `.wizard` if it contained `.merlin` as a direct descendant? The `:has()` pseudo-selector let’s you do that!" gomakethings.com/the-has-css-...

Get the index of an element within its parent A native CSS function to get the index of an element among its siblings within a parent element

Get the index of an element within its parent: "A native #CSS function to get the index of an element among its siblings within a parent element." css-tip.com/element-index/

Setting Line Length in CSS (and Fitting Text to a Container) | CSS-Tricks The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future.

Setting Line Length in #CSS (and Fitting Text to a Container): "The many ways to juggle line length when working with text... including two proposed properties that could make it easier in the future." css-tricks.com/setting-line...

Adaptive Alerts (a CSS scroll-state Use Case) A single button, but it has two different behaviors in JavaScript depending on how far you’ve scrolled in an element (as determined by CSS!)

Adaptive Alerts: a #CSS scroll-state Use Case: "A single button, but it has two different behaviors in JavaScript depending on how far you’ve scrolled in an element, as determined by CSS!" frontendmasters.com/blog/adaptiv...

Why I’m Writing Pure HTML & CSS in 2025 Home - Zines

Why I’m Writing Pure #HTML & #CSS in 2025: "Imagine a web page that loads instantly, deploys effortlessly, and never needs a security update. I’m using pure HTML and CSS to accomplish all that and to build things in a fraction of the time." joeldare.com/why-im-writi...

Getting Creative With Versal Letters | CSS-Tricks A versal letters is a typographic flourish found in illuminated manuscripts and traditional book design, where it adds visual interest and helps guide a reader’s eye to where they should begin.

Getting Creative With Versal Letters: "How can you style drop caps to help to tell a brand's stories? Here’s how I do it in #CSS by combining ::first-letter and initial-letter with other unexpected properties, including border-image, and clip-path. " css-tricks.com/getting-crea...

Public and private CSS cascade layers in a design system One of the most important native modern CSS features I’m using in Kelp UI is cascade layers and the @layer at-rule. Today, I wanted to share how I use a mix public and private cascade layers in Kelp…

Public and private #CSS cascade layers in a design system: "What I love about cascade layers is that they let me take full advantage of the cascade. The cascade is good, actually, and the @layer at-rule lets me do that extremely effectively!" gomakethings.com/public-and-p...

@property Register custom CSS properties with specific syntax to enable smooth animations and transitions.

"The @property at-rule allows us to register custom #CSS properties with specific syntax. This opens up being able to animate the values of custom properties, which can make previously unanimateable things, well, animated!" html-css-tip-of-the-week.netlify.app/tip/at-prope...

How To Use The Browser Console: An In-Depth Guide | DebugBear The Console tab in Chrome DevTools is extremely feature-packed! Learn how to get started and explore its more advanced features.

How To Use The Browser Console: An In-Depth Guide: "The Console tab in Chrome #DevTools is extremely feature-packed! Learn how to get started and explore its more advanced features." www.debugbear.com/blog/chrome-...

Scroll-Driven Sticky Heading | CSS-Tricks I was playing around with scroll-driven animations, just searching for all sorts of random things you could do. That’s when I came up with the idea to animate main headings and, using scroll-driven…

Scroll-Driven Sticky Heading: "I was playing around with scroll-driven animations, and I came up with the idea to animate main headings and, using scroll-driven animations, change the headings based on the user’s scroll position." #CSS css-tricks.com/scroll-drive...

blur(1px) blur(1px) I know that you can “chain” the CSS property filter, like: All three of those filters will apply. But somehow I never thought about applying the same filter more than once. That also works, and they…

blur(1px) blur(1px): "I never thought about applying the same #CSS filter more than once. That also works, and they don’t override each other, they 'stack' (or whatever you want to call it)." frontendmasters.com/blog/blur1px...

Managing Focus and Visible Focus Indicators: Practical Accessibility Guidance for the Web - TPGi Visible focus indicators and logical focus order remain frequent pain points in web development. Kirby Tucker shows how to ease the pain.

Managing Focus and Visible Focus Indicators: "In this post, we’ll walk through three key WCAG success criteria related to keyboard focus and explain their practical implications to help you manage focus in a way that supports usability, accessibility, and clarity." #a11y www.tpgi.com/managing-foc...

Bulletproof web component loading Today, I wanted to talk about the “right” way to load web components to ensure they work predictably every time. Let’s dig in! The challenge Web components are self instantiating. Let’s imagine…

Bulletproof Web Component Loading: "Today, I wanted to talk about the 'right' way to load #WebComponents to ensure they work predictably every time. Let’s dig in!" gomakethings.com/bulletproof-...

Font size dimensions Pixels or font size for dimensions, and when.

Font size dimensions: "These are my new rules of thumb: Use fixed pixel units (px) for spacing; Avoid setting dimensions wherever possible; If you must set a dimension, use font relative units ((r)ch);" #CSS blog.damato.design/posts/font-s...

HTML Form inspector | Polypane Paste your HTML form code to get a detailed overview of its structure and fields.

#HTML Form inspector: "Paste your HTML form code to get a detailed overview of its structure and fields." polypane.app/form-inspect...

Step Gradients with a Given Number of Steps A deep dive into producing an interpolated

Step Gradients with a Given Number of Steps: "A deep dive into producing an interpolated 'gradient' of colors from just two provided colors." #CSS frontendmasters.com/blog/step-gr...

Generating colors with the CSS oklch() function Did you know CSS is a programming language, actually? A few weeks ago, I wrote about creating an accessible color palette using LCH. Today, I wanted to share how the CSS oklch() function makes that…

Generating colors with the #CSS oklch() function: "Did you know CSS is a programming language, actually? A few weeks ago, I wrote about creating an accessible color palette using LCH. Today, I wanted to share how the CSS oklch() function makes that even easier!" gomakethings.com/generating-c...

:nth-last-child Select elements by counting backwards from the end using the :nth-last-child pseudo-class selector.

:nth-last-child: "The :nth-last-child pseudo-class works just like :nth-child, but instead of counting from the beginning, it counts from the end of the parent element." #CSS html-css-tip-of-the-week.netlify.app/tip/nth-last...

14 logic-driven UI design tips to improve any interface UI design tips to improve your interface designs using logic rather than gut feel.

14 logic-driven UI #design tips to improve any interface: "UI design tips to improve your interface designs using logic rather than gut feel." uxplanet.org/14-logic-dri...

Lightning CSS I stumbled across this CSS processor and found it to be quite an interesting approach, so I talked about it in our typical project context.

Lightning #CSS: "I stumbled across this CSS processor and found it to be quite an interesting approach, so I talked about it in our typical project context." piccalil.li/links/lightn...

Pseudomotion, Motion Sensitivity, and Accessibility Newton’s Cradle with one red ball hanging on a thread, retracted and about to bang into five silver balls also hanging by threads. Motion sensitivity is a...

Pseudomotion, Motion Sensitivity, and Accessibility: "Pseudomotion can be just as harmful as real motion for individuals with motion sensitivity, triggering symptoms ranging from nausea to seizures." #a11y buttondown.com/access-abili...

How To Make A Strong Case For Accessibility — Smashing Magazine Gaining buy-in for accessibility can be challenging due to common myths and misunderstandings. For many, accessibility remains a big mystery. Here are some practical techniques for winning stakeholder...

How To Make A Strong Case For Accessibility: "Gaining buy-in for #a11y can be challenging due to common myths and misunderstandings. For many, accessibility remains a big mystery. Here are some practical techniques for winning stakeholder support." www.smashingmagazine.com/2024/06/how-...

How to create light and dark color modes with CSS Last week, we looked at how to create accessible and semantic color palettes as part of my deep dive into how I’m building Kelp, my UI library for people who love HTML. Today, I wanted to show you…

How to create light and dark color modes with #CSS: "Last week, we looked at how to create accessible and semantic color palettes. Today, I wanted to show you how I’m implementing light and dark modes. Let’s dig in!" gomakethings.com/how-to-creat...

Accessible Forms: Tips and Techniques - AFixt Forms are a vital part of the web experience, whether they’re used for signing up for a newsletter, completing a purchase, or submitting a contact request. As crucial as they are to user interaction,…

Accessible Forms: Tips and Techniques: "By prioritizing accessible forms, you’re making sure that everyone, regardless of their abilities, can interact with your content. Let’s ensure that your forms are accessible and provide a better user experience for all." #a11 afixt.com/accessible-f...

A guide to Scroll-driven Animations with just #CSS: "Linking animations to scrolling has traditionally required third-party libraries and JavaScript. But now, we can make those animations scroll-driven with nothing more than a few lines of CSS." webkit.org/blog/17101/a...

Inverse text-sizing based on text-length with attr(): "I’ve been chasing the white whale of responsive text-sizing for over a decade and I think I’ve got my best attempt to-date with the new attr() upgrades that landed in #CSS." daverupert.com/2025/06/fitt...