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

Bugün kullanabileceğiniz kıymetli, güçlü ve sağlam CSS.

Her kullanıcı arabirimi geliştiricisinin, :has() ürününün bir "üst seçiciden" çok daha fazlasını bilmesi gerektiğini düşünüyorum. bir subgrid nasıl ve neden, yerleşik CSS söz dizimiyle nasıl iç içe geçilir, başlık metni kaydırma ve kapsayıcı sorgu birimlerinin nasıl kullanıldığı gibi konuları ele aldık.

Bu gönderi, her kullanıcı arabirimi geliştiricilerin 2023'te bilmesi gereken geçen yılın 6 CSS snippet'i.

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

:has(), 2023'ün sonunda tüm büyük tarayıcılarda kullanıma sunuldu. Bu yeni seçici görünüyor küçük ve masum bir araç olarak görebilirsiniz. Ancak aşağıdaki kullanım alanlarına karşı sizi şaşırtabilir: oyun, reaktiflik, içeriğe duyarlı düzen, akıllı bileşenler ve daha fazla bilgi edinip bunu Jhey'in bu makalesinde bulabilirsiniz.

:has() öğesini üst seçici olarak kullanmaya ilişkin birkaç örneği burada bulabilirsiniz. Bu ismi aldığı için genellikle bir seçicinin konusu sondadır. Örneğin ul li, li öznedir. ve stilleri alıyor. :has() ile, seçicinin başındaki öğe çok önemlidir. Aşağıdaki örnekte, düğmenin içinde bir öğe varsa düğmede boşluk vardır .icon sınıfında. İçinde bir resim varsa kartın yönü değişir.

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

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

Bir düzeni, sahip olduğu öğe sayısına göre değiştirmek, uzun süredir tercih edilen bir seçicidir. Bu artık mümkün :has() ile değiştirin. Çünkü alt öğe sayısını sorgularken kapsayıcıyı konu olarak tutabilir.

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

Başka bir üst düzey örnek: Dokümanın tamamında ayarlanan stilleri değiştirme sayfadaki belirli bir onay kutusu etkinleştirildiğinde:

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

Bunlar, örneklere bakarsanız seçicinin konusunu değiştirmeyen basit kullanım alanlarıdır Bunun gibi durumlarda :has() yalnızca ebeveyn seçici olarak kullanılabilir. Aşağıdakileri göz önünde bulundurun bazı örnekler vardır. Bunlar, ortak bir üst öğeye dayanan bir şeyi kontrol eder ve ardından seçiciyi sayfada daha alt kısımlarında bir yerde görünüyor.

Bu giriş, girişlerinden herhangi biri geçersizse form hatası öğesini gösterir:

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

Burada, yan gezinmenin .--is-open sınıfı olduğunda ana içerik alanı kaydırılır:

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

Burada, üst seçici olarak :has() özelliğinin kullanıldığı eğlenceli bir demoyu inceleyebilirsiniz. :has() ile miktar sorguları görsel olarak zarif bir şekilde görüntülenebilen bir ızgara düzeni oluşturmak için Dikey veya yatay yönde 1-12 öğe:

Alt ızgara oluştur

Uzun yıllar boyunca kullanıcı arabirimi web topluluğu, çözümü tamamlamak ve son derece popüler ve güçlü CSS ızgara düzeni motoru. Artık üç büyük motorun hepsinde kullanılabiliyor.

Genel bakış isterseniz alt tablo hakkında daha fazla bilgi edinebilirsiniz.

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

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

CSS yolunu iç içe yerleştirin

Yerleşik CSS iç içe yerleştirme özelliği, 2023'te başlıca tüm tarayıcılarda kullanıma sunuldu. Hatta web sitemi, iç içe yerleştirmeyi derleyen derleme işlemini kaldıracak şekilde güncelledim ve şimdi bunları oluşturabilirsiniz. Evet, iç içe yerleştirme içeren stil sayfaları daha küçük ve tarayıcı geliştirici araçları bunu temsil etmeye hazır.

CSS iç içe yerleştirme söz dizimiyle ilgili genel bilgileri burada bulabilirsiniz. inceleyebilirsiniz. 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

text-wrap: balance olmadan geliştiriciler ve metin yazarları satır sonu ipuçlarında kalır <wbr> öğeleri veya ­ gibi. Bu çoğu zaman bir kaybeden bir savaştır çünkü nihayetinde herhangi bir şekilde çevrilmiş, yakınlaştırılmış veya değiştirilmiş olması durumunda, bunların sarmalama ipuçları, içeriğin yeni sunumu için doğru yere yerleştirilecektir.

Dengeli metin kaydırma sayesinde bu işi tarayıcıda bırakabilirsiniz. Aşağıdaki Codepen'de karşılaştırmayı görebilirsiniz.

Kapsayıcı sorgu birimlerini kullanma

Geçen yılki gönderide, her kullanıcı arabirimi geliştiricilerin kapsayıcı sorgusudur. Henüz öğrenmediyseniz 2024'e ayak uydurun. ve container sorgu birimlerine de göz atabilirsiniz. Özetle, Ahmad Shadeed, 2021'de kapsayıcı sorgu birimleri hakkında harika bir makale yazdı.

Altı yeni katılım birimi mevcuttur:

1. Satır içi varyant cqi.
2. cqw genişlik varyantı.
3. cqb varyantını engelleme.
4. Yükseklik varyantı cqh.
5. cqmin daha kısa olan uzunluklara uygun bir varyant.
6. Daha büyük (cqmax) uzunluklarda bir varyant.

Bir kapsayıcıdaki göreli ve içsel animasyonlar için bir senaryo düşünün. Bir alt öğe, 100 cqi kullanılır (bu, kapsayıcı satır içi boyutunun% 100'ü).

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

Aşağıda, kapsayıcıya duyarlı yazı tipi kullanılan bir kart ve Yön yatay ise kapsayıcının yönü yarıya düşecek.

.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 bu birimleri 2024'te kullanabileceğiniz tüm birimleri inceleyin.