ŁukaszBącik

#frontendowe spojrzenie na tworzenie stron www

webkit logo Komentarze: 2

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

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.