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? Zobacz Lista zmian w repozytorium źródłowym Chromium.

Interfejs CSS Paint API

Interfejs CSS Paint API umożliwia automatycznie generować obraz na potrzeby 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, aby rysowania obrazu – podobnie jak element canvas.

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

Na przykład zamiast dodawać dodatkowe elementy DOM do tworzenie efektu fali można użyć interfejsu paint API.

Jest to również skuteczna metoda polyfill właściwości CSS, które nie są obsługiwane jeszcze nie w przeglądarce.

Surma ma świetny post z kilkoma prezentacje w swoim filmie objaśniającym.

Server Timing API

Mam nadzieję, że korzystasz z interfejsów API nawigacji i czasu zasobów do śledzenia skuteczność witryny w kontekście rzeczywistych użytkowników. Do tej pory nie było łatwo dla serwera raportowania o czasie działania.

Nowy interfejs Server Timing API umożliwia serwer do przekazywania informacji o czasie do przeglądarki; daje lepszy obraz Twojej ogólnej skuteczności.

Możesz śledzić dowolną liczbę wskaźników: czas odczytu bazy danych, czas uruchamiania, lub innego ważnego zadania, dodając nagłówek Server-Timing do pliku odpowiedź:

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

Są one wyświetlane w Narzędziach deweloperskich w Chrome, ale można je też wyciągnąć z odpowiedzi i zapisać je razem z innymi statystykami skuteczności.


display: contents

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

Po dodaniu do elementu kontenera wszystkie elementy podrzędne zajmują swoje miejsce w DOM, i właściwie znika. Załóżmy, że mam dwa div, w tym jeden w środku inne. Mój zewnętrzny div ma czerwone obramowanie, szare tło i ustawioną 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 elementu display: contents do zewnętrznego elementu div powoduje, że zewnętrzny element div znika i jego ograniczenia nie są już stosowane do wewnętrznego obiektu div. Wewnątrz div ma teraz 100% szerokości.

Sprawdź element DOM za pomocą Narzędzi deweloperskich. Zwróć uwagę, że zewnętrzny element div nadal istnieje.

Jest wiele przypadków, w których może się to okazać pomocne, ale ta najczęstsza z flexbox. W przypadku Flexbox tylko bezpośrednie elementy podrzędne kontenera Flex staną się elementami elastycznymi.

Jednak gdy zastosujesz ustawienie display: contents do konta dziecka, jego elementy podrzędne stają się elastyczne elementy i są układane z wykorzystaniem tych samych reguł, które byłyby stosowane do rodzica.

Zobacz doskonały post Rachela Andrew Skrzynki ulotne z zawartością wyświetlacza .

I inne funkcje

To tylko kilka zmian wprowadzonych w Chrome 65, oczywiście dla deweloperów. to nie wszystko.

  • Składnia służąca do określania współrzędnych HSL i HSLA oraz RGB i RGBA dla właściwości koloru pasuje do Specyfikacja CSS Color 4.
  • Nowe zasady dotyczące funkcji pozwalają aby kontrolować synchroniczne żądania XHR za pomocą nagłówka HTTP lub Atrybut iframe allow.

Zapoznaj się z nowościami w Narzędziach deweloperskich w Chrome, , aby poznać nowe funkcje Narzędzi deweloperskich w Chrome 65. A jeśli interesuje Cię Progresywne aplikacje internetowe – zobacz nową Seria filmów o PWA Roadshow. Potem kliknij przycisk Subskrybuj na kanału w YouTube, otrzymasz powiadomienie e-mail o każdym nowym filmie.

Jestem Pete LePage. Gdy tylko Chrome 66 się ukaże, opowie o nowościach w Chrome.