S’amuser et apprendre les CSS

Thomas Zilliox ~ 7 minutes

Commentaires (8)

Pendant longtemps, j’ai eu comme projet de faire un « Cahier de vacances de l’intégrateur ». Le but aurait été de pouvoir apprendre et réviser les CSS hors des écrans, que ce soit dans les transports ou sur la plage. Pour moi, faire de l’intégration provoque le même plaisir que de faire des énigmes ou jouer à des casse-têtes. Alors il était certainement possible de s’en inspirer pour faire des cahiers d’exercices  ?

L’idée m’est venue en jouant au Go. On peut apprendre à jouer au Go à l’aide de livres d’exercices appelés tsumego. Il existe la même chose pour le jeu d’échecs : des exercices, sur papier, qui vous permettent d’apprendre ou réviser. C’est très utilisé par les personnes débutantes pour apprendre des coups très précis, et par les joueurs·euses plus expérimentés·ées qui cherchent à s’amuser.

Le plus difficile était de trouver un format d’exercice qui ferait travailler les connaissances en intégration tout en réduisant au maximum la complexité. Il fallait pouvoir créer des exercices unitaires et rapides, qui pourtant déclencheraient une réflexion et un apprentissage. J’ai appelé ces exercices les « Tsume CSS ». En référence aux tsumego, mais aussi parce que tsume veut dire groupe en japonais. Tsume indique qu’il ne faut pas considérer chaque déclaration CSS indépendamment, mais bien les considérer comme un tout.

Avertissement : il ne s’agit pas d’une idée totalement originale, puisque j’ai retrouvé des idées similaires chez deux de mes confrères : Thierry Koblentz en 2011 et Raphaël Goetter en 2016.

Alors, prêt·e à vous amuser et à apprendre les CSS avec les Tsume CSS ?

Les règles

Il y a deux règles pour les Tsume CSS :

Règle n°1

Vous devez identifier quelle est la seule déclaration inutile, c’est-à-dire identifier la ligne qui n’impacterait pas le rendu navigateur si elle n’était pas présente.

Par exemple :

div {
  /* [1] */ display: none;
  /* [2] */ border: 1px solid black;
}

La réponse est, dans l’exemple, la déclaration [2].

Quelle que soit la bordure définie, elle ne sera pas rendue par le navigateur car l’élément est caché par la déclaration [1].

Règle n°2

S’il n’y a pas une unique déclaration inutile, vous devez trouver la déclaration à enlever pour rendre toutes les autres lignes utiles. Cette règle existe pour vous mettre le doute. Parfois, il n’y aura pas une unique règle inutile.

Par exemple :

.hidden {
  /* [1] */ display: none;
  /* [2] */ border: 1px solid black;
  /* [3] */ background: hotpink;
}

La réponse est alors la déclaration [1].

Les lignes [2] et [3] ne sont inutiles que si l’élément est caché par la déclaration [1].

Conditions

Il s’agit d’un exercice théorique. Une déclaration considérée comme inutile dans ce cas, ne devra pas forcément être supprimée dans un projet réel. Les différences principales sont :

  • Dans l’exercice, on considérera que les CSS se résument au code présenté. Aucun autre style n’est déclaré en CSS, directement dans l’HTML, ou même en JavaScript.
  • Dans l’exercice, on considérera que l’élément ciblé existe dans notre structure HTML.
  • Dans l’exercice, on ne considérera que les standards du W3C, et, occasionnellement les implémentations des navigateurs récents.

Chapitre 1 : Les types d’affichages

Exercice 1.1

div {
  /* [1] */ display: block;
  /* [2] */ border: 1px solid black;
}

Réponse 745.

Exercice 1.2

:link {
  /* [1] */ display: inline;
  /* [2] */ color: inherit;
  /* [3] */ text-decoration: none;
}

Réponse 497.

Exercice 1.3

span {
  /* [1] */ padding: 1em;
  /* [2] */ width: 50px;
  /* [3] */ background: hotpink;
}

Réponse 656.

Exercice 1.4

.tag {
  /* [1] */ display: inline;
  /* [2] */ width: 50px;
  /* [3] */ height: 2em;
  /* [4] */ margin: 1rem 0;
}

Réponse 145.

Exercice 1.5

.half {
  /* [1] */ display: inline-block;
  /* [2] */ width: 50%;
  /* [3] */ border: 5% solid black;
}

Réponse 732.

Chapitre 2 : Les polices

Exercice 2.1

.highlight {
  /* [1] */ display: inline-block;
  /* [2] */ font-variant: italic;
  /* [3] */ word-wrap: break-word;
}

Réponse 904.

Exercice 2.2

em {
  /* [1] */ display: inline-block;
  /* [2] */ margin-top: 1em;
  /* [3] */ font-style: italic;
}

Réponse 575.

Exercice 2.3

div {
  /* [1] */ display: inline-flex;
  /* [2] */ word-wrap: break-word;
  /* [3] */ overflow-wrap: break-word;
}

Réponse 303.

Exercice 2.4

div {
  /* [1] */ text-overflow: ellipsis;
  /* [2] */ color: grey;
  /* [3] */ border-bottom: 1px solid gray;
}

Réponse 691.

Exercice 2.5

.exercice {
  /* [1] */ font: "Tsume CSS", arial, sans-serif;
  /* [2] */ font-size: 25pt;
  /* [3] */ border-bottom: 2px groove burlywood;
}

Réponse 384.

Chapitre 3 : Flexbox

Exercice 3.1

div {
  /* [1] */ display: flex;
  /* [2] */ justify-content: flex-start;
  /* [3] */ align-items: flex-start;
}

Réponse 289.

Exercice 3.2

div {
  /* [1] */ display: flex;
  /* [2] */ flex-direction: column;
  /* [3] */ flex-flow: wrap;
}

Réponse 528.

Exercice 3.3

div {
  /* [1] */ display: inline-flex;
  /* [2] */ justify-content: flex-center;
  /* [3] */ align-items: baseline;
}

Réponse 920.

Exercice 3.4

div {
  /* [1] */ display: flex;
  /* [2] */ justify-content: flex-end;
  /* [3] */ display: block;
}

Réponse 249.

Exercice 3.5

div {
  /* [1] */ display: inline-block;
  /* [2] */ justify-content: flex-end;
  /* [3] */ vertical-align: text-bottom;
}

Réponse 333.

Conclusion

Il s’agit là d’exercices de démonstration. Si vous avez trouvé ça trop difficile, c’est normal  ! J’avais imaginé le Cahier de Vacances avec au moins 40 exercices par chapitre, et avec des répétitions. Ainsi, vous auriez eu le temps de vous améliorer. Cela aurait donc été plus progressif et moins difficile que cet extrait.

Alors, est-ce que cela vous a plu  ? Avez-vous appris quelque chose  ? N’hésitez pas à répondre en commentaire  !

Réponses

131 : Réponse [3]. La variable currentColor s’écrit en camelCase, la déclaration [3] est donc invalide. ↑

145 : Réponse [1]. Les éléments en ligne ne sont pas redimensionnables, alors les déclarations [2] et [3] ne seront pas appliquées. En supprimant la déclaration [1], toutes les autres déclarations seront utiles. ↑

200 : Réponse [2]. La propriété z-index s’écrit avec un tiret. Vous ne seriez pas en train de fouiller ? Je pense aussi que la curiosité devrait être récompensée ! Regardez les réponses 404, 503, 666, et répondez en commentaire. ↑

249 : Réponse [3]. Les propriétés [1] et [2] sont inutiles. La déclaration [1] est inutile car écrasée par la propriété [3] et la déclaration [2] n’a d’effet que sur les éléments qui sont des conteneurs flexibles, c’est-à-dire sur les éléments qui sont en display: flex ou display: inline-flex. ↑

289 : Réponse [2]. La propriété justify-content a pour valeur par défaut flex-start, alors que align-items est stretch. ↑

303 : Réponse [2]. Les propriétés word-wrap et overflow-wrap sont deux alias. word-wrap était une propriété non-standard inventée par Microsoft et supportée par la plupart des navigateurs. Une fois standardisée, le nom choisi par le w3c a été overflow-wrap. Ces deux lignes définissant la même chose, la dernière l’emporte et rend la première inutile. Note : on parle bien ici de règle théorique, en pratique la propriété word-wrap est nécessaire pour le support d’Internet Explorer. ↑

333 : Réponse [2]. La propriété justify-content ne s’applique que sur les éléments qui sont des conteneurs flexibles, c’est-à-dire sur les éléments qui sont en display: flex ou display: inline-flex. ↑

384 : Réponse [1]. La propriété font est une propriété raccourcie, elle permet de définir plusieurs propriétés qui commencent par font- en même temps. Celle-ci ne fonctionne que si elle définit au moins font-size et font-family. ↑

404 : Réponse [4]. La spécification CSS 2.1 est devenue une recommandation du W3C tout juste 3 mois après une version majeure d’Internet Explorer. Laquelle ? ↑

497 : Réponse [1]. Le sélecteur :link ne cible que les éléments de type a qui sont des éléments en ligne par défaut. La déclaration [1] est donc inutile. ↑

503 : Réponse [3]. La spécification HTML 4.0 est devenue une recommandation du W3C tout juste 3 mois après une version majeure d’Internet Explorer. Laquelle ? ↑

528 : Réponse [2]. La propriété flex-flow est une propriété raccourcie pour flex-direction et flex-wrap. Ainsi la déclaration [3] écrase la déclaration [2] avec la valeur row. ↑

575 : Réponse [3]. Les éléments de type em définissent par défaut le style d’écriture en italique. ↑

618 : Réponse [3]. La propriété flex-basis n’a d’effet que sur les éléments flexibles, c’est-à-dire les éléments dont le parent est déclaré comme un conteneur flexible avec display: flex ou display: inline-flex. Ici notre élément est lui-même un conteneur flexible, rien ne nous indique qu’il soit un élément flexible. ↑

656 : Réponse [2]. Les éléments span sont des éléments en ligne par défaut, et les éléments en ligne ne sont pas redimensionnables. ↑

666 : Réponse [3]. La spécification CSS 2.1 contient 17 couleurs, alors que HTML 4.0 n’en contient que 16. Laquelle des ces couleurs a été rajoutée : aqua, orange, olive, tomato ? ↑

691 : Réponse [1]. La propriété text-overflow ne s’applique que si la propriété overflow est définie avec une autre valeur que visible, sa valeur par défaut. Et, oui, les deux écritures grey et gray sont acceptées en CSS. ↑

732 : Réponse [3]. Contrairement aux tailles, aux marges internes, et aux marges externes, les largeurs des bordures ne peuvent jamais être déclarées en pourcentage. ↑

745 : Réponse [1]. Les éléments de type div sont des éléments block par défaut. La déclaration [1] est donc inutile. ↑

887 : Réponse [3]. La propriété transition ne prend pas de « s ». L’unité ch existe bien, elle représente la largeur du caractère « 0 ». ↑

904 : Réponse [2]. La propriété font-variant n’accepte pas la valeur italic. Les principales valeurs sont small-caps et normal. Pour mettre en italique, il faut utiliser la propriété font-style. ↑

920 : Réponse [2]. La valeur flex-center n’existe pas. Même si on écrit flex-start et flex-end, pour centrer c’est seulement center. ↑

Thomas Zilliox

À propos de Thomas Zilliox

Thomas est expert CSS indépendant. Il enseigne à l'IUT et accompagne les entreprises dans la mise en place des bonnes pratiques CSS. Il partage ses réflexions sur tzi.fr. Il a aussi co-créé zupple.fr, une application d'énigmes dans Lyon.

8 commentaires sur cet article

  1. Yoan Malié, le dimanche 1 décembre 2019 à 06:01

    Belle ouverture du bal pour cette nouvelle édition, un petit quiz pour apprendre mais aussi réapprendre ce qu’on pouvait croire acquis. Des questions vicieuses et des réponses fourbes, j’ai bien aimé me prêter à l’exercice et me confronter à mes connaissances.
    La règle n°2 m’a vraiment plus posé de problème que la plupart des questions .

    J’aimerais bien voir ce genre de quiz plus développé sur un site dédié ! D’une manière plus interactive avec une gestion de réponses plus simple à visualiser.

    Une petite erreur dans la réponse à la question 3.3 je crois, car il s’agit en fait de la ligne 2 et non la 3 dont on parle.

    Merci Thomas pour ce quiz !

  2. Thomas Zilliox, le dimanche 1 décembre 2019 à 08:13

    Bien vu @Yoan ! C’est corrigé :)

  3. @webetcaetera, le jeudi 12 décembre 2019 à 11:55

    Super !
    Et quel chouette support pour démontrer aux étudiants qui ont la « Bootstrap science infuse » que ce n’est pas si simple et qu’ils ont encore 2 ou 3 trucs à apprendre peut-être… :)
    Merci Thomas.

  4. Lena Chandelier, le lundi 13 janvier 2020 à 16:11

    Excellent article et le jeu caché est très malin ;)

    Je tente les réponses suivantes : 9 – 4 – acqua

  5. HTeuMeuLeu, le lundi 13 janvier 2020 à 16:12

    Alors, pour répondre au petit jeu caché dans l’article. Comme ça, à vue de nez, je dirais… 404 : IE5 ; 503 : IE4 ; 666 : olive. Maintenant je vais chercher les réponses…

  6. Shuon, le lundi 13 janvier 2020 à 16:21

    Je me disais bien qu’il y avait un truc louche avec le code des réponses.
    Je tente : 9, 5 et Orange et j’ajoute au passage qu’il n’y a pas vraiment de question associée aux réponses 618 et 887, est-ce normal docteur ?

    Merci pour l’article et le(s) jeu(x) !

  7. Jérémy, le lundi 13 janvier 2020 à 16:26

    9 – 4 – orange ;-)

  8. Thomas Zilliox, le mardi 14 janvier 2020 à 06:10

    @Shuon Bien vu, j’ai laissé les réponses des exercices que je n’ai pas gardé :)