:has() örnek olayları

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

CSS'de, alt öğelerine göre doğrudan bir üst öğe seçmenin bir yolu olmadığı bilinmektedir. Bu özellik, geliştiricilerin yıllardır en çok istediği özelliklerden biriydi. Artık tüm büyük tarayıcılar tarafından desteklenen :has() seçici bu sorunu çözmektedir. :has() öncesinde, genellikle uzun seçicileri zincirleme veya stil kancaları için sınıf ekleme işlemleri yapardınız. Artık bir öğenin alt öğeleriyle ilişkisine göre stil uygulayabilirsiniz. :has() seçici hakkında daha fazla bilgi edinmek için CSS Wrapped 2023 ve Her ön uç geliştiricinin bilmesi gereken 5 CSS snippet'i inceleyin.

Bu seçici küçük görünse de çok sayıda kullanım alanı sunabilir. Bu makalede, e-ticaret şirketlerinin :has() seçicisiyle elde ettiği bazı kullanım alanları gösterilmektedir.

:has(), Referans Değer Yakın Zamanda Listelendi kapsamındadır.

Tarayıcı desteği

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

Kaynak

Bu makalenin de yer aldığı serideki diğer makalelere göz atın. Bu makalelerde, e-ticaret şirketlerinin yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini nasıl geliştirdiği ele alınmaktadır.

Policybazaar

:has() seçici sayesinde kullanıcının seçiminin JavaScript tabanlı doğrulamasını ortadan kaldırdık ve bunu, önceki deneyimle aynı şekilde sorunsuz bir şekilde çalışan bir CSS çözümüyle değiştirdik.—Aman Soni, Teknik Lider, Policybazaar

Policybazaar'ın Yatırım Ekibi, planları karşılaştıran kullanıcılara net bir görsel gösterge sunmak için :has() seçiciyi akıllıca uyguladı. Aşağıdaki resimde, karşılaştırma kullanıcı arayüzünde iki tür plan (sarı ve mavi) gösterilmektedir. Her plan yalnızca kendi türüyle karşılaştırılabilir. :has() kullanıldığında, kullanıcı bir plan türünü seçtiğinde diğer plan türü seçilemez.

Kategoriye bağlı bir seçim işlevi oluşturmak için ana öğeyi ve alt öğelerini biçimlendirmek üzere :has()'i uygulama.

Kod

:has(), üst öğelerin ve alt öğelerinin stillerine erişmenizi sağlar. Aşağıdaki kod, bir üst kapsayıcının .disabled-group sınıfının ayarlanıp ayarlanmadığını kontrol eder. Bu durumda kart devre dışı bırakılır ve pointer-events none olarak ayarlanarak "Ekle" düğmesinin tıklamalara tepki vermesi engellenir.

.plan-group-container:has(.disabled-group) {
  opacity: 0.5;
  filter: grayscale(100%);
}

.plan-group-container:has(.disabled-section) .button {
  pointer-events: none;
  border-color: #B5B5B5;
  color: var(--text-primary-38-color);
  background: var(--input-border-color);
}

Policybazaar'daki sağlık ekibi, biraz farklı bir kullanım alanı uyguladı. Kullanıcı için satır içi bir testleri var ve sorunun yanıtlanıp yanıtlanmadığını görmek için soru onay kutusunun durumunu kontrol etmek üzere :has() simgesini kullanıyorlar. Bu durumda, sonraki soruya geçiş için bir animasyon uygulanır.

health.policybazaar.com/

Kod

Plan karşılaştırma örneğinde, sınıfın varlığını kontrol etmek için :has() kullanılmıştır. :has(input:checked) kullanarak onay kutusu gibi bir giriş öğesinin durumunu da kontrol edebilirsiniz. Testi gösteren görselde, mor banner'daki her soru bir onay kutusudur. Policybazaar, :has(input:checked) kullanarak sorunun yanıtlanıp yanıtlanmadığını kontrol eder ve yanıtlanmışsa animation: quesSlideOut 0.3s 0.3s linear forwards kullanarak bir animasyon tetikler ve kullanıcıyı bir sonraki soruya yönlendirir. Bunun işleyiş şeklini aşağıdaki kodda görebilirsiniz.

.segment_banner__wrap__questions {
 position: relative;
 animation: quesSlideIn 0.3s linear forwards;
}

.segment_banner__wrap__questions:has(input:checked) {
 animation: quesSlideOut 0.3s 0.3s linear forwards;
}


@keyframes quesSlideIn {
 from {
   transform: translateX(50px);
   opacity: 0;
 }
 to {
   transform: translateX(0px);
   opacity: 1;
 }
}

@keyframes quesSlideOut {
 from {
   transform: translateX(0px);
   opacity: 1;
 }
 to {
   transform: translateX(-50px);
   opacity: 0;
 }
}

Tokopedia

Tokopedia, ürün küçük resminde video varsa yer paylaşımı resmi oluşturmak için :has()'ü kullandı. Ürün küçük resminde .playIcon sınıfı varsa CSS yer paylaşımı eklenir. Burada, :has() seçici, tüm küçük resimler için geçerli olan kapsayıcı .thumbnailWrapper sınıfındaki & iç içe yerleştirme seçicisiyle birlikte kullanılır. Bu sayede daha modüler ve okunabilir CSS oluşturulur.

has seçicisinin kullanılmasından önce ve sonra Tokopedia sayfasının ekran görüntüsü.
:has()'ı kullanmadan önce ve sonra.

Kod

Aşağıdaki kodda, küçük resmin stilini belirlemek için CSS seçicileri ve birleştiriciler (& ve >) ve :has() ile iç içe yerleştirme kullanılmaktadır. Desteklemeyen tarayıcılar için yedek olarak normal ek CSS sınıf kuralı kullanılır. @supports selector(:has(*)) kuralı, tarayıcı desteğini kontrol etmek için de kullanılır. Bu nedenle, genel deneyim tarayıcı sürümleri arasında aynıdır.

export const thumbnailWrapper = css`
  padding: 0;
  margin-right: 7px;
  border: none;
  outline: none;
  background: transparent;

  > div {
    width: 64px;
    height: 64px;
    overflow: hidden;
    cursor: pointer;
    border-color: ;
    position: relative;
    border: 2px solid ${NN0};
    border-radius: 8px;
    transition: border-color 0.25s;

    &.active {
      border-color: ${GN500};
    }

    @supports selector(:has(*)) {
      &:has(.playIcon) {
        &::after {
          content: '';
          display: block;
          background: rgba(0, 0, 0, 0.2);
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
        }
      }
    }

    & > .playIcon {
      position: absolute;
      top: 25%;
      left: 25%;
      width: 50%;
      height: 50%;
      text-align: center;
      z-index: 1;
    }
  }
`;

:has() kullanırken dikkat edilmesi gereken noktalar

Daha karmaşık bir koşul oluşturmak için :has() öğesini diğer seçicilerle birleştirin. Aile seçicisinin (has()) bazı örneklerini inceleyin.

Kaynaklar:

E-ticaret şirketlerinin kaydırma destekli animasyonlar, görüntü geçişleri, pop-up ve kapsayıcı sorguları gibi yeni CSS ve kullanıcı arayüzü özelliklerinden nasıl yararlandığından bahseden bu serinin diğer makalelerini inceleyin.