Bugün kullanabileceğiniz kıymetli, güçlü ve sağlam CSS.
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;
}
}
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;
}
scroll-snap-type
scroll-snap-align
scroll-snap-stop
overscroll-behavior
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
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
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
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; }