Liste toutes les variables définies
Definition de la propriété css orphans
^La propriété CSS orphans est utilisée pour contrôler le nombre minimum de lignes de texte qui doivent apparaître en haut d'une page avant qu'un saut de page ne soit autorisé. Cette propriété est particulièrement utile pour les documents à plusieurs pages tels que les articles de journaux, les livres électroniques et les magazines en ligne.La syntaxe générale de la propriété orphans La syntaxe générale de la propriété orphans est la suivante :
orphans: nombre;
nombre est la valeur numérique qui représente le nombre minimum de lignes de texte qui doivent être affichées en haut de la page. Par défaut, cette valeur est définie à 2.
| Valeurs par défaut | 2 |
|---|---|
| Inherited: | oui |
| Animable : | non En savoir plus sur l'animable |
| Version: | CSS3 |
| Syntaxe JavaScript: | object.style.orphans = "3" |
Valeurs possible de la propriété css orphans
Les valeurs possibles pour la propriété orphans sont les nombres entiers positifs. Par exemple, si vous définissez la valeur à 3, cela signifie qu'il doit y avoir au moins 3 lignes de texte avant qu'un saut de page ne soit autorisé. Si vous définissez la valeur à 1, cela signifie qu'un saut de page peut être autorisé dès qu'une seule ligne de texte apparaît en haut de la page.
Astuces et conseils
L'utilisation de la propriété orphans peut aider à améliorer la lisibilité de vos documents en garantissant que chaque page commence avec suffisamment de contenu. Cela peut également être utile pour les documents contenant des éléments tels que des titres ou des images qui occupent une grande partie de la première ligne de texte.
Il est important de noter que la propriété orphans ne fonctionne que pour les éléments qui sont divisibles en plusieurs pages. Les éléments qui ne peuvent pas être divisés en plusieurs pages, tels que les images, les vidéos et les tableaux, ne sont pas affectés par cette propriété.
Enfin, il est également important de garder à l'esprit que l'utilisation de la propriété orphans peut avoir un impact sur la mise en page de votre document. Si vous définissez une valeur trop élevée, cela peut entraîner des pages avec une quantité de contenu inégale, tandis que si vous définissez une valeur trop basse, cela peut entraîner des pages avec très peu de contenu. Il est donc important de trouver un équilibre qui fonctionne pour votre document spécifique.
Exemple d'utilisation pratique de la propriété CSS orphans
Voici un exemple d'utilisation pratique de la propriété CSS orphans :
Exemple : Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>La propriété CSS orphans </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
orphans: 3;
}
</style>
</head>
<body>
<h1>Titre de l'article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis ipsum vel nisi aliquet vestibulum eu a purus. Vivamus varius sit amet dolor vel eleifend. Donec mollis, sapien eget placerat eleifend, mauris velit semper tortor, vel feugiat magna nibh eu metus. Aliquam mollis enim vel gravida vestibulum. Praesent bibendum sapien quam, nec gravida justo sodales vel. Nulla sollicitudin, odio eget tristique interdum, massa purus vehicula diam, in egestas augue lectus quis arcu. Nullam volutpat sit amet elit a ultrices. Ut sit amet enim commodo, volutpat orci eget, rhoncus mauris. Sed euismod justo a mi fermentum euismod. Aliquam at lectus vel tellus pharetra bibendum eu sit amet sapien. Suspendisse non eleifend nulla.</p>
<p>Etiam faucibus bibendum enim in commodo. Maecenas ullamcorper justo eu tellus vestibulum fringilla. Sed porttitor magna vel ante ornare, in sagittis nisi bibendum. Ut eget nulla a nulla laoreet blandit vel eu est. Morbi nec ultricies quam, quis iaculis tortor. In pretium sagittis dolor. Nullam quis nibh sit amet metus euismod suscipit in vel augue. Maecenas nec massa vitae urna tempor elementum. Sed ultricies enim eget ante consectetur, non ultricies felis sagittis. Duis pretium volutpat mauris, at dignissim quam fermentum sed. Suspendisse bibendum nibh quis pretium lacinia. In eget lacus sit amet turpis molestie facilisis nec at tortor. Aliquam suscipit magna a semper sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque id urna in dolor consectetur pulvinar ut nec enim. Vivamus euismod nunc quis augue ultrices, et blandit purus ultrices.</p>
<p>Nullam eu dolor vel tellus feugiat faucibus. Duis et feugiat urna. Donec feugiat pharetra fringilla. Aenean lacinia velit nec efficitur pharetra. Suspendisse vitae metus dignissim, gravida metus eu, bibendum dolor. Duis finibus imperdiet vestibulum. Nunc gravida libero vel velit malesuada, non convallis nunc blandit. Nam sollicitudin leo at odio molestie congue. Nulla sit amet nulla vel enim maximus vulputate a eget lectus. Integer nec aliquet lacus. Donec sed sapien eu magna blandit hendrerit. Maecenas in felis nec quam commodo tristique.</p>
<p>Vivamus faucibus justo quis diam tincidunt sagittis. Aenean vitae libero et lectus tristique commodo. Praesent non mi suscipit, fermentum enim non, ullamcor per nulla. Nullam nec lorem libero. Ut scelerisque vel mauris in pretium. Quisque eleifend purus nec nibh elementum lacinia. Ut pharetra ex in urna ullamcorper, vel vulputate massa malesuada. Proin auctor magna ut sapien vehicula pretium. Integer varius euismod ipsum vel consectetur. Sed ut odio bibendum, malesuada ante sed, blandit nulla. Nullam ut nisi vel libero dapibus efficitur. Suspendisse suscipit eleifend lorem, at vestibulum sapien semper ac. Suspendisse semper velit et purus facilisis, eget lobortis magna dignissim. Nullam dictum ante quis nibh malesuada, non bibendum elit molestie. Nam quis dui a dolor tempor semper. Duis ac magna eget turpis varius feugiat non non est.</p>
</body>
</html>
Dans cet exemple, la propriété CSS orphans est appliquée à tous les paragraphes (<p>) du document HTML. La valeur de orphans est 3, ce qui signifie que si un paragraphe est divisé en plusieurs parties à la fin d'une page, au moins 3 lignes doivent rester sur la page précédente.
Par exemple, si le troisième paragraphe du document ne rentre pas en entier sur la page précédente, au moins les trois premières lignes de ce paragraphe seront reportées sur la page suivante.
L'utilisation de la propriété orphans est particulièrement utile pour la mise en page de documents qui contiennent beaucoup de texte, comme des articles de blog ou des livres électroniques. Cela permet de garantir une meilleure lisibilité en évitant de couper les phrases en plein milieu et de faciliter la lecture pour les utilisateurs.
Prise en charge de la propriété dans les navigateurs
Les numéros figurant dans le tableau indiquent la première version du navigateur qui prend totalement en charge la propriété.| Explorateur |  |  |  |  |  |
|---|---|---|---|---|---|
| Verssion | 25 | 8 | Non supportée | 3.1 | 10 |