5 trendów front-endowych do naśladowania w 2021 r

W sieci krąży mnóstwo „trendów projektowych do naśladowania”. Postawiliśmy również na jeden w Hot Web Design Trends to Follow w 2021 roku. Skupienie się na takich artykułach jest bardzo zrozumiałe - sam projekt jest tym, co widzi zarówno klient, jak i odwiedzający. Kod, który za tym stoi, jest jednak w większości nieistotny dla większości użytkowników.

Ale chociaż wydaje się to nieistotne, oczywiście, jest bardzo ważne. Czysty kod, zoptymalizowane podejścia i nowe techniki pozwalają programistom prezentować piękne projekty w sposób, który można skalować. Użytkownicy chcą wydajności , a klientowi zależy na skalowalności .

Tak więc, aby oddać należny szacunek wszystkim programistom front-end, a także spostrzegawczości i pomysłom projektantom, stworzyliśmy listę „Trendów front-end do naśladowania w 2021 roku”.

1. Właściwości niestandardowe CSS

Jest to coś, czego deweloperzy chcieli od lat, mimo że niestandardowe właściwości CSS (lub znane również jako zmienne CSS) istnieją już od jakiegoś czasu. Na przykład moduł W3C Level 1 pochodzi z 2015 roku. Ale jak w przypadku każdej nowej technologii, uzyskanie przyczepności zajmuje trochę czasu. Wierzymy, że w 2021 roku zobaczymy jedne z najwyższych wskaźników adopcji od czasu jego powstania.

Dlaczego to jest fajne?

Właściwości niestandardowe są w rzeczywistości zmiennymi w CSS. Możesz powiedzieć „Ale w Sassie mamy zmienne, prawda?” Tak! Ale kiedy kompilujesz Sass do CSS, otrzymujesz CSS. I nie ma zmiennych. Nie możesz już zmienić wartości tej zmiennej. $primary: red to tylko czerwony.

Właściwości niestandardowe są dobrze obsługiwane wszędzie z wyjątkiem przeglądarki Internet Explorer

Jednak w przypadku właściwości niestandardowych masz --primary: red . Następnie możesz przedefiniować - na przykład --primary na niebieski. Bezpośrednio w przeglądarce, bez kompilacji. Aby dowiedzieć się więcej o tych sztuczkach CSS Jaka jest różnica między zmiennymi CSS a zmiennymi preprocesora?

Jedną z fajnych sztuczek do ich użycia jest niestandardowe motywy. Możesz zdefiniować wartości HSL za pomocą zmiennych, a następnie zezwolić użytkownikom na zmianę odcienia za pomocą suwaka na interfejsie. Połącz wartość suwaka ze zmienną CSS za pomocą JS i BAM za pomocą funkcji „Ustaw swój schemat kolorów”.

2. Zmienne czcionki

Czcionki zmienne, podobnie jak niestandardowe właściwości CSS, istnieją już od jakiegoś czasu, ale nadal nie są powszechnie używane. Jednym z powodów byłby czas potrzebny na zdobycie większej popularności, liczba samouczków / przewodników i technik, które mają zostać przyjęte przez programistów, a także potrzebne same czcionki. Nie możesz po prostu wybrać żadnej czcionki i zastosować do niej zmiany.

Jedną z witryn, z których możesz korzystać do przeglądania i eksperymentowania, są Czcionki zmienne. Służy również jako dobre demo, jeśli słyszysz ten termin po raz pierwszy. Czcionki zmienne umożliwiają użycie pojedynczego pliku i stosowanie właściwości, takich jak "font-weight" grubość "font-weight" lub "font-style" z pełną kontrolą grubości lub nachylenia…

Źródło: Wprowadzenie do czcionek zmiennych w Internecie

Dlaczego to jest fajne?

Cóż, jasne jest, że daje nam, programistom (i projektantom) niemal nieskończoną swobodę w wyglądzie czcionki. Czy kiedykolwiek myślałeś, że "font-weight: bold" to trochę za dużo, ale „normalne” jest za cienkie i nie masz nic pomiędzy?

Projektanci czcionek są tego doskonale świadomi i często podają średnie właściwości. Oznaczają je liczbami, takimi jak 100 (lekkie) lub 900 (bardzo grube) i czymkolwiek pomiędzy, jak 300, 400, 600, 700 itd. Ale może potrzebujesz 750 A to nie jest dostępne? Teraz, ze zmiennymi czcionkami, możesz!

Istnieje jeszcze jedna ogromna korzyść ze zmiennych czcionek. Jak zapewne wiesz, czcionki mają duży wpływ na czasy ładowania . Zarówno pod względem przepustowości, jak i renderowania na ekranie. Raczej standardowe żądanie może wyglądać następująco:

• headings-font-normal.woff2
• headings-font-bold.woff2
• body-normal.woff2
• body-italic.woff2
• body-bold.woff2

Przy całej tej dobroci możesz łatwo przekroczyć 500kb. W przypadku czcionki zmiennej potrzebujesz tylko jednej czcionki, a otrzymasz wszystkie inne odmiany. Jedna prośba.

Możesz dalej poczytać o czcionkach zmiennych: wprowadzenie do czcionek zmiennych w Internecie.

3. Więcej JavaScript!

To tytuł „przewracający oczami”, ale to prawda! Programiści front-end są nie tylko „programistami JS”, ​​ale także programistami „CSS / HTML”. I ten dział jest dla nich.

JavaScript to nie tylko trend, chociaż w zależności od tego, kogo zapytasz, mogą pojawić się bardzo gorące rozmowy z komentarzami typu „Tak, a obecnie nie możesz nawet otworzyć strony internetowej, jeśli nie masz włączonego JS” lub „Dzięki ładowanie suwaków i reklam o rozmiarze 5 MB na Twoją stronę z informacjami ”.

Ale bez względu na to, ile ma pozytywnych i negatywnych stron, jego zastosowanie rośnie. Zatem jaka technologia / podejście / narzędzia oparte na JS powinny być bardziej popularne?

• React / Vue jako front do systemów CMS, takich jak WordPress (bezgłowy)
• WebGL (Three.js) Grafika 3D, symulacje, interaktywność
• Treści VR i AR
• Bardziej zoptymalizowane przepływy pracy (webpack, gulp)
• Interfejsy API przeglądarki dla większej kontroli / funkcjonalności

I aby dodać kolejny wspaniały powód, aby zagłębić się w to głębiej - mając tylko JS, możesz technicznie zbudować projekt o dowolnej wielkości. Za pomocą samego JS możesz stworzyć reaktywny frontend, podłączyć go do magazynu danych, wykorzystać interfejsy API przeglądarki, aby uzyskać najlepsze wrażenia użytkownika, i wdrożyć projekt na żywo. Wszelkie regulacje ustawień można łatwo wykonać w konfiguracji.

4. Stylizacja oparta na narzędziach

Stylizacja oparta na narzędziach skupia się na stosowaniu stylów za pomocą predefiniowanych klas. To zwykle oznacza stylizowanie strony internetowej. Jednak tutaj jest trochę inaczej niż standardowe podejście. Widzisz, nie .card karty .card z cieniem, tłem itp. .shadow element HTML za pomocą .shadow i .bg-light oraz .br-5 (jak border-radius).

Jest to podejście, które działa zadziwiająco dobrze dla programistów JS, którzy po prostu muszą coś szybko wypisać i nie martwią się o CSS.

To wcale nie jest nowość, ale popularność Tailwind zmusiła programistów do ponownego rozważenia tego podejścia.

Strona główna Tailwind

Niektórzy mogą twierdzić, że jest to właściwie „pisanie CSS w HTML”, w którym tak naprawdę nie można zmienić komponentu z CSS i aktualizować go wszędzie. Technicznie rzecz biorąc, to prawda, ale, gdy składniki są pliki JS w sposób React / Vue aplikację na przykład wtedy robisz aktualizować je w jednym miejscu.

Może jedną z wad jest to, że musisz nauczyć się innego schematu. To nie jest tylko CSS, musisz zapamiętać właściwości, ponieważ niektóre elementy mogą wyglądać tak:

class="text-xl font-semibold text-white sm:text-2xl sm:leading-7 sm:text-black md:text-3xl"

Chociaż zawsze znajdą się ludzie, którzy go kochają (i nienawidzą), jest to świetne rozwiązanie wielu problemów. Poza tym nigdy nie dowiesz się, czy to działa, dopóki naprawdę tego nie spróbujesz.

5. Nowe funkcje CSS

Korzystanie z nowych funkcji CSS może być trendem samym w sobie. Chociaż nie jest to zmiana w konkretnej funkcji lub podejściu, stanowi wyzwanie dla dotychczasowego sposobu kodowania. Profesjonaliści? Rozwiązuje wiele problemów. Złe? Kompatybilność wsteczna.

Ale dzięki postępowi producentów przeglądarek w ciągu ostatniego roku lub dwóch (patrząc na ciebie, Microsoft), większość użytkowników na całym świecie może uzyskać dostęp do sieci skuteczniej niż kiedykolwiek wcześniej.

CSS Shadow Parts jako kolejna nadchodząca funkcja

Własności niestandardowe CSS są jedną z tych funkcji, ale mając około 5 lat (i dość poważną), ma swoją własną sekcję.

Tryby pisania

Chociaż nie jest używany zbyt często, ponieważ wielu programistów rzadko potrzebuje obsługi języków od prawej do lewej, istnieją tryby pisania. Są niezbędne w przypadku pulpitów nawigacyjnych / frameworków i witryn wielojęzycznych. Dzięki zwiększonemu wsparciu właściwości kierunkowego zapisu, takich jak na przykład początek marginesu w linii, nie musisz nadpisywać marginesu od lewej do prawej dla RTL.

Podsiatka CSS

Mieliśmy flex, a potem siatki. Teraz mamy siatki wewnątrz siatek . Subgrids to coś, co programiści oczekiwali, że będą dostępne po wyjęciu z pudełka, gdy Grid był po raz pierwszy obsługiwany. Cóż, teraz to mamy i jest tak fajne i przydatne, jak się wydaje. Wyróżnienie: luki Flexbox (ponieważ jest również częścią kratek). Robi to, co mówi. Niestety, nie jest jeszcze dobrze obsługiwany.

:is

Skrócony selektor, który najlepiej wyjaśnić fragmentem kodu pobranym z MDN:

 / * Zaznacza dowolny akapit w nagłówku, główny
lub element stopki, który jest najechany kursorem * /
: is (header, main, footer) p: hover {
kolor czerwony;
kursor: wskaźnik;
}

 / * Powyższe jest równoważne z następującym * /
nagłówek p: hover,
main p: hover,
footer p: hover {
kolor czerwony;
kursor: wskaźnik;
}