Esta semana tive que resolver um problema em um site que eu estava codificando, que apresentava três particularidades, na folha de estilos:

1. O CSS para 2 navegadores, bem diferentes uma da outra.
2. Grande quantidade de código que deveria ser aplicado apenas em algumas páginas.
3. Parte da formatação era condicional, dependendo de algumas variáveis passadas pelo sistema.

A primeira solução imaginada foi uma única folha de estilos com algumas centenas de Kbytes, o que seria muito complicado para conexões discadas, imagine aguardar vários segundos, só para carregar a folha de estilos...

Ao me lembrar de dois artigos que li nos últimos dias (Evitando caching quando (e só quando) o arquivo CSS for atualizado e CSS Modular - Breve explicação), me veio uma idéia interessante que poderia resolver meu problema.

Por que não fazer a folha de estilos dinâmica?

Isso seria maravilhoso, se não fosse o problema do CSS não ser dinâmico.

Resolvi tentar fazer a folha de estilos em PHP.

O resultado foi ótimo e me abriu um enorme leque de possibilidades.

Segue o detalhamento de como fiz isso:

Inicialmente foi necessário pegar todas as variáveis que eu precisava para determinar como montar a folha de estilos para o navegador.

Para atingir a meta, eu precisaria das seguintes informações:

• Navegador do usuário.
• Seção do site que eu estava.
• O valor das condições.

Para facilitar, decidi que passaria pelo método GET as informações de seção e condição, o navegador seria simples de se obter.

Então o início do arquivo, seria:


<?php
$sec = stripslashes($_GET['sec']);
$cond = stripslashes($_GET['cond']);
$is_ie = strpos($_SERVER['HTTP_USER_AGENT'],'MSIE') && !strpos($_SERVER['HTTP_USER_AGENT'],'Opera');
?>


Mesmo quando o Opera se identifica como IE, aparece a palavra Opera na assinatura do cabeçalho

Agora que já sei todos os dados que preciso, basta montar a folha de estilos dinamicamente:


<?php
 if ($sec=='Cad') {
    include ('cad_sec.php');
    if ($is_ie) {
        include ('cad_sec_ie.php');
    } else {
        include ('cad_sec_ot.php');
    }
}
if ($is_ie) {
    include ('ie.php');
} else {
    include ('ot.php');
}
include ('com.php');
switch ($cond) {
         case 'a':
            include ('cond_a.php');
            break;
         case 'b':
            include ('cond_b.php');
            break;
         default:
                include ('cond_def.php');
}
?>


Onde:
• cad_sec.php - CSS para seção Cad
• cad_sec_ie.php - CSS para o IE na seção Cad
• cad_sec_ot.php - CSS para os demais navegadores na seção Cad
• ie.php - CSS para o IE
• ot.php - CSS para os demais navegadores
• com.php - CSS Geral
• cond_a.php - CSS para condição a
• cond_b.php - CSS para condição b
• cond_def.php - CSS para as demais condições

Comecei a chamar o arquivo css.php no navegador e tudo estava funcionando como planejada, feliz da vida, anexei a folha de estilos � página que eu ia testar e...

Nada feito, não funcionou, parecia que não havia nenhuma folha de estilos associada a página.

A solução para este problema foi bem simples, por padrão o PHP gera arquivos do tipo text/html e a folha de estilos deveria ser do tipo text/css.

Basta inserir na primeira linha do arquivo css.php

<?php
header('Content-type: text/css');
?>

Agora, nosso arquivo está com o tipo correto e tudo estará funcionando como desejamos.

Compare Preços de: Site, Design, CSS, PHP, layout

[tags]Site,Design,CSS,PHP,layout[/tags]