Retour à la leçon
Mission

Mission : un motif de points qui disparaît sur certains navigateurs

Sécuriser un usage du Paint API avec un repli de secours et diagnostiquer une variable non réactive.

Contexte

Sur landing.css, .fond-motif utilise uniquement background-image: paint(points); sans aucun background-image ni background-color de repli, et sans jamais tester "paintWorklet" in CSS avant d'appeler CSS.paintWorklet.addModule(...). Sur un navigateur qui ne supporte pas Houdini, la section apparaît complètement vide, sans fond du tout. Par ailleurs, le worklet PointsWorklet déclare static get inputProperties() { return ["--taille-point"]; } (en oubliant --couleur-point), et changer --couleur-point en JavaScript ne redessine jamais le motif.