Postado em: 18 de novembro de 2008 por Pedro Rogério
O Framework JavaScript jQuery nos oferece uma grande facilidade para manipular css na página de forma dinâmica. A única coisa que precisamos aprender é como acessar esses distintos elementos em nossa página web. Basta ter um pouco de conhecimento dos seletores que o jQuery disponibiliza: Seletores CSS, XPath, de formulário, mas os que você irá mais utilizar no seu dia-a-dia são os seguintes:
Elemento: foo
Todos os elementos que são do tipo foo. Exemplo:
$("div")
Seleciona todas as divs do documento HTML.
ID: #meuid
O elemento cujo o ID seja igual a #meuid. Exemplo:
$("#meuid")
Lembrem-se que os IDs nas páginas devem ser únicos, caso sejam repetidos, ele só irá pegar o primeiro elemento na página com ID citado.
Continuar lendo »
Postado em: 5 de novembro de 2008 por Pedro Rogério
James Donaghue desenvolveu recentemente um Framework, chamado Peppy que serve unicamente para selecionar os elementos de nossas páginas através de seletores CSS3. Sua velocidade em relação aos outros Frameworks é seu diferencial, chegando a desbancar outros Frameworks como Sizzle e Ext 2.2, sem falar de Mootools, jQuery, Prototype.
Nos testes executados, ele apresentou os seguintes resultados em relação os Frameworks mais conhecidos:
- 4x mais rápido no Firefox 3.
- 6x mais rápido no Firefox 2.
- 8x mais rápido no Internet Explorer 7.
- 3x mais rápido no Internet Explorer 6.
- 3x mais rápido no Opera 9.
- 4x mais rápido no Safari 3.
Referente a seu maior concorrente, Sizzle, ele apresentou os seguintes resultados:
- 1.2x mais rápido no Firefox 3.
- 1.3x mais rápido no Firefox 2.
- 11.1x mais rápido no Internet Explorer 7.
- 4.5x mais rápido no Internet Explorer 6.
- 0x mais rápido no Opera 9.
- 4x mais rápido no Safari 3.
Caso queira efetuar testes de velocidade com o Peppy em relação a outros Frameworks, é só dar uma olhada no Slickspeed, as velocidades podem variar de browser para browser.
Postado em: 9 de setembro de 2008 por Pedro Rogério
O seletor :not() com ceteza nos ajudará muito no desenvolvimento web a medida que for implementado nos browsers. O funcionamento desse seletor é basicamente para negar alguma coisa que estamos fazendo:
input#phone {
background-color:yellow;
}
/* Todos os elementos que não contenham o #phone */
input:not(#phone) {
background-color:green;
}
/* Todos os elementos que não sejam do tipo Submit */
input:not([type="submit"]) {
font-size:3em;
}
Isso é somente o básico do que será capaz de ser feito com esse seletor, mas também dependeremos do suporte desse seletor nos browsers, até lá, temos que nos virar como podemos.
Referências
Postado em: 2 de setembro de 2008 por Pedro Rogério
Pouco a pouco os browsers já começam a dar suporte as novas funcionalidades das CSS3, está sendo assim com o Opera.
No artigo eles mostram como utilizar o pseudo-seletor nth-child, onde podemos criar tabelas estilo zebra somente com uma linha de CSS:
tr:nth-child(2n+1) {
background-color: #99ff99;
}
No seletor devemos indicar o número de linhas em que devemos aplicar o estilo, nesse caso, a cada 2 linhas começando na posição 1 (os valores iniciam com 0). Veja aqui um exemplo.
Postado em: 19 de setembro de 2007 por Pedro Rogério
Para entender a pseudo-classe negação, :not(x), é muito simples, você deve passar um argumento para ela que ficará dentro dos parênteses, exemplo:
* {background-color:#FFFFFF;}
*:not(p) {background-color:#FF0000;}
O que eu defini na regra acima é que tudo no meu documento vai ter um background vermelho, menos tudo que estiver dentro da tag p, como podem ver nesse exemplo. Atualmente funciona no Mozilla, Konqueror e Safari.
Referências
Postado em: 14 de setembro de 2007 por Pedro Rogério
O seletor de combinação irmão em geral é representado pelo sinal “til” (U+007E, ~), que separa 2 sequências de seletores simples. Os elementos representados pelas 2 sequências compartilham do mesmo pai na árvore do documento, e o elemento representado pela 1ª sequência precede, não necessariamente nessa ordem, o elemeno representado pelo segundo.
Ficaram meio confusos? Mas a lógica é fácil. Tomem como exemplo o seguinte CSS:
h1 ~ pre {border:1px dotted red;}
Representa um elemento pre que segue um elemento h1, que no HTML pode ser escrito dessa forma:
<h1>Definição da função a</h1>
<p>Função a(x) é aplicada a todas as figuras da tabela.</p>
<pre>function a(x) = 12x/13.5</pre>
Vejam no exemplo que só a tag pre ficou com uma borda vermelha, independente de sua posição, desde que as tags compartilhem o mesmo pai. Testado e aprovado no IE7, Mozila, Opera, Konqueror e Safari.
Referências
Postado em: 13 de setembro de 2007 por Pedro Rogério
Com a chegada das CSS3, que ainda estão em desenvolvimento, eu fico a cada dia mais surpreendido com o seu grande potencial, só não fico mais ainda devido a nosso querido amigo Internet Explorer, mas isso é um caso a parte. Hoje tomei conhecimento de mais uma pseudo-classe das CSS3 chamada :target, onde você pode manipular as âncoras da sua página. Para aqueles que não sabem o que é uma âncora em HTML, imagine uma URL com um sinal de tralha (#) seguido de um nome de âncora ou um ID de qualquer elemento, que ao você clicar é levado para o local ou destino indicado no mesmo documento. Esse destino também pode ser chamado de :target, exemplo:
http://www.exemplo.com/top.html#secao_2
O exemplo acima ilustra bem o que foi dito. Agora, se utilizar-mos a pseudo-classe :target podere-mos aplicar qualquer estilo CSS a âncora em questão no momento em que o usuário clicar na mesma. Levem em consideração o seguinte CSS:
*:target { color:#8A7575; background-color:#D0C8C8; border:3px double #000; }
*:target::before { content:url(target.png) }
Agora, abram esse exemplo. Experimentem clicar no link do topo da página, como podem ver, é aplicado os estilos definidos somente a âncora especificada, com isso é possível fazer muita coisa interessante, só basta colocar a cabeça pra funcionar. E lembrando que essa propriedade só funciona nos Browsers baseados no motor Gecko, Konqueror e Safari.
Referências
