Si en el seu moment vaig recomanar el llibre Bulletproof Web Design per aquells que volen entrar al món de la maquetació web, recomano ara el CSS Mastery per tots aquells que volen accedir a uns coneixements més avançats d’aquest món, i poder passar així a fer projectes més complexes.

Andy Budd ens avisa des d’un principi: això no és pas un llibre per a novells, sinó que està fet per aquells que vulguin donar una volta més de cargol a la maquetació web. Ho diu amb raó, ja que el llibre comença amb un primer capítol de repàs, però ràpidament accelera per donar pas als següents capítols per entrar en tècniques més complexes, trucs usuals i sobretot, els hacks que no ens podem treure mai de damunt.

És un llibre fàcil de seguir si tenim uns mínims coneixements de CSS i HTML, però sobretot, és fàcil aprendre coses noves i fàcil poder-les posar en pràctica, ja que el llibre bé carregat d’exemples, explicacions de casos d’ús i amb alguna que altra referència de casos reals disponibles a la xarxa. En definitiva, un llibre molt més que recomanable: imprescindible!

Al revisar una mica l’índex, podem veure que el llibre està distribuït en onze capítols, nou dels quals són exposició de tècniques (separades per temàtica) i els dos darrers són l’elaboració de dos exemples o casos d’estudi amb tota la informació adquirida al llarg del llibre:

Setting the foundations

En aquest capítol, com ja he comentat abans, l’autor fa una petita introducció repassant conceptes com els d’especificitat, organització dels documents, els diferents tipus de selectors, etc. Es recomana una lectura, encara que sigui en diagonal, per tal d’entrar en matèria.

Visual formatting model recap

Repàs als diferents models de caixa, flotats i posicionament absolut/relatiu. Problema del doble marge i d’altres trucs.

Background images and image replacement

Repàs al concepte d’imatge de fons. Caixes amb cantonades arrodonides, tècniques per a la simulació d’ombres i repàs a diferents tècniques de reemplaçament d’imatges.

Styling links

Tal i com indica el títol, en aquest capítol es repassen diferents tècniques per a donar estils als enllaços, des d’estilitzar enllaços externs, tècniques per a l’ús d’sprites com a imatges de fons entre d’altres coses.

Styling lists and creating nav bars

En aquest capítol s’aborden diferents tècniques per a realitzar barres de navegació, tan verticals com horitzontals (tècnica d’sliding doors). També explica com crear un mapa d’imatge entre d’altres temes.

Styling forms and data tables

Un dels capítols d’on vaig treure més suc en el seu moment. No només explica temes de CSS sinó que també exposa conceptes sobre el marcat correcte per una taula, estructuració i accessibilitat a formularis i més moltes més coses.

Layout

El típic tema de tot llibre de CSS: layout fix, elàstic, líquid i combinat.

Hacks and filters

Capítol força interessant on s’exposen les tècniques per a separar fulls d’estils per diferents medis o navegadors, trucs per aplicar regles a certs clients, etc.

Bugs and bug fixing

Un altre capítol interessant i força inusual. S’hi recullen els bugs més importants dins del món de la maquetació i diferents tècniques per a identificar tant a aquests com d’altres que no estiguin documentats encara.

Case study 1: More than doodles

És el capítol més llarg de tot el llibre. En ell s’hi descriuen tots els passos que cal seguir per acabar construint la maqueta d’una pàgina, a simple vista força complexa. S’usen molts dels conceptes exposats al llibre, i sobretot s’hi fa especial atenció al tema de les llistes i del model de caixes.

Case study 2: Tuscany luxury resorts

Un exemple força interessant de pàgina amb layout fluid. A més a més, s’apliquen tècniques de posicionament de caixes força interessants i de reemplaçament de text per imatges que cal tenir força en compte.

En definitiva, i per tancar la ressenya, un llibre que cal comprar i llegir per ser un bon expert en el tema.

<div style="margin: 5px;">
    <em>Aquest contingut el vull en lletra cursiva</em>
    <small><a onclick="window.location='/lipsum'" href="http://www.example.com">Lorem ipsum dolor</a></small>
</div>

Normalment la majoria de programadors som ben conscients de la incorrecció del fragment anterior, però sovint ens trobem incorreccions d’aquest tipus completament encobertes, i sempre seguint el mateix patró: el mal ús dels noms de classe dels elements.

Usaré exemples de la xarxa per a il·lustrar el que vull dir. Si anem a la portada de la pàgina d’una institució molt important del país podem trobar coses així (canvio els texts per centrar l’atenció):

<ul id="ul_home">
	<li><a class="vermell_nobullet_2" href="http://www.example.com">Ipse quat erimo</a></li>
	<li><a class="vermell_nobullet_2" href="http://www.example.com/dog">Sailer due rit</a></li>
</ul>

<div class="marge_superior">
    <h2><span id="actualitat" class="titol_seccio">Lorem ipsum</span></h2>
</div>
<div id="altres_serveis" class="border_top">
    <div class="border_bottom">
        <a class="text_gris" href="http://www.example.com/bird">Dolor et sumum</a>
    </div>
</div>

El valor de l’atribut @class d’alguns dels elements ja ens dóna informació de com s’estilitzaran al veure-ho associat al seu full d’estils.

Però sovint no es veu tan fàcilment la incorrecció a l’assignació dels noms de les classes. Per exemple, és ben normal trobar-nos sempre al fragment de descripció de l’organització d’un document, classes del tipus:

<body class="3-columnes">
    <div class="columna-esquerra">
        Lorem ipsum
    </div>
    <div class="columna-central">
        Dolor set
    </div>
    <div class="columna-dreta">
        Icse et luopir
    </div>
</body>

Hi veieu res d’estrany? Per saber si les classes són reveladores de la forma final, només cal que us feu la següent pregunta: podríeu saber quina és la forma final de la pàgina només llegint l’HTML? Si la resposta és sí, les classes són errònies. Si és no, doncs la cosa ja està millor.

Per exemple, una forma correcte de fer la divisió del document podria ser:

<body class="layout-complet">
    <div class="contingut-primari">
        Lorem ipsum
    </div>
    <div class="contingut-secundari">
        Dolor set
    </div>
    <div class="contingut-terciari">
        Icse et luopir
    </div>
</body>

Oi que ara ja no us espereu com serà el document final?

Per tant, cal anar amb compte a l’hora d’assignar els noms a les classes. Sempre cal tenir ben present de separar la forma o presentació del contingut i anar una mica amb peus de plom a l’hora de cercar els valors. Així aconseguirem que els nostres documents siguin 100% independents de la forma en que es visualitzen.

El típic error

Si donem una volta per la xarxa, el que sovint trobem escrit i recomanat, és l’ús de la propietat display: none per a ocultar elements. Amb això satisfem la nostra voluntat de que l’ull humà no percebi el contingut, però el problema és que sovint, els lectors de pantalla tampoc n’interpreten res.

Podríem dir que display: none significa que l’element no existeix: ni es mostra, ni s’imprimeix, ni es llegeix el seu contingut.

La solució

Una tècnica alternativa que es pot considerar és la de posicionar l’element que volem amagar de forma absoluta fora del viewport. Així, l’element existeix però no es percep per l’ull humà. El CSS que podem usar és:

.access {
    left: -9999px;
    position: absolute;
}

Amb això aconseguim el mateix efecte visual però sense ignorar a una part dels usuaris.

Tot això no és pas invenció meva, sinó que és una adaptació d’un article que vaig llegir fa uns dies.

* {...}
e {...}
e f {...}
e > f {...}
e, f {...}

Però dins l’àmbit de selectors, hi ha tot un món de possibilitats que ens poden ajudar molt al nostre dia a dia (sinó, doneu-li un cop d’ull a l’apartat de selectors de l’especificació de CSS2¹ o de CSS3).

Del gran conjunt de selectors, en aquesta entrada vull parlar una mica i posar diversos exemples de com treure-li profit als selectors d’atribut. Abans de continuar, i per variar una mica, aquest tipus de selectors no funcionen en Internet Explorer 6 o anterior.

Els selectors d’atribut són els següents:

Per exemplificar l’ús d’aquest tipus de selectors, prendrem com a cas d’ús la personalització d’enllaços en diferents situacions.

Per exemple, i tal i com es fa en aquest bloc amb els enllaços, podríem voler adjuntar de forma visible pel lector quin és l’idioma de la pàgina enllaçada. Aquí ho fem amb la següent regla:

a[hreflang]:after {
  content: " ["attr(hreflang)"]";
  font-size: 0.8em;
}

Seguint l’exemple dels idiomes, podríem voler marcar l’enllaç d’un cert idioma amb una icona gràfica al seu voltant. Per exemple, en el cas del català, ho podríem fer de la següent manera:

a[hreflang="ca"] {
  background: url(icona-catala.png) no-repeat right center;
  padding-right: 1em;
}

Seguint amb aquests exemples, imaginem-nos que tenim un enllaç on el seu atribut rel té el conjunt de valors friend met co-worker muse i volem caracteritzar els amics amb una icona especial al costat de l’enllaç. Doncs bé, ho podríem fer amb el següent codi:

a[rel~="friend"] {
  background: url(icona-amic.png) no-repeat right center;
  padding-right: 1em;
}

Si ens interessés destacar amb alguna icona, tots els enllaços que tinguessin com a destí el W3C, podríem fer servir el següent codi:

a[href^="http://www.w3c.org"] {
  background: url(icona-w3c.png) no-repeat right center;
  padding-right: 1em;
}

O per exemple, si volguéssim posar-li una icona del format del fitxers enllaçat, podríem usar el següent codi pel cas del PDF:

a[href$=".pdf"] {
  background: url(icona-pdf.png) no-repeat right center;
  padding-right: 1em;
}

Seguint amb tot això, si volem tenir un enllaç caracteritzat si el seu atribut title o l’href conté la paraula “css”, podem usar el següent codi:

a[title*="css"][href*="css"]:after {
  color: #000;
  content: " (enllaç sobre CSS)";
  font-size: 0.8em;
}

I per acabar amb el darrer selector i tornant amb els exemples de la caracterització d’enllaços segons el seu idioma, podríem voler caracteritzar tots els enllaços en anglès amb una icona, independentment de si és anglès americà (en-US) o el general (en):

a[hreflang|="en"] {
  background: url(icona-angles.png) no-repeat right center;
  padding-right: 1em;
}

Amb tots aquests exemples, es pot veure que gràcies a aquest selector, se’ns obra tot un món de possibilitats a l’hora de caracteritzar diversos elements.

div#contenidor {
  /* estils per a IE6 i anteriors */
}

div[id="contenidor"} {
  /* estils per als altres navegadors */
}

Doncs bé, aniré exposant l’organització i els convenis que jo segueixo, classificat en apartats per una fàcil comprensió.

Normes generals de tractament d’arxius

• El nom dels arxius, tant de text com d’imatges, estarà sempre en minúscules i, en cas d’estar format per més d’una paraula, s’usarà el guió com a separador.
• Tots els fitxers de text estaran codificats en UTF-8.
• Els tabuladors tindran una mida de dos espais.

Estructura de directoris

Si partim de l’arrel del nostre projecte, es poden trobar els següents directoris:

• assets: Dins d’aquest directori trobarem tots els elements que formen part de la maqueta i que complementen a l’HTML. Cal tenir en compte que en aquest nivell, no s’hi trobarà cap arxiu, sinó només directoris on s’organitzaran els tipus de recursos (fulls d’estils, imatges, etc.).
  • css: En aquest directori trobarem tots els full d’estils del projecte.
  • img: En aquest directori trobarem totes les imatges que sigui necessàries per a visualitzar correctament la maqueta. aquestes imatges poden ser, per exemple, icones, botons, imatges de fons, etc., però mai imatges d’exemple (imatges d’una notícia, d’un contingut, etc.). Les imatges estaran sempre en format PNG.
  • js: En aquest directori trobarem tots els arxius javascript que formen part de l’aplicació; tant el codi generat com qualsevol de les biblioteques que s’usi (jQuery, protoype, etc.).
• images: Dins d’aquest directori trobarem les imatges de contingut que s’usen per a posar exemples a la maqueta però que no formen part d’aquesta.

No s’ha dit, però els fitxers HTML estaran sempre a l’arrel del projecte. Com es veu, l’estructura està pensada perquè sigui fàcil integrar, ja que només cal agafar la carpeta assets amb tot el que conté per tal de tenir tot el que es necessita per a una correcta visualització. Tant els arxius HTML com la carpeta images, es poden descartar una vegada la integració estigui feta.

Normes a l’HTML

• El DOCTYPE serà XHTML1.0 Strict, sempre i quan la natura de l’aplicació no en demani un de diferent.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

• El nom de les classes i dels identificadors dels elements seran sempre en català i s’escriuran en minúscules i, en cas d’estar format per més d’una paraula, s’usarà el guió com a separador.

  <div id="columna-metadades" class="bloc">
      ...
  </div>

Normes al CSS

• Sempre i quan la mida del projecte ho permeti, tots els estils s’escriuran en un sol fitxer que anomenarem sempre styles.css. En cas que necessitem d’un fitxer d’estils especial per a Internet Explorer, aquest s’anomenarà, styles-ie6.css (per la versió 6 del navegador), styles-ie7.css (per la versió 7 del navegador) o styles-ie.css (en cas que no calgui diferenciar de versió de navegador); i es vincularà dins de l’HTML amb comentaris condicionals.
• L’arxiu sempre començarà amb la directiva @charset.
• Just després de la directiva de codificació, s’introdueix una taula de continguts per tal d’organitzar l’arxiu d’estils. Les capçaleres que facin referència a la taula dins del full d’estils, seguiran el següent patró:
  • Aniran entre comentaris de CSS (/**/).
  • A la primera línia, després d’iniciar el comentari i abans del títol, hi haurà tants guions com nivell dins de la taula de continguts es trobi; és a dir, si és un títol de primer nivell tindrà només un guió, si és de segon nivell, tindrà dos guions, i així anant fent.
  • Es fa un retorn de carro, i es posen 78 guions i es tanca el comentari (tot per fer una divisió de 80 caràcters).
• L’estil d’obertura i tancament de claus serà la que varen proposar Kerninghan-Ritchie al seu tractat sobre el llenguatge de programació C; la primera clau va just després del predicat (separant amb un espai) i la clau de tancament va just després d’un retorn de carro.
• Els estils s’escriuen en bloc i sempre precedits per un tabulador. Dintre de cada bloc, les directives s’ordenen en ordre alfabètic ascendent.
• Un exemple de full d’estil podria ser:

  @charset "utf-8";
  /*
    TdC:
      - Elements genèrics
      - Capçalera
        - Regió capçalera
      - Estructura del contingut
        - Sense columnes
        - Una columna + contingut
        - Dues columnes + contingut
      - Peu
  */
  
  /*- Elements genèrics
  -----------------------------------------------------------------------------*/
  body {
    color: #333;
    font-size: 62.5%;
    margin: 0 auto;
  }
  
  /*- Capçalera
  -----------------------------------------------------------------------------*/
  ...
  
  /*-- Regió capçalera
  -----------------------------------------------------------------------------*/
  ...

Normes al javascript

• Sempre i quan la mida del projecte ho permeti, el javascript anirà tot dins d’un sol fitxer amb nom script.js. En cas de necessitar-ne més, el criteri de nomenclatura haurà de ser racional.
• El nom de les classes i dels identificadors dels elements que s’usin només per al javascript, seguiran les mateixes normes d’escriptura, però amb la diferència que seran en anglès per poder diferenciar-les de les que són pròpiament d’estructura.
• Tant les variables com les funcions s’ecriuran en CamelCase. En el meu cas, tant el nom de les variables com els de les funcions els escriurem en angès.
• No s’integraran biblioteques al projecte sempre i quan el seu ús no estigui justificat, és a dir, per a fer manipulacions mínimes del DOM no cal carregar jQuery. Passa el mateix amb l’ús d’extensions de les biblioteques: només s’usaran si es justifiquen molt els seus beneficis.
• Tot el codi estarà documentat seguint JSDoc. Un bon programador sap que la documentació és útil, però l’abús d’aquesta ocasiona problemes.

Cal tenir present que aquest conjunt de normes són les que uso jo; no són ni un estàndard ni la millor manera de fer-ho, sinó una forma de fer-ho.

Si algú té cap conveni o norma que creieu que pot ser interessant, deixeu-ho en un comentari i així podem anar complementant-ho tot plegat.

Posem un exemple. Imaginem-nos que estem creant un botó d’imprimir “especial”. El que volem aconseguir és que al fer clic a la icona d’exportació de la nostra pàgina, es desplegui un menú d’opcions on ens permeti obtenir la vista actual en PDF, en XML o en HTML sense estils (per posar un exemple). Com som bona gent i ens preocupa de debò l’accessibilitat, volem que, en cas de tenir el javascript inhabilitat o no disposar de suport per aquest, el que es visualitzi sigui el literal “Exportar a “, i la llista d’opcions que he explicat abans, una darrera l’altra. Total, que el nostre component ha de tenir dues representacions diferents, és a dir, dos conjunts d’estils ben diferents.

I com fer que un component tingui dues representacions? Doncs bé, jo explicaré aquí la tècnica que jo uso al meu dia a dia.

El que farem serà marcar el document amb una classe en cas que tinguem javascript habilitat, i així, des del nostre full d’estils, podrem diferenciar entre una representació i l’altra de la següent forma:

.element-que-interessa {
    /* Aquí van els estils per l'element en cas de no disposar de suport javascript */
    ...
}

.marca-document .element-que-interessa {
    /* Aquí van els estils per l'element en cas de disposar de javascript */
    ...
}

Una vegada explicada la idea, anem a l’acció. Personalment, el que jo faig és marcar l’etiqueta /html amb la classe js al principi del fitxer javascript:

document.documentElement.className = "js";

I llavors, al full d’estil, usar aquesta classe per a diferenciar-ho. Aplicat al nostre exemple:

.menu-exportacio {
    /* estils de la representació quan no hi ha javascript */
}

.js .menu-exportacio {
    /* estils per a la representació amb javascript */
}

Cal tenir present que aquesta tècnica pot ser útil quan, per exemple, volem amagar alguna porció del nostre document en cas de disposar de javascript (per exemple les àncores al contingut, barra lateral i demés) o fins i tot, per a diferenciar els estils que s’aplicaran a elements introduïts al document de forma dinàmica mitjançant javascript.

Portada del llibre Bulletproof Web Design

Aquest és el segon llibre d’en Dan Cederholm, fundador de SimpleBits. És el primer llibre que vaig llegir d’aquest gran expert, i he de dir que em va deixat un molt bon sabor de boca.

El llibre que posseeixo i del qual vull fer aquesta petita ressenya, és la primera versió que data del 2006, però actualment ja existeix una segona versió de l’agost del 2007 que també he pogut fullejar, i que a més a més de modificar alguna errada d’impremta del llibre, afegeix algun nou apartat i actualitza els existents amb noves característiques de navegadors.

Com bé resa el títol i subtítol del llibre, Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS, ens ajudarà crear maquetes a prova de bales.

Sota el meu punt de vista, aquest és un molt bon llibre per aquells que volen iniciar-se al món de la maquetació, ja que comença poc a poc explicant l’estructura bàsica d’un document XHTML i d’un CSS i va avançant en els capítols fins acabar construint un petit exemple d’una pàgina amb dues columnes.

És un llibre molt didàctic ja que trobem molts exemples a cada capítol que es desenvolupen mica en mica i que s’explica fins a l’últim detall de cada decisió que es pren, aportant sovint alternatives de marcatge per tal que ho tinguem tot present. A més a més, una cosa que em va agradar molt d’aquest llibre fou els consells que dóna mentre avances, com per exemple, marcatge que es pot generar via Javascript per eliminar les etiquetes innecessàries, alguns consells d’accessibilitat, etc. Igualment, trobo que la progressió dels temes que fa agrupats als capítols és força correcte, tot ajudant als que comencen amb aquests temes a introduir-s’hi poc a poc i de forma ordenada.

Tot seguit poso un petit índex amb els capítols del llibre i una breu explicació:

Flexible text

Com a primer capítol que és, ens explica una lliçó ben bàsica: com gestionar la mida del text del nostre document. Explica les diferències entre mides absolutes i relatives, i explica el mètode que ell segueix, els percentatges.

Scalable navigation

Típic exemple de generació d’un menú amb pestanyes i la tècnica de les portes corredisses. Molt útil per començar-se a familiaritzar amb les imatges de fons, la diferència entre border, margin i padding i el model de caixa.

Expandable rows

En aquest capítol explica com crear una barra (ja sigui de navegació, cerca, una capçalera, etc.) que s’expandeix de forma correcta. Interessant.

Creative floating

Introducció a les caixes flotants tot construint una petita galeria de fotografies.

Indestructible boxes

Qui no ha hagut d’enfrontar-se algun cop a maquetar un disseny amb caixes? Sembla que actualment la majoria li hem agafat gràcia a aquest element. Doncs bé, aquest capítol ens explica com crear maquetes amb aquest element tot progressant en dificultat amb les diverses alternatives que se’ns pots presentar.

No images? No CSS? No problem

Possiblement el capítol més interessant que té el llibre sota el meu punt de vista. Sovint anem posant imatges de fons al nostre document, però sovint mai ens preocupem de com veu la pàgina algú que no veu les imatges de fons. I si tenim els CSS inhabilitats o bé el nostre navegador no els interpreta? Doncs bé, en aquest capítol ens explica forces tècniques, trucs i consells per tal de poder crear una maqueta robusta i a prova de bales.

Convertible tables

La gent que es pensa que les taules es limiten a /table, /tr i /td està molt equivocada. En aquest capítol, a més a més de descobrir-nos com s’han d’escriure les taules semànticament correctes, també ens explica com els hi podem donar una vista atractiva amb els fulls d’etils.

Fluid layouts

Què seria un llibre de CSS sense el típic capítol de creació de layout? Doncs bé en aquest capítol ens explica com crear-ne un de fluït amb dues i tres columnes, quins són els típics problemes que ens hi podem trobar i com donar-lis solució.

Putting it all together

El darrer capítol ho posa tots els conceptes en joc per a crear una petita pàgina d’inici amb dues columnes i capses per al contingut lateral. Una bona manera de tancar el llibre i posar tots els conceptes en joc per a resoldre un problema que serà el dia a dia d’un maquetador.

Doncs bé, per tancar aquesta ressenya, només dir que és un llibre a considerar si és que volem entrar al món de la maquetació web, o bé, si ja tenim alguns coneixements, intentar posar-los tots en ordre a la nostra ment tot seguint un guió redactat per un gran expert.

Una compra molt recomanable.