Comment les navigateurs web se conforment aux pages web : Rendu, DOM, CSS et JS
Interaction navigateur-page : Rendu basé standards
« Déference » ici signifie comment les navigateurs interprètent et exécutent le code qu'une page web fournit, suivant standards ouverts pour affichage cohérent.
Mécanismes fondamentaux
- Parsing HTML → Arbre DOM : Navigateur tokenize HTML, construit Document Object Model. Scripts peuvent modifier DOM dynamiquement.
- Parsing CSS → CSSOM : Feuilles styles parsées en CSS Object Model. Combiné avec DOM → Arbre de rendu (nœuds visibles + styles).
- Layout (Reflow) : Calcule géométrie (position, taille) pour chaque objet rendu.
- Paint : Dessine texte, couleurs, images, bordures, ombres sur couches.
- Composite : GPU combine couches, applique transformations/opacité, sort vers écran.
Standards clés suivis par navigateurs
- HTML Living Standard (WHATWG) — éléments, parsing, APIs.
- Spécifications CSS (W3C) — sélecteurs, flex/grid, propriétés personnalisées, containment.
- ECMAScript (TC39) — langage JavaScript.
- APIs Web : Fetch, WebSockets, WebRTC, Canvas, WebGL, WebAssembly, Service Workers, IndexedDB, etc.
- HTTP/1.1, HTTP/2, HTTP/3 (QUIC) — transport.
Pourquoi la conformité importe
- Interopérabilité : Même page marche dans Chrome, Firefox, Safari, Edge.
- Amélioration progressive : Contenu core marche sans JS/CSS ; améliorations s'empilent.
- Accessibilité : HTML sémantique + ARIA → lecteurs d'écran, commande vocale.
- Performance : Standards permettent cache, préchargement, streaming, priorisation.
Quand navigateurs diffèrent
- Fonctionnalités non standardisées (préfixes, origin trials).
- Bugs / implémentations incomplètes.
- Réglages utilisateur (polices, zoom, mode sombre, mouvement réduit).
- Différences moteurs (Blink, WebKit, Gecko).
Développeurs testent cross-browser ; utilisent détection fonctionnalités, polyfills, fallbacks.