6 CSS snippets every front-end developer should know in 2023

[ayugioh2003]

網址

• https://web.dev/6-css-snippets-every-front-end-developer-should-know-in-2023/

記錄原因

這六個語法感覺有機會可以用看看了

A container query

.panel {
  container: layers-panel / inline-size;
}

.card {
  padding: 1rem;
}

@container layers-panel (min-width: 20rem) {
  .card {
    padding: 2rem;
  }
}

Scroll snap

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

Grid pile 垂直水平置中

Quick circle

.circle {
  inline-size: 25ch;
  aspect-ratio: 1;
  border-radius: 50%;
}

Control variants with @layer

Memorize less and reach more with logical properties

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

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

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

觀念

學習點

相關資料