Le web version papier (et plus)

Un collègue profite de son trajet dans le metro pour parcourir ses sites préférés.

Mais komenkifé ? Y’a déjà le WiFi dans le métro parisien ? Ou bien il a un N80 avec un forfait 3G ? Ou mieux ? Un Blackberry ?

Non, rien de tout ça. Par contre, dans le métro, pour peu qu’on trouve une place assise, on peut lire tranquillement son journal. C’est cette astuce que mon collègue utilise : il imprime ses sites préférés et les lit tranquillement sur papier. Du papier ! C’est fou !

A cette occasion, il m’a fait remarquer que le barbablog n’était pas optimisé pour l’impression et cela l’ennuyait lors de ses trajets. J’ai regardé mes pieds, j’ai rougi, j’ai pleuré et j’ai finalement fait la seule chose à faire : j’ai rajouté une feuille de style dédiée à l’impression.

Lorsqu’on appelle une feuille de style, il est possible de spécifier le média auquel celle-ci s’applique. Le web, on l’oublie trop souvent, n’est pas uniquement réservé aux écrans. On peut très bien lire une page web sur papier, sur terminal mobile, avec un terminal audio…

La liste du W3C des médias auxquels on peut appliquer une feuille de style spécifique est longue :

Les plus utilisées à l’heure actuelle [1] sont screen, print, projection et handeld.

La syntaxe pour réserver une feuille de style à un média particulier est :

<style type="text/css" media="screen">
@import url(mafeuilledestyle.css)
</style>

Par défaut, si aucun type de média n’est spécifié, la feuille de style s’appliquera à tous les medias (on peut également spécifier la valeur media= »all »).

Voilà pour la théorie. Passons à la pratique.

Comment faire plaisir à un collègue en lui facilitant la lecture des articles du barbablog [2]

Pour la version imprimable il faut partir du postulat suivant : on ne dispose pas du même niveau d’interactivité sur le papier et sur un écran avec une souris et un clavier. Ca paraît idiot de le formuler ainsi mais cela veut dire que sur papier, les formulaires et les différents éléments de navigation sont inutiles :

form, #sidebar { /* sidebar c'est le nom du menu dans le barbablog*/
display: none; /* on les cache */
}

Vu que je ne souhaite pas me faire des ennemis en flinguant les cartouches d’encre des imprimantes de mes lecteurs, je m’assure que le fond de page est bien blanc :

body {
background: white; /* je veux rester ami avec toi lecteur */
}

et j’assigne un fond transparent à tous les autres conteneurs :

#container, #content {
background: transparent none;
}

Nous avons changé de média, il nous faut également changer d’unité pour les polices. Autant sur écran, l’unité à utiliser est le em [3] autant sur le papier l’unité à utiliser est le point. D’où :

body {
background: white;
font-size: 12pt;
}

Sur papier, les polices serif facilitent la lecture (sur écran, on utilise en général des polices sans-serif). On rajoute donc la règle suivante :

body {
background: white;
font-size: 12pt;
font-family: times,serif;
}

Sur papier, le lecteur ne peux plus cliquer sur les liens mais ceux-ci conservent une valeur informative. Afficher les urls peut s’avérer être une bonne idée (en fait, c’est vraiment une bonne idée):

#content a:link:after, #content a:visited:after {
content: " [" attr(href) "] ";
font-size: 90%; /* on les mets en plus petits quand même */
}
#content a[href^="/"]:after {
content: " (http://www.alistapart.com" attr(href) ") ";
}

Malheureusement, le pseudo sélecteur :after ne fonctionne que dans Firefox, Safari et IE7 (je crois). Donc pas d’urls pour les IE 6 et inférieurs.

Petite touche finale [4]: je laisse toujours apparaître le nom du site ou le logo du site en haut de la page imprimée, histoire de savoir à quoi on a à faire au premier coup d’oeil. Sur le barbablog j’ai laissé un petit barbayellow en haut de page, facilement identifiable par son air béat et sa couleur jaune.

Globalement les feuilles de style print sont très efficaces puisque reconnues par la plupart des navigateurs web. On verra dans un prochain billet que ce n’est pas aussi évident pour les feuilles de styles de type handeld, destinées aux terminaux mobiles.

  1. Comprenez : les propriétés qui sont actuellement reconnues par la plupart des terminaux.
  2. Non je n’enlèverai pas le vert fluo et le rose barbie pour l’instant.
  3. Une unité relative bien pratique lorsque les utilisateurs utilisent la fonction zoom du navigateur
  4. La touche du pro comme on l’appelle également.

Réagissez

Si ce billet vous a plu ou si vous voulez apporter des précisions, ou si vous n’êtes pas d’accord avec ce que je raconte, c’est ici qu’il faut vous manifester. Je me réserve toutefois le droit de supprimer toute contribution insultante ou qui n’aurait rien à voir avec la choucroute.

  1. Excellente mise au point sur les feuilles de style pour l’impression.
    C’est typiquement le genre de billet qui me remet dans le droit chemin, car j’ai tendance à oublier qu’il y a beaucoup de gens qui impriment les sites (moi le premier 😉 ) pour consultation off line

  2. Merci br1o ! C’est vrai qu’on oublie facilement les autres modes de consultation des pages web (papier, mobile…) même s’ils restent encore un peu marginaux.

  3. […] Je parlais de tous les médias disponibles dans ce billet […]

  4. Allez, au hasard, je dis c’est Mustapha!

  5. Gagné !

  6. Rha et le nostyle Greg mon petit tu me déçois…
    Bon d’accord y a stylish mais quand même, pense à ceux qui comme moi sont « XXXX » ( Mode censure active ) par des feuilles de styles lors d’un coupe/colle => éditeur texte pour réinsertion de code super méga génial ( mais le développeur voulant faire resurgir le webdesigner qui sommeillait en lui, à choisi une mise en valeur des lignes : numérotation, renvoi de bas de page … )
    Snifff suis un incompris

    heu + 1 pour le rose barbie ^^

  7. […] une feuille de style dédiée à l’impression, la bien nommée print.css. Si la feuille de style utilisée par le navigateur lors de l’impression du document, celle qu’on oublie tout le temps dans les projets et qu’on rajoute en quatrième […]

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *