Niquelao » Arquivo do blog » Problemas de espaço e pseudo

» Arquivo do blog » Problemas de espaço e pseudo-elementos Niquelao - CSS Problemas de espaço e pseudo-elementos 7 de Setembro de 2006 por Maroto É estranho descobrir um bug deste tipo, ou seja, uma puta parvoíce que, ou bem não tens nada que fazer ou é a casualidade mais casual que faz com que te dês conta. E além disso, que seja tarde.

Já se escreveu sobre o mesmo há mais de um ano em Maxgeek , Satzansatz e seguramente em algum outro por aí. Ao tema. O que é que se passa? Quando utilizamos os pseudo-elementos definidos pela especificação de CSS 2.1 :first-letter e :first-line (ignoramos o pseudo-elemento :first-child e similares já que o nosso amigo IE passa um pouco deles) podemos comprovar que por vezes não obtemos os resultados esperados.

O que se passa?. Incompreensivelmente, o IE falha na hora de interpretar a sintaxe de CSS . Se a seguir a estes pseudo-elementos utilizarmos a chave ( { ) para começar a nossa declaração sem deixar um espaço entre ambos, o IE não o interpreta.

Podes vê-lo no exemplo um . p:first-line { color: blue; font-weight: bold; } O mesmo acontece se tentarmos oferecer propriedades comuns a vários elementos numa mesma declaração, onde os mesmos aparecem separados por vírgulas ( , ). Podes vê-lo no exemplo dois . p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } E a solução, haverá? Neste caso, existe e é relativamente fácil.

Simplesmente deixar um espaço em branco entre o pseudo-elemento e o símbolo que tenhamos que aplicar, seja a vírgula ( , ) ou a chave ( { ). Se não acreditas, aqui tens o exemplo três . p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } Eh!!

Que aqui não acaba tudo! Outro probleminha que encontramos vem da mão das listas. E agora, o que se passa?. Se aplicarmos um estilo ao pseudo-elemento :first-letter a elementos de lista, o IE de forma agradável propaga-o ao marcador do próprio elemento de lista (bullet no caso de lista não ordenada, número ou letra no caso de lista ordenada).

Related: accessiBe — Superposición de IA que promete cumplimiento WCAG en 48 horas.

Que incrédulo, olha o exemplo quatro . E a solução para esta confusão? Se aceitais polvo como animal de companhia, diremos que com eliminar os marcadores das listas mediante: li {list-style:none} Se não, pois nada.

Outro detalhe sem importância, é que ao IE7b2 dá igual que não haja espaços entre o pseudo-elemento e o caracter { . Isso sim, ao seu irmão mais pequeno importa-lhe, assim que respeitemos o seu espaço vital. E já agora, o que se passa com a especificidade? Pois que vai passar, pois nada, pelo menos com o IE .

Em primeiro lugar devemos saber que estes pseudo-elementos só (que não é pouco), afetam elementos a nível de bloco. Bem, se definirmos umas propriedades para, por exemplo, um parágrafo e a seguir definirmos outras propriedades para outro parágrafo que aparece dentro de um bloco de citação ( blockquote ) teremos as mesmas características nos 2 parágrafos (claro, isso se nos tivermos dado conta de lhe dar o espaço correspondente entre o pseudo-elemento e o seu maravilhoso símbolo. Tudo resumido no último exemplo .

Worth a look: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

E a solução? Como hoje já me cansei, procuras tu. Categoria: CSS —> Podes fazer um seguimento dos comentários graças ao feed RSS 2.0 . Também poderias deixar um comentário , ou enviar um trackback desde o teu site.

Artigo anterior: Retocando Formulários (episódio I) Artigo seguinte: Estreamos Asides Deixa o teu comentário Os campos Nome e Email são obrigatórios Adiciona-nos a… Tags que destacamos em geral acessibilidade bert bos blockquote bug cañas citações cite comportamento conhecimento CSS escuas padrões fieldset Firefox formato formulário fontes hidden ie IE 7 informação javascript legend lista niquelando obrigatório opera praia q squash férias w3c WCAG xhtml Esta obra está sob uma licença de Creative Commons .

P.S. A few readers have asked which software de testing we actually reach for — it's Deque axe DevTools Pro; take a look here if you want the current details.