In this week’s roundup, variable fonts get oblique, a new browser extension for linting, and the very first version of CSS Modules.
Use font-style: oblique on variable fonts
Some popular variable fonts have a wght (weight) axis for displaying text at different font weights and a slnt (slant) axis for displaying slanted text. This enables creating many font styles using a single variable font file (e.g., see the “Variable Web Typography” demo page).
You can use font-style: oblique instead of the lower-level font-variation-settings property to display slanted text in variable fonts that have a slnt axis. This approach works in Chrome, Safari, and Firefox.
/* BEFORE */
h2 {
font-variation-settings: wght 500, slnt 4;
}
/* AFTER */
h2 {
font-weight: 500;
font-style: oblique 4deg;
}
See the Pen
Using font-style: oblique on variable fonts by Šime Vidas (@simevidas)
on CodePen.
The new webhint browser extension
The webhint linting tool is now available as a browser devtools extension for Chrome, Edge, and Firefox (read Microsoft’s announcement). Compared to Lighthouse, one distinguishing feature of webhint are its cross-browser compatibility hints.
In other news…
CSS Modules V1 is a new proposal from Microsoft that would extend the JavaScript modules infrastructure to allow importing a CSSStyleSheet object from a CSS file (e.g., import styles from styles.css;) (via Thomas Steiner)
Web apps installed in the desktop version of Chrome can be uninstalled on the about:apps page (right-click on an app’s icon to reveal the Remove… option) (via Techdows)
Because of AMP’s unique requirements, larger news sites such as The Guardian should optimally have two separate codebases (one for the AMP pages and one for the regular website) (via The Guardian)
Read more news in my new, weekly Sunday issue. Visit webplatform.news for more information.