CSS puissant et stable, à utiliser dès aujourd'hui.
Je pense que chaque développeur front-end doit savoir utiliser les requêtes de conteneur, créer une expérience de snappage de défilement, éviter position: absolute
avec la grille, créer rapidement un cercle, utiliser des couches en cascade et obtenir plus avec moins via les propriétés logiques. Voici un bref aperçu de chacune de ces attentes.
1. Requête de conteneur
La fonctionnalité CSS la plus demandée depuis 10 ans est désormais stable dans tous les navigateurs et vous pouvez l'utiliser pour les requêtes de largeur en 2023.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
2. Suivi du défilement
Les expériences de défilement bien orchestrées vous démarquent des autres, et le snappage de défilement est le moyen idéal d'adapter l'expérience de défilement du système tout en fournissant des points d'arrêt pertinents.
.snaps {
overflow-x: scroll;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
}
.snap-target {
scroll-snap-align: center;
}
.snap-force-stop {
scroll-snap-stop: always;
}
Découvrez le potentiel de cette fonctionnalité CSS dans cette immense collection de démonstrations Codepen de près de 25 démonstrations.
scroll-snap-type
scroll-snap-align
scroll-snap-stop
overscroll-behavior
3. Pile de grille
Évitez la position absolue avec une grille CSS à une seule cellule. Une fois qu'ils sont empilés les uns sur les autres, utilisez les propriétés de justification et d'alignement pour les positionner.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
4. Cercle rapide
Il existe de nombreuses façons de créer des cercles en CSS, mais celle-ci est sans aucun doute la plus minimaliste.
.circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; }
aspect-ratio
5. Contrôler les variantes avec @layer
Les couches en cascade peuvent vous aider à insérer des variantes découvertes ou créées ultérieurement à l'endroit approprié dans la cascade avec l'ensemble d'origine.
/* file buttons.css */ @layer components.buttons { .btn.primary { … } }
Ensuite, dans un fichier complètement différent, chargé à un autre moment aléatoire, ajoutez une nouvelle variante à la couche de boutons comme si elle était là avec le reste tout le temps.
/* file video-player.css */ @layer components.buttons { .btn.player-icon { … } }
@layer
6. Mémoire moins chargée et meilleure couverture grâce aux propriétés logiques
Mémorisez ce nouveau modèle de boîte et ne vous souciez plus de modifier la marge ou la marge intérieure gauche et droite pour les modes d'écriture et les orientations de document internationaux.
Passez de propriétés physiques à des propriétés logiques comme padding-inline
, margin-inline
et inset-inline
. Le navigateur s'occupera alors de l'ajustement.
button { padding-inline: 2ch; padding-block: 1ch; } article > p { text-align: start; margin-block: 2ch; } .something::before { inset-inline: auto 0; }