Issue #469

August 18, 2021

A Guide to Designing Accessible, WCAG-Compliant Focus Indicators

Sara Soueidan created an in-depth guide to building accessible focus indicators.

Practical Uses of CSS Math Functions: calc, clamp, min, max

$Practical Uses of CSS Math Functions: calc, clamp, min, max$

Stephanie Eckles reviews the four best-supported CSS math functions and explains how they can be practically used, such as within gradients and color functions and in combination with CSS custom properties.

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.

Learn More

Articles & Tutorials

CSS accent-color

Adam Argyle and Joey Arhar show how to bring your brand color to built-in HTML form inputs with one line of code.

The World of CSS Transforms

Joshua Comeau gives a deep dive into the transform property and shows you some of the cool and unexpected things you can do with it.

Level Up Your CSS Linting Using Stylelint

Rob O’Leary explains how to improve your code quality using Stylelint.

Building a Switch Component

Adam Argyle gives a foundational overview of how to build a responsive and accessible switch component.

Accessible Overflow

Marcus Herrmann shares research on the topic and the current state of overflow scrolling.

We speak your language: three days of learning, CSS, design, and more

Spanning the spectrum from climate-conscious development to design beyond the screen, and from advanced CSS to inclusive design and development, An Event Apart Online Together: Fall Summit 2021 will give you deep insights into where we are now, and where things are going next. Join us online October 11–13.

See the agenda and sign up now.

Tools

View Source

View Source is an online tool to view the source of any web page.

Check it out

TechStack

TechStack is an online tool to visualize your tech stack by simply pasting your package.json file and having it generate a beautiful bar of tech logos from your dependencies.

Check it out