Aller au contenu principal
Valrose.tech

Web frontend · L2 · Section 1/6

HTML et CSS

Progression

Points d’expérience : —XPSérie de jours consécutifs : —· —Progression du module : — / —compris

#HTML et CSS modernes

Écrire un document HTML, c'est décrire des contenus, pas dessiner des boîtes. Les éléments header, nav, main, section, article, footer donnent au navigateur, aux lecteurs d'écran et aux moteurs de recherche la même grille de lecture. Un test vaut mille débats : désactivez le CSS de votre page dans la DevTools. Si la hiérarchie reste claire (titres dans l'ordre, listes visibles, formulaires lisibles), votre sémantique tient.

#Règles de structure non négociables

  • Une seule octave de titres par ordre logique : un seul h1, puis h2, puis h3 sans sauter de niveau.
  • Chaque input possède un label lié par for/id : le clic sur le label focus le champ, et le lecteur d'écran annonce « Email, zone de saisie » au lieu d'une énigme.
  • Les éléments interactifs sont des button ou a, jamais des div cliquables. Un button offre gratuitement le focus, la touche Entrée, l'annonce « bouton ».
  • Les images porteuses d'information ont un alt pertinent ; les images décoratives prennent alt="" pour être ignorées.

Exemple de squelette complet :

htmlhtml

1<body>2  <header>3    <a href="/" class="brand">Cours Web</a>4    <nav aria-label="Navigation principale">5      <ul>6        <li><a href="/cours" aria-current="page">Cours</a></li>7        <li><a href="/exercices">Exercices</a></li>8      </ul>9    </nav>10  </header>11 12  <main class="container">13    <article class="card">14      <h1>Inscription</h1>

Trois choix à remarquer : novalidate désactive la validation native pour garder la main sur les messages (voir le chapitre JavaScript) ; autocomplete aide les gestionnaires de mots de passe et les remplissages automatiques ; aria-describedby relie le champ d'aide au champ pour que le lecteur d'écran le lise aussi.

#CSS : layout d'abord, décor ensuite

Composez la page en deux questions : quelles régions (Grid) et comment s'alignent les contenus d'une région (Flexbox). Déclarez vos décisions en custom properties pour qu'un thème se change en un seul endroit.

csscss

1:root {2  --space-1: 0.5rem;3  --space-2: 1rem;4  --space-3: 1.5rem;5  --radius: 0.5rem;6  --bg: #ffffff;7  --fg: #1e293b;8  --card: #f8fafc;9}10 11@media (prefers-color-scheme: dark) {12  :root {13    --bg: #0f172a;14    --fg: #e2e8f0;

Deux modernismes assumés : margin-inline/margin-block suivent le sens d'écriture (utile dès que la page est traduite), et le thème sombre est piloté par les variables, pas par des sélecteurs dupliqués. Le contraste texte/fond reste supérieur à 4.5:1 dans les deux thèmes : c'est le seuil WCAG AA pour du texte courant.

#Le duo Grid et Flexbox, sans les confondre

  • Flexbox distribue des éléments le long d'un axe : barre d'outils, champs d'une ligne, actions d'une carte.
  • Grid place des éléments sur deux axes dans des zones nommées : gabarit de page, grille de cartes.
csscss

1/* Gabarit global : zones nommées, une seule déclaration */2.page {3  display: grid;4  grid-template-areas: "header" "main" "footer";5  min-height: 100dvh;      /* dvh suit les barres d'adresse mobiles */6}7 8/* Grille de cartes : 1 colonne mobile, 2 dès 40rem */9.cards {10  display: grid;11  gap: var(--space-2);12  grid-template-columns: 1fr;13}14@media (min-width: 40rem) {

Le design part de la version étroite (mobile) et s'élargit avec min-width, ordre naturel du web. Animer des transformations plutôt que des layout : transform et opacity sont composités par le GPU et ne déclenchent pas de recalcul de mise en page.

csscss

1.card { transition: transform 150ms ease; }2.card:hover, .card:focus-within { transform: translateY(-2px); }3 4@media (prefers-reduced-motion: reduce) {5  *, *::before, *::after { transition-duration: 0.01ms !important; }6}

#Exercice

Créez une page « Équipe » : headeravec navigation, main contenant trois article de membres (photo, nom, rôle), footer. La grille affiche trois colonnes au-delà de 60rem, deux au-delà de 40rem, une en dessous. Contraintes : aucun framework, une seule feuille, aucune classe utilitaire.

Vérification possible, sans outil supplémentaire :

  1. DevTools, onglet Rendering, « Emulate CSS media feature prefers-reduced-motion » pour constater que les transitions s'annulent.
  2. Redimensionnez la fenêtre : les ruptures se font sans barre de défilement horizontal (aucun contenu ne dépasse).
  3. Vue « accessibility » de l'onglet Elements : les trois articles sont des régions nommées, le focus parcourt la nav dans l'ordre visuel.

#Animation : pipeline de rendu

Comprendre pourquoi certaines propriétés CSS coûtent cher : le navigateur enchaine quatre étapes après le parse.

HTML
Le parseur construit le DOM, arbre des éléments
CSS
Le CSS est parse en CSSOM, les styles calculés
Layout
Tailles et positions de chaque boîte
Paint/Composite
Pixels, puis calques assemblés

Observation directe : dans la DevTools Performance, changez la couleur d'un élément et vous verrez des ticks Paint ; changez sa largeur et Layout s'ajoute en amont. La règle qui en découle figurent au-dessus : animez transform et opacity, jamais width ou top.

Correction guidée de l'exercice
  1. Structure : un h1 dans main (« L'équipe »), les trois membres en article avec h2 pour le nom, img alt="Portrait de …", et le rôle en p.
  2. Grille : .cards { display: grid; grid-template-columns: 1fr; gap: var(--space-2); } puis deux media queries min-width: 40rem (2 colonnes) et 60rem (3 colonnes).
  3. Les images prennent max-width: 100%; height: auto; display: block; pour ne jamais dépasser leur colonne.
  4. Piège classique : si une colonne déborde, cherchez un min-width oublié ou un mot très long, et ajoutez min-width: 0; sur l'élément de grille concerné.
Vous devez écrire une barre de navigation horizontale alignée à droite. Quel outil et pourquoi ?
Vous devez écrire une barre de navigation horizontale alignée à droite. Quel outil et pourquoi ?