Teste seu conhecimento 09
Publicado em: 2009-11-9 — 29.045 visualizacoes
Alfabeto bicolor com CSS
DESAFIO ENCERRADO Confira as soluções.
A imagem acima é um screenshot da renderização do alfabeto em duas cores alternadamente.
Este desafio número 9 consiste em obter a renderização mostrada na figura, usando HTML e CSS.
Regras gerais:
- Usar somente (X)HTML e CSS (sem scripts);
- Não usar imagens;
- Não usar tabelas;
- Não usar estilos inline;
- Não usar hacks;
- A renderização deve ser no IE6+, Firefox3 e Opera10;
- Use as seguintes declarações para fontes:
font-family: monospace;
font-size:140%;- Use as seguintes cores:
vermelha – #f00
azul – #00f- Na marcação HTML use somente o elemento SPAN.
- Use as seguintes cores:
Se você encontrar a solucão mande para mim via email o arquivo .html
maujorcss[arroba]maujor[ponto]com – com a sua solução. E, não poste a solução nos comentários, para que outros possam tentar.
Desafio encerrado. Não envie soluções.
Para cada solução correta recebida eu postarei nos comentários informando o nome do autor.
Dentro de aproximadamente 30 dias, postarei a solução.
Ah! não se esqueça que você pode se inscrever para receber email informando quando novos comentários forem postados nos arquivos no Blog e assim acompanhar uma matéria de seu interesse.
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
Esta matéria foi publicada em: 2009-11-9 (segunda-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2009/11/09/teste-seu-conhecimento-09/trackback no seu site.
Vejo como meu html é fraco quando entro na rede e leio seus posts.
No caso em que ele não especifica qual usar, uso vários atuais do mercado, exceto IE.
Qual o programa que vocês usam para ver o resultado final ?
Não existe solução correta. Existe a mais correta para a situação que você se encontrar. O Maujor mostrou a solução mais alinhada com os padrões, mas que não facilita a acessiblilidade, isso ja mostra que a solução varia de caso a caso. Por isso que a web é esse caos de sobrinhos por aí…todo mundo fazendo de um jeito.
Agora fiquei curioso. Qual a solução correta?
Pelo exemplo do Diego Eis no Tableless, ele funciona do ie6 pra cima. Mas aí você seria, semanticamente, obrigado a usar table. O que no contexto geral ñ faz muito sentido eu acho.
Se tivesse que fazer isso em um projeto real, dependendo do público alvo, eu provavelmente faria utilizando :nth-child(2n+1), e usaria jQuery pros outros browsers.
Bom pessoal,
Com dois ou mais span, quem conseguiu a renderezição sugerida no desafio ganhou pontos. Só que o Maujor citou:
“para desenvolver segundo os padrões não basta obter o efeito visual proposto, é preciso estudar com cuidado como marcar o documento.”
Ao meu ver, se estivesse trabalhando em um projeto que tivesse uma necessidade igual a sugerida no desafio, jamais marcaria o meu documento com somente dois span, a menos que o alfabeto colocado ali não tivesse necessidade alguma de leitura por parte do usuário (algo bem improvável, certo?)…
[]’s
fazer pensando em acessibilidade ja é “ninja”…
Acho que se levarmos em conta que isso é um desafio para testar as habilidades,a acessabilidade ganha menos notoriedade.Então faça do jeito mais “ninja” possível.
Usei um span na cor azul e especifiquei color:#f00 no body, assim, quem não tinha span assumia vermelho, reduzi pela metade o numero de spans desnecessarios.
Eu fui um dos que colocou para todas as letras. A diferença é que fica legível e acessível, mesmo que aumente o html e consequentemente o peso do arquivo. O que em uma aplicação real seria indiferente já que este arquivo de teste deu 1,41kb aproximadamente.
http://www.rhamses.com.br/desafio.html
Bom, eu montei com 2 SPANs, mas realmente a leitura, sem CSS, fica esquisita.
Eu não sei se o IE6 reconhece o :first-letter, mas se reconhecer, poderíamos agrupar 2 letrar (em sequência) dentro de 1 SPAN, e colocar a :first-letter como blue.
Aqui o que eu fiz: http://www.flyleo.com.br/desafio.html Meu único erro – acredito – foi o uso de letras maiúsculas. Usei apenas 2 spans
Leandro, eu tinha feito assim:
[span]a [span]b[/span] c [span]d[/span] e … [/span]
span { azul }
span span {vermelho}
Isso também solucionaria o problema com leitor de tela.
Bom dia galera, eu fiz o teste aqui, consegui o resultado, mas usei mais recursos, nossa eu estava mó feliz por ter conseguido, mas quando abri o código pronto do majur, fiquei de cara comigo, puxa o cara matou a pau, usou pouco código numa malandragem de sobreposição q eu nem tinha pensado, puxa, muito bom mesmo… eu ainda chego lá, kkkk
Leandro, no meu caso havia feito assim:
a b c d e ….
span { azul }
span span {vermelho}
ou algo do tipo, também solucionaria o problema do leitor de tela.
isso é relevante se pensarmos em acessibilidade.
EU usei somente 2 spans , owned !
Maujor,
Usando a solução proposta por você (com somente 2 span) a renderização fica OK, porém não creio que essa solução seja aplicável a algum projeto real, já que dessa forma a sequência do alfabeto é desrespeitada (a c e g i k m…) – fica sem sentido, por exemplo, pra um usuário de leitor de tela…
[]’s
já q só três pessoas usaram 2 span, significa q existe outra resposta possivel, qual?
Show….
mandou muito bem mesmo, espero que tenha mais desafios como este.
Considerando a solução proposta, daria pra usar um único SPAN para 2a cor e sobreposição. O resto seria padrão no próprio BODY.
Claro que isso seria o “cúmulo do enxugamento”.
Esqueçam meu ultimo comentário. Agora que eu vi o link para a solução =P
Já que o desafio acabou, quando você vai dar a sua versão do Desafio Maujor? Estou realmente interessado em saber como usando dois elementos é possivel fazer este mesmo efeito.
🙁 Meu erro foi ter colocado as letras em maiusculas, certo?
Mas gostei, espero o próximo desafio.
Todas as soluções enviadas renderizaram letras do alfabeto coloridas alternadamente. Contudo é o detalhe que faz a diferença e não foram consideradas certas as soluções com:
1-) Ausência de DOCTYPE no documento;
2-) Uso de letras maiúsculas em lugar de minúsculas;
3-) Tamanho de fonte diferente de 140%;
4-) Use de elementos que não SPAN na marcação.
5-) Alfabeto incompleto.
Observações gerais:
a-) Ficou evidente a falta de atenção com relação à marcação HTML em acordo com os padrões. A maioria das soluções utilizou mais de 40 elementos SPAN para obter o efeito, quando apenas 2 são necessários. (3 soluções apenas com 2 SPAN!)
Várias soluções com SPAN aninhados, chegando a mais de 70 SPANs na marcação.
Isto não invalidou a solução, mas para desenvolver segundo os padrões não basta obter o efeito visual proposto, é preciso estudar com cuidado como marcar o documento.
b-) Cuidado com regras CSS para o elemento container. Os elementos-filho herdam certas propriedades. Observe um erro comum nas soluções:
* { font-size: 140%;}
span {font-size: 140%;} /* resultou em 140% de 140% = 196% */
Uma solução pode ser vista neste link.
Examine o código fonte.
3a. Avaliação:
Os autores das soluções em conformidade com as regras do desafio estão na cor vermelha.
André Krumm;
Diego Haz;
Leonardo Balter;
Pedro Henrique Dropa.
O desafio está encerrado!
@Marcelo
Não quero dar spoilers do resultado, mas eu realmente fiquei curioso do porque de voce querer usar CSS3 para resolver este desafio. Te garanto que uma das formas de resolução ñ tem nada a ver com esta versão das folhas de estilo.
abraços
Hmm… vou esperar o resultado, mas pode me tirar uma duvida maujor ? pode utilizar css 3 ? qualquer versão ?
Bem bacana o desafio. Vamos ver nos próximos resultados se eu me saí bem.
Epa,acertei!
2a. Avaliação:
Os autores das soluções em conformidade com as regras do desafio estão na cor vermelha.
Alan Borges;
Caio Lucena;
Edmilson Silva;
Hugo Fittipaldi Areas;
James Clébio;
Leonardo Souza;
Rhamsés Soares;
Rodrigo Capuski;
Rodrigo Padovani;
Thiago dos Santos Valentim.
Nota: O desafio encerra hoje à noite.
Quero so ver os erros que o Maujor vai achar ai. (:
Tambem tinha achado que me passou algo, pois nao houve grande dificuldades.
/estou sem acentos 😡
1a. Avaliação:
Os autores das soluções em conformidade com as regras do desafio estão na cor vermelha.
Bruno Henrique Stein;
Denis Dib;
Helena Freire;
Leandro Alves Ferreira;
Leonardo Antonioli;
Luis Gustavo Rocha Soares;
Marcelo Andrade;
Paulo Henrique Stocco Zancaro;
Raul Cloud.
Atenção: Não serão consideradas a segunda solução de autores que já participaram.
Quando eu postar a solução comentarei os erros.
Editado: Alguns autores com solução certa não estavam na cor vermelha.
Já mandei… só aguardar o resultado.
acho q não entendi direito, pq eu consegui fazer sem nenhuma dificuldade. Pode usar class?