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 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">

Source

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">

Source

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">

Source

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">

Source

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">

Source

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">

Source

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">

Source

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">

Source

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">

Source

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">

Source

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">

Source

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">

Source