2021 marks a significant shift towards wider adoption of CSS Logical Properties! Recent Chrome API releases have sparked debate, SVG's aspect ratio control offers new flexibility, WordPress prioritizes accessible typography, and the development of CSS custom media queries remains stalled. Let's delve into the details.

Logical CSS: The Emerging Default

Six years after Mozilla's initial implementation, CSS Logical Properties are nearing full browser support in 2021. Firefox, Chrome, and the latest Safari Preview already support the properties and values outlined below. Logical CSS simplifies styling with shorthands like margin-inline (combining margin-left and margin-right) and inset (for top, right, bottom, and left).

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

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

Adapting to right-to-left (RTL) layouts becomes significantly easier. A simple class switch handles the transition, crucial for sites translated to RTL languages like Arabic, Persian, and Urdu.

/* Switch to RTL when translated */
.translated-rtl {
  direction: rtl;
}

David Bushell's website exemplifies this approach, leveraging Google Translate's translated-rtl class. Compare its RTL and LTR layouts after translation in Chrome to see the difference.

Chrome's Controversial Fugu APIs

Chrome's recent release of three APIs for advanced hardware interaction – WebHID and Web Serial (desktop) and Web NFC (Android) – part of Project Fugu, has generated controversy. While developed within W3C community groups, they aren't yet web standards.

• WebHID API: Enables web app interaction with uncommon human interface devices lacking OS drivers (e.g., Nintendo Wii Remote).
• Web Serial API: Facilitates byte-by-byte communication with peripherals like microcontrollers and 3D printers via emulated serial connections.
• Web NFC API: Allows short-range wireless reading/writing to NFC tags.

Apple and Mozilla express reservations, citing fingerprinting, security, and other concerns. Mozilla's position is detailed on their Specification Positions page.

SVG Flexibility: preserveAspectRatio=none

By default, SVG scales while preserving aspect ratio. Setting preserveAspectRatio="none" stretches the SVG to fill its container, potentially distorting the image. This can be useful for simple, decorative elements on responsive pages, such as borders or diagonal lines needing to fill a specific space.

WordPress: Reducing Italics for Accessibility

While italics enhance emphasis, extended use presents accessibility challenges, particularly for readers with dyslexia. WordPress 5.7 addresses this by removing italics from descriptions, help text, and other areas within the admin interface to improve readability. The update also replaces custom web fonts with system fonts.

CSS Custom Media Queries: Still Awaiting Progress

The @custom-media rule, proposed nearly seven years ago, remains undeveloped. This feature would allow defining reusable media queries, reducing code duplication and enhancing readability.

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

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

While browser support is uncertain, the official PostCSS plugin offers immediate implementation benefits. The concept of author-defined environment variables in media queries is also being explored, but remains a work in progress.

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