Safari TP : les sites web peuvent basculer en mode sombre en fonction de macOS Mojave
Le mode sombre de macOS Mojave est épatant, sauf quand il ne l’est pas… C’est à dire quand un contenu non adapté apparait à l’écran ! C’est le cas pour les courriels par exemple, mais aussi pour les sites web. Dans ce dernier cas, Apple travaille sur une parade : la dernière Technology Preview de Safari (la 68e) supporte les requêtes média CSS prefers-color-scheme.
En substance, cela permet au site web d’identifier l’apparence de macOS (sombre ou clair) et le cas échéant de basculer automatiquement sur un jeu de feuilles de style adapté. Si l’on surfe en mode sombre, alors le site s’affichera dans un style foncé. Vous pouvez essayer dès à présent en vous rendant sur ce site, puis en activant le mode clair et sombre de Mojave. Très efficace !
Il y a deux écueils à cette nouveauté : d’une part, elle ne concerne que Safari bien évidemment (rien n’empêche d’autres navigateurs de faire de même). Et puis il faut que les développeurs de vos sites web préférés conçoivent un affichage « sombre ». On n’a donc pas fini de s’éclater les yeux sur Mojave !
Si elle convient aux testeurs de Safari TP, cette fonction apparaitra dans une prochaine version de Mojave (c’est peu probable dans macOS 10.14.1, dont on a reçu la 5e bêta hier).
Super, le développeur Web de MacGé peut se mettre au travail là-dessus.
https://darkreader.org/
Extension pour chrome et Firefox. Vraiment formidable je vous recommande.
@irep
Merci
Aucun problème pour avoir un fond blanc sur le mode sombre de Mojave, en ce qui me concerne. S’éclater les yeux est un peu exagéré ;)
C’est une fonction officielle du W3C (qu’on pourrait donc voir se populariser à l’avenir) ou un truc Apple ?
J’utilise beaucoup plus le mode lecture le soir pour ça, gris clair sur gris foncé avec de gros caractères ?
L’extension Dark Reader va plus loin en essayant de soigner le contraste entre le fond qu’il rend sombre et les couleurs des caractères.
Comme le mode inversé intelligent de iOS il ne touche pas aux images…
mais le fait quand même.
C’est logique, il essaye de déterminer ce qui est image de fond CSS ainsi que ce qui est image de texte (texte rastérisé). S’il ne le faisait pas, il resterait beaucoup de pavés blancs dans la page.
Sauf que, par exemple, une photo de T-shirt avec un motif typographique … c’est un texte rastérisé ou bien c’est un objet à ne pas inverser ? :D
@irep
Disons que c’est tout de même mieux que les web designers conçoivent des feuilles de styles adaptées qu’un logiciel fasse sa cuisine à l’emporte-pièce.
Franchement, cette tendance à imposer leurs visions GAFA du web à tout bout de champ commence à me gaver.
@xDave
Entièrement d’accord
@roquebrune
https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
C’est certes encore en draft mais c’est une proposition W3C ;) pas besoin de vous énerver contre les GAFA cette fois-ci ;) de plus cette feature n’est pas obligatoire : elle reste à la discrétion des développeurs web ;)
« On n’a donc pas fini de s’éclater les yeux sur Mojave ! »
C’est nouveau ça. Avant le mode sombre on s’éclatait les yeux, paraît-il.
Moi, je règle mon écran, dans une pièce suffisamment éclairée. En fait, même plus, puisque macOS le fait automatiquement.
Le mode lecteur de safari s'adapte automatiquement au mode d'affichage choisi.
Mon site de téléchargement (adriansealelli.com) est déjà en mode sombre depuis maintenant au moins 1 an
le mode sombre est hyper tendance. Jusqu'au jour où Apple nous expliquera que le mode bleu-cerise c'est mieux.
Tout à fait ça.
N'importe quoi.
Simplement parce qu'Apple a décidé de lancer une nouvelle mode, ça se permet de créer en sauvage une nouvelle propriété CSS. Ça me rappelle Explorer et ses barre de scroll stylisables.
Les CSS c'est du sérieux, on ne lance pas des propriétés à la con pour se faire mousser. Sans que ce soit acté officiellement par le W3C, c'est sans intérêt.
En plus, utiliser cette propriété, c'est décider d'emblée qu'un visiteur qui a activé le mode sombre sur son système d'exploitation veut absolument voir le site en mode sombre également. Qu'est-ce qu'on en sait ? Décider à la place de l'utilisateur, ça va complètement à l'encontre de la direction qu'a pris le web depuis un bon moment, web qui se veut universel avec un design liquide.
@AirForceTwo
Simplement parce qu'Apple a décidé de lancer une nouvelle mode, ça se permet de créer en sauvage une nouvelle propriété CSS. Ça me rappelle Explorer et ses barre de scroll stylisables.
Les CSS c'est du sérieux, on ne lance pas des propriétés à la con pour se faire mousser. Sans que ce soit acté officiellement par le W3C, c'est sans intérêt.
Je ne sais pas si c’est Apple qui a décidé de lancer une nouvelle mode ou de la suivre, ce qui n’est déjà pas pareil, mais c’est méconnaître le fonctionnement du W3C que de penser que la propriété a été lancée à la va vite et qu’elle sera acceptée sans discussion.
D’autre part, il arrive parfois que les constructeurs soit en avance sur les spécifications W3C, et propose des solutions pour leurs appareils. Au moment du lancement de l’iPhone, les solutions proposées en le CSS pour faire du responsive web design (ou tout au moins du design mobile friendly) n’existaient pas, où était du pur bricolage. Certaines solutions proposées par Apple ont donc été adoptées.
En plus, utiliser cette propriété, c’est décider d’emblée qu’un visiteur qui a activé le mode sombre sur son système d’exploitation veut absolument voir le site en mode sombre également. Qu’est-ce qu’on en sait ? Décider à la place de l’utilisateur, ça va complètement à l'encontre de la direction qu'a pris le web depuis un bon moment, web qui se veut universel avec un design liquide.
Désolé, mais c’est n’importe quoi ce que tu racontes.
D’abord, un webdesigner, ou n’importe quel designer d’interface décide toujours de la façon dont tu vas accéder à son site. C’est ce qui a donné l’UI puis l’UX design.
Ensuite, ce design prévoit plusieurs possibilités et s’adapte dans une certaine mesure à plusieurs profils d’utilisateurs et à leurs différents appareils - mais le but de cette adaptation est que le design conserve sa cohérence malgré la diversité des appareils et des profils.
Enfin, tu peux toujours entrer dans les préférences de ton navigateur pour décider de la façon dont tu veux voir les sites, et tes préférences de navigateur prennent le dessus sur celles de la feuille de style du site.
"Désolé, mais c’est n’importe quoi ce que tu racontes.
D’abord, un webdesigner, ou n’importe quel designer d’interface décide toujours de la façon dont tu vas accéder à son site. C’est ce qui a donné l’UI puis l’UX design."
Le designer n'a pas tous les droits:
- On l'a vu avec les fenêtre surgissantes qui sont maintenant massivement bloquées. Ce n'est pas au designer de choisir à quel moment une fenêtre va s'ouvrir. On permet le target="_blank" car le visiteur peut savoir, avant de cliquer, qu'une nouvelle fenêtre va être ouverte.
- On se rappelle aussi des sites qui agrandissaient automatiquement la fenêtre du navigateur au chargement. Pareil, c'est fini. Ce n'est pas au designer de choisir la taille de la fenêtre de ton navigateur.
-Les sites qui redirigent les visiteurs en fonction de la langue du navigateur, c'est la même chose, ça emmerde les gens qui travaillent sur une machine dans une autre langue que leur langue préférée. La langue du navigateur n'est pas une preuve suffisante de ta préférence linguistique.
Si je veux utiliser le mode sombre pour travailler, ça veut pas dire que je veux systématiquement naviguer sur des sites nocturnes. Le mode sombre de mon OS n'est pas une preuve suffisante de ma préférence.
Oui, il y a les préférences des navigateurs pour compenser les excès des designer. Ça ne devrait pas être nécessaire.
Tout à fait.
Très efficace cette possibilité, surtout avec un iMac 27". La majorité des sites/forums étant en version claire, si cette bascule est aussi efficace, vivement la nouvelle version de Safari. Oui, pour moi cette possibilité est vraiment la bienvenue, la plupart de mes logiciels proposant le mode sombre ou son équivalent, sur internet ce serait vraiment un plus.
Avec macOS Mojave, le changement automatique du fond d'écran selon l'heure de la journée est vraiment excellent, mais il faut vraiment que cette option puisse s'appliquer partout. N'en déplaise aux possesseurs d'un MBP 13", tant que vous ne travaillerez pas avec un écran 27", vous ne vous rencontrerez jamais compte de la gêne que cela occasionne, surtout le soir. Le passage d'un logiciel en mode sombre vers un site internet en mode clair est franchement violent.
Vision totalitaire.
Si quelqu'un a réussi à faire fonctionner cette media query ça m'intéresse :) s'il peut partager le bout de code CSS.
body, html, #main
{background:white; color:black;}
@media (prefers-color-scheme: dark)
{
body, html, #main
{background:black;color:white;}
}
@media (prefers-color-scheme: light)
{
body, html, #main
{background:white;color:black;}
}
Ne fonctionne que dans Safari Technology Preview pour Mojave Release 69 (Safari 12.1, WebKit 13607.1.12), pas dans la version High Sierra...
https://developer.apple.com/safari/download/
EDIT
L'idée qui satisfera tout le monde est de profiter, en plus de la détection automatique, d'un bouton Toggle sur son site pour switcher indépendamment de thème. La fonction javascript est alors lancée soit au bouton, soit par la détection lancée par le body onload...
La méthode la plus simple serait d'ajouter une classe dark au #main ou à l'ID du body pour utiliser des variantes au sein d'une même feuille de style...
if("matchMedia" in window) {
if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
document.getElementById("main").classList.add("dark");
}
else {
document.getElementById("main").classList.remove("dark");
}
css:
#main {background:white; color:black}
#main.dark {background:black;color:white}
Autre possibilité : via la détection du media query ou le toggle button, on charge/décharge une feuille css alternative/supplémentaire.
voir https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html pour la détection du media query. Je n'ai pas testé et il manque la suppression du css link, que les 2 fonctions soient liés à 1 seul bouton et pas 2, et un cookie pour se souvenir des préférences d'une page à l'autre, mais ça ressemblerait à ça :
Boutons
var buttondark = document.getElementById('togglebuttondark');
buttondark.addEventListener('mouseup', toggletodarkmode, false);
Body
(<)body onload="chooseifdarkmode();">
(<)a id="togglebuttondark">Switch to Dark Mode (<)/a>
Détection (head)
function chooseifdarkmode () {
if("matchMedia" in window) {
if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
toggletodarkmode();
}
else { }
if(window.matchMedia("(prefers-color-scheme: light)").matches) {
toggletolightmode();
}
else { }
}
Changement(head)
function toggletodarkmode() {
var element = document.createElement("link");
element.setAttribute("rel", "stylesheet");
element.setAttribute("type", "text/css");
element.setAttribute("href", "darkmode.css");
document.getElementsByTagName("head")[0].appendChild(element);
}
Attention il y a 3 valeurs possibles à cette méthode : dark, light, nopreference ;-)
Merci beaucoup pour cette réponse détaillée. Ça fonctionne :)
Il ne reste plus qu’à attendre la prise en charge par les navigateurs...
je l'ai détaillée encore un peu avec l'histoire des scripts (à partir de EDIT) mais je n'ai pas testé ceux-ci...
et la feuille de style alternative du darkmode risque d'être difficilement facturable :-)
Et personnellement j'adore le dark mode sur un 11 pouces, mais pas sur un 30 pouces. Il faut dire que mon Cinema Display 30' d'occasion est un peu jauni et n'a plus toute sa luminance...