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.

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.

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

Tarayıcı desteği

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Kaynak

container

Tarayıcı desteği

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

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 demo içeren bu devasa ve ilham verici Codepen koleksiyonunda bu CSS özelliğinin potansiyeli hakkında daha fazla bilgi edinin.

scroll-snap-type

Tarayıcı desteği

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 99.
  • Safari: 11.

Kaynak

scroll-snap-align

Tarayıcı desteği

  • Chrome: 69.
  • Edge: 79.
  • Firefox: 68.
  • Safari: 11.

Kaynak

scroll-snap-stop

Tarayıcı desteği

  • Chrome: 75.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 15.

Kaynak

overscroll-behavior

Tarayıcı desteği

  • Chrome: 63.
  • Edge: 18.
  • Firefox: 59.
  • Safari: 16.

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

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

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

  • Chrome: 88.
  • Edge: 88.
  • Firefox: 89.
  • Safari: 15.

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

Tarayıcı desteği

  • Chrome: 99.
  • Edge: 99.
  • Firefox: 97.
  • Safari: 15.4.

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ı yapacaktır.

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

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Kaynak

margin-block

Tarayıcı desteği

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 66.
  • Safari: 14.1.

Kaynak

inset-inline

Tarayıcı desteği

  • Chrome: 87.
  • Edge: 87.
  • Firefox: 63.
  • Safari: 14.1.

Kaynak