Foros del web, para los que viven de bits

metacortex · 07-may-2008, 04:42

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 · 07-may-2008, 05:35

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 · 07-may-2008, 07:24

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 · 07-may-2008, 07:37

Cita:

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

.

Cita:

Iniciado por Mikmoro

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

El php sólo cumple instrucciones y devuelve html.

Mikmoro · 07-may-2008, 09:09

Cita:

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.

alvlin · 07-may-2008, 14:36

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 · 07-may-2008, 16:43

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

Excelente aporte a los 2...
Gracias.

metacortex · 07-may-2008, 22:14

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 · 11-may-2008, 10:33

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 · 11-may-2008, 11:24

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 · 11-may-2008, 11:38

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 · 11-may-2008, 11:44

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 · 11-may-2008, 12:13

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 · 11-may-2008, 12:27

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 · 11-may-2008, 13:56

Cita:

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 · 11-may-2008, 15:15

¿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:

Cita:

<?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.

07-may-2008, 04:42	#1 (permalink)
metacortex Moderador Fecha de Ingreso: junio-2004 Ubicación: Venezuela Mensajes: 6.306	La solución definitiva para los conflictos entre navegadores 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. __________________ • Página del PSUV • Joomlaworks Support Team

07-may-2008, 05:35	#2 (permalink)
sumolari Fecha de Ingreso: mayo-2006 Ubicación: Perdido en el tiempo Mensajes: 1.343	Re: La solución definitiva para los conflictos entre navegadores 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. __________________ Pide ubuntu por correo

07-may-2008, 07:24	#3 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.998	Re: La solución definitiva para los conflictos entre navegadores 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.

07-may-2008, 07:37	#4 (permalink)
metacortex Moderador Fecha de Ingreso: junio-2004 Ubicación: Venezuela Mensajes: 6.306	Re: La solución definitiva para los conflictos entre navegadores Cita: 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 . Cita: Iniciado por Mikmoro ¿Cómo anda de validación y accesibilidad? El php sólo cumple instrucciones y devuelve html. __________________ • Página del PSUV • Joomlaworks Support Team

07-may-2008, 09:09	#5 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.998	Re: La solución definitiva para los conflictos entre navegadores Cita: 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.

07-may-2008, 14:36	#6 (permalink)
alvlin import fdw.mod.py Fecha de Ingreso: julio-2005 Ubicación: Rodeado de indios... por suerte son amigos :) Mensajes: 4.091	Re: La solución definitiva para los conflictos entre navegadores 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. __________________ Mi Blog "Por ahora casi nadie me trata de subnormal sin que a los 4 segundos se arrepienta. Porque yo a mis semejantes quiero a todos por igual: en cubitos de 40x40"

07-may-2008, 16:43	#7 (permalink)
SidV Fecha de Ingreso: mayo-2004 Ubicación: CABA - Argentina Mensajes: 243	Re: La solución definitiva para los conflictos entre navegadores Alvin, sarpado el "switch" que te clavaste... Sos una masa... Excelente aporte a los 2... Gracias. __________________ ReC Blog =)

07-may-2008, 22:14	#8 (permalink)
metacortex Moderador Fecha de Ingreso: junio-2004 Ubicación: Venezuela Mensajes: 6.306	Re: La solución definitiva para los conflictos entre navegadores 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; ?>; }` __________________ • Página del PSUV • Joomlaworks Support Team Última edición por metacortex; 30-jun-2008 a las 21:54.

11-may-2008, 10:33	#9 (permalink)
Squizophrenia Fecha de Ingreso: mayo-2008 Ubicación: Barcelona (Spain) Mensajes: 41	Re: La solución definitiva para los conflictos entre navegadores 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.

11-may-2008, 11:24	#10 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.998	Re: La solución definitiva para los conflictos entre navegadores 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.

11-may-2008, 11:38	#11 (permalink)
Squizophrenia Fecha de Ingreso: mayo-2008 Ubicación: Barcelona (Spain) Mensajes: 41	Re: La solución definitiva para los conflictos entre navegadores 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.

11-may-2008, 11:44	#12 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.998	Re: La solución definitiva para los conflictos entre navegadores 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.

11-may-2008, 12:13	#13 (permalink)
Squizophrenia Fecha de Ingreso: mayo-2008 Ubicación: Barcelona (Spain) Mensajes: 41	Re: La solución definitiva para los conflictos entre navegadores 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.

11-may-2008, 12:27	#14 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.998	Re: La solución definitiva para los conflictos entre navegadores 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.

11-may-2008, 13:56	#15 (permalink)
metacortex Moderador Fecha de Ingreso: junio-2004 Ubicación: Venezuela Mensajes: 6.306	Re: La solución definitiva para los conflictos entre navegadores Cita: 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 __________________ • Página del PSUV • Joomlaworks* Support Team

11-may-2008, 15:15	#16 (permalink)
Mikmoro Colaborador Fecha de Ingreso: octubre-2006 Ubicación: A tu espalda Mensajes: 3.998	Re: La solución definitiva para los conflictos entre navegadores ¿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: Cita: <?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.