O CSS (Cascading Style Sheets), também conhecido como folha de estilo, é um padrão para formatação de documentos HTML/XHTML. Ele permite grande versatilidade no desenvolvimento do design para sites sem aumentar o seu tamanho. O CSS permite um controle maior sobre os atributos tipográficos de um site, como tamanho e cor das fontes, espaçamento entre linhas e caracteres, margem do texto, posicionamento, entre outros. Introduziu a utilização de layers, permitindo a sobreposição de texto sobre texto ou texto sobre imagens.
O que será mostrado nesse artigo é como você pode configurar o seu site (através da utilização de scripts PHP) para permitir que o próprio usuário escolha, entre as várias folhas de estilo disponíveis, qual será a utilizada para formatar o site durante a visita desse usuário.
Existem duas maneiras que podemos utilizar para armazenar a escolha do usuário: os conceitos de cookie ou sessão. Nesse artigo serão apresentados dois exemplos de scripts que utilizam esses conceitos para armazenar a escolha feita pelo usuário e adotá-la no restante do site.
Para que os exemplos funcionem corretamente, será necessário criar três folhas de estilos com diferentes tipos de formatação que chamaremos, respectivamente, estilo1.css, estilo2.css e estilo3.css.
O princípio básico será igual, seja qual for o conceito escolhido. Serão apresentados os links para cada estilo disponível e conforme o usuário faça a sua escolha (clicando no link), essa escolha será armazenada e verificada toda vez que uma página do site for carregada. O que muda entre os exemplos apresentados é a forma como essa escolha é armazenada.
Serão duas listagens para cada um dos exemplos, os arquivos index.php (página principal) e estilo.php , respectivamente, com os comandos PHP utilizados para o a alteração da folha de estilo e o armazenamento dessa informação através do uso de cookie ou sessão, conforme o exemplo escolhido.
=> Cookie
- index.php
1 <html>
2 <head>
3 <link href="<? print(isset($_COOKIE['EstiloSite']) ? $_COOKIE['EstiloSite'] : 'estilo1.css') ?>" rel="stylesheet" type="text/css" />
4 <title>Exemplo com Cookie</title>
5 </head>
6 <body>
7 <div id="cabecalho"><h1>Exemplo com Cookie</h1></div>
8 <div id="principal">
9 <div id="estilos">
10 <h3>Estilos</h3>
11 <div class="opcao"><a href="estilo.php?estilo=estilo1.css">Primeiro</a></div>
12 <div class="opcao"><a href="estilo.php?estilo=estilo2.css">Segundo</a></div>
13 <div class="opcao"><a href="estilo.php?estilo=estilo3.css">Terceiro</a></div>
14 </div>
15 <div id="conteudo">
16 <h2>Título</h2>
17 <p>Esse é um exemplo da mudança dinâmica de folha de estilo utilizando cookie.</p>
18 </div>
19 </div>
20 <div id="rodape">© 2005 Marcelo S. Macedo</div>
21 </body>
22 </html>
Nesse exemplo, observe a linha 3, onde verifica-se a existência de um cookie chamado EstiloSite, que caso exista conterá o arquivo de estilo atualmente escolhido. Caso não exista esse cookie, será associado o arquivo estilo1.css a página atual.
As linhas 11, 12 e 13 são links que listam os estilos existentes, bastando o usuário clicar em alguns deles para acionar o arquivo estilo.php, responsável pelo armazenamento do novo estilo escolhido.
- estilo.php
1 <?php
2 setcookie("EstiloSite", $estilo, time() + 3600);
3 Header("Location:$HTTP_REFERER");
4 ?>
Esse arquivo é executado quando o usuário clica em algum dos links de estilo e armazena o conteúdo da variável estilo no cookie EstiloSite (linha 2). Após isso, retorna a página que o chamou (linha 3).
=> Sessão
- index.php
1 <?php
2 session_start();
3 ?>
4 <html>
5 <head>
6 <link href=<? print(session_is_registered("EstiloSite") ? "$EstiloSite" : "estilo1.css") ?> rel="stylesheet" type="text/css" />
7 <title>Exemplo com Sessão</title>
8 </head>
9 <body>
10 <div id="cabecalho"><h1>Exemplo com Sessão</h1></div>
11 <div id="principal">
12 <div id="estilos">
13 <h3>Estilos</h3>
14 <div class="opcao"><a href="estilo.php?estilo=estilo1.css">Primeiro</a></div>
15 <div class="opcao"><a href="estilo.php?estilo=estilo2.css">Segundo</a></div>
16 <div class="opcao"><a href="estilo.php?estilo=estilo3.css">Terceiro</a></div>
17 </div>
18 <div id="conteudo">
19 <h2>Título</h2>
20 <p>Esse é um exemplo da mudança dinâmica de folha de estilo utilizando sessão.</p>
21 </div>
22 </div>
23 <div id="rodape">© 2005 Marcelo S. Macedo</div>
24 </body>
25 </html>
Diferente do exemplo anterior, nesse é necessário iniciar a sessão através do comando da linha 2. Na linha 6 verifica-se a existência da variável EstiloSite na sessão atual, que caso exista conterá o arquivo de estilo atualmente escolhido. Caso não exista, será associado o arquivo estilo1.css a página atual.
As linhas 14, 15 e 16 são links que listam os estilos existentes, bastando o usuário clicar em alguns deles para acionar o arquivo estilo.php, responsável pelo armazenamento do novo estilo escolhido.
- estilo.php
1 <?php
2 session_start();
3 session_unregister("EstiloSite");
4 $EstiloSite = $estilo;
5 session_register("EstiloSite");
6 header("Location:$HTTP_REFERER");
7 ?>
Esse arquivo é executado quando o usuário clica em algum dos links de estilo. Ele inicia a sessão (linha 2), apaga a variável EstiloSite da sessão atual (linha 3), armazena o conteúdo da variável estilo na variável EstiloSite (linha 4) e volta a registrar essa variável na sessão. Após isso, retorna a página que o chamou (linha 6).
Observe que, independente do exemplo escolhido, será necessário ter em todas as páginas do seu site a tag <link />, com seu respectivo comando PHP, pois é justamente nessa linha que será verificado qual estilo a página deve utilizar. Também é interessante manter os links de estilo disponíveis em todas as páginas, o que permitirá o usuário fazer a mudança de estilo em qualquer ponto do site.