Platform News: Defaulting to Logical CSS, Fugu APIs, Custom Media Queries, and WordPress vs. Italics |

Logical CSS Properties Reach Broad Browser Support

Six years after Firefox shipped the first pieces of CSS Logical Properties, the feature is on track for full browser support in 2021. The property categories listed below already work in Firefox, Chrome, and the latest Safari Preview.

Logical CSS also brings useful shorthands that previously required multiple declarations. For instance, margin-inline sets both margin-left and margin-right, while inset sets the top, right, bottom and left properties at once.

/* BEFORE */
main {
  margin-left: auto;
  margin-right: auto;
}

/* AFTER */
main {
  margin-inline: auto;
}

Adding support for an RTL (right-to-left) layout means replacing every instance of left and right in a site's CSS with their logical counterparts. This makes sense for any site, since users may translate it into a right-to-left language via machine translation. The largest RTL-script languages are Arabic (310 million native speakers), Persian (70 million), and Urdu (70 million).

/* Switch to RTL when Google translates the page to an RTL language */
.translated-rtl {
  direction: rtl;
}

David Bushell's personal site now uses logical CSS and relies on Google's translated-rtl class to toggle the inline base direction. You can try translating the site to an RTL language in Chrome and compare it with the default LTR layout.

Chrome Ships Three Fugu APIs for Hardware Access

Chrome 89 added three web APIs for "advanced hardware interactions": WebHID and Web Serial on desktop, and Web NFC on Android. All three are part of Google's capabilities project, Project Fugu, developed in W3C community groups. None of them are web standards.

• The WebHID API connects web apps to human interface devices that lack a compatible OS driver — Nintendo's Wii Remote is a common example.
• The Web Serial API lets web apps communicate byte by byte with peripherals such as microcontrollers (e.g., the Arduino DHT11 temperature and humidity sensor) and 3D printers over an emulated serial connection.
• Web NFC provides wireless read and write access to NFC tags at distances under 10 cm.

Apple and Mozilla, maintainers of the other two major browser engines, oppose these APIs. Apple has decided to "not yet implement due to fingerprinting, security, and other concerns." Mozilla's position is documented on its Specification Positions page.

Stretching SVG with preserveAspectRatio=none

By default, an SVG scales to fit the <svg> element's content box while preserving the aspect ratio determined by the viewBox attribute. When an author wants the graphic to fill the box on both axes regardless of ratio, setting preserveAspectRatio to none on the <svg> element does the job.

Distortion may feel wrong, but disabling aspect ratio works well for simple decorative graphics on responsive pages:

This value can be useful when you are using a path for a border or to add a little effect on a section (like a diagonal [line]), and you want the path to fill the space.

WordPress 5.7 Removes Italics in Admin Areas

Italics can highlight important words (<em>), creative work titles (<cite>), technical terms, or foreign phrases (<i>). Used sparingly, that works. Long italic passages are another matter:

Italicized text can be difficult to read for some people with dyslexia or related forms of reading disorders.

WordPress 5.7, released this week, removed italics from descriptions, help text, labels, error details, and other areas of the admin to "improve accessibility and readability." The same release also dropped custom web fonts in favor of system fonts.

CSS Custom Media Queries: Still No Movement

The CSS Media Queries Level 5 module describes a @custom-media rule for naming reusable media queries. The proposal first entered the spec in June 2014 and has seen no further development or browser vendor interest since.

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}

A media query used in multiple places can instead be assigned to a custom media query, which can be used everywhere, and editing the media query requires touching only one line of code.

Native support may take a long time, but sites can use the official PostCSS plugin or PostCSS Preset Env today to cut repetition and make media queries more readable. Relatedly, author-defined environment variables — which, unlike custom properties, could be used in media queries — have been floated as an idea, but the concept is not yet fleshed out in the CSS spec.

@media (max-width: env(--narrow-window)) {
  /* narrow window styles */
}