Utilisez le CSS digne de ce nom, performant et stable.
Je pense que tout développeur front-end devrait savoir utiliser les
requêtes,
créer un cliché de défilement, évitez
position: absolute
avec
grille,
marteler rapidement un cercle, utiliser une séquence en cascade
couches,
et d'élargir votre couverture avec moins via logique
propriétés. Voici un bref aperçu
un aperçu de chacune
de ces attentes.
1. Une requête de conteneur
La fonctionnalité CSS la plus demandée depuis 10 ans est désormais stable sur tous les navigateurs et mise à votre disposition 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;
}
}
@container
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
container
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
2. Aligner sur défilement
Des expériences de défilement bien orchestrées permettent à votre expérience de se démarquer des autres. et faire défiler Snap est la un moyen idéal de faire correspondre l'expérience utilisateur de défilement du système tout en offrant un arrêt significatif points.
.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 Collection Codepen d'environ 25 démonstrations.
scroll-snap-type
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
scroll-snap-align
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
scroll-snap-stop
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
overscroll-behavior
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
3. Pile de grille
Évitez les valeurs absolues de position avec une grille CSS à une seule cellule. Une fois qu'ils sont empilés les uns des autres, utilisez la fonction et alignez les propriétés pour les positionner.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
4. Cercle rapide
Il existe de nombreuses façons de créer des cercles en CSS, minimale.
.circle { inline-size: 25ch; aspect-ratio: 1; border-radius: 50%; }
aspect-ratio
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
5. Contrôler les variantes avec @layer
Cascade des couches permet d'insérer des variantes découvertes ou créées plus tard, au bon endroit dans la cascade l'ensemble d'origine de variantes.
/* 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 s'il était présent avec les autres éléments, tout le temps.
/* file video-player.css */ @layer components.buttons { .btn.player-icon { … } }
@layer
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
6. Mémorisez moins et touchez davantage avec des propriétés logiques
Mémoriser ce nouveau modèle de boîte
et vous n'avez plus à vous soucier
modification de la marge intérieure ou gauche pour l'écriture internationale
modes
document
un itinéraire.
Ajustez vos styles en remplaçant les propriétés physiques par des styles logiques, comme
padding-inline
,
margin-inline
,
inset-inline
,
et le navigateur se charge des réglages.
button { padding-inline: 2ch; padding-block: 1ch; } article > p { text-align: start; margin-block: 2ch; } .something::before { inset-inline: auto 0; }
padding-inline
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
margin-block
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
inset-inline
Navigateurs pris en charge
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">