La solución definitiva para los conflictos entre navegadores

[AlvaroG]

Un nuevo aporte, a ver si les gusta

Código PHP:

  <?php 
 
header("Content-type: text/css");  
 
# contenido de la matriz: nombre, patrón, valor de la propiedad que debe cambiar (o nombre de la hoja de estilos específica para él)
# para más propiedades, simplemente se puede agregar elementos al vector...
$navegadores = array(   array( 'Opera',  'Opera', 120 ),
                        array( 'Safari', 'Safari', 121 ),
                        array( 'Mozilla Firefox', '(Firebird)|(Firefox)', 122 ),
                        array( 'Galeon', 'Galeon', 123 ),
                        array( 'Konqueror', 'Konqueror', 128 ),
                        array( 'Mozilla', 'Gecko', 124 ),
                        array( 'MyIE', 'MyIE', 125 ),
                        array( 'Lynx', 'Lynx', 126 ),
                        array( 'Netscape', '(Mozilla/4\.(75|79|08|5|6))|(Netscape(6|8))', 127 ),
                        array( 'Internet Explorer 7', '(MSIE 7\.[0-9]+)', 129 ),
                        array( 'Internet Explorer 6', '(MSIE 6\.[0-9]+)', 130 ),
                        array( 'Internet Explorer 5', '(MSIE 5\.[0-9]+)', 131 ),
                        array( 'Internet Explorer 4', '(MSIE 4\.[0-9]+)', 132 )
                    );
 
function ObtenerNavegador($user_agent) {
    global $navegadores;
 
    foreach($navegadores as $indice => $navegador) {
        if ( ereg($navegador[1], $user_agent))
            return $indice;
    }
 
    return -1;
}
 
$navegador = ObtenerNavegador($_SERVER['HTTP_USER_AGENT']); 
 
function valorCSS() {
    global $navegador;
    global $navegadores;
 
    if ($navegador == -1) {
        return $valor_por_defecto;
    } else {
        return $navegadores[ $navegador ][2];
    }
} 
?> 
 
/* Comienzan los estilos normalmente */ 
 
div.enlace { 
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; 
  font-size: 11px; 
  font-weight: bold; 
  background: #777; 
  width : <?php echo valorCSS(); ?>px;
  height: 30px; 
  line-height: 30px; 
  margin: 20px auto; 
}  

meta, me refería a que por el orden en el que está hecho el vector se va a comprobar primero que la cadena "User-Agent" contenga "Gecko", y si eso es verdadero se asigna como "Mozilla".
Y entonces, dado que Konqueror incluye "Gecko" en su identificación, se tomará como Mozilla.
Lo que decía del "orden" es lo que hice en este nuevo código: poner la búsqueda de "Konqueror" antes que la de "Gecko".

Otro detalle: quizás para ahorrar unos milisegundos se pueda organizar el vector según el uso de los navegadores: poner los más usados primero para ahorrar un par de llamadas a ereg.
Y un detalle más: cambié "eregi" por "ereg", en mis pruebas la comparación sin considerar mayúsculas y minúsculas es más lenta que la comparación "estricta".


Saludos.

[metacortex]

Me sigue pareciendo mejor la propuesta de VitorGarcía y explicaré por qué: es 100% reusable y de forma muy simple. Es decir, sólo hay que hacer una sola declaración arriba y luego sólo se trabaja con arrays, cambiando el valor según el orden (por cierto VitorGarcia, te faltó poner px en cada valor).

Por ejemplo así lo veo:

Código PHP:

 div.enlace { 
  font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif; 
  width: <?php valorCSS( '121px', '123px' , '120px' , '' , '') ?>;
  line-height: <?php valorCSS( '140%', '' , '145%' , '' , '') ?>;
  padding: <?php valorCSS( '10px 0', '11px 0' , '' , '' , '') ?>;
  font-weight: bold; 
  background: #777; 
  height: 30px; 
  margin: 20px auto; 
}  

Notemos que -cuando hay cambios- podemos interpretar el primer valor como predeterminado. Fíjate lo versátil que puede llegar a ser. En este caso puse 5 elementos (navegadores) pero podrían ser 2 o 3 según las necesidades de maquetación, lo que lo haría más simple aún.

Entonces, te convencí pana Alvlin? =P. Una sola hoja de estilos para 5 navegadores, no hace falta más .

Ah, gracias por la aclaratoria del orden de navegadores jeje. De verdad me tenía intrigado ese asunto.

[AlvaroG]

Pues sí, puede ser más extensible, sin duda.
Pero la mía también, oye (la tengo que defender ): fijate que en vez de que valorCSS no tenga parámetros, le pongo como parámetro un índice que corresponda a la posición en el vector original que tiene el valor que necesito:

array( 'Opera', 'Opera', 120, '10px 0', $default ),

valorCSS(1) => 120
valorCSS(2) => '10px 0'

y así.

De la propuesta de VitorGarcía lo que no me gusta es que hay que usar muchos condicionales y pasar un arreglo (que en el ejemplo original era bastante grande) en cada llamada.

De todas formas, la mejor solución me parece una segunda hoja de estilos que sobreescriba los valores necesarios, en vez de tener una hoja sola en PHP.

Pero es cuestión de opiniones, nada más


Saludos.

[metacortex]

¿Quieres decir entonces que en por ejemplo en este pedazo

Código PHP:

   width: <?php valorCSS( '121px', '123px' , '120px' , '' , '') ?>;
  line-height: <?php valorCSS( '140%', '' , '145%' , '' , '') ?>;
  padding: <?php valorCSS( '10px 0', '11px 0' , '' , '' , '') ?>;  

el servidor debe leer el arreglo inicial 3 veces en lugar de una?

[AlvaroG]

No, no es ese el caso (por suerte), en realidad cuando puse "arreglo" me refería a la cantidad de parámetros que tiene valorCSS()

Pero sí debe comparar todas las cadenas las 3 veces, que era algo que pretendía evitar (en mi ejemplo el acceso es directo)

Un detalle que puede hacer más sencillo el tema es recordar que cuando se define una función se pueden definir valores por defecto para sus parámetros, entonces podría ser

Código PHP:

  valorCSS( $valorIE = '', $valorMozilla = '', $valorOpera = '') 
   

y luego llamarla como:

valorCSS(14)

o

valorCSS('', 10)


sería válido


Saludos.

[metacortex]

Iniciado por alvlin

Pero sí debe comparar todas las cadenas las 3 veces, que era algo que pretendía evitar (en mi ejemplo el acceso es directo)

Claro, en un proyecto real no serían 3 sino 100 los casos. Mi duda es si este detalle hace el método inviable, supongamos en una web con 5000 visitas diarias.

[AlvaroG]

No inviable, pero sí es un tanto engorroso... ¿estás seguro que con 100 reglas distintas sigue siendo inconveniente usar una hoja externa?

Personalmente evito hacer tantos cálculos todas las veces.
Pero la solución sería perfecta si se hiciera un cache por navegador. Entonces podrías tener las ventajas de ambas soluciones: una hoja de estilos adaptada a cada navegador, que se genera automáticamente a partir de una hoja base :)

Creo que esta solución ya escapa las posibilidades del foro de CSS pero no sería complicado :)


Saludos.