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
The Browser Hates Surprises: "To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary." #performance frontendmasters.com/blog/the-bro...
The Browser Hates Surprises
To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary.
frontendmasters.com
February 16, 2026 at 6:04 PM
The Browser Hates Surprises: "To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary." #performance frontendmasters.com/blog/the-bro...
You probably shouldn’t be annotating focus order: "When it comes to web accessibility, the order interactive elements receive should be a logical order. For the vast majority of situations, this means matching reading order." #a11y ericwbailey.website/published/yo...
You probably shouldn’t be annotating focus order
Sometimes not doing something is the right move.
ericwbailey.website
February 13, 2026 at 6:02 PM
You probably shouldn’t be annotating focus order: "When it comes to web accessibility, the order interactive elements receive should be a logical order. For the vast majority of situations, this means matching reading order." #a11y ericwbailey.website/published/yo...
button elements offer attributes to change form behavior: "Use formaction, formenctype, formmethod and formnovalidate to change form configuration with button attributes" #HTML www.stefanjudis.com/today-i-lear...
button elements offer attributes to change form behavior
Use formaction, formenctype, formmethod and formnovalidate to change form configuration with button attributes
www.stefanjudis.com
February 12, 2026 at 6:02 PM
button elements offer attributes to change form behavior: "Use formaction, formenctype, formmethod and formnovalidate to change form configuration with button attributes" #HTML www.stefanjudis.com/today-i-lear...
Container queries are rad AF! "The oversimplified explanation is that they’re like media queries, but the use a parent container element as the basis for their calculations instead of the viewport." #CSS gomakethings.com/container-qu...
Container queries are rad AF!
It’s still hard to give a shit about tech right now, and I want to give you an update on my community fridge project soon, but today, I actually am excited about a tech thing! Today, let’s talk about…
gomakethings.com
February 11, 2026 at 6:02 PM
Container queries are rad AF! "The oversimplified explanation is that they’re like media queries, but the use a parent container element as the basis for their calculations instead of the viewport." #CSS gomakethings.com/container-qu...
How the same content always has multiple different versions: "The same content can create clarity for one person and confusion, stress, or exclusion for another, without changing a single word." #a11y a11yblog.com/2026/01/30/h...
How the same content always has multiple different versions
We often talk about accessibility as if it were a checklist: contrast ratios, ARIA labels, keyboard navigation, screen readers. But it doesn’t explain why accessibility changes everything. The real…
a11yblog.com
February 10, 2026 at 6:02 PM
How the same content always has multiple different versions: "The same content can create clarity for one person and confusion, stress, or exclusion for another, without changing a single word." #a11y a11yblog.com/2026/01/30/h...
Some #CSS only contrast options until contrast-color() is Baseline widely available piccalil.li/blog/some-cs...
Some CSS only contrast options until contrast-color() is Baseline widely available
While we wait for contrast-color() to arrive in all browsers, these CSS-only approaches by Donnie D’Amato give us a practical way forward that we can use right now, along with lots of other knowledge…
piccalil.li
February 9, 2026 at 6:02 PM
Some #CSS only contrast options until contrast-color() is Baseline widely available piccalil.li/blog/some-cs...
Unstacking #CSS Stacking Contexts: "Stacking contexts are incredibly useful, but they’re also widely misunderstood and often mistakenly created, leading to a slew of layout issues that can be tricky to solve." www.smashingmagazine.com/2026/01/unst...
Unstacking CSS Stacking Contexts — Smashing Magazine
In CSS, we can create “stacking contexts” where elements are visually placed one on top of the next in a three-dimensional sense that creates the perception of depth. Stacking contexts are incredibly…
www.smashingmagazine.com
February 6, 2026 at 6:04 PM
Unstacking #CSS Stacking Contexts: "Stacking contexts are incredibly useful, but they’re also widely misunderstood and often mistakenly created, leading to a slew of layout issues that can be tricky to solve." www.smashingmagazine.com/2026/01/unst...
Names Are Hard But They Don't Have To Be: "When someone encounters a form that rejects their name, they don't think 'this is a technical limitation.' They think 'this company doesn't want me.' and they aren't wrong." toddl.dev/posts/names-...
A comprehensive guide to handling names in web applications with respect to people.
A comprehensive guide to handling names in web applications with respect to people.
toddl.dev
February 5, 2026 at 6:05 PM
Names Are Hard But They Don't Have To Be: "When someone encounters a form that rejects their name, they don't think 'this is a technical limitation.' They think 'this company doesn't want me.' and they aren't wrong." toddl.dev/posts/names-...
Styling ::search-text and Other Highlight-y Pseudo-Elements: "The new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that." #CSS css-tricks.com/how-to-style...
Styling ::search-text and Other Highlight-y Pseudo-Elements | CSS-Tricks
The new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that.
css-tricks.com
February 4, 2026 at 6:02 PM
Styling ::search-text and Other Highlight-y Pseudo-Elements: "The new ::search-text pseudo (Chrome 144) matches are yellow while the current target (::search-text:current) is orange, but ::search-text enables us to change that." #CSS css-tricks.com/how-to-style...
Lowering the specificity of multiple rules at once: "You probably already knew that you can use `:where()` to lower the specificity of a single selector, but did you know that you can achieve a similar effect on multiple rules at once?" #CSS www.matuzo.at/blog/2026/lo...
Lowering the specificity of multiple rules at once - Manuel Matuzovic
You probably already knew that you can use `:where()` to lower the specificity of a single selector, but did you know that you can achieve a similar effect on multiple rules at once?
www.matuzo.at
February 3, 2026 at 6:04 PM
Lowering the specificity of multiple rules at once: "You probably already knew that you can use `:where()` to lower the specificity of a single selector, but did you know that you can achieve a similar effect on multiple rules at once?" #CSS www.matuzo.at/blog/2026/lo...
I Learned The First Rule of ARIA the Hard Way: "Semantic HTML does a lot more accessibility work than we usually give it credit for already — and ARIA is simple to abuse when we use it both as a shortcut and as a supplement." #a11y css-tricks.com/i-learned-th...
I Learned The First Rule of ARIA the Hard Way | CSS-Tricks
Semantic HTML does a lot more accessibility work than we usually give it credit for already — and ARIA is simple to abuse when we use it both as a shortcut and as a supplement.
css-tricks.com
February 2, 2026 at 6:04 PM
I Learned The First Rule of ARIA the Hard Way: "Semantic HTML does a lot more accessibility work than we usually give it credit for already — and ARIA is simple to abuse when we use it both as a shortcut and as a supplement." #a11y css-tricks.com/i-learned-th...
How to Favicon in 2026: Three files that fit most needs: "Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack." evilmartians.com/chronicles/h...
How to Favicon in 2026: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog
Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack.
evilmartians.com
January 30, 2026 at 10:00 PM
How to Favicon in 2026: Three files that fit most needs: "Prefer SVG over PNG, trust browsers to downscale, drop obscure formats—the ultimate, exhaustive guide to favicons for modern web. Includes steps for static HTML and Webpack." evilmartians.com/chronicles/h...
Common misconceptions about testing accessibility: "Teams either overestimate what tools can do, underestimate their own role, or assume testing is something that happens once only, at completion of the development process." #a11y tetralogical.com/blog/2026/01...
Common misconceptions about testing accessibility - TetraLogical
Testing for accessibility is often misunderstood. Teams either overestimate what tools can do, underestimate their own role, or assume testing is something that happens once only, at completion of…
tetralogical.com
January 30, 2026 at 6:04 PM
Common misconceptions about testing accessibility: "Teams either overestimate what tools can do, underestimate their own role, or assume testing is something that happens once only, at completion of the development process." #a11y tetralogical.com/blog/2026/01...
Touch Targets and Web Accessibility: "Learn about touch target accessibility standards and WCAG guidelines. Discover why 24x24px or 44x44px targets improve usability for all users with code examples." #a11y www.sitepoint.com/touch-target...
Touch Targets and Web Accessibility
Learn about touch target accessibility standards and WCAG guidelines. Discover why 24x24px or 44x44px targets improve usability for all users with code examples.
www.sitepoint.com
January 29, 2026 at 10:01 PM
Touch Targets and Web Accessibility: "Learn about touch target accessibility standards and WCAG guidelines. Discover why 24x24px or 44x44px targets improve usability for all users with code examples." #a11y www.sitepoint.com/touch-target...
Better defaults for popovers: "I would argue that in most cases you want your popovers aligned closely with the button that controls them. As it turns out, that's super easy to achieve with #CSS anchor positioning, since popovers already have an implicit anchor." www.matuzo.at/blog/2026/be...
Better defaults for popovers - Manuel Matuzovic
I recently added a rule to my reset style sheet UA+ that I wanted to share with you.
www.matuzo.at
January 29, 2026 at 6:02 PM
Better defaults for popovers: "I would argue that in most cases you want your popovers aligned closely with the button that controls them. As it turns out, that's super easy to achieve with #CSS anchor positioning, since popovers already have an implicit anchor." www.matuzo.at/blog/2026/be...
Responsive Hexagon Grid Using Modern #CSS: "A while back, Temani tacked a repeating grid of hexagon shapes. Well, he’s updated it with modern CSS features that result in fewer magic numbers. And it’s impressive!" css-tricks.com/responsive-h...
Responsive Hexagon Grid Using Modern CSS | CSS-Tricks
A while back, Temani tacked a repeating grid of hexagon shapes. Well, he's updated it with modern CSS features that result in fewer magic numbers. And it's impressive!
css-tricks.com
January 28, 2026 at 10:00 PM
Responsive Hexagon Grid Using Modern #CSS: "A while back, Temani tacked a repeating grid of hexagon shapes. Well, he’s updated it with modern CSS features that result in fewer magic numbers. And it’s impressive!" css-tricks.com/responsive-h...
Rethinking “Pixel Perfect” Web Design: "Amit Sheen takes a hard look at the 'Pixel Perfect' legacy concept, explaining why it’s failing us and redefining what 'perfection' actually looks like in a multi-device, fluid world." #CSS www.smashingmagazine.com/2026/01/reth...
Rethinking “Pixel Perfect” Web Design — Smashing Magazine
Amit Sheen takes a hard look at the “Pixel Perfect” legacy concept, explaining why it’s failing us and redefining what “perfection” actually looks like in a multi-device, fluid world.
www.smashingmagazine.com
January 28, 2026 at 6:04 PM
Rethinking “Pixel Perfect” Web Design: "Amit Sheen takes a hard look at the 'Pixel Perfect' legacy concept, explaining why it’s failing us and redefining what 'perfection' actually looks like in a multi-device, fluid world." #CSS www.smashingmagazine.com/2026/01/reth...
Understanding the fundamentals of #CSS Layout: "Have you ever struggled to understand why the browser put the element where it did? Do you think CSS is hard to work with? By getting a better understanding of the fundamentals, you’ll learn to 'see the matrix'." polypane.app/blog/underst...
Understanding the fundamentals of CSS Layout | Polypane
When developers say that CSS is hard, they're usually talking about CSS layout. What often gets omitted though is that developers are assumed to understand and…
polypane.app
January 27, 2026 at 10:01 PM
Understanding the fundamentals of #CSS Layout: "Have you ever struggled to understand why the browser put the element where it did? Do you think CSS is hard to work with? By getting a better understanding of the fundamentals, you’ll learn to 'see the matrix'." polypane.app/blog/underst...
#SVG Filters are just amazing! - "So, lately, I have been exploring Haley Park’s website and it’s pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets." www.amitmerchant.com/svg-filters-...
SVG Filters are just amazing!
So, lately, I have been exploring Haley Park’s website and it’s pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets.
www.amitmerchant.com
January 27, 2026 at 6:02 PM
#SVG Filters are just amazing! - "So, lately, I have been exploring Haley Park’s website and it’s pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets." www.amitmerchant.com/svg-filters-...
Beware the faux bold (and how to fix it): "I don’t know if it’s just me, or if something’s happened in the last few months, but I keep seeing faux bolds everywhere. The fix is tiny and simple." #CSS clagnut.com/blog/2438
Beware the faux bold (and how to fix it)
I don’t know if it’s just me, or if something’s happened in the last few months, but I keep seeing faux bolds everywhere. The fix is tiny and simple, although frankly the mistake is pretty basic –…
clagnut.com
January 26, 2026 at 10:01 PM
Beware the faux bold (and how to fix it): "I don’t know if it’s just me, or if something’s happened in the last few months, but I keep seeing faux bolds everywhere. The fix is tiny and simple." #CSS clagnut.com/blog/2438
Adding shadows to irregular shapes in #CSS with filter: drop-shadow(): "Using box-shadow you can add shadows to any rectangular HTML element. But you can also use filter: drop-shadow() to add shadows to irregular shaped images." www.wearedevelopers.com/en/magazine/...
Adding shadows to irregular shapes in CSS with filter: drop-shadow()
Using box-shadow you can add shadows to any rectangular HTML element. But you can also use filter: drop-shadow() to add shadows to irregular shaped images.
www.wearedevelopers.com
January 26, 2026 at 6:03 PM
Adding shadows to irregular shapes in #CSS with filter: drop-shadow(): "Using box-shadow you can add shadows to any rectangular HTML element. But you can also use filter: drop-shadow() to add shadows to irregular shaped images." www.wearedevelopers.com/en/magazine/...
Responsive Hexagon Grid without Media Queries: "Using modern #CSS to create a responsive hexagon grid. corner-shape to create the hexagon shape and sibling-index() combined with math functions to conditionally apply a margin to only the first element of every other row." css-tip.com/hexagon-grid/
Responsive Hexagon Grid without Media Queries
A few lines of modern CSS to create a responsive grid of hexagon shapes (and more!)
css-tip.com
January 23, 2026 at 6:04 PM
Responsive Hexagon Grid without Media Queries: "Using modern #CSS to create a responsive hexagon grid. corner-shape to create the hexagon shape and sibling-index() combined with math functions to conditionally apply a margin to only the first element of every other row." css-tip.com/hexagon-grid/
Responsive and fluid typography with Baseline #CSS features: "Learn how to use Baseline CSS features to create typography that responds to the user with accessibility and developer ergonomics in mind." web.dev/articles/bas...
Responsive and fluid typography with Baseline CSS features | Articles | web.dev
Learn how to use Baseline CSS features to create typography that responds to the user with accessibility and developer ergonomics in mind.
web.dev
January 22, 2026 at 6:03 PM
Responsive and fluid typography with Baseline #CSS features: "Learn how to use Baseline CSS features to create typography that responds to the user with accessibility and developer ergonomics in mind." web.dev/articles/bas...
Don't Fall Into the "Accessibility Grade/Score" Trap: "Accessibility scores are attractive because they simplify what is complex, but they collapse lived experience into a number that can never reflect the needs of actual people." #a11y buttondown.com/access-abili...
Don't Fall Into the "Accessibility Grade/Score" Trap
A wooden box labeled “Accessibility Grades” being propped up with a stick with a string tied to it with a business man about to walk underneath In the rush...
buttondown.com
January 21, 2026 at 6:02 PM
Don't Fall Into the "Accessibility Grade/Score" Trap: "Accessibility scores are attractive because they simplify what is complex, but they collapse lived experience into a number that can never reflect the needs of actual people." #a11y buttondown.com/access-abili...
A Minimal #CSS Starter: "What would you include in a CSS starter, as a CSS minimalist? Submitting not a reset—yet perhaps five and a half surgical tweaks." meiert.com/blog/a-minim...
A Minimal CSS Starter · Jens Oliver Meiert
What would you include in a CSS starter, as a CSS minimalist? Submitting not a reset—yet perhaps five and a half surgical tweaks.
meiert.com
January 20, 2026 at 6:05 PM
A Minimal #CSS Starter: "What would you include in a CSS starter, as a CSS minimalist? Submitting not a reset—yet perhaps five and a half surgical tweaks." meiert.com/blog/a-minim...