Mise à jour de milieu d'année Interop 2024

Rachel Andrew

Le second semestre approche à grands pas. C'est le moment idéal pour étudier Cette année, Interop 2024 a amélioré l'interopérabilité Web.

Nos débuts

En début d'année, Chrome a obtenu un score de compatibilité expérimental du navigateur de 83.

<ph type="x-smartling-placeholder">

</ph>

Tableau de bord Interop 2024 en février 2024

<ph type="x-smartling-placeholder">

</ph>

Tableau de bord d'interopérabilité 2024 à la fin du mois de juin 2024

Aujourd'hui, ce score est de 90, avec un score de 85 pour les navigateurs stables au de Chrome 126 en juin. Le score global d'interopérabilité du test a augmenté 10 points, et ce post présente certaines des fonctionnalités qui ont contribué à ce score.

Pop-over

Popover a été intégré à Baseline Newly Available en avril 2024. Le pop-up est car il vous faut de nombreuses fonctionnalités d'interface utilisateur, les menus, les info-bulles, les superpositions permettant de faire des sélections et les interfaces d'enseignement sont des types de pop-over. Avant l'aperçu, la création de l'une de ces fonctionnalités nécessitait de nombreuses tâches du code source. Code permettant de s'assurer que plusieurs éléments ne sont pas ouverts en même temps ou d'activer fermer la page lorsque l'utilisateur clique en dehors de l'élément. Vous pourriez aussi avoir eu du mal avec z-index, pour s'assurer qu'un élément d'interface utilisateur se trouvait au-dessus du reste des l'interface.

Toutes ces fonctionnalités et bien d'autres sont incluses dans le API Popover de gagner du temps de développement, et de contribuer à créer des interfaces plus performantes et accessibles. Pour Dans l'exemple de code suivant, le code suivant crée un pop-over avec un effet d'arrière-plan léger, qui fermer automatiquement les autres fenêtres pop-up lorsqu'elles sont ouvertes.

<button popovertarget="my-popover">Open Popover</button>

<div id="my-popover" popover>
  <p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 114
• <ph type="x-smartling-placeholder"></ph> 114
• <ph type="x-smartling-placeholder"></ph> 125
• <ph type="x-smartling-placeholder"></ph> 17 ans

Source

Pour en savoir plus, consultez L'API Popover est disponible dans Baseline. Beaucoup applications voient déjà les avantages de Popover. Tokopedia a pu réduire considérablement la quantité de code React en tirant parti de cette fonctionnalité, en utilisant un polyfill pour les navigateurs non compatibles.

Propriétés personnalisées avancées avec @property

La règle CSS @property vous permet de créer des propriétés personnalisées avancées, avec un grand nombre plus détaillé que le nom et la valeur disponibles dans les propriétés personnalisées standards. Définissez la syntaxe autorisée pour définir le type de données contenues dans cette propriété, pour lesquelles exemple couleur, nombre ou longueur. Indiquez ensuite si la propriété hérite et une valeur initiale.

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

La règle @property améliore actuellement le score du test pour Firefox, pour booster le score stable lorsque Firefox 128 sera disponible plus tard dans le mois. Elle joint également Baseline désormais disponible.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 85
• <ph type="x-smartling-placeholder"></ph> 85
• <ph type="x-smartling-placeholder"></ph> 128
• <ph type="x-smartling-placeholder"></ph> 16,4

Source

Pour en savoir plus, consultez @property: donner des superpouvoirs aux variables CSS.

Propriété font-size-adjust

La propriété CSS font-size-adjust vous permet de modifier la taille des minuscules. par rapport à la taille des majuscules. Ceci est utile dans les situations où une police de remplacement peut se produire, car cela permet de s'assurer qu'une police de remplacement lisibles, en particulier avec des polices de petite taille.

La propriété font-size-adjust est actuellement incluse dans le score expérimental pour Chrome, mais il augmentera le score stable lorsqu'il sortira avec Chrome 127 ce mois-ci. Il rejoint également Baseline Newly Available.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 127
• <ph type="x-smartling-placeholder"></ph> 127
• <ph type="x-smartling-placeholder"></ph> 3.
• <ph type="x-smartling-placeholder"></ph> 16,4

Source

text-wrap: solde

L'utilisation de text-wrap: balance demande au navigateur de trouver le meilleur équilibre à la ligne pour le texte. Elle est particulièrement utile pour les en-têtes, encapsulant un seul mot sur la deuxième ligne, par exemple.

Ce problème est depuis peu pris en charge par Safari, et d'autres navigateurs s'efforcent de le résoudre. d'échouer pour garantir le bon fonctionnement de cette fonctionnalité sur tous les navigateurs.

Navigateurs pris en charge

• <ph type="x-smartling-placeholder"></ph> 114
• <ph type="x-smartling-placeholder"></ph> 114
• <ph type="x-smartling-placeholder"></ph> 121
• <ph type="x-smartling-placeholder"></ph> 17,5

Source

---

Outre ces fonctionnalités majeures qui deviennent interopérables, de nombreuses autres des améliorations ont été apportées. Chaque test réussi représente d'interopérabilité que vous ne rencontrerez pas. Nous sommes ravis de voir à quel point nous pouvez atteindre ce score de 100% d'ici la fin de l'année.