Ver Mensaje Individual
  #25 (permalink)  
Antiguo 25/05/2008, 07:35
VitorGarcia
 
Fecha de Ingreso: mayo-2008
Mensajes: 42
Antigüedad: 16 años, 7 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;
}