Osobne właściwości dla transformacji CSS

Cześć !
Witaj w kolejnym newsletterze Ahoy Dev! Jak zwykle mamy dla Ciebie serię linków ze świata Full-Stack, podsumowanie ostatniego tygodnia na Ahoy! oraz nadchodzące wydarzenia na społeczności.
Chciałem też przytoczyć Ci najnowsze zmiany w Chrome 104 odnośnie nowych właściwości CSS.
Pamiętaj, że możesz dać nam znać co sądzisz o naszym newsletterze w dedykowanej do tego ankiecie - dzięki!
Trzymaj się!
Wojtek

Niezależne właściwości CSS do transformacji 2D/3D

Chrome 104 dołącza do listy przeglądarek wspierających osobne właściwości do kontroli transformacji CSS, takie jak translate, rotate czy scale.

Co to oznacza?

Oprócz paru technicznych implikacji, jak np. z góry narzucona kolejność funkcji transformujących (najpierw pierwszeństwo ma przesunięcie, następnie obrót, następnie zmiana rozmiaru), umożliwi to większą kontrolę i czytelność w animacjach typu @keyframes - wiele razy zdarzało mi się tworzyć nieco bardziej zaawansowane animacje "z palca", no i kończyło się to na tym że musiałem kopiować moje reguły `transform` w kilku miejscach, zachowując wszystkie poprzednie stany i zmieniając tylko jedną funkcję.
Z nowym podejściem, tego typu kod będzie o wiele czytelniejszy - chociaż stracimy pełną kontrolę nad aplikowaniem kolejności transformacji. Z drugiej strony, animacje które piszemy wreszcie nie będą "usuwać" innych transformacji które dany element może posiadać - przez nadpisywanie całego transform

Transform vs pojedyncze właściwości

Poniżej znajdziesz porównanie prostej animacji CSS z użyciem klasycznego transform oraz animowanie indywidualnych właściwości.
Zwróć uwagę na konieczność powtarzania wszystkich funkcji transformujących w każdym kroku animacji:

Klasyczne podejście - transform

W tym podejściu konieczne jest powtarzanie wszystkich funkcji transformujących, ale mamy kontrolę nad kolejnością aplikowania transformacji - potężne, ale trudne w zarządzaniu.

Nowość - pojedyncze właściwości

Tracimy kontrolę nad kolejnością aplikowania funkcji (wymuszona kolejność: transform, rotate, scale) ale nie musimy obawiać się przypadkowego nadpisania innych funkcji
Dobrze podsumowuje to Stefan Judis, przedstawiając przy okazji sytuacje na rynku przeglądarek w kontekście globalnego wsparcia tego rozwiązania

Ciekawe linki

Jesteś developerem Reacta? Zobacz zestaw rozszerzeń do VSCode które zdecydowanie uproszczą Twoją pracę.
A jeśli dopiero wchodzisz na rynek, bądź szukasz pracy wokół tej właśnie technologii zobacz 11 pytań dotyczących Reacta które musisz znać na potencjalnej rozmowie rekrutacyjnej
Defensive CSS - zobacz podejście do tworzenia zarządzalnego i skalowalnego CSSa, w ponad 24 poradach od Ahmada Shadeeda
patterns.dev - Addy Osmani oraz Lydia Hallie stworzyli darmowy ebook odnośnie wzorców projektowych w JavaScript oraz React.
A na zakończenie, zobacz co Carlo Morrone ma na radarze w kontekście nowych narzędzi developerskich z tego roku.

Na Społeczności

Kolejne Full-Stack Q&A już za nami! Pomimo okresu wakacyjnego zebraliśmy się i porozmawialiśmy m.in. o rekrutacji do Google, public speakingu czy tzw. imposter syndrome. A to wszystko w ciągu niecałej godziny! Nagranie będzie dostępne już niedługo w sekcji 📺 Nagrania spotkań
Pamiętajcie, aby dzielić się pytaniami które mogą was nurtować za wczasu - wtedy omówimy je na dedykowanych ku temu spotkaniach!
Adam wspomniał o końcu Snowpacka, oraz rekomendacji przejścia na Vite (!), a w sekcji pytania i odpowiedzi Mateusz poprosił o pomoc w sprawie w zrozumienia zawiłości na Front-Endzie - może chcesz podzielić się swoją opinią?

Nadchodzące wydarzenia

Jak zbudować markę osobistą eksperta? - Na to pytanie odpowie Jarek Jarzębowski, który w ciągu 2 lat Jarek zbudował rozpoznawalną markę osobistą eksperta - spotkanie odbędzie się 18.07 o 19:30.
Praktyczny Rozwój Programisty - Radek Wojtysiak, Senior Front-End Software Engineer już w czwartek 21.07 o godzinie 19:00 na żywo opowie o pomysłach na efektywny rozwój w programistycznym świecie.