Hacks CSS Valid

Problema:

CSS que se adapte al navegador para que nuestro código sea cross-browser, sin utilizar hacks que provoquen errores de validación css2.0 ó css3.0.

Notas:

Para la solución del problema se usan ficheros PHP pero es igualmente válida para cualquier otro lenguaje de servidor.

El ejemplo se basa en el index.php de un tempalte Joomla, donde utilizamos el template.css para todos los navegadores más otros ficheros css que amplían o sobreescrbien a éste.

Solución

En la cabecera html, como último link a una css  (para que en el caso que sea necesario pueda sobreescribir los estilos anteriores) pondremos lo siguiente:

<link rel=”stylesheet” href=”templates/mi_template/css/styles.php” type=”text/css” />

Donde, como se puede ver, enlazamos con un fichero PHP, pero se le indica al navegador que el enlace es a una css.

En el PHP enlazado querremos obtener información sobre el navegador que se está usando para poder adaptar el código a éste. el script es el siguiente:

<?php

header(“Content-type: text/css”);

$d = detect();

$b = $d['browser'];

$v = $d['version'];

$o = $d['os'];

function detect()

{

$browser = array (“IE”,”OPERA”,”MOZILLA”,”NETSCAPE”,”FIREFOX”,”SAFARI”);

$os = array (“WIN”,”MAC”);

$info['browser'] = “OTHER”;

$info['os'] = “OTHER”;

foreach ($browser as $parent)

{

$s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent);

$f = $s + strlen($parent);

$version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);

$version = preg_replace(‘/[^0-9,.]/’,”,$version);

if ($s)

{

$info['browser'] = $parent;

$info['version'] = $version;

}

}

foreach ($os as $val)

{

if (eregi($val,strtoupper($_SERVER['HTTP_USER_AGENT']))) $info['os'] = $val;

}

return $info;

}

if ($b == “IE” && $v == 6){

include ‘ie6.css’;

}

else if($b == “IE” && $v == 7){

include ‘ie7.css’;

}

else if($b == “IE” && $v == 8){

include ‘ie8.css’;

}

?>

<?php

header(“Content-type: text/css”);

$d = detect();

$b = $d['browser'];

$v = $d['version'];

function detect()

{

$browser = array (“IE”,”OPERA”,”MOZILLA”,”NETSCAPE”,”FIREFOX”,”SAFARI”);

$info['browser'] = “OTHER”;

$info['os'] = “OTHER”;

foreach ($browser as $parent)

{

$s = strpos(strtoupper($_SERVER['HTTP_USER_AGENT']), $parent);

$f = $s + strlen($parent);

$version = substr($_SERVER['HTTP_USER_AGENT'], $f, 5);

$version = preg_replace(‘/[^0-9,.]/’,”,$version);

if ($s)

{

$info['browser'] = $parent;

$info['version'] = $version;

}

}

return $info;

}

if ($b == “IE” && $v == 6){

include ‘ie6.css’;

}

else if($b == “IE” && $v == 7){

include ‘ie7.css’;

}

else if($b == “IE” && $v == 8){

include ‘ie8.css’;

}

?>

Como vemos en función del navegador y versión que encontremos incluimos una u otra css, donde se incluirán los códigos específicos para dicho navegador que ampliarán o sobreescribirán los estilos genéricos definidos previamente.

Con esto ya podemos tener nuestro código crossbrowser css válido.

Referencias:

http://www.stylegala.com/articles/no_more_css_hacks.htm

Advertisement