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.


12 respostas »

  1. Lincoln diz:
    01/10/2007 as 10:03

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

    [Responder]

  2. Helder Santana diz:
    02/10/2007 as 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 diz:
    05/10/2007 as 15:54

    Eae galera… eu uso…

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

    [Responder]

  4. Pablo diz:
    02/05/2008 as 15:50

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

    [Responder]

  5. JecaSpirro diz:
    02/05/2008 as 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 diz:
    06/05/2008 as 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 diz:
    21/09/2008 as 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 diz:
    28/06/2009 as 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 diz:
    25/09/2009 as 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 diz:
    11/11/2009 as 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 diz:
    21/01/2010 as 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. oscar diz:
    24/06/2010 as 13:59

    Boa tarde,

    estou começando a desenvolver e tendo muito dificuldade com css.

    Gostei de saber que posso criar css dinamicos, que vem de encontro a um projeto de conclusão de curso que estou fazendo e gostaria de deixar o usuário customizar sua página.

    Pode me dar um exemplo pratico, ou melhor um pequeno modelo de como seria isso? Se possível enviar por e-mail.

    Grato.

    Oscar Martins

    [Responder]

URL para Trackback

Deixe um comentário