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

Bugün kullanabileceğiniz, güçlü ve kararlı CSS'ler.

Adam Argyle

Her ön uç geliştiricinin :has() öğesinin "üst seçiciden" daha fazlası olduğunu, subgrid öğesinin nasıl ve neden kullanıldığını, yerleşik CSS söz dizimiyle nasıl iç içe yerleştirileceğini, tarayıcının başlık metnini nasıl dengeleyeceğini ve kapsayıcı sorgu birimlerinin nasıl kullanılacağını bilmesi gerektiğini düşünüyorum.

Bu yayın, geçen yılki "Her ön uç geliştiricinin 2023'te bilmesi gereken 6 CSS snippet'i" başlıklı yayının devamıdır.

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

:has()

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Source

: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 kilidini açabileceği tüm kullanım alanlarına şaşıracaksınız: oyunlar, tepkisellik, içeriğe duyarlı düzen, akıllı bileşenler ve Jhey'in bu makalesinde ayrıntılı olarak ele alınan daha birçok özellik.

Her biri resim ve altyazı içeren 4 panel gösterilir. Her resimde, beynin giderek daha fazla beyin gücü kullandığı gösteriliyor. İlk panelde :has() ifadesi, ikinci panelde ise üst seçici olarak figure:has(caption) ifadesi yer alıyor. Üçüncü panel, .layout:has(> :nth-child(5)) ifadesini miktar seçici olarak kullanıyor. Dördüncü panelde, koşullu konu değiştirme seçicisi olarak html:has(#checked) .new-subject ifadesi yer alıyor.

:has() öğesini üst seçici olarak kullanmayla ilgili birkaç örneği aşağıda bulabilirsiniz. Bu adın verilmesinin nedeni, genellikle seçicinin konusunun sonunda yer almasıdır. Örneğin, ul li ifadesinde li, konu olup stilleri alır. :has() ile seçicinin başındaki öğe konu olabilir. Aşağıdaki örnekte, düğmenin içinde .icon sınıfına sahip bir öğe varsa düğmede boşluk oluşur. 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 süredir istenen bir seçici, düzeni içerdiği öğe sayısına göre değiştirmektir. :has(), çocuk sayısını sorgularken kapsayıcıyı özne olarak tutabildiğinden bu artık mümkün.

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

Daha üst düzey bir örnek olarak, sayfadaki belirli bir onay kutusu etkinleştirildiğinde belgenin tamamında ayarlanan stilleri değiştirme:

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

Bunlar, seçicinin konusunu değiştirmeyen basit kullanım alanlarıdır. Yalnızca bu gibi örneklere bakarsanız :has()'nın üst seçici olarak kullanılabileceğini düşünebilirsiniz. Ancak aşağıdaki örnekleri inceleyin. Bu seçiciler, ortak bir ataya dayalı olarak bir öğeyi kontrol eder ve ardından seçiciyi sayfada daha derinde bulunan bir alt öğeye yönlendirir.

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

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

Bu, bir kenar gezinme çubuğunda .--is-open sınıfı olduğunda ana içerik alanını kaydırarak açar:

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

:has() öğesini üst seçici, :has() öğesini miktar sorgularıyla ve kapsayıcı sorgularıyla kullanarak dikey veya yatay yönlerde 1-12 öğeyi zarif bir şekilde görüntüleyebilen bir ızgara düzeni oluşturmak için eğlenceli bir demo:

Codepen'de deneyin

Alt kılavuz oluşturma

subgrid

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 16.

Source

Uzun yıllar boyunca ön uç web topluluğu, son derece popüler ve güçlü CSS ızgara düzeni motorunu tamamlamaya yardımcı olması için alt ızgara istedi. Bu özellik artık üç büyük motorda 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 yoluyla iç içe yerleştirme

nesting

Browser Support

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Source

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

Tüm ayrıntılar için CSS iç içe yerleştirme söz dizimine buradan göz atabilirsiniz. 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 ver

balance

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 121.
  • Safari: 17.5.

pretty

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: not supported.
  • Safari: 26.

text-wrap: balance olmadan geliştiriciler ve metin yazarları, <wbr> öğeleri veya &shy; gibi satır sonu ipuçlarını kullanmak zorunda kalır. İçerik çevrilir, yakınlaştırılır veya herhangi bir şekilde değiştirilirse bu sarmalama ipuçlarının içeriğin yeni sunumunda doğru yerde olacağı garanti edilmediğinden bu genellikle kaybedilen bir savaştır.

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

Container sorgu birimlerini kullanma

cqw

Browser Support

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 16.

Source

Geçen yılki gönderide, her ön uç geliştiricinin kapsayıcı sorgusu yazmayı bilmesi gerektiği belirtilmişti. Henüz öğrenmediyseniz 2024'ü bu işe girişmek için bir fırsat olarak değerlendirin ve kapsayıcı sorgu birimlerine de göz atın. Genel bir bakış olarak, 2021'de Ahmad Shadeed, kapsayıcı sorgu birimleri hakkında harika bir makale yazdı.

Altı yeni container query birimi vardır:

  1. Satır içi varyant cqi.
  2. Genişlik varyantı cqw.
  3. Blok varyantı cqb.
  4. Yükseklik varyantı cqh.
  5. Hangi uzunluk daha kısaysa onun varyantı cqmin.
  6. Hangi uzunluk daha büyükse onun varyantı cqmax.

Bir kapsayıcıya göre ve kapsayıcıya özgü animasyonlar için bir senaryo düşünün. Kapsayıcı içi boyutun% 100'ü olan 100cqi kullanılarak kapsayıcısından tamamen kaydırılan bir alt öğe.

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

İşte kapsayıcıya duyarlı tipografiye sahip bir kart ve kapsayıcının yönüne uyum sağlayan, yön yatay olduğunda boyutunun yarısına düşen bir resim.

.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 incelemeniz iyi bir fikir olabilir.