Niquelao » Arquivo do blog » Outro toque de estilo no Curso de CSS

» Arquivo do blogue » Outro toque de estilo no Curso de CSS Outro toque de estilo no Curso de CSS 11 de Novembro de 2009, por Rumoroso Como já fiz na entrada anterior ( estilando o curso de CSS Avançado ), vou continuar a comentar alguns dos estilos que utilizei na apresentação do curso de CSS para Zaragoza. Hoje um rapidinho Numa determinada diapositivo tive de categorizar uma lista de propriedades.

Esta lista era ligeiramente longa para a acomodar de forma vertical no ecrã (sobretudo quando queria adicionar outra lista no mesmo diapositivo), pelo que decidi estilizá-la em linha . Novamente a minha intenção era aproveitar a própria apresentação como exemplo (recordo-vos que a fiz com o rumoslide , o qual é basicamente XHTML, CSS e javascript) para demonstrar o que se pode conseguir com as folhas de estilo. A seguir incluo a lista em questão. Faço-o em forma de imagem para que se veja o seu aspeto sem estilizar (apenas mostra os estilos que o Firefox lhe aplica por defeito ): O HTML utilizado é simples.

Trata-se de uma lista na qual cada item é constituído por um elemento code com texto no seu interior:

• border-collapse
• border-spacing
• caption-side
• color
…
• widows
• word-spacing

…e o resultado que quis obter (e que evidentemente obtive) é o seguinte (novamente incluo uma captura de ecrã): Os estilos utilizados para conseguir este resultado são: code { font: .8em monospace; color: #009; } .herencia li { display: inline; } .herencia li:after { content: ’, ’; } .herencia li:last-child:after { content: ’ ’; } A primeira coisa que fiz foi estilizar o elemento code para o poder diferenciar do resto do texto.

Para isso joguei com o tamanho da fonte, a sua família e a sua cor . Como se vê, tudo muito simples. Para que a lista inicialmente na vertical passasse a alinhar-se, alterei a propriedade display dos items para inline .

Depois fiz aparecer uma vírgula tipográfica e um espaço (“, “) através da propriedade content ( conteúdo gerado ). Esta apliquei-a sobre o pseudoelemento :after .

Related: UserWay — Widget de accesibilidad con plan gratuito para empezar hoy mismo.

Finalmente, como isto faz aparecer a vírgula também no último item, o que fiz foi indicar que o seu conteúdo gerado estivesse vazio ( content: ’ ’ ). Bem, é evidente que há um senão em algo que ainda não comentei e que espero que alguém tenha reparado (idealmente algum dos alunos/as assistentes ao curso). Para selecionar o último item utilizei a pseudoclasse :last-child de CSS 3 , cujo suporte está muito pouco difundido. Pensareis que poderia ter utilizado apenas seletores de CSS 2.1 .

Por exemplo, poderia ter gerado o conteúdo antes de cada item (em vez de depois) usando :before e depois selecionar com :first-child o primeiro item para lhe retirar a vírgula à frente. Porque não o fiz?… pelo seguinte: A vírgula dispõe-se no início de cada linha quando um item se situa nessa posição, o que é evidentemente uma incorreção .

Para evitar isto, e sabendo que o navegador que ia utilizar tem suporte para isso, decidi empregar CSS3… Sei-o, :last-child não está suficientemente difundido entre os navegadores, mas pelo menos nas últimas versões sim… e para a apresentação serviu-me perfeitamente. Depois de todo este rolamento pode extrair-se uma conclusão: CSS dá-me gozo, e o poder usar a apresentação do curso como exemplo dá-me ainda mais gozo . Isso sim, por favor,… navegadores com mais suporte e que chegue depressa o CSS 3 .

Worth a look: AudioEye — Accesibilidad gestionada: automatización combinada con revisión humana.

Deixo-vos o link para um par de listas nas quais se detalha o grau de suporte de CSS com base no navegador: http://www.webdevout.net/browser-support-css#css3standards http://www.quirksmode.org/css/contents.html A propósito, na apresentação não me consegui conter e utilizei mais um pouco de CSS 3… evidentemente não podia ficar sem arredondar alguns cantos . Num próximo artigo comentar-vos-ei isso… Outro toque de estilo no Curso de CSS Categoria: CSS —> 2 comentários Tweets that mention Niquelao » Arquivo do blogue » Outro toque de estilo no Curso de CSS — Topsy.com 12 de Novembro de 2009 […] This post was mentioned on Twitter by Jorge Rumoroso, Jorge Rumoroso.

Jorge Rumoroso said: #niquelao Another touch of style in the CSS Course http://bit.ly/J7vm9 (en inglés parece más cool, verdad! […] Outro toque de estilo no Curso de CSS 12 de Novembro de 2009 […] Texto completo en Niquelao: Outro toque de estilo no Curso de CSS […] Podes fazer um acompanhamento dos comentários graças ao feed RSS 2.0 . Também podes enviar um trackback desde o teu site. Artigo anterior: Estilando o curso de CSS Avançado Artigo seguinte: Multiples imágenes de fondo con CSS 3 —> —> —> Esta obra está sob uma licença de Creative Commons .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.