Bu sayfa, Cloud Translation API ile çevrilmiştir.

Her kullanıcı arabirimi geliştiricisinin 2023'te bilmesi gereken 6 CSS snippet'i

Hemen kullanabileceğiniz, araç çantanıza ekleyebileceğiniz güçlü ve kararlı CSS.

Adam Argyle

Her ön uç geliştiricinin kapsayıcı sorgularını nasıl kullanacağını, kaydırma anında sabitleme deneyimi oluşturacağını, ızgara ile position: absolute kullanmaktan kaçınacağını, hızlıca bir daire oluşturacağını, düşey katman kullanacağını ve mantıksal özellikler aracılığıyla daha azıyla daha fazlasına ulaşacağını bilmesi gerektiğini düşünüyorum. Aşağıda bu beklentilerin her birine kısaca göz atabilirsiniz.

1. Bir kapsayıcı sorgusu

10 yıldır en çok istenen CSS özelliği artık tarayıcılarda istikrarlı ve 2023'te genişlik sorguları için kullanabileceğiniz durumda.

.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. Kaydırmayla hizalama

İyi düzenlenmiş kaydırma deneyimleri, deneyiminizi diğerlerinden ayırır. Kaydırma anında durma, anlamlı durak noktaları sağlarken sistem kaydırma kullanıcı deneyimini eşleştirmenin mükemmel bir yoludur.

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

Yaklaşık 25 demo içeren bu devasa ve ilham verici Codepen koleksiyonunda bu CSS özelliğinin potansiyeli hakkında daha fazla bilgi edinin.

scroll-snap-type

Browser Support

Source

scroll-snap-align

Browser Support

Source

scroll-snap-stop

Browser Support

Source

overscroll-behavior

Browser Support

Source

3. Izgara yığın

Tek hücreli CSS ızgarasıyla mutlak konumlandırmadan kaçının. Birbirinin üzerine yığıldıktan sonra, hizalama özelliklerini kullanarak bunları konumlandırın.

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

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

grid

Browser Support

Source

4. Hızlı daire

CSS'de daire oluşturmanın birçok yolu vardır ancak bu kesinlikle en minimal olanıdır.

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

aspect-ratio

Browser Support

Source

5. @layer ile varyantları kontrol etme

Dizi katmanları, daha sonra keşfedilen veya oluşturulan varyantları orijinal varyant grubuyla birlikte ardışık düzendeki doğru yere eklemenize yardımcı olabilir.

/* file buttons.css */
@layer components.buttons {
  .btn.primary {
    …
  }
}

Ardından, tamamen farklı bir dosyada, rastgele bir zamanda yüklenen düğme katmanına, tüm bu süre boyunca diğerleriyle birlikte varmış gibi yeni bir varyant ekleyin.

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

@layer

Browser Support

Source

6. Mantıksal özelliklerle daha az ezberleyin ve daha fazlasına ulaşın

Bu tek yeni kutu modelini ezberleyin. Böylece, uluslararası yazım modları ve belge yönleri için sol ve sağ dolgu veya kenar boşluğunu değiştirmek konusunda endişelenmenize gerek kalmaz. Stillerinizi fiziksel özelliklerden padding-inline, margin-inline, inset-inline gibi mantıksal özelliklere ayarlayın. Artık ayarlama işlemini tarayıcı yapar.

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