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 kararlı 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

Tarayıcı desteği

Kaynak

container

Tarayıcı desteği

Kaynak

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 demodan oluşan bu büyük ve ilham verici Codepen koleksiyonunda bu CSS özelliğinin potansiyeli hakkında daha fazla bilgi edinin.

scroll-snap-type

Tarayıcı desteği

Kaynak

scroll-snap-align

Tarayıcı Desteği

Kaynak

scroll-snap-stop

Tarayıcı Desteği

Kaynak

overscroll-behavior

Tarayıcı desteği

Kaynak

3. Izgara yığın

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

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

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

grid

Tarayıcı desteği

Kaynak

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

Tarayıcı desteği

Kaynak

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, farklı bir zamanda yüklenen tamamen farklı bir dosyada, düğme katmanına yeni bir varyant ekleyin. Varyantı, bu süre boyunca geri kalanlarla birlikte oradaymış gibi yapın.

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

@layer

Tarayıcı Desteği

Kaynak

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

Tarayıcı desteği

Kaynak

margin-block

Tarayıcı Desteği

Kaynak

inset-inline

Tarayıcı desteği

Kaynak