Easy-Micro


LANGAGE Langage CSS
CSS Media

CSS dynamique suivant le média

CSS 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" />

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

CSS 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.

Appel des deux feuilles de styles (dans le head)

<link rel="stylesheet" media="screen" type="text/css" href="css/ecran.css" />
<link rel="stylesheet" media="print" type="text/css" href="css/imprime.css" />

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 :
<div class="invisible">Patali, patala...</div>

Pour aller plus loin :
<link rel="stylesheet" media="screen and (max-width: 640px)" href="smallscreen.css" type="text/css" />


Suivez les aventures des skippers aquitains sur EasyVoile.com
Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]
Dimanche 21 juillet 2019 - Semaine 29 - Saint Victor (Demain: Sainte Marie-Madeleine)
Aujourd'hui, c'est l'anniversaire de Hubert-Felix Thiefaine (1948-71 ans), chanteur français et de Charlotte Gainsbourg (1971), actrice française. Autre 21 juillet: 1798 - Victoire de la "bataille des pyramides" par Bonaparte.
Haut de page Easy-Micro