Introdução
Um desafio de todo desenvolvedor html é manter o seu site compatível com todos os browsers ( em especial o Internet Explorer ), devido as limitações e detalhes na implementação de cada um, isso é um fato inegável, e qualquer um que ja tentou um dia desenvolver alguma coisa em html sabe disso.
Em projetos pequenos podemos tomar conta disso sem a necessidade de nenhuma ferramenta extra, entretanto com o crescimento do projeto a tendência é que estes trechos de códigos para manter a compatibilidade fiquem tão grande quanto o código do próprio site em si, tornando difícil de manter e etc.
jQuery
Nesta hora é importante conhecer as ferramentas que existem para ajudar o desenvolvimento, e utiliza-las de maneira correta. Uma ferramenta importante no desenvolvimento html é o jQuery.
Para quem não sabe o que é, o jQuery é uma biblioteca javascript que facilita a manipulação do DOM ( Document Object Model ) html, ou seja, facilita a manipulação da sua página html.
Para entender melhor do que este post se trata é necessário ter um conhecimento básico da biblioteca jQuery
Hooks
Muitos dos métodos get e set do jQuery podem ser extendidos para casos especiais, estas extensões são conhecidas como hooks. O namespace $.cssHooks permite extender o método .css(), permitindo criar novas propriedades de CSS.
Os hooks podem ser utilizados como uma solução elegante para a compatibilidade de CSS em diferentes browsers, por exemplo, a propriedade text-shadow do CSS3 não é suportada pelo Internet Explorer, portanto o código abaixo não funcionará no IE:
[cc lang=”javascript” width=”100%”]
$(document).ready(function() {
$(‘h3’).css({text-shadow: ‘#00ff00’});
});
[/cc]
Este código aplica um glow verde em todos os elementos H3 do documento HTML, porém não funciona no IE.
CSS Hooks
Mas nós podemos criar uma nova propriedade css, e internamente tratar o caso do IE. Vamos chamar a nova propriedade de glowColor:
[cc lang=”javascript” width=”100%”]
(function($) {
var div = document.createElement(‘div’);
$.support.textShadow = div.style.textShadow === ”;
$.support.filter = div.style.filter === ”;
div = null;
if ($.support.textShadow) {
$.cssHooks.glowColor = {
set: function(elem, value) {
if (value == ‘none’) {
elem.style.textShadow = ”;
}
else {
elem.style.textShadow = ‘0 0 2px ‘ + value;
}
}
};
}
else {
$.cssHooks.glowColor = {
set: function(elem, value) {
if (value == ‘none’) {
elem.style.filter = ”;
}
else {
elem.style.zoom = 1;
elem.style.filter =
‘progid:DXImageTransform.Microsoft’ +
‘.Glow(Strength=2, Color=’ + value + ‘);’;
}
}
};
}
})(jQuery);
[/cc]
Este código cria uma propriedade dentro do namespace .cssHooks chamada glowColor, esta propriedade possui uma função set específica para o caso do IE e outra para o caso dos outros browsers. A lógica deste código é basicamente, verificar se possui suporte ao textShadow, caso sim, define uma função set que altera o atributo elem.style.textShadow com a cor do parâmetro, caso não, define uma função que altera a propriedade elem.style.filter com um filtro especifico utilizando a cor do parâmetro.
Agora podemos aplicar o efeito através do código
[cc lang=”javascript” width=”100%”]
$(document).ready(function() {
$(‘h3’).css({glowColor: ‘#00ff00’});
});
[/cc]
Conclusão
O lado bom de criar um cssHook no jQuery para o problema descrito é que o código que trata a compatibilidade fica oculto do desenvolvedor, ele não precisa se preocupar com isso, o foco é no código que constrói a página unicamente. Esta estratégia pode ser aplicada para outros diversos efeitos e manipulações, criar uma serie de hooks para tratar este tipo de coisa e etc. O lado ruim no meu ponto de vista é que estamos criando propriedades novas, que são desconhecidas pelos outros desenvolvedores e etc, portanto um novo desenvolvedor iria demorar para aprender todas customizações e suas funções, uma dica é tentar manter os nomes semelhantes ao padrão.
Por @thiagoofelix
Referências
Compartilhe isso:
