Comment déterminer quel type de média css est demandé sur ma page?

Question

Je cherche à modifier la façon dont ma page Web asp .net est affichée dans le navigateur en fonction du type de média CSS utilisé.

Bien que le CSS prenne généralement en compte les différences d'apparence entre l'écran et le mode d'impression, je voudrais également apporter quelques ajustements mineurs au balisage lorsque le mode d'impression est requis. Je déposerais simplement une section flottante en dessous de son frère plutôt que comme une approche de 2 cols qui doit être utilisée pendant la mise en page de l'écran dans le navigateur.

Answer 1

Ce n'est pas possible. Aucun navigateur n'expose ces informations d'une manière qui vous permette de modifier le balisage côté serveur (c'est-à-dire avant de l'envoyer au navigateur).

Le navigateur peut déterminer quel CSS utiliser en fonction de ce qu'il va faire avec cette page (imprimer, afficher, lire ...), mais vous ne pouvez pas savoir ce qu'il sera. Envisagez de modifier votre balisage afin qu'il fonctionne bien avec les css d'écran et d'impression.

Une autre option consiste à créer un lien print qui sera lié à une version optimisée pour l'impression de la page.

Answer 2

Ce n'est pas une très bonne méthode, mais vous pouvez juste ajouter dans la section flottante ci-dessous son frère et cacher cette section dans le fichier CSS de l'écran. Ensuite, dans le fichier CSS Print, vous pouvez afficher cette section cachée et masquer l'autre que vous ne voulez pas dans la page d'impression.

Cela entraînerait l'ajout de code HTML à votre page, mais en fonction de la nature de cette section flottante, il pourrait s'agir d'une option.

Answer 3

Si votre balisage est écrit dans cet ordre afin de faire flotter votre colonne, mais que le format réel du document a plus de sens, vous devez corriger votre balisage et votre écran CSS.

MNarkup ne doit pas dépendre de CSS. Marquez d'abord votre document afin qu'il soit logique sans le CSS - qui, en lisant entre les lignes, est la façon dont vous voulez qu'il affiche pour l'impression. Une fois que vous avez fait cela, modélisez la disposition des colonnes en fonction de cet ordre de source.

Answer 4

Votre objectif était donc de présenter une page de navigateur qui imite «Aperçu avant impression»? Comme indiqué précédemment, le navigateur n'expose pas le type de média, il n'est donc pas possible de l'interroger à l'avance pour modifier la sortie dans le navigateur. Dans votre cas particulier, ma compréhension des documents W3C est que le type de support 'print' est seulement déclenché pour "matériel paginé et pour les documents visualisés à l'écran en mode Aperçu avant impression". La seule façon d'activer le type de support 'print' pour l'affichage à l'écran est de choisir 'Print Preview' de toute façon.

Bien sûr, une fois que vous êtes dans 'Aperçu avant impression', l'utilisation de requêtes média pour voir une mise en page modifiée fonctionne très bien. Voici un exemple super simple qui fait ce que vous vouliez faire:

Les styles:

<style> 
ul li { 
    float:left; 
    margin: 10px; 
} 
@media print { 
    li#printfloat { 
     clear:left; 
    } 
} 
</style> 

et le HTML:

<ul> 
    <li>Sibling 1</li> 
    <li id="printfloat">Sibling 2</li> 
</ul>