La creazione di un layout CSS efficace inizia con l'assegnazione delle dimensioni a tutti gli elementi posizionati in un'applicazione web. Una funzionalità molto richiesta è sempre stata la possibilità di specificare le dimensioni utilizzando una combinazione di unità di misura. Ad esempio, sarebbe bello poter prenotare il 50% di un'area più una quantità fissa di spazio, ad esempio 10 px. Puoi farlo adesso utilizzando la proprietà calc(). Puoi usare questa funzionalità ovunque vengano utilizzati una lunghezza o un numero, in modo da poterla usare per il posizionamento degli elementi o anche nei valori cromatici di rgb(), in modo che possa essere utilizzata in modo estremamente efficace in un foglio di stile.
Che cosa puoi fare con calc()?
La proprietà calc() può essere utilizzata ovunque sia presente una lunghezza o un numero di CSS nel foglio di stile.
Offre due funzionalità principali per rendere il layout più flessibile:
- Combinazione di percentuali e valori assoluti.
- Miscelare le unità di misura.
Combinazione di percentuali con unità assolute
Diamo un'occhiata a un esempio di combinazione di percentuali e unità assolute. Supponiamo di voler assegnare il 50% dell'area disponibile meno una quantità fissa di pixel, quindi di scrivere il codice in questo modo:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
Se lo sfondo fosse di colore verde, sarebbe:
e se hai ridotto la dimensione principale, sarebbe:
L'aspetto positivo è che sappiamo sempre che il bordo destro dei contenuti sarà di 100 px a sinistra al centro dell'area che li contiene. La possibilità di combinare in questo modo diversi tipi di valore consente alla tua applicazione web di gestire il layout su dispositivi di dimensioni diverse con un controllo molto maggiore rispetto a prima.
Unità di miscelazione
Un'altra cosa fantastica è la possibilità di combinare unità con misure diverse per ottenere la dimensione risultante. Ad esempio, potresti impostare le dimensioni in base a quelle del carattere corrente mescolando le unità "em" e "px".
#bar {
height: calc(10em + 3px);
}
Puoi trovare alcuni ottimi esempi di combinazione dei valori qui e qui.
Prova
Con calc() puoi utilizzare +, -, * e / per aggiungere, sottrarre, moltiplicare e dividere valori, offrendo così tanti tipi di possibilità. Puoi utilizzare calc() ovunque sia possibile utilizzare una lunghezza o un numero di CSS. Inoltre, stiamo lavorando per aggiungere a breve calc() per le proprietà di angolo e frequenza. La proprietà calc() per le lunghezze è ora disponibile in Chrome 19 (build canale Dev) tramite l'utilizzo della proprietà -webkit-calc, in Firefox a partire dalla versione 8, utilizzando la proprietà -moz-calc, e in Internet Explorer dalla versione 9 senza prefisso. Facci sapere la tua opinione lasciando un commento qui sotto.