aCSStuces et découvertes du jour.

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...

❝ 2 commentaires ❞

1  jerry wham le

Merci l'ami !
Je vais m'endormir moins bête.


 
2  Bronco le

En ce moment y''a plein de trucs qui sortent, en plus...


On a du mal à suivre : CSS devient un vrai langage 🤔

 

Fil RSS des commentaires de cet article

✍ Écrire un commentaire

les commentaires relevant du SPAM seront filtrés et dégagés direct...

Quelle est le dernier caractère du mot a40r95k ?
Caching time 0.002257 s