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.
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;
}
}
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
scroll-snap-align
scroll-snap-stop
overscroll-behavior
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
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
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
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; }