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 kaydıracağını 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 sonda olmasıdır. Örneğin, ul li seçicisinde li konu olup stilleri alır. :has() ile seçicinin başındaki öğe özne 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 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ündür.

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() öğesinin üst seçici olarak kullanılabileceğini düşünebilirsiniz. Ancak aşağıdaki örnekleri göz önünde bulundurun. Bunlar, ortak bir üst öğeye dayalı olarak bir şeyi kontrol eder ve ardından seçiciyi sayfada daha derinde bir yerde 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 sidenav'ın .--is-open sınıfı olduğunda ana içerik alanını kaydırarak gösterir:

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

:has() öğesini üst seçici, :has() öğesini miktar sorgularıyla ve kapsayıcı sorgularıyla kullanarak 1-12 öğeyi dikey veya yatay yönlerde 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 motorunun tamamlanmasına 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 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 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.

Source

pretty

Browser Support

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

Source

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 boşuna bir çabadır.

Dengeli metin kaydırma sayesinde 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 başlamak için bir fırsat olarak değerlendirin ve kapsayıcı sorgu birimlerine de göz atın. Genel bir bakış olarak, Ahmad Shadeed 2021'de 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. Bir blok varyantı cqb.
  4. Yükseklik varyantı cqh.
  5. Hangi uzunluk daha kısaysa o uzunluğa ait bir varyant cqmin.
  6. Hangi uzunluk daha büyükse onun varyantı cqmax.

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

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

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

.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.