Entrades etiquetades ‘selectors’

Ús de selectors CSS atípics: els selectors d’atribut

dijous 5 febrer 2009

Quan parlem de selectors CSS sovint ens venen al cap o als ulls expressions d’aquest tipus:

* {...}
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 CSS21 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:

Patró Significat
E[foo] Un element E amb un atribut “foo”
E[foo="bar"] Un element E amb un atribut “foo” i el seu valor és exactament “bar”
E[foo~="bar"] Un element E amb un atribut “foo” que és una llista de valors separats per espais i un d’aquests és “bar”
E[foo^="bar"] Un element E amb un atribut “foo” i el seu valor comença exactament per “bar”
E[foo$="bar"] Un element E amb un atribut “foo” i el seu valor acaba exactament per “bar”
E[foo*="bar"] Un element E amb un atribut “foo” i el seu valor conté la cadena “bar”
E[foo|="bar"] un element E amb un atribut “foo” que és una llista de valors separats per guions i comença per “bar”

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.

Com a curiositat, fa un temps, quan encara no havia sortit Internet Explorer 7 i degut a que les versions anteriors no reconeixien aquest selector, els maquetadors més radicals usaven aquest selector per a tenir dues versions diferents d’un lloc: una per a Internet Explorer i l’altre per als demés navegadors. Això ho podien aconseguir fent regles d’aquest estil:


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

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

No digueu que no és curiós, oi?

Etiquetes:,
Escrit dins de Desenvolupament | Cap comentari »