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.
![Tableau de bord avec scores-Interop: 65, Investigations: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.](https://web.developers.google.cn/static/blog/interop-2024-midyear/image/interop-feb.png?hl=fr)
![Tableau de bord avec scores-Interop: 75, Investigations: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.](https://web.developers.google.cn/static/blog/interop-2024-midyear/image/interop-june.png?hl=fr)
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 type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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 type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
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.