Le web du futur #1 : un affichage qui varie en fonction de la luminosité

Pour contextualiser, j'écris cet article au début de l'année 2019, il est possible qu'au moment où vous le lisez ce soit le "web du présent" ;)

Le web évolue, c'est une certitude. Plus ou moins vite. Certains disent que c'est un peu comme les chats : une année passée pour nous autres humains équivaut à sept ans en âge internet :)

Toujours est-il que, comme pour les humains, il y a des générations pour les langages informatiques. Et là je vous parlerai plus particulièrement d'une media query de niveau 5 : light-level. Bien sûr, le principe de ces articles "le web du futur" est de parler d'éléments et de propriétés qui n'existent pas encore. Mais ils sont déjà définis (en tant que brouillon) dans les spécifications W3C. C'est donc bien destiné à arriver dans un futur plus ou moins proche !

Quel est l'intérêt ?

De plus en plus d'appareils, et même d'interface et de systèmes d'exploitation, prennent en compte la luminosité ambiante pour adapter l'affichage, pour deux raisons principales :

  • Pour des raisons de confort.
    Parmi les premiers appareils gérant un affichage jour/nuit, il y a eu les systèmes de navigation. Et c'est un bon exemple pour illustrer ce point. Vous êtes en voiture, en pleine nuit, l'éclairage ne vient que du reflet de vos phares sur la route, en gros très faible. Imaginez que votre GPS n'avait pas de mode nuit. Vous auriez alors un rectangle de lumière vive dans votre champ de vision, vos pupilles se réduisent pour s'adapter, obscurcissant davantage les zones déjà sombres, et donc la route. Pas top. Autre situation, vous êtes dans un endroit sombre depuis un bout de temps, votre vision s'est adaptée, et vous décidez de consulter votre smartphone. À moins que vous n'ayez activé quelques fonctionnalités, vous risqueriez d'être ébloui(e). À l'inverse, il peut être compliqué de voir ce qu'il y a sur son écran en plein soleil.
  • Pour des raisons de santé (autres que les accidents de la route).
    Notre corps produit naturellement de la mélatonine, la fameuse "hormone du sommeil", lorsque la luminosité est faible, lui indiquant qu'il est bientôt l'heure d'aller au lit. Hors, la lumière produite par les écrans, dont la fameuse "lumière bleue" (qui constitue en théorie 1/3 de toutes les lumières blanches), perturbe cette production. La lumière bleue est chaude (en terme de température de couleur, même si le bleu est une couleur dite froide), et proche de celle produite par le soleil. C'est pour ça qu'on dit qu'il faut éviter les écrans le soir avant de se coucher, ça perturbe le sommeil. Mais personne ne le fait, alors on s'adapte, comme expliqué dans cet article ;)

Une fonctionnalité déjà en place

Mais pas automatique sur les sites !

Comme vu un peu plus haut, c'est une fonctionnalité qui existe déjà sur plusieurs appareils tels que les systèmes de navigation, les smartphones... Et certains sites sont déjà adaptés ! Mais dans ces derniers cas, il s'agit d'une activation manuelle. Saviez-vous, par exemple, que Youtube disposait de cette option ? Cliquez sur le menu de Youtube en haut à droite (ou sur votre nom si vous êtes connecté(e)), vous verrez l'option "Thème foncé". C'est d'ailleurs également le cas sur mon site, où vous trouverez l'option dans les options d'accessibilité en haut à droite de l'écran.

Le web du futur #1 : un affichage qui varie en fonction de la luminosité : le thème classique et le thème foncé de Youtube
Le thème classique et le thème foncé de Youtube

Ce fameux "thème foncé" est une des solutions pouvant être mises en place en cas de "mode nuit". Une autre solution, adoptée par exemple par Windows, est d'ajouter un filtre jaune (la couleur complémentaire du bleu) pour limiter les émissions de lumière bleue de l'écran.

Le web du futur #1 : un affichage qui varie en fonction de la luminosité : les paramètres d'éclairage nocturne sur Windows
Les paramètres d'éclairage nocturne sur Windows
Jour ! Nuit !

Light-level : la media query qui analyse la luminosité ambiante

Et c'est là tout l'intérêt de cette media query. Bientôt, on pourra appliquer des propriétés css quand la luminosité ambiante de l'appareil sera faible, normale, ou forte. La syntaxe sera la suivante :

@media (light-level: normal){
  /* Styles appliqués quand la luminosité ambiante est idéale. */
}
@media (light-level: dim){
  /* Styles appliqués quand l'appareil est dans un endroit sombre. */
}
@media (light-level: washed){
  /* Styles appliqués quand l'appareil est dans un endroit surexposé. */
}

Vous avez donc sous les yeux les trois valeurs possibles pour light-level. Par ordre de luminosité croissante : dim, normal et washed. Ensuite, ça sera à vous de jouer !

Les contraintes de light-level

Mais il y a quelques inconvénients avec cette media query. Au-delà bien sûr du fait qu'elle soit encore à l'état de brouillon. À l'heure actuelle, et ça sera probablement toujours le cas lorsque cette spécification sera recommandée, l'appréciation de la luminosité ne suis pas de normes précises. Ça sera en fonction de l'appareil, du système d'exploitation, etc. Les valeurs de cette media query restent approximatives, il n'y a pas de valeur précise (en lux). C'est volontaire, il y a plusieurs raisons à ça :

  • La plupart des appareils ajustent d'eux-même la luminosité de l'écran. Ce qui peut faire varier les seuils selon lesquels l'application de styles peut être nécessaire.
  • Le niveau de surexposition peut varier en fonction des types d'écran. Par exemple, un écran de type papier électronique (liseuse) restera parfaitement lisible en plein soleil. Par contre, un écran LCD le sera beaucoup moins.
  • Les capteurs de lumière des appareils ne sont pas toujours très bien calibrés.

Autre inconvénient, selon la façon dont le changement d'état lumineux est détecté par l'appareil. En cas de changement de luminosité fréquent, il serait préférable que l'appareil limite les changements de styles. Ça peut être perturbant pour l'internaute (alternance de normal et de washed par exemple, quand un objet projettera régulièrement son ombre sur le capteur de l'appareil).

Utilisation desktop et paramètres du navigateur

Mais alors du coup, c'est réservé aux smartphones ? Les PC n'ont pas de capteur de lumière intégré, si ?

Oui, et non ! En effet, l'appareil doit disposer d'un capteur de lumière, et le navigateur doit savoir l'exploiter. En revanche, le W3C recommande aux navigateurs d'ajouter ce choix en paramètres, qui viendrait écraser le comportement par défaut. Par exemple, si l'internaute en décide ainsi via ses réglages, un site pourrait avoir un thème "dark" pensé spécialement pour les luminosité faibles, alors qu'il est consulté en plein soleil. Sur desktop, sans capteur de lumière, on aurait également accès à ce réglage. On pourrait donc choisir le style qui nous correspond le mieux. Soit parce qu'on préfère des thèmes sombres pour des raisons de confort et de goût. Ou soit parce qu'on a besoin d'avoir des contrastes très forts (style "washed") pour des raisons d'accessibilité.

Light-level en application !

Allez, projetons-nous dans l'avenir ! Tentons quelques règles css pour appliquer les deux exemples de gestion de la luminosité vus un peu plus haut.

Appliquer un "dark theme" à la Youtube

On peut se dire que d'ici à ce que ces spécifications soient officialisées et assez largement répandues, les variables css seront quasiment universelles. Actuellement, d'après caniuse, elles sont déjà comprises pour 91% des internautes. Et dans notre cas pratique, ça va bien nous faciliter la tâche !

L'objectif est le suivant : une même couleur va être utilisée par plusieurs éléments. On la met donc dans une variable pour ne changer la valeur de la couleur qu'à un seul endroit. Et en l’occurrence, cet endroit, sera dans une media query light-level ! On prévoit également une déclaration en dehors des media queries pour malgré tout faire un fallback si elles ne sont pas interprétées.

On obtiendrait donc un code semblable à celui-ci :

/* Pour rappel, les variables sont héritables. Pour qu'elles soient utilisables sur n'importe quel élément du DOM on préférera les définir dans :root */
:root{
    --couleur: #333;
    --fond: #eee;
}
@media (light-level: normal){
    /* Ici, j'aurai pu ne pas déclarer cette media query
       car je souhaite reprendre les couleurs définies plus haut */
}
@media (light-level: dim){
    /* Faible luminosité,
       on cherche à assombrir les fonds et donc éclaircir les textes */
    :root{
        --couleur: #ccc;
        --fond: #222;
    }
}
@media (light-level: washed){
    /* Luminosité très forte,
       on cherche à augmenter les contrastes */
    :root{
        --couleur: #000;
        --fond: #fff;
    }
}
body{
    background-color: var(--fond);
    color: var(--couleur);
}
.mon-bouton{
    background-color: var(--fond);
    border-color: var(--couleur);
    color: var(--couleur);
}

Et voici le résultat visuel en fonction de l'éclairage ambiant :

Le web du futur #1 : un affichage qui varie en fonction de la luminosité : exemples d'application de thèmes différents en fonction de light-level

Appliquer un filtre à la Windows

Dans ce cas pratique, on souhaite appliquer un layer de couleur sur l'ensemble de la page. On pourrait pour ça utiliser n'importe quel élément et le mettre aux dimensions de l'écran, et grâce à z-index le positionner au-dessus de tout le reste. Mais le problème est qu'il empêcherait le clic sur les éléments en-dessous.

Pour pallier à ce problème, deux solutions : utiliser quelque-chose qui n'a aucune interaction comme le box-shadow, ou désactiver les évènements sur l'élément avec pointer-events.

Propriétés communes aux deux pistes

Dans tous les cas, on peut partir sur un pseudo-élément pour s'économiser le besoin de créer une balise html exprès. Pour éviter tout risque de décalage, on le positionne en fixed. On lui indique également un z-index de sorte à ce qu'il soit le plus élevé de votre feuille de styles. Ici je vais mettre arbitrairement 9, mais pour certains il pourrait y avoir beaucoup plus de chiffres (Oui, je vous vois les bourrins au fond).

Enfin, on veut que le noir reste bien noir, et pas "délavé" par la couleur en transparence. On passera donc le pseudo-élément en mode "produit", (comme dans Photoshop). Ainsi, plus la couleur sera foncée plus elle est sera opaque, et plus elle sera claire (et donc contient du bleu) plus elle sera transparente. Et en css, ça se fait grâce à la propriété mix-blend-mode: multiply. Cette propriété n'a pas encore une excellente couverture des navigateurs, mais comme pour les variables on compte sur sa démocratisation d'ici à la sortie de light-level.

Pour la couleur du filtre, le but est que la partie bleue de la couleur soit à 0, ce qui retira le bleu à hauteur de l'opacité du filtre. On peut donc aller de rouge à vert. De mon côté, je choisis un orangé : rouge à fond, et moitié de vert. Ainsi qu'une opacité à 20%, ce qui donc réduit le bleu de 20%. Traduit en rgba, ça donne rgba(255,128,0,0.2). Notez qu'on peut également choisir de jouer sur un filtre noir, qui au lieu de filtrer seulement la lumière bleue aura plutôt pour effet de réduire la luminosité globale du site.

Utiliser box-shadow

Ensuite, pour la version avec box-shadow, eh bien on ajoutera simplement un box-shadow sur le pseudo-élément. Cette ombre n'aura aucun décalage x ou y, ni de flou. Par contre on définira son étendue à 100vmax, c'est à dire 100% du côté le plus grand du viewport. Sur un écran horizontal 100vmax vaudra 100% de la largeur, et 100% de la hauteur sur un écran vertical. On sera ainsi sûrs que le box-shadow couvrira l'ensemble du site :

body::before {
    content: "";
    display: block;
    position: fixed;
    box-shadow: 0 0 0 100vmax rgba(255,128,0,0.2);
    mix-blend-mode: multiply;
    z-index: 9;
}

Utiliser pointer-events

Pour la version sans box-shadow, on fait en sorte que l'élément recouvre tout l'écran (par exemple avec left, top, right, bottom, ou width et height). On lui définit la couleur du filtre en fond, et surtout on n'oublie pas le pointer-events:none sans quoi notre site deviendrait inaccessible :

body::before {
    content: "";
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,128,0,0.2);
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 9;
}

Le mot de la fin

Et voilà, avec cette media query et ces exemples d'utilisation, votre site s'adaptera tout seul à la luminosité ambiante de l'appareil sur lequel il est consulté :)

Mais bon, pour ça il va falloir encore attendre un peu. Il est possible dans un premier temps que certains navigateurs anticipent cette spécification et qu'on doive la préfixer. Puis à sa sortie, attendre son application sur les navigateurs retardataires... Après, ça ne sera pas son absence qui empêchera le site de bien fonctionner et de s'afficher comme il faut. Prenons plutôt ça comme un bonus pour les navigateurs qui l’interpréteront correctement !

Si vous avez trouvé cet article intéressant, pourquoi ne pas le partager ? :)
Facebook Messenger Twitter LinkedIn Viadeo Reddit Email

Vous avez une remarque, une précision à apporter, ou quelque-chose vous échappe ?
N'hésitez pas à participer à cet article, cet espace est pour vous !

Personne n'a encore commenté cet article.

Mais il faut bien un début à tout, pas vrai ?

Commenter, poser une question...

 

Ces articles pourraient également vous intéresser

Tout savoir sur les media queries pour un site responsive design réussi

Sur les media-quoi ? Responsive design ? Bon, si vous êtes ici c’est que vous avez déjà au moins entendu parler de ces termes, et probablement que vous savez également de quoi il s’agit. Pour les autres, voici un petit récapitulatif !

Lire l'article Tout savoir sur les media queries pour un site responsive design réussi
Remonter