Happy CSSSunday everyone!

Thanks to all who have appreciated StyleStage.dev for what it is: a playground to boost your CSS skills 🌠

Those skills are transferable whether you use a utility framework, are bound to a design system, or always roll your own. It's hugely beneficial to know how CSS works under the hood so you can make changes based on client expectations and user needs, and to ensure accessibility of your styles.

A large part of my career involved developing marketing websites, and now I lead dev of a design system, so I appreciate the many valid ways CSS enters a project. My marketing days were heavily reliant on Bootstrap, and now I manage both a Sass framework and (gasp) a CSS-in-JS implementation for our React lib. But for my own projects, I prefer using Sass in a maintanable but lean-as-possible way with a mix of BEM-style classes and element styles.

If you've been a CSS practitioner for any length of time, you're likely very familiar with the fact that not everyone shares your love of CSS. Majority unfamiliarity is an important factor to keep in mind when selecting any kind of technology. So for web design, this is largely why frameworks/libraries/design systems get introduced (although that fact is usually concealed by broadly claiming it will fix inefficiencies - and I may be guilty of using that line myself). Boosting general familiarity with CSS was a big motivating factor behind creating Style Stage as a playground to encourage learning what modern CSS can do. Thanks again for your support of this mission!

I'm excited to see a new fork or two of the stylestage repo nearly daily now, and I'm feeling like this might be a big release week of new stylesheets!

There are now 14 styles available - go check them out!

---

Recently Added Styles

• Manual by Lynn Fisher
• Emphasis By d-cs
• Stageflix By Suckcoder
• Headquarters By Stephanie Eckles

---

CSS Tip: Retain :focus outline for Windows High Contrast mode

So you have a button, and you've set outline: none but you've done your due diligence and created a comparable :focus state that passes contrast. Done deal - or is it?

After publishing my CSS Button Styling Guide it was brought to my attention that for users who have enabled Windows High Contrast mode (WHCM), the box-shadow I proposed wasn't visible.

Instead, we need to retain the outline. The trick here is to set it to transparent which will still receive a visible color for WHCM 🙌

Skip to the snippet in my button article, or read more tips for handling for WHCM from Sarah Higley.

---

Weekly Link Roundup

Here’s some links you may have missed:

• Adam Argyle shared a CodePen showing Saturated vs. Desaturated Box-Shadow
• 📅 Mark your calendars to participate in the #eggheadChat with CSS animation whiz JHey on Friday, July 31
• Eric Meyer shares a concept he calls Accordion Rows in CSS Grid which might just help you with your Style Stage submission 😉
• Piccalilli shared a quick tip on making a button feel pressed
• SVG animator Cassie Evans (@cassiecodes) joined Eva on Twitch to show how to get started making SVG animations
• 🚨 Don't miss this event from Twitter on Disability in UX
• Eric Eggert's short thread hitting the importance of the Web Content Accessibility Guidelines (WCAG)
• Speaking of accessibility - this week I created a bit of a test of your skills in spotting a11y fails

Confused why I'm adding accessibility links? Well, it's important. Period. And also Style Stage guidelines include accessiblity considerations.

---

Keep it .class-y,
Steph • @5t3ph