Faq com CSS
Postado por: Pedro Rogério emDigo com convicção que as CSS(Folhas de estilo em cascata) foram a melhor invenção do homem(após a invenção do Pão fatiado). Com CSS você tem total controle sob a formatação do layout, e para muitos que não sabem, é possível até gerar conteúdo através de CSS, utilizando a propriedade content, juntamente com os pseudo-elementos :after e :before. Nesse tutorial, vamos fazer o uso da propriedade :before juntamente com a propriedade content para desenvolver um Faq com CSS.
HTML
Observem a seguinte marcação HTML:
<dl>
<dt>What is Lorem Ipsum?</dt>
<dd>Lorem Ipsum is simply dummy text of the printing and ...</dd>
</dl>
Faremos o uso aqui de Lista de definição, onde a tag dl é o elemento container, a tag dt será usada para a pergunta e a tag dd será utilizada para a resposta. Agora observem o CSS.
CSS
dl {
border-left:1px solid #999;
margin:0 auto 20px;
padding-left:10px;
width:500px;
}
dt, dd {font-size:1.2em; margin:0 0 10px}
dt:before {
background-color:#f7f7ef;
content:"Pergunta";
}
dd:before {
background-color:#dbd4b7;
content:"Resposta";
}
dt:before, dd:before {
display:block;
font-size:1.2em;
font-style:italic;
margin:0 0 10px;
padding:5px 10px;
width:150px;
}
Como podem ver, os textos Pergunta e Resposta são gerados através do CSS com a utilização da propriedade content, em conjunto com o pseudo elemento :before, que fará com que esse texto venha antes das minhas perguntas e respostas. A partir daí eu posso aplicar estilos a eles da forma que quiser, e como podem ver no tutorial, aplicai largura, cor, tipo de fonte, cor de background. Infelizmente os pseudo elementos :after e :before e a propriedade content não funcionam no Internet Explorer, mas com a utilização de JavaScript, você pode conseguir com que essas propriedades funcionem facilmente.
Nesse exemplo eu utilizei uma biblioteca JavaScript desenvolvida por Dean Edwards, que faz com que várias propriedades do CSS que não funcionam no IE passem a funcionar, prometo fazer um post sobre isso.
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.
Parabéns meu brother! Show de bola mesmo tava lendo no livro do major esta tecnica mesmo!
Mais uma vez show de bola e posta mais coisas ai e vlw pela força que tem me dado!
Abraços!
Muito interessante essa técnica, só fiquei em dúvida quanto a acessibilidade. Se alguém usar um leitor de tela conseguirá ler os textos gerados?
@Vinícius,
Não efetuei o teste, mas seria interessante se alguém pudesse testar e deixar aqui o comentário.
E ai povo do css tudo na paz? E ai Pedro muito bacana esse artigo hem… showww
t+
PARABENS PELA MATERIA SHOW DE BOLA!
Ótimo artigo! Parabêns pelos incríveis tutoriais que anda escrevendo sobre css.
Aí vai um dica: A tag dl, usando os webstandards deve ser usada assim:
term
descr
term
description
Não que seu exemplos esteja errado:
term
description
term
description
Mas, usando a semântica de uma definition list, o que eu citei estaria mais correto.
muito animal o post, parabens! eu particularmente gostei porque aprendi a utilizar a tag “dl” que nem sabia que existia, a utilização das pseudo-classes é muito legal, mas infelizmente o IEca sempre nos complica… se eu fosse fazer, utilizaria um span no começo da “pergunta” ou “resposta” para depois estiliza-lo do jeito que está no exemplo, assim também ficaria facil de um leitor de tela ler e em questão de layout ficaria igual ^^
Cara muito legal esse efeito.
Eu sempre vi pessoas usando o content com outras coisas mas não sabia que eu podia escrever conteúdo pelo CSS.
Seria bom ver mais exemplos e aplicações com o Content.
Parabéns