Petit florilège des trucs passés sur la River ces derniers temps et traînant dans ma riditléteur...
Preloader les font
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... 😅
Toggle la visibilité d'un élément simplement
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
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();
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()
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
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
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
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 !
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, sentence pour la première lettre des phrases, words pour la première lettre des mots, characters pour tous les caractères.
<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/style.css"/>
<link rel="stylesheet" href="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.css"/>
<script src="http://warriordudimanche.net/./plugins/Galart/assets/lightbox.js">
<script>[].forEach.call(document.querySelectorAll("[lightbox]"), function(el) { el.lightbox = new Lightbox(el);});
► Commentaires
