Introducció al disseny CSS

Aquest article recapitula algunes de les característiques de disseny CSS que ja hem tocat en els mòduls anteriors, com els diferents valors de display, i introdueix alguns dels conceptes que exposem al llarg d'aquest mòdul.

Prerequisits: Conceptes bàsics d'HTML (consulta la Introducció a HTML), i nocions de com funciona el CSS (consulta la Introducció al CSS).
Objectiu: Adquirir una visió general de les tècniques de disseny de pàgines web amb CSS. Cada tècnica es pot aprendre amb més detall en tutorials posteriors.

Les tècniques de disseny de pàgina web amb CSS ens permeten prendre els elements que hi ha en una pàgina web i controlar on estan posicionats en relació amb la seva posició predeterminada en el flux de disseny normal, els altres elements del voltant, l’element pare contenidor o la finestra de visualització / finestra principal. Les tècniques de disseny de pàgines que exposem amb més detall en aquest mòdul són:

  • Elements flotants
  • Posicionament
  • Taules CSS
  • Flexbox
  • Graella

Cada tècnica té els seus usos, avantatges i inconvenients.

Flux normal del disseny

El flux normal és la manera com el navegador estableix les pàgines HTML de manera predeterminada quan no es fa res per controlar el disseny de pàgina. Vegem-ne un exemple HTML ràpid:

<p>I love my cat.</p>

<ul>
  <li>Buy cat food</li>
  <li>Exercise</li>
  <li>Cheer up friend</li>
</ul>

<p>The end!</p>

Per defecte, el navegador mostra aquest codi de la manera següent:

Tingues en compte que aquí l'HTML es mostra en l'ordre exacte en què apareix en el codi d’origen, amb elements apilats l’un sobre l’altre: el primer paràgraf, seguit de la llista no ordenada, seguit del segon paràgraf.

Les tècniques de disseny tendeixen a substituir aquest comportament predeterminat, utilitzant les tècniques següents:

  • La propietat position: en el valor per defecte d’aquesta propietat, static, el flux és el normal, però pots fer que els elements es distribueixin de manera diferent mitjançant altres valors, per exemple, que els elements sempre estiguin fixats a la part superior esquerra de la finestra de visualització del navegador.
  • Elements flotants: aplicant a float un valor com left, pots fer que els elements de nivell de bloc s'alineïn l’un al costat de l'altre en lloc disposar-se l’un damunt de l'altre.
  • La propietat display: els valors habituals, com ara block, inline o inline-block poden canviar la manera com els elements es comporten en un flux normal (consulta l’article Tipus de caixes CSS per a obtenir-ne més informació), mentre que d’altres valors poc freqüents o especialitzats ens permeten disposar els elements de maneres completament diferents, utilitzant eines com Flexbox.

Elements flotants (Floats)

La tècnica dels elements flotants (Floats) permet que els elements flotin per l'esquerra o per la dreta els uns dels altres, en comptes de disposar-se els uns sobre els altres de la manera predeterminada. Els usos principals dels elements flotants són establir columnes i permetre que el text floti al voltant d'una imatge. Per començar, donem una ullada ràpida a la propietat float i fixem-nos en un exemple senzill.

La propietat float té quatre valors possibles:

  • left: fa flotar l'element a l'esquerra.
  • right: fa flotar l'element a la dreta.
  • none: no flota. Aquest és el valor predeterminat.
  • inherit: especifica que el valor de la propietat float s''hereta de l'element pare.

Un exemple HTML senzill

Observa com podem crear un disseny de pàgina web senzill de dues columnes amb elements flotants. Primer, una mica d’HTML:

<h1>2 column layout example</h1>
<div>
  <h2>First column</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
</div>

<div>
  <h2>Second column</h2>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut.</p>
</div>

Hi ha un títol d’encapçalament de primer nivell i dos elements <div> senzills, cadascun amb un títol d’encapçalament de segon nivell i un paràgraf. De manera predeterminada, el contingut es disposa en l'ordre original, de la part superior a la inferior, i baixant per la pàgina.

Flotació de les columnes

Canviem les coses; volem que en lloc d'això, els nostres dos elements <div> es disposin l’un al costat de l'altre. Podem fer-ho amb el codi següent. Tingues en compte que els dos elements <div> floten l’un amb un valor a l'esquerra i l’altre amb un valor a la dreta; això vol dir que un flotarà cap a l'esquerra i l'altre ho farà cap a la dreta. També se'ls proporciona uns valors d’amplada (width) que els permeten adaptar-se a la mateixa línia i deixar un pas pel mig (l'amplada total mai no serà més de 100!).

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

L'exemple actualitzat serà així:

Nota: Per obtenir més informació sobre els elements flotants CSS, consulta la secció Elements dlotants (Floats).

Tècniques de posicionament

El posicionament et permet moure un element des d’un punt d’origen de la pàgina cap a un altre lloc, amb gran precisió.

Hi ha quatre tipus de posicionament principals, que has de conèixer:

  • El posicionament estàtic (static positioning) és el valor per defecte que té cada element; significa «posa l'element en la posició normal en el flux del disseny del document; res especial per veure aquí».
  • El posicionament relatiu (relative positioning) permet modificar la posició d'un element en la pàgina i moure’l en relació amb la seva posició en el flux normal, i fins i tot fent que se superposi a altres elements de la pàgina. Això és útil per a ajustos de disseny menors i per a determinar el disseny.
  • El posicionament absolut (absolute positioning) mou un element completament fora del flux de disseny normal de la pàgina, com si estigués disposat en una capa separada pròpia. A partir d'aquí, el podem corregir a una posició relativa respecte de les vores de l'element <html> de la pàgina (o l'element pare més proper). És útil per a crear efectes de disseny de pàgina complexos com ara caixes de tipus pestanya en què diferents panells de contingut es disposen els uns damunt dels altre i es mostren i oculten segons es vol, o panells d'informació que es disposen fora de la pantalla per defecte, però es poden fer lliscar cap a l’interior de la pantalla amb un control de tipus botó.
  • El posicionament fix (fixed positioning) és molt similar al posicionament absolut, excepte que fixa un element en relació amb la finestra de visualització del navegador, no amb un altre element. Això és útil per a crear efectes com ara un menú de navegació persistent, que sempre es manté al mateix lloc a la pantalla en desplaçar-se la resta del contingut.

Un exemple senzill de posicionament

Per familiaritzar-te amb aquestes tècniques de disseny de pàgina, el mostrem un parell d'exemples ràpids. Tots els nostres exemples tenen el mateix codi HTML, que és el següent:

<h1>Positioning</h1>

<p>I am a basic block level element.</p>
<p class="positioned">I am a basic block level element.</p>
<p>I am a basic block level element.</p>

Apliquem a aquest codi HTML un estil predeterminat amb el codi CSS següent:

body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

La sortida que dona és la següent:

Posicionament Relatiu (Relative)

Un ús molt comú del posicionament relatiu és fer petits ajusts en el disseny, com ara moure una mica una icona cap avall perquè s'ajusti a una etiqueta de text. Podríem afegir un posicionament relatiu com aquest amb la següent regla següent:

.positioned {
  position: relative;
  background: yellow;
  top: 30px;
  left: 30px;
}

Aquí hem donat al nostre paràgraf del mig un valor position relative; això no fa res per si mateix, de manera que també afegim les propietats top i left, que serveixen per a moure l'element afectat cap avall i cap a la dreta; això podria semblar el contrari del que s'esperava, però cal pensar que l'element és empès cap als costats esquerre i superior, cosa que fa que es mogui cap a la dreta i avall.

Si afegeixes aquest codi, es mostra el resultat següent:

Posicionament absolut (Absolute)

El posicionament absolut s'utilitza per a moure els elements a qualsevol lloc de la pàgina web i crear dissenys complexos. Curiosament, sovint s'utilitza conjuntament amb el posicionament relatiu i els elements flotants.

Tornant al nostre exemple original no posicionat, podríem afegir la regla CSS següent per a implementar el posicionament absolut:

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}

Aquí hem donat al nostre paràgraf del mig un valor position absolute, i les mateixes propietats top i left, com abans. L'addició d'aquest codi, però, dona el resultat següent:

Això és molt diferent. L'element ha quedat totalment separat de la resta del disseny de la pàgina i s’hi ha col·locat en l’extrem superior. Els altres dos paràgrafs ara es disposen junts, com si el germà posicionat no existís. Les propietats top i left tenen un efecte diferent sobre elements amb posicionament absolut que sobre elements amb posicionament relatiu. En aquest cas, no s'especifica quant es mou l'element respecte a la posició d’origen; en canvi, s'especifica la distància a la qual l'element s’ha de situar en els costats superior i esquerre respecte dels límits de la pàgina (l'element <html>, per ser exactes).

Deixarem per ara el posicionament fix; bàsicament funciona de la mateixa manera, només que es manté fixat a les vores de la finestra del navegador, i no a les vores dels elements pare.

Nota: Per a obtenir més informació sobre el posicionament, consulta els nostres articles Posicionament i Exemples pràctics de posicionament.

Taules CSS

Les taules HTML són perfectes per a mostrar dades tabulades, però fa molts anys, fins i tot abans que el CSS bàsic fos compatible de manera fiable entre els navegadors, els desenvolupadors web solien utilitzar taules per als dissenys de pàgines web senceres; col·locaven els encapçalaments, els peus de pàgina, les diferents columnes, etc., en files i columnes d’una taula. Això va funcionar en el moment, però presenta molts problemes: els dissenys de taules no són flexibles, l’etiquetatge és feixuc, són difícils de depurar, i són semànticament erronis (els usuaris de lectors de pantalla, per exemple, tenen problemes per navegar en dissenys de pàgina web amb taules).

Hi ha elements CSS per a taules que permeten als elements de disseny actuar com si fossin una taula, que no generen cap dels problemes que acabem de descriure; pot sonar estrany, perquè els elements de taula s’han d’utilitzar per a dades tabulades, però en alguns casos aquests elements poden resultar útils. Per exemple, pot ser que vulguis dissenyar un formulari amb les etiquetes i les entrades de text alineades; això pot ser complicat de fer, però les taules CSS t’ho faciliten.

Vegem-ne un exemple. Primer, un etiquetatge senzill que crea un formulari HTML. Cada element d'entrada té una etiqueta i també hem inclòs un títol dins d'un paràgraf. Cada parell label/input està etiquetat per un element <div>, amb finalitats de disseny.

<form>
  <p>First of all, tell us your name and age.</p>
  <div>
    <label for="fname">First name:</label>
    <input type="text" id="fname">
  </div>
  <div>
    <label for="lname">Last name:</label>
    <input type="text" id="lname">
  </div>
  <div>
    <label for="age">Age:</label>
    <input type="text" id="age">
  </div>
</form>

Ara afegim el CSS al nostre exemple. La major part del CSS és bastant comú, excepte els usos de la propietat display. L’element <form> i els elements <div>, <label> i <input> s’han anomenat de manera que es mostrin com una taula de files i cel·les respectivament; bàsicament actuaran com un etiquetatge de taula HTML que aliena les etiquetes de text i les entrades de manera predeterminada. Tot el que hem de fer és afegir una mica de mida, marges, etc. perquè tot es vegi una mica més agradable, i ja haurem acabat.

Observa que s’ha assignat al paràgraf de descripció (caption) la declaració display: table-caption;, que fa que aquest paràgraf actuï com un títol de taula (<caption>), i també caption-side: bottom;, que indica que el títol es posa a la part inferior de la taula amb finalitats d'estil, encara que va abans de les entrades de la taula en l’ordre del codi d’origen. Això permet una mica de flexibilitat.

html {
  font-family: sans-serif;
}

form {
  display: table;
  margin: 0 auto;
}

form div {
  display: table-row;
}

form label, form input {
  display: table-cell;
  margin-bottom: 10px;
}

form label {
  width: 200px;
  padding-right: 5%;
  text-align: right;
}

form input {
  width: 300px;
}

form p {
  display: table-caption;
  caption-side: bottom;
  width: 300px;
  color: #999;
  font-style: italic;
}

Això ens dona el resultat següent:

També pots veure aquest exemple en viu en el fitxer css-tables-example.html (i també consultar-ne el codi d’origen).

Nota: En aquest mòdul no explicarem les taules CSS amb més detall.

Caixes flexibles

CSS és un llenguatge poderós, que pot fer moltes coses, però tradicionalment ha caigut en aspectes de disseny. Els mètodes de disseny tradicionals antics com float i positioning funcionen, però de vegades es considera que són més complexos, difícils, poc flexibles i dolents del que haurien de ser. Per exemple, què passa si vols:

  • Que un bloc de contingut es centri verticalment (no només el text, line-height no funcionarà).
  • Que diverses columnes que contenen diferents quantitats de contingut tinguin la mateixa alçada, sense utilitzar una alçada fixada o simular-ho amb imatges de fons.
  • Que diverses caixes en línia ocupin la mateixa quantitat d'espai disponible, independentment de quantes n’hi hagi i de si tenen àrees de farciments, marges, etc.

Els exemples anteriors són pràcticament impossibles d'aconseguir amb CSS ordinari. Per a permetre que aquestes coses es puguin aconseguir fàcilment, es van inventar les caixes flexibles (o flexbox).

Vegem-ne un exemple. Primer, una mica d’HTML senzill:

<section>
  <div>This is a box</div>
  <div>This is a box</div>
  <div>This is a box</div>
</section>

<button class="create">Create box</button>
<button class="reset">Reset demo</button>

Aquí hi ha un element <section> amb tres elements <div> a dins, i un parell de botons per a crear una caixa nova (Create box) i reiniciar la demostració (Reset demo). Amb els mètodes tradicionals anteriors no és possible assignar als elements fill cap disposició de pàgina ni mida de manera predeterminada; hauríem d’assignar a cadascun una mida exacta i uns valors d'amplada, àrea de farciment, vora i marge, i en afegir un altre element fill, caldria canviar del tot tots aquests valors.

Ara ho farem amb caixes flexbox:

html {
  font-family: sans-serif;
}

section {
  width: 93%;
  height: 240px;
  margin: 20px auto;
  background: purple;
  display: flex;
}

div {
  color: white;
  background: orange;
  flex: 1;
  margin-right: 10px;
  text-shadow: 1px 1px 1px black;
}

div:last-child {
  margin-right: 0;
}

section, div {
  border: 5px solid rgba(0,0,0,0.85);
  padding: 10px;
}

Dues línies d'aquest CSS són força interessants:

  • display: flex; indica que els fills de l'element <section> es comporten com caixes flexibles; de manera predeterminada tots elles s'estenen fins que ocupen tota l'alçada disponible de l’element pare, sigui quina sigui, i es disposen en línia, amb una amplada adequada per a omplir tot el contingut.
  • flex: 1; indica que tots els elements <div> han d’ocupar la mateixa quantitat de l'espai disponible en la línia, independentment de quants n’hi hagi.

Reforçarem encara més aquest aspecte sorprenent tot afegint una mica de JavaScript que ens permeti afegir més elements fill <div> en pitjar el botó Crea una caixa. També pots reiniciar la demostració en prémer el botó Reinicia, quan hi hagis afegit massa elements <div>.

Aquí tens l'exemple en viu; tens un joc que et demostra la potència de Flexbox com a eina de disseny.

També podeu trobar aquesta demostració en el fitxer flexbox-example.html (també en pots veure el codi d’origen).

Nota: Per obtenir més informació sobre Flexbox, consulta el nostre article Flexbox.

Disseny de graella (Grid)

La característica més experimental que cal esmentar aquí són les graelles amb CSS, que encara no són ampliament compatibles amb els navegadors. Sovint, les pàgines web es presenten amb sistemes de graella, de la mateixa manera que els mitjans impresos, i la idea aquí és definir una graella i les parts del contingut que s’hi inclouen en cada àrea amb un procés que resulti senzill i natural.

Les graelles en CSS, en l’estat present no tenen una compatibilitat extensa (només en versions experimentals de Firefox i Chrome). IE i Edge admeten una versió antiga i obsoleta d’aquesta tecnologia. Això és quelcom que podem esperar en el futur.

Note: Per a obtenir més informació sobre els marcs de treball (frameworks) actuals de les graelles i d’altres tecnologies que s'utilitzen avui dia, i sobre la propera especificació nadiua de graelles CSS, consulta l'article Graelles (Grids).

Resum

Aquest article ha proporcionat un breu resum de totes les tecnologies de disseny que has de conèixer. Continua llegint per a obtenir més informació sobre cadascuna d’aquestes tecnologies!