Nowości w Chrome 65

Pete LePage

A jest ich wiele więcej.

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

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

Interfejs CSS Paint API

Interfejs CSS Paint API umożliwia automatyczne generowanie obrazu na potrzeby właściwości CSS takich jak background-image czy 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 fali na przycisku w stylu Material Design, możesz użyć interfejsu paint API.

Jest to również zaawansowana metoda uzupełniania funkcji CSS, które nie są jeszcze obsługiwane w przeglądarkach.

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

Server Timing API

Mam nadzieję, że używasz interfejsów API nawigacji i czasu zasobów do śledzenia wydajności witryny w przypadku rzeczywistych użytkowników. Do tej pory nie było łatwego sposobu raportowania czasu wydajności przez serwer.

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 dane, dodając do odpowiedzi nagłówek Server-Timing:

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

Są one widoczne w Narzędziach deweloperskich w Chrome. Można je też wyciągnąć z nagłówka odpowiedzi i zapisać wraz z innymi statystykami wydajności.


display: contents

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

Po dodaniu do elementu kontenera wszystkie elementy podrzędne zajmują jego miejsce w DOM i zasadniczo znikają. 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 element 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 jest zawarty w zewnętrznym elemencie div.

Jestem wewnętrzny <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.

Sprawdź element DOM za pomocą Narzędzi deweloperskich. Zwróć uwagę, ż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 najbliższe elementy podrzędne kontenera elastycznego stają się elementami elastycznymi.

Jednak gdy zastosujesz zasadę display: contents do elementu podrzędnego, jego elementy podrzędne staną się elementami elastycznymi i są układane przy użyciu tych samych reguł, które obowiązywałyby w przypadku elementów nadrzędnych.

Zapoznaj się ze świetnym postem Rachela Andrew na temat Wysypiania pól z zawartością wyświetlacza, aby dowiedzieć się więcej i poznać inne przykłady.

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 koloru 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 nowościami w Narzędziach deweloperskich w Chrome, aby dowiedzieć się o nowościach w Narzędziach deweloperskich w Chrome 65. A jeśli interesuje Cię progresywne aplikacje internetowe, obejrzyj nową serię filmów o PWA Roadshow. Następnie kliknij przycisk Subskrybuj na naszym kanale w YouTube, a dostaniesz e-maila z powiadomieniem o publikacji nowego filmu.

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