CSS Total

Administrador — Fri, 11 Jan 2008 17:23:07 +0000

Uno de los principales problemas que nos encontramos a la hora de diseñar una página web, es el inconveniente de cómo los distintos navegadores interpretan el código que hemos usado en nuestro diseño, no sólo en html, también en flash. Y la gran decepción cuando contemplamos nuestro perfecto trabajo por primera vez en otro navegador que no habíamos contemplado en nuestro diseño. Entonces nos echamos las manos a la cabeza y exclamamos, ¡Dios mio!, ¿pero qué abominación es ésta?, y renegamos de nuestra “criatura” . Tantas horas de trabajo para nada.
Por eso, en primer lugar, lo más recomendable y profesional es usar css en nuestros sitios, de esta forma tendremos un control más rápido y absoluto sobre nuestra página y nos costará mucho menos a la hora de corregir errores y/o cambiar estilos.
Usar css tampoco nos libra de ver destruido nuestro trabajo a causa de las grandes batallas libradas por las multinacionales de la navegación en red (dicho más clarito, por la falta de unificación de criterios sobre la estructura del código html y css, a pesar de las recomendaciones de W3C.
Normalmente, se suele usar los condicionales if (las etiquetas condicionales de este tipo sólo son admitidas por los navegadores de Microsoft, el resto las ignoran) en el header para internet explorer, de forma que si el que vé la página usa internet explorer, usará un css y si es otra clase de navegador usara otro css.
Esto trae consigo una duplicación de archivos css y por lo tanto un espacio inutilmente ocupado en el servidor.
Recomendamos instalarse cuantos navegadores sea posible para poder visualizar nuestro trabajo en todos ellos, de forma que éste quede profesional y no tengamos sorpresas de última hora.
Uno de los navegadores más usados actualmente por su versatilidad y buen comportamiento es firefox, si lo quieres, puedes descargartelo e instalarlo desde el enlace que hay debajo de esta línea.

Existen otro tipo de hacks (parches) para evitar el desastre, que conlleva saber programar en javascript y sobre todo que el navegador que abre nuestra página admita el script, de lo contrario nos comemos la página con patatas (o con arroz para los que no puedan comer patatas). El caso es que no podemos decir, que se fastidien los navegadores que no saben interpretar nuestro código, porque eso no nos beneficia (aunque que desahogo).
Pero tenemos una de las mejores soluciones que se han realizado para este mal que nos aqueja.
La solucion es bien sencilla.
Como ya dije antes, lo ideal es usar “clases” e “id’s” css en nuestra página, teniendo todo en un archivo css, al que llamaremos desde el header de nuestra página de la siguiente forma…

Esto situado entre las etiquetas y .
Y ahora llega nuestro truco.
En este punto tenemos dos opciones, llamar al archivo tuestilo.css como tuestilo.php o guardarlo como tuestilo.css y en el archivo .htaccess de nuestro directorio public_html o si es un dominio añadido o subdominio el archivo .htaccess que está dentro de la carpeta del dominio en public_html/dominio o public_html/subdominio y pegar el siguiente código:
AddHandler application/x-httpd-php .css
Si hacemos esto, tendremos que ponerle el código php que se muestra a continuación a todos nuestros archivos css ( todos los que se vean afectados por el domino en el que se encuentre el archivo .htaccess.
Si el archivo no existe, lo podemos crear o bien con el editor de archivos de nuestro panel de control, o bien editarlo en nuestro ordenador con un editor de texto como el notepad, o cualquier editor html que usemos, guardarlo como .htaccess (el punto antes del nombre es importante) y subirlo a nuestro servidor con un gestor ftp como por ejemplo filezilla.
Para finalizar, en nuestro archivo css tendremos que incluir las siguientes líneas de código al principio del archivo (antes de todo, comentarios incluídos, en la primera línea del archivo).
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”,”LINUX”);
$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;
}
?>

A continuación nuestro código css y en la última línea al final de todo:

y así terminará nuestro archivo.
Para emplearlo, lo que haremos será ver nuestra página en todos los navegadores y observaremos que partes de nuestro css interpreta mal, según qué navegador usemos, entonces lo que haremos es usar el siguiente código (ya dentro de nuestro css) de la siguiente manera…
Pongamos que tenemos la clase #nuestrolayer , que es un div que usamos en nuestra página y resulta que del margen izquierdo un navegador lo interpreta de una manera y otro de otra. Haremos lo siguiente…
#nuestrolayer
{
padding: 20px 0 10px 0px;
margin-left: if ($o == “WIN” && $b == “IE”) {echo “630px;”;}
else {echo “635px;”;}
?>
width: 190px;
}
Esto viene a decir que si el sistema operativo que detecta es Windows y el navegador es Internet Eplorer, el valor de margin-left será de 630 pixels, y si no (si es cualquier otro navegador), el valor será de 635 pixels.
El script de php detecta el sistema operativo, el tipo de navegador y su versión.
Lo mejor de todo esto es que si abrimos el archivo css con un navegador aparece un css distinto a si lo abrimos con otro navegador, y el código php no aparece por ningún lado.
Esperamos que este artículo os sea de mucha utilidad y que sobre todo no tengáis ningún reparo en preguntar, aunque os parezca una pregunta tonta, esto no es un foro de superprogramadores, ni pretende serlo, asi que a preguntar sin miedo
Saludos de la dirección de HostingCrop

Hosting Crop » Diseño

CSS Total