Lavorare con le variabili CSS |  HTMLGoodies.com
Tempo di lettura: 5 minuti

Le variabili CSS sono una moderna specifica CSS che è alla base di qualsiasi applicazione Web, poiché sono l’elemento costitutivo di base delle applicazioni basate sui dati. Attraverso le variabili, possiamo ridurre i tempi di codifica e manutenzione, consentendo agli sviluppatori web di sviluppare applicazioni software compatibili tra browser diversi. Utilizzando le variabili, i programmatori riducono le attività ripetitive e memorizzano i valori che possono essere utilizzati per tutta la durata dell’applicazione o dell’istanza del browser. In passato, questo era possibile solo con SaSS (fogli di stile semplicemente fantastici) o preprocessori LESS.

Cosa sono le variabili CSS?

Le variabili CSS sono proprietà personalizzate in cui gli sviluppatori web possono memorizzare valori, che, a loro volta, possono essere utilizzati ovunque sul tuo sito web. A differenza dei linguaggi di programmazione che supportano una semplice sintassi di inizializzazione e sostituzione, le variabili CSS devono essere definite in modo specifico se vengono inizializzate o sostituite, utilizzando sintassi diverse. L’inizializzazione di una variabile avviene anteponendo “” al nome della variabile. Ad esempio, la seguente sintassi inizializza la variabile Colore principale a grigio:

 --main-color: gray

Può essere utilizzato ovunque all’interno del codice con il valore specificato. Se vogliamo sostituire la proprietà della variabile, utilizziamo la proprietà CSS chiamata var():

color: var(- main-color)

Leggere: Utilizzo di Angular per leggere le variabili Sass

CSS var() Funzione

Il var() La funzione viene utilizzata per aggiungere valore a una variabile CSS. Le variabili CSS possono essere create globalmente o localmente e sono molto utili quando le usi come parte della progettazione di applicazioni web. Invece di cambiare sempre i colori, puoi inserire i valori dei colori nelle variabili e chiamarli quando necessario, ottimizzando notevolmente i tuoi contenuti.

Il CSS var() la sintassi della funzione è la seguente:

var(--name, value)

Ecco un esempio più concreto di come utilizzare il var() funzione in CSS e HTML:

<!DOCTYPE html>
<html>
<head>
     <style>
         .content,
         div {
             padding: 8px;
             display: auto;
             border: none;
            border-radius: 15px;
         }
         div {
             margin: 12px;
         }
         :root {
             --yellow: #ffc300;
             --purple: #c83349;
             --blue: #36486b;
             --white: #ffffff;
             --light-grey: #d3d3d3;
             --border-yellow: 1px solid var(--yellow);
             --border-purple: 1px solid var(--purple);
             --border-blue: 1px solid var(--blue);
         }
         .content {
             background-color: var(--light-grey);
         }
         .box-1 {
             border: var(--border-yellow);
             color: var(--yellow);
             background-color: var(--white);
             border-radius: 15px;
         }
         .box-2 {
             border: var(--border-purple);
             color: var(--purple);
             background-color: var(--white);
             border-radius: 15px;
         }
         .box-3 {
             border: var(--border-blue);
             color: var(--blue);
             background-color: var(--white);
             border-radius: 15px;
         }
         .box-1 button {
             background-color: var(--yellow);
             color: var(--white);
         }
         .box-2 button {
             background-color: var(--purple);
             color: var(--white);
         }
         .box-3 button {
             background-color: var(--blue);
             color: var(--white);
         }
         button {
             border-radius: 15px;
             border: none;
         }
     </style>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Var() function</title>
</head>
<body>
     <div class="content">
         <div class="box-1">
             <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut feugiat urna. Sed sit amet elementum tortor. Mauris sed nisi congue purus dignissim lobortis.</p>
             <button type="button">Click here!</button>
         </div>
         <div class="box-2">
             <p class="second">Nulla molestie posuere nisl, nec sodales felis lacinia eu. Praesent erat massa, scelerisque quis ex sit amet, rutrum varius enim.</p>
             <button type="button">Click here!</button>
         </div>
         <div class="box-3">
             <p class="third">Curabitur pretium tortor sollicitudin lectus vulputate interdum eget vitae quam. Morbi tincidunt eleifend porttitor.</p>
             <button type="button">Click here!</button>
         </div>
     </div>
</body>
</html>

Leggere: Verifica del vuoto delle variabili con JavaScript

Che cos’è l’ambito nelle variabili CSS?

Esistono due tipi di ambito che una variabile può avere nei CSS. Loro sono:

    • Ambito globale: Per creare una variabile di ambito globale, devi dichiararla in :selettore radice o il selettore corrispondente all’elemento radice del documento. Una volta dichiarata la variabile, è possibile accedervi dall’inizio alla fine del documento.
    • Ambito locale: per creare una variabile di ambito locale, è necessario dichiararla all’interno del selettore che la utilizzerà.

Una breve nota sull’ereditarietà delle variabili CSS: il valore di un elemento viene ereditato dal genitore o se non viene impostato alcun valore per una proprietà personalizzata di un particolare elemento.

Leggere: Una guida all’ambito delle variabili CSS

Come modificare i valori delle variabili con JavaScript

Uno dei punti più interessanti per gli sviluppatori web che usano JavaScript è che le variabili CSS possono essere manipolate e gestite attraverso questo linguaggio di scripting. Per utilizzare le variabili in CSS tramite JavaScript, il loro valore si ottiene in modo simile a come JavaScript gestisce altre proprietà. Diamo un’occhiata a un esempio che mostra come modificare le variabili CSS con JavaScript:

<!DOCTYPE html>
<html>
    <head>
        <style>
            .content,
            div {
                padding: 8px;
                display: auto;
                border: none;
                border-radius: 15px;
            }
            div {
                margin: 12px;
            }
            :root {
                --yellow: #ffc300;
                --purple: #c83349;
                --blue: #36486b;
                --white: #ffffff;
                --light-grey: #d3d3d3;
                --border-yellow: 1px solid var(--yellow);
                --border-purple: 1px solid var(--purple);
                --border-blue: 1px solid var(--blue);
            }
            .content {
                background-color: var(--light-grey);
            }
            .box-1 {
                border: var(--border-yellow);
                color: var(--yellow);
                background-color: var(--white);
                border-radius: 15px;
            }
            .box-2 {
                border: var(--border-purple);
                color: var(--purple);
                background-color: var(--white);
                border-radius: 15px;
            }
            .box-3 {
                border: var(--border-blue);
                color: var(--blue);
                background-color: var(--white);
                border-radius: 15px;
            }
            .box-1 button {
                background-color: var(--yellow);
                color: var(--white);
         }
            .box-2 button {
                background-color: var(--purple);
                color: var(--white);
            }
            .box-3 button {
                background-color: var(--blue);
                color: var(--white);
            }
            button {
                border-radius: 15px;
                border: none;
                font-color: white;
            }
        </style>
        <script>
            var rt = document.querySelector(":root");
            function change_color() {
                rt.style.setProperty("--light-grey", "lightblue");
            }
        </script>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Var() function</title>
    </head>
    <body>
        <h3>Change CSS variable through JavaScript</h3>
        <div class="content">
            <div class="box-1">
                <p class="first">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ut feugiat urna. Sed sit amet elementum tortor. Mauris sed nisi congue purus dignissim lobortis.</p>
                <button type="button">Click here!</button>
            </div>
            <div class="box-2">
                <p class="second">Nulla molestie posuere nisl, nec sodales felis lacinia eu. Praesent erat massa, scelerisque quis ex sit amet, rutrum varius enim.</p>
                <button type="button">Click here!</button>
            </div>
            <div class="box-3">
                <p class="third">Curabitur pretium tortor sollicitudin lectus vulputate interdum eget vitae quam. Morbi tincidunt eleifend porttitor.</p>
                <button type="button">Click here!</button>
            </div>
            <button type="button" onclick=" change_color()">Change variables with JavaScript</button>
        </div>
    </body>
</html>

Nell’esempio sopra, abbiamo memorizzato il file selettore: radice in una variabile, quindi ha creato una funzione denominata cambia colore() e, attraverso di esso, ha cambiato il colore di sfondo esistente con uno nuovo.

Leggere: Funzioni matematiche nei CSS

Come utilizzare le variabili CSS nelle query multimediali

Ora ti mostreremo come modificare il valore di una variabile CSS in una query multimediale. Media query si riferisce all’impostazione di regole di stile per dispositivi diversi, come tablet, telefoni cellulari e dimensioni dello schermo diverse:

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Variabiles CSS in media query</title>
     <style>
         :root {
             --light-grey: #d3d3d3;
             --white: #ffffff;
         }
         .box {
             --fontsize: 15px;
         }
         body {
             background-color: var(--light-grey);
         }
         .box {
             color: var(--light-grey);
             background-color: var(--white);
             padding: 25px;
             font-size: var(--fontsize);
         }
         @media screen and (min-width: 481px) {
             .box {
                 --fontsize: 35px;
             }
         }
     </style>
</head>
<body>
     <h3 style="color: white;">Using variables CSS in media queries</h3>
     <div class="box">
         <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus commodo, lorem vitae mollis tincidunt, turpis sapien vehicula metus, sit amet hendrerit dui neque sit amet velit. Mauris id purus quis nibh convallis
             bibendum. Sed in ex ac dolor ornare consequat ac at leo. Duis tempor leo eleifend aliquet dignissim. Sed imperdiet lectus ut ultricies pretium.
         </p>
     </div>
</body>
</html>

Nell’esempio sopra, se la larghezza del browser è inferiore a 481px, la dimensione del carattere diventa 15px. Quando la dimensione è maggiore di 481px, la dimensione del carattere cambia in 35px.

Considerazioni finali sulle variabili CSS

Le variabili CSS sono molto utili per gestire e organizzare grandi o piccole quantità di CSS, ridurre la duplicazione del codice, eliminare l’uso di preprocessori, avere la possibilità di poter essere dichiarati ovunque e prevenire errori. Offrono la possibilità di definire la stessa proprietà a diversi livelli di specificità, rendendo molto più facile il lavoro per gli sviluppatori Web e rendendo il codice più facile da leggere e comprendere.

Per saperne di più Tutorial di programmazione CSS e sviluppo web.

Source link

Di Simone Serra

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.