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

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

Utilisez le CSS digne de ce nom, performant et stable.

Adam Argyle

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

@container

Navigateurs pris en charge

Source

container

Navigateurs pris en charge

Source

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

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

padding-inline

Navigateurs pris en charge

Source

margin-block

Navigateurs pris en charge

Source

inset-inline

Navigateurs pris en charge

Source