Lightnews — Scholar-powered news

CSS Basics @cssbasics.fridayfrontend.com · 23h

aria-label or title? Screen Reader Behaviour Explained: "Discover how screen readers handle aria-label vs title attributes. Get clear guidance on implementation and accessibility standards." #a11y www.a11y-collective.com/blog/aria-la...

aria-label or title? Screen Reader Behaviour Explained

Discover how screen readers handle aria-label vs title attributes. Get clear guidance on implementation and accessibility standards.

www.a11y-collective.com

CSS Basics @cssbasics.fridayfrontend.com · 1d

New to the web platform in September: "Discover some of the interesting features that have landed in stable and beta web browsers during September 2025." #CSS web.dev/blog/web-pla...

New to the web platform in September | Blog | web.dev

Discover some of the interesting features that have landed in stable and beta web browsers during September 2025.

web.dev

CSS Basics @cssbasics.fridayfrontend.com · 2d

The #HTML picture element: "Sometimes, designs have different images for large and small screen layouts. The

1

CSS Basics @cssbasics.fridayfrontend.com · 4d

A workaround for using custom properties in media queries: "One of the most frustrating aspects of #CSS media queries is that we can’t use custom properties with them. This often results in hard-coded values in otherwise, highly configurable codebases." piccalil.li/blog/a-worka...

A workaround for using custom properties in media queries

One of the most frustrating aspects of media queries is that we can’t use custom properties with them. This often results in hard-coded values in otherwise, highly configurable codebases. Manuel has…

piccalil.li

1

CSS Basics @cssbasics.fridayfrontend.com · 5d

A tiny bit-o-CSS for Stable Scrollbar Gutters: "To show scrollbars only when they’re needed (while keeping space for the scrollbar if it’s added later) use the scrollbar-gutter #CSS property." www.zachleat.com/web/stable-s...

Zach Leatherman—zachleat.com

A post by Zach Leatherman (zachleat)

zachleat.com

3

CSS Basics @cssbasics.fridayfrontend.com · 6d

This Website Has No Class: "I decided to banish classes from my website completely… By virtue of their progressively enhanced nature, custom tag names and custom attributes are 100% valid #HTML, javascript or no." #CSS aaadaaam.com/notes/no-cla...

This website has no class | Adam Stoddard

Going “full CSS Zen Garden” with modern CSS.

aaadaaam.com

4

CSS Basics @cssbasics.fridayfrontend.com · 8d

Is it Time to Un-Sass? "Many of the Sass features we've grown to love have made their way into native #CSS in some shape or form. So, should we still use Sass?" css-tricks.com/is-it-time-t...

Is it Time to Un-Sass? | CSS-Tricks

Many of the Sass features we've grown to love have made their way into native CSS in some shape or form. So, should we still use Sass? This is how developer Jeff Bridgforth is thinking about it.

css-tricks.com

1 2

CSS Basics @cssbasics.fridayfrontend.com · 11d

Prevent scrollbar jump: "The scrollbar-gutter #CSS property tells the browser to reserve space for a scrollbar, even when one isn’t visible. It can be used to prevent that visual shift." gomakethings.com/prevent-scro...

Prevent scrollbar jump

With modal components, it’s common/expected to prevent the background from scrolling. /** * Prevent background scrolling with a modal dialog is open */ html:has(dialog[open]:modal) { overflow:…

gomakethings.com

1

CSS Basics @cssbasics.fridayfrontend.com · 12d

Composition in #CSS: "CSS is a composable language by nature. This composition nature is already built into the cascade. We simply don't talk about composition as a Big Thing because it's the nature of the language." css-tricks.com/composition-...

Composition in CSS | CSS-Tricks

CSS is a composable language by nature. This composition nature is already built into the cascade. We simply don't talk about composition as a Big Thing because it's the nature of the language.

css-tricks.com

CSS Basics @cssbasics.fridayfrontend.com · 13d

How to Create an Accessible Table with Clickable Rows: "Extend the reach of your buttons to support keyboard and screen reader users." #CSS #a11y www.oidaisdes.org/table-with-c...

How to Create an Accessible Table with Clickable Rows

Extend the reach of your buttons to support keyboard and screen reader users.

www.oidaisdes.org

2

CSS Basics @cssbasics.fridayfrontend.com · 14d

Just use #HTML: "I’ve worked on so many projects recently that were more complicated than they needed to be because they used #JavaScript to generate HTML." gomakethings.com/just-use-html/

Just use HTML

I’ve worked on so many projects recently that were more complicated than they needed to be because they used JavaScript to generate HTML. JavaScript is… Slower to load Slower to run More prone to…

gomakethings.com

1

CSS Basics @cssbasics.fridayfrontend.com · 15d

Breakpoint Columns, Five Ways: "There are usually multiple ways to do the same thing on the web. Sometimes... a lot of ways. Which is 'better' can be a matter of taste or which abstraction buys the most value. Check out this #CSS example and see which you prefer." frontendmasters.com/blog/breakpo...

Breakpoint Columns, Five Ways. Which Do You Like?

There are usually multiple ways to do the same thing on the web. Sometimes... a lot of ways. Which is

frontendmasters.com

1 2

CSS Basics @cssbasics.fridayfrontend.com · 16d

Single-colour #CSS gradients: "Gradients are generally for going from one colour to another, so the idea of a single-colour gradient might seem a bit useless, but there are a few good use cases for them." html-css-tip-of-the-week.netlify.app/tip/single-c...

2

CSS Basics @cssbasics.fridayfrontend.com · 16d

Why You Should Test Your Page Without #JavaScript: "Build accessible websites that work without JavaScript. Learn progressive enhancement and fallback strategies for better user experience." www.sitepoint.com/test-your-pa...

Why You Should Test Your Page Without JavaScript

Build accessible websites that work without JavaScript. Learn progressive enhancement and fallback strategies for better user experience.

www.sitepoint.com

2

CSS Basics @cssbasics.fridayfrontend.com · 19d

What Can We Actually Do With #CSS corner-shape? "So, corner-shape is actually a helluva lot of fun. It certainly has more uses than I expected, and no doubt with some experimentation you’ll come up with some more." css-tricks.com/what-can-we-...

What Can We Actually Do With corner-shape? | CSS-Tricks

When I first started messing around with code, rounded corners required five background images or an image sprite likely created in Photoshop, so when

css-tricks.com

CSS Basics @cssbasics.fridayfrontend.com · 21d

While you’re fixing the fun stuff, fix the important stuff too: "We walk through a fictional bug and fix a little visual issue, but we then spend time uncovering other much more important issues and fix them too." #CSS piccalil.li/blog/while-y...

While you’re fixing the fun stuff, fix the important stuff too

We walk through a fictional bug and fix a little visual issue, but we then spend time uncovering other much more important issues and fix them too.

piccalil.li

CSS Basics @cssbasics.fridayfrontend.com · 22d

Why I still prefer ems over rems: "This allows you to scale things like margins and padding proportionally with font-size changes. It also makes it really easy to adjust the size of all elements inside a parent element." #CSS gomakethings.com/why-i-still-...

Why I still prefer ems over rems

Today, I wanted to talk about why I still think em units are superior to rem, and why Kelp uses them. Let’s dig in! Relative units Relative units are ways to define size in CSS that’s relative to the…

gomakethings.com

1

CSS Basics @cssbasics.fridayfrontend.com · 25d

View Transitions: What Could Possibly Go Wrong? "Most of the time, View Transitions just work. This page is for the exceptions: the quirks, the caveats, the things that quietly cancel your animations. Learn how to detect them and bring transitions back to life." #CSS vtbag.dev/tips/view-tr...

View Transitions: What Could Possibly Go Wrong?

Most of the time, View Transitions just work. This page is for the exceptions: the quirks, the caveats, the things that quietly cancel your animations. Learn how to detect them and bring transitions…

vtbag.dev

2

CSS Basics @cssbasics.fridayfrontend.com · 26d

What're Your Top 4 #CSS Properties? "Everyone has a different opinion which is great because it demonstrates the messy, non-linear craft that is thinking like a front-end developer." css-tricks.com/whatre-your-...

What're Your Top 4 CSS Properties? | CSS-Tricks

Everyone has a different opinion which is great because it demonstrates the messy, non-linear craft that is thinking like a front-end developer.

css-tricks.com

CSS Basics @cssbasics.fridayfrontend.com · 27d

The dialog modal ::backdrop, #CSS variables, and Safari: "Last week, I ran into yet another CSS bug around using CSS variables to style the ::backdrop on modal

The dialog modal ::backdrop, CSS variables, and Safari

I love the native <dialog> element, and I love CSS variables. I make heavy use of both in Kelp. Last week, I ran into yet another CSS bug around using CSS variables to style the ::backdrop on modal…

gomakethings.com

1

CSS Basics @cssbasics.fridayfrontend.com · 28d

The Fundamentals of #CSS Alignment: "This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!" css-tip.com/explore/alig...

The Fundamentals of CSS Alignment

This deep dive covers everything you need to know about CSS alignment. It's time to stop doing trial and error and finally understand how everything works!

css-tip.com

3 9

CSS Basics @cssbasics.fridayfrontend.com · 29d

Should you preload fonts for performance? "Everyone’s preloading fonts for faster sites. But did you know it can secretly regress your First Contentful Paint instead? Let’s look at when preloading helps, when it hurts, and the simple rules to follow." #performance www.erwinhofman.com/blog/should-...

Should you preload fonts for performance?

Preloading fonts can speed up or slow down your site. Learn how it affects FCP/LCP, how Chrome handles preloads, and when to use them for better performance.

www.erwinhofman.com

2

CSS Basics @cssbasics.fridayfrontend.com · Sep 12

Testing Methods: Resize Text: "People with visual impairments often need larger text to read comfortably. If resizing text breaks the layout or hides content, it can make a site unusable." #a11y www.dennisdeacon.com/web/accessib...

Testing Methods: Resize Text - Dennis Deacon

WCAG SC 1.4.4 ensures text can be resized to 200% without losing content or function. Automation flags code issues, AI spots layout problems, and manual testing confirms usability.

www.dennisdeacon.com

1

CSS Basics @cssbasics.fridayfrontend.com · Sep 11

How to dismiss native #HTML dialog elements when the backdrop is clicked: "The `closedby` attribute tells browsers what methods of closing a

How to dismiss native HTML dialog elements when the backdrop is clicked

The HTML <dialog> element is a browser-native way to create dialog modals. It handles a lot of (but not all of) the accessibility stuff out-of-the-box. By default, the <dialog> element is closed…

gomakethings.com

1 2

CSS Basics @cssbasics.fridayfrontend.com · Sep 10

Opening a Details Element from the URL: "If the #hash in the URL matches the ID of an element *inside* a element, it'll open. No other fancy code required." #HTML frontendmasters.com/blog/opening...

Opening a Details Element from the URL

If the #hash in the URL matches the ID of an element *inside* a element, it'll open. No other fancy code required.

frontendmasters.com