Issue #590

August 22, 2024

State of CSS 2024

Take the freshly opened State of CSS survey and help us define how CSS should be heading in the coming months.

Take the Survey

“Smart” Layouts With Container Queries

Kevin Powell explores new and interesting avenues for building layouts using container queries.

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.

As a CSS Weekly reader, you will get a 20% discount if you upgrade to Scrimba Pro to get access to all of their courses—only valid for the next two weeks.

Start Learning Today

▶ Tailwind CSS — How To Create a Stunning Button

Tailwind CSS is incredibly popular and incredibly useful. However, it has one major downside, which I tried to demonstrate in this video humorously. Let me know if you love it or hate it. ;)

Watch video

Articles & Tutorials

Responsive Bar Charts in HTML and CSS

Mathias Schäfer shows how to use HTML and CSS to create charts using declarative layouts and bidirectional positioning without computing positions and preventing overlap manually.

Speeding Up Your Sass Compilation in Vite and Webpack

James Stuckey Weber shares a guide on speeding up your Sass compilation in Vite and Webpack.

Feature Detect CSS @starting-style Support

Bramus Van Damme shows a clever way to detect @starting-style at-rule support. (You can see the @starting-style at-rule in action in my video Transition to “height: auto;” & “display: none;” Using Pure CSS.)

CSS Olympic Rings

Amit Sheen shares a creative guide on building animated 3D olympic rings in CSS.

The Article Element

Heydon Pickering explains everything you need to know about the HTML article element.

A Collection of Quality Apps for Development and Productivity

Setapp is a one-stop collection of premium Mac and iOS apps that will help you in your day-to-day workflow.

I use it and love it, as it helped me replace a number of individual app subscriptions. Sign up for a free trial and see for yourself.

Tools

CSS Grid Generator

CSS grid generator is an online tool that will help you easily create custom CSS grid layouts.

Check it out

A11y - Focus Order Figma plugin

The A11y – Focus Order plugin lets you add accessibility annotations over your designs for the interactive elements and share these annotations with engineers as part of your design.

Check it out

Inspiration

Layering CSS Gradients

Cassidy Williams demonstrates how you can layer CSS gradients on top of each other to achieve a stunning marker effect.

Get inspired

Until Next Week

Your opinion when it comes to the future of the web platform matters, and more than you might think.

You can participate in surveys or vote directly on browsers’ GitHub issues to send a direct signal of which feature you want to see implemented next.

You can share articles or videos you like on social media and thus encourage authors to create more similar content (and if you share this newsletter or one of my videos/articles, I’ll greatly appreciate it), or you can even reply to this newsletter and let me know which article you like or don’t like.

Of course, these are just a few straightforward examples, but the point is that your opinion matters, and we desperately want to hear it.

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 #589 Issue #591