:has() örnek olayları

Swetha Gopalakrishnan

Saurabh Rajpal

CSS'nin de bilinen öğelere dayalı olarak bir üst öğeyi doğrudan seçme yardımcı olur. Bu, yıllardır geliştiricilerin en popüler taleplerinden biridir. İlgili içeriği oluşturmak için kullanılan Artık tüm önemli tarayıcılar tarafından desteklenen :has() seçici bu sorunu çözer. Şu tarihten önce: :has() ise genellikle uzun seçicileri zincirlemeniz veya kancaları şekillendirmek için sınıflar eklemeniz gerekir. Şimdi bir öğenin alt öğeleriyle ilişkisine göre stil verebilirsiniz. Devamını okuyun şu konumdaki :has() seçici hakkında: CSS Paketlenmiş 2023 ve Her ön uç geliştiricinin bilmesi gereken 5 CSS snippet'i.

Bu seçici küçük görünse de çok sayıda kullanım alanı sağlayabilir. Bu makalede, e-ticaret şirketlerinin :has() seçici.

:has(), Yeni Kullanılabilir Temel Değer'in bir parçasıdır.

Bu makalenin parçası olduğu serinin tamamına göz atın. Bu bölümde E-ticaret şirketleri yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini geliştirdi.

Politika Pazarı

:has() seçici sayesinde JavaScript tabanlı doğrulamayı kaldırabildik ve bunu çalışan bir CSS çözümüyle değiştirin sorunsuz bir şekilde devam edebiliyor.—Aman Soni, Teknoloji Lideri, Policybazaar

Policybazaar'ın Yatırım ekibi, :has() seçiciyi kullanarak planları karşılaştıran kullanıcılara net bir görsel gösterge sunar. Aşağıdaki resim karşılaştırma kullanıcı arayüzünde iki plan türü (sarı ve mavi) gösteriyor. Her plan türü yalnızca kendi türüyle karşılaştırılabilir. Kullanıcı bir seçim yaptığında :has() kullanıldığında diğer plan türünün seçilemediği plan türüdür.

Kod

:has(), stil üst öğelerine ve bunların alt öğelerine erişmenizi sağlar. İlgili içeriği oluşturmak için kullanılan Aşağıdaki kod, üst kapsayıcıda .disabled-group sınıfı olup olmadığını kontrol eder. Varsa kart devre dışı olur ve "Ekle" düğmesi, pointer-events değerini none olarak ayarlayarak tıklamalara tepki vermeyi sürdürün.

.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'ın sağlık ekibi, kullanım alanına sahip olursunuz. Kullanıcı için bir satır içi testi vardır ve :has() ile sorunun onay kutusu durumunu kontrol edin. cevaplandı. Kullanıldıysa sonraki soruya geçiş için bir animasyon uygulanır.

Kod

Plan karşılaştırma örneğinde :has() kullanılmıştır. sınıfını kullanır. Bir giriş öğesinin durumunu, örneğin bir onay kutusu gibi :has(input:checked) Testi gösteren görselde, mor banner bir onay kutusudur. Policybazaar, sorunun :has(input:checked) kullanılarak yanıtlandı ve varsa bir animasyonu tetiklemek için Sonrakine kaydırmak için animation: quesSlideOut 0.3s 0.3s linear forwards soru. 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 :has() kullanarak bir video içeriyor. Ürün küçük resminde .playIcon sınıfı varsa bir CSS yer paylaşımı eklendi. Burada, :has() seçicisi & ile birlikte kullanılır. seçiciyi, geçerli olan kapsayıcı .thumbnailWrapper sınıfına yerleştirme seçilebilir. Bu da CSS'nin daha modüler ve okunabilir olmasını sağlar.

Kod

Aşağıdaki kodda CSS seçiciler ve birleştiriciler (& ve >) ve küçük resim stilini belirlemek için :has() ile iç içe yerleştiriliyor. Desteklenmeyenler için diğer tarayıcılarda da yedek olarak normal ek CSS sınıf kuralı kullanılır. İlgili içeriği oluşturmak için kullanılan @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() ürününü kullanırken dikkat edilmesi gereken noktalar

Daha karmaşık bir koşul oluşturmak için :has() öğesini diğer seçicilerle birleştirin. Kontrol et has() aile seçici işlevinde bazı örnekler bulabilirsiniz.

Kaynaklar:

• CSS Paketlenmiş 2023
• :has(): aile seçici
• Demolar :has()
• Hata bildirmek mi yoksa yeni bir özellik talep etmek mi istiyorsunuz? Düşüncelerinizi öğrenmek istiyoruz!

Bu dizide, e-ticaretin nasıl gerçekleştiğinden bahseden diğer makaleleri kaydırma odaklı gibi yeni CSS ve kullanıcı arayüzü özelliklerinden faydalanan şirketlere animasyonlar, görüntüleme geçişleri, pop-over ve kapsayıcı sorguları.

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