Mises à jour passionnantes de la version bêta de Chrome pour les développeurs Web

Chrome 133 Beta regorge de mises à jour passionnantes pour les développeurs Web! Cet article met en évidence des améliorations clés que vous devez connaître. Bien que vous n'ayez pas besoin de tout maîtriser immédiatement, la familiarité avec ces fonctionnalités vous permettra de les tirer parti en cas de besoin. Vérifier régulièrement les notes de libération est une grande habitude à cultiver.

1. le :open pseudo-classe:

Cette nouvelle classe pseudo simplifie le style des éléments à leur état ouvert. Il fonctionne avec <dialog>, <details>, et des éléments avec des cueilleurs visibles (comme <select>).

Exemple de code:

<code class="language-css">/* Style open dialogs/details */
:open {
  border: 2px solid blue;
}

/* Style selects with active picker */
select:open {
  background: #f0f0f0;
}</code>

2. scroll-state: stuck et scroll-state: snapped:

Ces propriétés permettent un style basé sur le comportement de claquement de défilement. L'état stuck applique des styles lorsqu'un élément est fixé en place, tandis que snapped applique des styles lorsqu'un élément se casse à une position désignée. Idéal pour les animations axées sur le défilement.

Exemple de code:

<code class="language-css">/* Define a sticky element with scroll-state container */
.sticky-element {
  container-type: scroll-state;
  position: sticky;
  top: 0;
}

/* Apply styles when the element is stuck to the top */
@container scroll-state(stuck: top) {
  .sticky-element {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
}</code>

3. text-box-trim:

Cette fonctionnalité longtemps attendue permet un contrôle précis sur un espace supplémentaire autour du texte dans des zones de texte. x-height et cap-height Fournir des options de coupe.

Exemple de code:

<code class="language-css">/* Trim text at x-height */
.text-trim {
  text-box-trim: x-height;
}

/* Trim at cap height */
.heading {
  text-box-trim: cap-height;
}</code>

4. Valeurs d'attribut popover:

L'attribut popover offre désormais les valeurs auto, manual et hint, améliorant l'infiltration et le contrôle similaire des éléments d'interface utilisateur.

5. Mode de préservation de l'état DOM:

une nouvelle node.prototype.moveBefore primitive permet de déplacer des éléments DOM sans réinitialiser leur état interne.

6. Fonction améliorée attr():

La fonction attr() prend désormais en charge les valeurs de secours, y compris les propriétés personnalisées.

Exemple de code:

<code class="language-css">/* Use data attribute with fallback */
div {
  color: attr(data-color, color, red);
}</code>

Cette version bêta de Chrome 133 offre des améliorations significatives pour les développeurs Web. Restez à jour avec les ressources officielles pour des informations plus approfondies. Envisagez de partager ces informations avec votre réseau! Connectez-vous avec moi sur LinkedIn, Medium et Bluesky pour d'autres discussions.

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!