Latest News

What naming scheme do you use for color variables?
Have you succeeded at writing CSS that uses color variables in a manner agnostic to the colors they represent?
I’ve tried all of the following, and I have yet to succeed at writing CSS that works well with any color scheme. ☹️

— Lea Verou (@LeaVerou) October 14, 2018

I remember the very first time I tried Sass on a project. The first thing I wanted to do was variablize my …

The post What do you name color variables? appeared first on CSS-Tricks.

This is a great look at accessible SVG markup patterns by Marco Hengstenberg. Here’s the ideal example:

<button type="button">
Menu
<svg class="svg-icon"
role="img"
height="10"
width="10"
viewBox="0 0 10 10"
aria-hidden="true"
focusable="false">
<path d="m1 7h8v2h-8zm0-3h8v2h-8zm0-3h8v2h-8z"/>
</svg>
</button>

Notes:

• It’s not the <svg> itself that is interactive — it’s wrapped in a <button> for that.
• The .svg-icon class has some nice trickery, like em-based sizing to match the size of the text it’s next to, and currentColor to match the color.
• Since

…

The post Accessible SVG Icons With Inline Sprites appeared first on CSS-Tricks.

Compound components in React allow you to create components with some form of connected state that’s managed amongst themselves. A good example is the Form component in Semantic UI React.

To see how we can implement compound components in a real-life React application, we’ll build a compound (multi-part) form for login and sign up. The state will be saved in the form component and we’ll put React’s Context AP to use to pass that state and the method from …

The post Compound Components in React Using the Context API appeared first on CSS-Tricks.

The public-consumption blog post:

Ultimately, we want to make the web experience better for many different audiences. People using Microsoft Edge (and potentially other browsers) will experience improved compatibility with all web sites, while getting the best-possible battery life and hardware integration on all kinds of Windows devices. Web developers will have a less-fragmented web platform to test their sites against, ensuring that there are fewer problems and increased satisfaction for users of their sites; and because we’ll continue …

The post Edge’s Announcements appeared first on CSS-Tricks.