Des idées à suivre pour SPIP par un pro talentueux !

Bonnes pratiques pour faire une note de bas de page accessible.

Un système de calcul de couleur qui procure la même sensation de luminosité quelle que soit la teinte.

Des CSS modernes pour adapter la taille des textes à la largeur du navigateur de manière fluide.

Une vue arborescente dépliable et repliable en pur HTML et CSS

Ce que le HTML permet avec les formulaires en 2022

Etape 4 : Remote SVG Symbol§
Notre nouvelle solution devrait donc ajouter les contraintes suivantes :

qui évite des tonnes de requêtes
qui ne passe pas par une font pour des questions de poids et d’accessibilité
qui soit facile à changer lors d’une interaction

• qui puisse être téléchargé à la demande (ex : à l’ouverture d’une modale)
• qui puisse être mis en cache entre chaque page
  Pour régler ces nouvelles contraintes, la solution est de faire en sorte que les icones soient récupérés de manière externe. En effet, si nous reprenons la manière dont on a écrit le SVG à l’endroit où on veut afficher l’icone, nous avions une balise use:

<use href="#icon-home"></use>
Celle-ci passe par un attribut href parce qu’en réalité on n’est pas obligé de définir une ancre dans la page courante. On peut aller chercher la définition SVG à une autre URL.

Ainsi plutôt que de mettre votre SVG qui contient la liste de <defs> au sein de la page, nous allons l’enregistrer dans son propre fichier:

<!-- /images/icon-defs.svg -->
<svg xmlns="http://www.w3.org/2000/svg">
<defs>...</defs>
</svg>
A ce moment là, nous pourrons changer notre balise use afin qu’elle utilise la nouvelle URL:

-<use href="#icon-home"></use>
+<use href="/images/icon-defs.svg#icon-home"></use>
Grâce à cela, la liste d’icone se retrouve en dehors de la page HTML et pourra donc être téléchargé et mis en cache au même titre que n’importe quel asset externe.

⚠️ Attention toutefois, il y a une contrainte forte : votre SVG distant doit impérativement être hébergé sur le même nom de domaine. Si ce n’est pas le cas, les navigateurs vont considérer que c’est une faille de sécurité et votre icone ne marchera pas.

Une belle liste de ce qu'il faut pour faire du ecommerce avec SPIP

Un script d'installation de SPIP + Plugins

Il es maintenant possible (à partir de chrome 111) de faire une pendule analogique quasiment en pur CSS (juste un peu de JS pour décider de l'heure de départ)

With a unitless line-height, the value of the line-height is reevaluated for every single children based on said children’s font-size. Here the container is set to font-size:1rem; line-height:1.25. The <h1> gets a line height of 40px. The <p> gets a line height of 20px.

With a percentage line-height, the value of the line-height is evaluated once on the parent, and then applied at that exact same value for every children. Here the container is set to font-size:1rem; line-height:125%. The <h1> gets a line height of 20px. The <p> gets a line height of 20px.

Version moderne des CSS pour cacher un élément en le laissant accessible aux lecteurs écran.

Faire apparaître des notes de bas de page en position fixe en bas de l'écran. Brillant !

Exemple : https://atomicarchive.com/resources/documents/effects/glasstone-dolan/chapter1.html

Ce plugin de WordPress propose une page de maintenance assez jolie.
L'idée serait de la reprendre pour le plugin en travaux de SPIP.

Une échelle de titres harmonieuse

Une alternative à slick slider avec plus d'options et une accessibilité native

Une évolution qui serait bien utile dans SoyezCréateurs

À intégrer à SoyezCréateurs à la place de Palette

Une build de jqueryUI avec seulement la fonctionnalité de ToolTip

Une méthode pour avoir une taille de police fluide en fonction de la taille de l'écran.