La solución definitiva para los conflictos entre navegadores

[VitorGarcia]

Iniciado por metacortex

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(121, 123, 120, 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a', 'a',122) . ";"; 
  ?> 
  height: 30px; 
  line-height: 30px; 
  margin: 20px auto; 
}