Após 1 anos e meio com um layout que não me agradava muito, resolvi abrir o Photoshop e botar o lado criativo em prática, que aliás anda enferrujado.
Sim, isso mesmo, desenvolvi um layout para meu site pessoal em HTML5 + CSS3, ou vocês acham que é só o Tableless que pode fazer isso?
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.
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:
Referente a seu maior concorrente, Sizzle, ele apresentou os seguintes resultados:
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.
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.
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.
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.
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.
