Issue #600

November 27, 2024

An Official Logo for CSS

CSS-Next Community Group, together with the community, created an official CSS logo. It’s simple and clean, with a wonderful CSS color rebeccapurple, and you can start using it today.

▶ CSS Popover + Anchor Positioning is Magical

Kevin Powell demonstrates how CSS anchor positioning works.

Watch video

Level Up Your Coding Skills With Scrimba

Level up your coding skills and build awesome projects in a variety of languages and frameworks, including HTML, CSS, JavaScript, React, TypeScript, and more.

For a limited time, you can get a Black Friday discount if you upgrade to Scrimba Pro to get access to all of their courses.

Level Up Your Coding Skills »

▶ Frontend News #9: View Transitions, Container Queries, Baseline Status

Find out how to use View Transitions API to create cross-document page transitions, how to easily show Baseline status on your blog posts, how Container Queries work, and more.

Watch video

Articles & Tutorials

Make creative borders with background-clip border-area

Jen Simmons explains how you can apply a background image to a border using background-clip: border-area, available today in Safari Technology Preview and Safari 18.2 beta.

A Framework for Evaluating Browser Support

Josh W. Comeau shares a framework that might help you decide whether it’s appropriate to use a new CSS feature.

Experiment: Automatically triggered View Transitions with MutationObserver

Bramus Van Damme shows how to auto-trigger a View Transition with MutationObserver.

Solved by CSS: Donuts Scopes

Juan Diego Rodríguez explores different solutions to prevent parent styles from leaking to nested content, including 2024’s @scope at-rule.

Alt Text: Not Always Needed

Geoff Graham looks at different situations and contexts where alt text may not be needed and what you can do in those cases.

This is the best time to get your JavaScript Certification! Built under review by industry leaders.

Validate your JavaScript competency
Join certified developers from companies like IBM, Ford, Google
“Best certification procedure I have taken yet” – Janis Walliser, Principle Software Engineer at Salesforce

Get certified →

Tools

Native Dual-Range Input

Stanko Tadić built a nice, dual-range input component you can easily implement and style.

Check it out

Little-Date

Little-Date is an opinionated library that makes date-ranges short and readable.

Check it out

Inspiration

Sunlit

Jacky Zhao created a stunning, pure CSS implementation of some sunlight streaming in through the window.

Get inspired

Until Next Week

I’ve been thinking about getting on this Black Friday train and creating some merchandise with CSS Stickers artwork. What do you think? Would you like to see
“screaming monster with !important” on a t-shirt, hoodie, or a mug?

Let me know on YouTube, Bluesky, or X / Twitter.

Happy coding,
Zoran Jambor

PS. If you want to support this newsletter and my work, check out:
• CSS Stickers
• CSS Weekly Patreon
• CSS Weekly YouTube Channel
• Mastering Linting

Issue #599 Issue #601