Utilisez le CSS digne de ce nom, performant et stable.
Je pense que tous les développeurs front-end devraient savoir utiliser les requêtes de conteneur, créer une expérience de calage de défilement, éviter position: absolute
avec une grille, marteler rapidement un cercle, utiliser des couches en cascade et toucher plus d'utilisateurs avec moins grâce aux 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. Aligner sur défilement
Des expériences de défilement bien orchestrées permettent de différencier votre expérience des autres. De plus, le défilement de défilement est le moyen idéal de faire correspondre l'expérience utilisateur 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émorisez moins et touchez plus grâce à des 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;
}