Cosa è calc () in CSS (e come usarlo)

Alcune funzioni CSS sono potenti ma raramente utilizzate, non perché sono difficili, ma perché sono disponibili alternative più facili. Calc () è uno di questi. È super utile ma spesso oscurato da un morsetto ().

Calc () risolve alcuni problemi di layout che il clamp () non può toccare. È ottimo per le altezze della sezione di messa a punto, che si regolano per le intestazioni appiccicose e la miscelazione di unità flessibili e fisse in una riga di codice. Ed ecco la buona notizia: puoi usare calc () senza scrivere una singola riga di codice.

In Divi 5, è costruito direttamente nell'interfaccia, quindi digita il tuo valore e Divi gestisce il resto. Vuoi vedere come? In questo post, imparerai come funziona Calc (), dove aiuta e come usarlo all'interno di Divi 5.

Divi 5 è pronto per essere utilizzato su nuovi siti Web , ma attendere un po 'prima di migrare quelli esistenti.

Cos'è calc () in CSS?

Calc () è una funzione CSS nativa che consente di eseguire una matematica semplice come l'aggiunta, la sottrazione, la moltiplicazione e la divisione (con alcune limitazioni a seconda del contesto) direttamente all'interno delle regole di stile. È ottimo per le dimensioni e la spaziatura di modifiche, specialmente quando si mescolano valori fissi e flessibili per ottenere layout più fluidi senza codificare tutto.

Capiamolo con un esempio. Supponiamo che tu voglia che un elemento prenda l'80% dello schermo ma lasciassi comunque spazio per l'imbottitura. Puoi scrivere:

width: calc(80% - 40px);

Questo dice al browser di calcolare la larghezza dinamicamente sottraendo 40 pixel dall'80 percento del suo contenitore. Se combinato con tecniche di centraggio come i margini automatici, lo spazio rimanente dalla sottrazione viene distribuito uniformemente. Il valore si regola automaticamente in base alla dimensione dello schermo.

A prima vista, potrebbe non sembrare rivoluzionario. Ma Calc () è l'ideale per risolvere i problemi di layout quotidiani, come la spaziatura rotta su piccoli schermi, elementi sovrapposti a testate fisse e sezioni fuori centro. Invece di lunghe query multimediali, calc () in una riga è spesso sufficiente. Ecco alcuni casi d'uso a una linea comuni:

• Pagging: calc (5VW + 20px); Mantiene il fluido di imbottitura. Anche su piccoli schermi, non scende mai al di sotto di 20 pixel.
• Altezza: calc (100vh - 80px); Mantiene il contenuto visibile quando si dispone di un'intestazione fissa. Si regola automaticamente in base all'altezza dello schermo.
• larghezza: calc (60% - 1rem); dà il controllo flessibile sulla larghezza della sezione mantenendo una spaziatura costante. È possibile regolare i margini circostanti usando valori come margine-sinistra: calc (40% + 0,5REM); per centrare visivamente o allineare l'elemento all'interno del suo contenitore.

In breve, calc () rimuove la necessità di scrivere CSS extra per ogni punto di interruzione. Invece di riscrivere gli stili ripetutamente, è possibile creare la logica direttamente nei tuoi valori e lasciare che il layout risponda automaticamente. Non stai solo definendo le dimensioni, ma decidi anche come gli elementi dovrebbero comportarsi.

Capire come funziona calc ()

La sintassi di base di calc () sembra questo:

 calc(value operator value) 

Qui, è possibile utilizzare qualsiasi lunghezza o unità valida in valore e l'operatore può essere +, -, *o /.

Ad esempio, se si desidera ridurre la larghezza di un elemento di 40 pixel, scriverai larghezza: calc (100% - 40px);. Notare l'uso di %? Questo è ciò che rende la larghezza flessibile.

Se usassimo CALC (100px - 40px), il risultato sarebbe sempre 60 pixel, cioè statico. Ma usando una percentuale, lasciamo che il browser calcola la dimensione in base allo schermo o all'elemento genitore. Si regola automaticamente man mano che il layout cambia.

Suggerimento rapido (e anche una regola comune): aggiungere sempre spazi tra valori e operatori per far funzionare correttamente calc (). Senza spazi, il CSS non funzionerà. Di seguito, vedrai che la larghezza del contenitore viene ripristinato a impostazione predefinita poiché la funzione calc () senza spazi non è più valida:

Usando più unità

Hai appena visto come arriva il vero vantaggio di Calc () quando inizi a combinare diverse unità relative. Ad esempio, le percentuali con pixel o larghezze di viewport con REMS, perché è quando il layout inizia a rispondere in base alle dimensioni dello schermo.

Per renderlo più chiaro, ecco alcune combo utili per cercare di vedere come funzionano in layout reali.

Puoi anche combinare più valori e unità in una riga, il che rende più accurati i layout reattivi. Questo esempio di seguito utilizza %, PX e REM per mescolare il ridimensionamento del layout, la spaziatura fissa e la tipografia:

 width: calc(50% - 40px + 1rem); 

• 50% scale con il contenitore
• 40px sottrae lo spazio fisso come una barra laterale
• 1rem aggiunge una spaziatura in base alla dimensione del carattere

Calc () di nidificazione

Puoi anche nidificare un calc () all'interno di un altro per costruire una logica di layout più complessa. È un ottimo modo per rispecchiare il modo in cui pensi al design (strato per livello) con chiare relazioni tra i valori. Ad esempio, larghezza: calc (200px - calc (100px + 2rem));

Qui, il browser calcola per la prima volta 100px + 2rem , che potrebbe rappresentare imbottitura, margini o dimensioni di un altro elemento. Quindi sottrae quel totale da 200 px per ottenere la larghezza finale. La larghezza rimane relativa a causa di REM.

Questo tipo di nidificazione è utile quando il layout dipende da più di un fattore. Invece di fare i matematica da soli o di codificare i valori fissi, puoi scrivere la relazione direttamente nel CSS. Mantiene il tuo design flessibile e più facile da aggiornare in seguito.

Non avrai bisogno di calcoli nidificati () spesso, ma può aiutare quando si tratta di spaziatura a strati o elementi sovrapposti. Detto questo, potresti voler iniziare prima con semplici calcoli, poiché possono diventare schiaccianti. L'aggiunta di complessità si sentirà naturale una volta che ti senti a tuo agio con il modo in cui funziona.

Perché usare calc () quando hai un clamp ()?

Se usi clamp () più spesso, potresti avere questa domanda. Per ottenere una risposta chiara, sarebbe una buona idea capire la differenza tra i due:

Clamp () è moderno, quindi essere entusiasti di usarlo per la costruzione di design fluidi senza fare affidamento sulle query multimediali è facile. Ma anche se il clamp () sembra più intelligente, ci sono molte situazioni in cui Calc () è più rilevante, come le seguenti:

• Sottraendo i valori fissi da layout flessibili: Utilizzo dell'altezza: CALC (100VH - 80px) si assicura che una sezione riempia lo schermo meno l'altezza di un'intestazione fissa, quindi gli elementi non si sovrappongono. Clamp () non può farlo perché non supporta la sottrazione.
• Elementi offset con precisione: un valore come margine-sinistra: calc (50%-200px); Sposta un elemento rispetto al suo contenitore mantenendolo visivamente bilanciato. Clamp () non può eseguire questo tipo di posizionamento relazionale.
• Allineare le sezioni fianco a fianco: ti aiuta a creare layout reattivi in ​​due colonne in cui una colonna con larghezza: calc (60%-2Rem); occupa il 60% dello spazio meno un divario costante. Clamp () è ideale per ridimensionare un singolo valore, mentre Calc () eccelle quando sono necessarie relazioni tra più valori.

Tutto sommato, Clamp () è ottimo quando si definisce come un singolo valore dovrebbe ridimensionare tra le dimensioni dello schermo. Ma Calc () è ciò di cui hai bisogno quando il layout dipende da più di una cosa contemporaneamente, come nei casi sopra.

Combinando calc () + morsetto ()

Mentre Calc () e Clamp () sono potenti da soli, perché usarne uno quando puoi combinare entrambi? È possibile nidificare calc () all'interno del coccole () per creare design fluidi con logica integrata, come combinare il ridimensionamento flessibile con un controllo preciso.

Ad esempio, imbottitura: morsetto (1rem, calc (2VW + 10px), 3Rem); Crea spaziatura che si ridimensiona tra 1Rem e 3REM, ma il valore "preferito" si basa su una formula calc () che mescola la larghezza della vista e un valore fisso.

Questo ti dà un controllo reattivo, logico e preciso sul tuo design. Una volta che si impara quando utilizzare calc () e plear () individualmente e quando combinarli, è possibile controllare completamente il layout senza fare affidamento su punti di interruzione personalizzati

Utilizzando le variabili CSS con calc ()

Puoi anche estendere la flessibilità di Calc () con le variabili CSS. Combina le variabili con altre unità, fai matematica e crea la logica di layout attorno ai valori riutilizzabili. Ad esempio, se si definisce: root {–Gap: 40px;}, quindi usando l'imbottitura: calc (var (–Gap) + 1Rem); Ti aiuta a impostare l'imbottitura reattiva in base ai valori della radice.

NOTA: durante l'utilizzo delle variabili CSS all'interno di calc (), avvolgi la variabile attorno a var (). Guarda come ho fatto sopra.

Ciò consente di creare un sito Web completo utilizzando un sistema di progettazione coerente (le variabili CSS) pur avendo un controllo preciso con calc (). E se vuoi apportare modifiche (globali), come la regolazione della spaziatura attraverso il layout, puoi farlo modificando i valori delle radici.

Non è così facile con il morsetto (). Mentre Clamp () supporta le variabili CSS, ogni valore deve risolvere un'unità completa e valida. Cosa intendo con questo?

Una funzione come il morsetto (1rem, var (-fluid-size), 3Rem) funziona solo se –fluid si risolve in qualcosa come 4vw. E se devi fare matematica con una variabile, come l'aggiunta o la sottrazione da essa, è necessario avvolgere quella parte in calc (). Queste cose minori rendono calc () essenziali quando si creano valori dinamici con variabili.

Calc () in Divi 5

Sia Calc () che Clamp () sono funzioni CSS avanzate che ti danno un forte controllo su layout, spaziatura e reattività, ma solo se ti senti a tuo agio nel scrivere codice. Ciò limita il loro uso per gli sviluppatori o i professionisti web. Ma che dire di coloro che preferiscono i flussi di lavoro visivi e vogliono ancora usare calc () e clamp () nei loro progetti? Puoi farlo?

Sì, puoi. All'interno di Divi 5, sia calc () che clamp () sono disponibili come unità avanzate e non devi scrivere una singola riga di codice per lavorare con loro.

Iscriviti al nostro canale YouTube

Tutto quello che fai è inserire calc () direttamente all'interno di qualsiasi campo di input numerico, e basta.

Il Builder Divi agisce all'istante. Una volta inserito il valore calc (), ricevi un feedback in tempo reale durante la progettazione. Non è necessario passare tra il costruttore, i DevTools o le anteprime e non indovinare come apparirà.

Divi 5 semplifica l'edificio più intelligente e più flessibili senza toccare il codice. Puoi anche combinare calc () con le variabili di progettazione di Divi o le tue variabili CSS per creare layout dinamici riutilizzabili. Ti mostrerò come farlo nella prossima sezione.

A proposito, sapevi che Divi 5 supporta anche tutte le funzioni CSS in unità avanzate? Potresti voler conoscere anche loro

Impara tutto sulle unità avanzate di Divi 5

Come Divi 5 rende l'utilizzo di calc () senza sforzo

Hai appena visto che Divi 5 rende l'utilizzo di Calc () nei tuoi progetti senza sforzo mentre ti dà anteprime istantanee mentre lavori. Ma c'è di più. Divi fornisce non solo una soluzione alternativa, ma un modo completamente integrato e senza codice per creare layout reattivi basati su logica usando gli stessi strumenti su cui gli sviluppatori si affidano, senza scrivere una linea di codice.

Ecco come ti aiuta a usare calc () eroicamente mentre lavori in silenzio nell'ombra:

1. Applica calc () in qualsiasi campo numerico

Solo perché non stai codificando non significa che sei limitato. In Divi 5, Calc () funziona ovunque sia accettato un valore numerico (pensa: larghezza, altezza, imbottitura, margine, gap, dimensioni del carattere, ovunque). Se il campo accetta un numero, supporta calc ().

E l'applicazione di calc () è relativamente semplice. Tutto quello che devi fare è scegliere Calc () dalle altre unità avanzate e inserire la formula.

Ciò significa che puoi gestire visivamente la matematica di layout senza lasciare il costruttore. Che si tratti di sottrarre l'altezza di un'intestazione fissa, aggiungere una spaziatura flessibile alle dimensioni dei caratteri o di miscelare le unità per una migliore reattività, Divi ti consente di fare tutto direttamente all'interno dei campi di progettazione.

Basta digitare la formula e gli aggiornamenti dei risultati non sono stati immediatamente: nessun pannello di codice, nessuna commutazione di scheda e nessun secondo indovina. È pieno controllo, costruito direttamente nel tuo flusso di lavoro.

2. Ottieni anteprime istantanei dal vivo

Una delle parti migliori sull'uso di Calc () in Divi 5 è che puoi vedere cosa stai facendo in tempo reale. Non devi indovinare come appariranno la spaziatura o l'allineamento. Quando si inserisce la tua formula calc (), il costruttore si aggiorna all'istante.

Come puoi vedere, l'imbottitura è cambiata immediatamente quando ho inserito i valori calc (). Ho anche cambiato tra diversi punti di interruzione per mostrarti come l'imbottitura si regola in base alle dimensioni dello schermo.

Qualunque modifica tu apporti, vedrai il risultato mentre digiti. Questo feedback immediato ti aiuta a capire come il calcolo influisce sul layout e ti consente di modificare i valori rapidamente senza cambiare le schede.

3. Crea flussi di lavoro avanzati con calc ()

L'uso di calc () in Divi 5 non è potente perché ora puoi aggiungere o sottrarre valori. La vera forza è lo sblocco di flussi di lavoro più intelligenti. Divi ti consente di combinare calc () con strumenti avanzati come clamp (), variabili CSS, variabili di design e preset del gruppo di opzioni, tutti all'interno di un costruttore visivo.

Non sei limitato a semplici regolazioni una tantum. Utilizzando Divi, è possibile creare sistemi di layout che rispondono fluidamente alle dimensioni dello schermo, seguire regole di spaziatura coerenti e aggiornare automaticamente quando i token di progettazione cambiano. Vediamo come:

1. Estendi calc () con variabili CSS

Divi 5 supporta le variabili CSS direttamente all'interno dei campi di progettazione, il che significa che è possibile definire visivamente valori riutilizzabili e calcolare da essi. Diciamo che voglio usare un'imbottitura fissa su tutte le sezioni della mia pagina, quindi la salverò come variabile CSS:

:root {
--section-padding: calc(4rem + 2vw);
}

Per fare ciò, vado alle impostazioni della pagina> Avanzate> CSS personalizzato e aggiungi i miei valori di radice qui:

Ora, invece di entrare nella formula completa ovunque, puoi semplicemente usare var (-sezione-sezione) in qualsiasi campo di imbottitura all'interno di Divi. Gli aggiornamenti dei risultati vivono e se cambio il valore di root in seguito, l'intero layout riflette immediatamente quel cambiamento.

Si noti che l'unità avanzata aggiornata mostra calc var, il che significa che la variabile CSS è stata inserita utilizzando la funzione var () all'interno di una formula calc ().

L'uso delle variabili CSS in Divi è sorprendentemente semplice. Puoi semplicemente definirli sulla pagina stessa senza toccare il tuo foglio di stile. Ciò aiuta a mantenere un quadro di progettazione coerente, testare nuovi valori e creare regole di layout reattive.

2. Usa calc () nel framework di progettazione

Divi 5 consente di salvare i valori calc () come variabili di progettazione, rendendo facile riutilizzare una logica di layout su tutto il tuo sito Web. Supponiamo che tu voglia che le tue sezioni di servizio riempiranno sempre lo schermo meno l'altezza di un'intestazione fissa. Quindi, è possibile creare una variabile numerica e nominare l' altezza della sezione con valore calc (120vh - 30px).

Qui, 30px è l'altezza dell'intestazione fissa.

Ora, per applicare la variabile salvata, vai alle impostazioni di progettazione della sezione e passa a l' altezza per individuare l'icona del campo dinamico. Fai clic su di esso e la variabile salvata verrà visualizzata. Fare clic sull'altezza della sezione per applicarlo.

Questo approccio ti dà il controllo completo del layout mantenendo il tuo design coerente. Non sei bloccato in preset o valori statici. Invece, stai costruendo una logica che si adatta attraverso pagine, modelli e dimensioni dello schermo tutte visivamente.

Le variabili di design sbloccano grandi possibilità. Ad esempio, puoi creare visivamente il tuo framework di progettazione e utilizzarlo su tutte le pagine del tuo sito Web per mantenere coerenti le regole di progettazione. Ti consigliamo anche di creare sistemi di tipografia e spaziatura e dimensionamento prima di progettare qualsiasi pagina.

3. Crea e salva i preset del gruppo di opzioni

Una volta che il layout utilizza i valori calc () in modo coerente, Divi 5 semplifica il salvataggio di tale logica per il riutilizzo. È possibile archiviare l'intera configurazione di stile (o singole impostazioni come imbottitura, lacune, margini e larghezze) come preset del gruppo di opzioni. Ciò significa invece di applicare le formule calc () ripetutamente, si seleziona semplicemente un preimpostazione e la matematica di layout viene applicata all'istante.

Ad esempio, se hai utilizzato l'imbottitura: CALC (4REM + 2VW) in più sezioni, non è necessario revisionarlo ovunque. Salvalo come preimpostazione:

Ora, applica il tuo preset salvato dove necessario. Tutto si aggiorna visivamente, in modo da poter vedere l'effetto in diretta immediata.

Ancora meglio, se hai utilizzato variabili di progettazione in quei preset, puoi aggiornare i valori a livello globale più tardi. Cambia la variabile una volta e ogni preimpostazione che la utilizza rifletterà l'aggiornamento. Questo rende le modifiche su larga scala veloci e coerenti.

Notare come modificando i valori salvati nelle variabili di progettazione, vengono anche aggiornati nella sezione di imbottitura dandoci anche un'anteprima dal vivo? Questo perché ho usato la variabile di altezza della sezione all'interno della sezione di spaziatura preimpostata.

Questo è il potere che Divi 5 porta. Ti aiuta a ridimensionare il sistema di progettazione mantenendo la logica di layout avanzata coerente in tutto il sito. Una volta abituati a combinare unità avanzate come calc () (vedi qui più calc () casi d'uso con suggerimenti per padroneggiarli efficacemente) con il sistema di progettazione modulare di Divi, sbloccherai un modo efficiente e divertente per creare siti Web.

Divi rende la matematica facile

Non devi essere uno sviluppatore per utilizzare le funzioni CSS come calc () e clamp (). Divi 5 porta questi strumenti avanzati in un'interfaccia visiva che è facile da esplorare, testare e applicare. Puoi fare di tutto, dalle semplici modifiche al layout a sistemi di progettazione complessi senza scrivere una riga di codice.

Che tu stia regolando la spaziatura, usando variabili o costruendo preset riutilizzabili, Divi rende la matematica reattiva accessibile a tutti. Vuoi testare quanto funziona senza intoppi () all'interno di Divi? Scarica oggi la Divi Public Alpha e sperimentalo da solo.

Divi 5 è pronto per essere utilizzato su nuovi siti Web, ma attendere un po 'prima di migrare quelli esistenti.