2021 marque un changement significatif vers une adoption plus large des propriétés logiques CSS! Les versions récentes de l'API Chrome ont déclenché un débat, le contrôle du ratio d'aspect de SVG offre une nouvelle flexibilité, WordPress priorise la typographie accessible et le développement de requêtes de médias personnalisées CSS reste bloquée. Plongeons dans les détails.

CSS logique: la valeur par défaut émergente

Six ans après la mise en œuvre initiale de Mozilla, les propriétés logiques CSS approchent du support complet du navigateur en 2021. Firefox, Chrome et le dernier aperçu de Safari prennent déjà en charge les propriétés et les valeurs décrites ci-dessous. CSS logique simplifie le style avec des raccourcis comme margin-inline (combinant margin-left et margin-droite et inset (pour top , droit gauche). /* AVANT */ principal { marge-gauche: auto; marge droite: auto; } /* APRÈS */ principal { marge en ligne: auto; }

L'adaptation aux dispositions de droite à gauche (RTL) devient beaucoup plus facile. Un commutateur de classe simple gère la transition, cruciale pour les sites traduits en langues RTL comme l'arabe, le persan et l'ourdou.

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

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

/ * Passez à RTL lorsqu'il est traduit * / . Direction: RTL; }

Le site Web de David Bushell illustre cette approche, tirant parti de la classe de Google Translate

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

. Comparez ses dispositions RTL et LTR après traduction dans Chrome pour voir la différence.

API FUGU controversé de Chrome

La récente version de Chrome de trois API pour l'interaction matérielle avancée - WebHid et Web Serial (Desktop) et Web NFC (Android) - une partie du projet FUGU, a suscité une controverse. Bien qu'ils soient développés dans les groupes communautaires W3C, ils ne sont pas encore des normes Web.

webhid api:

Active l'interaction de l'application Web avec des périphériques d'interface humaine inhabituels manquant de pilotes OS (par exemple, Nintendo Wii Remote).
• API série Web:
facilite la communication de l'octet par octet avec des périphériques comme les microcontrôleurs et les imprimantes 3D via des connexions série émulées.
• web nfc api:
permet la lecture / écriture sans fil à court terme sur les balises NFC.
• Reservations Apple et Mozilla Express, citant l'empreinte digitale, la sécurité et d'autres préoccupations. La position de Mozilla est détaillée sur leur page de positions de spécification.

flexibilité svg:

preservaSpecTratio = Aucun

Par défaut, SVG échelle tout en préservant le rapport d'aspect. Le paramètre PreservasPectratio = "Aucun"

étire le SVG pour remplir son conteneur, potentiellement déformer l'image. Cela peut être utile pour des éléments décoratifs simples sur des pages réactives, telles que les frontières ou les lignes diagonales ayant besoin de remplir un espace spécifique.

wordpress: réduction de l'italique pour l'accessibilité

Bien que l'italique améliore l'accent, l'utilisation prolongée présente des défis d'accessibilité, en particulier pour les lecteurs de dyslexie. WordPress 5.7 aborde cela en supprimant les italiques des descriptions, du texte d'aide et d'autres domaines de l'interface administrative pour améliorer la lisibilité. La mise à jour remplace également les polices Web personnalisées par des polices système.

CSS Quéries de médias personnalisés: attendant toujours des progrès

La règle

@ personnalisée

, proposée il y a près de sept ans, reste non développée. Cette fonction permettrait de définir des requêtes multimédias réutilisables, de réduire la duplication de code et d'améliorer la lisibilité.

@ personnalisé-media --narrow-window (max-width: 30em); @media (--narrow-window) { / * Styles de fenêtre étroites * / }

Bien que la prise en charge du navigateur soit incertaine, le plugin PostCSS officiel offre des avantages immédiats de mise en œuvre. Le concept de variables d'environnement défini par l'auteur dans les requêtes médiatiques est également en cours d'exploration, mais reste un travail en cours.

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

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

@ media (max-width: env (- étroit-window)) { / * Styles de fenêtre étroites * / }