CSS Önceki kardeş seçicileri ve sahte olmaları

CSS kardeş seçicilerini daha önce kullandıysan, sadece iki tane olduğunu biliyorsun. + Kardeş birleştirici hemen sonra gelen ilk eşleşmeyi seçer ve ~ takip eden kardeş birleştirici sonra gelenlerle eşleşir.
Ama daha önce ne geldiğini seçmenin bir yolu yok. Ya ana seçiciler ya da önceki kardeş seçicileri bir şey değildir.

İstediğini biliyorum, istediğimi biliyorsun, ama asıl gerçek onların var olmamasıdır (ve muhtemelen asla olmayacak). Niçin hakkında milyonlarca mesaj var. Bunların nasıl uygulanacağına dair öneriler bile var. Ancak, CSS kurallarının tek yönlü işlemesinde sıkışıp kaldık, büyük olasılıkla bizi “uzmanlık eksikliğimiz” den koruyalım, bizi tekrar akışlara ve hatta sonsuz döngülere sıkışıp kaldırabiliriz.

Neyse ki, çoğu CSS sınırlamasında olduğu gibi, sahte olabiliriz.

Dikkate alınması gereken ilk şey, önceki kardeşlerin neden başlamasını istediğimizdir.
İki dava akla geliyor:

  1. Belli bir elemanın tüm kardeşlerini seçmemiz gerekir ve sonraki kardeş birleştirici sadece sonra gelenleri seçer.
  2. Sadece daha önce gelen kardeşleri seçmemiz gerekiyor

1. Tüm kardeşleri seçme

Bazen hem önceki hem de sonraki kardeşleri seçmemiz gerekir. Bunu yapmak için, ebeveyni gerçekten seçebilir ve etrafındaki bazı hileleri kullanabiliriz.

Örneğin, aşağıdaki yapılardaki tüm açıklıkları, herhangi birini gezdirirken seçmek için, sadece seçiciyi ebeveyne vurgulu üzerinde kullanabiliriz. İşaretçi olaylarını ebeveynden devre dışı bıraktığınızdan ve tekrar çocuklara sıfırladığımızdan emin olun. Öyleyse ne yapmak istediğimiz ne olursa olsun sadece ebeveyne değil çocuğa girdiğimizde ateş açacak.

Bekletilen dışındaki tüm kardeşleri seçmeniz gerekiyorsa, önceki tekniği aşağıdakilerle birleştirebilirsiniz: dışlamak için seçiciyi değil.

Bunun için tipik bir kullanım örneği menülerdir:

Yukarıdaki kod, tüm

  • öğelerinin opaklığını, ancak asılı olanı azaltacaktır.

    Ayrıca, etkilemek istediğiniz kardeşler üzerinde daha hassas olması için tip ve nt seçiciler gibi filtreler kullanabilirsiniz.

    Bazı stillerde, bu şekilde çalışması gerekir:

    Lütfen dikkat: İşaretçi olaylarını çalıştıracaksanız: hiçbiri yaklaşmıyorsa, yığınlama ile uğraşabileceğini unutmayın (yığınlama sırasına göre "aşağıda" olan öğeleri seçmenize izin verebilir). Ayrıca, işaretçi olaylarına başka bir şey için ihtiyaç duyacağınızın imaları dışında, IE10 ve altında çalışmaz. Kullanırken çok dikkatli olun.

    2. Daha önce neyin geldiğini seçme

    Bu kullanım durumu için, HTML'deki sırayı tersine çevirebilir, CSS'ye geri sıralayabiliriz ve ~ sonraki kardeş birleştiriciyi veya + bitişik kardeş seçicisini kullanabiliriz. Bu şekilde bir sonraki kardeşleri seçeceğiz, ancak öncekileri seçiyor gibiyiz.

    Bunu yapmanın birden fazla yolu var. En basit ve muhtemelen en eskisi konteynırımızın yazı yönünü değiştiriyor:

    Öğelerinizin gerçek metni görüntülemesi gerekiyorsa, her zaman geri çevirebilirsiniz:

    Fakat bu birçok yönden elden çıkabilir. Neyse ki, modern CSS araç kutusu onu çok daha basit ve daha güvenli hale getiriyor. Flexbox'ı kabın üzerinde kullanabiliriz ve sırayı ters yönde ters yönde sıralayabiliriz: row-reverse:

    Flexbox yaklaşımıyla ilgili en iyi şey, yazı yönünü karıştırmamamızdır. Çocukları sıfırlamamız gerekmiyor ve her şey çok daha öngörülebilir.

    CSS Only yıldız derecelendirme sistemi oluşturmak için “önceki kardeşleri” kullanma

    Anlamsal olarak, bir derecelendirme sistemi, karşılık gelen etiketleri ile basit bir radyo düğmesi listesi olarak düşünülebilir. Kardeşleri değiştirmek için: işaretli sözde seçiciyi kullanmamıza izin vereceğinden, bu kullanışlı bir özelliktir.

    Öyleyse oradan başlayalım:

    Daha önce tartıştığımız gibi, elemanlar “önceki kardeş” seçicisine izin vermek için ters sıradadır. Boş yıldızları temsil etmek için unicode “beyaz yıldız” karakterini (U + 2606) kullanıyoruz.

    Onları yan yana, doğru (ters) sırayla görüntüleyelim:

    Şimdi radyo düğmelerini kendileri gizleyin, kimse bunu görmek istemez:

    Ve yıldız karakterlerine biraz stil uygulayın:

    Buradaki gerçekten önemli olan tek şey pozisyondur: göreceli. Başlangıçta gizlenecek olan, üzerinde dolu bir yıldız (U + 2605) sahte elementi mutlak pozisyona getirmemizi sağlayacaktır.

    Bir yıldızın üzerine geldiğimizde, dolu yıldız sözde elemanı onun ve önceki tüm kardeşlerin görünmesi gerekir.

    İşaretli radyo düğmesinden önce gelen tüm etiketleri eşleştirerek seçilen puan için aynı şey:

    Önemli bayrağı kullanmanın iyi bir uygulamanın tam tersi olduğunu unutmayın. Bunu burada bir sonraki bölümde tartışılan ek işlevsellik olmadan onsuz elde etmek için başka bir yol olmadığı için yapıyorum.

    Son fakat en az değil, kullanıcının puanını değiştirmek istemesi durumunda, geçerli notu “hatırlamamız” gerekir. Örneğin, eğer beş yıldız seçtilerse ve hangi nedenle olursa olsun dördünceye değiştirmek istiyorlarsa, yıldızları 1'den 4'e kadar dolu, beşinciyi dördüncüün üzerine getirirken yarı saydam olarak göstermeliyiz.

    Konteynır üzerine geldiğinde, kontrol edilen girdilerin önceki kardeşlerinin opaklığı değiştirilerek elde edilebilir:

    Bu nedenle opaklığa ihtiyaç duymamızın da nedeni budur: 1! Aksi takdirde, bu son kural özgünlük yarışmasını kazandıracak ve her şeye yarı şeffaf bir dolgu uygulayacaktı.

    Ve biz orada, "önceki kardeşler" seçicilerini kullanan, tamamen işlevsel, tamamen işlevsel bir CSS yıldız derecelendirme sistemi.

    Gördüğünüz gibi, sadece “imkansız” olması denemeniz gerektiği anlamına gelmez. Programlama limitleri zorlamakla ilgilidir. Bu yüzden duvara ne zaman vursan, biraz sertleş. Ya da onun yolunu bulmak daha iyi bir benzetme olabilir mi?… Neyse, ne demek istediğimi biliyorsun. Hacklemeye devam et!

    Erişilebilirlik hakkında bir not

    Önceki kod parçası, anlaşılmasını kolaylaştırmak için bir basitleştirmedir. Erişilebilirlik sınırlamalarından dolayı üretimde kullanılması tavsiye edebileceğim bir şey değil.

    Parçacığı biraz daha erişilebilir hale getirmek için, ilk olarak radyo düğmelerini ekran dışında herhangi bir teknikle gizlemek gerekir: hiçbiri onları odaklanabilir yapmak için. Ayrıca, içindeki herhangi bir unsur sözde seçici ile odaklandığında, tüm yıldız snippet'ine biraz odak halkası eklemeliyiz: focus-inside.

    Aynı “☆” etiketleri ekran okuyucuları için bir anlam ifade etmemektedir, bu nedenle en iyi yaklaşım etiketli içinde “n Yıldız” metni bulunan, görünür kullanıcılardan gizlenecek bir olacaktır.

    Ayrıca, ters HTML kaynağı + ekranı: satır tersine yaklaşımı, geri döndürülmediği için klavyeyi zorlaştırır. Flexbox ve klavye erişilebilirliği oldukça dağınık bir konudur, ancak bunun için bir çözüme en yakın şey, her öğeye aria-flowtotag eklemek, bu da en azından bazı ekran okuyucuları + tarayıcı kombinasyonları için sorunu düzeltir.

    Daha erişilebilir bir snippet için (öncekileri değerlendirmek yerine boş görünmek üzere sonraki kardeşleri değiştirmek için alternatif bir teknik kullanarak) aşağıdaki cevaplarda tartışıldığı gibi Patrick Cole’a bakın.