Webtagr - Résumé de news de technologie

CSS contrast-color() : Automatisation du contraste des couleurs pour l’accessibilité

2025-05-17

La nouvelle fonction `contrast-color()` de CSS simplifie les choix de couleurs en sélectionnant automatiquement du texte noir ou blanc pour contraster avec une couleur d’arrière-plan donnée. Cet article explore son utilisation, compare les algorithmes WCAG 2.1 et APCA pour le calcul du contraste et examine comment utiliser les requêtes médias `prefers-contrast` pour une meilleure accessibilité. Bien qu’actuellement limitée au noir et blanc, les futures itérations pourraient offrir des options plus personnalisables. La fonction simplifie le développement tout en améliorant l’accessibilité, notamment lors de la gestion de plusieurs états de couleur.

Lire plus

(webkit.org)

Développement Contraste des couleurs

text-wrap: pretty de Safari : Une nouvelle ère pour la typographie web

2025-04-08

Safari Technology Preview 216 introduit `text-wrap: pretty`, révolutionnant la mise en page du texte sur le web. En utilisant des algorithmes basés sur les paragraphes, il s'attaque aux problèmes typographiques de longue date tels que les dernières lignes trop courtes, les bords irréguliers et les rivières typographiques distrayantes. Contrairement aux algorithmes traditionnels ligne par ligne, `pretty` évalue le paragraphe entier, optimisant la mise en page pour une meilleure lisibilité et une meilleure esthétique. Bien que Chrome et d'autres navigateurs prennent en charge `pretty`, l'implémentation de Safari est plus complète, ajustant le paragraphe entier au lieu des quelques dernières lignes seulement. `text-wrap: balance` se concentre sur le fait de rendre toutes les lignes à peu près de la même longueur, idéal pour les titres et les textes plus courts. Les développeurs doivent choisir la valeur `text-wrap` appropriée en fonction de leurs besoins et être conscients des implications sur les performances.

Lire plus

(webkit.org)

Développement typographie web

Web Push déclaratif de WebKit : plus efficace, plus privé

2025-04-03

WebKit introduit Web Push déclaratif pour résoudre les problèmes de consommation d’énergie et de confidentialité liés aux notifications Web Push traditionnelles. Les notifications Web Push traditionnelles reposent sur les Service Workers, ce qui les rend vulnérables à la prévention intelligente du suivi (ITP) et susceptibles d’entraîner la révocation des abonnements en cas d’échec du traitement. Web Push déclaratif permet d’envoyer et d’afficher des notifications sans Service Worker, en intégrant le contenu de la notification directement dans le message push. Cela améliore l’efficacité et la confidentialité tout en maintenant la compatibilité descendante avec les notifications Web Push existantes.

Lire plus

(webkit.org)

Développement

CSS Item Flow : Unification des mises en page Flexbox, Grid et Masonry

2025-04-02

CSS Grid et Flexbox sont de puissants outils de mise en page, mais ils sont insuffisants pour les mises en page complexes comme la maçonnerie. Une nouvelle proposition, « Item Flow », vise à résoudre ce problème en unifiant les propriétés `flex-flow` de Flexbox et `grid-auto-flow` de Grid. Elle introduit de nouvelles propriétés telles que `item-direction`, `item-wrap`, `item-pack` et `item-slack`, permettant un contrôle plus flexible et puissant de la mise en page. Cela donnerait à Flexbox l’emballage dense et à Grid la capacité de désactiver le retour à la ligne, tout en fournissant une solution propre pour les mises en page de type maçonnerie. Le résultat est un système de mise en page CSS plus unifié et convivial.

Lire plus

(webkit.org)

Développement Mise en page