Nowości w Chrome 117

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

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

Nowe funkcje CSS dla animacji wejścia i wyjścia.

Te trzy nowe funkcje CSS dopełniają cały zestaw, dodając łatwe w obsłudze animacje wejścia i wyjścia. płynne animowanie do i z górnej warstwy elementów, które można zamknąć, takich jak okna dialogowe i wyskakujące okienka.

Pierwsza funkcja to transition-behavior. Aby przenieść właściwości dyskretne, takie jak display, użyj wartości allow-discrete dla właściwości 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 display: none do górnej 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 zanikać popover lub dialog z górnej warstwy, dodaj do listy przejść właściwość overlay. Uwzględnij nakładkę w przejściu lub animacji, aby animować ją razem z pozostałymi 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. Może to być np. średni wiek kohorty lub dzienne wartości LCP strony internetowej.

Grupowanie tablic umożliwia te scenariusze dzięki 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.

Poniższy przykład z dokumentacji MDN zawiera tablicę produktów za pomocą metody groupBy, która jest używana do zwrócenia 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 lokalne zastąpienia w Narzędziach deweloperskich.

Funkcja lokalnych zastąpień została uproszczona, dzięki czemu możesz łatwo symulować nagłówki odpowiedzi i zawartość internetową zasobów zdalnych z panelu Sieć bez dostępu do tych zasobów.

Aby zastąpić treści z internetu, 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ą one wyłączone, Narzędzia deweloperskie je włączą. 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 na pasku akcji u góry.

Po skonfigurowaniu zastąpień w Narzędziach deweloperskich przejdziesz do sekcji Źródła > Zastąpienia > Edytor umożliwiający zastępowanie treści internetowych.

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

Ikona zastępowania 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 dostępnych jest też znacznie więcej.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Przejrzyj te linki: dodatkowe zmiany w Chrome 117.

Subskrybuj

Aby być na bieżąco, zasubskrybuj Kanał Chrome Developers w YouTube, a gdy będziemy mogli opublikować nowy film, otrzymasz e-maila z powiadomieniem.

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