Cette page a été traduite par l'API Cloud Translation.

6 extraits CSS que tout développeur front-end devrait connaître en 2023

CSS puissant et stable, à utiliser dès aujourd'hui.

Adam Argyle

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;
  }
}

@container

Navigateurs pris en charge

Source

container

Navigateurs pris en charge

Source

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

Navigateurs pris en charge

Source

scroll-snap-align

Navigateurs pris en charge

Source

scroll-snap-stop

Navigateurs pris en charge

Source

overscroll-behavior

Navigateurs pris en charge

Source

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

Navigateurs pris en charge

Source

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

Navigateurs pris en charge

Source

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

Navigateurs pris en charge

Source

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;
}

padding-inline

Navigateurs pris en charge

Source

margin-block

Navigateurs pris en charge

Source

inset-inline

Navigateurs pris en charge

Source