CSS Basics
@cssbasics.fridayfrontend.com
Front-end dev links aimed at beginners, posted daily. Brought to you by @fridayfrontend.com and curated by @spaceninja.com
light-dark() isn't always the same as prefers-color-scheme: "I've thought that the new light-dark() #CSS function can be used as a drop-in replacement for prefers-color-scheme media queries. Today I learned that they don't always behave the same." www.stefanjudis.com/today-i-lear...
light-dark() isn't always the same as prefers-color-scheme
`light-dark()` and `prefers-color-scheme` treat the defined `color-scheme` values differently.
www.stefanjudis.com
December 5, 2025 at 8:01 PM
light-dark() isn't always the same as prefers-color-scheme: "I've thought that the new light-dark() #CSS function can be used as a drop-in replacement for prefers-color-scheme media queries. Today I learned that they don't always behave the same." www.stefanjudis.com/today-i-lear...
A complete guide to the #HTML number input: "There are a few anti articles around the web but they’re mostly out of date. Today, there are few reasons to avoid ." olliewilliams.xyz/blog/guide-t...
A complete guide to the HTML number input
Styling, UX, validation
olliewilliams.xyz
December 5, 2025 at 6:03 PM
A complete guide to the #HTML number input: "There are a few anti articles around the web but they’re mostly out of date. Today, there are few reasons to avoid ." olliewilliams.xyz/blog/guide-t...
It is OK to Say “#CSS Variables” Instead of (or Alongside) “Custom Properties”: "They are variables. More specifically: cascading variables. They change with the cascade: when different rules match, values can be overridden and change." blog.kizu.dev/css-variables/
It is OK to Say “CSS Variables” Instead of (or Alongside) “Custom Properties”
TPAC 2025 just ended, and I am positively tired. Attending it remotely, my sleep schedule is chaotic right now. I have many ideas for CSS-related posts in my list of ideas for November, but almost…
blog.kizu.dev
December 4, 2025 at 8:02 PM
It is OK to Say “#CSS Variables” Instead of (or Alongside) “Custom Properties”: "They are variables. More specifically: cascading variables. They change with the cascade: when different rules match, values can be overridden and change." blog.kizu.dev/css-variables/
How to Create 3D Images in #CSS with the Layered Pattern: "Repeat the same content over and over on top of each other, and you can move each of them just a smidge in 3D space creating the illusion of shape." frontendmasters.com/blog/how-to-...
How to Create 3D Images in CSS with the Layered Pattern
Repeat the same content over and over on top of each other, and you can move each of them just a smidge in 3D space creating the illusion of shape.
frontendmasters.com
December 4, 2025 at 6:03 PM
How to Create 3D Images in #CSS with the Layered Pattern: "Repeat the same content over and over on top of each other, and you can move each of them just a smidge in 3D space creating the illusion of shape." frontendmasters.com/blog/how-to-...
Responsive List of Stacked/Overlapping Images: "Using modern #CSS, the overlap between the images will adjust automatically based on the number of items and the available space. No hardcoded values, no magic numbers, and the gap is transparent!" css-tip.com/responsive-s...
Responsive List of Stacked/Overlapping Images
A few lines of modern CSS to create a horizontal list of responsive stacked images
css-tip.com
December 3, 2025 at 8:03 PM
Responsive List of Stacked/Overlapping Images: "Using modern #CSS, the overlap between the images will adjust automatically based on the number of items and the available space. No hardcoded values, no magic numbers, and the gap is transparent!" css-tip.com/responsive-s...
Cursors: "#CSS has a bunch of cursors already. Chances are, you’re not using them as much as you should be." blog.codepen.io/2025/11/17/c...
Chris’ Corner: Cursors
CSS has a bunch of cursors already. Chances are, you’re not using them as much as you should be. Well, should is a strong word. I can’t cite any evidence offhand that special cursors is…
blog.codepen.io
December 3, 2025 at 6:04 PM
Cursors: "#CSS has a bunch of cursors already. Chances are, you’re not using them as much as you should be." blog.codepen.io/2025/11/17/c...
More #CSS random() Learning Through Experiments: "There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values." frontendmasters.com/blog/more-cs...
More CSS random() Learning Through Experiments
There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values.
frontendmasters.com
December 2, 2025 at 8:03 PM
More #CSS random() Learning Through Experiments: "There is quite a bit of interesting design possibility with `random()` coming to CSS. It pairs nicely with animation, particularly animation-composition for agumenting those generated values." frontendmasters.com/blog/more-cs...
My #CSS selector strategy: "I start broad, letting global rules and element selectors do most of the work, and I get more specific only when I need to. This approach keeps my stylesheets smaller, faster, and hopefully much easier to understand." stuffandnonsense.co.uk/blog/my-css-...
My CSS selector strategy
stuffandnonsense.co.uk
December 2, 2025 at 6:03 PM
My #CSS selector strategy: "I start broad, letting global rules and element selectors do most of the work, and I get more specific only when I need to. This approach keeps my stylesheets smaller, faster, and hopefully much easier to understand." stuffandnonsense.co.uk/blog/my-css-...
Should We Even Have :closed? "Is there really a difference between using :not(:open) and :closed? As always, it depends. Sunkanmi Fafowora explains why :closed is currently not a thing." #CSS css-tricks.com/should-we-ev...
Should We Even Have :closed? | CSS-Tricks
Is there really a difference between using :not(:open) and :closed? As always, it depends. Sunkanmi Fafowora explains why :closed is currently not a thing.
css-tricks.com
December 1, 2025 at 8:03 PM
Should We Even Have :closed? "Is there really a difference between using :not(:open) and :closed? As always, it depends. Sunkanmi Fafowora explains why :closed is currently not a thing." #CSS css-tricks.com/should-we-ev...
Accessible Names and Labels: Understanding What Works and What Doesn’t: "This article explains how and why to use labels so the correct accessible names are visible and conveyed correctly to assistive technologies." #a11y www.tpgi.com/accessible-n...
Accessible Names and Labels: Understanding What Works and What Doesn’t - TPGi — a Vispero company
This article explains how and why to use labels so the correct accessible names are visible and conveyed correctly to assistive technologies.
www.tpgi.com
December 1, 2025 at 6:03 PM
Accessible Names and Labels: Understanding What Works and What Doesn’t: "This article explains how and why to use labels so the correct accessible names are visible and conveyed correctly to assistive technologies." #a11y www.tpgi.com/accessible-n...
Perfecting Baseline: "After two years, it’s clear that awareness about Baseline is grown a lot. As one of the co-chair of the group that makes Baseline, Patrick wanted to reflect on how Baseline is showing up in developer’s lives, but also how it can be perfected." piccalil.li/blog/perfect...
Perfecting Baseline
After two years, it’s clear that awareness about Baseline is grown a lot. As one of the co-chair of the group that makes Baseline, Patrick wanted to take a pause and reflect on how Baseline is…
piccalil.li
November 28, 2025 at 8:01 PM
Perfecting Baseline: "After two years, it’s clear that awareness about Baseline is grown a lot. As one of the co-chair of the group that makes Baseline, Patrick wanted to reflect on how Baseline is showing up in developer’s lives, but also how it can be perfected." piccalil.li/blog/perfect...
My Favorite Mac VoiceOver commands: "I hop into VoiceOver all the time to test the websites I’m building. By testing on a screen reader I can uncover bugs that a blind or low-vision person will encounter. Here are a few of the commands I use most often." #a11y thoughtbot.com/blog/my-favo...
My Favorite Mac VoiceOver commands
The world needs more accessibility tip listicles. Here’s one about screen reader testing.
thoughtbot.com
November 28, 2025 at 6:03 PM
My Favorite Mac VoiceOver commands: "I hop into VoiceOver all the time to test the websites I’m building. By testing on a screen reader I can uncover bugs that a blind or low-vision person will encounter. Here are a few of the commands I use most often." #a11y thoughtbot.com/blog/my-favo...
When to use #CSS text-wrap: balance vs. text-wrap: pretty: "But what does text-wrap do, exactly? And does it live up to the hype? In this article you’ll learn about the text-wrap CSS property, its different values, what they do, and their impact on UI design." blog.logrocket.com/css-text-wra...
When to use CSS text-wrap: balance vs. text-wrap: pretty - LogRocket Blog
Compare and contrast two CSS components, text-wrap: balance and text-wrap: pretty, and discuss their benefits for better UX.
blog.logrocket.com
November 27, 2025 at 8:01 PM
When to use #CSS text-wrap: balance vs. text-wrap: pretty: "But what does text-wrap do, exactly? And does it live up to the hype? In this article you’ll learn about the text-wrap CSS property, its different values, what they do, and their impact on UI design." blog.logrocket.com/css-text-wra...
Your accessibility score is lying to you: "Automation misses most issues, and can make teams think they’re done." #a11y chrisyoong.com/blog/your-ac...
Your accessibility score is lying to you
Automation misses most issues, and can make teams think they’re done
chrisyoong.com
November 27, 2025 at 6:02 PM
Your accessibility score is lying to you: "Automation misses most issues, and can make teams think they’re done." #a11y chrisyoong.com/blog/your-ac...
The Universal Focus Ring: "Replace the default focus ring with a stylish one that travels between the elements as you navigate with your keyboard. A funny experiment using Anchor Positioning." #CSS css-tip.com/universal-fo...
The Universal Focus Ring
Using anchor positioning to create a fancy focus ring that travels the whole page
css-tip.com
November 26, 2025 at 8:04 PM
The Universal Focus Ring: "Replace the default focus ring with a stylish one that travels between the elements as you navigate with your keyboard. A funny experiment using Anchor Positioning." #CSS css-tip.com/universal-fo...
100, 150, or 200? Debunking the Alt text character limit: "There’s no limit, Alt text should be as long or short as it needs to be, just succinct and correct. Just not super long." #a11y chrisyoong.com/blog/the-100...
100, 150, or 200? Debunking the Alt text character limit
The arbitrary limit can be built into input fields and automated tooling
chrisyoong.com
November 26, 2025 at 6:01 PM
100, 150, or 200? Debunking the Alt text character limit: "There’s no limit, Alt text should be as long or short as it needs to be, just succinct and correct. Just not super long." #a11y chrisyoong.com/blog/the-100...
Headings: Semantics, Fluidity, and Styling — Oh My! "A few links about headings that I’ve had stored under my top hat." #HTML #CSS css-tricks.com/headings-sem...
Headings: Semantics, Fluidity, and Styling — Oh My! | CSS-Tricks
A few links about headings that I've had stored under my top hat.
css-tricks.com
November 25, 2025 at 8:02 PM
Headings: Semantics, Fluidity, and Styling — Oh My! "A few links about headings that I’ve had stored under my top hat." #HTML #CSS css-tricks.com/headings-sem...
Explaining the Accessible Benefits of Using Semantic HTML Elements: "Why should you use a semantic button element instead of a generic div? Accessibility, right? But how exactly does it help accessibility?" #a11y css-tricks.com/explaining-t...
Explaining the Accessible Benefits of Using Semantic HTML Elements | CSS-Tricks
Why should you use a semantic <button> instead of a generic <div>? Accessibility, right? By how exactly does it help accessibility?
css-tricks.com
November 25, 2025 at 6:03 PM
Explaining the Accessible Benefits of Using Semantic HTML Elements: "Why should you use a semantic button element instead of a generic div? Accessibility, right? But how exactly does it help accessibility?" #a11y css-tricks.com/explaining-t...
ARIA and Real World Dangers: "Learn ARIA deeply before deploying it broadly. HTML should always be the first tool of choice. Use ARIA only when necessary, and only with precision. Done right, ARIA enhances accessibility. Done wrong, it undermines it." #a11y www.dennisdeacon.com/web/accessib...
ARIA and Real World Dangers - Dennis Deacon
Learn ARIA deeply before deploying it broadly. HTML should always be the first tool of choice. Use ARIA only when necessary, and only with precision. Done right, ARIA enhances accessibility. Done…
www.dennisdeacon.com
November 24, 2025 at 8:02 PM
ARIA and Real World Dangers: "Learn ARIA deeply before deploying it broadly. HTML should always be the first tool of choice. Use ARIA only when necessary, and only with precision. Done right, ARIA enhances accessibility. Done wrong, it undermines it." #a11y www.dennisdeacon.com/web/accessib...
Instant snapport: "While I’ve used scroll-margin before, little did I know that scroll-padding is out there too. So let’s take a closer look." #CSS cssence.com/2025/scroll-...
Instant snapport
How to tweak the optimal viewing region of the scrollport.
cssence.com
November 24, 2025 at 6:04 PM
Instant snapport: "While I’ve used scroll-margin before, little did I know that scroll-padding is out there too. So let’s take a closer look." #CSS cssence.com/2025/scroll-...
Sometimes the Best Accessibility Fix is a Usability Fix: "Accessibility gains often come from fixing ordinary UX friction points that already frustrate people who don’t have disabilities (yet)." #a11y buttondown.com/access-abili...
Sometimes the Best Accessibility Fix is a Usability Fix
AI cartoon of woman with long dark hair struggling to open a bottle, a common form of usability failure. Teams often arbitrarily divide work into two piles:...
buttondown.com
November 21, 2025 at 8:02 PM
Sometimes the Best Accessibility Fix is a Usability Fix: "Accessibility gains often come from fixing ordinary UX friction points that already frustrate people who don’t have disabilities (yet)." #a11y buttondown.com/access-abili...
How to use #CSS line-clamp to trim lines of text: "Learn how to use CSS line-clamp to truncate text lines cleanly, handle browser quirks, and avoid common UX issues." blog.logrocket.com/css-line-cla...
How to use CSS line-clamp to trim lines of text - LogRocket Blog
Learn how to use CSS line-clamp to truncate text lines cleanly, handle browser quirks, and avoid common UX issues.
blog.logrocket.com
November 21, 2025 at 6:04 PM
How to use #CSS line-clamp to trim lines of text: "Learn how to use CSS line-clamp to truncate text lines cleanly, handle browser quirks, and avoid common UX issues." blog.logrocket.com/css-line-cla...
Grayscale testing: The missing step in color accessibility: "A short guide to grayscale testing: why it matters and how to design visuals that work without color." #a11y blog.pope.tech/2025/11/03/g...
Grayscale testing: The missing step in color accessibility - Pope Tech Blog
A short guide to grayscale testing: why it matters and how to design visuals that work without color.
blog.pope.tech
November 20, 2025 at 8:03 PM
Grayscale testing: The missing step in color accessibility: "A short guide to grayscale testing: why it matters and how to design visuals that work without color." #a11y blog.pope.tech/2025/11/03/g...
The Weird Parts of position: sticky; – "There are a number of things that can rain on your sticky parade. Maybe it's time to actually understand why." #CSS frontendmasters.com/blog/the-wei...
The Weird Parts of position: sticky;
There are a number of things that can rain on your sticky parade. Maybe it's time to actually understand why.
frontendmasters.com
November 20, 2025 at 6:03 PM
The Weird Parts of position: sticky; – "There are a number of things that can rain on your sticky parade. Maybe it's time to actually understand why." #CSS frontendmasters.com/blog/the-wei...
Custom Cursor Accessibility: "It’s probably best that you don’t use custom CSS mouse cursors. If you must, please bear in mind the accessibility setting that increases pointer size. If you make your cursor abnormally large, it will be comically large!" #a11y dbushell.com/2025/10/27/c...
Custom Cursor Accessibility
The one where I fat finger with a mouse
dbushell.com
November 19, 2025 at 8:02 PM
Custom Cursor Accessibility: "It’s probably best that you don’t use custom CSS mouse cursors. If you must, please bear in mind the accessibility setting that increases pointer size. If you make your cursor abnormally large, it will be comically large!" #a11y dbushell.com/2025/10/27/c...