Dark mode
▻https://blog.smarchal.com/dark-mode
Dark-mode : media-query CSS et matchMedia JS pour prefers-color-scheme
La méthode matchMedia ou les Media Queries pour JavaScript - Alsacreations
▻https://www.alsacreations.com/article/lire/1500-matchmedia-javascript-media-queries.html
Utiliser les media query en javascript
Voir aussi :
– la doc MDN : ▻https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia
– des exemples : ▻https://developer.mozilla.org/fr/docs/Web/CSS/Requ%C3%AAtes_m%C3%A9dia/Tester_les_media_queries
Va falloir jouer avec cette nouvelle #media_query : prefers-color-scheme - #CSS
▻https://developer.mozilla.org/fr/docs/Web/CSS/@media/prefers-color-scheme
La caractéristique média prefers-color-scheme permet de détecter les préférences exprimées par l’utilisateur quant au thème à utiliser (sombre ou clair).
Si je comprends bien, ça vient d’être intégré dans Safari de MacOS 10.4.4, pas encore testé. Il va falloir tester si c’est pris en compte dans les webviews des apps iOS, là où ça me semble le plus directement utile.
]]>Quelques liens sur les #images #@2x, indiqués par @realet et @speciale sur spip-dev :
Il y a des solution avec javascript pour charger les images @2x seulement sur écran #Retina.
►https://github.com/baotuo/jQuery-Retina-Plugin
►http://retinajs.com
►http://menacingcloud.com/?c=highPixelDensityDisplays
Ou avec des #media_query :
►http://anthonygthomas.com/2012/04/22/media-queries-for-high-pixel-density-devices
Idées à piker chez WP :
►http://wpmu.org/wordpress-retina
De la doc :
►http://webdesign.tutsplus.com/articles/general/improving-image-quality-on-the-retina-display
et une technique pour réduire les images à la volée en fonction du client
►http://adaptive-images.com