Folha de estilo em PHP
Esta semana tive que resolver um problema em um site que eu estava codificando, que apresentava três particularidades, na folha de estilos:
- O CSS para 2 navegadores, bem diferentes uma da outra.
- Grande quantidade de código que deveria ser aplicado apenas em algumas páginas.
- 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.
Melhores ofertas para:
Site, Design, CSS, PHP, layout
11 Comentários para “Folha de estilo em PHP”
Comente
Acompanhar
Bruno, se for possível, passe la no HG.
Obrigado!
Bem pensado Bruno. Parabéns!
@THPS, só poderei resolver questões da HG na sexta-feira, verifique se algum outro admin pode lhe ajudar.
@Thalis, obrigado.
Abraços
Putz, nada a ver com o artigo, mas o beeeem melhor esse layout mais clean hehehe
Falows!
Dei uma limpada, estava achando o outro muito poluido.
Só não sei até quando ficarei com este
Abraço
Legal, agora que tal uma sujestão pro próximo post: Querida, Descobri a América. Cara, essa é velha.
Sem problemas, pode deixar que farei um relatório completo sobre a descoberta da América.
Abraço
Mas, gerando o CSS com PHP o resultado não vai ficar em cache, porque nem o apache nem o PHP vão enviar last-modified nem etag. Ou você cuidou disso também e não falou? hehe
Eu já mexi com isso, mas em arquivos de feeds, mas o processo é mais ou menos parecido e pode ser adaptado pra esse caso sem problemas. Dá uma olhada: http://brunotorres.net/2005/01/26/caching-feeds
Para falar a verdade, nem pensei nisto, pois como estava em um servidor que já faz caching de arquivos, com o mm_cache, não havia porque me preocupar com caching.
Bem interessante a solução que você demonstrou, mês que vem devo começar o projeto de um portal e terei que usar esta técnica de montagem do CSS, mas não poderei contar com caching de arquivos, vou estudar sua solução para ver como aplicar.
Inclusive, muito interessante a idéia de usar o GZip, posso economizar um bocado de transferência com isso.
Obrigado.
Abraço
valeu de mais o negocio do css
[...] Sobre o CSS seria interessante você usar junto com esta dica do Bruno Alves. [...]