Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

Un CSS puissant, stable et digne de votre boîte à outils que vous pouvez utiliser dès aujourd'hui.

Adam Argyle

Je pense que chaque développeur frontend devrait savoir comment utiliser les requêtes de conteneur, créer une expérience de alignement sur le défilement, éviter position: absolute avec grid, créer rapidement un cercle, utiliser les calques en cascade et toucher plus de monde avec moins de ressources grâce aux propriétés logiques. Voici un aperçu rapide 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 disponible 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

Browser Support

Source

container

Browser Support

Source

2. Scroll-snap

Les expériences de défilement bien orchestrées vous permettent de vous démarquer. Le scroll snap est le moyen idéal d'adapter l'UX 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 vaste et inspirante collection Codepen d'environ 25 démos.

scroll-snap-type

Browser Support

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

3. Pile en grille

Évitez le positionnement absolu avec une grille CSS à une seule cellule. Une fois les éléments empilés les uns sur les autres, utilisez les propriétés d'alignement et de justification pour les positionner.

.pile {
  display: grid;
  place-content: center;
}

.pile > * {
  grid-area: 1/1;
}

grid

Browser Support

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

Browser Support

Source

5. Contrôler les variantes avec @layer

Les calques en cascade peuvent aider à insérer les variantes découvertes ou créées ultérieurement au bon endroit dans la cascade avec l'ensemble de variantes 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 au calque du bouton comme si elle était là avec le reste depuis le début.

/* file video-player.css */
@layer components.buttons {
  .btn.player-icon {
    …
  }
}

@layer

Browser Support

Source

6. Mémorisez moins et atteignez plus avec les propriétés logiques

Mémorisez ce nouveau modèle de boîte et ne vous inquiétez plus de devoir modifier la marge intérieure ou extérieure à gauche et à droite pour les modes d'écriture et les sens de lecture internationaux. Passez des propriétés physiques à des propriétés logiques comme padding-inline, margin-inline et inset-inline, et le navigateur se chargera des ajustements.

button {
  padding-inline: 2ch;
  padding-block: 1ch;
}

article > p {
  text-align: start;
  margin-block: 2ch;
}

.something::before {
  inset-inline: auto 0;
}

padding-inline

Browser Support

Source

margin-block

Browser Support

Source

inset-inline

Browser Support

Source

6 extraits CSS que tout développeur front-end devrait connaître en 2023 Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

1. Requête de conteneur

2. Scroll-snap

3. Pile en grille

4. Cercle rapide

5. Contrôler les variantes avec @layer

6. Mémorisez moins et atteignez plus avec les propriétés logiques

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