:has() örnek olayları

Swetha Gopalakrishnan

Saurabh Rajpal

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 önemli tarayıcılar tarafından desteklenen :has() seçici bu sorunu çözer. :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 başlıklı makaleleri 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.

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.

Politika Pazarı

:has() seçici sayesinde, kullanıcı seçiminin JavaScript tabanlı doğrulanmasını kaldırıp yerine, bizim için öncekiyle aynı deneyimle sorunsuz çalışan bir CSS çözümü ekledik.—Aman Soni, Teknoloji Lideri, 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ündeki 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.

Kod

:has(), stil üst öğelerine ve bunların alt öğelerine erişmenizi sağlar. Aşağıdaki kod, bir üst kapsayıcıda .disabled-group sınıfı grubunun olup olmadığı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 bir satır içi testi var ve sorunun yanıtlanıp yanıtlanmadığını görmek için soru onay kutusu durumunu işaretlemek için :has() kullanıyor. Kullanıldıysa sonraki soruya geçiş için bir animasyon uygulanır.

Kod

Plan karşılaştırma örneğinde, sınıfın varlığını kontrol etmek için :has() kullanılmıştır. Ayrıca, :has(input:checked) kullanarak onay kutusu gibi bir giriş öğesinin durumunu 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 nasıl çalıştığını 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.

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ümlerinde 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çici has() işlevindeki bazı örneklere göz atın.

Kaynaklar:

• CSS Paketlenmiş 2023
• :has(): aile seçici
• Demolar :has()
• Hata bildirmek veya yeni bir özellik isteğinde bulunmak ister misiniz? Görüşlerinizi almak istiyoruz.

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.

• Web kullanıcı arayüzü özellikleri e-ticaret siteniz için neden önemlidir?
• Kaydırmaya dayalı animasyonlara ilişkin örnek olaylar
• Geçişler örnek olaylarını görüntüleme
• Pop-up örnek olayları
• Kapsayıcı sorguları ile ilgili örnek olaylar