Foros del Web » Creando para Internet » CSS »

La solución definitiva para los conflictos entre navegadores

Estas en el tema de La solución definitiva para los conflictos entre navegadores en el foro de CSS en Foros del Web. 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 ...

  #1 (permalink)  
Antiguo 07/05/2008, 05:42
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
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.
  #2 (permalink)  
Antiguo 07/05/2008, 06:35
Avatar de sumolari  
Fecha de Ingreso: mayo-2006
Ubicación: localhost
Mensajes: 1.367
Antigüedad: 11 años, 7 meses
Puntos: 18
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.
  #3 (permalink)  
Antiguo 07/05/2008, 08:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #4 (permalink)  
Antiguo 07/05/2008, 08:37
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: La solución definitiva para los conflictos entre navegadores

Cita:
Iniciado por Mikmoro Ver Mensaje
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 Ver Mensaje
¿Cómo anda de validación y accesibilidad?
El php sólo cumple instrucciones y devuelve html.
  #5 (permalink)  
Antiguo 07/05/2008, 10:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: La solución definitiva para los conflictos entre navegadores

Cita:
Iniciado por metacortex Ver Mensaje
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.
  #6 (permalink)  
Antiguo 07/05/2008, 15:36
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
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.
  #7 (permalink)  
Antiguo 07/05/2008, 17:43
 
Fecha de Ingreso: mayo-2004
Ubicación: CABA - Argentina
Mensajes: 278
Antigüedad: 13 años, 7 meses
Puntos: 3
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 =)
  #8 (permalink)  
Antiguo 07/05/2008, 23:14
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
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?>;
}

Última edición por metacortex; 30/06/2008 a las 22:54
  #9 (permalink)  
Antiguo 11/05/2008, 11:33
Avatar de Squizophrenia  
Fecha de Ingreso: mayo-2008
Ubicación: Barcelona (Spain)
Mensajes: 41
Antigüedad: 9 años, 7 meses
Puntos: 2
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.
  #10 (permalink)  
Antiguo 11/05/2008, 12:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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 (permalink)  
Antiguo 11/05/2008, 12:38
Avatar de Squizophrenia  
Fecha de Ingreso: mayo-2008
Ubicación: Barcelona (Spain)
Mensajes: 41
Antigüedad: 9 años, 7 meses
Puntos: 2
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.
  #12 (permalink)  
Antiguo 11/05/2008, 12:44
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #13 (permalink)  
Antiguo 11/05/2008, 13:13
Avatar de Squizophrenia  
Fecha de Ingreso: mayo-2008
Ubicación: Barcelona (Spain)
Mensajes: 41
Antigüedad: 9 años, 7 meses
Puntos: 2
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.
  #14 (permalink)  
Antiguo 11/05/2008, 13:27
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #15 (permalink)  
Antiguo 11/05/2008, 14:56
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: La solución definitiva para los conflictos entre navegadores

Cita:
Iniciado por Mikmoro Ver Mensaje
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
  #16 (permalink)  
Antiguo 11/05/2008, 16:15
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
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.
  #17 (permalink)  
Antiguo 11/05/2008, 16:52
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Re: La solución definitiva para los conflictos entre navegadores

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.
  #18 (permalink)  
Antiguo 11/05/2008, 17:03
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: La solución definitiva para los conflictos entre navegadores

Cita:
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.

Cita:
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.
  #19 (permalink)  
Antiguo 11/05/2008, 17:55
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: La solución definitiva para los conflictos entre navegadores

Cita:
Iniciado por alvlin Ver Mensaje
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.

Cita:
Iniciado por metacortex Ver Mensaje
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.
  #20 (permalink)  
Antiguo 11/05/2008, 18:25
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Re: La solución definitiva para los conflictos entre navegadores

Cita:
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.

Cita:
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.
  #21 (permalink)  
Antiguo 11/05/2008, 18:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: La solución definitiva para los conflictos entre navegadores

Cita:
Iniciado por metacortex Ver Mensaje
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
  #22 (permalink)  
Antiguo 11/05/2008, 20:33
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Re: La solución definitiva para los conflictos entre navegadores

Cita:
Iniciado por metacortex Ver Mensaje
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.

Cita:
Iniciado por metacortex Ver Mensaje
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.
  #23 (permalink)  
Antiguo 16/05/2008, 21:18
 
Fecha de Ingreso: febrero-2007
Mensajes: 62
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: La solución definitiva para los conflictos entre navegadores

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
  #24 (permalink)  
Antiguo 18/05/2008, 08:50
 
Fecha de Ingreso: abril-2008
Ubicación: -
Mensajes: 156
Antigüedad: 9 años, 7 meses
Puntos: 5
Respuesta: La solución definitiva para los conflictos entre navegadores

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!
  #25 (permalink)  
Antiguo 25/05/2008, 08:35
 
Fecha de Ingreso: mayo-2008
Mensajes: 42
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Re: La solución definitiva para los conflictos entre navegadores

Cita:
Iniciado por metacortex Ver Mensaje
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(121123120'a''a''a''a''a''a''a''a''a''a',122) . ";";
  
?>
  height: 30px;
  line-height: 30px;
  margin: 20px auto;
}
  #26 (permalink)  
Antiguo 25/05/2008, 20:36
 
Fecha de Ingreso: febrero-2008
Mensajes: 578
Antigüedad: 9 años, 9 meses
Puntos: 3
Respuesta: La solución definitiva para los conflictos entre navegadores

pues claro, pero si no son páginas PHP ?
  #27 (permalink)  
Antiguo 25/05/2008, 21:55
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: La solución definitiva para los conflictos entre navegadores

Cita:
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.

Cita:
Iniciado por Jamati Ver Mensaje
pues claro, pero si no son páginas PHP ?
¿Quieres decir si son HTML? Pues no funciona.
  #28 (permalink)  
Antiguo 26/05/2008, 05:37
 
Fecha de Ingreso: mayo-2008
Mensajes: 42
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: La solución definitiva para los conflictos entre navegadores

Cita:
Iniciado por metacortex Ver Mensaje
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
  #29 (permalink)  
Antiguo 26/05/2008, 05:56
Avatar de metacortex
Viejo demente
 
Fecha de Ingreso: junio-2004
Ubicación: Caracas - Venezuela
Mensajes: 9.020
Antigüedad: 13 años, 6 meses
Puntos: 832
Respuesta: La solución definitiva para los conflictos entre navegadores

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:
Cita:
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.
  #30 (permalink)  
Antiguo 26/05/2008, 05:57
 
Fecha de Ingreso: mayo-2008
Mensajes: 42
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: La solución definitiva para los conflictos entre navegadores

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...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 6 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 22:17.