Nowości w Chrome 133

Rachel Andrew

Oto, co musisz wiedzieć na ten temat:

Zaawansowana funkcja attr() CSS

Ta funkcja dodaje do istniejącej funkcji attr() funkcje określone w specyfikacji CSS na poziomie 5. Umożliwia to używanie typów innych niż <string> we wszystkich właściwościach CSS (oprócz istniejącej obsługi treści pseudoelementu).

W poniższym przykładzie wartość właściwości color dla elementu div korzysta z wartości atrybutu data-color. Ta wartość atrybutu jest analizowana w <color> za pomocą attr() i type(). Wartość zastępcza to red.

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

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

Więcej informacji znajdziesz w artykule Usługa porównywania cen attr() przechodzi na wyższy poziom.

Zapytania do kontenera stanu przewijania w CSS

Użyj zapytań dotyczących kontenerów, aby nadać styl potomkom kontenerów na podstawie ich stanu przewijania.

Kontenery zapytań to albo kontenery z paskiem przewijania, albo elementy, na które wpływa pozycja kursora w kontenerze z paskiem przewijania. Możesz wysyłać zapytania o stany:

  • stuck: przyklejony kontener jest przytwierdzony do jednej z krawędzi pola przewijania.
  • snapped: kontener wyrównany do przyciągania jest obecnie przyciągnięty w poziomie lub w pionie.
  • scrollable: określa, czy kontener z paskiem przewijania można przewijać w kierunku zapytanym.

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;
    }
  }
}

Aby dowiedzieć się więcej i zobaczyć kilka demonstracji, zapoznaj się z artykułem Zapytania o stan przewijania w usługach porównywania cen.

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

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

Te właściwości umożliwiają dokładne kontrolowanie odstępów pionowych za pomocą wymiarów czcionki.

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 usług w CSS text-box-trim.

I wiele więcej!

Oczywiście jest ich znacznie więcej.

  • Animation.overallProgresspokazuje w wygodny i spójny sposób, jak daleko posunęła się animacja w ramach iteracji, niezależnie od charakteru jej osi czasu.
  • Node.prototype.moveBefore umożliwia przenoszenie elementów w drzewie DOM bez resetowania ich stanu.
  • 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 innych nowych funkcjach Chrome znajdziesz w informacjach o wersji Chrome 133.

Więcej informacji

Ta lista zawiera tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 133, kliknij te linki.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Gdy tylko pojawi się nowa wersja Chrome, poinformujemy Cię o jej nowościach.