Pseudo-seletores: O bug do seletor e as chaves
Postado por: Pedro Rogério emEm relação ao meu último post, sobre Drop Caps com CSS, um amigo me deu uma dica muito interessante por e-mail. Reparem que no tutorial anterior utilizamos o pseudo-seletor :first-letter para desenvolver o efeito de drop caps da seguinte forma:
p:first-letter {
font-size: 4.2em;
float: left;
line-height: 0.6em;
margin: 0.13em 0.13em 0.13em 0;
}
Reparem que existe um espaço entre o seletor e a abertura da chave, isso é obrigatório pois se esse espaço não for declarado, o efeito não funciona no IE6, parece brincadeira, mas é verdade, observem o código:
p:first-letter{
font-size: 4.2em;
float: left;
line-height: 0.6em;
margin: 0.13em 0.13em 0.13em 0;
}
Experimentem acessar esse exemplo com o Internet Explorer 6. Não sei dizer ao certo se esse bug atinge todos os pseudo-seletores, mas fica aí a dica.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Uma outra observação que deve ser levado em conta é o ponto e vírgula no final de toda instrução.
Para fins de organização e performance, fica melhor:
p:first-letter { font-size: 4.2em; float: left; line-height: 0.6em; margin: 0.13em 0.13em 0.13em 0 }
Tudo na mesma linha.
Parabéns pelo poste!
Sobre o poste acima:
discordo sobre a sua “organização e performance”,com um código desse é quase sado-masoquismo trabalhar com o css,definitivamente isso não é organização, e a performance? nos primórdios, talvez, era sim um economia de banda, porém,agora julgo desnecessário.
Leia http://www.tableless.com.br/nao-otimize-seu-codigo#more-1029
interssante a dica
Opá e ai Pessoal e esse 2009 como que tá?
Ai após ler o post e o comentário acima e tbm ler o link indicado no comentário eu tenho a seguinte opinião: a forma de otimizar e de escrever vai varia de desenvolvedor p/ desenvolvedor e de projeto p/ projeto.
até mais pessoal
ja tive esse problema… uma vez usei e deu certo.. outra vez tentei usar e não funcionou… só não sabia que era por causa disso… bizarro né…
É pra rir? Esperimentem fazer um site do tamanho ou manter o site com o porte do BANCO CENTRAL. Estamos falando de centenas de usuários contectando ao seu website ao mesmo tempo. Logo, o tamanho das CSS tem influência sim.
Os espaços deixados também contam.
Não é a toa que existe o site de otimização de CSS.
Vejam: http://www.cleancss.com/
Concordo apenas em parte. A otimizaçao do CSS nao deveria ser uma questao de estilo de programaçao, mas de avaliaçao da real necessidade – que em ultimo caso depende do fluxo de visitantes do site. Ja imaginaram o efeito de uns poucos kb por visitante, em um site do tipo ebay, amazon, google…?
Já em sites de menor porte, a mesma economia de banda multiplicada nao compensa a perda de clareza do codigo. Em casos intermediários, basta fazer um cálculo rapido e aí sim, tomar uma decisao consciente.
Muito interessante o post. O IE6 é tao cheio de bugs que acabamos tendo de aproveitar um para corrigir outro. Entao, bem venha mais um para o repertorio!
Feliz 2009
Você já otimizou o seu HTML?
o Google otimiza.
o CSSnoLanche não otimiza.
A otimização do CSS ou do HTML só é necessário em sites grandes, e dai podemos até pensar na performance, mais na organização a coisa não fica muito boa não
Quando se fala em padrões web se fala também em boas práticas.
Um trabalho nesse ramo exige sempre pesquisar (e não falo desses artigos com conteúdos pobres divulgados em alguns sites brasileiros), falo de suas fontes originais, como a W3C por exemplo.
Como já foi falado Wladia Viviani existe um trabalho de otimização com relação ao usuário. Ainda existem pessoas com conexão 56kb.
Só voltando ao assunto do principal, os pseudo-seletores, não funciona pra todos não.
Vai ver que a linguagens TRIDENT, GECKO, etc usam uma função equivalente ao TRIM para limpar espaços nos PSEUDOS e execulta-los posteriormente, na hora de criar o PSEUDO para a versão 6 do IE esqueceram de aplicar a função e deu no que deu =/
MicoSoft era treta, agora estão mais copetentes.
Esta dica é muito util para desenvolvedores, obrigado por compartilhar