JavaScript et CSS permettent aux utilisateurs de détecter la préférence de thème de l’utilisateur avec CSS’ prefers-color-scheme requête médiatique. Il est courant de nos jours d’utiliser cette préférence pour afficher le thème sombre ou clair sur un site Web donné. Mais que se passe-t-il si l’utilisateur modifie ses préférences lors de l’utilisation de votre application ?
Pour détecter un changement de préférence de thème système à l’aide de JavaScript, vous devez combiner matchMedia, prefers-color-schemeet un écouteur d’événement :
window.matchMedia('(prefers-color-scheme: dark)')
.addEventListener('change',({ matches }) => {
if (matches) {
console.log("change to dark mode!")
} else {
console.log("change to light mode!")
}
})
Le change événement de la matchMedia L’API vous avertit lorsque la préférence système change. Vous pouvez utiliser cet événement pour mettre à jour automatiquement l’affichage du site en temps réel.
J’aime le fait que cette API permette de détecter les préférences de l’utilisateur au niveau du système. Répondre aux besoins des utilisateurs est un élément important de la création d’une excellente expérience Web !
Créer un cube CSS
Les cubes CSS montrent vraiment ce que CSS est devenu au fil des ans, évoluant de simples directives de couleur et de dimension à un langage capable de créer des visuels profonds et créatifs. Ajoutez une animation et vous avez quelque chose de vraiment bien. Malheureusement, chaque tutoriel de cube CSS que j’ai lu est un peu…
Créer une animation de retournement CSS
Les animations CSS sont très amusantes ; la beauté d’entre eux est que, grâce à de nombreuses propriétés simples, vous pouvez créer n’importe quoi, d’un fondu élégant à un effet WTF-Pixar-would-be-fier. Un effet CSS quelque part entre les deux est l’effet CSS flip, par lequel il y a …
Widget de partage dynamique de style Digg utilisant la boîte à outils Dojo
J’ai toujours vu Digg comme un site Web très progressiste. Digg utilise des méthodes expérimentales et ajaxifiées pour les commentaires et les fonctions critiques. Une belle touche que Digg a ajoutée à son site Web est son widget de partage de survol. Voici comment implémenter cette fonctionnalité sur votre site…
Dupliquer les info-bulles de la page d’accueil jQuery à l’aide de MooTools
La page d’accueil de jQuery a un effet de type info-bulle assez suave comme on le voit ci-dessous : Voici comment obtenir ce même effet en utilisant MooTools. Le XHTML Le XHTML ci-dessus provient directement de la page d’accueil de jQuery — aucun changement. Le CSS Le CSS ci-dessus a été légèrement modifié pour correspondre aux règles CSS déjà…