CSS Basics

The End of CSS Basics: After over ten years of sharing front-end links every week, the time has come for me to shut down Friday Front-End. Thanks for subscribing! spaceninja.com/blog/2026/th...

#CSS Grid for Beginners: "Learn how to use CSS grid for building layouts, step-by-step, with this beginner friendly tutorial." www.youtube.com/watch?v=RKWv...

New #CSS Multi-Column Layout Features: "The new column-height and column-wrap CSS multi-column layout properties enable us to wrap additional content into a new row." css-tricks.com/css-multi-co...

Your options for preloading images with #JavaScript: "There are a number of ways to preload an image on demand with JavaScript — each with their own strengths & drawbacks. Let's explore them." macarthur.me/posts/preloa...

Hiding Content Has No Effect on Accessible Name or Description Calculation: "By design, hiding content using display:none or the hidden attribute does not stop the content from being used to provide a name/description." #a11y html5accessibility.com/stuff/2026/0...

Let’s Get Puzzled! "We can make puzzle pieces in #CSS thanks to the amazing clip-path: shape(). Here, Amit takes it further by making a whole grid of them with matched edges and content inside." frontendmasters.com/blog/creatin...

Alternatives to the !important Keyword: "Cascade layers, specificity tricks, smarter ordering, and even some clever selector hacks can often replace !important with something cleaner, more predictable, and far less embarrassing to explain to your future self." #CSS css-tricks.com/alternatives...

Making emojis and icons screen reader accessible: "Learn how emojis and icons are often not traditional images that need special considerations to be screen reader accessible." #a11y blog.pope.tech/2026/04/01/m...

CSS Flexbox for beginners (mini course): "Hey folks, in this video I'm going to show you how to get started with Flexbox as a beginner. Flexbox is a really powerful #CSS feature that lets you size and align groups of elements." www.youtube.com/watch?v=lVvP...

font-family Doesn’t Fall Back the Way You Think: "A quick but important reminder that font-family declarations don’t inherit fallback stacks the way many developers assume." #CSS csswizardry.com/2026/04/font...

Screen readers are not testing tools: "Testing with assistive technologies is an important part of any accessibility review. However, especially when auditing against WCAG, they should not be the primary tools to use for testing. Here’s why." #a11y yatil.net/blog/screen-...

Selecting a Date Range in #CSS: "A clever approach for selecting multiple dates on a calendar where the :nth-child()'s “n of selector” syntax does all the heavy lifting... even in the JavaScript." css-tricks.com/selecting-a-...

Did you know some ARIA roles remove child semantics? "Some ARIA roles replace native HTML structure and remove child semantics. Learn how this works, why it happens, and when child roles must be explicitly defined." #a11y www.maxdesign.com.au/articles/ari...

#CSS position: sticky now sticks to the nearest scroller on a per axis basis! "If you’ve ever tried to build a table with sticky header and sticky first column, you know only one would stick. A recent change allows sticky elements to track different axes." www.bram.us/2026/03/30/c...

A guide to accessible focus indicators: "Have you ever lost your mouse cursor on your screen? This is what it is like when keyboard users don’t have focus indicators. Focus indicators aren’t just a feature, but a necessity for those who navigate with keyboards." #a11y blog.pope.tech/2026/03/04/a...

Highlighting Footnotes: "A short piece on using #CSS to highlight the active footnote of a document." kittygiraudel.com/2026/03/18/h...

Chris’ Corner: Even Grids: "It’s always interesting observing multiple people attack the same problem. Sometimes they aren’t even aware of each other." #CSS blog.codepen.io/2026/03/23/c...

The Color System I Wish I Understood Sooner: "Does your system for naming colors always feel like it falls short? This two-layer approach solves so many problems!" #CSS theadminbar.com/semantics-an...

Folded corner with #CSS: "She wanted to have this hover effect where the corner of the picture would fold over, as if peeling off a sticker from a flat surface." kittygiraudel.com/2026/03/05/f...

CSS position property explained: "How the #CSS position property works, with static, relative, absolute, fixed, and sticky elements." www.youtube.com/watch?v=xLHg...

"Put aria-hidden='true' on decorative SVGs, or they'll be announced by some screen readers." #a11y www.matuzo.at/blog/2026/pu...

Designing for people with low vision: "Low vision affects millions, yet it's often overlooked. Design choices from how we emphasise content to where we position controls, can empower people to customise their experience or create unnecessary barriers." #a11y tetralogical.com/blog/2026/03...

A Guide to the #CSS Backdrop-Filter Property: "A concise guide to CSS backdrop-filter for glassmorphism and translucent overlays — how it works, why order matters, and an interactive CodePen playground." www.alwaystwisted.com/articles/bey...

More Easy Light-Dark Mode Switching: light-dark() is about to support images! #CSS www.bram.us/2026/03/19/m...

There Is No “Wrong” in #CSS: "Wrong CSS doesn't exist — here's why. From backwards-compatibility to platform responsibility, find out why CSS advice is context, not law." www.sitepoint.com/there-is-no-...

View Transitions can swoop‽ "But hey, now we can add swoops to a native view transition and we learned a trick that can make motion blur view transitions. That's coo." #CSS nerdy.dev/swoop-there-...

How to implement an image gallery using Baseline features: "Image galleries are a common user interface pattern on the web. Learn how to create one using Baseline features." #HTML #CSS web.dev/articles/bas...

Beyond border-radius: What The #CSS corner-shape Property Unlocks For Everyday UI: "The new corner-shape property finally opens the door to beveled, scooped, and squircle corners." www.smashingmagazine.com/2026/03/beyo...

One #CSS Property That Makes Numbers Look Instantly Better: "When you’re working with fonts, especially for displaying numbers, there’s something called proportional spacing that can make a huge difference in how your numbers look when they’re animated." www.amitmerchant.com/one-css-prop...

You Don’t Know #HTML Tables: "This is a deep dive into HTML tables that cover its vocabulary and parts, Table Object Model, Cell headers, and the semantic value of table headers and footers." blog.frankmtaylor.com/2026/03/05/y...

The Value of z-index: "How we look at the stacking order of our projects, how we choose z-index values, and more importantly, the implications of those choices." #CSS css-tricks.com/the-value-of...

Native Random Values in #CSS: "The CSS Working Group has published the Values and Units Module Level 5, which introduces native mechanisms for generating random content using only CSS." alvaromontoro.com/blog/68092/n...

Naming Rectangles: "I greatly prefer names that are based upon the standard accessibility roles. It forces me to think more intently about the semantics. Should it be called Dialog or Modal? The correct answer is Dialog, named after the dialog role." #CSS mayank.co/notes/naming...

Getting Started With The Popover API: "Opening and closing, keyboard interaction, Escape handling, and much of the accessibility now come from the platform itself, not from ad-hoc JavaScript." #a11y www.smashingmagazine.com/2026/03/gett...

"How aria-labelledby works, including naming precedence, multiple references, hidden content, broken IDs, and shadow DOM boundaries." #a11y www.maxdesign.com.au/articles/ari...

Figcaptions versus alt text: "So alt and caption should never be the same. One replaces the image; the other supports it." #a11y www.tempertemper.net/blog/figcapt...

The Odometer Effect (without JavaScript): "We can take a value set in an HTML attribute and use it in #CSS, even extracting each individual digit in order to animate separately." frontendmasters.com/blog/the-odo...

Your skip link targets may not need tabindex=-1 to work properly: "Firefox was the first browser to fix it in 2013, followed by Internet Explorer, and finally Chrome in 2016. I don't know about Safari, but it was long enough ago that I can't remember anymore." #a11y matuzo.at/blog/2026/sk...

Automated accessible text with contrast-color(): "Let the browser pick the most readable text color for any background with this new #CSS function." una.im/contrast-col...

Responsive images without layout shift: "if you’re directly setting an image’s width and height using #CSS, then the browser only uses the width and height attributes in the #HTML tag to infer its aspect ratio." annafilou.com/en/width-hei...

Making interesting borders with #CSS corner-shape: "You can make cool beveled, rounded, notched, scooped, and elliptical borders with the new CSS corner-shape property!" cassidoo.co/post/css-cor...

The Different Ways to Select <html> in #CSS: "Sure, we can select the html element in CSS with, you know, a simple element selector. But what other (trivial and perhaps useless) ways can we do it?" css-tricks.com/the-differen...

Easier striped tables with the 'of [selector]' syntax: "Alternating table row colors are trivial with #CSS. But if you need to hide some rows later, the striped background gets messed up. It turns out I slept on a cool CSS feature that makes this a non-issue." www.darins.page/articles/eas...

Underlining Links With #CSS: "A practical guide to styling link underlines with modern CSS text-decoration properties. Perfect for bookmarking when you need a quick reference!" www.alwaystwisted.com/articles/und...

Yet Another Way to Center an (Absolute) Element: "We can center absolute-positioned elements in three lines of #CSS. And it works on all browsers!" css-tricks.com/yet-another-...

How to scale elements and their layout with #CSS zoom: "The CSS zoom property, unlike scale, affects an element's layout size, not just its visual appearance." www.stefanjudis.com/today-i-lear...

Smart Carousels with #CSS: "You’ve undoubtedly seen carousels on the web. You know how usually the content gets cut off? So for a long time, I thought this was an unavoidable problem. But then I saw a carousel that worked right on Apple’s website! So… there was a way!" annafilou.com/en/carousels

An in-depth guide to customising lists with #CSS: "Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level." piccalil.li/blog/an-in-d...

Anchored Menus and a Lesson in Scoping: "Turns out `anchor-scope` is pretty darn useful for button/menu setups that will appear multiple times on the same page." #CSS frontendmasters.com/blog/anchore...

#CSS Animation Triggers: Playing animations on scroll without scrubbing: "CSS scroll-triggered animations let you use scroll position to determine when animations play. Combined with scroll-driven animations for the perfect scrollytelling experience." utilitybend.com/blog/css-ani...