:first
La pseudo-classe :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%;
}
Seul un sous-ensemble restreint de propriétés peut être modifié via cette pseudo-classe :
- Les propriétés liées aux marges :
margin
- Les propriétés liées aux lignes veuves et orphelines :
orphans
etwidows
- Les propriétés liées aux sauts de page :
page-break
De plus, seules les unités absolues peuvent être utilisées pour les marges.
Syntaxe
Error: could not find syntax for this item
Exemples
CSS
@page :first {
margin-left: 50%;
margin-top: 50%;
}
p {
page-break-after: always;
}
HTML
<p>Première page.</p>
<p>Deuxième page.</p>
<button>Imprimer</button>
JavaScript
document.querySelector("button").addEventListener("click", () => {
window.print();
});
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éfaut.
Spécifications
Specification |
---|
CSS Paged Media Module Level 3 # left-right-first |
Compatibilité des navigateurs
BCD tables only load in the browser