Petit florilège des trucs passés sur la River ces derniers temps et traînant dans ma riditléteur...

Preloader les font

source https://htmhell.dev/adventcalendar/2024/25/

On peut faire un preload des fontes importantes avec un lien dans le header afin d'avoir un design propre le plus tôt possible:

<link
  rel="preload"
  href="/nova-sans.woff2"
  as="font"
  type="font/woff2"
  crossorigin="anonymous"
>

Transition de height:auto à display:none 🤩 (mais c'est expérimental 🤬 )

quand tu découvres calc-size(), @starting-style, interpolate-size etc... 😅

source https://blog.css-weekly.com/transition-to-height-auto-display-none-using-pure-css

Toggle la visibilité d'un élément simplement

source https://lehollandaisvolant.net/?id=20250125165124

button.addEventListener('click', function(){
element.hidden = !element.hidden;
});

ou avec mon VanillaJS

on("click","button",function(){
    element.hidden = !element.hidden;
});

Lazy loading simplifié avec content-visibility

source https://links.kalvn.net/shaare/fUwLcQ

content-visibility:auto; pour que l'élément soit chargé/visible juste avant d'être dans la fenêtre.

Lier une animation au défilement animation-timeline: scroll();

source https://www.alsacreations.com/article/lire/1935-animations-liees-au-scroll-en-css.html

On utilise animation-timeline qu'on définit à scroll() pour lier au défilement ou à view() pour lier à l'apparition/disparition de la vue.

L'article mérite vraiment d'être lu : il définit clairement tous les paramètres avec lesquels jouer.

Déclencher simplement des animations via JS avec animate()

source https://developer.mozilla.org/fr/docs/Web/API/Element/animate

document.getElementById("tunnel").animate(
  [
    // étapes/keyframes
    { transform: "translateY(0px)" },
    { transform: "translateY(-300px)" },
  ],
  {
    // temporisation
    duration: 1000,
    iterations: Infinity,
  },
);

On utilise animate(keyframes, delay);

Placer des éléments avec anchor positionning

source https://css-tricks.com/fancy-menu-navigation-using-anchor-positioning/

pour le moment, que sur chrome/opera 🤬

L'exemple propose un menu avec cette méthode, mais la page dont on trouve le lien en début d'article parle d'un autre cas d'école requérant des prises de tête habituellement: un tooltip bien placé... (https://css-tricks.com/css-anchor-positioning-guide/)

TLDR;

En gros, anchor-positionning permet de placer un élément relativement à un autre:

• l'objet Anchor sera utilisé comme référence
• l'objet Target sera placé en absolute en utilisant la position d'Anchor .

On utilisera les propriétés anchor-name et position-anchor comme suit:

.anchor {
  anchor-name: --my-anchor;
}
.target {
  position: absolute;
  position-anchor: --my-anchor;
}

Le choix du positionnement se fera ensuite grâce à position-area, position-visibility.

En savoir plus...

Utiliser currentColor pour avoir la couleur en cours

source https://www.alsacreations.com/tuto/lire/1944-appliquer-des-styles-css-a-svg.html

Particulièrement intéressant pour les SVG inline (pas dans une balise img): on peut, pour des icônes par exemple, utiliser currentColor afin que le SVG prenne la couleur du texte... 🤩

Les unités lvh, svh et dvh

source https://www.zendevs.xyz/css-unites-lvh-svh-dvh/

Une alternative aux unités de viewport vh et vw : en gros, elles permettent d'épouser la surface utile de l'écran, pouvant varier (avec/sans barre de navigation ...)

En clair, l’unité SVH intègre la présence des barres du navigateur tandis que la LVH calcule selon la pleine hauteur disponible et la DVH modifie sa valeur en continu, permettant ainsi une adaptation plus fine aux variations dynamiques de l’interface utilisateur.

Il n'y a pas que autofocus et autocomplete !

source https://garrettdimon.com/journal/posts/fine-tuning-text-inputs

• autofocus : mettre le focus dans un input au chargement
• autocomplete: autoriser ou pas la complétion automatique
• spellcheck: true ou false pour autoriser ou pas la vérification orthographique
• autocapitalize:
  • none,
  • sentence pour la première lettre des phrases,
  • words pour la première lettre des mots,
  • characters pour tous les caractères.