Nowości w Chrome 133

Rachel Andrew

Oto, co musisz wiedzieć na ten temat:

• Funkcja zaawansowana CSS attr() umożliwia używanie typów innych niż <string> i we wszystkich właściwościach CSS.
• Zapytania o kontener stanu przewijania CSS umożliwiają używanie zapytań o kontener do określania stylu elementów podrzędnych kontenerów na podstawie ich stanu przewijania.
• Właściwości CSS text-box, text-box-trim i text-box-edge umożliwiają precyzyjne sterowanie wyrównaniem tekstu w pionie.
• A to nie wszystko. Więcej informacji znajdziesz w tym artykule.

Funkcja zaawansowana CSS attr()

Ta funkcja uzupełnia istniejącą funkcję attr(), która jest określona w CSS na poziomie 5. Umożliwia to używanie typów innych niż <string> we wszystkich właściwościach CSS (oprócz obecnej obsługi treści pseudoelementu).

W poniższym przykładzie wartość właściwości color dla div korzysta z wartości atrybutu data-color. Wartość tego atrybutu jest analizowana w <color> za pomocą attr() i type(). Wartość rezerwowa jest ustawiona na red.

<div data-foo="blue">test</div>

div {
  color: attr(data-foo type(<color>), red);
}

Więcej informacji znajdziesz w artykule Ulepszenie usługi porównywania cen.attr()

Zapytania dotyczące kontenerów stanu przewijania CSS

Użyj zapytań o kontenery, aby określić styl elementów podrzędnych kontenerów na podstawie ich stanu przewijania.

Kontener zapytania jest kontenerem z paskiem przewijania lub elementem, na który wpływa pozycja przewijania kontenera z paskiem przewijania. Możesz wysyłać zapytania o te stany:

• stuck: kontener o stałej pozycji jest przyklejony do jednej z krawędzi pola przewijania.
• snapped: kontener z wyrównanym przewijaniem jest obecnie przyciągnięty w pionie lub poziomie.
• scrollable: czy kontener z paskiem przewijania można przewijać w danym kierunku.

Nowy typ kontenera: scroll-state umożliwia wysyłanie zapytań do kontenerów. Na przykład:

.stuck-top {
  container-type: scroll-state;
  position: sticky;
  top: 0px;

  > nav {
    @container scroll-state(stuck: top) {
      background: Highlight;
      color: HighlightText;
    }
  }
}

Więcej informacji i przykłady znajdziesz w artykule Zapytania o stan przewijania w CSS.

CSS text-box, text-box-trim i text-box-edge

Właściwość text-box-trim określa, które boki mają zostać przycięte (górny lub dolny), a właściwość text-box-edge określa, jak ma zostać przycięta krawędź.

Te właściwości umożliwiają precyzyjne kontrolowanie odstępów pionowych za pomocą danych o czcionce.

h1 {
  /* trim both sides to the capital letters */
  text-box: trim-both cap alphabetic;

  /* trim both sides to the lowercase letter x */
  text-box: trim-both ex alphabetic;
}

Dowiedz się, jak używać tych nowych właściwości w CSStext-box-trim.

I wiele więcej!

Oczywiście jest ich znacznie więcej.

• Animation.overallProgresszapewnia wygodną i spójną reprezentację postępu animacji w różnych iteracjach, niezależnie od charakteru osi czasu.
• Node.prototype.moveBefore umożliwia przenoszenie elementów w drzewie DOM bez resetowania stanu elementu.
• Interfejs FileSystemObserver powiadamia witryny o zmianach w systemie plików.
• Metoda PublicKeyCredential getClientCapabilities() pozwala określić, które funkcje WebAuthn są obsługiwane przez klienta użytkownika.

Szczegółowe informacje o tych i wielu innych nowościach w Chrome znajdziesz w pełnych informacjach o wersji Chrome 133.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze kwestie. Dodatkowe zmiany w Chrome 133 znajdziesz pod tymi linkami:

• Informacje o wersji Chrome 133
• Nowości w Narzędziach deweloperskich w Chrome (133)
• Aktualizacje ChromeStatus.com dotyczące Chrome 133
• Kalendarz publikacji Chrome

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers na YouTube. Będziesz otrzymywać powiadomienia e-mail o nowych filmach.

Gdy tylko Chrome 133 zostanie udostępniony, poinformujemy Cię o nowościach w Chrome.