Comment utiliser CSS avec HTML en C#35 ; pour des PDF réactifs

Pourquoi le choix du bon type de média CSS est-il important?

IronPDF génère des PDF à partir de HTML en C# et peut rendre une feuille de style d'écran en PDF par défaut. Ceci est pratique parce que les feuilles de style d'impression sont souvent moins bien documentées, utilisées ou développées par rapport à leurs homologues écran. Cependant, il est crucial de comprendre la distinction entre ces types de médias pour produire des PDF de qualité professionnelle.

Lorsque vous travaillez avec CSS (Screen & Print) dans IronPDF, le choix entre les types de médias écran et impression a un impact significatif sur votre sortie PDF finale. Les supports d'écran préservent les éléments interactifs et les conceptions visuelles riches, tandis que les supports d'impression optimisent le contenu pour la lisibilité et la consommation sur papier.

CSS3 permet que certains styles CSS soient rendus exclusivement dans les documents imprimés, tandis que d'autres sont destinés aux navigateurs web. IronPDF peut travailler avec l'un ou l'autre, vous donnant un contrôle total sur la façon dont votre contenu HTML est rendu en PDF. Cette flexibilité garantit que, que vous créiez des rapports numériques, des factures imprimables ou des documents hybrides, vos PDF répondent aux exigences spécifiques du cas d'utilisation prévu.

Quand dois-je utiliser le type de média CSS Print vs Screen?

Créez et appliquez une feuille de style imprimée à votre HTML : Apprenez à créer et appliquer une feuille de style d'impression parfaite..

Chaque type de média CSS vise des cas d'utilisation différents. Essayez chacun d'entre eux pour voir lequel répond à vos besoins. Tenez compte des lignes directrices suivantes :

Utilisez le type de média CSS Print lorsque:

• Création de documents destinés à l'impression physique
• Générer des factures, des rapports ou des documents formels
• Vous avez besoin d'en-têtes de tableaux répétés d'une page à l'autre
• L'économie d'encre est une priorité
• Travailler avec les exigences de Taille de papier personnalisée

Utilisez le type de média CSS Screen lorsque:

• Création de PDF interactifs avec des éléments visuels riches
• Préserver l'esthétique de la conception web dans le PDF
• Inclure les images et les couleurs d'arrière-plan
• Le PDF sera principalement visualisé sur des écrans
• Travailler avec des conversions HTML responsive en PDF

Quelles sont les différences visuelles entre les modes écran et impression ? [CSS print vs screen media types comparison showing Apple Mac page with images hidden in print version](/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/Comparison%20of%20Screen%20and%20Print%201.webp) (comparaison des types de médias d'impression et d'écran, montrant une page Apple Mac avec des images cachées dans la version d'impression) [CSS media types comparison : La mise en page de l'impression omet les icônes, la mise en page de l'écran inclut les icônes pour les spécifications du MacBook](/static-assets/pdf/how-to/pixel-perfect-html-to-pdf/Comparison%20of%20Screen%20and%20Print%202.webp) Les exemples ci-dessus montrent comment le même contenu HTML est rendu différemment en fonction de la sélection du type de média CSS. Remarquez que la version imprimée supprime les images décoratives et les icônes pour créer un document plus propre et plus facile à imprimer, tandis que la version écran conserve tous les éléments visuels pour la visualisation numérique.

---

## Comment répéter les en-têtes de tableau sur plusieurs pages d'un document PDF?

Pourquoi les en-têtes de tableau n'apparaissent-ils qu'une seule fois en mode écran ? Lorsque vous traitez des tableaux HTML qui s'étendent sur plusieurs pages, définissez la propriété **`CssMediaType`** sur **`PdfCssMediaType.Print`**. Cela permet de s'assurer que l'en-tête du tableau se répète en haut de chaque page étendue. En revanche, **`PdfCssMediaType.Screen`** indique à Chrome de n'imprimer les en-têtes qu'une seule fois. Ce comportement est particulièrement important lors de la création de [Rapports IronPDF](https://ironpdf.com/how-to/csharp-pdf-reports/) avec de longs tableaux de données. Le type de support imprimé active des règles CSS spécifiques que les navigateurs utilisent pour la pagination, notamment la propriété `thead {display : table-header-group;}` qui permet la répétition de l'en-tête. Cette caractéristique est essentielle pour maintenir le contexte lorsque les lecteurs feuillettent des documents de plusieurs pages.

Quelle est la structure HTML requise pour les en-têtes répétitifs ? Pour que Chrome détecte l'en-tête du tableau, enfermez-le dans une balise ``. Let's render the 'tableHeader.html example of repeating table headers' HTML file to PDF to see the effect. Voici la structure HTML recommandée : ```html

Column 1	Column 2	Column 3

``` ### Comment implémenter la répétition des en-têtes de tableaux en C#? ```cs :path=/static-assets/pdf/content-code-examples/how-to/html-to-pdf-responsive-css-table-header.cs ``` Pour des options de mise en forme de tableau plus avancées, explorez [Marges personnalisées](https://ironpdf.com/how-to/custom-margins/) pour contrôler l'espacement autour de vos tableaux, ou mettez en œuvre [Page Breaks](https://ironpdf.com/how-to/html-to-pdf-page-breaks/) pour vous assurer que les tableaux démarrent sur de nouvelles pages lorsque cela est nécessaire.

À quoi ressemble le fichier PDF final ? ## Configuration avancée des types de médias CSS Lorsque vous travaillez avec des mises en page complexes, combinez les types de médias CSS avec d'autres fonctionnalités d'IronPDF. Par exemple, lors de l'utilisation des paramètres [Viewport & Zoom](https://ironpdf.com/how-to/viewport-zoom/), le type de média CSS que vous choisissez influe sur la mise à l'échelle des conceptions réactives dans le PDF final. Voici un exemple de configuration avancée : ```cs using IronPdf; using IronPdf.Rendering; ChromePdfRenderer renderer = new ChromePdfRenderer(); // Configure for print media type with custom settings renderer.RenderingOptions.CssMediaType = PdfCssMediaType.Print; renderer.RenderingOptions.PrintHtmlBackgrounds = true; // Override print defaults renderer.RenderingOptions.MarginTop = 25; renderer.RenderingOptions.MarginBottom = 25; // Add custom CSS for print media string customCss = @" @media print { .no-print { display: none; } body { font-size: 12pt; } h1 { page-break-after: avoid; } } "; // Render with custom CSS injection string htmlWithCss = $"{yourHtmlContent}"; PdfDocument pdf = renderer.RenderHtmlAsPdf(htmlWithCss); pdf.SaveAs("advanced-print-layout.pdf"); ``` Pour les projets nécessitant une précision au pixel près, pensez à utiliser la fonctionnalité [Debug HTML with Chrome](https://ironpdf.com/how-to/pixel-perfect-html-to-pdf/) pour prévisualiser exactement le rendu de vos types de médias CSS avant de générer le PDF final. ## Bonnes pratiques pour les types de médias CSS dans IronPDF 1. **Tester les deux types de médias** : Testez toujours votre HTML avec les deux types de médias, l'écran et l'imprimé, afin de déterminer lequel produit les meilleurs résultats pour votre cas d'utilisation spécifique. 2. **Utiliser l'impression pour les documents** : Lors de la création de documents formels, de factures ou de rapports, le type de support imprimé fournit généralement des résultats plus nets et plus professionnels. 3. **Leverage Media Queries** : Utilisez les requêtes de média CSS pour adapter vos mises en page à différents scénarios de sortie. 4. **Considérer les performances** : Les feuilles de style d'impression ont souvent un rendu plus rapide parce qu'elles excluent les éléments visuels inutiles. 5. **Validez votre CSS** : Utilisez les [paramètres de rendu HTML](https://ironpdf.com/examples/pdf-generation-settings/) pour vous assurer que votre CSS est correctement appliqué lors de la génération du PDF. En maîtrisant les types de médias CSS dans IronPDF, vous pouvez créer des PDF parfaitement adaptés à vos besoins, qu'ils soient conçus pour la distribution numérique ou l'impression physique.