Nowości w Chrome 65

Pete LePage

A jest ich wiele więcej.

Mam na imię Pete LePage. Sprawdź, co nowego w Chrome 65 dla deweloperów.

Chcesz zobaczyć pełną listę zmian? Sprawdź listę zmian w repozytorium źródłowym Chromium.

Interfejs API CSS Paint

Interfejs CSS Paint API umożliwia generowanie obrazu za pomocą kodu w przypadku właściwości CSS, takich jak background-image lub border-image.

Zamiast odwoływać się do obrazu, możesz użyć nowej funkcji malowania – przypomina to element canvas.

<style>
  .myElem { background-image: paint(checkerboard); }
</style>
<script>
  CSS.paintWorklet.addModule('checkerboard.js');
</script>

Na przykład zamiast dodawać dodatkowe elementy DOM, aby utworzyć efekt falowania przycisku w stylu Material, możesz użyć interfejsu paint API.

Jest to też skuteczna metoda polyfillingu funkcji CSS, które nie są jeszcze obsługiwane przez przeglądarkę.

Surma ma świetny post w filmie objaśniającym, w którym pokazuje prezentację.

Interfejs Server Timing API

Mamy nadzieję, że używasz interfejsów API do śledzenia czasu ładowania nawigacji i zasobów, aby sprawdzać działanie witryny w realnych warunkach. Do tej pory serwer nie miał łatwego sposobu na raportowanie czasu wykonania.

Nowy interfejs Server Timing API umożliwia serwerowi przesyłanie do przeglądarki informacji o czasie, dzięki czemu masz lepszy wgląd w ogólną wydajność.

Możesz śledzić dowolną liczbę wskaźników: czas odczytu bazy danych, czas uruchamiania lub inne ważne dla Ciebie dane. Aby to zrobić, dodaj nagłówek Server-Timing do odpowiedzi:

'Server-Timing': 'su=42;"Start-up",db-read=142;"Database Read"'

Są one widoczne w Chrome DevTools. Możesz też wyodrębnić je z nagłówka odpowiedzi i zapisać razem z innymi danymi dotyczącymi wydajności.


display: contents

Nowa właściwość CSS display: contents działa bardzo sprawnie.

Gdy zostanie dodany do elementu kontenera, wszystkie elementy podrzędne zajmują jego miejsce w DOM-ie i w zasadzie znika. Załóżmy, że mam dwa divi jeden w drugiej. Mój zewnętrzny div ma czerwone obramowanie, szare tło i ustawiony szerokość 200 pikseli. Wewnętrzny div ma niebieską obwódkę i jasnoniebieskie tło.

.disp-contents-outer {
  border: 2px solid red;
  background-color: #ccc;
  padding: 10px;
  width: 200px;
}
.disp-contents-inner {
  border: 2px solid blue;
  background-color: lightblue;
  padding: 10px;
}

Domyślnie wewnętrzna div jest zawarta w zewnętrznej div.

Jestem wewnętrznym elementem <div>

Dodanie parametru display: contents do zewnętrznego elementu div powoduje, że zewnętrzny element div znika, a jego ograniczenia nie są już stosowane do wewnętrznego elementu div. Wewnętrzne pole div ma teraz 100% szerokości.

Użyj narzędzi deweloperskich, aby sprawdzić DOM. Zauważ, że zewnętrzny element div nadal istnieje.

Istnieje wiele przypadków, w których może to być pomocne, ale najczęściej stosowany jest dodatek flexbox. W przypadku flexbox tylko bezpośrednie elementy podrzędne kontenera flex stają się elementami flex.

Gdy jednak zastosujesz display: contents do elementu podrzędnego, jego elementy podrzędne staną się elementami elastycznymi i zostaną rozmieszczone zgodnie z tymi samymi regułami, które zostałyby zastosowane do elementu nadrzędnego.

Więcej informacji i przykładów znajdziesz w wybitnym poście Rachel Andrew Vanishing boxes with display contents.

I inne funkcje

To tylko kilka zmian, które wprowadziliśmy w Chrome 65, ale oczywiście jest ich znacznie więcej.

  • Składnia umożliwiająca określenie współrzędnych HSL i HSLA oraz RGB i RGBA we właściwości „color” jest teraz spójna ze specyfikacją koloru CSS 4.
  • Wprowadziliśmy nowe zasady dotyczące funkcji, które umożliwiają kontrolowanie synchronicznych żądań XHR za pomocą nagłówka HTTP lub atrybutu iframe allow.

Zapoznaj się z artykułem Nowości w Narzędziach deweloperskich w Chrome, aby dowiedzieć się, co nowego w wersji 65. Jeśli interesują Cię progresywne aplikacje internetowe, obejrzyj nową serię filmów o PWA. Następnie kliknij przycisk Subskrybuj na naszym kanale w YouTube. Otrzymasz e-maila z powiadomieniem, gdy opublikujemy nowy film.

Mam na imię Pete LePage i gdy tylko Chrome 66 się ukaże, od razu Ci opowiem – co nowego w Chrome.