Bir Izgara Kapsayıcısında Seçilmiş Öğeleri Koşullu Şekillendirme

Takvimler, alışveriş sepetleri, galeriler, dosya gezginleri ve çevrimiçi kitaplıklar, seçilebilir öğelerin ızgaralarda (yani kare kafeslerde) gösterildiği bazı durumlardır. Bilirsiniz, yaya geçitleri veya her neyse tüm görüntüleri seçmenizi isteyen güvenlik kontrolleri bile.

Bir ızgarada seçilebilir seçenekleri görüntülemenin düzgün bir yolunu buldum. Hayır, bu reCAPTCHA'yı yeniden oluşturmak değil, yalnızca birden çok öğe seçebilmek. Ve iki veya daha fazla bitişik öğe seçildiğinde, akıllıca kullanabiliriz. :nth-of-type birleştiriciler, sözde öğeler ve :checked onları birlikte gruplanmış görünecek şekilde stillendirmek için sözde sınıf.

Yuvarlatılmış onay kutularını elde etmek için birleştiriciler ve sözdeler fikri, bir yazdığım önceki yazı. Basit bir tek sütunlu tasarımdı:

Ancak bu sefer yuvarlama efekti, bir ızgara üzerinde hem dikey hem de yatay eksenler boyunca öğelere uygulanır. Bunun için onay kutusu stiliyle ilgili son makalemi okumanıza gerek yok, çünkü burada bilmeniz gereken her şeyi ele alacağım. Ancak, bu makalede yaptığımız şeyi daha ince bir şekilde ele almakla ilgileniyorsanız, o zaman buna göz atmaya değer.

Başlamadan önce…

Birkaç şeye dikkat etmenizde fayda var. Örneğin, basitlik adına demomda statik HTML ve CSS kullanıyorum. Uygulamanıza bağlı olarak, ızgarayı ve içindeki öğeleri dinamik olarak oluşturmanız gerekebilir. Etkiye odaklanmak için erişilebilirlik için pratik kontrolleri bırakıyorum, ancak kesinlikle bu tür şeyleri bir üretim ortamında düşünmek istersiniz.

Ayrıca, düzen için CSS Grid kullanıyorum. Ben de aynısını tavsiye ederim ama elbette bu sadece kişisel bir tercih ve kilometreniz değişebilir. Benim için ızgara kullanmak, bir öğeyi hedeflemek için kardeş seçicileri kolayca kullanmamı sağlıyor. ::before ve ::after sahteler.

Bu nedenle, uygulamanızda kullanmak isteyebileceğiniz düzen standardı ne olursa olsun, sözdelerin CSS'de hala hedeflenebildiğinden ve düzenin farklı tarayıcılar ve ekranlar arasında inceliğini koruduğundan emin olun.

Şimdi başlayalım

Daha önceki demoda fark etmiş olabileceğiniz gibi, bir onay kutusu öğesinin işaretlenmesi ve işaretin kaldırılması, etrafındaki diğer onay kutularının seçim durumuna bağlı olarak kutuların tasarımını değiştirir. Bu mümkün, çünkü her kutuyu kendi öğesi yerine bitişik öğelerinin sözde öğelerini kullanarak biçimlendirdim.

Aşağıdaki şekil, ::before her birinde kutuların sözde öğeleri sütun (ilk sütun hariç) kutuları sol taraflarında üst üste bindirin ve ::after her birinde kutuların sözde öğeleri sıra (ilk sıra hariç) yukarıdaki kutucukları üst üste getirin.

İşte temel kod

İşaretleme oldukça basittir:

<main> <input type=checkbox> <input type=checkbox> <input type=checkbox> <!-- more boxes -->
</main>

İlk CSS'de biraz daha fazla oluyor. Ama önce, ızgaranın kendisi:

/* The grid */
main { display: grid; grid: repeat(5, 60px) / repeat(4, 85px); align-items: center; justify-items: center; margin: 0;
}

Bu, onay kutuları içeren beş satır ve dört sütundan oluşan bir ızgaradır. Onay kutularının varsayılan görünümünü silmeye karar verdim, ardından onlara kendi açık gri arka planımı ve süper yuvarlak kenarlıkları verdim:

/* all checkboxes */
input { -webkit-appearance: none; appearance: none; background: #ddd; border-radius: 20px; cursor: pointer; display: grid; height: 40px; width: 60px; margin: 0;
}

Ayrıca, onay kutularının kendilerinin ızgaralar olduğuna dikkat edin. yerleştirmek için anahtar bu ::before ve ::after sözde unsurlar. Bundan bahsetmişken, şimdi yapalım:

/* pseudo-elements except for the first column and first row */
input:not(:nth-of-type(4n+1))::before,
input:nth-of-type(n+5)::after { content: ''; border-radius: 20px; grid-area: 1 / 1; pointer-events: none;
}

Yalnızca kılavuzun ilk sütununda veya ilk satırında olmayan onay kutularının sözde öğelerini seçiyoruz. input:not(:nth-of-type(4n+1)) ilk onay kutusunda başlar, ardından ::before oradan her dördüncü öğeden. Ama söylediğimize dikkat edin :not(), yani gerçekten yaptığımız şey atlama the ::before ilkinden başlayarak her dört onay kutusunun sözde öğesi. Sonra stilleri uyguluyoruz ::after beşinci olandan her onay kutusunun sözde.

Şimdi her ikisini de stillendirebiliriz ::before ve ::after ızgaranın ilk sütununda veya satırında olmayan her onay kutusu için sözdeler, böylece sırasıyla sola veya yukarı hareket ettirilir ve varsayılan olarak gizlenirler.

/* pseudo-elements other than the first column */
input:not(:nth-of-type(4n+1))::before { transform: translatex(-85px);
} /* pseudo-elements other than the first row */
input:nth-of-type(n+5)::after { transform: translatey(-60px); }

stil vermek :checked belirtmek, bildirmek

Şimdi, onay kutularını bir :checked durum. Önce onlara bir renk verelim, bir limegreen arka fon:

input:checked { background: limegreen; }

Bir işaretli kutu, bitişik işaretli kutularının tümünü yeniden biçimlendirebilmelidir. Diğer bir deyişle, gridde onbirinci onay kutusunu seçersek, onu çevreleyen kutuları üst, alt, sol ve sağda da stillendirebilmeliyiz.

Bu, doğru sözde öğeleri hedefleyerek yapılır. Bunu nasıl yaparız? Bu, ızgaradaki gerçek sütun sayısına bağlıdır. 5⨉4'lük bir ızgarada iki bitişik kutu işaretlenirse CSS:

/* a checked box's right borders (if the element to its right is checked) */
input:not(:nth-of-type(4n)):checked + input:checked::before { border-top-right-radius: 0; border-bottom-right-radius: 0; background: limegreen;
}
/* a checked box's bottom borders (if the element below is checked) */
input:nth-last-of-type(n+5):checked + * + * + * + input:checked::after { border-bottom-right-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (right side) checked box's left borders */
input:not(:nth-of-type(4n)):checked + input:checked + input::before { border-top-left-radius: 0; border-bottom-left-radius: 0; background: limegreen;
}
/* a checked box's adjacent (below) checked box's top borders */
input:not(:nth-of-type(4n)):checked + * + * + * + input:checked + input::before { border-top-left-radius: 0; border-top-right-radius: 0; background: limegreen;
}

İsterseniz yukarıdaki kodu dinamik olarak oluşturabilirsiniz. Bununla birlikte, tipik bir ızgara, örneğin bir resim galerisinde, sütunların sayısı küçük ve muhtemelen sabit sayıda öğe olacaktır, oysa satırlar artmaya devam edebilir. Özellikle mobil ekranlar için tasarlanmışsa. Bu yüzden bu yaklaşım hala etkili bir yoldur. Herhangi bir nedenle uygulamanızın sınırlı satırları ve genişleyen sütunları varsa, o zaman ızgarayı yana döndürmeyi düşünün, çünkü bir öğe akışıyla, CSS Izgarası bunları soldan sağa ve yukarıdan aşağıya (yani satır satır) düzenler. .

Ayrıca, ızgaradaki son onay kutuları için stil eklememiz gerekiyor - her eksendeki son öğeler oldukları için tümü sözde öğeler tarafından kapsanmıyorlar.

/* a checked box's (in last column) left borders */
input:nth-of-type(4n-1):checked + input:checked { border-top-left-radius: 0; border-bottom-left-radius: 0;
}
/* a checked box's (in last column) adjacent (below) checked box's top borders */
input:nth-of-type(4n):checked + * + * + * + input:checked { border-top-left-radius: 0; border-top-right-radius: 0;
}

Bunlar bazı zor seçiciler! İlki…

input:nth-of-type(4n-1):checked + input:checked

…esas olarak şunu söylüyor:

bir işaretli <input> işaretli bir öğenin yanındaki <input> ikinci son sütunda.

Ve nth-of-type şu şekilde hesaplanır:

4(0) - 1 = no match
4(1) - 1 = 3rd item
4(2) - 1 = 7th item
4(3) - 1 = 11th item
etc.

Yani, üçüncü onay kutusundan başlıyoruz ve oradan her dörtte birini seçiyoruz. Ve eğer o sıradaki bir onay kutusu işaretlenirse, o zaman onlar da işaretliyse, bitişik onay kutularını da biçimlendiririz.

Ve bu satır:

input:nth-of-type(4n):checked + * + * + * + input:checked

Bunu söylüyor:

An <input> kontrol edilen eleman, bir elemana doğrudan bitişiktir, bu eleman başka bir elemana doğrudan bitişiktir, bu eleman da başka bir elemana doğrudan bitişiktir, bu eleman da bir elemana doğrudan bitişiktir. <input> kontrol edilmiş durumda olan öğe.

Bunun anlamı, işaretli her dördüncü onay kutusunu seçiyoruz. Ve eğer o sıradaki bir onay kutusu işaretlenirse, o da işaretliyse, o onay kutusundan sonraki dördüncü onay kutusuna stil veririz.

Kullanmak için koymak

Az önce baktığımız şey, tasarımın arkasındaki genel ilke ve mantık. Yine, uygulamanızda ne kadar kullanışlı olduğu ızgara tasarımına bağlı olacaktır.

Yuvarlak kenarlıklar kullandım, ancak diğer şekilleri deneyebilir, hatta arka plan efektlerini deneyebilirsiniz (Temani fikirlerin peşinden koşturuyor). Artık formülün nasıl çalıştığını bildiğinize göre gerisi tamamen sizin hayal gücünüze kalmış.

İşte basit bir takvimde nasıl görünebileceğinin bir örneği:

Yine, bu yalnızca statik işaretleme kullanan kaba bir prototiptir. Ayrıca, bir takvim özelliğinde dikkate alınması gereken çok sayıda erişilebilirlik hususu olacaktır.

---

Bu bir paket! Oldukça temiz, değil mi? Demek istediğim, olanlarla ilgili tam olarak "yeni" bir şey yok. Ama buna iyi bir örnek şeyleri seçmek CSS'de. Birleştiriciler ve sözdeler kullanan daha gelişmiş seçme tekniklerine hakimsek, stil verme gücümüz bir öğeyi şekillendirmenin çok ötesine ulaşabilir - gördüğümüz gibi, öğelere başka bir öğenin durumuna göre koşullu stil verebiliriz.

---

Bir Izgara Kapsayıcısında Seçilmiş Öğeleri Koşullu Şekillendirme aslen yayınlandı CSS Hileleri. Malısın bülteni al.

• Akıllı para. Avrupa'nın En İyi Bitcoin ve Kripto Borsası.
• Plato blok zinciri. Web3 Metaverse Zekası. Bilgi Güçlendirildi. SERBEST ERİŞİM.
• KriptoHawk. Altcoin Radarı. Ücretsiz deneme.
• Kaynak: https://css-tricks.com/conditionally-styling-selected-elements-in-a-grid-container/