Her kullanıcı arabirimi geliştiricisinin 2024'te bilmesi gereken 5 CSS snippet'i

Hemen kullanabileceğiniz, araç çantanıza ekleyebileceğiniz güçlü ve kararlı CSS.

Adam Argyle

Her ön uç geliştiricinin, :has()'ün "üst öğe seçici"den daha fazlası olduğunu, subgrid'ün nasıl ve neden kullanıldığını, yerleşik CSS söz dizimini kullanarak nasıl iç içe yerleştirileceğini, tarayıcıda başlık metninin sarmalanması dengesini nasıl ayarlayacağını ve kapsayıcı sorgu birimlerini nasıl kullanacağını bilmesi gerektiğini düşünüyorum.

Bu gönderi, geçen yıl yayınlanan "Her ön uç geliştiricinin 2023'te bilmesi gereken 6 CSS snippet'i" makalesinin devamı niteliğindedir.

CSS:has(.potential-beyond-being-a-parent-selector)

:has()

Tarayıcı desteği

• 105
• 105
• 121
• 15.4

Kaynak

:has(), 2023'ün sonunda tüm büyük tarayıcılarda kullanıma sunuldu. Bu yeni seçici küçük ve masum görünse de sunduğu tüm kullanım alanlarına şaşıracaksınız: oyunlar, reaktiflik, içeriğe duyarlı düzen, akıllı bileşenler ve Jhey'in bu makalesinde ayrıntılı olarak ele alınan çok daha fazlası.

:has()'ü ebeveyn seçici olarak kullanmaya dair birkaç örnek aşağıda verilmiştir. Bu ad, genellikle bir seçicinin öznesi sonda olduğu için verilmiştir (ör. ul li, burada li öznedir ve stilleri alır). :has() ile seçicinin başındaki öğe konu olabilir. Aşağıdaki örnekte, içinde .icon sınıfına sahip bir öğe varsa düğmede boşluk bulunur. Kartın içinde resim varsa kartın yönü değişir.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

Uzun zamandır istenen bir seçici, bir düzeni kaç öğe içerdiğine göre değiştirmek. Bu işlem artık :has() ile yapılabilir. :has(), alt öğe sayısını sorgularken kapsayıcıyı özne olarak tutabilir.

main:has(> :nth-child(5)) {…}

Üst düzey bir örnek daha: Sayfadaki belirli bir onay kutusu etkinleştirildiğinde belgenin tamamında ayarlanan stilleri değiştirme:

html:has(#dark-mode:checked) {…}

Bunlar, seçicinin nesnesini değiştirmeyen basit kullanım alanlarıdır. Yalnızca bu tür örneklere bakarsanız :has()'ün üst öğe seçici olmakla sınırlı olduğunu düşünebilirsiniz. Ancak aşağıdaki örnekleri göz önünde bulundurun. Bunlar, ortak bir ataya dayalı bir öğeyi kontrol eder ve ardından seçiciyi sayfanın daha derin bir yerindeki bir alt öğeye döndürür.

Bu örnekte, girişlerinden herhangi biri geçersizse bir form hatası öğesi gösterilmektedir:

form:has(:user-invalid) .error {
  display: block;
}

Bu, kenar çubuğu .--is-open sınıfına sahip olduğunda ana içerik alanını dışarı kaydırır:

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

Dikey veya yatay yönde 1-12 öğeyi şık bir şekilde gösterebilen bir ızgara düzeni oluşturmak için üst öğe seçici olarak :has(), miktar sorgularıyla :has() ve kapsayıcı sorgularını kullanan eğlenceli bir demoyu aşağıda bulabilirsiniz:

Codepen'de deneyin

Alt ızgara oluşturma

subgrid

Tarayıcı desteği

• 117
• 117
• 71
• 16

Kaynak

Ön uç web topluluğu, popüler ve güçlü CSS ızgara düzeni motorunu tamamlamak için uzun yıllardır alt ızgara isteğinde bulunuyordu. Bu özellik artık üç büyük arama motorunda da kullanılabilir.

Genel bakış için alt ızgara hakkında daha fazla bilgiyi burada bulabilirsiniz.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

CSS'yi iç içe yerleştirme

nesting

Tarayıcı desteği

• 120
• 120
• 117
• 17.2

Kaynak

Yerleşik CSS iç içe yerleştirme özelliği 2023'te tüm büyük tarayıcılarda kullanıma sunulmuştur. Hatta web sitemi, iç içe yerleştirmeyi derleyen derleme sürecini kaldıracak şekilde güncelledim ve artık daha küçük bir stil sayfası gönderiyorum. Evet, iç içe yerleştirilmiş stiller daha küçüktür ve tüm tarayıcı geliştirme araçları bunları temsil etmeye hazırdır.

Tüm ayrıntılar için CSS iç içe yerleştirme sözdizimine genel bir bakış bulabilirsiniz. Aşağıdaki kod örneğinde 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;
  }
}

Başlıkların dengesini tarayıcının belirlemesine izin verin

balance

Tarayıcı desteği

• 114
• 114
• 121
• 17,5

Kaynak

pretty

Tarayıcı desteği

• 117
• 117
• x
• x

Kaynak

text-wrap: balance olmadan geliştiriciler ve metin yazarları, satır sonu ipuçlarına (ör. <wbr> öğeleri veya ­) başvurmak zorunda kalır. Bu genellikle kaybedilen bir savaştır çünkü içerik çevrilir, yakınlaştırılır veya herhangi bir şekilde değiştirilir almaz bu sarmalama ipuçlarının içeriğin yeni sunumunda doğru yerde olacağı garanti edilmez.

Dengeli metin sarmalama özelliğiyle bu işi tarayıcıya bırakabilirsiniz. Karşılaştırmayı aşağıdaki Codepen'de görebilirsiniz.

Kapsayıcı sorgu birimlerini kullanma

cqw

Tarayıcı desteği

• 105
• 105
• 110
• 16

Kaynak

Geçen yılki yayında, her ön uç geliştiricinin kapsayıcı sorgusu yazmayı bilmesi gerektiği belirtilmişti. Henüz kullanmaya başlamadıysanız 2024'ü bu adımı atacağınız yıl yapın ve kapsayıcı sorgu birimlerine de göz atın. Genel bakış için Ahmad Shadeed'in 2021'de container sorgu birimleri hakkında yazdığı mükemmel makaleyi inceleyebilirsiniz.

Altı yeni kontainer sorgu birimi vardır:

1. Satır içi bir varyant cqi.
2. Genişlik varyantı cqw.
3. Bir blok varyantı cqb.
4. Bir yükseklik varyantı cqh.
5. cqmin değerinden küçük olan uzunluk için bir varyant.
6. Hangisi daha uzunsa cqmax için bir varyant.

Bir kapsayıcıya göreli ve içsel animasyonlar içeren bir senaryo düşünün. 100cqi (kapsayıcının satır içi boyutunun% 100'ü) kullanılarak kapsayıcısından tamamen dışarı kayan bir alt öğe.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

Burada, kapsayıcıya duyarlı yazı tipine ve kapsayıcının yönüne uyum sağlayan bir resme (yön yataysa yarı yarıya küçülen) sahip bir kart gösterilmektedir.

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

Bu birimler sizin için yeniyse 2024'te kullanabileceğiniz tüm birimleri incelemek iyi bir fikir olabilir.