Notes perso : 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.
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 chargementautocomplete: autoriser ou pas la complétion automatiquespellcheck: true ou false pour autoriser ou pas la vérification orthographiqueautocapitalize:none,sentencepour la première lettre des phrases,wordspour la première lettre des mots,characterspour tous les caractères.
