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:
-
$(document).ready(function()
-
$(‘h3′).css(text-shadow: ‘#00ff00′);
-
});
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:
-
(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);
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
-
$(document).ready(function()
-
$(‘h3′).css(glowColor: ‘#00ff00′);
-
});
Conclusão
O lado bom de criar um cssHook no jQuery para o problema de 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 pagina 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
