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

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

Bugün kullanabileceğiniz kıymetli, güçlü ve sağlam CSS.

Adam Argyle

Her ön uç geliştiricinin, container'ın sorguları bir kaydırma tutturma deneyimi oluşturun, position: absolute ızgara, hızlıca bir daire çizin, scade'ı kullanın katmanlar, ve mantıksal bağlantı yoluyla daha azla daha çok kişiye ulaşın özellikler. İşte hızlı bir genel hatlarıyla ortaya koyar.

1. Kapsayıcı sorgusu

10 yıldır en çok talep edilen CSS özelliği artık tüm tarayıcılarda sorunsuz şekilde çalışır 2023'teki genişlik sorgularının sayısı.

.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ırma hizalaması

İyi düzenlenmiş kaydırma deneyimleriyle deneyiminizi diğerlerinden ayırabilirsiniz. ve kaydırma enstantane hem sistem kaydırma deneyimini eşleştirmenin hem de anlamlı bir durdurma işlemi sunmanın mükemmel yoludur. puan.

.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 büyük ve ilham verici makalede, bu CSS özelliğinin potansiyeli hakkında daha fazla bilgi edinebilirsiniz. 25 demodan oluşan codepen koleksiyonu.

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ında mutlak konum belirlemekten kaçının. Üst kısımda kısıldıktan sonra iki taraflı bir kitle oluşturmak için iki yana yaslama ve özellikleri konumlandıracak şekilde hizalayın.

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

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

grid

Tarayıcı Desteği

Kaynak

4. Hızlı çevre

CSS'de çevre oluşturmanın pek çok yolu olsa da kesinlikle en iyisi bu çok önemlidir.

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

aspect-ratio

Tarayıcı Desteği

Kaynak

5. @layer ile kontrol varyantları

Cascade katmanlar varyant eklemeye yardımcı olabilir daha sonra keşfedilen veya oluşturulan içerikleri şelalede doğru yere orijinal varyant grubudur.

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

Ardından, başka bir rastgele zamanda yüklenen tamamen farklı bir dosyaya sanki geri kalan kısmıyla birlikte oradaymış gibi düğme katmanına devam edebilir.

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

@layer

Tarayıcı Desteği

Kaynak

6. Mantıksal özelliklerle daha az ezberleyin, daha çok erişin

Bu yeni kutu modelini ezberleyin ve şu konularda endişelenmeniz gerekmez. uluslararası yazım için sol ve sağ dolguyu veya kenar boşluğunu değiştirme modlar ve doküman tekrar yol tarifi verin. Fiziksel özelliklerden aşağıdaki gibi mantıksal stillere padding-inline margin-inline, inset-inline, Tarayıcı ayarlama işini 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