Nobres colegas scripteiros, no maravilhoso mundo da programação, a cada dia a gente se surpreende.
Ontem, durante a programação do
Mwords, eu procurava um script de CSSQuery para poder permitir que os usuários do Mwords, escolhessem o elemento alvo com base em seletores CSS. Exemplo: alvo = '#content .post p'.
Lindo né? Assim como no jQuery e outras libs por aí.
As versões que eu achei eram gigantescas (mais de 10k) e a mais recomendada era a do
Dean Edwards.
Nunca que eu iria pesar o script do Mwords com 10k só pra ter uma funcionalidadezinha dessas a mais.
Além disso, a maioria dos navegadores modernos já suporta a
document.querySelectorAll que permite fazer isso.
O único problemático (pra variar) é o IE (acho que do 8 pra baixo).
Não desisti da minha busca, e acabei encontrando esta
pérola da gambiarra feita pelo pessoal do Ajaxian. Funciona maravilhosamente bem e é maravilhosamente pequeno. Um achado digno de glórias ao pessoal do Ajaxian.
Rapidamente adaptei na minha lib, pra usar isto, caso o navegador não suporte a document.querySelectorAll.
Vejam como ficou:
cssQuery = function(sel){ //document.querySelector. sel é o seletor CSS
//by Micox - http://elmicox.blogspot.com
var i, res, dqs, d=document;
if (d.querySelectorAll){
return d.querySelectorAll(sel);
}else{ //o IE8 pra baixo e FF 3.5 pra baixo não tem querySelector
//baseado no fudido script de querySelector do ajaxian http://ajaxian.com/archives/creating-a-queryselector-for-ie-that-runs-at-native-speed
var head = d.documentElement.firstChild;
var styleTag = d.createElement("STYLE");
head.appendChild(styleTag);
dqs = d.__qsResult = [];
styleTag.styleSheet.cssText = sel + "{x:expression(document.__qsResult.push(this))}";
window.scrollBy(0, 0);
head.removeChild(styleTag);
res = [];
for (i in dqs){if (dqs.hasOwnProperty(i)) {
res.push(dqs[i]);
}}
return res;
}
}
//como usar
var todos_p_destaque_filhos_de_content = cssQuery('#content p.destaque');
Obs.1: Não quis mexer com o prototype do "document" porque uso isso dentro de uma lib minha e iria ficar melhor pra mim assim. Você pode adaptá-la e postar nos comentários se quiser.
Obs.2: Só irá funcionar com seletores NATIVOS do navegador em que estiver. Portanto se for usar um "div>p.classetal" no IE, provavelmente não irá funcionar.
Pequena explicação sobre o truque deste CSSQuery:
- Primeiro testo se o querySelectorAll existe no navegador atual (aquele primeiro if). Se existe, então uso ele.
- Se não existe, irei adicionar um "style" ao documento.
- O conteúdo deste style usa expressions - uma funcionalidade de CSS exclusiva do Internet Explorer que permite embutir scripts dentro das folhas de estilo. Você já deve conhecê-la caso já tenha usado meu velho Ultimate menu drop-down, onde uso expressions pra simular o :hover no IE.
- O que foi escrito dentro do style embutido (cssText) é a criação de uma regra onde o seletor é o parametro "sel" passado (o caminho do elemento).
- Dentro da regra, eu pego o próprio elemento encontrato (this) e adiciono em uma variável __qsResult.
- Simples não? Genial.
(Pra quem quiser ver um exemplo do novo Mwords em funcionamento, olhem
este site).
Até mais.
Gostou da dica acima? Então clica nos botões de compartilhamento abaixo e me ajude a dica a subir no Google.
