Büyük CSS Medya Sorgusu Hatası

Etrafınızdaki herkes normalde yanlış olduğunu düşündüğünüz bir şeyi yaptığında [ya da en azından pek ideal olmadığınızı], ancak bir şekilde kimsenin şu ya da bu nedenle bir şey söylemek istemiyor gibi göründüğünde hiç garip hissettiğiniz oldu mu? Herkesin bahtsız bir gözlemci hakkında elinden gelenin en iyisini yaptığını görmek çok garip bir duygu. Bana o eski masalı hatırlatıyor, “İmparatorun Yeni Giysileri”.

CSS medya sorguları hakkında her zaman böyle hissettim. Neden herkes, işi bitirmiyor gibi görünen bir teknolojiyi bu kadar kabul ediyor? Neden bir topluluk olarak bir araya gelip onu gerçek ve anlamlı bir şekilde geliştirmedik? Neden daha iyi bir şey bulamadık?

Bugün, CSS medya sorguları, duyarlı web tasarımının işlevsel temel taşı haline geliyor. Ancak, hiçbir zaman bugün herkesin kullandığı şey için tasarlanmamıştır ve ispatı uygulamadadır. İlk başta iyi tasarlanmış gibi görünen, ancak adımlarını attığınızda düpedüz hantal görünen bir tablet cihazı kullanırken hala sık sık web sitelerine rastlıyorum.

Duyarlı web tasarımına yönelik bu yaklaşımda henüz tam olarak ele almadığımız temelde yanlış bir şey var ve bu konuda imparatoru çıplaklığı için çağıran birkaç sesten biri olmak istiyorum. Neyse ki, bu gün ve yaşta, bu alternatif bakış açısına sahip olduğum için tehlikede yakılma şansının neredeyse sıfır olmasına sevindim.

CSS Medya Sorgularında Yanlış Olan Ne?

CSS medya sorguları bir şey için tasarlandı, ancak o şey duyarlı web tasarımı değil. Deneyimlerime dayanarak, bunları web siteleriyle çalışırken kullanmaya çalışırken karşılaştığım yedi (7) büyük sorun:

1. Sezgisel değil:

Hiçbir web tasarımcısı "CSS medya sorguları sezgiseldir" demedi. Bir medya sorgusunu tanımlama şekliniz oldukça basittir, ancak gerçek tarayıcılarda, gerçek cihazlarda ve sayısız senaryoda işlerin nasıl sonuçlanacağı her zaman tam olarak net değildir.

 @media only screen ve (min-width: 320px) ve (max-width: 480px) {
    /** CSS kuralları buraya gelir **/
}

Yukarıdaki kod, 320 ile 480 piksel arasında olduğunda görüntü alanı için geçerlidir. Ancak, cihaz yatay işletimde bir tablet iken stil kuralı uygulamak gibi daha spesifik bir şey yapmak istediğinizde bu tam olarak kesin [veya sezgisel] değildir. Bunu yapmak için bir medya sorgusu ayarlamak [çeşit] imkansız değildir, ancak kesinlikle sezgisel veya kesin değildir.

2. Sınırlı koşulluluk:

CSS medya sorguları dinamiktir ve CSS'nizde koşullu ifadeler tanımlamanıza olanak tanır. Örneğin, görünüm alanı bununla bunun arasındaysa, diğerini yapın. Bununla birlikte, çoğunlukla görünüm alanıyla sınırlısınız ve modern web tasarımında anlamlı olabilecek daha birçok koşullu senaryo var.

İlerici bir web uygulaması oluşturduğunuzu varsayalım. Bazı UI öğelerini işletim sistemine göre farklı şekilde biçimlendirmenin yararlı olacağı zamanlar vardır. Örneğin, iOS cihazlar için sekme çubuğunun altta olması gelenekseldir, Android için ise durum tam tersidir. Peki, bunun CSS medya sorgularıyla çalışmasını tam olarak nasıl sağlarsınız?

Yapamazsınız, çünkü CSS medya sorguları size izin verecek herhangi bir özellikle oluşturulmamıştır. Bunun yanı sıra, CSS aracılığıyla yapmanız gerekebilecek çok sayıda başka özelleştirme olabilir, ancak değişen derecelerde basit ila gelişmiş koşulluluğa ihtiyacınız olduğunda medya sorguları bir seçenek değildir.

3. Yerel olarak genişletilemez:

CSS medya sorguları, tarayıcıya eklenen işlevlerdir. Bu, yerel olarak genişletilebilir olmadığı anlamına gelir. Başka bir deyişle, CSS arabirimi aracılığıyla yerel olarak CSS ortam sorgularına ekstra ve gelişmiş yetenekler ekleyemezsiniz.

Yeni CSS medya sorgu özellikleri [uzun süredir acı çeken] web standartları süreci tarafından onaylansa bile, bu özelliklerin her yerde bulunabilmesi nedeniyle kullanılabilir hale gelmesi zaman alır. Ek olarak, eklenen her özellik sizin için yararlı olmayabilir, bu nedenle, istediğinizi elde edemezseniz, belirli zorluğunuzu çözmenin başka bir yolunu bulmak zorunda kalırsınız.

Elbette CSS'yi genişletmenin bir yolu var, ancak JavaScript'i gerçekten çok iyi bilmeniz gerekiyor ve bu çoğu web tasarımcısı için pratik bir süreç değil.

4. Güçlendirme için uygun değil:

Bazıları buna inanmakta güçlük çekebilir, ancak mobil cihazlar ortaya çıkmadan önce aslında çok sayıda web sitesi vardı ve hiçbiri mobil uyumlu değildi. Sonuç olarak, bu masaüstü çağındaki web sitelerinin yükseltilmesi gerekiyordu.

Ne yazık ki, CSS medya sorguları bu görev için pek iyi bir seçenek değil. Bu web siteleri, mobil cihazlar alakalı olmadan önce oluşturulduğundan, birçoğu, yanıt veren web tasarımına uygun olmayan, örneğin kenar çubukları, tablo tabanlı düzenler, sekmeli içerik vb. tasarım öğelerine sahiptir. Ayrıca, bu web sitelerinin önemli bir kısmı, WordPress, Drupal, Magento, vb. gibi bir içerik yönetim sistemi (CMS) üzerine kuruludur ve CSS medya sorgularını [ön uç] arka uçtan etkili bir şekilde entegre etmek son derece zordur ve koordine edilmesi neredeyse imkansızdır.

Magento Enterprise, WordPress ve Coldfusion tabanlı özel bir CMS kullanan web sitelerini güçlendirmem gerekti ve CSS medya sorguları kullanarak tüm projeler düpedüz imkansız olurdu [bu, tüm müşterilerimin alternatifimizi kullanmadan önce denediği şeydi. yaklaşmak].

5. Kod verimli değil:

Bir web sayfasını duyarlı hale getirmek için CSS medya sorgularını kullanmak, önemli ölçüde kod çarpması gerektirir. Bu yönergelerin [kesme noktalarınızla] çalışma şekli nedeniyle, her medya sorgu bloğunda bireysel stil kuralları tanımlamanız gerekir.

 bölüm {genişlik: 960 piksel;}

/* Vesika */
@media yalnızca ekran ve (min-cihaz genişliği: 320px) ve (maks-device-width: 480px) ve (-webkit-min-device-pixel-ratio: 2) ve (yönlendirme: portre) {
    bölüm {genişlik: %100}
}
/* Manzara */
@media only screen ve (min-device-width: 320px) ve (max-device-width: 480px) ve (-webkit-min-device-pixel-ratio: 2) ve (yönlendirme: yatay) {
    bölüm {genişlik: %100;}
}

Yukarıdaki kodu yazarken asıl amacım, sayfamdaki <section> öğelerini tüm mobil cihazlarda akıcı [genişlik %100] yapmaktı. Ancak, yerel cihaz algılama yeteneğine sahip olmadığım için, yeni özelliğin ilgili tüm senaryolarda uygulanacağından emin olmak için her mobil odaklı CSS medya sorgu bloğunda bir stil kuralından ödün vermem ve tanımlamam gerekiyor.

Bu, stil sayfası kademesinin işlevsel verimliliğinin ve Do-not-Repeat-Yourself'in iyi geliştirme ilkelerinin geri planda kalması gerektiği anlamına gelir.

6. İş akışı karmaşıklığını artırır:

CSS medya sorguları, neredeyse tamamen mizanpajı yeniden boyutlandırmaya odaklanan duyarlı web tasarımının yalnızca çok özel bir yönünü ele alır. Dolayısıyla, bundan daha fazlasını yapmak için, farkı telafi etmek için JavaScript'e güvenmeniz gerekir. Bu, kod ve araçlar için ek öğrenme gereksinimleri getirir.

Ek olarak, [medya sorgularının] kesme noktalarını işlemesinin kesin olmayan yolu, işlerin başlangıçta istediğiniz gibi çalıştığından emin olmak için web sayfalarınızı çok sayıda sanal ve/veya fiziksel aygıtta test etmek için daha fazla zaman [ve para] harcamanız gerektiği anlamına gelir. . Ayrıca, düzeninizde önemli değişiklikler yaptığınızda her şeyi yeniden test etmeniz gerekir.

CSS medya sorgularını kullanmanın basit ve amaca yönelik eylemiyle, modern bir web sayfası oluşturmak için gereken adım sayısını önemli ölçüde artırırsınız.

7. Performansı kötüleştirir:

CSS medya sorgularının çalışma şekli nedeniyle, web sitenizi duyarlı/mobil uyumlu hale getirmek için normalde olduğundan çok daha fazla CSS koduna ihtiyacınız olacak. HTTPArchive.org'dan alınan verilere göre, CSS dosya boyutları son beş yılda %114 arttı. HTML dosya boyutlarındaki artış, aynı dönemde yaklaşık %53'e ulaştı.

Bu tuhaf durum, özellikle idealden daha az mobil geniş bant ağları kullanan mobil cihazlar için, [duyarlı bir web tasarımı bağlamında] CSS medya sorgularını uyguladıktan sonra her zamankinden daha yavaş olacağından web siteniz için performans etkilerine sahiptir.

Ve artan dosya boyutları sorununun yanı sıra, CSS medya sorgularında web sayfanızın performansını gerçekten iyileştirecek hiçbir dahili mekanizma yoktur. Bunun için, bu geliştirmeleri etkinleştirmek için gelişmiş JavaScript tekniklerinden yararlanmanız gerekecek.

Neden hala bunu kullanıyoruz?

Size web sitelerinin yüzde kaçının CSS medya sorguları kullandığını sorsaydım, cevabınız ne olurdu? Web tasarımcılarının yıllar boyunca katlanmak zorunda kaldıkları tüm strese rağmen, şimdiye kadar büyük olasılıkla evlat edinme kamburluğunu aştığımızı düşünürdünüz, ancak çok yanılıyorsunuz.

Web'in tamamında CSS medya sorguları kullanan web sitelerinin yüzdesi yaklaşık %0,2'dir. Bunu, jQuery kullanan web sitelerinin yüzdesi ile %18 oranında karşılaştırın. Bunun anlamı, jQuery tarafından desteklenen bir web sitesine rastlama olasılığınız, duyarlı bir web sitesine [her ikisi birden olanlar dahil değil] olduğundan 90 kat daha fazladır.

Neden bazı kişilerin karmaşık ve gereksiz olduğunu düşündüğü temel bir teknolojiye [JavaScript] dayalı bir araç takımı, görünüşte daha az karmaşık olan [CSS] ve tartışmalı olarak daha önemli bir sorunu [mobil uyumluluk] ele almayı amaçlayan bir araç takımının bu kadar ilerisinde olsun ki? ? Açıkçası, burada evlat edinmeyi engelleyen ciddi şekilde yanlış bir şey var ve ele alınması gerekiyor.

CSS medya sorguları, belirli bir zorluğun üstesinden gelmek için web tarayıcılarına girmenin yolunu buldu, ancak daha sonra duyarlı web tasarımının tüm ağırlığını omuzlarında taşımak için tasarlandı. 3. sınıf bir kayıt cihazı resitali için pratik yapmak gibi bir şey, sadece sihirli bir şekilde Royal Albert Hall'a taşınıp Handel'in Mesih'inin bir trombon solosunu yapmak gibi; Adil değil!

Modern web tasarımının tüm zorluklarına rağmen, hala bu medya sorgulama işinde olmamız son derece şaşırtıcı. Aşamalı web uygulaması tasarımı gibi yeni alanlardaki bazı yeni sorunlara ek olarak, bazı önemli eski sorunları ele almak için yeterince ileri gitmiyor. Bu nedenle, bir alternatif bulmamızın zamanının geldiğini düşünüyorum. Ama bu tam olarak ne olurdu?

Çözüm nedir?

Tüm bunların çözümü gerçekten çok basit: JavaScript. Şimdi, o dirgeni almadan önce bana açıklama şansı ver.

JavaScript, genişletilebilirliğin kirli bir kelime olmadığı HTML5 üçlüsünün tek bileşenidir. Daha fazla HTML kullanarak HTML işaretlemesini genişletemezsiniz ve CSS'yi CSS ile yerel olarak genişletemeyeceğinizden emin olabilirsiniz. Ancak JavaScript'i JavaScript kullanarak yerel olarak genişletebilirsiniz ve hatta aynısını CSS için de yapabilirsiniz.

CSS'yi JavaScript ile manipüle etmek, W3C'nin Web Standartları Müfredatı'nda kapsamlı bir şekilde tartışılmaktadır. document.stylesheets DOM arayüzü, HTML'nin <link> etiketi kullanılarak başvurulan tüm harici stil sayfaları dahil olmak üzere bir web sayfasına uygulanan stil sayfalarına erişmemizi sağlar. Yapması kolay bir şey değil, ama mümkün.

Bu yüzden ilk cevabı genişletmeliyim: bu sadece JavaScript değil, JavaScript destekli CSS . JavaScript, inanamayacağınız kadar işlevselliğe sahip harika bir platformdur, ancak CSS, çoğu web tasarımcısının çalıştığı yerdir. Bir web tasarımcısının JavaScript işlevselliğinden yararlanmak için bir CSS kural seti yazabileceği bu ikisi arasında bir şekilde bir tür işlevsel köprü oluşturabilirsek, bu web tasarımı için bir şekilde oyun değiştirici olurdu.

Bana biraz kod göster

Son iki yıldır, rKit adında JavaScript destekli yeni bir CSS araç takımı üzerinde çalışıyorum. Tüm fikir, yalnızca duyarlı web tasarımı için CSS medya sorgularını değiştirmek için değil, aynı zamanda web tasarımcılarının/geliştiricilerinin modern web siteleri ve web uygulamaları oluştururken karşılaştıkları bilinen [ve bilinmeyen] bazı zorlukları ele almak için tasarımcı dostu bir araç oluşturmaktı.

Konsept için çok şey var, ancak burada açıklamak için hızlı bir CSS kod parçası:

 #my-element[rk="if @viewport.width 320 ile 480 arasında"]{background-color: #0000ff;}

rKit ile CSS kuralları, değiştirilmiş öznitelik-değer seçicileri gibi görünür. Daha sonra değer bölümünde bir ifade tanımlayabilirsiniz. Bu ifadenin sözdizimi basit ve sezgisel olacak şekilde tasarlanmıştır.

Not : rk , sabit bir öznitelik tanımlayıcısıdır.

Yukarıdaki kod, aşağıdaki CSS medya sorgusuna işlevsel olarak eşdeğerdir:

 @media yalnızca ekran ve (min-cihaz genişliği: 320px) ve (maks-device-width: 480px) {
    #my-element {arka plan rengi:#0000ff;}
}

Ancak, rKit ile yapabileceğiniz daha çok şey var. İşte başka bir hızlı örnek:

 #my-element[rk="if @self.width 320 ile 480 arasında"]{background-color: #00ff00;}

Varlık referansını @viewport olarak değiştirerek, temelde genellikle eleman sorgusu olarak adlandırılan şeyi @self . Şimdi olan şu ki, #my-element genişliği 320 ile 480 piksel arasında olduğunda, verilen bildirim [ background-color: #00ff00 ] uygulanacaktır.

Saf bildirimler yerine sınıfları da kullanabilirsiniz:

 #my-element[rk="if @self.width 320 ile 480 arasındaysa, ardından addClass(c_mobile_320)"]{}
.c_mobile_320 {arka plan rengi: #00ff00;}

Gerçi bu sadece buzdağının görünen kısmı. rKit ile olay yönetimi, mutasyon gözlemi, miktar sorguları, yönlendirme, veri bağlama [7-yönteye kadar] ve bir dizi başka harika şey gibi, tümü saf CSS kodunu kullanarak ve yazmadan yapabilirsiniz. tek bir JavaScript satırı.

rKit piyasaya sürüldüğünde ücretsiz ve açık kaynaklı olacak. Ayrıca, sıfır işleme engellemeyi garanti edecek şekilde kurabileceğiniz özel bir performans paketine de sahip olacak, böylece web sayfası raylar üzerinde bir roket gibi yüklenecek.

Bunu bir araya getirmek epey zaman aldı, ancak yakında [kesinlikle Godot'tan önce] burada olacak ve web tasarımcılarının [ve geliştiricilerin] bununla neler yapabileceğini gerçekten merak ediyorum.

Çözüm

Umarım bu yazıdan, sırf bu yüzden CSS medya sorgularını ezdiğimi düşünmezsiniz. Değilim. Bu, meyve salatasıyla sonuçlandığı için domatesi ezmek gibi olurdu. Daha önce de söylediğim gibi, CSS medya sorguları hiçbir zaman duyarlı web tasarımı için tasarlanmamıştır. Amaca uygun olduğu için seçildi ve hepimiz onu tüm sorunları çözmek için kullanmaya çalışmak gibi bir hata yaptık.

Ne yazık ki, bir web topluluğu olarak, bu ilk hatayı önemli ölçüde geliştirerek veya daha iyi bir alternatif sunarak düzeltmeyi hiçbir zaman başaramadık. Ama ne yazık ki, gösteriler devam etmeli, web siteleri inşa edilmeli ve ilerleme hüküm sürmeli. Değişikliğin vakti geldi.

rKit yalnızca bir seçenek ve bir yanıttır. İlk değil ve kesinlikle son da olmayacak. Ancak, en azından doğru yönde atılmış doğru bir adımdır. Geçmişteki bazı sorunları düzeltme ve daha sonra bunları şimdi ve gelecekte düzeltme fırsatı. Statükoyla nasıl örtüştüğünü görmek ilginç olurdu.

Her şeye rağmen, hata yapmak başlı başına bir amaç değildir; bir öğrenme deneyimi olmalıdır. Şansımız yaver giderse, bir dahaki sefere doğru iş için doğru aleti nasıl kullanacağımızı öğreneceğiz. Yani, asfalt yolda bisiklet sürebiliyor olman, Nurburgring'e bisiklet getirmen gerektiği anlamına gelmez. Bir Porsche getir!