Hemen kullanabileceğiniz değerli, güçlü ve kararlı CSS.
Her kullanıcı arabirimi geliştiricisinin container sorgularını kullanmayı, kaydırma tutturma deneyimi oluşturmayı, ızgara ileposition: absolute önlemeyi, hızlıca daire çizmeyi, basamakla katmanlarını kullanmayı ve mantıksal özellikler aracılığıyla daha azla daha çok hedefe ulaşmayı bilmesi gerektiğini düşünüyorum. Bu beklentilerin her birine
genel hatlarıyla bakalım.
1. Kapsayıcı sorgusu
10 yıldır en çok talep edilen CSS özelliği, tüm tarayıcılarda kararlıdır ve 2023'te genişlik sorguları için kullanılabilir.
.panel {
container: layers-panel / inline-size;
}
.card {
padding: 1rem;
}
@container layers-panel (min-width: 20rem) {
.card {
padding: 2rem;
}
}
2. Kaydırarak tutturma
İyi düzenlenmiş kaydırma deneyimleri, deneyiminizi diğerlerinden ayırır ve kaydırma hareketi, anlamlı duraklama noktaları sağlarken sistem kaydırma kullanıcı deneyimini eşleştirmenin mükemmel 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-typescroll-snap-alignscroll-snap-stopoverscroll-behavior3. Izgara yığını
Tek hücreli CSS ızgarasıyla mutlak konum kullanmaktan kaçının. Birbirlerinin üzerine yerleştirildikten sonra, bunları konumlandırmak için iki yana yasla ve hizala özelliklerini kullanın.
.pile {
display: grid;
place-content: center;
}
.pile > * {
grid-area: 1/1;
}
grid4. Hızlı daire
CSS'de çevre oluşturmanın birçok yolu vardır, ancak kesinlikle en küçük olanı budur.
.circle {
inline-size: 25ch;
aspect-ratio: 1;
border-radius: 50%;
}
aspect-ratio5. @layer ile değişkenleri kontrol edin
Basamaklı katmanlar, daha sonra keşfedilen veya oluşturulan varyantları orijinal varyant grubuyla şelalede doğru yere eklemeye yardımcı olabilir.
/* file buttons.css */
@layer components.buttons {
.btn.primary {
…
}
}
Ardından, rastgele bir zamanda yüklenen tamamen farklı bir dosyada, düğme katmanına, bu süre boyunca geri kalan kişilerle birlikte varmış gibi yeni bir varyant ekleyin.
/* file video-player.css */
@layer components.buttons {
.btn.player-icon {
…
}
}
@layer6. Mantıksal özelliklerle daha az hatırlayın, daha çok kişiye ulaşın
Bu yeni kutu modelini aklınızda bulundurun. Uluslararası yazı modları ve belge yol tarifleri için sol ve sağ dolguyu ya da kenar boşluğunu değiştirme konusunda hiçbir zaman endişelenmeniz gerekmez.
Stillerinizi fiziksel özelliklerden padding-inline, margin-inline ve inset-inline gibi mantıksal özelliklere göre ayarladığınızda artık ayarlama işini 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;
}