Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Teste seu conhecimento #20

Publicado em: 2017-10-4 — 64.458 visualizacoes

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.

figura antes x depois da série desafios do maujor

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!

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.

Esta matéria foi publicada em: 2017-10-4 (quarta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para https://www.maujor.com/blog/2017/10/04/desafios-do-maujor-20/trackback no seu site.

3 comentários na matéria: “Teste seu conhecimento #20”

  1. MaujorNo Gravatar disse:

    @Débora Duarte
    Muito bem.
    Obrigado por participar

  2. Débora DuarteNo Gravatar disse:

    Muito bom relembrar!

    Fiz o teste em pouquíssimo tempo. Segue aí o resultado https://jsfiddle.net/deboraduarte/yre5btjf/1/

  3. Michael AlvesNo Gravatar disse:

    Grande Maujor. Bons tempos… obrigado por nos relembrar.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo