Utilizarea proprietăților personalizate CSS pentru o UX mai bună
Publicat: 2019-11-29
Ultima actualizare - 8 iulie 2021
CSS3 a adus cu sine una dintre cele mai mari completări pe care specificațiile CSS le-au avut de mult timp. A generat o mulțime de zgomot, deoarece a abordat o problemă cheie care a afectat dezvoltatorii de ani de zile și a fost principala cauză pe care oamenii o aveau pentru a prefera utilizarea pre-procesoarelor precum SASS: capacitatea de a folosi variabile.
Odată cu adăugarea de variabile CSS, o mare parte din codul care trebuia scris pentru a suporta funcții de bază, cum ar fi tematica, nu mai este necesară. Este o caracteristică utilă care poate fi folosită pentru a evita repetarea și pentru a permite și mai multe cazuri de utilizare, cum ar fi dimensiunile dinamice ale fonturilor și simplitatea, în plus de receptivitate într-o aplicație web.
Scapa de dezordinea cu variabilele CSS
O caracteristică comună a majorității aplicațiilor este culorile mărcii care trebuie să rămână aceleași și consecvente în întreaga aplicație. Nimeni nu are mintea să stocheze zece valori hexadecimale diferite în capul său pentru referințe viitoare, iar trecerea înainte și înapoi între fișiere pentru a copia valori nu este doar greoaie, dar este și dăunătoare pentru productivitate. Acum, imaginați-vă cantitatea de muncă care trebuie făcută dacă acele culori trebuie să se schimbe.
Utilizarea preprocesoarelor CSS cu WordPress este cea mai comună modalitate de a rezolva problema. Acestea oferă suport pentru o serie întreagă de caracteristici, cum ar fi mixin-uri, declarații imbricate și, desigur, variabile, care sunt o creștere majoră a productivității.
Tot ce trebuie să faceți este să vă scrieți codul o dată și acesta este compilat în CSS, pe care îl puteți accesa liber și îl puteți modifica dacă doriți. Cu toate acestea, incapacitatea de a găsi și modifica aceste valori în timpul execuției, de a adăuga, de exemplu, o temă întunecată aplicației dvs. web este cel mai mare dezavantaj al lor. Este o problemă majoră nu numai pentru că SASS nu o acceptă, dar probabil că nu o va face niciodată.
Adăugarea de variabile personalizate încorporate la deschiderile CSS a avut un efect major asupra modului în care scriem aplicații, în special în ceea ce privește tematica și designul receptiv.
Cum este suportul browserului pentru variabilele CSS?
Aceasta este cea mai frecventă întrebare care apare atunci când variabilele CSS sunt aduse într-o discuție. Potrivit Caniuse , suportul browserului pentru variabilele CSS este de 93,16%. Este acceptat în toate browserele moderne (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ și Edge 16+). Ca întotdeauna, IE lipsește din emisiune și are o cotă de piață surprinzătoare de 6,47% . Pentru dezvoltatorii săraci care trebuie să accepte browsere vechi, nu vă îngrijorați. Polyfills , sau mai corect, ponyfills, sunt aici pentru a salva ziua.
O introducere formală în variabilele CSS
Dacă sunteți familiarizat cu variabilele CSS, nu ar trebui să aveți probleme cu variabilele CSS.
Variabilele SASS sunt declarate astfel:
<pre>
$facebook-albastru: #4267B2;
</pre>
În timp ce variabilele CSS sunt declarate puțin diferit:
<pre>
:rădăcină {
–culoarea mărcii: #4267B2;
}
.brand-navbar {
fundal: var(- -brand-color);
}
</pre>
Observați câteva diferențe între cele două sintaxe:
- Variabilele CSS trebuie să fie precedate de două liniuțe
- Variabilele CSS sunt în mod normal declarate în interiorul „:root”, dar pot fi redeclarate oricând.
- Proprietățile CSS sunt preluate folosind funcția „var()”.
Variabilele CSS oferă, de asemenea, acces la câteva funcții suplimentare.
Valori în cascadă
Proprietățile CSS sunt în cascadă urmând regulile normale de cascadă. Cu alte cuvinte, redeclarările de mai jos nu le afectează pe cele de mai sus.
<pre>
:root { –culoare: galben; }
div { –culoare: albastru; }
#mare { –culoare: verde; }
* { culoare: var(–culoare); }
<p>Voi fi galben, moștenit de la rădăcină!</p>
<div>Sunt albastru!</div>
<div id="superb”>
A mers! Sunt verde!
<p>Si eu sunt verde! Moștenit de sus!</p>
</div>
</pre>
Valori de rezervă
Funcția „var()” acceptă mai mulți parametri. Al doilea poate fi folosit ca valoare alternativă în cazul în care proprietatea CSS personalizată nu este definită. Aceasta este o caracteristică utilă pentru oricine trebuie să acceseze variabilele CSS prin JavaScript.
Semnătura sa arată ca „var(<custom-property-name> [, <declaration-value> ]?)” și poate fi utilizată în felul următor
<pre>
.brand-navbar {
fundal: var(–brand-color, „#4267B2”);
}
</pre>
Dacă „–brand-color” nu este definit, „#4267B2” va fi folosit în schimb,
Acces prin JavaScript
Unul dintre cele mai bune motive pentru a utiliza variabile CSS peste un preprocesor este capacitatea de a accesa variabile personalizate prin JavaScript. Variabilele de preprocesor nu locuiesc în browser. Ele sunt evaluate atunci când codul este compilat. În acest fel, variabilele preprocesorului nu pot fi accesate în browser. Cu variabilele CSS, proprietatea se află în browser, oferind posibilitatea de a edita valorile din mers.
Luați în considerare un tablou de bord care permite utilizatorului să selecteze culori personalizate printr-o fereastră pop-up sau ceva similar.
<pre>
.brand-navbar {
fundal: var(–brand-color, „#4267B2”);
}
//Pentru a obține valoarea curentă
getComputedStyle(document.documentElement).getPropertyValue('–brand-color');
//Pentru a seta valoarea
document.documentElement.style.setProperty('–brand-color', 'red');
//Puteți chiar să atribuiți o proprietate CSS alteia
document.documentElement.style.setProperty('–brand-color','var(–secondary-color)');
</pre>
Scoping global și local
Dacă sunteți familiarizat cu JavaScript (sau orice limbaj de programare, într-adevăr), atunci probabil că înțelegeți conceptul de scoping. În mod normal, variabilele pot fi definite astfel încât să fie accesibile doar anumitor părți ale codului, numite domeniul local, sau puse la dispoziție pentru utilizare în întreaga aplicație, numită domeniul global.
Variabilele CSS funcționează în mod similar. Unele variabile ar trebui să fie analizate la nivel global pentru o referire mai ușoară, de exemplu, culorile mărcii și spațierea verticală. Acestea rămân, de obicei, aceleași în întreaga aplicație și, în cazul unei schimbări, ar trebui să se reflecte peste tot. În schimb, variabilele care pot necesita definirea locală includ butoane cu diferite variante mari și mici. Dacă doriți să schimbați umplutura pe un anumit buton, nu ați dori ca modificările să traverseze întregul DOM. Trebuie schimbat doar într-un singur punct din aplicație.
În mod implicit, proprietățile CSS sunt acoperite local. Și dacă ați lucrat fie cu JavaScript, fie cu orice alt limbaj de programare, domeniul de aplicare are propriul set de probleme. Deoarece pot fi moștenite, ele acționează și ca variabile locale, ceea ce poate avea repercusiuni interesante dacă nu ești atent la modul în care sunt utilizate. Deoarece valorile sunt în cascadă, trebuie să fiți atenți la modul în care le schimbați, mai ales când este vorba de JavaScript.
Utilizarea proprietăților personalizate cu interogări media
La fel ca și în cazul preprocesoarelor, un dezavantaj major al utilizării proprietăților CSS este că acestea nu pot fi utilizate în interogările media. De exemplu, acest lucru nu va funcționa.
<pre>
@media (lățime minimă: var(–punct de întrerupere)){
captuseala: 1rem;
}
</pre>
Ceea ce puteți face în schimb este să redefiniți proprietățile personalizate în interogările media. Dacă trebuie să modificați dimensiunea fontului atunci când browserul scade, aveți noroc. Cu variabilele CSS, puteți asculta modificările browserului folosind JavaScript și puteți modifica orice dimensiune trebuie redusă o singură dată.
Care sunt câteva aplicații practice ale proprietăților CSS personalizate?
„Astăzi, pe lângă utilizarea serviciilor CDN pentru a îmbunătăți performanța site-ului , folosirea proprietăților personalizate CSS este una dintre cele mai rapide modalități de a îmbunătăți productivitatea”, sfătuiește Colby Stuart, un designer web de servicii de scriere pe hârtie personalizată .
În afară de beneficiile bine evidențiate, se adaugă la productivitate, există exemple reale despre cum pot fi utilizate într-o aplicație web?
Adăugarea modului întunecat
O nouă tendință care a capturat piața de consum este cererea pentru modul întunecat în toate software-urile moderne, care includ aplicațiile web. Poate fi puțin mai complicat decât adăugarea unei culori de fundal închise. Alte lucruri care trebuie luate în considerare includ modul în care se vor schimba culorile textului și modul în care vor fi afectate imaginile cu fundal alb.
Toate acestea sunt posibile prin declararea mai întâi a variabilelor în aplicația dvs. Când utilizatorul declanșează comutatorul pentru a întuneca tema site-ului, declanșează o funcție JavaScript care modifică variabilele CSS. Dacă aplicația dvs. web este mai complicată, acest lucru ar putea include și înlocuirea imaginilor curente cu imagini prietenoase cu modul întunecat.
Adăugarea modului întunecat pe WordPress
Variabilele CSS au fost atât de influente încât au ajuns în lumea WordPress. Astăzi, crearea unui mod întunecat (sau, mai general, tematică) a unei aplicații WordPress este destul de banală.
Majoritatea dezvoltatorilor WordPress se bazează pe Customizer pentru a schimba aspectul și funcționalitatea site-urilor lor. Oferă acces la lucruri precum culori, fonturi, imagini de fundal și așa mai departe, accesând CSS-ul site-ului dvs. Problema majoră cu aceasta este că, prin schimbarea CSS-ului în acest fel, forțează PHP să redă din nou HTML-ul și, în acest fel, determină serverul să retrimite întregul fișier către browser. Aplicația dvs. face o solicitare inutilă, consumând mai multe date decât este necesar.
„Dacă o astfel de aplicație ar fi adresată consumatorilor, probabil că ați primi o mulțime de plângeri. Dacă nu aveți fișiere CSS dedicate pentru orice variabile pe care doriți să le schimbați, lucrurile se înrăutățesc mult.” Helena Newman, dezvoltator senior la papersowl review și editor pentru serviciile de scriere CV-ul consideră că este o completare necesară la specificațiile CSS.
Folosind variabile CSS, toate culorile sunt modificate în browser folosind JavaScript. Singura cerere care va fi făcută este păstrarea temei curente pe server dacă este necesar. Și chiar și atunci, o astfel de variabilă poate fi salvată în browser.
Adăugarea de design responsive la un site web
Cu mai multe telefoane mobile pe internet decât oricând înainte, nevoia de site-uri web receptive nu a fost niciodată mai evidentă. Cel mai important aspect al designului responsive, care îi prinde pe dezvoltatori de la cap este schimbarea dimensiunilor fonturilor. Pentru o aplicație care utilizează mai multe fonturi sau fonturi dinamice, ținerea evidenței acestora și schimbarea lor pentru diferite browsere este o corvoadă.
În schimb, proprietățile CSS personalizate vă permit să definiți o dimensiune universală a fontului care poate fi folosită și reutilizată pe site-ul dvs. În cazul în care trebuie să se schimbe, tot ce trebuie să faceți este să apelați o funcție JavaScript și totul funcționează.
Dacă nu aveți nevoie să acceptați browsere vechi, variabilele CSS personalizate pot fi utilizate împreună cu noul sistem CSS de grilă (relativ) pentru a elimina cu totul nevoia de interogări media.
Apoi, din nou, interogările media pot fi în continuare necesare dacă trebuie să ascultați modificările de lățime în cadrul CSS-ului însuși. Acesta este singurul mod în care puteți accepta browsere care nu permit rularea JavaScript.
Concluzie
Variabilele CSS personalizate sunt unele dintre cele mai semnificative completări la specificații de mai mult timp. Ele vă pot simplifica procesul de proiectare eliminând dezordinea din fișierele dvs. CSS și eliminând nevoia de a face orice solicitări suplimentare inutile.