:has() örnek olayları

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

CSS'de, bir üst öğeyi alt öğelerine dayalı olarak doğrudan seçebilme bir yöntemi bulunmamıştır. Bu, uzun yıllardır geliştiricilerin en çok talep ettiği konulardan biridir. Artık önde gelen tüm tarayıcılar tarafından desteklenen :has() seçici bu sorunu çözer. :has() öncesinde genellikle uzun seçicileri zincirliyor veya stil kancaları için sınıflar ekliyordunuz. Artık bir öğenin alt öğeleriyle ilişkisine göre stil belirleyebilirsiniz. CSS Wrapped 2023 bölümünde :has() seçicisi ve her ön uç geliştiricisinin bilmesi gereken 5 CSS snippet'i hakkında daha fazla bilgi edinin.

Bu seçici küçük görünse de çok sayıda kullanım alanına olanak tanıyabilir. Bu makalede, e-ticaret şirketlerinin :has() seçici ile kilidini açtığı bazı kullanım alanları gösterilmektedir.

:has(), Referans Yeni Kullanılabilirlik kapsamındadır.

Tarayıcı Desteği

  • 105
  • 105
  • 121
  • 15,4

Kaynak

Bu makalenin parçası olduğu, e-ticaret şirketlerinin yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini nasıl geliştirdiğinin açıklandığı tam seriye göz atın.

Politika pazarı

:has() seçicisi sayesinde, kullanıcı seçiminin JavaScript tabanlı doğrulamasını kaldırabildik ve bunu bizim için öncekiyle aynı deneyimle sorunsuz çalışan bir CSS çözümüyle değiştirebildik. - 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 sağlamak 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 gösterilmektedir (sarı ve mavi). 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 amacıyla üst öğeye ve alt öğelerine :has() uygulanması.

Kod

:has(), üst öğelerin ve alt öğelerinin stilini belirlemenize olanak tanır. Aşağıdaki kod, bir üst kapsayıcıda .disabled-group sınıfının ayarlanıp ayarlanmadığını kontrol eder. Bu durumda kart devre dışı olur ve pointer-events değeri 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 health ekibi biraz farklı bir kullanım alanı uyguladı. Bunlar, kullanıcı için bir satır içi test yapar ve sorunun yanıtlanıp yanıtlanmadığını görmek üzere soru onay kutusu durumunu kontrol etmek için :has() özelliğini kullanır. Öyleyse sonraki soruya geçiş için bir animasyon uygulanır.

health.policybazaar.com/

Kod

Plan karşılaştırma örneğinde, bir 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 onay kutusu şeklinde. Policybazaar, sorunun :has(input:checked) kullanılarak yanıtlanıp yanıtlanmadığını kontrol eder ve yanıtlanmışsa bir sonraki soruya geçmek için animation: quesSlideOut 0.3s 0.3s linear forwards kullanarak animasyon tetikler. Bunun nasıl çalıştığını aşağıdaki koddan 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şımlı resim oluşturmak için :has() etiketini kullandı. Ürün küçük resmi bir .playIcon sınıfı içeriyorsa 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ı içindeki & iç içe yerleştirme seçiciyle birlikte kullanılır. Bu, daha modüler ve okunabilir CSS oluşturur.

Tokopedia sayfasının, seçicinin kullanımından önceki ve sonraki ekran görüntüsü.
:has() kullanmadan önce ve sonra.

Kod

Aşağıdaki kod, küçük resmin stilini belirlemek için CSS seçiciler ve birleştiricileri (& ve >) ve :has() ile iç içe yerleştirmeyi kullanır. Desteklenmeyen tarayıcılarda, normal ek CSS sınıf kuralı yedek olarak 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 gerekenler

Daha karmaşık bir koşul oluşturmak için :has() öğesini diğer seçicilerle birleştirin. Has() aile seçicisinde bazı örneklere göz atın.

Kaynaklar:

E-ticaret şirketlerinin Kaydırma destekli animasyonlar, görünüm geçişleri, popover ve kapsayıcı sorguları gibi yeni CSS ve kullanıcı arayüzü özelliklerinden nasıl yararlandığını anlatan bu serideki diğer makaleleri inceleyin.