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.
