Designing Web Content for watchOS

On Monday Apple announced that it was bringing Webkit to the Apple Watch with WatchOS 5. This will allow users to open links from the Mail and Messages apps directly on their watches. Naturally, as web developers, we wonder how this will work with our already responsive websites. Well here’s the basics.

Specificity in :not(), :has(), and :matches()

But how do we calculate the specificity of that whole selector?  Just add up all the pieces?  No.  The Working Group recently decided that the specificity contributed from inside a :not() will be equal to the single selector with the highest specificity.  So given div:not(.one, .two, #navbar) p, the #navbar will contribute 0,1,0,0 to the overall specificity of the selector, yielding a total of 0,1,0,2.  The specificities of .one and .two are ignored.

Inclusive Components: Cards

I've told you before how much I love the Inclusive Components series, and the latest article, about Cards, is a real banger:

Some cards are just illustrated introductions to permalinks like blog posts; others are more autonomous and offer a lot of functionality. In this article, I'll be looking into a few permutations of a simple card component, emphasizing a balance between sound HTML structure and ergonomic interaction.

How to start with variable fonts on the web

Variable fonts are the font technology made for the digital era. They have the power to bring more typographic richness to the web at a lower file size. But with new possibilities and advantages new challenges and complexity arise. So what’s so hot about the next big thing since the introduction of web fonts (at least to all type nerds) and how can you use it?

Combining the Powers of SEM and BIO for Improving CSS

Generally, SEM is concerned with high level CSS philosophy whereas BIO is an actual technique to help you write better CSS to achieve SEM. The main purpose of both SEM and BIO is to better handle the CSS specificity which is one of the most important concepts you should understand for CSS.