Tipus de Hack CSS
Arrel del darrer article d’en David m’ha semblat convenient llistar alguns dels tipus de hack pels nostres fulls d’estil CSS. És cert que hi ha navegadors que ens treuen de polleguera, ja que és freqüent que els navegadors (especialment els més antics, i especialíssimament Internet Explorer 6) interpretin els estils una mica “a la seva manera”, estils que d’altra banda són completament estàndard per a les darreres versions dels navegadors.
Podem resar per a que el percentatge d’usuaris de, per exemple, Internet Explorer 6 (IE 6) disminueixi. I probablement acabarà passant. El problema és que el 25% d’usuaris que utilitzen aquest navegador encara és un nombre d’usuaris elevat, i personalment crec que no ens podem permetre el luxe d’ignorar aquest percentatge, tot i la pèrdua de temps que representa destinar més hores del compte per retocar el codi i optimitzar-lo per a navegadors que ja tenen 9 anys de vida.
Els hacks són una manera, no gaire ortodoxa, de dir al navegador que ignori o que només faci cas a algun estil en concret. Per exemple: un estil que funciona correctament amb Firefox i amb IE 7, pot no funcionar amb IE 6. El hack ens permet d’escriure una propietat compatible amb IE 6 i que només aquest navegador pugui interpretar, ignorant completament la propietat que era compatible per a Firefox i IE 7. Seria com dir: “Firefox i IE 7, vosaltres dos feu això, i tu, IE 6, fes aquesta altra cosa”.
1. Condicionals
Bàsicament son per a Internet Explorer i s’apliquen directament al codi HTML, generalment dins el tag <head>
Positiu:
<!–[if condició]> HTML <![endif]–>
Negatiu:
<!–[if !condició]><![IGNORE[--><![IGNORE[]]> HTML <!–<![endif]–>
Tipus de condicions:
IE
Qualsevol versió d’Internet Explorer
lt IE X
Versions inferiors a X (p.e.: IE 7)
lte IE X
Versions inferiors o iguals a X
IE X
Només per a la versió X
gte IE X
Versions superiors o iguals a X
gt IE X
Versions superiors a X
Exemple:
<html>
<head>
<title>Test</title>
<link href=”all_browsers.css” rel=”stylesheet” type=”text/css”>
<!–[if IE]> <link href=”ie_only.css” rel=”stylesheet” type=”text/css”> <![endif]–>
<!–[if lt IE 7]> <link href=”ie_6_and_below.css” rel=”stylesheet” type=”text/css”> <![endif]–>
<!–[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href=”recent.css” rel=”stylesheet” type=”text/css”> <!–<![endif]–>
</head>
<body>
<p>Test</p>
</body>
</html>
2. Hacks en línia
Són els que apliquem directament al full d’estils CSS. Alguns d’ells son:
IE 6 i anteriors
* html {font-weight:bold;}
IE 7
*:first-child+html {font-weight:bold;}
Firefox 2
.foo, x:-moz-any-link {font-weight:bold;}
Firefox 3
.foo, x:-moz-any-link, x:default {font-weight:bold;}
Opera 9 i anteriors
html:first-child {font-weight:bold;}
3. Altres
!important
Internet explorer 6 i les versions anteriors no llegeixen aquest operador, cosa que si que fan els moderns. Funciona de manera que els navegadors moderns donen més importància a la informació que conté aquest operador.
background: green !important; /* Navegadors superiors a IE 6 respectaran la seva importància i aplicaran aquest estil */
background: red; /* IE 6 i anteriors aplicaran aquest estil */
@import “non-ie.css” all;
Internet Explorer 7 i les versions anteriors no respecten aquest operador. Això ens permet de crear un full d’estils que els navegadors IE no carregaran
@import “stylesheet.css” all;
4. No recomanats
Tot i que aparentment poden funcionar correctament, hi ha hacks poc recomanats ja que no superen la validació de la W3c.
_propietat: valor
-propietat: valor
*propietat: valor
:empty
>body {}
!important! (no confondre amb “!important” que hem esmentat abans, ja que aquest conté un caràcter no alfanumèric al darrera)
Comentaris recents