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.
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.
: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.
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ü.](https://developer.chrome.com/static/blog/css-ui-ecommerce-has/image/has-before-after.png?authuser=6&hl=tr)
: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:
- CSS Sarmalanmış 2023
- :has(): aile seçici
- Demolar :has()
- Hata bildirmek mi yoksa yeni bir özellik isteğinde bulunmak mı istiyorsunuz? Görüşlerinizi almak istiyoruz!
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.