Actualités de plate-forme: défaut de CSS logique, API FUGU, requêtes multimédias personnalisées et WordPress vs italiques

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. Le CSS logique simplifie le style avec des raccourcis comme margin-inline (combinant margin-left et margin-right ) et inset (pour top , right , bottom et left ).

 /* 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.

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

Le site Web de David Bushell illustre cette approche, tirant parti de la classe translated-rtl de Google. 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 généré une controverse. Bien qu'ils soient développés dans des groupes communautaires W3C, ce ne sont pas encore des normes Web.

• API WebHID: Active l'interaction de l'application Web avec des dispositifs d'interface humaine peu communs manquant de pilotes de système d'exploitation (par exemple, la télécommande Nintendo Wii).
• API série Web: Facilite la communication d'octets par octets avec des périphériques comme les microcontrôleurs et les imprimantes 3D via des connexions série émulées.
• API Web NFC: permet la lecture / l'écriture sans fil à court terme sur les balises NFC.

Apple et Mozilla Express les réservations, citant les empreintes digitales, 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: preserveAspectRatio=none

Par défaut, SVG échelle tout en préservant le rapport d'aspect. Le réglage de preserveAspectRatio="none" étire le SVG pour remplir son récipient, 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éduire l'italique pour l'accessibilité

Alors 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 Custom Media Queries: toujours en attente de progrès

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

 @ Custom Media --Narrow-Window (max-largeur: 30EM);

@media (--narrow-window) {
  / * Styles de fenêtre étroites * /
}

Bien que le support de navigateur soit incertain, le plugin officiel PostCSS 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.

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!