Ja és una realitat. Ja podem fer servir les Propietats Personalitzades o CSS Custom Properties!
Però abans de tot, comencem amb un bon <h2> i un <p> resum.
Les CSS Custom Properties o Propietats Personalitzades
O com fer màgia dins d’un full d’estils CSS.
Les Propietats Personalitzades de CSS són un concepte “nou” en l’ús dels fulls d’estil CSS. En resum, consisteixen en el ús de variables accessibles dins del document CSS i fins i tot des de Javascript, de manera NATIVA.
Per què “nou” entre cometes? Segurament ja coneixeu els preprocessadors CSS. Han estat molt populars, però amb l’arribada de les Custom Properties i a mesura que els diferents navegadors van donant suport a aquestes noves propietats, tenen els dies comptats. Al final del text trobareu una taula de compatibilitat entre navegadors, però ja us avanço que un 70% dels usuaris ja utilitzen un navegador compatible amb les Propietats Personalitzades.
CSS i les Propietats Personalitzades
Per veure l’avantatge respecte a un full d’estils CSS convencional, posem un exemple d’un full d’estil CSS sense utilitzar Custom Properties i el mateix exemple “traduït” fent-ne ús.
Suposem que volem un body amb un color de fons determinat, que després utilitzarem per pintar el color del text d’una capa, i també farem servir el color de text del body com a color de fons d’aquesta capa.
La capa1 tindrà un padding de 20px, la mateixa mida que el margin-top de la capa2.
body{
background-color:#1b1b1b;
color:#fff;
}
.capa1{
padding:20px;
color:#1b1b1b;
background-color:#fff;
}
.capa2{
margin-top:20px;
}
Ara replicarem el mateix exemple, però aquest cop utilitzant Propietats Personalitzades.
:root{
--color1:#1b1b1b;
--color2:#fff;
--mainSpacing:20px;
}
body{
background-color:var(--color1);
color:var(--color2);
}
.capa1{
padding:var(--mainSpacing);
color:var(--color1);
background-color:var(--color2);
}
.capa2{
margin-top:var(--mainSpacing);
}
Amb :root, declarem les variables que seran accessibles a tot el document CSS. Utilitzem el doble guió — per declarar una variable i el seu valor. Després, per utilitzar-les, fem servir var(–VARIABLE);.
Imagineu-vos l’avantatge d’utilitzar-ho en un full d’estils CSS amb més de 1000 línies de codi i la facilitat a l’hora de modificar valors. Només caldrà canviar un valor perquè s’actualitzi a tot el document CSS.
Un pas més enllà
O dos. Perquè les CSS Custom Properties permeten fer càlculs, operacions condicionals i aplicar valors per defecte si una variable no està definida. Sembla Javascript, oi? Doncs tot això es pot fer dins del mateix full CSS.
Podem sumar, multiplicar, comparar diferents valors i aplicar-ne un o altre segons la condició.
.caja{
/*Si no tenim declarada la variable1, s’aplicaran 10px*/
margin-top:var(--variable1, 10px);
/*També podem fer servir variables per establir un valor per defecte*/
padding-top:var(--variable1,var(--variable2));
/*Podem sumar, restar, multiplicar i dividir (*important l’espaiat en la suma i la resta)*/
padding-top:calc(var(--variable1) + 10px);
height:calc(var(--variable1) - 5px);
line-height:calc(var(--variable1) * 2);
width:calc((var(--variable1) - 5px)/2);
}
Altres exemples:
:root{
/*Podem crear text per inserir-lo en un :before més endavant*/
--texto:"Click per veure";
}
.caja:before{
content:var(--text);
}
.caja2:before{
/*Podem afegir més text després de la nostra variable declarada (per exemple, un enllaç a projecte)*/
content:var(--text)' el nostre projecte complet';
}
.caja2:before{
/*Ara ho utilitzarem per a un enllaç a una notícia*/
content:var(--text)' la nostra notícia';
}
Exemple condicional:
:root{
/*Podrem accedir-hi des de Javascript*/
--variableCond: if(x > 5) this.width = 10;
}
Compatibilitat entre navegadors
Com podeu veure, pràcticament tots els navegadors ho suporten… Excepte Explorer! Quina sorpresa, NO M’HO ESPERAVA! Tot sigui per recordar aquells meravellosos anys en què havíem de fer malabars per maquetar per a Explorer 6.
Per sort, a diferència d’aquella època, ara només menys del 4% dels usuaris utilitzen Explorer. Cap problema.
El percentatge d’usuaris que utilitzen un navegador amb suport per a Custom Properties és del 70,9%. Molt alt.
