Mettre en surbrillance ligne et colonne au survol d’une table
Aujourd’hui, il nous est possible de faire énormément de choses avancés en CSS. Cependant quelque chose qui semble plus ou moins simple n’est pas toujours aussi simple que ce que l’on espérait, voir pas du tout. Le projet sur lequel je travaille affiche énormement de table de données (
). Pour certaines d’entre elles, j’aimerais pouvoir mettre en surbrillance la ligne et la colonne qui prolongent cellule que je survole… Il est évident qu’il existe de moches solutions avec Javascript (hum hum), mais il est aussi très simple de le faire avec CSS.
Comment cibler une ligne de la table ?
Très simplement, en utilisant la pseudo-classe hover sur la ligne (
table-row), on peut changer son background-color.
tr:hover {
background: antiquewhite;
} Comment cibler une colonne de la table ?
Un peu plus compliqué pour cette partie…
En Javascript, il est plutôt facile de récupérer l’index de la colonne pour ensuite utiliser CSS et une pseudo-classe :nth-child(), dans toutes les lignes, sélectionner la colonne numéro 3 et lui afficher un background différent.
En CSS, en combinant de simple propriétés comme position, overflow et un pseudo-élément ::before, on pourrait s’étendre un peu plus loin que la cellule.
Publié par Alsacreations.com
Le mode sombre (dark mode) consiste à adopter des fonds de couleur sombre sur les interfaces utilisateur. Selon Wikipedia, ce mode serait utile pour réduire la fatigue visuelle et la consommation en énergie par rapport aux autres modes d’affichage.
Un très grand nombre de personnes en sont adeptes sur leur smartphone, mais également sur leur ordinateur ou tablette. Proposer aux utilisateurs la possibilité d’activer cette fonctionnalité est donc conseillée.
Le site de Wikipedia lui-même vient enfin d’annoncer le support du Dark mode pour ses pages de contenus, après de nombreuses années d’attente de ses lecteurs et lectrices.
Préférences utilisateur
Il est possible d’adapter les thèmes de couleur de son environnement sur l’ensemble de son système d’exploitation, par exemple pour Windows et MacOS : Windows : Paramètres > Personnalisation > Couleurs > mode Windows par défaut.
MacOS : Réglages Système > Apparence > Mode d’apparence.
Il est également possible de n’appliquer ce choix qu’au niveau du navigateur web, par exemple : Dans Firefox : "Réglages > Général > Apparence des sites web"
Dans Chrome : "chrome://flags" et chercher "dark mode" Enfin, en tant que développeur, les Devtools (inspecteur d’élément) de Google Chrome permettent d’émuler le mode sombre / clair via la combinaison de touche "ctrl+shift+p" et chercher "rendering".
Les Devtools de Firefox permettent aussi de tester via onglet Inspecteur, dans les boutons-icônes en haut des styles (cf. capture ci-dessous). Couleurs système
Les couleurs systèmes représentent une palette de couleurs web proposées par défaut pour les différentes éléments d’interface : couleur de texte, couleur de fond, couleur de lien, couleur de bordure d’un bouton, etc.
Ces couleurs sont accessibles (si employées correctement), conformes aux modes de contraste élevé et prêtes à s’adapter automatiquement au mode d’apparence (light et dark mode).
Il est même parfaitement possible de les utiliser sous forme de mot-clés en CSS comme les autres couleurs nommées :
html {
color: CanvasText;
background-color: Canvas;
}
Démo : couleurs système color-scheme
Cette propriété indique au navigateur quel mode d’affichage est souhaité pour un élément donné (light ou dark).
Dans l’exemple ci-dessous, on indique que l’élément .formulaire doit obligatoirement s’afficher en mode sombre. Le navigateur ajuste en conséquence les couleurs système, mais aussi les contrôles de formulaires et les scrollbars éventuelles sur cet élément.
.formulaire {
color-scheme: dark;
} Valeurs de color-scheme color-scheme: normal; : Le navigateur n’adapte pas les couleurs (valeur par défaut).
color-scheme: light; : Le navigateur doit afficher l’élément en mode light.
color-scheme: dark; : Le navigateur doit afficher l’élément en mode dark.
color-scheme: light dark; : Le navigateur doit afficher l’élément selon les préférences utilisateur. Exemple concret
Tiens, mais quelle est ma couleur ?
:root {
color-scheme: light dark;
} Dans cet exemple, j’indique que l’ensemble du document (:root) doit se conformer aux préférences utilisateur. Sans indiquer de couleurs particulières, ce sont les couleurs système qui s’appliquent et sont autorisées à s’adapter à ces préférences : en mode clair, le document a un fond clair et le titre
est de couleur sombre; et inversement en mode sombre. Compatibilité de color-scheme : https://caniuse.com/mdn-css_properties_color-scheme
Conclusion : appliquer color-scheme: light dark; est un bon début pour toute page qui souhaite s’adapter au mode d’apparence, mais cette fonctionnalité n’agit que sur les Couleurs Système (et de l’interface du navigateur) donc c’est plutôt limité en terme de design.
@media (prefers-color-scheme: …)
La requête prefers-color-scheme est un critère des spécifications Media Query permettant de détecter le Mode d’apparence de l’utilisateur (celui défini via ses préférences système et/ou son navigateur).
Cette fonctionnalité permet d’aller un cran plus loin que color-scheme en appliquant des palettes de couleurs totalement personnalisées et adaptées au choix (au système, plus précisément) de nos visiteurs.
Nous détectons si l’OS ou le navigateur est configuré en mode sombre de cette manière :
@media (prefers-color-scheme: dark) {
/* ici des styles prévus pour Dark Mode */
} Concrètement, cela pourrait se traduire ainsi pour nos pages web :
:root {
--color-primary: pink;
--color-primary--darkmode: hotpink; @media (prefers-color-scheme: light) { --color-base: var(--color-primary);
}
@media (prefers-color-scheme: dark) { --color-base: var(--color-primary--darkmode);
}
} Dans l’extrait ci-dessus : Notre palette de couleurs est composée de --color-primary et --color-primary--darkmode
Si le mode d’apparence est clair alors --color-base vaut --color-primary
Si le mode d’apparence est sombre alors --color-base vaut --color-primary--darkmode Nos différents composants bénéficieront par conséquent d’une couleur --color-base dont la valeur s’adaptera automatiquement à la configuration du système, par exemple :
.card {
color: var(--color-base);
} La vidéo ci-dessous illustre la mise en oeuvre de la media query prefers-color-scheme: Mise en oeuvre de la media query prefers-color-scheme Compatibilité de @media (prefers-color-scheme: …) : https://caniuse.com/prefers-color-scheme
light-dark()
Cette valeur-fonction accepte deux paramètres de couleurs et renvoie l’une ou l’autre selon les préférences utilisateur (OS ou navigateur).
.card {
color: light-dark(pink, hotpink);
} Autre exemple :
:root {
color-scheme: light dark;
--primary-color: light-dark(#fff, hotpink);
--primary-background: light-dark(hotpink, #fff);
}
body {
color: var(--primary-color);
background-color: var(--primary-background);
} Compatibilité de light-dark() : https://caniuse.com/mdn-css_types_color_light-dark
Switch
Un Switch est un composant de type "interrupteur". Il va au-delà de ce que proposent les spécifications CSS évoquées jusqu’alors, puisqu’il permet à l’internaute de choisir le thème de couleur qu’il préfère lorsqu’il visite votre site en particulier, indépendamment de ses préférences utilisateur dans son système d’exploitation. Un design totalement inclusif devrait proposer ce genre de fonctionnalités pour tenter d’atteindre la meilleure expérience possible pour tous les usagers de votre site.
Les contraintes et le processus ne sont pas si simples : Le thème doit s’adapter par défaut aux préférences utilisateur (OS ou navigateur).
L’utilisateur devrait aussi pouvoir choisir de changer de thème pour votre site, malgré ses préférences utilisateur.
Ce choix spécifique pour ce site doit être mémorisé pour toutes les pages et pour une prochaine visite. Voici un exemple de Switch accessible sur Codepen : https://codepen.io/alsacreations/pen/ExBPExE
Le déroulé des événements lors du clic/touch sur le bouton est celui-ci : On vérifie si le choix de thème était déjà mémorisé en localStorage.
Sinon on vérifie les préférences utilisateur du système.
Puis on crée ou modifie l’attribut data-theme-preference sur (valeur "light" ou "dark").
Et on mémorise le choix en localStorage.
Enfin, on passe l’attribut aria-pressed du bouton à "pressed". Le test pour connaître le choix de l’utilisateur porte sur l’attribut data-theme-preference, on s’en servira ainsi côté CSS :
.card {
color: pink;
}
[data-theme-preference="dark"] .card {
color: hotpink;
} Ou en syntaxe imbriquée :
.card {
color: pink; [data-theme-preference="dark"] & { color: hotpink;
}
} Conclusion
Offrir une expérience d’environnement sombre et clair est de plus en plus courant et recommandé, rien que pour le confort de tous les usagers.
Cependant, techniquement, rien n’est vraiment magique car les contraintes sont nombreuses et les solutions sont toutes partielles.
Au final, le meilleur compromis semble être un Switch , assemblage de spécifications CSS et de JavaScript pour l’accessibilité et la mémorisation des choix utilisateur.
Publié par Alsacreations.com
Les années passent, Pixels & Bretzels 🥨 se renouvelle (qui d’entre vous utilise encore le nom « WdStr » ?), mais garde le même cap : continuer de vous proposer régulièrement des conférences et rencontres, que ce soit dans votre cœur de métier ou pour vous faire prendre conscience de nouvelles problématiques. Pour fêter cette 100e édition, Pixels & Bretzels pose ses octets chez Alsacréations. Il y aura des quiz et des lots à vous faire gagner ! ✨
Même si cela fait longtemps que vous n’êtes pas venu·e à l’un de nos événements, rejoignez-nous.
Comment s’inscrire ?
Via le site HelloAsso avec le lien suivant : trop fort je m’inscris à Pixels & Bretzels 100e édition
3 bonnes raisons de nous rejoindre : Venez profiter d’une ambiance festive
Sortez la tête de vos projets et retrouvez la communauté
Tentez de gagner un lot ! Lieu et horaire
Le mardi 19 mars 2024 à 19h chez
Alsacréations
10 place du Temple Neuf
67000 Strasbourg
Nous avons hâte de vous y retrouver ✌️
Publié par Alsacreations.com
L’arrivée de l’attribut et de l’API HTML popover facilite la gestion de tous les éléments qui doivent s’afficher au-dessus du contenu d’une page Web (fenêtre modale, tooltip, menu déroulant, etc.).
Cette nouvelle fonctionnalité vient s’ajouter à certaines déjà existantes, au point où l’on ne sait plus forcément où donner de la tête entre les éléments dits "Dialog", "Modal", "Popover" ou autres "Overlay".
Tentons de rassembler toutes les caractéristiques globales et techniques de l’ensemble de ces notions afin d’y voir plus clair. Cet article a pour objectif de poser les bases et de définir les différents termes en jeu. Dans un deuxième temps un article détaillé sera consacré à
GUEST