Fonctionnalités CSS non prises en charge et solutions de contournement
Le moteur writeHtml effectue le rendu du contenu en une seule passe, uniquement vers l’avant, et ne réorganise jamais la mise en page d’un contenu déjà placé. Certains comportements CSS ne s’accordent pas avec ce modèle. Cette page recense les comportements précis que le moteur n’applique pas et te propose, pour chacun, une solution de contournement prise en charge. Pour connaître l’état de vérification par module, consulte la matrice de prise en charge CSS.
Ces limites sont précisément bornées et ne constituent pas une feuille de route. Chaque entrée nomme le comportement précis qui n’est pas pris en charge, et non la propriété entière.
Comportements non pris en charge
Section intitulée « Comportements non pris en charge »| Comportement | Ce qui n’est pas appliqué | Contournement |
|---|---|---|
Mise en page décalée position: absolute / position: relative | Le moteur place les boîtes dans l’ordre du document. Les décalages top/right/bottom/left qui déplacent une boîte positionnée hors du flux normal ne sont pas appliqués. Le positionnement statique fonctionne. | Utilise des tableaux ou des mises en page flex dans le flux normal pour le placement. |
grid-template-areas nommées | Le moteur n’implémente pas le placement par zones de grille nommées. Le placement explicite sur les lignes de grille fonctionne. | Place les éléments à l’aide de lignes de grille explicites ou utilise un tableau. |
rowspan à travers un saut de page (dégradé) | Une cellule rowspan est rendue sur une seule page. Lorsque le tableau est paginé, une cellule qui s’étend de part et d’autre de la limite de page se fragmente comme décrit dans la décision d’architecture (ADR-007), et une cellule trop haute pour être scindée lève UnsplittableContentException. | Pour les groupes de lignes qui doivent rester intacts lors de la pagination, utilise un élément flottant ou une ligne d’en-tête de catégorie plutôt qu’un rowspan très haut. |
Ordre de peinture de l’arrière-plan avec overflow: hidden | overflow: hidden ne modifie pas l’ordre de peinture de l’arrière-plan, et il ne découpe pas l’arrière-plan d’un enfant selon la boîte arrondie ou dimensionnée d’un ancêtre. | Applique l’arrière-plan à l’élément qui porte la découpe, ou évite de t’appuyer sur des arrière-plans découpés. |
| Texte qui passe à la ligne côte à côte dans un élément flex | Quand un élément flex contient du texte qui doit passer à la ligne, il déborde de sa piste au lieu de replier le texte à l’intérieur de celle-ci. | Utilise un tableau à deux colonnes avec des largeurs de colonne explicites en pixels. |
| Largeur de colonne en pourcentage qui se résout à zéro | Lorsqu’une width de colonne en % n’a aucune base résoluble, elle s’analyse en 0 et déclenche l’avertissement de compression de colonne. | Donne aux colonnes côte à côte des largeurs explicites en pixels. |
Voir aussi
Section intitulée « Voir aussi »- Matrice de prise en charge CSS — état de vérification par module et fonctionnalités prises en charge.
- HTML : sous-système de rendu HTML+CSS vers PDF — le modèle en passe unique à l’origine de ces limites.
- Mettre en page un tableau HTML — modèles de tableaux pour remplacer le positionnement décalé et le texte flex avec retour à la ligne.