Espressioni matematiche css con la proprietà calc()

Secondo i nostri calcoli questa proprietà può tornarci davvero utile. Vediamo di cosa si tratta.
Espressioni matematiche css con la proprietà calc()

Facciamo 2 calcoli

Pochi mesi fa Stefano ha spiegato nel post “Box-sizing CSS3” come calcolare in modo automatico la larghezza di un elemento attraverso la proprietà box-sizing.

Oggi voglio ricollegarmi al concetto introducendo la proprietà calc(). Questa proprietà consente di effettuare delle vere e proprie espressioni matematiche utilizzando addizione, sottrazione, moltiplicazione e divisione come valore dei componenti.

Un esempio pratico e veloce:

In questo primo esempio la proprietà calc() fa in modo che il paragrafo all’interno di un contenitore sia largo 300px.

#content{
   width:400px;
   border:1px solid red;
   padding:0px 10px;
}

#content p{
    width:calc(350px - 50px);
    padding:5px;
    background:#f0f0f0;
}

Un altro esempio:

Un altro esempio in cui la proprietà calc() può tornarci molto utile è l’affiancamento di due box in percentuale situati all’interno di un contenitore con larghezza fissa, ai quali sono associati bordi, margini e padding . Normalmente in questa struttura i due box si ritroverebbero uno sotto l’altro, ma con una breve operazione questo è finalmente superabile:

#contentDue{
    width:400px;
    height:200px;
}

#contentDue .left,
#contentDue .right{
    width:calc(50% - 22px);
    height:200px;
    float:left;
    border:1px solid #000;
    margin:0 5px;
    padding:0 5px;
}

Un’altra soluzione più “articolata”:

#contentTre{
    width:400px;
    height:200px;
}

#contentTre .left,
#contentTre .center,
#contentTre .right{
    width:calc(400px / 3 - 22px);
    height:150px;
    float:left;
    border:1px solid #000;
    margin:0 5px;
    padding:5px;
}

In quest’ultimo esempio la proprietà calc() rileva la larghezza dei tre box flottanti attraverso questa operazione:
400px (larghezza del conteniutore) / 3 (numero dei box) – 22px (somma tra bordi, margini e padding).

Note

Per non imbattersi in diversi errori la proprietà calc() ha alcune regole da seguire.

  • La sintassi richiede degli spazi intorno agli operatori di addizione e sottrazione. Per moltiplicazione e divisione non è obbligatorio.
  • Gli User Agent compatibili con la proprietà calc() supportano espressioni di circa 20 termini, dove ogni valore è un termine.
  • Valori inferiori a zero non sono ammessi. Es: calc(5px – 10px)
  • Come avrai sicuramente immaginato, il supporto da parte dei browser non è proprio il massimo, soprattuto per quanto riguarda il nostro caro Internet Explorer. In questa tabella trovi l’elenco delle versioni compatibli.

Conclusione

Questo post serve a darti una panoramica generale sull’argomento, se vuoi approfondire ti consiglio come sempre di leggere la documentazione ufficiale del W3C.

Sembra che i css stiano diventando sempre più simili ad un linguaggio di programmazione, e questo non può farci altro che piacere. Beh certo, sempre browser permettendo.

Tu conoscevi già la proprietà calc()? parlamene in un commento o sulla nostra fanpage. Alla prossima 😉

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github