Nowości w Chrome 117

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla deweloperów w Chrome 117.

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

Te 3 nowe funkcje CSS uzupełniają zestaw, by łatwo dodawać animacje wejścia i wyjścia oraz płynnie animować się do i z elementów zamykanych górnej warstwy, takich jak okna i popovery.

Pierwsza funkcja to transition-behavior. Aby przenieść właściwości dyskretne, np. display, użyj wartości allow-discrete w polu 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 jest używana do animowania efektów wejścia z elementu display: none do górnej warstwy. Użyj operatora @starting-style, aby zastosować styl, który przeglądarka może wyszukać, zanim element zostanie otwarty na stronie.

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

/*  1. 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;
}

/*  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 zaniknąć efektu popover lub dialog z górnej warstwy, dodaj do listy przejść właściwość overlay. Dodaj nakładkę w przejściu lub animacji, aby włączyć animację nakładki wraz z pozostałymi funkcjami i upewnić się, że podczas animacji pozostaje ona na górze warstwy. Będzie to dużo gładsze.

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

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

Sprawdź 4 nowe funkcje CSS zapewniające płynne animacje wejścia i wyjścia, aby dowiedzieć się, jak ich używać do zwiększania wygody użytkowników w zakresie ruchu.

Grupowanie według tablicy

W programowaniu grupowanie tablic jest bardzo powszechną operacją, najczęściej gdy używamy klauzuli GROUP BY SQL i programowania MapReduce (które lepiej zinterpretować jako map-group-reduce).

Możliwość łączenia danych w grupy pozwala programistom obliczać zbiory danych w wyższej kolejności. Na przykład średni wiek kohorty lub dzienne wartości LCP dla strony internetowej.

Grupowanie tablic umożliwia takie scenariusze przez dodanie metod statycznych Object.groupBy i Map.groupBy.

groupBy wywołuje podaną funkcję wywołania zwrotnego raz dla każdego elementu w funkcji iteracyjnej. Funkcja wywołania zwrotnego powinna zwrócić ciąg lub symbol, który wskazuje grupę powiązanego elementu.

W poniższym przykładzie z dokumentacji MDN znajduje się tablica produktów z metodą groupBy służącą do zwracania ich 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 zastąpienia lokalne w Narzędziach deweloperskich.

Funkcja zastąpień lokalnych została uproszczona, dzięki czemu można łatwo imitować nagłówki odpowiedzi i treści internetowe z zasobów zdalnych z panelu Sieć bez dostępu do nich.

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

Opcje zastępowania w menu żądania.

Jeśli masz skonfigurowane zastąpienia lokalne, ale są wyłączone, zostaną one włączone w Narzędziach deweloperskich. Jeśli narzędzia deweloperskie nie są jeszcze skonfigurowane, na pasku działań u góry pojawi się odpowiedni komunikat. Wybierz folder, w którym będą przechowywane zastąpienia i zezwól na dostęp do niego Narzędziom deweloperskim.

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

Po skonfigurowaniu zastąpień w Narzędziach deweloperskich możesz otworzyć Źródła > Zastąpienia > Edytor, aby zastępować treści internetowe.

Pamiętaj, że zastąpione zasoby są oznaczone symbolem Zapisano. w panelu Sieć. Najedź na tę ikonę, aby zobaczyć zastąpienie.

ikonę zastępowania obok żądania w panelu Sieć;

W sekcji Nowości w Narzędziach deweloperskich znajdziesz więcej szczegółów na temat Narzędzi deweloperskich w Chrome 117.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Kliknij linki poniżej, aby dowiedzieć się o dodatkowych zmianach w Chrome 117.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Cześć Adriana Jara, a gdy tylko Chrome 117 będzie dostępny, będę informować Cię o nowościach w Chrome.