:first
Baseline
2023
Newly available
Depuis August 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.
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
Chargement…