El llenguatge de fulls d'estil CSS

El que ara coneixem com a CSS va aparèixer quan l’W3C va rebre 9 propostes diferents per a fulls d’estil, de les quals en va seleccionar dues: Cascading HTML Style Sheets (CHSS), proposta per Håkon Wium Lie el 1994 i Stream-based Style Sheet Proposal (SSP). D’aquí van néixer les Cascading Style Sheets (CSS), la primera versió de les quals, anomenada CSS level 1, va ser proposada com a estàndard a finals de l’any 1996.

El maig de l’any 1998 es va publicar l’estàndard CSS Level 2. Deu anys més tard, el 2008, se’n va fer una revisió i es va publicar el CSS Level 2 Revision 1, conegut com a CSS2.1.

Actualment s’ està treballant amb el CSS3. En aquest cas l’especificació està dividida en mòduls, alguns dels quals ja han esdevingut estàndards i en d’altres encara s’hi està treballant, és a dir, per una part tenim estàndards i per una altra una tecnologia en continu desenvolupament.

Finalment hem de tenir en compte que una vegada tenim un nou estàndard, aquest no és immediatament assolit per tots els navegadors alhora, i és molt útil recórrer a pàgines com  caniuse.com per veure si determinades característiques ja han sigut implementades, per quins navegadors i en quina versió d’aquests navegadors.

Es pot veure un gràfic amb l’evolució històrica del CSS en la figura.

Com podeu observar a partir de la versió CSS3, els estàndards es tracten en mòduls per separat, com ara els colors, selectors o namespaces, tal com mostra la figura.

Fins fa poc, és a dir abans d’HTML5, per tal de forçar que l’estètica del document recaigués en el CSS i no en l’(X)HTML, es disposava de les versions Strict d’(X)HTML, on les etiquetes permeses tenien com a objectiu només marcar l’estructura i semàntica del document i no la presentació. La versió Transitional d’(X)HTML tenia més marques relacionades amb la visualització i la presentació de la web, però s’aconsellava no usar aquest tipus de marques, ja que barregen estructura i presentació del document. A més, tot i tenir marques per a la visualització, molts cops es necessita oferir efectes visuals que cap sabor d’(X)HTML era capaç de proporcionar. En l’actualitat, com que HTML5 és més flexible en l’ús d’etiquetes i atributs, alhora que HTML5 ha eliminat algunes etiquetes que tenien a veure amb el format i no amb l’estructura dels documents, es deixa al programador un marge per treballar, tot i que s’aconsella de donar un format estètic a la web amb l’ús dels fulls d’estil, i deixar exclusivament l’estructura per HTML.

Usar fulls d’estil ens proporciona els avantatges següents:

• Possibilitat de mantenir el codi.
• En el camp de disseny, el CSS és més potent que les marques de disseny que ofereix l’(X)HTML.
• El CSS és un llenguatge senzill.
• Es poden especificar diferents fulls d’estil per a un sol document (X)HTML. Per exemple, podem tenir l’estil per a la pàgina web quan es visita amb el navegador i l’estil per a quan volem imprimir aquesta pàgina.
• Els fulls d’estil es poden reutilitzar des de diferents documents (X)HTML.

El gran inconvenient dels fulls d’estil és que no tots els navegadors es comporten de la mateixa manera davant del mateix full d’estil. Això es deu al fet que alguns navegadors no compleixen els estàndards establerts i, amb això, obliguen el programador a codificar diferents fulls d’estil (un per a cada navegador). Tot i això, en els últims anys els navegadors cada cop s’acosten més a complir els estàndards proposats.

El CSS ens defineix quin aspecte han de tenir els elements (X)HTML. És per això que hem d’associar d’alguna manera aquestes propietats als elements.

Podem ubicar les propietats CSS en diferents localitzacions:

• A l’etiqueta: afegint les propietats CSS directament a l’element usant l’atribut style. Posem un exemple: suposem que volem que un determinat paràgraf estigui centrat amb lletra vermella. Hem de tenir en compte que aquesta forma d’incloure codificació CSS s’ha de fer servir puntualment, o per fer proves, però no permet reutilitzar el codi en diverses etiquetes.

El codi és el següent:

<p style="text-align:center; color:red">Paràgraf centrat vermell</p>

• A la capçalera del document (X)HTML: podem posar les diferents propietats CSS dins de l’element <style> que està ubicat dins de l’element <head>. Per exemple, si volem que tots els paràgrafs estiguin centrats i amb lletra vermella, el codi és el següent:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" lang="ca">
    <title>Document HTML</title>
    <style>
      p {
         text-align:center;
         color:red
      }
    </style>
</head>
<body>
   <p>Paràgraf centrat vermell</p>
   <p>Paràgraf centrat vermell</p>
   <p>Paràgraf centrat vermell</p>
</body>
</html>

L’avantatge de l’ús d’incloure CSS a la capçalera, és que el codi CSS es pot reaprofitar a dins de tot el document i permet que diverses etiquetes comparteixin les característiques estètiques que codifiquem.

• En un document extern: posem totes les propietats dins d’un document amb extensió .css i des del document (X)HTML enllacem aquest full d’estil amb l’ajuda de l’etiqueta <link>, filla de l’element <head>. Si volem tenir tots els paràgrafs centrats amb lletra vermella, el document (X)HTML és:

<!doctype html>
  <head>
    <meta charset="UTF-8" lang="ca">
    <link rel="stylesheet" href="estils.css" />
  </head>
  <body>
    <p>Paràgraf centrat vermell</p>
  </body>
</html>

El fitxer estils.css té el contingut següent:

p {
   text-align:center;
   color:red;
}

L’avantatge d’usar documents externs per establir les propietats CSS és que podem reutilitzar un mateix full d’estil per a diferents documents (X)HTML.

El selector ens serveix per definir a quin o a quins elements volem aplicar les declaracions de la regla. Les declaracions són les diverses característiques que han de complir els elements que concorden amb el selector. A cada propietat de cada declaració hi posem el valor que s’escaigui.

La sintaxi genèrica d’una regla és, doncs, la següent:

selector{
   declaració_1
   ...
   declaració_n
}

on la sintaxi de cada declaracio_i és:

propietat_i: valor_i;

Per exemple, si volem que tots els paràgrafs tinguin lletra de mida 10pt i un fons de color gris hem de definir la regla següent:

p {
   font-size: 10pt;
   background-color: gray; 
}

En aquesta regla, p és el selector que té dues declaracions: font-size: 10pt; i background-color: gray;. En la primera declaració font-size: 10pt;, font-size és la propietat i 10pt és el valor. En la segona declaració background-color: gray;, background-color és la propietat i gray és el valor.

Hi ha un conjunt de regles especials que s’anomenen regles arrova o at-rules en anglès. Aquestes regles es caracteritzen perquè comencen pel caràcter @.

Enumerem a continuació quines són aquestes regles i com s’utilitzen:

• Regla @import: la regla @import ens serveix per incloure, en el nostre full d’estil, fulls d’estil externs. Si, per exemple, volem incloure en el nostre full d’estil totes les propietats que hi ha en el document mesestils.css, hem d’escriure la línia següent:

@import "mesestils.css";

• Regla @media: la regla @media serveix per diferenciar per quin mitjà s’ofereixen les propietats que conté aquesta regla. La sintaxi genèrica és la següent:

@media mitjà{
   propietats
  }

on mitjà pot ser print (per imprimir) o screen (per mostrar per pantalla), entre d’altres.

Imaginem, per exemple, que volem que, quan imprimim el document (X)HTML, la lletra tingui una mida de 10pt, però que, quan es miri per pantalla, tingui una mida de 12pt. També volem que en ambdós casos l’alçada de la línia sigui d’1.2. En el nostre full d’estil hem d’introduir el codi següent:

@media print {
   body{ font-size: 10pt }
}
@media screen {
   body { font-size: 12pt }
}
@media screen, print {
   body { line-height: 1.2 }
}

Avui en dia amb l’augment dels diferents tipus de dispositius representa que tenim moltes mides de pantalles diferents (smartsphones, tablets, ordinadors, etc.), aquesta regla ha estat molt útil per aplicar diferents regles CSS de forma condicional, és a dir, aplicar regles diferents CSS, segons el tipus de pantalla o la seva orientació. Aquest tipus de programació se l’ha anomenat Disseny Adaptatiu (en anglès Responsive Web Design o RWD), i a la combinació de la regla @media amb les condicions que podem afegir, se l’ha anomenat media-queries.

• Regla @font-face: especifica una font no inclosa en el navegador que l’usuari es descarregarà.

Vegem un exemple:

@font-face {
   font-family: DeliciousRoman;
   src: url("Delicious-Roman.otf");
}
 
p {
    font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

En aquest exemple, en la regla @font-face estem definit una font. Per tal de definir-la li posem un nom: això es fa amb la propietat font-family i en aquest cas hem triat el nom DeliciousRoman. A més, és imprescindible especificar on es troba aquesta font, per tal que el navegador la pugui descarregar i usar, i això es fa amb la propietat src. Veiem que en aquest exemple la font és Delicious-Roman.otf.

Un cop definida la font, podem usar-la en qualsevol regla. Veiem com a l’exemple una regla que ens defineix que tots els paràgrafs (selector p) usaran com a font DeliciousRoman. Si aquesta font no estigués disponible, s’usaria la font Helvètica, si aquesta tampoc la tingués l’usuari, s’usaria la font Arial. Finalment, si no es disposés de cap d’aquestes fonts, s’usaria sans-serif.

• Regla @charset: especifica quin és el joc de caràcters que farem servir dins del fitxer CSS.

@charset "UTF-8";       /* activa el joc de caràcters pel full d'estil a Unicode UTF-8 */
@charset 'iso-8859-15'; /* activa el joc de caràcters pel full d'estil Latin-9 (Llengües de l'oest d'Europa, amb el símbol de l'euro) */

• Regla @supports: en CSS3 nivell 3, disposem d’aquesta regla arrova que ens dóna la possibilitat d’especificar una o diverses condicions, que en cas de complir-se posaran en marxa les regles CSS a aplicar. La nomenclatura bàsica és la següent:

@supports <condició_a_complir> {
   /* regles CSS que apliquem en cas de que la condició anterior es compleixi  */
  }

Un exemple pràctic seria:

@supports (display:flex) {
  section { display: flex }
  ...
}

Al codi anterior ens diu que si existeix per la propietat display el valor flex, apliqui a tots els elements HTML de tipus section d’aquesta propietat.

• Regla @page: la fem servir per modificar propietats CSS, a l’hora d’imprimir un document, però hem de tenir en compte que pot actuar sobre un nombre de propietats CSS limitat.

Com en tot llenguatge, la llegibilitat és imprescindible si treballen en grup. És per això que CSS ofereix una manera de comentar els fulls d’estil.

Si en un full d’estil volem posar comentaris destinats a l’aclariment del codi CSS, hem de fer servir la sintaxi següent:

/* comentaris */

Posem un exemple:

/* Estil per a totes les capçaleres del document */
h1 {
   text-align: center; /* Text centrat per destacar la importància*/
   color: red;         /* Color de lletra vermella per emfatitzar el text */  
}

Dues de les característiques que fan que els fulls d’estil tinguin una gran potència és la cascada i l’herència.

La cascada es refereix a la possible combinació de diferents fulls d’estil. L’herència fa referència a la capacitat que tenen els elements del document (X)HTML d’heretar propietats dels seus elements antecessors.

Les sigles CSS volen dir Cascading Style Sheets (‘Fulls d’estil en cascada’). Però, què vol dir cascada en aquest àmbit? Doncs vol dir que podem combinar diferents fulls d’estil i que les propietats de tots ells es van acumulant. Això ens és molt útil quan pensem en llocs web grans, on podem tenir un full d’estil bàsic i anar incorporant-hi altres fulls d’estil, segons les nostres necessitats.

Ara caldria preguntar-nos: si podem combinar diferents fulls d’estil, pot donar-se el cas que hi hagi propietats que es contradiguin? Si es dóna aquest cas, com se soluciona? Quina propietat té prioritat? Per solucionar aquest problema hi ha establerta la jerarquia següent, en ordre de prevalença:

1. Propietats establertes per l’autor de la web: les propietats que estableix l’autor es poden ubicar en diferents llocs i, segons aquesta ubicació, la propietat té més o menys prioritat. La jerarquia és la següent, per ordre de quina preval sobre les altres:

• Propietats establertes en l’atribut style d’un element o Inline style.
• Propietats establertes en l’element <style> del document (X)HTML, o Internal Style Sheet.
• Propietats establertes en un full d’estil extern, o External Style Sheet.

D’aquesta manera podem dir que l’ordre de prioritat ve marcat per la proximitat amb l’element que l’afecta, sent la més prioritària Inline Style i la menys External Style Sheet.

2. Propietats establertes per l’usuari: els navegadors permeten a l’usuari establir diferents propietats d’estil: mida de la lletra, colors…

3. Propietats establertes pel navegador: els navegadors tenen un estil predeterminat per a cadascun dels elements (X)HTML. Si no s’ha establert cap propietat en els ítems anteriors, les propietats del navegador són les que prevalen.

Posem un exemple que mostri la jerarquia d’estils dins de les propietats que defineix l’autor del web. Imaginem que tenim els següents fitxers:

• El fitxer index.html:

<!doctype html >
<html lang="ca">
<head>
...
<link rel="stylesheet" href="estils.css" />
<style>
   p {
      color: red;
   }
</style>
</head>
<body>
   <h1>Encapçalament</h1>
   <p style="color: blue">Un paràgraf</p>
   <p>Un altre paràgraf</p>
</body>
</html>

• El fitxer estils.css:

p {
   color: green;
}
h1 {
   color: violet;
}

En l’exemple anterior, podríem pensar que les tres declaracions que apareixen estan en contradicció: el full d’estil estils.css té una regla que ens diu que tots els paràgrafs tindran la lletra de color verd; l’element <style> del document index.html ens diu que tots els paràgrafs d’aquest document seran de color vermell, i l’etiqueta style del primer paràgraf del document index.html ens diu que aquest paràgraf serà de color blau. La pregunta és: de quin color seran aquests paràgrafs i per què?

La resposta correcta és que el primer paràgraf serà de color blau perquè l’atribut style és la ubicació amb més alta jerarquia mentre que el segon paràgraf serà de color vermell ja que no té cap atribut style, però la regla que apareix dins l’element <style> preval damunt la regla que apareix en el document estils.css.

Per últim, s’ha de fer notar que el color de lletra de l’encapçalament <h1> serà violeta, tal com està establert al fitxer estils.css, ja que és l’única regla que tenim que faci referència a l’etiqueta <h1>.

Posem un altre exemple per mostrar la poca prevalença de les propietats establertes pel navegador. Imaginem el següent fitxer (X)HTML:

<!doctype html >
<html lang="ca">
<head>
...
</head>
<body>
   <p>Un paràgraf amb una <strong>paraula molt emfatitzada</strong></p>
</body>
</html>

Si mirem aquest fitxer amb la majoria de navegadors, ens adonarem que la cadena paraula molt emfatitzada apareix en negreta. Això es deu al fet que, en absència de la definició de cap estil per part de l’autor de la web, el navegador decideix que per emfatitzar molt una cadena la posarà en lletra negreta.

Modifiquem el codi anterior, afegint un estil per a l’etiqueta <strong>:

<!doctype html>
<html lang="ca">
<head>
...
<style>
   strong {
      font-weight: normal;
      color:red;
   }
</style>
</head>
<body>
   <p>Un paràgraf amb una <strong>paraula molt emfatitzada</strong></p>
</body>
</html>

Si ara visualitzéssim la web, ens adonaríem que la cadena paraula molt emfatitzada ja no apareix en negreta, a causa de la declaració font-weight: normal i a més apareix de color vermell gràcies a la declaració color:red. Això ens mostra que les propietats establertes per l’autor prevalen per sobre de les propietats establertes pel navegador.

En el cas de la prevalença entre les propietats establertes per l’autor de la web i les propietats establertes per l’usuari, hi ha la possibilitat d’invertir l’ordre posant la cadena !important després de la declaració.

Aquest fet ens pot servir perquè la pàgina sigui més accessible, ja que si, per exemple, un usuari té problemes de visió, li permetem que pugui fer la lletra més gran, tot i que l’aplicació estigui pensada per ser visualitzada amb una lletra més petita.

Imaginem doncs que dissenyem una web on volem que la font sigui petita, però que volem permetre que l’usuari la canviï, si així ho desitja, mitjançant la configuració apropiada del seu navegador. Per fer-ho, codificarem la següent regla CSS:

body{
   font-size: small !important;
}

Finalment, es podria donar el cas que ens trobem dues regles en el mateix nivell de jerarquia. Com se soluciona aquest “empat”? Doncs bé, si ens trobem en el cas que les propietats “empaten”, l’última propietat escrita és la que “guanya”. Per exemple, fixeu-vos en el codi següent en un full d’estil extern (i suposant que no hi ha més regles que se superposin en el fitxer HTML des d’on es cridi aquest full d’estil):

p{
  color:red;
}
...
p{
  color:green;
}
...

En aquest cas la lletra dels paràgrafs serà sempre de color verd, ja que és l’última regla escrita en el document CSS. La regla on diu que el color de lletra dels paràgrafs serà de color vermell queda completament invalidada.

Moltes vegades, com que no marquem cap propietat per CSS sobre elements, i atès que el navegador porta per defecte algunes propietats ja establertes, aquestes s’apliquen per defecte. Si no volem que això sigui així, és molt habitual que els desenvolupadors facin servir un full d’estil extern on “inicialitzen” totes les propietats preestablertes pel navegador. Un exemple d’això el podem trobar a l’anomenat reset css de  meyerweb.com.

El codi que faríem servir per afegir aquest reset css, l’afegiríem com un document extern abans (a l’exemple reset.css) que la resta de fitxers CSS externs que féssim servir (a l’exemple estilspropis.css). Tal com indica l’exemple següent:

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Exemple de document amb reset CSS </title>
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/estilspropis.css" />
	<!-- En podem afegir d'altres -->
</head>
<body>
 
Cos del document
 
</body>
</html>

Tots els elements d’una pàgina (X)HTML, amb l’excepció de l’element arrel <html>, estan continguts en un altre element.

Quan parlem d’herència ens referim al fet que tot element hereta les propietats dels seus elements antecessors. Malgrat tot, hem de tenir en compte el següent:

• No totes les propietats s’hereten. Aquesta característica està descrita en l’especificació de CSS corresponent.
• Si volem forçar l’herència en una propietat, podem introduir-hi el valor inherit.
• Si posem un valor a una propietat, aquest valor preval sobre el valor heretat.
• Els elements hereten el valor computat, no el valor especificat. És a dir, si una propietat té per valor un valor relatiu (per exemple, un percentatge), el valor heretat és el resultat calculat.

Posem un exemple per veure l’herència de CSS en acció, considerem el següent codi:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3c.org/TR/xhtml1/
DTD/xhtml1-strict.dtd " >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
<head>
...
<style>
   body{
      font-size: small;
   } 
   p {
      color: gray;
   }
   strong {
      font-style: italic;
   }
</style>
</head>
<body>
   <p>Un paràgraf amb una <strong>text molt emfatitzat</strong></p>
</body>
</html>

Fixem-nos que l’element <strong> és a dins de l’element <p>, que està contingut a l’element <body>. Això vol dir que la cadena text molt emfatitzat tindrà les següents propietats: evidentment estarà en cursiva perquè així ho especifica la propietat font-style: italic de tots els elements <strong>, però a més, com que aquest element <strong> és a dins de l’element <p> i el color de lletra de tots els paràgrafs és el gris, tal com diu la propietat color: gray, la cadena també serà de color gris. És més, com que l’element <p> és a dins de l’element <body>, <strong> també hereta la declaració font-size: small. En resum, la cadena text molt emfatitzat tindrà lletra petita, serà de color gris i estarà en cursiva.