La règle @media - The @media Rule

• Un style CSS appropriés aux médias peut être définit de deux façons :
  
  ◊ En spécifiant le média visé dans la feuille de style au travers des règles at (@media ou @import). Exemple :
  
  
  @import url("pour-la-voix.css") aural;
  
  @media print {
  /* ici feuille de style pour impression */
  }
  
  La règle @media spécifie les types de médias (séparés par des virgules) d'un jeu de règles (entres des accolades) comme ceci : @media screen, print { body { line-height: 1.2 } }
  
  La règle CSS2 @import spécifie la feuille de style à importer. @import doit être suivie de l'URL d'un fichier. Cette règle CSS permet d'importer une feuille de style au seins même d'une autre feuille de style.
  
  ◊ En spécifiant le média visé dans le langage du document. En HTML, on utilise l'attribut "media" de l'élément LINK pour attacher une feuille de style externe à un média donné :
  
  
  <link rel="stylesheet" media="screen" type="text/css" href="css/ecran.css">

Types de médias reconnus

• all
  Convient pour tous les appareils.
• aural
  Destiné aux synthétiseurs de parole.
• braille
  Destiné aux appareils braille à retour tactile.
• embossed
  Destiné aux appareils à impression braille.
• handheld
  Destiné aux appareils portatifs (petits écrans monochromes).
• print
  Destiné à un support paginé opaque et aux documents vus sur écran en mode aperçu avant impression.
• projection
  Destiné aux présentations en projection, par exemple avec des projecteurs ou des impressions pour des transparents.
• screen
  Destiné principalement aux moniteurs couleurs.
• tty
  Destiné aux médias utilisant une grille de caractères fixe, tels les télétypes, les terminaux ou les appareils portatifs aux capacités d'affichage réduites.
• tv
  Destiné aux appareils du type télévision (avec ces caractéristiques : basse résolution, couleur, défilement des pages limité, sonorisé).

Source: Yoyo Design

Exemple de gestion dynamique de l'impression avec le média CSS PRINT

Contenu de imprime.css

.invisible {
display: none;
width: 0px;
overflow: hidden;
padding:0px;
margin:0px;
}


• display
  Cette propriété CSS permet de spécifier la manière dont un élément est affiché (none, inline, block, list-item ou table). Avec none, le bloc ne sera pas affiché.
• overflow
  La propriété CSS overflow permet de gérer les dépassements de blocs (calque, champ formulaire...).
  Overflow peut prendre la valeur de
  ◊ visible, rend visible tout ce qui dépasse.
  ◊ hidden, cache tout ce qui dépasse.
  ◊ scroll, met toujours une barre de défilement horizontale et verticale.
  ◊ auto, met une barre de défilement horizontale ou verticale si besoin.
  ◊ inherit, hérite de son parent (css2).
  (voir aussi overflow-x ou overflow-y pour la gestion des barres de défilement vertical).

Réalisation

Est utilisé dans la balise link, l'attribut media qui attend comme paramètre screen ou print. Soit le type de média à utiliser.


L'attribut "media" est automatiquement reconnu par le navigateur.

Application

Il suffit d'appliquer la classe invisible à tous les conteneurs que vous ne voulez pas imprimer.

Comme ceci :

Pour aller plus loin :