Witamy w roku 2022! 🥳
Nadejście Nowego Roku to najlepszy czas, żeby zrobić sobie podsumowanie roku 2021 i tego co zmieniło się we frontend developmencie. W przeciwieństwie do innych dziedzin IT, trendy i zmiany na froncie zachodzą szybko, więc warto być z nimi na bieżąco. jeżeli nie śledziłaś/eś, tego co się działo w ciągu minionego roku, to zapraszamy! 😉
Frontend Wrapped 2021
Nie wiem jak Wy, ale ja bardzo lubię wszelkie coroczne podsumowania w aplikacjach. Tradycją dla mnie jest już Spotify Wrapped, czy podsumowanie na Stravie. Dzięki temu idzie dowiedzieć się rzeczy, o których nie miało się pojęcia – jak przesłuchanie 145 gatunków muzyki, gdzie moja wiedza kończy się pewnie na około 20 z nich 😀
Zatem zacznę również od „osobistych” podsumowań danych technologii. Powiedziałabym, iż na pierwszy ogień pójdą HTML i CSS, ale jak można się spodziewać u HTMLa nic się nie zmieniło, cisza, spokój, nic się nie dzieje. Za to CSS nie próżnował – było, jest i będzie sporo nowości!
CSS: zmiany w 2021
Na początku roku 2021 Google wraz z innymi partnerami, jak Mozilla i Microsoft, ogłosiło projekt Web Developer Satisfaction, który miał za zadanie zebrać feedback od programistów i skupić się na kluczowych dla nich sprawach. I tak miniony rok był rokiem skupienia się na zgodności pomiędzy przeglądarkami – #Compat2021.
Źródło: bit.ly/3vO6Axz
Co poprawiono w CSSie?
Tak jak już mogłyście/mogliście się dowiedzieć, przeglądarki mają różne silniki. Przez to właśnie, niektóre adekwatności CSSa nie działają tak samo na każdej z nich, a choćby wcale. Dlatego też wybrano 5 najważniejszych obszarów do popawienia błędów i niezgodności, tak aby wszystkim (nam developerom szczególnie) żyło się lepiej 😀 .
- CSS Flexbox
- CSS Grid
- CSS position: sticky
- CSS aspect-ratio property
- CSS transforms
Pełen raport poprawek, związanych z powyższymi obszarami, znajdziecie na stonie web.dev.
Pod koniec grudnia przedstawiono podsumowanie prac, w tym również wyniki kompatybilności pomiędzy przeglądarkami.
Źródło: Wyniki zgodności #Compat2021
Na pewno więkoszość z nas ucieszy możliwość używania już w pełni aspect-ratio, zamiast popularnego hacka z padding-top/padding-bottom.
Dla osób, które mogą nie wiedzieć o co chodzi – aspect-ratio to współczynnik proporcji. Współczynnik ten dotyczy responsywności elementów, najczęściej obrazków, tak by zachowały one swoje proporcje przy zmniejszaniu, czy zwiększaniu okna przeglądarki i nie uległy tym samym jakiejś deformacji.
Źródło: web.dev
Nowe adekwatności CSS
A co z nowości? Ano mamy ich kilka, jednak ze względu, iż niektóre mają jeszcze bardzo kiepskie wsparcie lub są wciąż w wersji eksperymentalnej, to przestawie tylko parę.
Wprowadzono, m.in.:
- gap dla flexboxa – coś co najbardziej cieszy ❤ . Z adekwatnością gap najpewniej spotkaliście się stosując grida, natomiast obowiązuje ona teraz również dla flexboxa. Dzięki temu w bardzo prosty sposób można oddzielać od siebie elementy o zadaną wartość.
See the Pen
Flexbox gap by frontowisko (@frontowisko)
on CodePen.
- conic-gradient() – funkcja, dzięki której można stworzyć gradient kolorów zrotowanych wokół punktu środkowego. Dzięki temu robienie, np. wykresów w CSSie może stać się banalne 😉 .
Przykład 1. Conic-gradient, zródło: CSS WG
Przykład 2. Repeating-conic-gradient, zródło: CSS WG
- content-visibility – bardzo interesująca adekwatność CSS, w wersji jeszcze ograniczonej, bo wspieranej na Chromie, Edgu i Operze. Ma ona poprawiać wydajność renderowania elementów na stronie. To znaczy – element zostanie pominięty przy renderowaniu, dopóki nie będzie widoczny w oknie przeglądarki (dopóki do niego nie zescrollujemy).
- CSS logical properties – adekwatność nad którą pracowano od 2018, ale od minionego roku już szeroko wspierana. Dotyczy zmiany logiki dla paddingów, marginesów i borderów z uzględnieniem innej adekwatności CSS tj. writing-mode czy też ustawionej adekwatności lang (języka) w tagu html. O co adekwatnie w tym chodzi? Normalne flow dla dokumentu to horyzontalne, od lewej do prawej, tak jak teraz Wy to czytacie 😀 . Stąd jeżeli ustawimy, np. margin-right: 20px, to pojawi się on po prawej stronie. Co w takim razie z językiem arabskim, gdzie flow dla tekstu jest od prawej do lewej? Czy też niektórymi krajami azjatyckimi, gdzie tekst nie dość, iż od jest prawej do lewej, to jeszcze wertykalnie? Ustawiony przez nas margin-right, na pewno nie będzie poprawnie. Stąd do pozycji top, right, bottom, left, wymyślone odpowiedniki – inline/block, start i end, które będą działać niezależnie od flow.
Źródło: https://web.dev/logical-property-shorthands/
See the Pen
Logical properties by frontowisko (@frontowisko)
on CodePen.
Parę słów od nas
Przede wszystkim chciałybyśmy powitać Was w Nowym Roku, mamy nadzieję, iż będziecie przez niego brnąć razem z nami 😉 .
Dla nas to był szczególny rok, ponieważ powstało Frontowisko. adekwatnie w grudniu 2020 urodził się pomysł na jego stworzenie, a póżniej zostały podjęte pierwsze kroki do powstania tego bloga. Można by powiedzieć, iż dla Pauliny i dla mnie minął już pełen rok tutaj! Także życzymy sobie i Wam, aby nigdy nie brakło motywacji do tego, co sobie postanowicie. No i jeżeli macie jakieś postanowienia czy cele na 2022, to śmiało, podzielcie się nimi!
A co się tyczy dzisiejszego Frontend Wrapped 2021, to była dopiero pierwsze część – edycja CSS 😀 . Następna ukaże się w przyszłym tygodniu i będzie dotyczyła głównie Javascriptu oraz frameworków. Stay tuned!
