La solución definitiva para los conflictos entre navegadores

[metacortex]

Estaba leyendo este post y se me ocurrió aplicar la técnica para las hojas de estilo. Vean el código fuente de la siguiente página desde distintos navegadores, en especial el nombre de la hoja de estilos:

http://www.darioferrer.com/varios/compatibilidad.php

El código está intacto, lo que hice fue agregar Safari al combo. Esto debe colocarse antes de las etiquetas <link> (en el header):

Código PHP:

  <?php
function ObtenerNavegador($user_agent) {
     $navegadores = array(
          'Opera' => 'Opera',
          'Safari' => 'Safari',
          'Mozilla Firefox'=> '(Firebird)|(Firefox)',
          'Galeon' => 'Galeon',
          'Mozilla'=>'Gecko',
          'MyIE'=>'MyIE',
          'Lynx' => 'Lynx',
          'Netscape' => '(Mozilla/4\.75)|(Netscape6)|(Mozilla/4\.08)|(Mozilla/4\.5)|(Mozilla/4\.6)|(Mozilla/4\.79)',
          'Konqueror'=>'Konqueror',
          'Internet Explorer 7' => '(MSIE 7\.[0-9]+)',
          'Internet Explorer 6' => '(MSIE 6\.[0-9]+)',
          'Internet Explorer 5' => '(MSIE 5\.[0-9]+)',
          'Internet Explorer 4' => '(MSIE 4\.[0-9]+)',
);
foreach($navegadores as $navegador=>$pattern){
       if (eregi($pattern, $user_agent))
       return $navegador;
    }
return 'Desconocido';
}
?>   

Ahora la parte de las hojas de estilo:

Código PHP:

  <?php if(ObtenerNavegador($_SERVER['HTTP_USER_AGENT']) == 'Internet Explorer 6') { ?>
  <link rel="stylesheet" media="screen" type="text/css" href="ie6.css" />
<?php } elseif(ObtenerNavegador($_SERVER['HTTP_USER_AGENT']) == 'Internet Explorer 7') { ?>
  <link rel="stylesheet" media="screen" type="text/css" href="ie7.css" />
<?php } elseif(ObtenerNavegador($_SERVER['HTTP_USER_AGENT']) == 'Operai') { ?>
  <link rel="stylesheet" media="screen" type="text/css" href="opera.css" />
<?php } elseif(ObtenerNavegador($_SERVER['HTTP_USER_AGENT']) == 'Safari') { ?>
  <link rel="stylesheet" media="screen" type="text/css" href="safari.css" />
<?php } else { ?>
  <link rel="stylesheet" media="screen" type="text/css" href="estilos.css" />
<?php } ?>   

Lo mejor es que -al incluir la detección hacia los navegadores que queramos- expande las opciones para el diseñador. Además sólo se visualiza el enlace a la hoja, lo cual no ocurre con el comentario IF, el cual aparece en el código fuente.

Esto puede servir también para solucionar problemas de estructura, tales como algunos menús desplegables u otras cosillas que nos convengan. La imaginación manda. En fin, con esto le digo chao al comentario condicional. Espero les sirva.

[sumolari]

Jaja, está muy bien la idea.

Sólo quiero añadir que con esto además de poder poner estilos distintos en cada navegador también se puede mostrar (o no mostrar) contenidos en función del navegador.

[Mikmoro]

Muy buen descubrimiento.

Si bien es cierto que los comentarios condicionales seguirán siendo útiles para pequeñeces como cambiar un parámetro de un selector nada más, esto tiene buena pinta para olvidarse del resto.

¿Cómo anda de validación y accesibilidad?

Mikel.

[metacortex]

Iniciado por Mikmoro

Muy buen descubrimiento.

Si bien es cierto que los comentarios condicionales seguirán siendo útiles para pequeñeces como cambiar un parámetro de un selector nada más, esto tiene buena pinta para olvidarse del resto.

Hasta eso lo puedes hacer con esta función .

Iniciado por Mikmoro

¿Cómo anda de validación y accesibilidad?

El php sólo cumple instrucciones y devuelve html.

[Mikmoro]

Iniciado por metacortex

Hasta eso lo puedes hacer con esta función .
El php sólo cumple instrucciones y devuelve html.

Cierto, cierto. Lo he pensado después: ¡pero si es php! Qué melón.

Una cosa: ¿no sería mejor añadir al final la carga de la hoja genérica de todos modos, y no bajo un else, para, como se hace ahora, incorporar sólamente las variaciones o diferencias y no tener que duplicar las hojas por completo? Sería más cómodo de edición posterior. Mejor dicho, no al final, sino al principio: cargar la hoja genérica y después If...

Mikel.

[AlvaroG]

La idea está buena, una solución simple al problema

Solo tengo un par de comentarios que hacer:

1.- cuidado con el orden :)
Parte de la identificación de Konqueror es "KHTML (like Gecko)", por lo que según este programa, Konqueror sería identificado como Mozilla

2.- Si la función se usa tal cual está, el vector de navegadores se crea cada vez que se llama a la función. La solución para ganar unos milisegundos es crear el vector fuera de la función y luego hacerlo disponible con global, o declarar la variable como static y en cada ejecución de la función ver si ya tiene su valor o no. La más rápida es la primera opción, pero seguro que a los puristas del diseño de software no les gusta nada, ellos odian las variables globales

3.- Para ahorrar código y mejorar la claridad, propongo cambiar los if por:

Código PHP:

  <?php
$navegador = ObtenerNavegador($_SERVER['HTTP_USER_AGENT']);
 
switch($navegador) {
    case 'Internet Explorer 6': $css = 'ie6'; break;
    case 'Internet Explorer 7': $css = 'ie7'; break;
    case 'Operai' : $css = 'opera'; break;
    case 'Safari': $css = 'safari'; break;
    default: $css = 'estilos';
}
 
?><link rel="stylesheet" media="screen" type="text/css" href="<?php echo $css; ?>.css" />  

incluso podría darse nombres más 'de archivo' al valor devuelto por la función, y luego (aunque se pierda un poco de libertad en la elección del nombre de la hoja de estilos), hacer

Código PHP:

 <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $navegador; ?>.css" />  

Si quieren, llámenme "the masta of da milisécon"

Un puntito arriba para el "pana" metacortex por el aporte


Saludos.

[SidV]

Alvin, sarpado el "switch" que te clavaste...
Sos una masa...

Excelente aporte a los 2...
Gracias.

[metacortex]

Buenísimo Alvlin . Razones como ésta son las que demuestran lo bueno de compartir.

Ahora bien (entrando con el CSS dinámico) suponiendo que queremos fijar un ancho para una etiqueta:

Código PHP:

  <?php
$navegador = ObtenerNavegador($_SERVER['HTTP_USER_AGENT']);
switch($navegador) {
  case 'Internet Explorer 6' : case 'Internet Explorer 7': $css = '541px'; break; // IE6 y IE7 compartiendo la misma configuración
  case 'Opera' : $css = '544px'; break; // En caso de que Opera tampoco se ajuste
  default: $css = '545px';
}
?>

.clase {
  width: <?php echo $css; ?>;
}  

[Squizophrenia]

Yo uso un código parecido en mi sitio. Lo único que he hecho es crear tres hojas de estilos, una para ie5 (ie5syle.css), otra para ie6 (ie6style.css) y otra general para el resto de navegadores (style.css). Todas con css válido adaptado a las deficiencias de los navegadores mencionados.

Código:

<?php
$nav = $_SERVER['HTTP_USER_AGENT'];
$nav = strtolower($nav);
$ie5 = 'msie 5';
$ie6 = 'msie 6';
if(ereg($ie5, $nav)) {$_SESSION['nav'] = 'ie5';}
elseif(ereg($ie6,$nav)) {$_SESSION['nav'] = 'ie6';}
else {$_SESSION['nav'] = '';}?>

Y a la hora de llamar la hoja de estilos:

Código:

<link href="<?php echo $_SESSION['nav']?>style.css" rel="stylesheet" type="text/css" media="screen"/>

Un saludo.

[Mikmoro]

Pero como dije en un mensaje anterior, eso os obliga a duplicar las hojas por completo en lugar de hacer hojas sólo con las diferencias necesarias, lo que complica la edición de cualquier cambio, ¿no?

Mikel.

[Squizophrenia]

Si es cierto, lo que pasa es que los elementos "problemáticos", es decir, los que tienen diferentes anchos u otros valores, los tengo bien apartaditos en una zona del css, repetida para las tres hojas de estilo. Aunque no te creas que se complica demasiado, ya que el único motivo por el que tengo las 3 hojas de estilo es por no dejar de lado a ie5 e ie6, que son incapaces de mostrar correctamente un par de anchos y algun que otro :hover. Un saludo.

[Mikmoro]

No, me refiero a que se complica cuando quieres cambiar algo de un elemento que funciona bien en todos los navegadores. Por ejemplo, si quieres cambiar un fondo, tendrás que editar las tres hojas de estilo, mientras que si cargas la hoja general, y luego según el navegador cargas una hoja sólo con las diferencias con vuestro sistema, al cambiar ese fondo sólo habría que cambiar la hoja general. Vamos, digo yo

Mikel.

[Squizophrenia]

Pues va a ser que tienes razón

Por lo menos, también hemos visto cómo cargar diferentes hojas de estilo según el navegador

Un saludo.

[Mikmoro]

Ah, eso por supuesto, y yo este código me lo copio y guardo, porque como de php controlo poco, seguro que me vendrá muy bien alguna vez. Muchas gracias.

Mikel.

[metacortex]

Iniciado por Mikmoro

No, me refiero a que se complica cuando quieres cambiar algo de un elemento que funciona bien en todos los navegadores. Por ejemplo, si quieres cambiar un fondo, tendrás que editar las tres hojas de estilo, mientras que si cargas la hoja general, y luego según el navegador cargas una hoja sólo con las diferencias con vuestro sistema, al cambiar ese fondo sólo habría que cambiar la hoja general. Vamos, digo yo

Mikel.

Pues sí. Es un problemita serio.

Lo que se me ocurre es trasladar toda esa carga dinámica a la hoja de estilos en lugar del HTML. Para esto tenemos que darle extensión .php a nuestra hoja de estilos.

En el html se incluye como una hoja normal, pero con la extensión distinta:

Código PHP:

  <link href="estilos.php" rel="stylesheet" type="text/css" media="screen"  /> 
   

En estilos.php (la hoja de estilos dinámica) comenzar definiendo el header para que el servidor lo interprete como tal:

Código PHP:

  <?php 
  header("Content-type: text/css"); 
?>   

Luego incluir la función y proceder a cambiar los estilos según vayan presentándose:

Código PHP:

  <?php
 
header("Content-type: text/css"); 
 
function ObtenerNavegador($user_agent) {
     $navegadores = array(
          'Opera' => 'Opera',
          'Safari' => 'Safari',
          'Mozilla Firefox'=> '(Firebird)|(Firefox)',
          'Galeon' => 'Galeon',
          'Mozilla'=>'Gecko',
          'MyIE'=>'MyIE',
          'Lynx' => 'Lynx',
          'Netscape' => '(Mozilla/4\.75)|(Netscape6)|(Mozilla/4\.08)|(Mozilla/4\.5)|(Mozilla/4\.6)|(Mozilla/4\.79)',
          'Konqueror'=>'Konqueror',
          'Internet Explorer 7' => '(MSIE 7\.[0-9]+)',
          'Internet Explorer 6' => '(MSIE 6\.[0-9]+)',
          'Internet Explorer 5' => '(MSIE 5\.[0-9]+)',
          'Internet Explorer 4' => '(MSIE 4\.[0-9]+)',
);
foreach($navegadores as $navegador=>$pattern){
       if (eregi($pattern, $user_agent))
       return $navegador;
    }
return 'Desconocido';
}
 
$navegador = ObtenerNavegador($_SERVER['HTTP_USER_AGENT']);
?>
 
/* Comienzan los estilos normalmente */
 
div.enlace {
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: #777;
  <?php if($navegador == 'Internet Explorer 6') { ?>
  width: 121px;
  <?php } elseif($navegador == 'Opera') { ?>
  width: 123px;
  <?php } else { ?>
  width: 120px;
  <?php } ?>
  height: 30px;
  line-height: 30px;
  margin: 20px auto;
}  

Explicando mejor la propuesta: se incluiría una sola hoja de estilos en lugar de varias. Luego se trabajaría toda esa parte dinámica en la misma. Eso solucionaría el problema. Creo

[Mikmoro]

¿Esto se puede hacer técnicamente? es decir, ¿funciona? ¿y valida? No me hubiera imaginado nunca una hoja de estilo con extensión php.

Desde luego es una solución alucinante. Igual un poco retorcida para gente con menos conocimientos, pero para quien lo domina, de 10.

En mi santa ignorancia de php, pregunto si esto sería posible:

cojo el código de Alvin y le añado una llamada:

<?php
$navegador = ObtenerNavegador($_SERVER['HTTP_USER_AGENT']);

switch($navegador) {
case 'Internet Explorer 6': $css = 'ie6'; break;
case 'Internet Explorer 7': $css = 'ie7'; break;
case 'Operai' : $css = 'opera'; break;
case 'Safari': $css = 'safari'; break;
default: $css = 'estilos';
}

?>
<link rel="stylesheet" media="screen" type="text/css" href="estilos.css" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $css; ?>.css" />

Sé que en este caso, si fuera FF se cargaría dos veces la hoja estilos.css, pero no estoy seguro de si en un switch es obligatorio un default.

En cualquier caso, ¿sería esto posible?

Mikel.

[AlvaroG]

Bueno, en este último caso bien podría eliminarse el 'default' del switch, y añadir un condicional para evitar la carga de la segunda hoja de estilos si no es necesario:

Código PHP:

 <link rel="stylesheet" media="screen" type="text/css" href="estilos.css" />
<?php
$navegador = ObtenerNavegador($_SERVER['HTTP_USER_AGENT']);
 
switch($navegador) {
    case 'Internet Explorer 6': $css = 'ie6'; break;
    case 'Internet Explorer 7': $css = 'ie7'; break;
    case 'Operai' : $css = 'opera'; break;
    case 'Safari': $css = 'safari'; break;
    default: $css = 0;
}
 
if ($css !== 0) { ?>
    <link rel="stylesheet" media="screen" type="text/css" href="<?php echo $css; ?>.css" />
<?php } ?>   

A ver si sirve


Saludos.

[metacortex]

Iniciado por Mikmoro

En mi santa ignorancia de php, pregunto si esto sería posible:

cojo el código de Alvin y le añado una llamada:

Es que caemos en lo mismo. Si bien IE tiene su propio sistema para reconocer la hoja de estilos que le toca, los demás navegadores se basan -en este caso- en estilos.css. La idea es implementar un método que personalice las modificaciones para cada uno.

Pero otro objetivo que se persigue es evitar la redundancia. Al poder meterle lenguaje dinámico a los estilos, no hay motivos para que el trabajo sea mayor. Ahora bien, el esfuerzo inicial es idearse un método para abreviar la labor tanto como se pueda. La última propuesta que presenté -a diferencia de la anterior- no ataca las hojas como tal, sino los estilos de forma individual según los problemas vayan apareciendo.

Iniciado por Mikmoro

¿Esto se puede hacer técnicamente? es decir, ¿funciona? ¿y valida?

Éste en particular no lo he probado pero seguro funciona. Igualmente valida sin problemas.

[Mikmoro]

Iniciado por alvlin

Bueno, en este último caso bien podría eliminarse el 'default' del switch, y añadir un condicional para evitar la carga de la segunda hoja de estilos si no es necesario:

Lo que yo decía, Alvin, es que la hoja general se cargue siempre, no sólo "if ($css !== 0)", y además la primera. De esa manera, tenemos una hoja general que siempre se carga y luego dinámicamente se carga la que corresponda, que sólo contiene los selectores necesarios. Vamos, al más puro estilo del comentario condicional pero con vuestro php. Ahorramos edición en caso de modificaciones posteriores.

Iniciado por metacortex

Es que caemos en lo mismo. Si bien IE tiene su propio sistema para reconocer la hoja de estilos que le toca, los demás navegadores se basan -en este caso- en estilos.css. La idea es implementar un método que personalice las modificaciones para cada uno.

Pero otro objetivo que se persigue es evitar la redundancia. Al poder meterle lenguaje dinámico a los estilos, no hay motivos para que el trabajo sea mayor. Ahora bien, el esfuerzo inicial es idearse un método para abreviar la labor tanto como se pueda. La última propuesta que presenté -a diferencia de la anterior- no ataca las hojas como tal, sino los estilos de forma individual según los problemas vayan apareciendo.

Creo que no me he hecho entender bien. Precisamente lo que digo, como le comento a Alvin, es que siempre se cargue como primera la hoja general, y que luego de forma dinámica se cargue la hoja correspondiente conteniendo sólo las modificaciones necesarias, en muchos casos quizá uno o dos selectores.

Por eso decía si se puede eliminar el default del switch y añadir la carga de la general antes que la carga de la dinámica.

Mikel.

P.D.: y sí, estaba claro que en tu último ejemplo atacas a los estilos individualmente. Puede ser una solución excelente.

[metacortex]

Iniciado por Mikmoro

Lo que yo decía, Alvin, es que la hoja general se cargue siempre, no sólo "if ($css !== 0)", y además la primera.

Te respondo yo: en la parte de arriba del código alvlin cargó la hoja común de fomra estática. Luego la otra se carga según el navegador.

Iniciado por Mikmoro

Creo que no me he hecho entender bien. Precisamente lo que digo, como le comento a Alvin, es que siempre se cargue como primera la hoja general, y que luego de forma dinámica se cargue la hoja correspondiente conteniendo sólo las modificaciones necesarias, en muchos casos quizá uno o dos selectores.

De poder se puede (tal como lo has visto), sólo que no sé si cargando la hoja -por ejemplo- de Opera, las modificaciones a estilos sobreescriban a los de la hoja común. Si el hecho de cargar de último implica sobreescritura (en todos los navegadores) pues la solución es válida.

De todas formas yo me iría por el último ejemplo, ya que contaría con la ventaja de tener todos los estilos (y modificaciones para navegadores) disponibles en una sola hoja, de forma ordenada... Sin contar el hecho de tener php disponible directo en los estilos, lo cual se resume en un montón de ventajas extra que van mucho (pero bastante) más allá de solucionar el lío entre navegadores . La desventaja: se me quita el coloreado del código para la parte de CSS . Aún así lo prefiero.

[Mikmoro]

Iniciado por metacortex

Te respondo yo: en la parte de arriba del código alvlin cargó la hoja común de fomra estática. Luego la otra se carga según el navegador.

Ah, coño, es verdad. No me había dado cuenta. Pues no he dicho nada Eso era exactamente lo que pedía.

Me cuesta imaginar lo que dices de las ventajas porque, aunque entiendo en qué se basa, esto me descuadra (por deconocimiento): código php en una hoja de estilo, que es luego declarada como css para que se interprete bien (<?php header("Content-type: text/css"); ?>), pero que sin embargo acepta funciones...

Se me escapa. Si funciona bien puede ser un cañón, pero yo de momento estoy pez.

Mikel

[AlvaroG]

Iniciado por metacortex

Si el hecho de cargar de último implica sobreescritura (en todos los navegadores) pues la solución es válida.

Pues sí, así funciona en cualquier navegador.
Pero con un detalle,que no sé si seguirá vigente: en mis pruebas (hace ya algún tiempo) si usaba el atributo "title", solamente se cargaba la segunda hoja de estilos, en vez de combinar ambas. No sé por qué, y no recuerdo haber encontrado ningún motivo en la especificación para que sucediera eso... Ahora, si ninguna de las hojas tiene un "title", los estilos se combinan perfectamente. Tendría que hacer de nuevo algunas pruebas en este sentido.

Iniciado por metacortex

De todas formas yo me iría por el último ejemplo, ya que contaría con la ventaja de tener todos los estilos (y modificaciones para navegadores) disponibles en una sola hoja, de forma ordenada... Sin contar el hecho de tener php disponible directo en los estilos, lo cual se resume en un montón de ventajas extra que van mucho (pero bastante) más allá de solucionar el lío entre navegadores . La desventaja: se me quita el coloreado del código para la parte de CSS . Aún así lo prefiero.

Es cierto, tener disponible código PHP puede hacer las cosas interesantes. Quizás podríamos dar algunos ejemplos "extremos" en este tema
Pero para el caso más común, esto no sería necesario. (Creo)


Saludos.

[kabuki]

Hola a todos:
La cosa es increible y buenisima.
los felicito.
Trate de implementar el codigo de la primera propuesta de metacortex y no me corrio. me quede mirando el codigo y no se si se abran fijado, pero creo bueno decirlo por si les pasa a otros. En ese primer post aparece "operai" en la comparacion del if. debe ser "opera"
Nuevamente felicidades por el genio que se han gastado.
Exitos

[nedrek]

Solo un apunte, los HTTP_USER_AGENT a veces son ocultos (incluso cambiados por genéricos o inventados) según la configuración de cada usuario, así que para prevenir (aunque sea un pequeño porcentaje) es recomendable nunca ocultar elementos en la version "default" del CSS...

El aporte es genial, pues yo llevo usando este sistema desde hace meses ;)



Un Saludo!

[VitorGarcia]

Iniciado por metacortex

Pues sí. Es un problemita serio.

Lo que se me ocurre es trasladar toda esa carga dinámica a la hoja de estilos en lugar del HTML. Para esto tenemos que darle extensión .php a nuestra hoja de estilos.

En el html se incluye como una hoja normal, pero con la extensión distinta:

Código PHP:

  <link href="estilos.php" rel="stylesheet" type="text/css" media="screen"  /> 
   

En estilos.php (la hoja de estilos dinámica) comenzar definiendo el header para que el servidor lo interprete como tal:

Código PHP:

  <?php 
  header("Content-type: text/css"); 
?>   

Luego incluir la función y proceder a cambiar los estilos según vayan presentándose:

Código PHP:

  <?php
 
header("Content-type: text/css"); 
 
function ObtenerNavegador($user_agent) {
     $navegadores = array(
          'Opera' => 'Opera',
          'Safari' => 'Safari',
          'Mozilla Firefox'=> '(Firebird)|(Firefox)',
          'Galeon' => 'Galeon',
          'Mozilla'=>'Gecko',
          'MyIE'=>'MyIE',
          'Lynx' => 'Lynx',
          'Netscape' => '(Mozilla/4\.75)|(Netscape6)|(Mozilla/4\.08)|(Mozilla/4\.5)|(Mozilla/4\.6)|(Mozilla/4\.79)',
          'Konqueror'=>'Konqueror',
          'Internet Explorer 7' => '(MSIE 7\.[0-9]+)',
          'Internet Explorer 6' => '(MSIE 6\.[0-9]+)',
          'Internet Explorer 5' => '(MSIE 5\.[0-9]+)',
          'Internet Explorer 4' => '(MSIE 4\.[0-9]+)',
);
foreach($navegadores as $navegador=>$pattern){
       if (eregi($pattern, $user_agent))
       return $navegador;
    }
return 'Desconocido';
}
 
$navegador = ObtenerNavegador($_SERVER['HTTP_USER_AGENT']);
?>
 
/* Comienzan los estilos normalmente */
 
div.enlace {
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: #777;
  <?php if($navegador == 'Internet Explorer 6') { ?>
  width: 121px;
  <?php } elseif($navegador == 'Opera') { ?>
  width: 123px;
  <?php } else { ?>
  width: 120px;
  <?php } ?>
  height: 30px;
  line-height: 30px;
  margin: 20px auto;
}  

Explicando mejor la propuesta: se incluiría una sola hoja de estilos en lugar de varias. Luego se trabajaría toda esa parte dinámica en la misma. Eso solucionaría el problema. Creo

Me ha gustado esta opción pero me parece un poco lioso el tener que meter tantas condicionales en el CSS así que he echo un par de funciones para acortarlo...

Código PHP:

  <?php
 
header("Content-type: text/css"); 
 
function ObtenerNavegador($user_agent) {
     $navegadores = array(
          'Opera' => 'Opera',
          'Safari' => 'Safari',
          'Mozilla Firefox'=> '(Firebird)|(Firefox)',
          'Galeon' => 'Galeon',
          'Mozilla'=>'Gecko',
          'MyIE'=>'MyIE',
          'Lynx' => 'Lynx',
          'Netscape' => '(Mozilla/4\.75)|(Netscape6)|(Mozilla/4\.08)|(Mozilla/4\.5)|(Mozilla/4\.6)|(Mozilla/4\.79)',
          'Konqueror'=>'Konqueror',
          'Internet Explorer 7' => '(MSIE 7\.[0-9]+)',
          'Internet Explorer 6' => '(MSIE 6\.[0-9]+)',
          'Internet Explorer 5' => '(MSIE 5\.[0-9]+)',
          'Internet Explorer 4' => '(MSIE 4\.[0-9]+)',
    );
    foreach($navegadores as $navegador=>$pattern){
       if (eregi($pattern, $user_agent))
       return $navegador;
    }
    return 'Desconocido';
}
 
$navegador = ObtenerNavegador($_SERVER['HTTP_USER_AGENT']);
 
function Valor($valor, $default)
    if $valor == "a" {
        $valor = $default;
    }
    return $valor;
}
 
function valorCSS($valorOpera,$valorSafari,$valorFF,$valorGaleon,$valorMz,$valorMy,$valorLynx,$valorNet,$valorKon,$valorIE7,$valorIE6,$valorIE5,$valorIE4,$default) {
    if $navegador == "Opera" {
        $valor = Valor($valorOpera, $default);
    } else if $navegador == "Safari" {
        $valor = Valor($valorSafari, $default);
    } else if $navegador == "Mozilla Firefox" {
        $valor = Valor($valorFF, $default);
    } else if $navegador == "Galeon" {
        $valor = Valor($valorGaleon, $default);
    } else if $navegador == "Mozilla" {
        $valor = Valor($valorMz, $default);
    } else if $navegador == "MyIE" {
        $valor = Valor($valorMy, $default);
    } else if $navegador == "Linx" {
        $valor = Valor($valorLynx, $default);
    } else if $navegador == "Netscape" {
        $valor = Valor($valorNet, $default);
    } else if $navegador == "Konqueror" {
        $valor = Valor($valorKon, $default);
    } else if $navegador == "Internet Explorer 7" {
        $valor = Valor($valorIE7, $default);
    } else if $navegador == "Internet Explorer 6" {
        $valor = Valor($valorIE6, $default);
    } else if $navegador == "Internet Explorer 5" {
        $valor = Valor($valorIE5, $default);
    } else if $navegador == "Internet Explorer 4" {
        $valor = Valor($valorIE4, $default);
    } else {
        $valor = $default;
    }
    return $valor;
}
?>
 
/* Comienzan los estilos normalmente */
 
div.enlace {
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: #777;
  <?php
  echo "width: " . valorCSS(121, 123, 120, 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a',122) . ";";
  ?>
  height: 30px;
  line-height: 30px;
  margin: 20px auto;
}  

[Jamati]

pues claro, pero si no son páginas PHP ?

[metacortex]

Iniciado por VitorGarcia

Me ha gustado esta opción pero me parece un poco lioso el tener que meter tantas condicionales en el CSS así que he echo un par de funciones para acortarlo...

Te pasaste, estuvo genial . Sólo una pregunta ¿en lugar de 'a' será posible un valor vacío? (' '). Si es así, este array es el ingrediente que faltaba para simplificar el proceso.

Iniciado por Jamati

pues claro, pero si no son páginas PHP ?

¿Quieres decir si son HTML? Pues no funciona.

[VitorGarcia]

Iniciado por metacortex

Te pasaste, estuvo genial . Sólo una pregunta ¿en lugar de 'a' será posible un valor vacío? (' '). Si es así, este array es el ingrediente que faltaba para simplificar el proceso.

¿Quieres decir si son HTML? Pues no funciona.

Si que se podría meter una cadena vacía, puse la 'a' porque creí que se vería mas claro que si paso parámetros vacíos...


En el caso de que no sea PHP pues a pelearse con el CSS como se hizo toda la vida... pa hacer las páginas compatibles con IE y FF yo uso mucho lo del !important

[metacortex]

Gracias por el dato VitorGarcía. Con esto personalmente doy por sentado que es mucho más cómodo y organizado trabajar con una sola hoja que con varias.

Sólo falta una duda por aclarar (duda vieja por cierto). Fue algo que el pana Alvlin mencionó al principio y olvidé preguntarle en el momento:

Iniciado por Alvlin

1.- cuidado con el orden :)
Parte de la identificación de Konqueror es "KHTML (like Gecko)", por lo que según este programa, Konqueror sería identificado como Mozilla

Me quedó la curiosidad de cómo podría ser ese orden.

[VitorGarcia]

Ni idea, yo la verdad es que como soy un poco vago, compruebo en IE6, IE7, Firefox y Safari... el resto los ignoro...

En el ejemplo los puse todos porque estaban ya, que si no...