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. 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  ), ...

  #31 (permalink)  
Antiguo 26/05/2008, 10:02
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: La solución definitiva para los conflictos entre navegadores

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

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.
  #33 (permalink)  
Antiguo 26/05/2008, 11:02
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: La solución definitiva para los conflictos entre navegadores

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

¿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?
  #35 (permalink)  
Antiguo 26/05/2008, 11:56
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: La solución definitiva para los conflictos entre navegadores

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

Cita:
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.
  #37 (permalink)  
Antiguo 27/05/2008, 11:33
AlvaroG
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: La solución definitiva para los conflictos entre navegadores

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.
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 17:38.