Como utilizar variáveis no CSS
Enquanto somente o WebKit aceita temporariamente o suporte a variáveis em CSS eu sigo por uma busca incessante atrás de uma forma, e acabei a encontrando com a utilização de jQuery.
cssWithVars leva o conceito de Orientação a objetos ao CSS onde você pode reutilizar código de forma efetiva. A utilização é muito simples, primeiro devemos criar a nossa variável em nosso CSS:
variavel1 {
float:left;
font-size:1em;
}
O 2º passo é chamar a variável no lugar da declaração das propriedades dentro de chaves []:
h1 {
[variavel1]
}
Vejam só nesse exemplo criado o css funcionando através de variáveis. Preste muita atenção que você dever adicionar os seguintes arquivos a sua página para que ela funcione corretamente:
<script src="jquery-1.3.2.js" type="text/javascript"></script> <script src="jquery.utilities.js" type="text/javascript"></script> <script src="jquery.createCSSwithVars.js" type="text/javascript"></script> <link rel="stylesheet" href="caminho/do/css.css" type="text/css" media="csswithvars" />
No exemplo foi utilizado a última versão do jQuery, a 1.3.2, plugin jQuery Utilities, o plugin jQuery createCSSwithVars, e o arquivo CSS com o media type csswithvars.
Interessante mesmo, para aqueles que queiram deixar o código css validado, não terá como.
E isso é compatÃvel com todos navegadores?
abs
@Vagner,
Sim, testei nos seguintes browsers: IE6, IE7, IE8, Firefox 3, Google Chrome, Safari 4, Opera 10 e funcionou corretamente pois ele utiliza Ajax para ler as variáveis que você criou no CSS.
Má idéia, exceto, talvez, em algum web app que já seja por si só dependente de javascript. Para todos as outras ocasiões este é mais um exemplo de javascript obtrusivo, basta verificar a página de teste com o cssnolanche.com.br na lista negra do noscript…
@Thiago tem razão. Ter que incluir aqueles arquivos todos ali, somente para quem já tem a página usando jQuery a toda.
Mas se isto fosse nativo, seria ótimo.
Olá Pedro rogério
Muito interessante esse metodo usando jquery.
Recentemente o site nettuts postou um tutorial para o uso de variaveis usando o php, montando o css:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-add-variables-to-your-css-files/
Com temos muitos navegadores web existe para a engine WebKit variaveis, mais acho que não vai validar também. Mais a forma é algo tipo
/* Declarações*/
@variables {
cor_link: #777777;
}
/*Uso*/
a {
color: var(cor_link1);
}