Nowości w Chrome 65

Pete LePage

A jest to wiele innych!

Nazywam się Pete LePage. Przyjrzyjmy się, co nowego dla deweloperów w Chrome 65.

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

Interfejs CSS Paint API

Interfejs CSS Paint API umożliwia automatyczne generowanie obrazu dla właściwości CSS takich jak background-image lub border-image.

Zamiast odwoływać się do obrazu, możesz go narysować za pomocą nowej funkcji malowania – podobnie jak w przypadku elementu 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 fali na przycisku ze stylem Material Design, możesz użyć interfejsu paint API.

Jest to również zaawansowana metoda polyfilling funkcji CSS, które nie są jeszcze obsługiwane przez przeglądarkę.

Surma ma świetny post z kilkoma prezentacjami na jego wyjaśnieniu.

Interfejs Server Timing API

Być może używasz interfejsów API nawigacji i czasu zasobów, aby śledzić wydajność witryny w przypadku rzeczywistych użytkowników. Do tej pory nie było możliwego w łatwy sposób raportowania przez serwer czasu wydajności.

Nowy interfejs Server Timing API umożliwia serwerowi przekazywanie do przeglądarki informacji o czasie, co daje lepszy wgląd w ogólną wydajność.

Możesz śledzić dowolną liczbę wskaźników: czasy odczytu bazy danych, czas uruchamiania i inne ważne dla Ciebie wskaźniki, dodając do odpowiedzi nagłówek Server-Timing:

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

Wyświetlają się one w Narzędziach deweloperskich w Chrome. Możesz też wyciągnąć je z nagłówka odpowiedzi i zapisać razem z innymi statystykami wydajności.


display: contents

Nowa właściwość CSS display: contents jest niezwykle skuteczna.

Po dodaniu do elementu kontenera wszelkie elementy podrzędne zajmują miejsce w DOM i w zasadzie znikają. Powiedzmy, że mam 2 urządzenia div, jedną w środku. Zewnętrzny div ma czerwone obramowanie i szare tło, a ustawiona została szerokość 200 pikseli. Wewnętrzny obszar (div) ma niebieskie obramowanie 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ętrzny div znajduje się w zewnętrznym obiekcie div.

Jestem wewnętrznym użytkownikiem <div>

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

Sprawdź DOM, korzystając z Narzędzi deweloperskich, i zauważ, że zewnętrzne elementy div nadal istnieją.

Może się to okazać pomocne w wielu przypadkach, ale najczęściej jest to rozwiązanie Flexbox. Dzięki flexboxowi tylko najbliższe elementy podrzędne kontenera elastycznego stają się elementami elastycznymi.

Gdy jednak zastosujesz właściwość display: contents do konta podrzędnego, jego elementy podrzędne staną się elementami elastycznymi i są rozmieszczone zgodnie z tymi samymi regułami, które byłyby stosowane w przypadku elementu nadrzędnego.

Więcej szczegółów i inne przykłady znajdziesz w świetnym poście Rachel Andrew Vanishing box with display content.

…i wiele innych.

To tylko niektóre ze zmian w Chrome 65 dla deweloperów, oczywiście jest ich znacznie więcej.

  • Składnia określania współrzędnych HSL i HSLA oraz współrzędnych RGB i RGBA właściwości koloru pasuje do specyfikacji CSS Color 4.
  • Dostępna jest nowa zasada funkcji, która umożliwia sterowanie synchronicznymi elementami XHR za pomocą nagłówka HTTP lub atrybutu iframe allow.

Zapoznaj się z nowościami w Narzędziach deweloperskich w Chrome, aby poznać nowości w tych narzędziach w przeglądarce Chrome 65. Jeśli interesuje Cię progresywne aplikacje internetowe, obejrzyj nową serię filmów PWA Roadshow. Potem kliknij przycisk subskrypcji na naszym kanale w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Pete LePage i jak tylko pojawi się Chrome 66, zajmę się tym, co nowego w Chrome.