Hemen kullanabileceğiniz değerli, güçlü ve kararlı CSS.
Her kullanıcı arabirimi geliştiricisinin :has() öğesinin bir "üst seçiciden" daha fazlasını, subgrid öğesinin nasıl ve neden olduğunu, yerleşik CSS söz dizimiyle nasıl iç içe yerleştirileceğini, tarayıcının başlık metin sarmalamayı nasıl dengeleyeceğini ve kapsayıcı sorgu birimlerini nasıl kullanacağını bilmesi gerektiğini düşünüyorum.
Bu yayın, her kullanıcı arabirimi geliştiricinin 2023'te bilmesi gereken, geçen yılki 6 CSS snippet'inin devamıdır.
CSS:has(.potential-beyond-being-a-parent-selector)
:has()
:has(), 2023'ün sonunda tüm önemli tarayıcılarda kullanıma sunuldu. Bu yeni seçici küçük ve masum görünse de kilidini açabileceği tüm kullanım alanlarına şaşıracaksınız:
oyunlar, tepkiler, içeriğe duyarlı düzen,
akıllı bileşenler ve Jhey'in bu makalesinde ayrıntılı olarak açıklanan çok daha fazlası.
:has() öğesinin üst seçici olarak kullanılmasına ilişkin birkaç örneği burada bulabilirsiniz. Bu adı almamızın nedeni, genellikle bir seçicinin
konusu sonda olmasıdır. Örneğin, ul li burada li konudur ve stilleri alır. :has() kullanıldığında, seçicinin başlangıcındaki öğe konu haline gelebilir. Aşağıdaki örnekte, içinde .icon sınıfına sahip bir öğe varsa düğmede boşluk vardır. İçinde resim varsa kartın yönü değişir.
button:has(.icon) {
gap: 1ch;
}
.card:has(img) {
grid-auto-flow: row;
}
Uzun süredir istenen bir seçici, bir düzeni sahip olduğu öğe sayısına göre değiştirmektir. Bu özellik, alt öğe sayısını sorgularken kapsayıcıyı konu olarak koruyabildiği için :has() ile artık bu mümkündür.
main:has(> :nth-child(5)) {…}
Üst düzey bir başka örnek ise, sayfada belirli bir onay kutusu etkinleştirildiğinde dokümanın tamamında ayarlanan stilleri değiştirin:
html:has(#dark-mode:checked) {…}
Bunlar, seçicinin konusunu değiştirmeyen basit kullanım durumlarıdır. Sadece bunun gibi örneklere bakarsanız :has() yalnızca bir üst seçici olmakla sınırlı olduğunu düşünebilirsiniz. Yine de aşağıdaki örnekleri
göz önünde bulundurun. Bunlar ortak bir ataya dayanarak bir şeyi kontrol eder, ardından seçiciyi sayfanın daha alt kısımlarında bir yerde bulunan alt öğe için döndürür.
Bu öğe, girişlerinden herhangi biri geçersizse bir form hatası öğesini gösterir:
form:has(:user-invalid) .error {
display: block;
}
Bu, bir kenar gezinme çubuğunun .--is-open sınıfına sahip olduğu durumlarda ana içerik alanını dışarı kaydırır:
html:has(#sidenav.--is-open) main {
translate: -320px;
}
Burada, üst seçici olarak :has(), miktar sorguları için :has() ve 1-12 öğeyi dikey veya yatay yönlerde zarif bir şekilde gösterebilen bir ızgara düzeni oluşturmak için kapsayıcı sorguları kullanan eğlenceli bir demoyu görebilirsiniz:
Alt ızgara oluşturma
subgrid
Kullanıcı arabirimi web topluluğu, yıllar boyunca çok popüler ve güçlü CSS ızgara düzeni motorunu tamamlamak ve tamamlamak için alt ızgaradan yardım istedi. Artık üç ana motorda da kullanılabiliyor.
Genel bakış istiyorsanız alt ızgara hakkında daha fazla bilgi edinin.
body {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));
> article {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
}
}
CSS ile iç içe yerleştirme
nesting
Yerleşik CSS iç içe yerleştirme özelliği, 2023'ten itibaren önde gelen tüm tarayıcılarda kullanıma sunulmuştur. Hatta web sitemi, iç içe yerleştirmede derlenen derleme işlemini kaldıracak şekilde güncelledim ve şimdi daha küçük bir stil sayfası gönderiyorum. Evet, iç içe yerleştirilmiş stil sayfaları daha küçüktür ve tüm tarayıcı geliştirici araçları onu temsil etmeye hazırdır.
Tüm ayrıntılar için CSS iç içe yerleştirme söz dizimine genel bakışı burada bulabilirsiniz. Aşağıdaki kod örneğinde bir söz dizimi örneği gösterilmektedir.
.you {
.can-totally-ship-this {
&.if-you-wanted {
/* it's VERY MUCH like SCSS */
&:is(:hover, :focus-visible) {
/* put a bird on it */
}
}
}
}
.for-theming {
@media (prefers-color-scheme: dark) {
/* you can nest media queries */
}
}
/* or for theming with [data-theme="dark"] */
.button {
background: black;
color: white;
/* nest and do more than just append, flip it and reverse it */
[data-theme="dark"] & {
background: white;
color: black;
}
}
Tarayıcının başlıkları dengelemesine izin verin
balance
pretty
text-wrap: balance kullanılmadığında, geliştiriciler ve metin yazarları <wbr> öğeleri veya ­ gibi ara ipuçlarını satır oluşturmak zorunda kalır. Bu çoğunlukla kaybeden bir savaştır, çünkü içerik çevrildiğinde, yakınlaştırıldığında veya herhangi bir şekilde değiştirildiğinde, bu sarmalama ipuçlarının içeriğin yeni sunumu için doğru yerde olacağının garantisi yoktur.
Dengeli metin kaydırma özelliğiyle bu işi tarayıcıya bırakabilirsiniz. Bir karşılaştırmayı aşağıdaki Codepen'de görebilirsiniz.
Kapsayıcı sorgu birimlerini kullan
cqw
Geçen yılın yayınında, her kullanıcı arabirimi geliştiricisinin container sorgusu yazmayı bilmesi gerektiğini belirtmiştik. Henüz öğrenmediyseniz 2024'ü hızlı bir başlangıç yapmak için kullanın ve container sorgu birimlerine de göz atın. Genel bir bakış sağlamak için 2021'de Ahmad Shadeed, container sorgu birimleri hakkında mükemmel bir makale yazmıştır.
Altı yeni elişim kılamı birimi kullanıma sunulmuştur:
- Satır içi varyant:
cqi. - Genişlik varyantı
cqw. - Engelleme varyantı
cqb. - Yükseklik varyantı:
cqh. cqmindeğerinden küçük olan uzunluk için bir varyant.cqmaxdaha büyük olan uzunluk için bir varyant.
Kapsayıcıdaki göreceli ve içsel animasyonlara ilişkin bir senaryo düşünün. 100cqi kullanarak kapsayıcısından tamamen kaydırılan bir alt öğe (bu, container satır içi boyutunun% 100'üne karşılık gelir).
@keyframes slide-out-of-container {
to {
translate: -100cqi;
}
}
Burada, container duyarlı tipografisine sahip bir kart ve kapsayıcının yönüne uyum sağlayan ve yön yatay olduğunda boyutun yarısına ulaşan bir resim gösterilmektedir.
.card {
:is(h2,h3) {
font-size: clamp(1.5rem, 5cqi, 4rem);
}
img {
inline-size: 100cqi;
@container (orientation: landscape) {
inline-size: 50cqi;
}
}
}
Bu birimleri kullanmaya yeni başladıysanız 2024'te kullanımınıza sunulan tüm birimleri incelemek iyi bir fikir olabilir.