Introduction

Cette page web est la documentation de la deuxième partie de l'atelier Comment créer un serveur et un site web « écologique » et frugal ? Auto-hébergement d’un mini-ordinateur alimenté avec des énergies renouvelables (solaires ou éoliennes) organisé à La Labomedia le 18, 19 et 20 juin. Cette deuxième partie propose d'explorer les techniques réduisant la consommation d’énergie des pages web.

Le wiki de la l'atelier

Mémo HTML

Le html utilise des balises pour créer des éléments ou blocs avec cette synthaxe:

<balise>contenu</balise>

Les balises peuvent contenir des attributs, sorte de paramètres de celles-ci, certains attributs sont spécifiques à la balise d'autres sont génériques.

<balise attribut="valeur">contenu</balise>

Un document HTML5 se structure ainsi :

<!DOCTYPE html>
	<html lang="fr"> 
	<head>   
		<meta charset="UTF-8">
		<title>Le titre de la page</title>
	</head> 
	<body>
		<!-- commentaires -->
	</body>
</html>

Les balises de bases

les balises de titrage: h1,h2,h3,h4,h5,h6
<p> balise pour insérer du texte en paragraphe
<ul> balise pour créer une liste (unordered list)
<li> éléments de la liste
<a> insérer un lien
<img> insérer une image

Créer une liste

<ul>
	<li>un élément de la liste</li>
	<li>un autre élément</li>
</ul>

Insérer un lien

<a href="http://coucou.fr">texte du lien</a>

Insérer une image

<figure>
	<img src="images/monimage.jpg" alt="texte descriptif de l'image">
</figure>

Mémo CSS

Le css est le langage qui va permettre de designer une page web: choix des typographies, positionnement, couleurs, marges etc.

Pour insérer une feuille de style, nommé par exemple style.css, il faut ajouter la balise

<link>

dans le

<head>

de son html, comme suit: <link rel="stylesheet" href="style.css">

En css on commence par cibler un élément, puis on lui change les valeurs de ses propriétés. Par exemple si on veut changer la couleur d'un paragraphe, on écrira:

p{
  color: red;
}

Quelques propriétés css de base

background: permet de changer la couleur de fond d'un élément
color: permet de changer la couleur du texte d'un élément
font-family: permet de changer la typographie
font-size: permet de changer la taille d'un texte
font-weight: permet de changer la graisse d'un texte
margin: permet de changer les marges extérieures d'un bloc
padding: permet de changer les marges intérieures d'un bloc
width et height: permettent respectivement de modifier la largeur et la hauteur d'un bloc

La class et l'id

Pour cibler en particulier des élémént on peut utiliser soit l'attribut class soit l'attribut id.

L'id est unique, la class est réutilisable. Un seul id par élément, une ou plusieurs class par élément.

<p id="paragraphe-unique">du texte</p>
<p class="paragraphe-rouge">encore du texte</p>

Il y a plusieurs manière de cibler un élément en css:

.cibler-une-classe{ propriété: valeur; }
 #cibler-une-id{ propriété: valeur; }
.parent .enfant{ propriété: valeur; }

CSS tricks & tips

Quand un élément a une taille définie (width), margin : auto permet de centrer celui-ci horizontalement.

.element{   
  width: 50%;   
  margin: auto;
}

Pour positionner les éléments côte à côte, on peut utiliser les flexbox.

.parent{  
  display:flex; 
  justify-content:space-between; 
}

Plus d'infos sur les flexbox ici

Ressources HTML et CSS

{ Site statique et CMS }

Afin de réaliser un site frugal, léger et gourmand, il sera préférable d'être radical et de développer son site en statique.

Les sites statiques se chargent plus rapidement et nécessitent moins de traitement que les sites dynamiques. Les pages sont pré-générées au lieu d'être générées à chaque chargement.

Sans langage serveur
Sans compilation
Sans framework
Sans librairie
Sans base de données
Sans système d'analyse
Sans cookies
Sans publicité

Seulement du HTML et du CSS. Pérennité ++

Il est possible d'utiliser des générateurs de sites statiques comme Pelican, Hugo ou Jekyll

Les CMS comme Wordpress, Drupal ou GRAV, sont théoriquement bien plus gourmand qu'un site statique. Ils sont composés de centaines de fichiers, donc de centaines de requêtes et pèse à la base plusieurs centaines de Mo. Ils sont basé sur PHP et demande à chaque visite de page, la génération de celle-ci en html pour le serveur.

Il serait toutefois intéressant de calculer la différence de consommation d'énergie à la visiter d'une page, entre un site statique, un CMS léger (Exemple: Void), un CMS lourd (ex: Wordpress).

Liste (non exhaustive et comparative) de CMS libres, par la Labomedia

▣ Images

Les images sont le nerfs de la guerre. Un site web sans image sera très léger et demandera moins de requêtes. Mais souvent on a besoin d'images pour illustrer nos propos (d'autres dirons pour attirer l'attention).

Pas de vidéo
Réduire le nombre d'images sur le site et par page
Réduire la taille des images

Les différentes techniques de compression d'images

L'idée c'est d'arrivée à moins de 1Mo par page et d'avoir un site web contenant des images de quelques Ko

L'ASCII

Remplacer les images par du texte !

Voir l'exemple sur https://medialab.sciencespo.fr/, ainsi que les explications sur https://julie-blanc.fr/blog/2020-03-27_medialab-2/

Chaque ligne de l'image est une balise <pre>, avec un simple style css:

pre {
	font-family: monospace;
	line-height: 0.1;
	font-size: 9px;
}

  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░

 ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒

░▒▓█  ░▒▓░   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓░   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓░   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓

▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓▒░  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓▒░  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓▒░  ░▒▓█  ░▒▓█

█  ░▒▓█  ░▒▓█  ░▒▓▓▒░░░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓▓▒░░░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓▓▒░░░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█

  ░▒█▓▒▒▒▒▓█  ░▒▓█  ░▒▓█  ░▒▓▓█  ░▒▓█  ░▒█▓▒▒▒▒▓█  ░▒▓█  ░▒▓█  ░▒▓▓█  ░▒▓█  ░▒█▓▒▒▒▒▓█  ░▒▓█  ░▒▓█  ░▒▓▓█  ░▒▓█  ░▒█▓▒▒▒

 ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░ █▓▓▒▓▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░ █▓▓▒▓▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░ █▓▓▒▓▓█   ░▒▓█  ░▒

▒▓█  ░▒▓█  ░░  ██▓▓██  ░░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░░  ██▓▓██  ░░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░░  ██▓▓██  ░░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█

   ███   ░▒▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒░   ███   ░▒▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒░   ███   ░▒▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒░   ███

  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▒░        ░▒▓▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▒░        ░▒▓▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▒░        ░▒▓▓█  ░▒▓█  ░

 ░▒▓█  ░▓▒░░     ░░▒▓██  ░▒▓█  ░▒▒▓█  ░▒▓█  ░▓▒░░     ░░▒▓██  ░▒▓█  ░▒▒▓█  ░▒▓█  ░▓▒░░     ░░▒▓██  ░▒▓█  ░▒▒▓█  ░▒▓█  ░▓

░░░░▒▒▓█   ░▒▓█  ░▒▒▓█  ░▒▓█  ░█▓▒▒░░░░░░▒▒▓█   ░▒▓█  ░▒▒▓█  ░▒▓█  ░█▓▒▒░░░░░░▒▒▓█   ░▒▓█  ░▒▒▓█  ░▒▓█  ░█▓▒▒░░░░░░▒▒▓█

▓█  ░▒▓█  ░▒▓██   █▓▓▒▒▒▒▒▒▒▓▓█   ░▒▒▓█  ░▒▓█  ░▒▓██   █▓▓▒▒▒▒▒▒▒▓▓█   ░▒▒▓█  ░▒▓█  ░▒▓██   █▓▓▒▒▒▒▒▒▒▓▓█   ░▒▒▓█  ░▒▓█

█    ██▓▓▓▓▓▓▓▓██  ░░▒▓▓█  ░▒▓█   ░▒▓█    ██▓▓▓▓▓▓▓▓██  ░░▒▓▓█  ░▒▓█   ░▒▓█    ██▓▓▓▓▓▓▓▓██  ░░▒▓▓█  ░▒▓█   ░▒▓█    ██▓▓

██   ░▒▒▓██  ░▒▓█  ░░▒▓█  ░   █████████   ░▒▒▓██  ░▒▓█  ░░▒▓█  ░   █████████   ░▒▒▓██  ░▒▓█  ░░▒▓█  ░   █████████   ░▒▒▓

░▒▓█  ░▒▓▓█ ▒░              ░▒▓▒▓█   ░▒▓█  ░▒▓▓█ ▒░              ░▒▓▒▓█   ░▒▓█  ░▒▓▓█ ▒░              ░▒▓▒▓█   ░▒▓█  ░▒▓

░            ░░▒▓▓▒▓█  ░▒▓█  ░▒▓██ ▓▒░            ░░▒▓▓▒▓█  ░▒▓█  ░▒▓██ ▓▒░            ░░▒▓▓▒▓█  ░▒▓█  ░▒▓██ ▓▒░

▒▒▓█▓▒▓█  ░▒▓█  ░▒▓█ █▓▒░ ░░░░   ░░░░▒▒▓█▓▒▓█  ░▒▓█  ░▒▓█ █▓▒░ ░░░░   ░░░░▒▒▓█▓▒▓█  ░▒▓█  ░▒▓█ █▓▒░ ░░░░   ░░░░▒▒▓█▓▒▓█

█  ░▒▓█ █▓▒░░▒▒▒░  ░▒▒▒▒▓▓██▓▓█  ░▒▓▓█  ░▒▓█ █▓▒░░▒▒▒░  ░▒▒▒▒▓▓██▓▓█  ░▒▓▓█  ░▒▓█ █▓▒░░▒▒▒░  ░▒▒▒▒▓▓██▓▓█  ░▒▓▓█  ░▒▓█ █

▒▓▒░░░▒▓▓▓▓██ ███  ░▒▓██  ░▒▓█  █▓▒▒▒▒▓▒░░░▒▓▓▓▓██ ███  ░▒▓██  ░▒▓█  █▓▒▒▒▒▓▒░░░▒▓▓▓▓██ ███  ░▒▓██  ░▒▓█  █▓▒▒▒▒▓▒░░░▒▓▓

   █  ░▒▓█  ░▒▒▓░  █▓▓▓▓▓▓▒▒▒▒▓████     █  ░▒▓█  ░▒▒▓░  █▓▓▓▓▓▓▒▒▒▒▓████     █  ░▒▓█  ░▒▒▓░  █▓▓▓▓▓▓▒▒▒▒▓████     █  ░▒▓

▓▓▒░  ██████▓▓▓▓▓█           ░▒▓█  ░▒▓▓▒░  ██████▓▓▓▓▓█           ░▒▓█  ░▒▓▓▒░  ██████▓▓▓▓▓█           ░▒▓█  ░▒▓▓▒░  ███

████     ░░░   ░▒▓█  ░▒▓█▓▒░       ██████     ░░░   ░▒▓█  ░▒▓█▓▒░       ██████     ░░░   ░▒▓█  ░▒▓█▓▒░       ██████

░░▒▓█  ░░▒▓█▓▒░              ░ ░░▒░░░░░▒▓█  ░░▒▓█▓▒░              ░ ░░▒░░░░░▒▓█  ░░▒▓█▓▒░              ░ ░░▒░░░░░▒▓█  ░░

▒░░░░░░        ░░░░▒▒░▒▒▒▒▓█  ░▒░▒ █▓▒░░░░░░        ░░░░▒▒░▒▒▒▒▓█  ░▒░▒ █▓▒░░░░░░        ░░░░▒▒░▒▒▒▒▓█  ░▒░▒ █▓▒░░░░░░

░░▒▒▒▒▓▒▒▓▓▓▓█  ░▒▒▒  █▓▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▓▒▒▓▓▓▓█  ░▒▒▒  █▓▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▓▒▒▓▓▓▓█  ░▒▒▒  █▓▒▒▒▒▒▒░░░░░░░░░▒▒▒▒▓▒▒

  ░▒▓▓░  █▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓████  ░▒▓▓░  █▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓████  ░▒▓▓░  █▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▓▓▓▓▓▓▓████  ░▒▓▓░

██▓▓▓▓▓▓▓▓▓▓▓███████     ░▒▓█▒░  ██████▓▓▓▓▓▓▓▓▓▓▓███████     ░▒▓█▒░  ██████▓▓▓▓▓▓▓▓▓▓▓███████     ░▒▓█▒░  ██████▓▓▓▓▓▓▓

           ░▒▓█▓▒░       ████████████           ░▒▓█▓▒░       ████████████           ░▒▓█▓▒░       ████████████

▓█▓▒░                 █        ░░░░▒▒▓█▓▒░                 █        ░░░░▒▒▓█▓▒░                 █        ░░░░▒▒▓█▓▒░

             ░░░░░▒▒▒▒▓▓ █▓▒░░░░░░                ░░░░░▒▒▒▒▓▓ █▓▒░░░░░░                ░░░░░▒▒▒▒▓▓ █▓▒░░░░░░

▒░▒▒▒▓▓▓▓█  █▓▒▒▒▒▒▒░░░░░░░░░░░   ░░░▒░▒▒▒▓▓▓▓█  █▓▒▒▒▒▒▒░░░░░░░░░░░   ░░░▒░▒▒▒▓▓▓▓█  █▓▒▒▒▒▒▒░░░░░░░░░░░   ░░░▒░▒▒▒▓▓▓▓

▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒░▒▒▓████░  █▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒░▒▒▓████░  █▓▓▓▓▓▓▒▒▒▒▒▒▒▒▒▒▒░░░░▒▒▒▒░▒▒▓████░  █▓▓▓▓▓▓▒▒▒

▓▓▓▒▒▒▒▒▓▓▓▒░▒▓█   ▒░  ██████▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▓▓▓▒░▒▓█   ▒░  ██████▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▓▓▓▒░▒▓█   ▒░  ██████▓▓▓▓▓▓▓▓▓▓▓▒▒▒▒▒▓

▒▓█  ▓▒░       ███████████▓▓▓▓▓▓██▓▒░▒▓█  ▓▒░       ███████████▓▓▓▓▓▓██▓▒░▒▓█  ▓▒░       ███████████▓▓▓▓▓▓██▓▒░▒▓█  ▓▒░

            ███████ █▓▒░▒▓█ █▓▒░                 ███████ █▓▒░▒▓█ █▓▒░                 ███████ █▓▒░▒▓█ █▓▒░

       █▓▒▒▓█  █▓▒░░░░░░                    █▓▒▒▓█  █▓▒░░░░░░                    █▓▒▒▓█  █▓▒░░░░░░                    █▓

  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░

 ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█   ░▒▓█  ░▒▓█  ░▒▓█  ░▒

░▒▓█  ░▒▓░   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓░   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓░   ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓

▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓▒░  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓▒░  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓▒░  ░▒▓█  ░▒▓█

█  ░▒▓█  ░▒▓█  ░▒▓▓▒░░░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓▓▒░░░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█  ░▒▓▓▒░░░▒▓█  ░▒▓█  ░▒▓█  ░▒▓█

Le dithering ou diffusion de l'erreur

Le dithering est une technique de compression des images utilisée par les site https://solar.lowtechmagazine.com/ qui consiste à convertir les images en noir et blanc avec 4 niveaux de gris puis d'utiliser le css pour les colorer et augmenter les contrastes.

Le site de Low-Tech Magazine utilise le générateur de site statique Pelican et a développé un plugin Pelican pour la transformation de ses images.

Il est possible d'utiliser des logiciels de traitement d'images comme Gimp pour appliquer cette technique.

Pour cela, dans Gimp, passez l'image en noir et blanc, puis allez dans le menu

Image > Mode > Indexed

Une fenêtre s'ouvre: changer le nombre maximum de couleurs à 4 et convertissez votre image.

Afin d'optimiser cette manipulation et de la rendre automatique sur un groupe d'image, voir le plugin BIMP

Il est également possible d'utiliser des scripts en Python ou en Bash. Exemple avec ImageMagick, un script bash qui convertit toutes les images .jpg d'un dossier.

for img in *.jpg;
	do convert "$img" -resize 600x400 -strip -quality 86 -colorspace Gray -dither FloydSteinberg -colors 4 "dither_$img";
	done

Pour aller plus loin, aller voir la documentation de ImageMagick

Il est ensuite possible de modifier l'image avec CSS.

.figure {
	background-color: #59B7FF;
}

.figure img {
	mix-blend-mode: multiply;
}

Cette méthode permet notamment d'éviter la pixellisation des images lorsqu'elles sont de grandes tailles. Ici, nos deux images font 533x400px, la première pèse 128 Ko et la deuxième 102 Ko.

Utiliser des SVG inline

Pour les images vectorielles, utilisez des SVG en ligne, c'est-à-dire que le code SVG est directement ajouté au html. Les SVG en ligne nous permettent d'éviter les demandes de chargement d'images. Ils peuvent également être stylisés avec des classes css et notamment leur appliquer un état particulier au survol.

<svg class="saturn" viewBox="0 -0.5 19 15">
	  <path class="fill" d="M19.43,7.16C19.12,6,17.81,5.3,15.94,5A7.85,7.85,0,0,1,16.69,6,2.54,2.54,0,0,1,18.6,7.39a1.52,1.52,0,0,1-.24,1.17,5.74,5.74,0,0,1-1.45,1.54s0-.07,0-0.1a6.91,6.91,0,1,0-13,3.23C2.53,13,1.59,12.43,1.4,11.75a1.53,1.53,0,0,1,.24-1.17,4.33,4.33,0,0,1,.6-0.76A7.92,7.92,0,0,1,2.37,8.5C1,9.65.26,10.89,0.57,12s1.85,2,4,2.24a6.9,6.9,0,0,0,12.25-3c1.94-1.3,3-2.8,2.64-4.09M10,16a6,6,0,0,1-4.24-1.74H6.21a20.24,20.24,0,0,0,4.94-.66,19.86,19.86,0,0,0,4.59-1.78A6,6,0,0,1,10,16m6-5.31a18,18,0,0,1-5.06,2.09,19.41,19.41,0,0,1-4.73.63c-0.43,0-.83,0-1.21-0.06A6,6,0,1,1,16,10a6.11,6.11,0,0,1,0,.73" transform="translate(-0.5 -3.09)"/>
	</svg>

Afficher aucune image par défaut

Une autre solution pourrait être de n'afficher aucune image sur les pages web par défaut et de proposer à l'utilisateur de les charger si besoin. Exemple sur le site de la maison d'édition wildproject sur lequel toutes les couvertures de livres sont remplacés par des svg abstraits. Merveilleusement designé et developpé par Lola Duval et Julien Bidoret.

Avoir des images très légères

Compresser les images au maximum et ne jamais les utiliser en grand pour éviter toute pixelisation. Ça peut aussi être un principe de design.

Exemple sur le site de Kaïros qui précise la taille de toutes ses images.

Tramer ses images

Un peu sur le même principe que le dithering, réduire la taille d'une image, puis la tramer en demi-teinte en noir et blanc. Lui donner par la suite une coleur soit nativement (avec un logiciel de traitement d'images par exemple), soit en css.

Exemple sur le site du Low-Tech Lab.

Sans logo ⦰

Afin d'éviter une image supplémentaire sur toutes les pages du site, il est conseillé de travailler sans logo, ou plutôt avec un logo qui n'est pas une image. Un logo typographique par exemple ou un logo contenant de l'unicode.

Smart ◍ Forests

✕ Sans typographie

Les typographies étant des fichiers et des requêtes, un site web frugal n'aura pas de typographie choisi, il prendra celles par défaut.

Ainsi on utilisera les propriétés css: font-family: sans-serif; ou font-family: serif; ou font-family: monospace;

⚡ Sans javascript

Évitons encore l'appel vers un fichier et un temps de calcul plus long que le CSS. Soyons radicaux·cales, évitons le javascript. Le CSS est un langage très puissant qui permet déjà de faire beaucoup de choses en matière d'animation et d'interaction.

En étant un peu malin·e, on peut détourner des propriétés CSS pour créer de l'interaction. Il est par exemple possible, de créer un bouton cliquable qui permet de faire apparaître ou disparaître un contenu, grâce aux <input> en HTML et au pseudo élément :checked en css.

See the Pen full css open menu by Sarah (@sarahgarcin) on CodePen.

⧉ Un site imprimable

Afin d'éviter de retourner plusieurs fois sur le même site pour y trouver une information statique, il serait intéressant de pouvoir consulter le site hors-ligne, de pouvoir l'exporter en PDF, voir de l'imprimer.

Le CSS permet également de designer un site web pour le print, via un export PDF. Pour cela on utilise un media queries spécifique.

@media print{

}

On va alors pouvoir faire des ajustements typographiques, changer la mise en page, régler les marges, tout passer en noir et blanc etc.

Sur cette page un simple Ctrl + P ou Cmd + P ouvrira la boîte de dialogue permettant l'export PDF.

Quelques petites astuces en print css

Paramètrer son export

@media print{
	@page{
		margin: 1cm;
		size: A4;
	}
}

Éviter certaines coupures de page hasardeuse

img{
	page-break-inside: avoid;
}

Forcer les sauts de page, ici insérer un saut de page avant chaque h2

h2{
	page-break-before: always;
}

Afficher les urls

a:after{
	content:" (" attr(href) ") ";
	font-size: 0.8rem;
	font-weight:normal;
}

Mémo Print CSS

Ressources ✎

Le contenu textuel et les exemples de code, sauf mention contraire, ont été réunis et produits par Sarah Garcin et mis à disposition sous licence CC BY-NC. Vous êtes autorisé·e·s à partager et à modifier ce contenu à la condition de mentionner l’adresse du site. Aucune utilisation commerciale n'est autorisée.