Com funciona el CSS


Hem après els conceptes bàsics de CSS, per a què serveix i com escriure fulls d'estil senzills. En aquest article veurem com un navegador pren els llenguatges CSS i HTML i els converteix en una pàgina web.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML).
Objectiu: Entendre els conceptes bàsics de com el navegador analitza els llenguatges CSS i HTML i què passa quan un navegador troba un CSS que no entén.

Com funciona realment el CSS?

Quan un navegador mostra un document, ha de combinar el contingut del document amb la informació d’estil. Processa el document en un seguit d'etapes, que enumerarem a continuació. Tingues present que aquesta és una versió molt simplificada de què passa quan un navegador carrega una pàgina web, i que els diversos navegadors gestionen el procés de maneres diferents. Però això és més o menys el que succeeix.

  1. El navegador carrega el codi HTML (per exemple, el rep de la xarxa).
  2. Converteix el codi HTML en un model d'objectes del document (document object model o DOM). El DOM representa el document a la memòria de l'ordinador. L’explicarem amb més detall en la secció següent.
  3. El navegador recupera la majoria dels recursos als quals està vinculat el document HTML, com ara imatges i vídeos incrustats... i CSS enllaçats. El JavaScript es tracta una mica més endavant en el procés, i no en parlarem aquí per no embolicar les coses.
  4. El navegador analitza el CSS recuperat i ordena les diferents regles segons els tipus de selector en diferents «cubetes». Per exemple: element, classe, ID, etc. A partir dels selectors que troba, calcula quines regles s’han d’aplicar als nodes del DOM i hi atribueix l’estil segons sigui necessari (aquest pas intermedi s’anomena arbre de renderització).
  5. L'arbre de representació presenta l'estructura en què ha d'aparèixer després que s'apliquin les regles.
  6. La presentació visual de la pàgina es mostra a la pantalla (aquesta etapa s’anomena pintura).

El diagrama següent ofereix una visió senzilla del procés.

Sobre el DOM

Un DOM té una estructura en forma d'arbre. Cada element, atribut i fragment de text del llenguatge de marcatge es converteix en un node DOM en l'estructura de l'arbre. Els nodes es defineixen per la seva relació amb els altres nodes del DOM. Alguns elements són pares de nodes secundaris, i els nodes secundaris tenen nodes germans.

Entendre el DOM t'ajuda a dissenyar, depurar i mantenir el teu CSS perquè el DOM és el lloc on es troba el CSS i el contingut del document. Quan comencis a treballar amb les eines DevTools (o eines del desenvolupador) del navegador, et desplaçaràs pel DOM mentre selecciones els elements per veure quines regles s'apliquen.

Una representació real del DOM

En lloc d’una llarga i avorrida explicació, vegem amb un exemple com un fragment HTML es converteix en un DOM.

Prenguem el codi HTML següent:

<p>
  Utilitzem:
  <span>Fulls</span>
  <span>d'estil</span>
  <span>en cascada</span>
</p>

En el DOM, el node que correspon al nostre element <p> és un element pare. Els nodes fills són un node de text i els tres nodes corresponen als elements <span>. Els nodes SPAN són també nodes pare, i tenen nodes de text com a nodes fill:

P
├─ "Utilitzem:"
├─ SPAN
| └─ "Fulls"
├─ SPAN
| └─ "d’estil"
└─ SPAN
   └─ "en cascada"

Així és com un navegador interpreta aquest fragment HTML: es confecciona l'arbre DOM anterior i el navegador el representa així:

Aplicar CSS al DOM

Suposem que hem afegit una mica de codi CSS al nostre document per a donar-hi estil. Un cop més, l'HTML és el següent:

<p>
  Utilitzem:
  <span>Fulls</span>
  <span>d'estil</span>
  <span>en cascada</span>
</p>

Suposem que hi apliquem el CSS següent:

span {
  border: 1px solid black;
  background-color: lime;
}

El navegador analitza el codi HTML i crea un DOM, i després analitza el CSS. Atès que l'única regla disponible en el CSS té un selector span, el navegador pot ordenar el CSS molt de pressa! Aplica aquesta regla a cadascun dels tres <span> i després pinta a la pantalla la representació visual final.

La sortida actualitzada és la següent:

En el nostre article Depurar el CSS del mòdul següent, utilitzarem les eines DevTools del navegador per depurar problemes del CSS i coneixerem més sobre com l'interpreta el navegador.

Què passa si un navegador es troba amb CSS que no entén?

En un article anterior hem esmentat que no tots els navegadors implementen el CSS al mateix temps. A més, molta gent no utilitza la versió més recent del navegador. Tenint en compte que el CSS està en desenvolupament constant i, per tant, va per davant del que els navegadors poden reconèixer, et podries preguntar què passa si un navegador troba un selector CSS o una declaració que no reconeix.

La resposta és que no fa res i només passa a la declaració CSS següent.

Si un navegador analitza les teves regles i troba una propietat o un valor que no entén, l'ignora i passa a la declaració següent. Ho fa si has comès un error i has escrit malament una propietat o un valor, o si la propietat o el valor són massa recents i el navegador encara no és compatible.

De la mateixa manera, si un navegador troba un selector que no entén, ignora tota la regla i passa a la següent.

En l’exemple següent hem utilitzat l’ortografia britànica per a la propietat del color, cosa que invalida aquesta propietat perquè no es reconeix. Per tant, el paràgraf no es veu de color blau. Tots els altres CSS s'han aplicat; només s’ignora la línia no vàlida.

<p>Vull que aquest text sigui gran, en negreta i blau.</p>
p {
  font-weight: bold;
  colour: blue; /* Ortografia incorrecta de la propietat color */
  font-size: 200%;
}

Aquest comportament és molt útil. Significa que pots utilitzar el CSS nou com una millora, perquè no es produirà cap error si no s’entén: pot ser que el navegador entengui la funció nova, o que no l’entengui. Combinat amb el funcionament en cascada i el fet que els navegadors utilitzen l’últim CSS que es troben en un full d’estil quan hi ha dues regles amb la mateixa especificitat, també pots oferir alternatives per a navegadors que no admeten el CSS nou.

Això funciona especialment bé quan vols fer servir un valor força nou i no és compatible amb tots els navegadors. Per exemple, alguns navegadors antics no admeten calc() com a valor. Podríem donar una amplada alternativa a una caixa en píxels i després donar una amplada amb un valor calc() de 100% - 50px. Els navegadors antics faran servir la versió en píxels i ignoraran la línia sobre calc() perquè no l’entenen. Els navegadors nous interpretaran la línia amb píxels i després la substituiran per la línia amb calc(), perquè la línia apareix més tard en la cascada.

.box {
  width: 500px;
  width: calc(100% - 50px);
}

En articles posteriors analitzarem moltes maneres més de donar compatibilitat a diferents navegadors.

Per acabar

Ja has acabat aquest mòdul; només hi ha una cosa més per fer. En l’article següent faràs servir els teus nous coneixements per a canviar el disseny d'un exemple i provar una mica de codi CSS en el procés.

En aquest mòdul

  1. Què és el CSS
  2. Primers passos amb el CSS
  3. Com s'estructura el CSS
  4. Com funciona el CSS
  5. Aplica els teus nous coneixements