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

Bugün kullanabileceğiniz, güçlü ve kararlı CSS'ler.

Adam Argyle

Her ön uç geliştiricinin kapsayıcı sorgularını kullanmayı, kaydırma yakalama deneyimi oluşturmayı, grid ile position: absolute sorununu önlemeyi, hızlıca daire oluşturmayı, basamaklı katmanları kullanmayı ve mantıksal özellikler aracılığıyla daha az kaynakla daha fazla kullanıcıya ulaşmayı bilmesi gerektiğine inanıyorum. Bu beklentilerin her biriyle ilgili kısa bir genel bakış aşağıda verilmiştir.

1. Kapsayıcı sorgusu

10 yıldır en çok istenen CSS özelliği, tarayıcılarda artık kararlı ve 2023'te genişlik sorguları için kullanıma hazır.

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

.card {
  padding: 1rem;
}

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

Browser Support

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

Source

container

Browser Support

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

Source

2. Kaydırarak tutturma

İyi düzenlenmiş kaydırma deneyimleri, deneyiminizi diğerlerinden ayırır. Kaydırma yakalama, anlamlı durma noktaları sağlarken sistem kaydırma kullanıcı deneyimine uygun bir yöntemdir.

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

Bu CSS özelliğinin potansiyeli hakkında daha fazla bilgiyi yaklaşık 25 demodan oluşan bu büyük ve ilham verici Codepen koleksiyonunda bulabilirsiniz.

scroll-snap-type

Browser Support

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

Source

scroll-snap-align

Browser Support

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

Source

scroll-snap-stop

Browser Support

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

Source

overscroll-behavior

Browser Support

  • Chrome: 144.
  • Edge: 18.
  • Firefox: 150.
  • Safari: 16.

Source

3. Izgara yığını

Tek hücreli CSS ızgarasında mutlak konumlandırmadan kaçının. Öğeler üst üste yığıldıktan sonra konumlandırmak için justify ve align özelliklerini kullanın.

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

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

Browser Support

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

Source

4. Quick Circle

CSS'de daire oluşturmanın birçok yolu vardır ancak bu yöntem kesinlikle en az kodla yapılanıdır.

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

Browser Support

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

Source

5. @layer ile varyantları kontrol etme

Basamaklı katmanlar, daha sonra keşfedilen veya oluşturulan varyantların eklenmesine yardımcı olabilir. Bu varyantlar, orijinal varyant grubuyla birlikte basamakta doğru yere eklenir.

/* 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 birlikteymiş gibi yeni bir varyant ekleyin.

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

Browser Support

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

Source

6. Mantıksal özelliklerle daha az ezberleyin ve daha fazla kişiye ulaşın

Bu yeni kutu modelini ezberleyin. Böylece, uluslararası yazma modları ve belge yönleri için sol ve sağ dolguyu ya da kenar boşluğunu değiştirme konusunda bir daha endişelenmenize gerek kalmaz. Stillerinizi fiziksel özelliklerden mantıksal özelliklere (ör. padding-inline, margin-inline, inset-inline) göre ayarlayın. Tarayıcı, ayarlama işlemini 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

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

Source

margin-block

Browser Support

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

Source

inset-inline

Browser Support

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

Source