1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
|
---
title: page-break-before
slug: Web/CSS/page-break-before
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/page-break-before
---
<div>{{CSSRef}}</div>
<div class="blockIndicator warning">
<p><strong>Attention !</strong> Cette propriété a été remplacée par la propriété {{cssxref("break-before")}}.</p>
</div>
<p>La propriété CSS <strong><code>page-break-before</code></strong> permet d'ajuster les sauts de page placés <em>avant</em> l'élément courant.Cette propriété s'applique aux éléments de blocs qui génèrent une boîte. Elle ne s'appliquera pas à un {{HTMLElement("div")}} qui ne génère pas de boîte.</p>
<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
page-break-before: auto;
page-break-before: always;
page-break-before: avoid;
page-break-before: left;
page-break-before: right;
page-break-before: recto;
page-break-before: verso;
/* Valeurs globales */
page-break-before: inherit;
page-break-before: initial;
page-break-before: unset;
</pre>
<h2 id="Synonymes_avec_break-before">Synonymes avec <code>break-before</code></h2>
<p>La propriété <code>page-break-before</code> est désormais remplacée par {{cssxref("break-before")}}.</p>
<p>Pour des raisons de compatibilité, si on traite <code>page-break-before</code> comme un synonyme de <code>break-before</code>, on pourra utiliser le tableau de correspondance suivant :</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col"><code>page-break-before</code></th>
<th scope="col"><code>break-before</code></th>
</tr>
</thead>
<tbody>
<tr>
<td><code>auto</code></td>
<td><code>auto</code></td>
</tr>
<tr>
<td><code>left</code></td>
<td><code>left</code></td>
</tr>
<tr>
<td><code>right</code></td>
<td><code>right</code></td>
</tr>
<tr>
<td><code>avoid</code></td>
<td><code>avoid</code></td>
</tr>
<tr>
<td><code>always</code></td>
<td><code>page</code></td>
</tr>
</tbody>
</table>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>auto</code></dt>
<dd>Valeur initiale. Les sauts de page sont automatiques (ni forcés, ni interdits).</dd>
<dt><code>always</code></dt>
<dd>Le saut de page est toujours forcé avant l'élément.</dd>
<dt><code>avoid</code></dt>
<dd>Les sauts de page sont évités avant l'élément.</dd>
<dt><code>left</code></dt>
<dd>Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page gauche.</dd>
<dt><code>right</code></dt>
<dd>Le saut de page est forcé avant l'élément afin que la prochaine page soit mise en forme comme une page droite.</dd>
<dt><code>recto</code> {{experimental_inline}}</dt>
<dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>right</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>left</code>.</dd>
<dt><code>verso</code> {{experimental_inline}}</dt>
<dd>Si la page progresse de gauche à droite, cette valeur est équivalente à <code>left</code>. Si la page progresse de droite à gauche, elle est synonyme de <code>right</code>.</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="Exemples">Exemples</h2>
<pre class="brush: css">/* Pour éviter d'avoir un saut de page avant */
/* une note dans un div */
div.note {
page-break-before: avoid;
}
</pre>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS Logical Properties', '#logical-page', 'recto and verso')}}</td>
<td>{{Spec2('CSS Logical Properties')}}</td>
<td>Ajout des valeurs <code>recto</code> et <code>verso</code>.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Paged Media', '#page-break-before', 'page-break-before')}}</td>
<td>{{Spec2('CSS3 Paged Media')}}</td>
<td>Cette propriété peut désormais être étendues aux lignes de tableau et aux groupe de lignes de tableau.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'page.html#propdef-page-break-before', 'page-break-before')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.page-break-before")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("break-before")}}</li>
<li>{{cssxref("break-after")}}</li>
<li>{{cssxref("break-inside")}}</li>
<li>{{cssxref("page-break-after")}}</li>
<li>{{cssxref("page-break-inside")}}</li>
<li>{{cssxref("orphans")}}</li>
<li>{{cssxref("widows")}}</li>
</ul>
|
