#19989

Dark mode et accessibilité | nota-bene.org

+1

Essayez de lire une page web sombre sur son mobile dans un environnement très éclairé.
Je suis aussi d’avis de laisser le choix à l’utilisateur, idéalement en mettant une option « définie par le système » par défaut, puis des options « forcer le thème clair » ou « forcer le thème sombre ».

Il faut proposer le thème système, car quelqu’un peut très bien avoir réglé son ordi pour qu’il passe en sombre la nuit et clair le jour (perso c’est ce qui me manque sur Android: dans android 10 ça n’est pas automatique, alors que l’éclairage nocturne, lui, s’active bien tout seul :-/).

https://nota-bene.org/Dark-mode-et-accessibilite

#19983

Note : CSS grid

Grid c’est puissant.
Tellement puissant que j’ai peur de l’utiliser car les j’imagine que les algos de positionnement doivent être complexes au point de pouvoir créer un trou noir si un dev là-dedans oubliait un point-virgule.

Ça fait trois fois que j’essaye d’écrire ce que je fais, mais j’ai pas mes mots, du coup je fais un codepen : https://codepen.io/lehollandaisvolant/pen/LYxmdzz?editors=1100

C’est très très souple et j’ai bien peur que ça résolve peu à peu tous mes problèmes. Je m’étais épris de flex il y a quelques années, je suis en train de tomber dans les bras de grid là…

https://lehollandaisvolant.net/?mode=links&id=20210414181431

#19975

CSS Grid Layout, guide complet

Un guide sur la disposition grid en CSS. Avec des images très parlantes.

https://la-cascade.io/css-grid-layout-guide-complet/

#19963

[astuce] Firefox et le about:newtab en sombre

Dans firefox, le thème par défaut est celui qui s’adapte le mieux au thème GTK du système (sous Linux Mint Mate).

Le thème sombre du système se répercute bien sur les onglets et le chrome, mais pas la page d’un onglet vierge, qui est alors clair.
Je pourrais utiliser le thème sombre de Firefox, mais comme j’ai dit, ce dernier n’est pas intégré correctement avec le thème GTK.

Ici, une astuce qui prend le CSS du nouvel onglet du thème Firefox sombre pour l’utiliser dans le thème Firefox par défaut.

Dans le dossier .profile de Firefox, allez dans le dossier chrome, et faites-y un fichier userContent.css.

Copiez-y ceci :

@-moz-document url(about:newtab) {
	body {
		--newtab-background-color: rgba(42, 42, 46, 1)!important;
		--newtab-text-primary-color: rgba(249, 249, 250, 1)!important;
		--newtab-border-primary-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-border-secondary-color: rgba(249, 249, 250, 0.1)!important;
		--newtab-button-primary-color: #0060DF!important;
		--newtab-button-secondary-color: #38383D!important;
		--newtab-element-active-color: rgba(249, 249, 250, 0.2)!important;
		--newtab-element-hover-color: rgba(249, 249, 250, 0.1)!important;
		--newtab-icon-primary-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-icon-secondary-color: rgba(249, 249, 250, 0.4)!important;
		--newtab-icon-tertiary-color: rgba(249, 249, 250, 0.4)!important;
		--newtab-inner-box-shadow-color: rgba(249, 249, 250, 0.2)!important;
		--newtab-inner-box-shadow-color-nte: rgba(21, 20, 26, 0.5)!important;
		--newtab-tile-shadow-secondary: rgba(21, 20, 26, 0.75)!important;
		--newtab-link-primary-color: #45A1FF!important;
		--newtab-link-secondary-color: #50BCB6!important;
		--newtab-text-conditional-color: #F9F9FA!important;
		--newtab-text-secondary-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-textbox-background-color: #38383D!important;
		--newtab-textbox-border: rgba(249, 249, 250, 0.2)!important;
		--newtab-textbox-focus-color: #45A1FF!important;
		--newtab-textbox-focus-boxshadow: 0 0 0 1px #45A1FF, 0 0 0 4px rgba(69, 161, 255, 0.3)!important;
		--newtab-background-button-color: rgba(80, 80, 80, 0.5)!important;
		--newtab-background-button-text-color: #CDCDD4!important;
		--newtab-background-button-hover-color: rgba(114, 114, 114, 0.5)!important;
		--newtab-background-button-active-color: rgba(173, 173, 173, 0.5)!important;
		--newtab-feed-button-background: #38383D!important;
		--newtab-feed-button-text: #F9F9FA!important;
		--newtab-feed-button-background-faded: rgba(56, 56, 61, 0.6)!important;
		--newtab-feed-button-text-faded: rgba(249, 249, 250, 0)!important;
		--newtab-feed-button-spinner: #D7D7DB!important;
		--newtab-contextmenu-background-color: #4A4A4F!important;
		--newtab-contextmenu-button-color: #2A2A2E!important;
		--newtab-modal-color: #2A2A2E!important;
		--newtab-overlay-color: rgba(12, 12, 13, 0.8)!important;
		--newtab-section-header-text-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-section-navigation-text-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-section-active-contextmenu-color: #FFF!important;
		--newtab-search-border-color: rgba(249, 249, 250, 0.2)!important;
		--newtab-search-dropdown-color: #38383D!important;
		--newtab-search-dropdown-header-color: #4A4A4F!important;
		--newtab-search-header-background-color: rgba(42, 42, 46, 0.95)!important;
		--newtab-search-icon-color: rgba(249, 249, 250, 0.6)!important;
		--newtab-search-wordmark-color: #FFF!important;
		--newtab-topsites-background-color: #38383D!important;
		--newtab-topsites-icon-shadow: none!important;
		--newtab-topsites-label-color: rgba(249, 249, 250, 0.8)!important;
		--newtab-topsites-outer-card-hover: rgba(180, 180, 180, 0.1)!important;
		--newtab-topsites-context-menu-hover: rgba(180, 180, 180, 0.1)!important;
		--newtab-card-active-outline-color: #4A4A4F!important;
		--newtab-card-background-color: #38383D!important;
		--newtab-card-hairline-color: rgba(249, 249, 250, 0.1)!important;
		--newtab-card-placeholder-color: #4A4A4F!important;
		--newtab-card-shadow: 0 1px 8px 0 rgba(12, 12, 13, 0.2)!important;
		--newtab-snippets-background-color: #38383D!important;
		--newtab-snippets-hairline-color: rgba(255, 255, 255, 0.1)!important;
		--newtab-background-primary-text-color: #CDCDD4!important;
		--newtab-focus-outline: rgba(80, 145, 241, 0.5)!important;
		--newtab-focus-border: #B5D3FF!important;
		--newtab-focus-border-selected: #B5D3FF!important;
		--newtab-primary-action-background: #4484E2!important;
		--newtab-primary-action-background-off: #6A6A6F!important;
		--newtab-seperator-line-color: #53515F!important;
		--customize-menu-primary-text-color: #E0E0E6!important;
		--customize-menu-check-fill: #E0E0E6!important;
		--customize-menu-background: #38383D!important;
		--customize-menu-secondary-action-background: #515156!important;
		--customize-menu-secondary-action-background-hover: #606065!important;
		--customize-menu-secondary-action-background-active: #6F6F74!important;
		--customize-menu-seperator-line-color: #53515F!important;
		--customize-menu-first-shadow: rgba(21, 20, 26, 0.5)!important;
		--customize-menu-second-shadow: rgba(21, 20, 26, 0.75)!important;
		--customize-menu-primary-action-text: #E0E0E6!important;
		--customize-menu-line-color: #B9B7CC!important;
		--newtab-search-first-shadow: rgba(21, 20, 26, 0.5)!important;
		--newtab-search-second-shadow: rgba(21, 20, 26, 0.75)!important;
		--newtab-search-text-color: #B1B1BD!important;
		--newtab-card-first-shadow: rgba(21, 20, 26, 0.5)!important;
		--newtab-card-second-shadow: rgba(21, 20, 26, 0.75)!important;
		--newtab-wordmark-color: #FFF!important;
	}

}

Enregistrez le fichier.
Fermez l’éditeur.

Maintenant, dans Firefox, allez dans about:config et créez une clé toolkit.legacyUserProfileCustomizations.stylesheets de type boolean et mettez-là à true.

Relancez Firefox.

Voilà.

Maintenant ça ressemble à ça :
https://lehollandaisvolant.net/img/7a/screenshot-firefox.png

Alors qu’avec le thème sombre de Firefox, on avait la barre sous les onglets qui n’étais pas pareil que la barre de titre (aux couleurs du système) et avec le thème par défaut (comme là), la barre des onglets était bonne, mais la page newtab était claire.

D’ailleurs là, le fond de la page newtab n’est pas exactement la même couleur que celle de la barre de titre.

ÉDIT : pour ceux qui se demandent, je suis en train de faire un thème sombre pour mes sites.
Je commence actuellement par mes petits outils en ligne (c’est pas encore en ligne). Après je ferais le blog, puis peut-être CS (le site est déjà relativement sombre).

https://lehollandaisvolant.net/?mode=links&id=20210407183042

#19928

How to Improve CSS Performance | Calibre

Quelques astuces pour les performantes d’une page web lié aux CSS.

En gros : mettez le CSS au début du code (le CSS ne bloque pas le reste du rendu) et le JS à la fin (le JS est bloquant, donc faut pas bloquer le chargement dès le début) ; c’est pas nouveau comme pratique.

Et apprenez comment fonctionne un navigateur : https://www.dailymotion.com/video/xp69td

C’est intéressant et ça vous donnera moult pistes pour faire des pages plus rapides.

https://calibreapp.com/blog/css-performance

#19908

Did You Know About the :has CSS Selector? | CSS-Tricks

Il a toujours manqué un truc en CSS, c’est le sélecteur parent. Par exemple, comment appliquer un style aux seuls liens contentant une image ?

On peut styliser une image situé dans un lien, mais pas cibler spécifiquement le lien en vérifiant s’il a des images à l’intérieur.

Avec :has, on pourra : « a:has(img) {} ».
Ça fait parti de CSS4, au même titre que :is() ou :not().

Comme il dit dans l’article, ceci change énormément la façon dont on cible les élements en CSS. En fait… ça change tout. Car jusqu’à maintenant, on devait descendre les branches de l’arbre DOM, maintenant on pourra le remonter.

https://css-tricks.com/did-you-know-about-the-has-css-selector/

#19903

Better Line Breaks for Long URLs | CSS-Tricks

L’ajout de l’élément WBR agit comme un tiret de césure conditionnel, qui permet de couper en deux un mot lorsqu’il arrive en fin de ligne.

Dans le cas des URL qu’on afficherait tels quels sur une page (dans une feuille de style pour l’impression par exemple), il peut être utile.

M’enfin pour ma part je préfère utiliser le CSS « word-break: break-all; ». Comme ça, ça coupe où ça doit couper, peu importe où c’est. C’est juste plus rapide :D

https://css-tricks.com/better-line-breaks-for-long-urls/

#19789

The Holy Grail Layout with CSS Grid | CSS-Tricks

Et dire qu’à une époque on en chiait avec des structures en tableaux (au bûcher !) ou des astuces à la con du faux-background et des float-left.

Ouais, à une époque fait deux colonnes de taille identique et sans tableaux, c’était impossible ! Et je parle même pas d’IE6 :-D.

Niveau CSS/HTML, c’était pas mieux avant. Peut-être ce qu’on en faisait, mais pas la techno. Grid est difficile à cerner, mais c’est très puissant. Flex offre aussi beaucoup de possibilités, et perso je l’adore.

https://css-tricks.com/the-holy-grail-layout-with-css-grid/

#19780

Scrollbars on Hover | CSS-Tricks

Y a beaucoup plus simple :

div { overflow: hidden; }
div:hover { overflow: scroll; }

À voir par contre si c’est accessible et utilisable sur mobile.

https://css-tricks.com/scrollbars-on-hover/

#19649

The CSS Custom Property Toggle Trick | CSS-Tricks

Utiliser du CSS pour faire du AND, OR, XOR et tout le reste.

Qui a dit que le CSS n’était pas de la prog ? Ça ne sert pas à programmer, mais ça possède pas mal de la mécanique logique de la programmation.

https://css-tricks.com/the-css-custom-property-toggle-trick/

#19598

Geri Reid - Forms best practice

Beaucoup de ressources pour les formulaires HTML.

PS : j’ai récemment découvert la pseudo-class « :focus-within », qui permet de cibler un élément dont un de ses fils est en :focus.

En gros, pour ça :

<label>Nom : <input type="text" /></label>

Et ça :

label:focus-within { background: red; }

Un focus sur le input va appliquer le fond rouge sur le label. Ça peut être pratique, et évite d’avoir à mettre de façon non-naturelle le label après le input, et utiliser le « input:focus+label » pour styler un label quand on focus sur le input.

https://gerireid.com/forms.html

#19597

What is the Value of Browser Diversity? - daverupert.com

C’est vrai tout ça : la mise au point de CSS3 et HTML5 s’est faite alors qu’il y avait de multiples moteurs CSS et plein de moteurs de rendu : KHTML, WebKit, Gecko, Presto, Trident…

On se souvient des heures passées à essayer de faire un truc précis sur une page et qui marche partout.

Mais on oublie les années passées par le W3 à faire une doc qui plaise à tous, et par les éditeurs de ces nav pour les implémenter.

L’avantage de cette difficulté énorme, c’est qu’on doit prendre son temps : mesurer chaque changement, chaque mise à jour déployée, bref, faire les choses bien et faire ce qu’il faut, pas forcément ce que les gens veulent ni le faire vite.

Aujourd’hui, on a 90% de Webkit/Blink et 10% de Gecko. Le reste, c’est tout mort.

Et Webkit/Blink, c’est Google : ils contrôlent le web, ils contrôlent des millions de sites, ses ressources (lib JS, fonts…), des framework, AMP, imposent ses règles en matière d’optimisation, de SEO… Bref, on ne peut pas faire un site sans se plier aux règle faites par Google (en tout cas pas si l’on souhaite toucher du monde).

Résultat ?

Si Google veut une fonctionnalité, elle le livre dans Blink et hop, en trois semaines t’as 90 % des navigateurs qui ont la fonctionnalité active et opérationnelle (rappel : avant ça prenait bien 5 ans). Et pareil pour retirer une fonction.

Alors les webdev sont content, les usagers sont content et le Google est content.

Qui n’est pas content ?

Ceux qui n’ont pas le réseau pour adéquat pour naviguer dans des pages de 20 Mo, ceux qui veulent un web décentralisé, indépendant, libre. Ceux qui veulent essayer de vivre du web sans se plier aux règles de Google en matière de SEO, de fonctionnalités.

Donc ouais, faire des sites compatibles avec toutes les techno des navigateurs, c’est dur. Mais ça oblige parfois à mettre de côté son égo et les trucs trop fancy/inutiles et se focaliser sur le contenu, les choses essentielles et surtout l’utilisateur.

https://daverupert.com/2020/09/the-value-of-browser-diversity/