Voici les informations à retenir :
- Déclarez des styles spécifiques au sein d'un composant à l'aide de la règle CSS
@scope
. - Une nouvelle fonctionnalité multimédia est disponible:
prefers-reduced-transparency
. Des améliorations ont été apportées au panneau Sources dans les outils de développement.
Et ce n'est pas tout : ce n'est pas tout.
Je m'appelle Adriana Jara. Découvrons ensemble les nouveautés de Chrome 118 pour les développeurs.
Règle CSS @scope
.
La règle at @scope
permet aux développeurs de limiter les règles de style à une racine de champ d'application donnée, et de styliser les éléments en fonction de la proximité de cette racine.
Avec @scope
, vous pouvez remplacer les styles en fonction de la proximité, qui diffère des styles CSS habituels appliqués uniquement en fonction de l'ordre et de la spécificité des sources. L'exemple suivant comporte deux thèmes.
<div class="lightpink-theme">
<a href="#">I'm lightpink!</a>
<div class="pink-theme">
<a href="#">Different pink!</a>
</div>
</div>
sans champ d'application, le style appliqué est le dernier déclaré.
.pink-theme a { color: hotpink; } .lightpink-theme a { color: lightpink; }
Avec la portée, vous pouvez avoir des éléments imbriqués et le style qui s'applique est celui de l'ancêtre le plus proche.
@scope (.pink-theme) { a { color: hotpink; } } @scope (.lightpink-theme){ a { color: lightpink; } }
Le champ d'application vous évite également d'écrire des noms de classe longs et compliqués, et facilite la gestion des projets plus importants et évite les conflits de noms.
<div class="first-container"> <h1 class="first-container__main-title"> I'm the main title</h1> </div> <div class="second-container"> <h1 class="second-container__main-title"> I'm the main title, but somewhere else</h1> </div>
.first-container__main-title { color: grey; } .second-container__main-title { color: mediumturquoise; }
<div class="first-container"> <h1 class="main-title"> I'm the main title</h1> </div> <div class="second-container"> <h1 class="main-title"> I'm the main title, but somewhere else</h1> </div>
@scope(.first-container){ .main-title { color: grey; } } @scope(.second-container){ .main-title { color: mediumturquoise; } }
Avec un champ d'application, vous pouvez également styliser un composant sans styliser certains éléments qui y sont imbriqués. D'une manière, vous pouvez avoir des "trous" auxquels le style de champ d'application ne s'applique pas.
Comme dans l'exemple suivant, nous pourrions appliquer un style au texte et exclure des commandes, ou inversement.
<div class="component">
<div class="purple">
<h1>Drink water</h1>
<p class="purple">hydration is important</p>
</div>
<div class="click-here">
<p>not in scope</p>
<button>click here</button>
</div>
<div class="purple">
<h1 class="purple">Exercise</h1>
<p class="purple">move it move it</p>
</div>
<div class="link-here">
<p>Excluded from scope</p>
<a href="#"> link here </a>
</div>
</div>
@scope (.component) to (.click-here, .link-here) {
div {
color: purple;
text-align: center;
font-family: sans-serif;
}
}
Pour en savoir plus, consultez l'article Limiter la couverture de vos sélecteurs avec l'attribut CSS @scope at-rule.
prefers-reduced-transparency
élément multimédia
Nous utilisons les requêtes média pour fournir des expériences utilisateur qui s'adaptent aux préférences de l'utilisateur et à l'état de son appareil. Cette version de Chrome ajoute une nouvelle valeur qui peut être utilisée pour adapter l'expérience utilisateur: prefers-reduced-transparency
.
Vous pouvez tester la nouvelle valeur prefers-reduced-transparency
avec les requêtes média. Elle permet aux développeurs d'adapter le contenu Web aux préférences sélectionnées par l'utilisateur pour réduire la transparence dans l'OS, comme le paramètre "Réduire la transparence" sous macOS. Les options valides sont reduce
ou no-preference
.
.translucent {
opacity: 0.4;
}
@media (prefers-reduced-transparency) {
.translucent {
opacity: 0.8;
}
}
Vous pouvez également vérifier leur apparence à l'aide des outils de développement:
Pour en savoir plus, consultez la documentation prefers-reduced-transparency.
Correction: une version précédente de cet article faisait référence à une nouvelle fonctionnalité multimédia scripting
dans cette version. Il s'agira d'ailleurs de la version 120.
Améliorations apportées au panneau "Sources" dans les outils de développement
Les outils de développement offrent les améliorations suivantes dans le panneau Sources: la fonctionnalité workspace a amélioré la cohérence, notamment en renommant le volet Sources > Filesystem (Sources > Système de fichiers) en Espace de travail, ainsi que d'autres textes d'interface utilisateur. Sources > Espace de travail vous permet également de synchroniser les modifications apportées dans les outils de développement directement avec vos fichiers sources.
Vous pouvez également réorganiser les volets situés à gauche du panneau Sources par glisser-déposer. Le panneau Sources peut désormais imprimer correctement le code JavaScript intégré pour les types de scripts suivants: module
, importmap
et speculationrules
, et mettre en surbrillance la syntaxe des types de script importmap
et speculationrules
, qui contiennent tous deux JSON.
Consultez la page Nouveautés des outils de développement pour en savoir plus sur les mises à jour des outils pour les développeurs Chrome 118.
Et bien plus !
Bien sûr, ce n’est pas tout.
L'API WebUSB est désormais exposée aux Service Workers enregistrés par des extensions de navigateur, ce qui permet aux développeurs de l'utiliser pour répondre aux événements d'extension.
Pour aider les développeurs à simplifier les flux de demandes de paiement, nous supprimons l'obligation d'activation des utilisateurs dans
Payment Request
etSecure Payment Confirmation
.Le cycle de publication de Chrome se raccourcit, des versions stables seront publiées toutes les trois semaines, à partir de Chrome 119, qui sera disponible dans trois semaines.
Complément d'informations
Nous n'aborderons ici que certains points clés. Consultez les liens ci-dessous pour en savoir plus sur les modifications supplémentaires apportées à Chrome 118.
- Nouveautés des outils pour les développeurs Chrome (118)
- Abandons et suppressions de Chrome 118
- Mises à jour du site ChromeStatus.com pour Chrome 118
- Liste des modifications du dépôt source Chromium
- Agenda des versions Chrome
S'abonner
Pour ne rien manquer, abonnez-vous à la chaîne YouTube des développeurs Chrome. Vous recevrez une notification par e-mail chaque fois qu'une nouvelle vidéo sera lancée.
Adriana Jara, soja, et dès la sortie de Chrome 119, je serai là pour vous dire quelles nouveautés Chrome sont disponibles !