CSS Diner

Sobre o jogo

CSS Diner é um jogo de quebra-cabeça para aprender seletores CSS, a parte do CSS que diz a quais elementos de uma página web uma regra se aplica. O cenário é um restaurante: uma mesa posta com pratos, marmitas, maçãs, laranjas e picles, e cada nível é um pedido que diz algo como "selecione as maçãs pequenas" ou "selecione a maçã no prato". Você responde digitando um seletor, e os itens que ele pega começam a pular. Escolha exatamente os certos e o pedido é servido; escolha a mais ou a menos e nada acontece.

O jogo tem 32 níveis, e cada um apresenta um único tipo novo de seletor. Começa pelo básico, o nome da tag, o id e a classe, e segue para escolher coisas dentro de outras (descendentes e filhos diretos), coisas ao lado de outras (irmãos adjacentes e gerais) e vários elementos de uma vez com a vírgula e o seletor universal. A segunda metade trata de posição e estado: primeiro, último e único filho, a família nth-child com números, even e fórmulas como 2n+3, as mesmas ideias por tipo de elemento, elementos vazios, negação com :not() e seletores de atributo que casam o começo, o fim ou o meio de um valor.

Jogando aqui

Clique em Play e o primeiro pedido aparece no alto da coluna da esquerda. Digite o seletor no editor, abaixo da mesa, e aperte Enter ou clique no botão enter. O painel da direita explica o seletor que você está aprendendo, com a sintaxe e alguns exemplos, e vale a leitura quando você empaca; o link "Help, I'm stuck" à esquerda mostra uma introdução aos seletores. O HTML da mesa aparece ao lado do editor, e passar o mouse sobre um item da mesa mostra a marcação dele, que é a pista de que você precisa para escrever o seletor.

Seu progresso fica guardado no navegador, com um visto ao lado de cada nível resolvido, então dá para fechar a página e voltar depois. O jogo está só em inglês.

Controles

Algumas coisas que valem saber

Olhe a marcação. A mesa desenhada na tela é feita de elementos de verdade: o visualizador de HTML os lista e passar o mouse sobre um item mostra a tag e a classe dele. O seletor que você escreve é comparado com essa marcação, não com a imagem.

Mais curto também vale. Vários seletores resolvem a maior parte dos níveis. O jogo só confere se os itens que você pegou são exatamente os certos.

Posições contam de outro jeito. nth-child conta todos os filhos de um pai, enquanto nth-of-type conta só os que têm a mesma tag. Vários níveis são construídos em torno dessa diferença.

Sem pressa com a ordem. Dá para voltar a um nível resolvido e tentar outro seletor, e a lista de níveis permite pular para um assunto que você já conhece.

Créditos e licença

CSS Diner foi criado por Luke Pacholski. Ele é publicado sob a Mozilla Public License 2.0, que cobre o código, os estilos e as imagens do jogo. O jogo é servido como o autor o publicou, a não ser por algumas mudanças nossas: o analytics, os botões de compartilhamento, os links para outros sites e as fontes da web carregadas do Google foram retirados, e um pequeno script (jQuery Mousewheel) agora vem junto com o jogo em vez de ser buscado numa rede de distribuição, para que nada seja pedido a outros sites. Ele também contém jQuery, jQuery Mousewheel e a malihu custom scrollbar (licença MIT) e as fontes Exo 2 (SIL Open Font License) e Satisfy (Apache 2.0). Os textos das licenças, o fonte original e as nossas mudanças estão ligados nesta página.