- CSS Paint API umożliwia automatyczne generowanie obrazu.
- Interfejs Server Timing API umożliwia serwerom WWW dostarczanie informacji o czasie wydajności za pomocą nagłówków HTTP.
- nowa właściwość CSS
display: contents
może sprawić, że pola znikają.
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 div
i 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
.
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.
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
iHSLA
orazRGB
iRGBA
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.