Profitez d'un CSS de qualité, performant et stable que vous pouvez utiliser dès aujourd'hui.
Je pense que tous les développeurs front-end doivent savoir utiliser les requêtes de conteneur, créer un ancrage de défilement, éviter position: absolute avec la grille, marteler rapidement un cercle, utiliser des calques en cascade et atteindre plus avec moins grâce aux propriétés logiques. Voici un aperçu rapide
de chacune de ces attentes.
1. Une requête de conteneur
La fonctionnalité CSS la plus demandée depuis 10 ans d'affilée est désormais stable dans tous les navigateurs et disponible 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;
}
}
@containercontainer2. Faire défiler l'ancrage
Des expériences de défilement bien ordonnées permettent de différencier votre expérience du reste, et l'ancrage 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 significatifs.
.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;
}
Pour en savoir plus sur le potentiel de cette fonctionnalité CSS, consultez cette immense collection d'inspiration Codepen composée d'environ 25 démonstrations.
scroll-snap-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. Pile de la grille
Évitez une position absolue avec une grille CSS à une seule cellule. Une fois qu'elles sont empilées les unes sur les autres, utilisez des propriétés de justification et d'alignement pour les positionner.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. Cercle rapide
Il existe de nombreuses façons de créer des cercles en CSS, mais c'est certainement la plus minimale.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. Contrôler les variantes avec @layer
Les calques de cascade peuvent aider à insérer des variantes découvertes ou créées ultérieurement, au bon endroit de la cascade, avec l'ensemble de variantes d'origine.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
Ensuite, dans un fichier entièrement différent, chargé à un autre moment aléatoire, ajoutez une nouvelle variante à la couche du bouton comme si elle se trouvait là avec les autres pendant tout le temps.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. Utiliser des propriétés logiques pour réduire la mémorisation et élargir l'audience
Mémorisez ce nouveau modèle de zone pour ne plus avoir à vous soucier des modifications de la marge intérieure ou de la marge gauche et droite pour les modes d'écriture internationaux et les directions des documents.
Ajustez vos styles à partir de propriétés physiques vers des styles logiques tels que padding-inline, margin-inline et inset-inline. Le navigateur se charge maintenant du travail d'ajustement.
button {
padding-inline: 2ch;
padding-block: 1ch;
}
article > p {
text-align: start;
margin-block: 2ch;
}
.something::before {
inset-inline: auto 0;
}