Alternativas para desenvolvedores que n茫o gostam, assim como eu, de utilizar coment谩rios condicionais para diferencias seus CSS’ em diferentes browsers.
/***** Selector Hacks ******/
/* IE 6 and below */
* html #uno聽 { color: red }
/* IE 7 and below */
*:first-child+html #dos { color: red }
/* IE 7 and modern browsers */
html>body #tres { color: red }
/* Modern browsers (not IE 7) */
html>/**/body #cuatro { color: red }
/* Opera 9.27 and below */
html:first-child #cinco { color: red }
/* Safari */
html[xmlns*=""] body:last-child #seis { color: red }
/*safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) #siete { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type #ocho { color: red }
/* saf3, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez聽 { background: #FFDECE; border: 2px solid #ff0000 }
}
/***** Attribute Hacks ******/
/* ie6 and below */
#once { _color:blue }
/* ie7 and below */
#doce { *color: blue } /* or #color:blue */
· · · · ·
Os pseudo-elementos s茫o, assim como as pseudo-classes, utilizados para dar efeito visual aos elementos (x)html e possui sua sintaxe exatamente igual as pseudo-classes: seletor:pseudo-elemento {propriedade: valor}.
Entre os pseudo-elementos existentes, irei destacar alguns explicando o seu uso.
:first-line
Utilizado para criar efeitos visuais na primeira linha de um elemento (x)html, este pseudo-elemento s贸 pode ser utilizado em elementos a n铆vel de bloco.
p:first-line {color:#f00}
<p>GustavoRibeiro.net - Tableless, Acessibilidade e SEO</p>
Abaixo o resultado do uso do :first-line lembrando que, a formata莽茫o 茅 feita de acordo com a renderiza莽茫o no browser. No exemplo abaixo, simulo um paragrafo com uma quebra de linha devido ao seu tamanho ser menor que o tamanho do texto nele escrito.
GustavoRibeiro.net -
Tableless, Acessibilidade e SEO
» Continue lendo Tutorial CSS #04: Pseudo-element
· · · · ·
Pseudo-classes s茫o utilizadas para adicionar efeitos em alguns seletores css, mas 茅 claro, nem tudo s茫o flores e algumas pseudo-classes n茫o ir茫o funcionar no, t茫o odiado, Internet Explorer.
Podemos dize que a pseudo-classe mais utilizada hoje em dia 茅 o :hover. Pseudo-classes elas que d茫o efeitos visuais em links, quando posicionado o cursor do mouse em cima, e em qualquer outro element html, por茅m, vale lembrar que no IE6, as pseuso-classes acima s茫o funcionar em hyperlinks e s贸.
Vejamos como seria a sintaxe para o uso das pseudo-classes:
seletor:pseudo-classe {propriedade: valor}
Tamb茅m podemos utilizar as pseudo-classes em classes css:
seletor .classe:pseudo-classe {propriedade: valor}
» Continue lendo Tutorial CSS #03: Pseudo-classes
· · · · ·
O CSS Reset 茅 uma t茅cnica bastante comum entre os desenvolvedores client-side para zerar os atributos pr茅-setados para as tags html que vem por default nos browsers, ou seja, possuem diferentes configura莽玫es de fonte padr茫o, margens etc.
Como muitos sabem, principalmente os desenvolvedores, essas diferen莽as de valores atrapalham no desenvolvimento e por isso temos que zer谩-los antes de qualquer coisa para que podemos ter certeza, n茫o tanta assim, de que estamos trabalhando fora desses valores default dos browsers.
Procurando no google voc锚 ir谩 encontrar diversas formas de aplica莽茫o do CSS Reset, umas mais implementadas e outras bastante simples que, particularmentes, 茅 a que gosto de usar. Dentre todas essas solu莽玫es, temos as mais conhecidas como a do Eric Meyer, Tantek Celik, sugest玫es de empresas como a do Yahoo! ou a mais simples poss铆vel.
* {margin:0;padding:0;list-style:none}
PS: A forma de escrita do CSS vai de cada um. Eu, por exemplo, consigo ler melho o CSS em linha, como feito acima, do que escrevendo cada propriedade em cada linha.
D煤vidas, sugest玫es e tudo mais nos coment谩rios. 
· · · · ·
Hoje irei falar sobre como criar menu rollover com imagem. Menus rollover s茫o menus que alternam o estilo ao passarmos o mouse sobre o objeto, um mouseover da vida.
Antigamente – e ainda bato de frente com isso hoje em dia – esses menus eram criados utilizando javascript e, pelo menos, dois arquivos de imagem – uma para o menu ativo e outra quando ativado o mouseover. Um problema que muito me incomoda com essa maneira de se criar menus 茅 o fato de, quando passamos o mouse por cima no objeto ele sumir com a imagem de fundo enquanto carrega a nova imagem.
Com todas as possibilidades que o CSS nos d谩, isso muda muito. Primeiro que, n茫o precisamos mais do javascript para ativar a troca de imagem e t茫o pouco de duas imagens. Vamos a explica莽茫o.
» Continue lendo Tutorial CSS #01: Menu rollover com imagem
· · · · ·
