Teste seu conhecimento #20

Em 2006 comecei a publicar nesse blog uma série de desafios CSS que consistiam em solucionar problemas fáceis de se resolver com scripts, mas que deveriam ser resolvidos exclusivamente com uso de CSS.

A série “caiu no gosto” dos então apaixonados por CSS, foi um sucesso que durou até 2011 e ficou consagrada com o nome de Desafios do Maujor.

Hoje, em um daqueles momentos de nostalgia, resolvi dar uma repassada nas matérias do Blog e 18 anos de vivência com Padrões Web povoaram meus pensamentos em alguns minutos.

Bons tempos aqueles dos desafios do Maujor, pena que perdeu a graça, comentei comigo. Pena uma ova! Evidência inequívoca que só tem fera na área. Àquela época tudo, ou quase tudo de CSS era novidade.

Tem tanta coisa, escondida nas dezenas de Especificações CSS do W3C que, não raro, eu encontro verdadeiras preciosidades. Ato contínuo vou para o site caniuse (abre em nova janela) e lá encontro a linha dos sites atuais toda em fundo verde-lindo, exceto para os dois amados primeiros itens da linha que quando o fundo não é na cor vermelha, é na cor verde diarreia.

A preciosidade que encontrei recentemente inspirou-me a publicar a seguinte proposta (nome atual para desafio do Maujor):

Na marcação HTML fornecida nesse link (abre em nova janela), acrescente declarações CSS no seletor div que se encontra na folha de estilos incorporada ao documento para obter a solução conforme mostrada na figura a seguir.

Confirmando: No documento fornecido a única edição permitida é o acréscimo de declarações CSS para o seletor div. Você sabe, mas não é demais lembrar que a sintaxe de declarações CSS é: propriedade: valor; e declaração CSS é diferente de regra CSS.

Encontrou a solução? Quer compartilhar? Publique em (JSFiddle ou outro lugar) e informe o link.

Em breve divulgarei o resultado.

Divirta-se!