:first
Baseline 2023 Newly available
Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
La pseudo-classe CSS :first, liée à la règle @ @page décrit la mise en forme de la première page lors de l'impression d'un document. ( voir :first-child pour le premier élément d'un noeud )
/* Cible le contenu de la première page */ /* lorsqu'on imprime */ @page :first { margin-left: 50%; margin-top: 50%; } Note : Vous ne pouvez pas modifier toutes les propriétés CSS avec cette pseudo-classe. Vous pouvez uniquement modifier les marges, orphans, widows et les sauts de page du document. De plus, vous ne pouvez utiliser que des unités de longueur absolues pour définir les marges. Toutes les autres propriétés seront ignorées.
Syntaxe
:first { /* ... */ } Exemples
Utilisation de :first pour les styles d'impression de page
Appuyez sur le bouton « Imprimer ! » pour imprimer l'exemple. Les mots sur la première page doivent être quelque part autour du centre, tandis que les autres pages auront leur contenu à la position par défauts :
<p>Première page.</p> <p>Deuxième page.</p> <button>Imprimer !</button> @page :first { size: 8.5in 11in; margin-left: 3in; margin-top: 5in; } p { page-break-after: always; font: 1.2em sans-serif; } document.querySelector("button").addEventListener("click", () => { window.print(); }); Spécifications
| Specification |
|---|
| CSS Paged Media Module Level 3 # first-pseudo |
Compatibilité des navigateurs
Loading…