Safari Technology Preview 137 i 138 – nowości
Grudniowa i styczniowa aktualizacja testowej wersji przeglądarki Safari Technology Preview zawiera bardzo ciekawe zapisy i nowości. Są to nowości z zakresu CSS, JS oraz Web Inspektora. Dzisiaj chciałbym opisać istotne zmiany w przypadku styli i narzędzi deweloperskich, które będą przydatne w pracy frontendowca.
Jak już wspominałem w poprzednim wpisie traktującym o nowościach w Safari Technology Preview, silnik w tej przeglądarce to WebKit. To na nim oparta jest przeglądarka, w której wprowadzono szereg zmian.
Safari Technology Preview 137
Pod koniec grudnia wydano wersję TP o numerze 137. Spis nowości i usprawnień jest dosyć długi, jednak skupię się na istotnych z mojego punktu widzenia.
Pseudo selektor :has()
Selektor :has()
bardzo ważny, gdyż pozwala na określenie rodzica danego elementu i nałożenie na niego pożądanych styli. Przykładowo, potrzebujemy oznaczyć czerwoną linią listę ul
, która zawiera więcej niż 3 elementy. Oto rozwiązanie:
ul:has(li:nth-child(4)) {
border: 2px solid #e50000;
}
Dokładniejsze wyjaśnienie jak działa selektor :has() opisałem w osobnym wpisie, zachęcam do zapoznania się.
Nowe przestrzenie barwne
W tym wydaniu dodano wsparcie dla nowych przestrzeni barwnych, których można będzie w przyszłości używać do określania kolorów wybranych elementów. Dokumentacja CSS Color 4 zawiera obszerny opis składni przestrzeni barwnych.
Nowo dodane przestrzenie barwne to:
- srgb-linear
- xyz-d50
- xyz-d65
Wsparcie nowych funkcji kolorystycznych
Tutaj dodane zostały 2 funkcje, oklab()
oraz oklch()
. Te z kolei pozwalają na dokładniejszą korekcję światła danego koloru.
Zarządzanie właściwościami align-content
W tym przypadku zmiana obejmuje możliwość przełączania właściwości align-content
bezpośrednio w narzędziach deweloperskich, by „na żywo” obserwować zachowanie layoutu flexbox.
Safari Technology Preview 138
Tę wersję Safari wydano 20 stycznia 2022 r. i moją uwagę przyciągnęło kilka ciekawych punktów.
Cascade layers
Kaskadowe warstwy zapewniają uporządkowany sposób organizowania i rozstrzygania „sporów” w ramach jednego źródła. Sposób działania bardzo dokładnie opisuje oczywiście dokumentacja W3C. Swoją interpretację opisałem w artykule o cascade layers.
Zarządzanie właściwościami flex
Tak jak w przypadku wersji Technology Preview 137, tak i tutaj dodano możliwość zarządzania właściwościami bezpośrednio w narzędziach inspekcyjnych CSS. Wsparte zostały właściwości:
- align-items,
- align-self,
- justify-content,
- justify-items,
- justify-self.
Podsumowanie
To oczywiście nie wszystkie nowości i usprawnienia, jednak te wydały mi się interesujące lub ważne.
2 komentarze
Przydatne info, dzięki.
Sporo się dzieje, zwłaszcza, że wydano już wersję TP 139 😉