Como fazer um arquivo CSS dinâmico

Muita gente acha que linguagens como o PHP servem somente para desenvolvimento de HTML, porém, contudo e todavia é sim possível fazer com que o servidor interprete o PHP dentro de outros tipos de extensão. O Apache é configurado por um arquivo mestre chamado httpd.conf e opcionalmente podem haver configurações para cada diretório utilizando arquivos com o nome .htaccess. O .htaccess é muito utilizado hoje para criar aquela técnica SEO das urls amigáveis, mas também vai permitir com que usemos a liguagem dinâmica do PHP dentro de outros arquivos além do HTML, como uma folha de estilos CSS por exemplo. Usando instruções PHP dentro de outros arquivos Primeiro você tem que criar um arquivo chamado .htaccess no diretório raiz (root) do seu website e em seguida editá-lo em modo texto e colocar a seguinte instrução:
AddType application/x-httpd-php .css
Isto vai fazer com que o servidor passe a interpretar um CSS como se fosse uma aplicação PHP. Em seguida, você deve criar o seu arquivo CSS normalmente e colocar na primeira linha a seguinte instrução:
<?php Header ("Content-type: text/css");?>
Prontinho, você já tem um arquivo CSS Dinâmico. Quais as vantagens disso? Bom, tirar vantagem disso vai depender muito da sua criatividade, mas você pode , por exemplo, adicionar seletores de estilo para cada tipo de usuário, fazer consultas em banco de dados e até trabalhar com classes e programação orientada a objeto para montar seu CSS porque tudo será calculado no servidor e seu Browser não vai nem notar a diferença. E além do mais, você pode realizar o mesmo procedimento para trabalhar com arquivos js, txt e quem sabe até criar suas próprias extensões.

Gostou desse texto? Siga-me no Twitter @richardbarros

17 comentá em “Como fazer um arquivo CSS dinâmico

  1. Lincoln 01/10/2007 10:03

    Interessante…mas nunca tinha ouvido falar nisso…tem algum exemplo melhor, ou um site que utilizou isso?

    Responder

  2. Helder Santana 02/10/2007 09:14

    2 Lincoln, eu nunca tinha ouvido também.

    Muito bom o blog, está feedado.

    Go intercon 2007! =)

    Responder

  3. Pércoles Tiago Napivoski 05/10/2007 15:54

    Eae galera… eu uso…

    Isso é muito útil para colocar classes direcionadas para cara tipo de navegador

    Responder

  4. Pablo 02/05/2008 15:50

    O nome disso é gambiarra e nada tem a ver com CSS dinamico.. putz.. viajou meu caro..

    Responder

  5. JecaSpirro 02/05/2008 15:56

    É, PHP pode ser muito útil nesse caso. Mas será que é realmente mudar o htaccess? Se for para selecionar as regras css de acordo com o browser, não seria menos trabalhoso usar condicional nas tags <link>?

    Responder

  6. Richard Barros 06/05/2008 01:14

    @Pablo, dinâmico desde que usemos uma linguagem dinâmica como o PHP para criar as regras de estilo.

    Responder

  7. Márcio 21/09/2008 18:25

    Olá, Richard.

    Parabéns pela super dica. Só uma coisa: como eu faço, por exemplo, se tenho um arquivo php e nele anexo o meu .css e tenho uma varíavel que precise ser passada para o arquivo css anexado? Fiz vários testes e realmente não consegui. Será que vc tem algum exemplo neste sentido. Grato.

    Responder

  8. Marco Vieira 28/06/2009 17:46

    nao seira mais simples utilizar:

    assim vc nao precisa alterar nada nas configuracoes do sistema e de quebra esconde o layout de olhares curiosos.

    Responder

  9. Desespero 25/09/2009 19:29

    O que leva um ser humano a fazer isto.
    se o header ja muda a instrucao bastaria passar
    seria uma gambiarra menor.
    nao precisa jogar o apache no meio da confusao.
    o css e lido pelo navegador
    poderia ser carregado via javascript (AJAX) no cliente

    Responder

  10. frankzeffi 11/11/2009 13:03

    muito interessante, o css vira um mundo de possibilidades, porém gostaria, se possível de uma noção básica de como criar paginas html, ou php, inserindo em todas o mesmo cabeçalho, menus laterais e bottom, sem precisar usar iframes (coisa antiga).
    obs. sem usar includes, ou shtml também.

    Responder

  11. Morais 21/01/2010 17:25

    Muito obrigado, eu estava prestes a usar um arquivo .php como folha de estilo usando o ‘print’ mas dessa forma que você mensionou o Dreamweaver consegue ‘colorir’ os metodos e atributos do css, diferentemente do php. Assim fica mais facil de editar, muito boa dica.

    Responder

  12. Luís Felipe 12/09/2010 19:37

    Finciona legal no IE, porém no Firefox fica uma tragédia!
    Não funcionou com ele, é como se o css nem existisse!

    Responder

  13. Jair Firmino 29/12/2013 03:48

    Ae galera eu tenho um codigo PHP muito bom para resolver este problema. CSS Diferente de acordo com o navegador e plataforma que vai visualizar o site.
    browser.php
    <?php
    //COMANDO DE RECONHECIMENTO
    $useragent = ($_SERVER['HTTP_USER_AGENT']);
    //RECONHECE PLATAFORMA
    if (preg_match('/linux/i', $useragent)){
    $platform = 'Linux';
    } elseif (preg_match('/android/i', $useragent)){
    $platform = 'Android';
    } elseif (preg_match('/mobile/i', $useragent)){
    $platform = 'Mobile';
    } elseif (preg_match('/macintosh|mac os x/i', $useragent)){
    $platform = 'Mac';
    } elseif (preg_match('/windows|win32/i', $useragent)){
    $platform = 'Windows';
    } else {
    $platform = 'Undefined';
    }
    //RECONHECE NAVEGADOR E VERSAO
    if (preg_match('|MSIE ([0-9].[0-9]{1,2})|',$useragent,$matched)){
    $browser_version=$matched[1];
    $browser = 'Internet Explorer';
    } elseif (preg_match( '|Opera/([0-9].[0-9]{1,2})|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Opera';
    } elseif(preg_match('|Firefox/([0-9\.]+)|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Mozila Firefox';
    } elseif(preg_match('|Chrome/([0-9\.]+)|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Google Chrome';
    } elseif(preg_match('|Safari/([0-9\.]+)|',$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = 'Safari';
    } else {
    $browser_version = 0;
    $browser = 'Undefined';
    }
    //VERIFICA NAVEGADOR E PLATAFORMA – APLICA CSS DIFERENTE DE ACORDO COM A NECESSIDADE
    if ($browser=="Internet Explorer" AND $platform=="Windows"){
    $css = 'mie.css';
    } elseif ($browser=="Mozila Firefox" AND $platform=="Windows"){
    $css = 'moz.css';
    } elseif ($browser=="Google Chrome" AND $platform=="Windows"){
    $css = 'chr.css';
    } elseif ($browser=="Undefined"){
    $css = 'undefined.css';
    }
    //EXIBE INFORMAÇOES
    //echo "Browser: “.$browser.” Plataforma: “.$platform.” Estilo: “.$css;
    ?>

    Index.php

    <link href="” rel=”stylesheet” type=”text/css”/>
    Carta

    Responder

  14. Jair Firmino 29/12/2013 03:49

    CONTiNUA
    index.php

    <link href="” rel=”stylesheet” type=”text/css”/>
    Carta

    Responder

  15. Jair Firmino 29/12/2013 03:51

    puts o resto do codigo nao esta indo
    vai assim
    da um include em cada pagina que necessita do css diferente

    na parte para colocar o css faça assim
    <link href="” rel=”stylesheet” type=”text/css”/>
    e pronto vai carregar css diferente de acordo com navegador e plataforma

    Responder

  16. Jair Firmino 29/12/2013 03:54

    O codigo do index.php esta sendo bloqueado pelo post coments do blog. Ae Richard este e um topico muito procurado consegui solucionar, funcionou perfeitamente no meu site. Coloca este topico no seu blog.

    Responder

  17. Julio 15/06/2016 12:31

    Muito bom. Vou testar.

    Responder

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>