Używanie niestandardowych właściwości CSS dla lepszego UX
Opublikowany: 2019-11-29
Ostatnia aktualizacja - 8 lipca 2021
CSS3 przyniósł ze sobą jeden z największych dodatków, jakie specyfikacja CSS miała od dłuższego czasu. Wywołało to spore zamieszanie, ponieważ dotyczyło kluczowego problemu, który nękał programistów od lat i był głównym powodem, dla którego ludzie preferowali korzystanie z preprocesorów, takich jak SASS: możliwość korzystania ze zmiennych.
Po dodaniu zmiennych CSS duża część kodu, który trzeba było napisać, aby obsługiwać podstawowe funkcje, takie jak tworzenie motywów, nie jest już potrzebna. Jest to przydatna funkcja, której można użyć, aby uniknąć powtórzeń i umożliwić jeszcze więcej przypadków użycia, takich jak dynamiczne rozmiary czcionek i prostota, a także responsywność w aplikacji internetowej.
Pozbądź się bałaganu ze zmiennymi CSS
Wspólną cechą większości aplikacji są kolory marki, które muszą pozostać takie same i spójne w całej aplikacji. Nikt nie ma ochoty przechowywać w swoich głowach dziesięciu różnych wartości szesnastkowych na przyszłość, a przechodzenie między plikami w celu kopiowania wartości jest nie tylko kłopotliwe, ale także szkodliwe dla produktywności. Teraz wyobraź sobie, ile pracy trzeba wykonać, jeśli te kolory muszą się zmienić.
Korzystanie z preprocesorów CSS w WordPressie jest najczęstszym sposobem radzenia sobie z tym problemem. Oferują one obsługę całego szeregu funkcji, takich jak domieszki, zagnieżdżone deklaracje i oczywiście zmienne, które znacznie zwiększają produktywność.
Wszystko, co musisz zrobić, to napisać kod raz, a zostanie on skompilowany do CSS, do którego możesz swobodnie uzyskiwać dostęp i zmieniać, jeśli chcesz. Jednak ich największą wadą jest brak możliwości znalezienia i zmiany tych wartości w czasie wykonywania, np. dodania ciemnego motywu do aplikacji internetowej. Jest to poważny problem nie tylko dlatego, że SASS go nie obsługuje, ale prawdopodobnie nigdy nie będzie.
Dodanie niestandardowych wbudowanych zmiennych do otwieranych CSS miało duży wpływ na sposób pisania aplikacji, zwłaszcza w odniesieniu do motywów i responsywnego projektowania.
Jak wygląda obsługa zmiennych CSS przez przeglądarkę?
To najczęstsze pytanie, które pojawia się, gdy do dyskusji wprowadza się zmienne CSS. Według Caniuse wsparcie przeglądarki dla zmiennych CSS wynosi 93,16%. Jest obsługiwany we wszystkich nowoczesnych przeglądarkach (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ i Edge 16+). Jak zawsze, IE brakuje na wystawie i ma zaskakujący 6,47% udział w rynku. Dla biednych programistów, którzy muszą obsługiwać stare przeglądarki, nie martw się. Polyfills , a dokładniej ponyfills, są tutaj, aby uratować dzień.
Formalne wprowadzenie do zmiennych CSS
Jeśli znasz zmienne CSS, nie powinieneś mieć żadnych problemów ze zmiennymi CSS.
Zmienne SASS są deklarowane w następujący sposób:
<pre>
$facebook-niebieski: #4267B2;
</pre>
Podczas gdy zmienne CSS są deklarowane nieco inaczej:
<pre>
:źródło {
–marka-kolor: #4267B2;
}
pasek nawigacyjny marki {
tło: var(- -marka-kolor);
}
</pre>
Zwróć uwagę na kilka różnic między tymi dwiema składniami:
- Zmienne CSS muszą być poprzedzone dwoma myślnikami
- Zmienne CSS są zwykle deklarowane wewnątrz „:root”, ale w każdej chwili można je ponownie zadeklarować.
- Właściwości CSS są pobierane za pomocą funkcji „var()”.
Zmienne CSS oferują również dostęp do kilku dodatkowych funkcji.
Wartości kaskadowe
Właściwości CSS kaskadowo zgodnie z normalnymi regułami kaskadowymi. Innymi słowy, poniższe deklaracje nie mają wpływu na powyższe.
<pre>
:root { –kolor: żółty; }
div { –kolor: niebieski; }
#wielki { –kolor: zielony; }
* { kolor: var(–kolor); }
<p>Będę żółty, odziedziczony z korzenia!</p>
<div>Jestem niebieski!</div>
<div id=”świetny”>
Zadziałało! Jestem zielony!
<p>Też jestem zielony! Odziedziczone z góry!</p>
</div>
</pre>
Wartości zastępcze
Funkcja 'var()' przyjmuje kilka parametrów. Druga może być użyta jako wartość rezerwowa w przypadku, gdy niestandardowa właściwość CSS nie jest zdefiniowana. Jest to przydatna funkcja dla każdego, kto potrzebuje dostępu do zmiennych CSS za pośrednictwem JavaScript.
Jego podpis wygląda jak 'var(<nazwa-właściwości-własnej> [, <wartość-deklaracji> ]?)' i może być używany w następujący sposób
<pre>
pasek nawigacyjny marki {
tło: var(–marka-kolor, „#4267B2”);
}
</pre>
Jeśli nie zdefiniowano „–brand-color”, zamiast tego zostanie użyty „#4267B2”,
Dostęp przez JavaScript
Jednym z najlepszych powodów używania zmiennych CSS zamiast preprocesora jest możliwość dostępu do zmiennych niestandardowych za pomocą JavaScript. Zmienne preprocesora nie działają w przeglądarce. Są oceniane podczas kompilacji kodu. W ten sposób w przeglądarce nie można uzyskać dostępu do zmiennych preprocesora. Dzięki zmiennym CSS właściwość znajduje się w przeglądarce, umożliwiając edycję wartości w locie.
Rozważ pulpit, który pozwala użytkownikowi wybrać niestandardowe kolory za pomocą wyskakującego okienka lub czegoś podobnego.
<pre>
pasek nawigacyjny marki {
tło: var(–marka-kolor, „#4267B2”);
}
//Aby uzyskać aktualną wartość
getComputedStyle(document.documentElement).getPropertyValue('–brand-color');
//Aby ustawić wartość
document.documentElement.style.setProperty('–brand-color', 'red');
//Możesz nawet przypisać jedną właściwość CSS do drugiej
document.documentElement.style.setProperty('–brand-color','var(–secondary-color)');
</pre>
Globalny i lokalny zasięg
Jeśli znasz JavaScript (lub jakikolwiek inny język programowania), prawdopodobnie rozumiesz pojęcie określania zakresu. Zmienne można zwykle zdefiniować w taki sposób, że są dostępne tylko dla niektórych części kodu, zwanych zakresem lokalnym, lub udostępniane do użytku w całej aplikacji, zwane zakresem globalnym.
Podobnie działają zmienne CSS. Niektóre zmienne powinny mieć zasięg globalny w celu łatwiejszego odniesienia, np. kolory marki i odstępy w pionie. Zwykle pozostają one takie same w całej aplikacji, a w przypadku zmiany powinny być wszędzie odzwierciedlone. Z kolei zmienne, które mogą wymagać lokalnego określania zakresu, obejmują przyciski z różnymi dużymi i małymi wariantami. Jeśli chciałbyś zmienić dopełnienie na konkretnym przycisku, nie chciałbyś, aby zmiany przechodziły przez cały DOM. Trzeba to zmienić w jednym miejscu w aplikacji.
Domyślnie właściwości CSS mają zasięg lokalny. A jeśli pracowałeś z JavaScriptem lub jakimkolwiek innym językiem programowania, ustalanie zakresu ma swój własny zestaw problemów. Ponieważ mogą być dziedziczone, zachowują się również jak zmienne lokalne, co może mieć interesujące reperkusje, jeśli nie uważasz, jak są używane. Ponieważ wartości są kaskadowe, musisz uważać na sposób ich zmiany, zwłaszcza jeśli chodzi o JavaScript.
Korzystanie z właściwości niestandardowych z zapytaniami o media
Podobnie jak w przypadku preprocesorów, główną wadą korzystania z właściwości CSS jest to, że nie można ich używać w zapytaniach o media. Na przykład to nie zadziała.
<pre>
@media (min-szerokość: var(–punkt przerwania)){
wypełnienie: 1rem;
}
</pre>
Zamiast tego możesz przedefiniować właściwości niestandardowe w zapytaniach o media. Jeśli musisz zmienić rozmiar czcionki, gdy przeglądarka skaluje się w dół, masz szczęście. Dzięki zmiennym CSS możesz słuchać zmian przeglądarki za pomocą JavaScript i zmieniać rozmiary, które chcesz zmniejszyć tylko raz.
Jakie są praktyczne zastosowania niestandardowych właściwości CSS?
„Dzisiaj, oprócz korzystania z usług CDN w celu poprawy wydajności witryny , korzystanie z niestandardowych właściwości CSS jest jednym z najszybszych sposobów na zwiększenie produktywności” — radzi Colby Stuart, projektant stron internetowych zajmujących się pisaniem na papierze .
Oprócz dobrze podkreślonych korzyści zwiększa to produktywność, czy istnieją jakieś rzeczywiste przykłady tego, jak można je wykorzystać w aplikacji internetowej?
Dodawanie trybu ciemnego
Nowym trendem, który zawładnął rynkiem konsumenckim, jest zapotrzebowanie na tryb ciemny we wszystkich nowoczesnych programach – w tym w aplikacjach internetowych. Może to być trochę bardziej skomplikowane niż dodanie ciemnego koloru tła. Inne rzeczy, które należy wziąć pod uwagę, obejmują zmianę kolorów tekstu i wpływ na obrazy z białym tłem.
Wszystko to jest możliwe dzięki zadeklarowaniu zmiennych w całej aplikacji. Gdy użytkownik uruchomi przełącznik, aby wyłączyć motyw witryny, uruchom funkcję JavaScript, która zmienia zmienne CSS. Jeśli Twoja aplikacja internetowa jest bardziej skomplikowana, może to również obejmować zastąpienie obecnych obrazów obrazami przystosowanymi do trybu ciemnego.
Dodawanie trybu ciemnego na WordPress
Zmienne CSS wywarły tak duży wpływ, że dotarły do świata WordPressa. Dzisiaj tworzenie trybu ciemnego (lub, ogólniej, tworzenia motywów) aplikacji WordPress jest dość trywialne.
Większość programistów WordPress korzysta z narzędzia Customizer, aby zmienić wygląd i funkcjonalność swoich witryn. Zapewnia dostęp do takich rzeczy, jak kolory, czcionki, obrazy tła i tak dalej, uzyskując dostęp do CSS Twojej witryny. Główny problem polega na tym, że zmiana CSS w ten sposób wymusza na PHP renderowanie kodu HTML, co powoduje, że serwer ponownie wysyła cały plik do przeglądarki. Twoja aplikacja wysyła niepotrzebne żądanie, zużywając więcej danych niż to konieczne.
„Gdyby taka aplikacja była skierowana do konsumentów, prawdopodobnie otrzymalibyśmy wiele skarg. Jeśli nie masz dedykowanych plików CSS dla dowolnych zmiennych, które chcesz zmienić, sytuacja się znacznie pogarsza”. Helena Newman, starszy programista w firmie papersowl review i wydawca usług pisania CV, uważa, że jest to niezbędny dodatek do specyfikacji CSS.
Za pomocą zmiennych CSS wszystkie kolory są zmieniane w przeglądarce za pomocą JavaScript. Jedyne żądanie, które zostanie wysłane, to zachowanie aktualnego motywu na serwerze, jeśli jest to konieczne. I nawet wtedy taką zmienną można zapisać w przeglądarce.
Dodanie responsywnego projektu do strony internetowej
Przy większej liczbie telefonów komórkowych w Internecie niż kiedykolwiek wcześniej potrzeba responsywnych stron internetowych nigdy nie była bardziej widoczna. Najważniejszym aspektem responsywnego projektowania, który przyciąga programistów z nóg, jest zmiana rozmiarów czcionek. W przypadku aplikacji korzystającej z wielu czcionek lub czcionek dynamicznych śledzenie ich i zmienianie w różnych przeglądarkach jest udręką.
Zamiast tego niestandardowe właściwości CSS umożliwiają zdefiniowanie uniwersalnego rozmiaru czcionki, którego można używać i ponownie wykorzystywać w całej witrynie. W przypadku konieczności zmiany wystarczy wywołać funkcję JavaScript i wszystko działa.
Jeśli nie musisz obsługiwać starszych przeglądarek, niestandardowe zmienne CSS mogą być używane w połączeniu z (stosunkowo) nowym systemem CSS siatki, aby całkowicie wyeliminować potrzebę zapytań o media.
Z drugiej strony zapytania o media mogą być nadal konieczne, jeśli chcesz słuchać zmian szerokości w samym CSS. To jedyny sposób, w jaki możesz obsługiwać przeglądarki, które nie pozwalają na uruchamianie JavaScriptu.
Wniosek
Niestandardowe zmienne CSS to jedne z najważniejszych dodatków do specyfikacji od dłuższego czasu. Mogą uprościć proces projektowania, usuwając bałagan z plików CSS i eliminując potrzebę tworzenia niepotrzebnych dodatkowych żądań.