
Issue #476
Learn how to create CSS Art, how to set up an expandable and accessible gallery, how to create a conditional border-radius, and more.


How To Build An Expandable Accessible Gallery
Silvestar Bistrović demonstrates how to set up a gallery that is expandable and accessible with a few tips and tricks along the way.
From Our Sponsor

Three days. No regrets. Join us online next week.
Our final event of 2021, An Event Apart Online Together: Fall Summit 2021, kicks off this Monday, October 11. Spanning the spectrum from climate-conscious development to design beyond the screen, and from advanced CSS to inclusive design and development, this three-day online web design conference will give you deep insights into where we are now, and where we are going next. Save $100 on any multi-day pass with promo code AEACSSW21.
Articles & Tutorials
Conditional Border Radius In CSS
Ahmad Shadeed shows how to use CSS comparison functions to create a conditional border radius.
Understanding min-content, max-content, and fit-content in CSS
Ibadehin Mojeed explains how fit-content, min-content, and max-content keyword values work in CSS.
The CSS prefers-color-scheme User Query and Order of Preference
Sara Soueidan outlines how prefers-color-scheme preference order works.
Take the State of CSS 2021 Survey
The State of CSS 2021 survey is now open. Make sure you participate so we can all learn more about the current state of CSS, and shape where it’s going.
Understanding Logical Focus Order
Rachel Leggett dives into logical focus order, explains what it is, why it matters, who it benefits from it, how to test it, and some common pitfalls to avoid.
Promoted Link

Master the Skill of Debugging CSS
Ahmad Shadeed wrote a book full of tips and techniques on how to debug CSS, which will help you significantly reduce the time you spend on debugging and fixing CSS bugs. Use the coupon code “cssweekly” at checkout to get a 15% discount.
Tools
ct.css
ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s <head> tags.
DOM Treemap
DOM Treemap is a Chrome Devtools extension that helps you explore the distribution of DOM nodes in the document tree.
Inspiration

Sci-Fi Art: A Vacuum From Space
Ben Evans created a stunning, mind-bending drawing using CSS.
Until Next Week
Thanks for reading! If you find the content valuable, please consider supporting the newsletter on Patreon.
Happy coding,
Zoran Jambor

CSS Stickers
A set of beautiful, cute, and funny CSS stickers to showcase your love for CSS.

CSS Weekly YouTube Channel
Weekly hands-on tutorials, tips, tools, news, and more — everything related to CSS and front-end development, created by Zoran Jambor.

