Avec UL, LI, SUMMARY et DETAILS.

Et si on veut numéroter les sections façon 1, 1.1, 1.2, 2, 2.1, etc. on peut utiliser les compteurs CSS : https://codepen.io/lehollandaisvolant/pen/wJgGdR

C’est un truc très vieux, mais ça marche très bien.
C’est ce que j’utilise par exemple sur ces pages : https://lehollandaisvolant.net/tuto/pagespd/

Une introduction au flex-box en CSS.
C’est assez complet.

Bien qu’il se demande lui-aussi si Flexbox n’est pas un peu démodé avec Grid, je reste d’accord avec sa réponse : les deux résolvent des problèmes différents.

Et perso, je préfère (et utilise) largement flexbox. Grid est puissant et utile pour certains trucs, mais justement : je ne suis pas fan des dispositions en grilles/tableaux. Flex a l’avantage de se faire sur un seul axe, et donc d’être facilement transposé d’un écran horizontal à un écran vertical (par exemple).

Une feuille de style de 58 octets.

Ça se limite à ça :

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

En gros, le contenu reçoit une largeur max et le tout est centré. C’est tout.

C’est pas très joli, mais au moins c’est entièrement lisible : les styles par défaut des navigateurs font le reste, en particulier pour ce qui est de la taille des titres ou des bordures des input ou des tableaux.

Y a aussi un version 100 octets et 200 octets :
https://t.mkws.sh/100bytes/
https://t.mkws.sh/100morebytes/

Une page web qui mesure 18,94 kilomètres de haut :D
Il n’est pas allé plus loin car Gecko, le moteur de rendu de Firefox, a un problème avec les pages plus hautes que ça.

Pour le côté technique, il a utilise ça :

font-size: 100cm;
height: 2840em;

J’ai scrollé tout ça en 2 min 17,40 secondes sur mon PC. Ce qui nous fait une vitesse de défilement de 496,24 km/h. Pas mal.

Via : https://lesjoiesducode.fr/ivre-il-cree-la-page-web-la-plus-longue-a-scroller-au-monde-css

Tiens, je ne savais pas cette magouille pour détecter si un logiciel est installé depuis une page web.

Il suffit que le logiciel vienne avec sa propre police d’écriture totalement inédite (et inutile), et que dans la page web, on utilise cette police sur un élément donné.
À savoir, dans les pages web, quand on déclare un police d’écriture on met « font-familly: "police1", "police2", "police générique"; ». On peut en mettre plusieurs dans l’ordre d’importance. Ici, si la première n’est pas installée, le navigateur cherchera la seconde. Si elle n’est pas utilisée non plus, il prendra une police générique par défaut du système.

Du coup si un programme installe une police1 et qu’on utilise le code ci dessus, il chargera et utilisera la police1. Et s’il n’est pas installé, il utilisera la police2.
En détectant (en JS) quelle police est effectivement utilisée, on sait si le logiciel est installé ou non.

Beaucoup de logiciels utilisent des polices à eux, à commencer par LibreOffice, LaTeX, qui sont libres, mais aussi Adobe, Microsoft Office… qui utilisent des polices pour leurs applications.
Dans le cas de TeamViewer, en revanche, la police n’est même pas utilisée et en prime elle ne contient que 8 lettres et 2 chiffres, ce qui la rend inutilisable pour à peu près tout. Hormis vous traquer, qui semble ici être sa seule utilité :

A quick query on GitHub reveals that many font fingerprinting libraries include references to the font names TeamViewer15, TeamViewer14, and TeamViewer13.

Oh la la, les facepalm. Le genre d’erreurs qu’on fait tous souvent, mais qui nous font parfois chercher longtemps avant de trouver, et pas qu’en CSS d’ailleurs :(

Oh gosh… ça me donne la nausée.

J’ai déjà adapté au mobile des sites web dont tous les éléments, y compris chaque mot, était positionné de façon absolu. Une horreur absolue réalisée avec Word pour un vieux site de prod.
Après mon passage, le site était plus léger et responsive sur tous les écrans.

Ici, ils prennent le design et placent chaque élément dans une cellule d’un grid, et c’est ce grid qui est modifié. Un peu comme si on faisait un site web dans Excel en autorisant le dimensionnement fluide des cellules. Non vraiment, c’est horrible.

J’ai refait (rapidement) le thème de mon site.
J’ai ajouté un thème sombre, qui s’affiche si votre navigateur est configuré pour afficher un thème sombre.

Tout est dans le titre.

J’ajouterais juste que certaines sont très simples à utiliser : quelques lignes de CSS simples et un :hover.

Ça change des effets qui ont besoin de 5 éléments HTML invisibles, 5 ko de CSS expérimental supportées uniquement dans Chrome et une plâtrée de JS.

div[data-testid="placementTracking"] { display: none!important; }

Ce CSS appliqué sur Twitter masquera les tweets sponsorisés et suggérés.

Il peut être utilisé avec uBlock Origin, ou avec StopTheMadness (sous iOS).

(Merci à David, pour la suggestion de StopTheMadness, d’ailleurs : l’app est payante, mais permet d’appliquer sur CSS/JS à tous les sites, en plus de virer les "utm" des URL, de virer les bandeaux de cookies et autres « essayez notre app ! », de réactiver le zoom sur les sites qui l’empêchent, désactiver les playback vidéo automatique…)

Un petit récapitulatif des nouveaux CSS depuis CSS3 : filtres, media-queries, dark/light, path, grid…

CSS is a language for changing the design of websites. Every ruleset you write likely changes the defaults of something.

+1.

Les styles navigateur sont un fallback, pas une sacro-sainte relique à laquelle on ne peut pas toucher.
D’ailleurs, j’aimerais bien connaître les scores d’accessibilités d’un site sans styles (juste les styles navigateur).

Qu’il y ait des règles tacites auxquelles on s’est habitué (les liens en bleu, par exemple), c’est une chose, mais n’interdit pas de changer la couleur.

Je rappelle que mon site dispose d’une feuille CSS dédiée à l’impression.

Le but ? Permettre une impression « propre » :

– pas d’image ou de couleur de fond
– police sérif
– entête, footer, navbar… non imprimés
– images ou paragraphes non scindés sur deux pages (oui y existe du CSS pour ça)
– les liens (non clicables sur papier) sont affichés en entier, avec a[href]::after { content: attr(href); }

Le CSS est très concis par ailleurs : https://couleur-science.eu/themes/2021/style-print.css !

En CSS, on ne peut pas utiliser les commentaires avec « // commentaire ».
Il n’y a que les « /* commentaire */ »

… à moins que… Si ?

En fait si, mais c’est un peu un hack et le « // » ne suffit pas.
Vous lirez l’article pour voir pourquoi, mais il faut faire ça, avec « // » au début et « {} » à la fin, sur la même ligne :

selecteur {
// ceci est un commentaire {}
width: 100%;
color: red;
}

(du coup, c’est pas du tout plus rapide que de faire /* commentaire */)

Un bout de code CSS qui donne à la couleur du texte ("color") une valeur de telle sorte que ça soit toujours correctement contrasté par rapport à la couleur de fond ("background-color").

Ainsi, sans rien toucher d’autre que la couleur de fond, le texte sera blanc sur les couleurs sombres et noir sur les couleurs claires. Le tout fait usage d’un calcul bien précis sur le R, G, B pour donner soit du blanc soit du noir.

Tout ça c’est uniquement en CSS, avec le calc() et les variables. Pas de JS.

Note :
- sur chaque div, on donne trois variables, correspondant au R, G et B. La couleur de fond est alors directement « background-color :(rgb(R,G,B)) ».

La couleur du texte, lui, passe dans la moulinette du calc() et ressort sous forme de blanc ou de noir.

Comment ça marche ? Tout simplement en saturant la luminosité : après le calcul sur R, G, B avec des facteurs empiriques, on a une valeur comprise entre −0.5 et +0.5. On fait alors un ×1000% histoire de saturer l’échelle 0-1 sur laquelle on va mettre cette valeur.

Cette valeur, enfin, est placée dans le color, où la couleur est donnée en HSL(0,0,L) ou le L correspond à notre valeur. Vu qu’on a saturé la valeur, CSS, ou le navigateur, va automatiquement prendre soit 0, soit 1, selon que c’est négatif ou positif.

J’utilise un truc similaire ici : https://lehollandaisvolant.net/tout/tools/color-second/ (où la couleur de fond évolue chaque seconde).

Je le fais en JS :

// I use YIQ color scheme to determine is a color is dark or light
var yiq = ((r*299)+(g*587)+(b*114))/1000;

if (yiq >= 128) {
    // set dark-fond
} else {
    // set light-font
}