Akıllı CSS Çözümlerini Değerlendirmek

Faydalı Alternatif Metin Yazma

Ahmed Shadeed yakın zamanda yayınlanan bir makale Facebook’un uygulamasına girdiği yer border-radius kart bileşenlerinde mülkiyet. Facebook’un CSS’sini inceledikten sonra, border-radius değeri olan şey için oldukça dolambaçlı görünüyordu 8px:

.card {
border-radius: max(0px, min(8px, calc((100vw - 4px - 100%) * 9999)));
}

Biraz araştırmadan sonra, Ahmad bu CSS satırının aslında bir “geçiş” olduğunu keşfetti – bazı koşullar altında (yani, kart görünümün tam genişliğinden daha az olduğunda), geçiş “çevrilir”, ve hesaplanan değer değerlendirilerek 0px. (Makalenin tamamını okuyun Bunun nasıl çalıştığına dair ayrıntılar için.)

CSS’de geçiş yapar

Geçişler, CSS’de tamamen yeni bir fikir değildir. Ana Tudor, üzerinde yaptığı demolarla CSS geçiş fikrini keşfeden ilk kişi olabilir. KURU Durum Anahtarlamadeğerine sahip tek bir özel özellik kullandığı yerde 0 veya 1 geçerli ve geçersiz hesaplanmış değerler arasında geçiş yapmak için. Lea Verou, makalesinde benzer bir fikri tartışıyor: –var: ; tek bir özel özellik ile birden çok değer arasında geçiş yapmak için hackbu sefer boşlukları kullanarak, bildirimleri “kapatmak” için geçersiz değerler olarak değerlendirmelerine neden olur.

Bu makalelerde tartışılan örnekler, Facebook’unkiyle tam olarak aynı alanda değil. border-radius boyuta veya düzene göre özelliklerin koşullu olarak değiştirilmesini değil, geliştiricinin seçtiği koşullar altında (her n. çocuk veya bir medya sorgusu içinde). Ancak, tek bir değere dayalı olarak farklı özellikler arasında geçiş yapma fikrini ortaya koyuyorlar ve geçişlerin başka şekillerde nasıl uygulanabileceğini görmek çok da büyük bir adım değil.

Facebook çözümünün Heydon Pickering’s ile daha çok ortak noktası var Flexbox Kutsal Albatros (Ahmed’in makalesinde yöntemin arkasındaki ilham kaynağı olarak da bahsedilmiştir), bir değeri 0 veya 0’dan başka bir değere zorlamak için alışılmadık derecede büyük bir değer (örneğin, 9999) kullanma şeklinde. Facebook’un durumunda CSS min() işlevi daha sonra hesaplanan değeri içeren bir listeden en küçük değeri seçer, ardından max() işlev, aşağıdakileri içeren bir listeden en büyüğünü seçer o değer. Anladım? Ben de değil…

Çok zeki ne kadar zeki?

Şüphesiz zekice ve okuması çok ilginç olsa da, ben Robin Rendle’ın yanındayım. CSS Hileleri bülteni söylediğinde:

Yardım edemem ama bunun biraz olduğunu hissediyorum fazla akıllı.

Burda sana katılmalıyım. Bunun gibi hilelerin bir yeri vardır ve Facebook (en iyi CSS geliştiricilerinin en iyilerini işe almayı göze alabilir) bunlardan biri olabilir. Ancak kişisel olarak konuşursak, bunun gibi bir hile ile her zamankinden biraz daha az optimal ancak çok daha okunabilir bir çözüm (örneğin, bir medya sorgusu) arasında seçim yapmak zorunda kaldığımda, vakaların% 99’unda ikincisi için tombul olurdum. Bunun bazı nedenleri var: Bir ajansta çalışıyorum ve yazdığım kodun çoğunun, çeşitli seviyelerde CSS bilgisine sahip birkaç geliştirici tarafından uzun vadeli olarak sürdürülmesi gerekecek. Çalışmalarının çoğu, sınırlı bir bütçe dahilinde, müşterinin isteği üzerine hataları düzeltmeyi ve yeni özellikler oluşturmayı içerecektir. Müşteri kartlardaki sınır yarıçapını değiştirmek isterse ve bu canavarlıkla karşı karşıya kalırsa? Basit bir değişiklik olması gereken şeyi yapmak için bir öğleden sonra araştırma yapacak zamanları yok. Ama hey, bu senin kişisel projense ve başka kimsenin bu kodu koruması gerekmiyorsa, hemen devam et. Senin için ne işe yararsa.

neredeyim umut etmek Robin yanılıyor bu kısım:

Her küçük özellik bir nükleer cephaneliğin fırlatma kodları kadar karmaşık hale gelirse, o zaman burada yanlış bir şey yaptığımızı, belki de dilin yanlış yöne gittiğini hissetmeden edemiyorum.

Daha önce sahip olmadığımız bir sürü harika şeye sahip olduğumuz, ancak henüz sahip olmadığımız tuhaf bir CSS geçici dönemindeyiz gibi geliyor. her şey bunun gibi çözümleri zarif bir şekilde uygulamamız gerekiyor. Fakat CSS tanrıları bizi dinliyor! Şu anda taslak halinde olan ve çok uzak olmayan bir gelecekte bunun gibi koşullu özellik değerleriyle nasıl başa çıktığımızda devrim yaratacağını ve hack ihtiyacını ortadan kaldıracağını umduğumuz bazı CSS spesifikasyonları var. Stefan Judis’in makalesini okuyun kullanmak için yeniden düzenlendiğinde yukarıdaki kodun nasıl görünebileceği hakkında kapsayıcı sorguları veya ne zaman/başka kurallar.

Çok kullanışlı ancak ayrıntılı bir CSS Grid bildirimine kapsayıcı sorguları nasıl uygulayabileceğimize bir göz atacağımı düşündüm. Aşağıdaki kod bize, minimum öğe genişliğine dayalı olarak, sütun sayısının kullanılabilir alan miktarına göre belirlendiği duyarlı bir ızgara sağlar. herhangi biri 350 piksel veya %100, hangisi daha küçükse (kullanarak min() işlev — yani kap boyutu 350 pikselin altında olduğunda kartlar dikey olarak istiflenir):

.grid {
grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr));
}

Bu harika bir pasaj, ama her seferinde nasıl yazacağımı hatırlama şansım kesinlikle sıfır. (Az önce Google’a yazmam gerekti.) Ancak kapsayıcı sorguları kullanarak, kod daha az ayrıntılı ve daha kasıtlı görünüyor.

@container (width > 350px) {
.grid {
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
}

Konteyner sorguları ve ne zaman/else ifadelerinin şu anda tarayıcı desteği çok az veya hiç yok (ikincisi durumunda hiç yok), ancak CSS’deki mevcut ilerleme hızı ve bu şeyler üzerinde çok çalışan inanılmaz insanlar göz önüne alındığında, ben Bu tür durumlar için CSS yazmanın çok uzun sürmeyeceğine bahse girmek çok daha kolay hale geliyor.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.