ASP.NET – CSS Dinâmico
#colunaTexto h1 { font-size:14px; margin-bottom:60px; } #colunaTexto h2 { font-size:12px; text-decoration:underline; } #colunaTexto h3 { font-size:12px; } #colunaTexto #DivCodigo { padding: 2px 2px 2px 2px; border: 1px dashed #006699; display: block; margin: 0px auto; font: 12px “Courier New”, Courier, mono; overflow: auto; width: 95%; } #colunaTexto td { text-align:center; } #colunaTexto table { width:100%; margin:40px 0px 60px 0px; } #colunaTexto img { border: 2px solid #666666; } #colunaTexto span.SComentario { color: #0033CC; } #colunaTexto #PFinal { margin-top:80px; } #colunaTexto a:link { color: #000000; border-bottom: #000000 1px dashed; text-decoration: none; } #colunaTexto a:visited { color: #000000; border-bottom: #000000 1px dashed; text-decoration: none; } #colunaTexto a:hover { color: #003399; text-decoration: none; border-bottom-style: none; } #colunaTexto a:active { color: #000000; border-bottom: #000000 1px dashed; text-decoration: none; } #colunaTexto { padding: 10px 10px 10px 10px; font-size: 13px; font-family: Arial; }
ASP.NET – CSS Dinâmico
Neste tutorial iremos utilizar o ASP.NET 1.1 para detectar várias informações a respeito do navegador
do usuário da Internet, e com isso carregar a folha de estilo mais adequada para ele, eliminando assim boa parte
da dor de cabeça de ficar ajustando um único arquivo CSS para vários navegadores.
Criando a página aspx sem os scripts ASP.NET
A página que iremos criar irá mostrar vários dados sobre um Navegador de Internet utilizando o ASP.NET.
Bom, crie uma nova página ASP.NET VB (Menu File > New > Dynamic page > ASP.NET VB) no Dreamweaver e
digite o código abaixo (ou mesmo copie e cole). Posteriormente estarei inserindo os Scripts ASP.NET:
<%@ Page Language=”VB” ContentType=”text/html” ResponseEncoding=”iso-8859-1″ %>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<link id=”Estilo” type=”text/css” rel=”stylesheet” runat=”server” />
<title>CSS Dinâmico</title>
</head>
<body>
<div id=”DivConteudo”>
<form id=”Form1″ method=”post” runat=”server”>
<h1>CSS Dinâmico – Tutorial MX Studio</h1>
<h2>Configurações do Browser </h2>
<div id=”DivDadosBrowser”>
<asp:label id=”LblResultado” runat=”server”></asp:label>
</div>
</form>
</div>
</body>
</html>
Repare que a tag <link> agora possui um atributo id e não possui o atributo href inserido.
Esses atributos serão peças-chave para o nosso pequeno truque funcionar.
Veja como a página (no meu caso já com o script) irá aparecer nos browsers Internet Explorer 6.0
SP1 e no Firefox 1.0.1. A estrutura da página deve ser a mesma.
 |
 |
| Página exibida no Internet Explorer sem CSS | Página exibida no Firefox sem CSS |
Criando as folhas de estilo CSS
Nesta etapa iremos criar dois arquivos CSS, um para o Internet Explorer e outro para o Firefox.
Mudarei os padrões de cores para podermos diferenciar melhor os dois estilos.
CSS para o Internet Explorar 6.0 SP1
/* CSS para Internet Explorer 6.0 SP1 */
body{
color:#000088;
font-family:Verdana;
font-size:12px;
margin:0px;}
h1{
font-size:16px;
margin-bottom:30px;
padding:5px;
background-color:#CCCCCC;
border:1px solid #000000;
text-align:center;}
h2{font-size:14px;}
#DivConteudo{
position: absolute;
width:400px;
top:20px;
left:50%;
margin-left:-200px;
padding:10px 40px 40px 40px;
background-color:#FFFFFF;
border: 1px solid #333333;}
#DivDadosBrowser{
padding: 40px 20px 40px 20px;
background-color:#EEEEEE;}
CSS para o Firefox 1.0.1
/* CSS para Firefox 1.01 */
body{
color:#550000;
font-family:Verdana;
font-size:12px;
margin:0px;}
h1{
font-size:16px;
margin-bottom:30px;
padding:5px;
background-color:#CCCCCC;
border:1px solid #000000;
text-align:center;}
h2{
font-size:14px;}
#DivConteudo{
position: absolute;
width:400px;
top:20px;
left:50%;
margin-left:-200px;
padding:10px 40px 40px 40px;
background-color:#FFFFFF;
border: 1px solid #330000;}
#DivDadosBrowser{
padding: 40px 20px 40px 20px;
background-color:#EEEEEE;}
Criando os Scripts ASP.NET
Agora vamos criar os scripts ASP.NET que irão identificar várias informações sobre o navegador
do usuário do seu site.
O script abaixo de ser colocado entre as tags <head> do código HTML.
<script language=”vb” runat=”server”>
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Dim StrCB As String = “”
With Request.Browser
StrCB &= “<br /><b>Nome e Maior versão do Browser</b> : ” & .Type
StrCB &= “<br /><b>Nome do Browser</b> : ” & .Browser
StrCB &= “<br /><b>Versão do Browser</b> : ” & .Version
StrCB &= “<br /><b>Maior versão do Browser</b> : ” & .MajorVersion
StrCB &= “<br /><b>Menor versão do Browser</b> : ” & .MinorVersion
StrCB &= “<br /><b>Versão Beta</b> : ” & .Beta
StrCB &= “<hr /><b>Plataforma do Cliente</b> : ” & .Platform
StrCB &= “<br /><b>Computador baseado em Win16</b> : ” & .Win16
StrCB &= “<br /><b>Computador baseado em Win32</b> : ” & .Win32
StrCB &= “<br /><b>Browser AOL (American Online)</b> : ” & .AOL
StrCB &= “<br /><b>Suporte a Controles ActiveX</b> : ” & .ActiveXControls
StrCB &= “<br /><b>Suporte a sons de fundo</b> : ” & .BackgroundSounds
StrCB &= “<br /><b>Suporte a CDF (Channel Definition Format)</b> : ” & .CDF
StrCB &= “<br /><b>Suporte a Cookies</b> : ” & .Cookies
StrCB &= “<br /><b>Suporte a Crawler</b> : ” & .Crawler
StrCB &= “<br /><b>Suporte a Frames</b> : ” & .Frames
StrCB &= “<br /><b>Suporte a JavaApplets</b> : ” & .JavaApplets
StrCB &= “<br /><b>Suporte a JavaScript</b> : ” & .JavaScript
StrCB &= “<br /><b>Suporte a Tables</b> : ” & .Tables
StrCB &= “<br /><b>Suporte a VBScript</b> : ” & .VBScript
End With
me.LblResultado.text = StrCB
If Request.Browser.Browser = “IE” then
Estilo.Attributes.Add(“href”,”ie_css.css”)
Else
Estilo.Attributes.Add(“href”,”ff_css.css”)
End If
End Sub
</script>
Terminando de inserir o script ASP.NET, teste a página nos navegadores Internet Explorer e Firefox e observe as
diferenças. As páginas deverão aparecer como as imagens abaixo:
 |
 |
| Página exibida no Internet Explorer com CSS | Página exibida no Firefox com CSS |
Clique aqui para baixar todos os arquivos utilizados para criar o exemplo do tutorial.
Clique aqui para visualizar o site em funcionamento: CSS
Dinâmico (teste com o Internet Explorer e o Firefox).
Conclusão
Com o ASP.NET você pode facilmente descobrir qual é o navegador do usuário e alterar dinamicamente
qual arquivo CSS deverá ser carregado na página. Isso possibilita uma grande versatilidade ao seu site e
a criação de arquivos CSS e HTML mais simples, já que não será necessário a criação
de Hacks.
Bom pessoal, é isso ai. Até a próxima!
Mark S. Costa
Dúvidas podem ser retiradas no Fórum
MX Studio – Dreamweaver
Escrito por Mark_Costa
on maio 15, 2005. Arquivado em Dreamweaver.
Você pode seguir as respostas a esse artigo pelo RSS 2.0.
Você pode deixar respostas para esse artigo
Autor do Artigo
Mark Costa
Últimos Comentários