#20211

CSS Legal Color Values

Ah tiens, on peut utiliser le RGBA directement en HEX : #RRGGBBAA. Je n’étais pas au courant.

https://www.w3schools.com/cssref/css_colors_legal.asp

#20163

The new responsive: Web design in a component-driven world

Ça donne des idées en même temps de faire peur.

Plus ça va, plus j’ai l’impression que je vais progressivement aller vers du minimalisme absolu. Le CSS c’est cool et j’adore ça (y compris le débuguage, car on apprend plein de choses sur le fonctionnement d’un navigateur, du rendu, etc.) mais plus ça va, plus ça devient intenable à maintenir.

Heureusement, avec Flex/Grid, une fois que c’est en place, c’est le nav qui gère les marges et tout le reste. Même sans media-queries, ça s’organise de façon fluide.

L’avantage d’une page sans CSS, c’est que c’est plus passe-partout que le plus passe-partout du CSS.

https://web.dev/new-responsive/

#20088

Specificity - CSS - web.dev

An element (type) or pseudo-element selector gets 1 point of specificity.
A class or pseudo-class selector gets 10 points of specificity.
An ID selector gets 100 points of specificity, as long as you use an ID selector (#myID) and not an attribute selector ([id="myID"]).

This is actually false.

Lets have the HTML :

<div id="myid" class="one two three four five six seven eigth nine ten eleven">Lorem Ipsum</div>

And this CSS :

#myid {
    color: red;
}

.one.two.three.four.five.six.seven.eigth.nine.ten.eleven {
    color: blue;
}

The #id gives it 10 points.
The .classes give them 1 point each, wich gives the div 11 points.

Yet, the div will be red.

With the given explanation, you give the impression that enough .classes can overtake an #id al long as there are enough of them.

This. Is. Untrue.

The specificity is not 1, 10, 100, 1000. It’s not even numeric and so the can’t be compared.
Individual classes do add up… among classes only.

This would turn the div red :

.one.two.three { color: red; } /* specificity of 3 */
.one.two { color: blue; } /* specificity of 2 */

However, when you mix selectors, keep in mind that they occupy ranks, not powers of ten.
And a rank of an id will always be above a rank of a class.

So, the specificity of one #id will overtake even a thousand classes.

Personally, I prefer using hyphens to denote ranks :

#id.class .class > span+span+span  {}

has a specificity of 1-2-3, because this selector sums 1 #id, 2 .classes and 3 elements.
And 1-0-0 will overtake even 0-100000-100000. The rank matters, not the amount of selectors.

Yes, I saw you ended that tutorial with this notation, but it begins on a somehow poorly manner that might induce errors.

https://web.dev/learn/css/specificity/

#20072

A Love Letter to HTML & CSS | CSS-Tricks

+1

Tout le monde est là « nianiania, petit joueur ! CSS c’est pas un vrai langage ! » pourtant les trois-quart du temps, tout le monde se pète les dents dessus :D

Et pour le HTML, c’est pas parce que c’est « juste » de la mise en page que c’est pas important ni difficile.
Essayez donc de réciter tous les éléments HTML : https://codepen.io/plfstr/full/zYqQeRw ! Je paris que la plupart en omettront au moins une quarantaine.

https://css-tricks.com/a-love-letter-to-html-css/

#20001

How to Improve CSS Performance | Calibre

TL;DR :
– osef des sélecteurs et du contenu du CSS. Les navigateurs sont rapides pour ça.
– bossez plutôt sur la taille du CSS à charger et sur la façon dont il se charge (async, preload, nombre de fichiers CSS…)

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

#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/