Utilizzo delle proprietà personalizzate CSS per una migliore UX

Ultimo aggiornamento - 8 luglio 2021

CSS3 ha portato con sé una delle più grandi aggiunte che le specifiche CSS hanno avuto da molto tempo. Ha generato molto scalpore perché ha affrontato un problema chiave che aveva afflitto gli sviluppatori per anni ed era la causa principale per cui le persone preferivano l'uso di preprocessori come SASS: la capacità di utilizzare le variabili.

Con l'aggiunta delle variabili CSS, gran parte del codice che doveva essere scritto per supportare funzionalità di base come i temi non è più necessario. È una funzione utile che può essere utilizzata per evitare ripetizioni e abilitare ancora più casi d'uso come dimensioni e semplicità dei caratteri dinamici oltre alla reattività in un'app Web.

Sbarazzarsi del disordine con le variabili CSS

Una caratteristica comune della maggior parte delle app sono i colori del marchio che devono rimanere gli stessi e coerenti in tutta l'app. Nessuno ha la mente di memorizzare dieci diversi valori esadecimali nella propria testa per riferimenti futuri e andare avanti e indietro tra i file per copiare i valori non è solo ingombrante, ma è anche dannoso per la produttività. Ora, immagina la quantità di lavoro che deve essere fatto se quei colori devono cambiare.

L'uso dei preprocessori CSS con WordPress è il modo più comune per affrontare il problema. Questi offrono supporto per tutta una serie di funzionalità come mixin, dichiarazioni nidificate e, naturalmente, variabili, che sono un importante impulso alla produttività.

Tutto quello che devi fare è scrivere il tuo codice una volta e viene compilato in CSS, a cui puoi accedere liberamente e modificarlo se lo desideri. Tuttavia, l'impossibilità di trovare e modificare questi valori in fase di esecuzione, ad esempio per aggiungere un tema scuro alla tua app Web, è il loro più grande svantaggio. È un grosso problema non solo perché SASS non lo supporta, ma probabilmente non lo farà mai.

L'aggiunta di variabili integrate personalizzate alle aperture CSS ha avuto un effetto importante sul modo in cui scriviamo le applicazioni, in particolare per quanto riguarda i temi e il design reattivo.

Com'è il supporto del browser per le variabili CSS?

Questa è la domanda più comune che si pone quando le variabili CSS vengono introdotte in una discussione. Secondo Caniuse , il supporto del browser per le variabili CSS è del 93,16%. È supportato in tutti i browser moderni (Chrome 49+, Firefox 31+, Safari 9.3+, Opera 36+ e Edge 16+). Come sempre, IE è assente dallo spettacolo e ha una sorprendente quota di mercato del 6,47% . Per i poveri sviluppatori che devono supportare i vecchi browser, non preoccuparti. Polyfills , o più correttamente, ponyfill, sono qui per salvare la situazione.

Un'introduzione formale alle variabili CSS

Se hai familiarità con le variabili CSS, non dovresti avere problemi con le variabili CSS.

Le variabili SASS sono dichiarate in questo modo:

<precedente>

$facebook-blu: #4267B2;

</pre>

Mentre le variabili CSS sono dichiarate in modo leggermente diverso:

<precedente>

:radice {

–colore del marchio: #4267B2;

}

.brand-navbar {

sfondo: var(- -brand-color);

}

</pre>

Notare alcune differenze tra le due sintassi:

• Le variabili CSS devono essere precedute da due trattini
• Le variabili CSS sono normalmente dichiarate all'interno di ':root', ma possono essere dichiarate nuovamente in qualsiasi momento.
• Le proprietà CSS vengono recuperate utilizzando la funzione 'var()'.

Le variabili CSS offrono anche l'accesso a diverse funzionalità aggiuntive.

Valori a cascata

Le proprietà CSS si sovrappongono seguendo le normali regole di cascata. In altre parole, le dichiarazioni successive non influiscono su quelle sopra.

<precedente>

:root { –colore: giallo; }

div { –colore: blu; }

#grande { –colore: verde; }

* { colore: var(–colore); }

<p>Sarò giallo, ereditato dalla radice!</p>

<div>Sono blu!</div>

<id div="ottimo">

Ha funzionato! sono verde!

<p>Anche io sono verde! Ereditato dall'alto!</p>

</div>

</pre>

Valori di riserva

La funzione 'var()' accetta diversi parametri. Il secondo può essere utilizzato come valore di fallback nel caso in cui la proprietà CSS personalizzata non sia definita. Questa è una funzione utile per chiunque abbia bisogno di accedere alle variabili CSS tramite JavaScript.

La sua firma è simile a 'var(<custom-property-name> [, <declaration-value> ]?)' e può essere utilizzata nel modo seguente

<precedente>

.brand-navbar {

sfondo: var(–brand-color, “#4267B2”);

}

</pre>

Se '–brand-color' non è definito, verrà utilizzato invece “#4267B2”,

Accesso tramite JavaScript

Uno dei migliori motivi per utilizzare le variabili CSS su un preprocessore è la possibilità di accedere a variabili personalizzate tramite JavaScript. Le variabili del preprocessore non risiedono nel browser. Vengono valutati durante la compilazione del codice. In questo modo, nel browser non è possibile accedere alle variabili del preprocessore. Con le variabili CSS, la proprietà risiede nel browser, garantendo la possibilità di modificare i valori al volo.

Considera una dashboard che consente all'utente di selezionare colori personalizzati tramite un popup o qualcosa di simile.

<precedente>

.brand-navbar {

sfondo: var(–brand-color, “#4267B2”);

}

//Per ottenere il valore corrente

getComputedStyle(document.documentElement).getPropertyValue('–brand-color');

//Per impostare il valore

document.documentElement.style.setProperty('–brand-color', 'red');

//Puoi anche assegnare una proprietà CSS a un'altra

document.documentElement.style.setProperty('–brand-color','var(–secondary-color)');

</pre>

Scopo globale e locale

Se hai familiarità con JavaScript (o qualsiasi linguaggio di programmazione, in realtà), probabilmente capisci il concetto di scoping. Le variabili possono normalmente essere definite in modo tale che siano accessibili solo a determinate parti del codice, chiamate ambito locale, o rese disponibili per l'uso in tutta l'app, chiamate ambito globale.

Le variabili CSS funzionano in modo simile. Alcune variabili dovrebbero avere un ambito globale per un riferimento più semplice, ad esempio i colori del marchio e la spaziatura verticale. Questi di solito rimangono gli stessi in tutta l'app e, in caso di modifica, dovrebbero riflettersi ovunque. Al contrario, le variabili che potrebbero richiedere l'ambito locale includono pulsanti con diverse varianti grandi e piccole. Se si desidera modificare il riempimento su un pulsante particolare, non si desidera che le modifiche attraversino l'intero DOM. Deve essere cambiato in un solo punto nell'app.

Per impostazione predefinita, le proprietà CSS hanno un ambito locale. E se hai lavorato con JavaScript o qualsiasi altro linguaggio di programmazione, l'ambito ha una serie di problemi. Dal momento che possono essere ereditati, agiscono anche come variabili locali, il che può avere alcune ripercussioni interessanti se non stai attento a come vengono utilizzate. Poiché i valori si sovrappongono, è necessario prestare attenzione a come li si modifica, soprattutto quando si tratta di JavaScript.

Utilizzo di proprietà personalizzate con media query

Proprio come con i preprocessori, uno dei principali svantaggi dell'utilizzo delle proprietà CSS è che non possono essere utilizzate all'interno delle query multimediali. Ad esempio, questo non funzionerà.

<precedente>

@media (larghezza minima: var(–punto di interruzione)){

imbottitura: 1rem;

}

</pre>

Quello che puoi fare invece è ridefinire le proprietà personalizzate all'interno delle media query. Se hai bisogno di cambiare la dimensione del carattere quando il browser si ridimensiona, sei fortunato. Con le variabili CSS, puoi ascoltare le modifiche del browser utilizzando JavaScript e modificare le dimensioni che devono essere ridimensionate solo una volta.

Quali sono alcune applicazioni pratiche delle proprietà CSS personalizzate?

"Oggi, oltre a utilizzare i servizi CDN per migliorare le prestazioni del sito , l'utilizzo di proprietà personalizzate CSS è uno dei modi più rapidi per migliorare la produttività", consiglia Colby Stuart, un web designer di servizi di scrittura su carta personalizzati .

Oltre ai vantaggi ben evidenziati, si aggiunge alla produttività, ci sono esempi reali di come possono essere utilizzati in un'app Web?

Aggiunta della modalità oscura

Una nuova tendenza che ha catturato il mercato consumer è la richiesta di modalità oscura in tutti i software moderni, comprese le app Web. Potrebbe essere un po' più complicato rispetto all'aggiunta di un colore di sfondo scuro. Altre cose che devono essere considerate includono come cambieranno i colori del testo e come saranno influenzate le immagini con sfondi bianchi.

Tutto ciò è reso possibile dalla prima dichiarazione delle variabili nell'app. Quando l'utente attiva l'interruttore per disattivare il tema del sito Web, attiva una funzione JavaScript che modifica le variabili CSS. Se la tua app Web è più complicata, ciò potrebbe includere anche la sostituzione delle immagini correnti con quelle compatibili con la modalità oscura.

Aggiunta della modalità oscura su WordPress

Le variabili CSS sono state così influenti da raggiungere il mondo di WordPress. Oggi, creare una modalità oscura (o, più in generale, a tema) un'app WordPress è abbastanza banale.

La maggior parte degli sviluppatori di WordPress si affida al Customizer per modificare l'aspetto e la funzionalità dei propri siti. Fornisce l'accesso a cose come colori, caratteri, immagini di sfondo e così via accedendo al CSS del tuo sito. Il problema principale è che, modificando il CSS in questo modo, si costringe PHP a eseguire nuovamente il rendering dell'HTML e, così facendo, il server invia nuovamente l' intero file al browser. La tua app effettua una richiesta non necessaria, consumando più dati del necessario.

“Se un'app del genere fosse rivolta ai consumatori, probabilmente riceveresti molti reclami. Se non disponi di file CSS dedicati per le variabili che desideri modificare, le cose peggiorano molto". Helena Newman, uno sviluppatore senior presso papersowl review ed editore per i servizi di scrittura di curriculum, lo considera un'aggiunta necessaria alle specifiche CSS.

Utilizzando le variabili CSS, tutti i colori vengono modificati nel browser utilizzando JavaScript. L'unica richiesta che verrà fatta è mantenere il tema corrente sul server, se necessario. E anche allora, una tale variabile può essere salvata nel browser.

Aggiunta di un design reattivo a un sito web

Con più telefoni cellulari su Internet che mai, la necessità di siti Web reattivi non è mai stata così evidente. L'aspetto più cruciale del design reattivo che sorprende gli sviluppatori è la modifica delle dimensioni dei caratteri. Per un'app che utilizza più caratteri o caratteri dinamici, tenerne traccia e modificarli per browser diversi è un lavoro ingrato.

Invece, le proprietà CSS personalizzate ti consentono di definire una dimensione del carattere universale che può essere utilizzata e riutilizzata in tutto il tuo sito web. Nel caso debba cambiare, tutto ciò che devi fare è chiamare una funzione JavaScript e tutto funziona.

Se non è necessario supportare browser antichi, le variabili CSS personalizzate possono essere utilizzate insieme al (relativamente) nuovo sistema CSS a griglia per eliminare del tutto la necessità di query multimediali.

Inoltre, le query multimediali potrebbero essere ancora necessarie se è necessario ascoltare le modifiche alla larghezza all'interno del CSS stesso. Questo è l'unico modo in cui puoi supportare i browser che non consentono l'esecuzione di JavaScript.

Conclusione

Le variabili CSS personalizzate sono alcune delle aggiunte più significative alle specifiche da un po' di tempo. Possono semplificare il processo di progettazione rimuovendo il disordine dai file CSS ed eliminando la necessità di effettuare richieste aggiuntive non necessarie.