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 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 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 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ć nakładkę wraz z pozostałymi funkcjami i upewnić się, że pozostanie ona w górnej warstwie podczas animacji. Będzie to wyglądało znacznie płynniej.

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

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

Zapoznaj się z czterema nowymi funkcjami CSS zapewniającymi płynne animacje wejścia i wyjścia, aby dowiedzieć się, jak korzystać z tych funkcji w celu poprawy wrażeń użytkownika związanych z ruchem.

Grupowanie tablic

W programowaniu grupowanie tablic to bardzo powszechna operacja, którą można zaobserwować najczęściej przy korzystaniu z klauzuli GROUP BY w kodzie SQL i programowania MapReduce (które lepiej określa się jako „map-group-reduce”).

Możliwość łączenia danych w grupy umożliwia programistom obliczanie zbiorów 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 podaną funkcję wywołania zwrotnego raz dla każdego elementu w iteracji. 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 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ępowania w menu żądania.

Jeśli masz skonfigurowane lokalne zastąpienia, ale są wyłączone, Narzędzia deweloperskie je włączają. Jeśli nie masz jeszcze skonfigurowanych narzędzi deweloperskich, 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 nich Narzędzi deweloperskich.

Wybierz folder i zezwól na dostęp do niego z paska działań 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ź na nią kursorem, 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ść Adrianę Jara. Gdy tylko Chrome 117 się ukaże, od razu opowiem, co nowego w Chrome.