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
🎉 CSS Basics is going on break for the holidays. See you in the new years!
December 19, 2025 at 10:15 PM
🎉 CSS Basics is going on break for the holidays. See you in the new years!
You Can’t Make Something Accessible to Everyone: "This post’s title is unpleasant, but it’s important to acknowledge the reality of the human condition and limitations in technologies. Even purpose-built assistive tech." #a11y adrianroselli.com/2025/12/you-...
You Can’t Make Something Accessible to Everyone
This post’s title is unpleasant, but it’s important to acknowledge the reality of the human condition and limitations in technologies. Even purpose-built assistive tech. Broadly, when someone says…
adrianroselli.com
December 19, 2025 at 10:00 PM
You Can’t Make Something Accessible to Everyone: "This post’s title is unpleasant, but it’s important to acknowledge the reality of the human condition and limitations in technologies. Even purpose-built assistive tech." #a11y adrianroselli.com/2025/12/you-...
Non-Square Image Blur Extensions: "I recently came across a demo which creates the blur extension effect by placing a div with a blur() beneath the image and I couldn’t help but think a simpler solution should be possible with a single image and minimal #CSS." frontendmasters.com/blog/non-squ...
Non-Square Image Blur Extensions
I recently came across this CodePen demo by Vivi Tseng, which creates the blur extension effect by placing a square div with a blur() beneath the img element and I couldn’t help but think a simpler…
frontendmasters.com
December 19, 2025 at 8:02 PM
Non-Square Image Blur Extensions: "I recently came across a demo which creates the blur extension effect by placing a div with a blur() beneath the image and I couldn’t help but think a simpler solution should be possible with a single image and minimal #CSS." frontendmasters.com/blog/non-squ...
What Else Could #CSS Container Queries... Query? "How far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for?" css-tricks.com/what-else-co...
What Else Could Container Queries... Query? | CSS-Tricks
How far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for?
css-tricks.com
December 19, 2025 at 6:04 PM
What Else Could #CSS Container Queries... Query? "How far can we really go with container queries? There are dozens of media queries now, so what if there were dozens of container queries as well? What could we use them for?" css-tricks.com/what-else-co...
What's wrong with this #HTML, and is it valid? "HTML can be very forgiving, and browsers implement things that may seem obscure or weird, but they do so for a very good reason: backward compatibility!" htmhell.dev/adventcalend...
December 18, 2025 at 10:02 PM
What's wrong with this #HTML, and is it valid? "HTML can be very forgiving, and browsers implement things that may seem obscure or weird, but they do so for a very good reason: backward compatibility!" htmhell.dev/adventcalend...
Creating a toggle switch with just #CSS: "Today, I wanted to quickly share how I built Kelp’s toggle switch component with a single HTML attribute and CSS (no JavaScript required)." gomakethings.com/creating-a-t...
Creating a toggle switch with just CSS
Today, I wanted to quickly share how I built Kelp’s toggle switch component with a single HTML attribute and CSS (no JavaScript required). Let’s dig in! The [role="switch"] attribute The…
gomakethings.com
December 18, 2025 at 8:03 PM
Creating a toggle switch with just #CSS: "Today, I wanted to quickly share how I built Kelp’s toggle switch component with a single HTML attribute and CSS (no JavaScript required)." gomakethings.com/creating-a-t...
"The good thing about using HTML elements is they have operability built in: ARIA does not. For example, a button element is included in the focus order and has event listeners attached, an element with role="button" will not." #a11y www.htmhell.dev/adventcalend...
December 18, 2025 at 6:03 PM
"The good thing about using HTML elements is they have operability built in: ARIA does not. For example, a button element is included in the focus order and has event listeners attached, an element with role="button" will not." #a11y www.htmhell.dev/adventcalend...
The Downsides of scrollbar-gutter: stable; (and one weird trick): "It maintains space for where a scrollbar would be, whether there actually is one or not. But do you always want that?" #CSS frontendmasters.com/blog/the-dow...
The Downsides of scrollbar-gutter: stable; (and one weird trick)
It maintains space for where a scrollbar would be, whether there actually is one or not. But do you always want that?
frontendmasters.com
December 17, 2025 at 10:01 PM
The Downsides of scrollbar-gutter: stable; (and one weird trick): "It maintains space for where a scrollbar would be, whether there actually is one or not. But do you always want that?" #CSS frontendmasters.com/blog/the-dow...
Controlling dialogs and popovers with the Invoker Commands API: "The Invoker Commands API adds new attributes to the
December 17, 2025 at 8:01 PM
Controlling dialogs and popovers with the Invoker Commands API: "The Invoker Commands API adds new attributes to the
A pragmatic guide to modern #CSS colours: "Kevin is back with the follow up to part one of this series. This time, Kevin goes deep on how functional the newer colour capabilities are in practice to hopefully, encourage more designers to use their browser more often." piccalil.li/blog/a-pragm...
A pragmatic guide to modern CSS colours - part two
Kevin is back with the follow up to part one of this series. This time, Kevin goes deep on how functional the newer colour capabilities are in practice to hopefully, encourage more designers to use…
piccalil.li
December 17, 2025 at 6:03 PM
A pragmatic guide to modern #CSS colours: "Kevin is back with the follow up to part one of this series. This time, Kevin goes deep on how functional the newer colour capabilities are in practice to hopefully, encourage more designers to use their browser more often." piccalil.li/blog/a-pragm...
Discover Dialog: "I hope this has been enough to convince you that it's worth using dialogs, if you aren't already, or maybe you've found a couple of interesting tidbits you otherwise weren't aware of." #HTML htmhell.dev/adventcalend...
December 16, 2025 at 10:00 PM
Discover Dialog: "I hope this has been enough to convince you that it's worth using dialogs, if you aren't already, or maybe you've found a couple of interesting tidbits you otherwise weren't aware of." #HTML htmhell.dev/adventcalend...
web.dev
Guidance to build modern web experiences that work in every browser.
web.dev
December 16, 2025 at 8:01 PM
IDREFs: What they are and how to use them: "IDREFs let you create explicit relationships between elements in your #HTML where they otherwise might not exist." htmhell.dev/adventcalend...
December 16, 2025 at 6:03 PM
IDREFs: What they are and how to use them: "IDREFs let you create explicit relationships between elements in your #HTML where they otherwise might not exist." htmhell.dev/adventcalend...
One #CSS Trick to Eliminate Scrollbar Layout Shifts: "To address this issue, you can use the scrollbar-gutter CSS property, which allows you to reserve space for the scrollbar, preventing layout shifts when it appears or disappears." www.amitmerchant.com/one-css-tric...
One CSS Trick to Eliminate Scrollbar Layout Shifts
When a webpage’s content exceeds the viewport height, browsers typically introduce a vertical scrollbar. This can lead to layout shifts, especially when navigating between pages or toggling content…
www.amitmerchant.com
December 15, 2025 at 10:01 PM
One #CSS Trick to Eliminate Scrollbar Layout Shifts: "To address this issue, you can use the scrollbar-gutter CSS property, which allows you to reserve space for the scrollbar, preventing layout shifts when it appears or disappears." www.amitmerchant.com/one-css-tric...
The Role of the 'lang' Attribute: "When your page is missing the lang attribute, the screen reader has to guess the language." #a11y htmhell.dev/adventcalend...
December 15, 2025 at 8:02 PM
The Role of the 'lang' Attribute: "When your page is missing the lang attribute, the screen reader has to guess the language." #a11y htmhell.dev/adventcalend...
Getting Creative With “The Measure” - "A good measure makes reading text comfortable, while a bad one makes it more difficult. So, rather than allowing layout to dictate the measure, doesn’t it make more sense for the measure to inform layout decisions?" #CSS css-tricks.com/getting-crea...
Getting Creative With “The Measure” | CSS-Tricks
A good measure makes reading text comfortable, while a bad one makes it more difficult. So, rather than allowing layout to dictate the measure, doesn’t it make more sense for the measure to inform…
css-tricks.com
December 15, 2025 at 6:04 PM
Getting Creative With “The Measure” - "A good measure makes reading text comfortable, while a bad one makes it more difficult. So, rather than allowing layout to dictate the measure, doesn’t it make more sense for the measure to inform layout decisions?" #CSS css-tricks.com/getting-crea...
Controlling dialogs and popovers with the Invoker Commands API: "The Invoker Commands API adds new attributes to the
December 14, 2025 at 7:04 PM
Controlling dialogs and popovers with the Invoker Commands API: "The Invoker Commands API adds new attributes to the
Direction-Aware Arrow Shape using corner-shape: "We can use the new corner-shape to draw different #CSS Shapes. And since it relies on border-radius, we can use the logical properties to create a direction-aware arrow that adjusts based on both the direction and the writing mode." css-tip.com/arrow/
Direction-Aware Arrow Shape using corner-shape
Combining corner-shape and logical properties to create direction-aware shapes.
css-tip.com
December 14, 2025 at 7:02 PM
Direction-Aware Arrow Shape using corner-shape: "We can use the new corner-shape to draw different #CSS Shapes. And since it relies on border-radius, we can use the logical properties to create a direction-aware arrow that adjusts based on both the direction and the writing mode." css-tip.com/arrow/
The Deep Card Conundrum: "What if you could make a card like a 3D portal, with layers of depth? You probably should just click to see, it's a very compelling look." #CSS frontendmasters.com/blog/the-dee...
The Deep Card Conundrum
What if you could make a card like a 3D portal, with layers of depth? You probably should just click to see, it's a very compelling look.
frontendmasters.com
December 12, 2025 at 6:04 PM
The Deep Card Conundrum: "What if you could make a card like a 3D portal, with layers of depth? You probably should just click to see, it's a very compelling look." #CSS frontendmasters.com/blog/the-dee...
An accessible pagination pattern (or two): "A couple of weeks ago I added pagination to my blog, and it was an interesting delve into the various designs and markup patterns that can be used." #a11y www.tempertemper.net/blog/an-acce...
An accessible pagination pattern (or two)
A couple of weeks ago I added pagination to my blog, and it was an interesting delve into the various designs and markup patterns that can be used.
www.tempertemper.net
December 11, 2025 at 8:03 PM
An accessible pagination pattern (or two): "A couple of weeks ago I added pagination to my blog, and it was an interesting delve into the various designs and markup patterns that can be used." #a11y www.tempertemper.net/blog/an-acce...
Drawing Triangles with #CSS Using Borders: "A long time ago, I wrote an article about triangles in CSS, and explained why the common border-based approach was far from ideal and should generally be avoided... Until now." alvaromontoro.com/blog/68086/d...
Drawing Triangles with CSS Using Borders... an Exception
A long time ago, I wrote an article about drawing triangles in CSS, and explained why the common border-based approach was far from ideal and should generally be avoided. In this article, I revisit a…
alvaromontoro.com
December 10, 2025 at 8:01 PM
Drawing Triangles with #CSS Using Borders: "A long time ago, I wrote an article about triangles in CSS, and explained why the common border-based approach was far from ideal and should generally be avoided... Until now." alvaromontoro.com/blog/68086/d...
How to Add and Remove Items From a Native #CSS Carousel (…with CSS): "It's already quite impressive you can build a carousel with no JS at all (in Chrome, for now, anyway) and with some checkbox-hack stuff we can control dynamically what is shown." frontendmasters.com/blog/how-to-...
How to Add and Remove Items From a Native CSS Carousel (…with CSS)
It's already quite impressive you can build a carousel with no JS at all (in Chrome, for now, anyway) and with some checkbox-hack stuff we can control dynamically what is shown.
frontendmasters.com
December 10, 2025 at 6:02 PM
How to Add and Remove Items From a Native #CSS Carousel (…with CSS): "It's already quite impressive you can build a carousel with no JS at all (in Chrome, for now, anyway) and with some checkbox-hack stuff we can control dynamically what is shown." frontendmasters.com/blog/how-to-...
Introduction to #CSS if Statements and Conditional Logic: "This guide covers the following: Introduces the new if() function in CSS; How it differs from earlier conditional techniques; Provides beginner‑friendly examples; FAQs for quick-reference related answers;" markodenic.com/introduction...
Introduction to CSS if Statements and Conditional Logic
Conditional logic is a familiar concept to anyone who has written a programming language. Languages like JavaScript or Python use if/else statements to evaluate expressions and execute different…
markodenic.com
December 9, 2025 at 8:03 PM
Introduction to #CSS if Statements and Conditional Logic: "This guide covers the following: Introduces the new if() function in CSS; How it differs from earlier conditional techniques; Provides beginner‑friendly examples; FAQs for quick-reference related answers;" markodenic.com/introduction...
On Inheriting and Sharing #CSS Property Values: "There are many ways to share properties, but what would it look like to inherit and use any parent property value on a child?" css-tricks.com/on-inheritin...
On Inheriting and Sharing Property Values | CSS-Tricks
There are many ways to share properties, but what would it look like to inherit and use any parent property value on a child?
css-tricks.com
December 9, 2025 at 6:02 PM
On Inheriting and Sharing #CSS Property Values: "There are many ways to share properties, but what would it look like to inherit and use any parent property value on a child?" css-tricks.com/on-inheritin...
How grid-template-areas offer a visual solution for your code: "Using grid lines is a flexible and powerful way to place your elements on a grid, but, when looking at the code, it might be a bit hard to visualize." #CSS webkit.org/blog/17620/g...
Grid: how grid-template-areas offer a visual solution for your code
Using grid lines is a flexible and powerful way to place your elements on a grid, but, when looking at the code, it might be a bit hard to visualize.
webkit.org
December 8, 2025 at 8:02 PM
How grid-template-areas offer a visual solution for your code: "Using grid lines is a flexible and powerful way to place your elements on a grid, but, when looking at the code, it might be a bit hard to visualize." #CSS webkit.org/blog/17620/g...