Nowości w Chrome 117

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Zobaczmy, co nowego dla programistów Chrome 117.

Nowe funkcje CSS dotyczące animacji wejścia i wyjścia.

Te 3 nowe funkcje CSS uzupełniają zestaw funkcji, które ułatwiają dodawanie animacji wejścia i wyjścia oraz płynne animacje elementów, takich jak okna dialogowe i wyskakujące, które można zamknąć.

Pierwsza funkcja to transition-behavior. Aby przekształcić właściwości dyskretne, takie jak display, użyj wartości allow-discrete dla atrybutu transition-behavior.

.card {
  transition: opacity 0.25s, display 0.25s;
  transition-behavior: allow-discrete; /* Note: be sure to write this after the shorthand */
}

.card.fade-out {
  opacity: 0;
  display: none;
}

Następnie reguła @starting-style służy do animowania efektów wejścia z poziomu display: none do najwyższej warstwy. Użyj @starting-style, aby zastosować styl, który przeglądarka może sprawdzić, zanim element zostanie otwarty na stronie.

/*  0. IS-OPEN STATE   */
/*  The state at which the element is open + transition logic */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/*  1. BEFORE-OPEN STATE   */
/*  Starting point for the transition */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/*  2. EXITING STATE   */
/*  While it is deleting, before DOM removal in JS, apply this
    transformation for height, opacity, and a transform which
    skews the element and moves it to the left before setting
    it to display: none */
.is-deleting {
  opacity: 0;
  height: 0;
  display: none;
  transform: skewX(50deg) translateX(-25vw);
}

Aby zniknął element popover lub dialog z najwyższej warstwy, dodaj właściwość overlay do listy przejść. Uwzględnij nakładkę w przejściu lub animacji, aby animować ją wraz z innymi funkcjami, i upewnij się, że podczas animacji pozostaje ona na górnej warstwie. Dzięki temu będzie wyglądać znacznie płynniej.

[open] {
  transition: opacity 1s, display 1s allow-discrete;
}

[open] {
  transition: opacity 1s, display 1s allow-discrete, overlay 1s allow-discrete;
}

Aby dowiedzieć się, jak za pomocą tych funkcji poprawić wrażenia użytkowników związane z animowanymi efektami wejścia i wyjścia, zapoznaj się z artykułem Cztery nowe funkcje CSS zapewniające płynne animacje wejścia i wyjścia.

Grupowanie tablic

W programowaniu grupowanie tablic jest bardzo częstą operacją, która najczęściej występuje podczas korzystania z klauzuli GROUP BY w SQL i programowania MapReduce (którego lepiej używać jako map-group-reduce).

Możliwość łączenia danych w grupy pozwala deweloperom obliczać zbiory danych wyższego rzędu. Mogą to być na przykład średni wiek kohorty lub dzienne wartości LCP strony.

Grupowanie tablic umożliwia takie scenariusze po dodaniu metod statycznych Object.groupBy i Map.groupBy.

Funkcja groupBy wywołuje podawaną funkcję wywołania zwrotnego raz dla każdego elementu w obiekcie iterowanym. Funkcja wywołania zwrotnego powinna zwracać ciąg znaków lub symbol wskazujący grupę powiązanego elementu.

W tym przykładzie z dokumentacji MDN mamy tablicę produktów z metodą groupBy, która służy do zwracania produktów pogrupowanych według typu.

const inventory = [
  { name: "asparagus", type: "vegetables", quantity: 5 },
  { name: "bananas", type: "fruit", quantity: 0 },
  { name: "goat", type: "meat", quantity: 23 },
  { name: "cherries", type: "fruit", quantity: 5 },
  { name: "fish", type: "meat", quantity: 22 },
];

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
  vegetables: [
    { name: 'asparagus', type: 'vegetables', quantity: 5 },
  ],
  fruit: [
    { name: "bananas", type: "fruit", quantity: 0 },
    { name: "cherries", type: "fruit", quantity: 5 }
  ],
  meat: [
    { name: "goat", type: "meat", quantity: 23 },
    { name: "fish", type: "meat", quantity: 22 }
  ]
}
*/

Więcej informacji znajdziesz w dokumentacji usługi groupBy.

Uproszczone lokalne zastąpienia w Narzędziach deweloperskich.

Funkcja zastąpienia lokalnych została udoskonalona, dzięki czemu można z poziomu panelu Sieć łatwo imitować nagłówki odpowiedzi i treści internetowe zasobów zdalnych, nie mając do nich dostępu.

Aby zastąpić treści z internetu, otwórz panel Sieć, kliknij żądanie prawym przyciskiem myszy i wybierz Zastąp treść.

Opcje zastąpienia w menu rozwijanym prośby.

Jeśli masz skonfigurowane zastąpienia lokalne, ale są one wyłączone, Narzędzia deweloperskie je włączają. Jeśli nie masz jeszcze skonfigurowanych tych ustawień, na pasku czynności u góry pojawi się odpowiedni komunikat. Wybierz folder, w którym mają być przechowywane zastąpienia, i pozwalaj na dostęp do niego w narzędziach DevTools.

Wybierz folder i zezwól na dostęp do niego z paska działań u góry.

Gdy zastąpione wartości zostaną skonfigurowane, DevTools przeniesie Cię do Źródeł > Zastąpień > Edytowanie, aby umożliwić zastąpienie zawartości strony internetowej.

Zastąpione zasoby są oznaczone symbolem Zapisano. w panelu Sieć. Najedź kursorem na ikonę, aby zobaczyć, co zostało zastąpione.

Ikona zastąpienia obok żądania w panelu Sieć

Zapoznaj się z nowościami w Narzędziach deweloperskich, aby dowiedzieć się więcej o Narzędziach deweloperskich w Chrome 117.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Długo oczekiwana wartość subgrid dla grid-template-columns i grid-template-rows została wdrożona w Chrome.

  • Dostępny jest okres próbny wycofywania WebSQL oraz okres próbny dla deweloperów w przypadku wycofywania zdarzenia unload.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Aby poznać inne zmiany w Chrome 117, kliknij linki poniżej.

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.

Cześć, tu Adriana Jara. Gdy tylko pojawi się nowa wersja Chrome 117, opowiem Ci, co nowego w Chrome.