:has() örnek olayları

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

CSS, alt öğelerine göre üst öğeyi doğrudan seçme konusunda uzun süredir eksiklik yaşamaktadır. Bu özellik, geliştiricilerin yıllardır en çok talep ettiği özelliklerden biriydi. Tüm büyük tarayıcılar tarafından desteklenen :has() seçicisi bu sorunu çözer. Önceden :has(), genellikle uzun seçiciler zincirler veya stil kancaları için sınıflar eklerdiniz. Artık bir öğenin alt öğeleriyle ilişkisine göre stil oluşturabilirsiniz. CSS Wrapped 2023 ve 5 CSS snippets every frontend developer should know başlıklı makalelerde :has() seçici hakkında daha fazla bilgi edinin.

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

Bu makalenin bir parçası olduğu tam seriyi inceleyin. Bu seride, e-ticaret şirketlerinin yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak web sitelerini nasıl geliştirdiği anlatılıyor.

Policybazaar

:has() seçici sayesinde, kullanıcının seçiminin JavaScript tabanlı doğrulanmasını ortadan kaldırıp yerine CSS çözümü getirdik. Bu çözüm, daha önce olduğu gibi sorunsuz bir şekilde çalışıyor.—Aman Soni, Teknoloji Yöneticisi, 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.

Üst öğeyi ve alt öğelerini stilize etmek için :has() işlevini uygulayarak kategoriye bağlı bir seçim işlevi oluşturma.

Kod

:has(), üst öğeleri ve alt öğelerini stilize etmenize olanak tanır. Aşağıdaki kod, üst kapsayıcıda .disabled-group sınıfının ayarlanıp ayarlanmadığını kontrol eder. Bu durumda kart gri renkte görünür ve pointer-events değeri none olarak ayarlanarak "Ekle" düğmesinin tıklamalara yanıt 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 sınav sunar ve sorunun yanıtlanıp yanıtlanmadığını görmek için soru onay kutusunun durumunu kontrol etmek üzere :has() kullanır. Doğruysa bir sonraki soruya geçiş için 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. Ayrıca :has(input:checked) kullanarak onay kutusu gibi bir giriş öğesinin durumunu da kontrol edebilirsiniz. Testi gösteren görseldeki mor banner'da her soru bir onay kutusudur. Policybazaar, sorunun :has(input:checked) kullanılarak yanıtlanıp yanıtlanmadığını kontrol eder. Yanıtlandıysa animation: quesSlideOut 0.3s 0.3s linear forwards kullanarak bir animasyon tetikleyerek sonraki soruya geçer. 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 resmi video içeriyorsa :has() kullanarak bir yer paylaşımı resmi oluşturdu. Ürün küçük resmi .playIcon sınıfını içeriyorsa CSS yerleşimi eklenir. Burada, :has() seçici, tüm küçük resimlere uygulanan kapsamlı .thumbnailWrapper sınıfındaki & iç içe yerleştirme seçiciyle birlikte kullanılır. Bu sayede daha modüler ve okunabilir CSS oluşturulur.

Tokopedia sayfasının, has seçici kullanılmadan önceki ve kullanıldıktan sonraki ekran görüntüsü.
:has() kullanmadan önce ve kullandıktan sonra.

Kod

Aşağıdaki kod, küçük resmi stilize etmek için CSS seçicileri ve birleştiricileri (& ve >) ve :has() ile iç içe yerleştirmeyi kullanır. Desteklemeyen tarayıcılarda 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ılırken dikkat edilmesi gerekenler

Daha karmaşık bir koşul oluşturmak için :has() ile diğer seçicileri birleştirin. has() aile seçicisi bölümündeki bazı örneklere göz atın.

Kaynaklar:

Bu serideki diğer makaleleri inceleyerek e-ticaret şirketlerinin kaydırmaya dayalı animasyonlar, görünüm geçişleri, popover ve kapsayıcı sorguları gibi yeni CSS ve kullanıcı arayüzü özelliklerini kullanarak nasıl fayda sağladığını öğrenebilirsiniz.