Modernizr, CSS Geri Dönüşlerini Uygulamanıza Nasıl Yardımcı Olabilir?

Yayınlanan: 2021-04-05

Web tasarımcıları olarak, genellikle CSS'nin sunduğu en yeni ve en büyük özellikleri kullanmaya teşvik ediliriz. Ve bunu yapmak için pek çok zorlayıcı neden var. CSS Grid ve Flexbox gibi teknikler, ortak düzenlerin hızlı çalışmasını sağlarken, CSS animasyonları hareket ve etkileşim ekler. Bu sadece buzdağının görünen kısmı.

Ancak, bu özelliklerin uygulanması bazen tarayıcı uyumluluğu pahasına gelebilir. Eski tarayıcılara sahip önemli sayıda kullanıcısı olan web siteleri veya çok yeni özellikler için bazı kişileri dışarıda bırakma riski vardır.

Felsefi olarak konuşursak, bazı tasarımcılar bununla iyi - ve sorun değil. Ancak bu özellikler için geri dönüşler uygulamak düşündüğünüzden daha kolay olabilir. Bu arıza güvenliği önlemleri, belirli bir düzen veya tasarım öğesinin makul bir kopyasını sunar ve eski web tarayıcılarıyla uyumludur.

Bugün size Modernizr özellik algılama kitaplığını bu amaçla nasıl kullanacağınızı göstereceğiz. İşte başlıyoruz!

Modernizr Nedir?

Modernizr, web tasarımcılarının yıllardır güvendiği kullanışlı araçlardan biridir. Bir web sayfası yüklendikçe belirli özellikleri "algılamak" (gerçekte testler yapıyor) için özelleştirilebilen bir kitaplıktır. Buradan, sayfanın <HTML> öğesine CSS sınıfları ekleyerek tasarımcıların kodlarını kitaplığın bulduklarına göre hedeflemesine olanak tanır.

Bizim durumumuzda, CSS Flexbox'ı tespit etmek için kullanacağız. Ancak, HTML ve JavaScript ile ilgili özellikleri de arayabilir. Örneğin, bir tarayıcının HTML5'i destekleyip desteklemediğini belirlemek için kullanabilirsiniz. Değilse, mevcut HTML5 shiv komut dosyası, tabiri caizse, onu kod haline getirmek için kullanılabilir.

Gerçekten güzel olan şey, Modernizr'i projenizin ihtiyaçlarını karşılayacak şekilde özelleştirebilmenizdir. Web sitelerinin kullanıcı arayüzü, yalnızca algılamak istediğiniz öğeleri seçmenize ve seçmenize izin verecektir. Seçimlerinizi yaptıktan sonra, özel bir indirilebilir paket oluşturmak için “Oluştur” düğmesine tıklayın.

Bizim Yapımız

Amaçlarımız için (ve işleri basit tutmak için), Flexbox'ı algılamak için Modernizr paketimizi oluşturuyoruz. Ayrıca kodu küçültmeyi ve CSS sınıfları eklemeyi de seçeceğiz.

Modernizr'in web sitesi.

1. Adım: Demoyu Ayarlama

Tüm bunların nasıl çalıştığını göstermek için birkaç dosya gerekecek - her ikisi de GitHub'da mevcut:

flexgrid.css – Bu bizim basit CSS Flexbox ızgara sistemimizdir. Farklı hizalamalar ve sütun genişlikleri için sınıfları olduğunu fark edeceksiniz. Ek olarak, eski tarz CSS kayan noktalarını da kullanan özel bir .no-flexbox sınıfı seti vardır. Bu, eski tarayıcılarda benzer bir düzen stili oluşturmamıza yardımcı olacaktır.
modernizr-custom.js – Yukarıda belirtilen komut dosyası, CSS Flexbox'ın mevcut tarayıcı tarafından desteklenip desteklenmediğini algılayacaktır.

Ardından, <head> alanındaki yukarıdaki dosyaların her ikisini de çağıran yeni bir HTML belgesi oluşturmak isteyeceğiz. Ek olarak, belgenin örnek bir CSS Flexbox düzenine ve bazı içeriğe ihtiyacı olacaktır.

Deneme için aşağıdaki demo dosyasını kullanmaktan çekinmeyin. Bazı küçük görsel geliştirmelerle birlikte basit bir 3 sütunlu düzen içerir (birazdan daha fazlası).

2. Adım: HTML Belgesini Modern Bir Tarayıcıda Görüntüleyin

Şimdi demomuzun bir tarayıcıda nasıl göründüğünü görme zamanı. Başlamak için, Flexbox'ı destekleyen modern bir web tarayıcısı kullanalım.

3 sütunlu bir CSS düzeni.

En azından Flexbox'ı desteklediğinden şüpheleniyoruz . Kesin olarak nasıl söyleyebiliriz? Modernizr bunu yapmak için burada.

Bizim durumumuzda, demo sayfamızın kaynağına, özellikle <HTML> öğesine bakmak isteyeceğiz. Öğeye eklenen bir flexbox sınıfı varsa, tarayıcımızın özelliği desteklediğini biliyoruz. Devam edin ve sayfa kaynağını tarayıcınızda görüntüleyin - bekleyeceğiz.

Sınıf nerede?

Sayfanın tam kaynağını görüntülemeye çalıştıysanız, <HTML> öğesinin bir sınıf içermediğini fark etmiş olabilirsiniz. Endişelenme - bu normaldir.

Bunun nedeni, sınıfın, seçilen özellik için Modernizr testlerinden sonra çalışma zamanında eklenmesidir. Bu nedenle, tam kaynak kodunda görünmeyecektir.

Tarayıcınızın Geliştirici Araçlarını Kullanın

Bunun yerine, web tarayıcınızın geliştirici araçlarını açın (klavyenizdeki F12 düğmesine basın). Bu, <HTML> öğesine doğru bir bakış sağlayacaktır.

Burada, Firefox Developer Edition'ın en son sürümünü kullanıyoruz. Modernizr'e göre CSS Flexbox'ı destekliyor. Yay!

CSS Flexbox desteğini gösteren Firefox Geliştirici Araçları.

3. Adım: Eski Bir Tarayıcıda CSS Geri Dönüşünü Test Edin

Modern tarayıcımızda her şey oldukça harika görünüyor. Peki ya eski yazılım?

Stillerimiz, Flexbox'ı desteklemeyen tarayıcılarda CSS kayan noktalarını kullanacak şekilde ayarlanmıştır. Bu geri dönüş, eski kurulumlarda bile çok sütunlu bir düzen oluşturmamıza izin vermelidir.

Kullanabilir miyim'e göre Flexbox, Internet Explorer 10, Firefox 2, Chrome 4 ve Safari 3.1'e kadar kısmi desteğe sahiptir. Bu tarayıcıların yaygın olarak kullanılmaya başlanmasından bu yana uzun yıllar geçti. Ancak, özellikle IE hala burada ve orada asılı duruyor.

Modernizr, kısmi desteği test edecek şekilde yapılandırılabilir – ancak işler karışır. Bir dizi farklı durumu hesaba katan daha fazla CSS yedeği yazmaya yol açar. Çok verimli değil. Bu nedenle, testlerimizde ya hep ya hiç desteği arıyoruz.

IE 10'daki demomuza bir göz atalım (bir tarayıcı test servisi aracılığıyla) ve ne olduğunu görelim.

Üçüncü sütunun yeni bir satıra itildiği 3 sütunlu bir CSS düzeni.

O kadar da eski püskü değil. Üçüncü sütunumuz, ince ayar yapılabilen bir sonraki satıra itilir. Peki ya Flexbox desteği?

IE'nin geliştirici araçlarına hızlı bir bakış, <HTML> no-flexbox bir sınıf gösterdiğini gösterir. Bu, Flexbox'ın burada desteklenmediği ve CSS yedeğinin kullanıldığı anlamına gelir.

Internet Explorer Geliştirici Araçları, CSS Flexbox için destek göstermiyor.

CSS Floats için Düzeni Düzeltme

Yedek CSS şamandıralarımız, yaptığımız görsel geliştirmelerle işbirliği yapmayacaktır. Üçüncü sütun, pek hoş görünmeyen ikinci bir sıraya itilir.

Bunun nedeni, yüzer öğelerin, stil sayfasında önceden belirlediğimiz sütun genişliğine dolgu ve kenarlık eklemesidir . Flexbox ise, genel sütun genişliğine ekleme yapmadan bu öğelere uyum sağlayabilir. Bu nedenle sonuçlardaki fark.

Durumu düzeltmek için yapabileceğimiz birkaç farklı şey var. Sütunların genişliğini kesebilir, hatta sütunlar arasındaki kenar boşluğunu daraltabiliriz. Sütun genişliğini 30.66% 28.66% 28.66'ya kesmeyi deneyelim.

Karşılaştırma: CSS Flexbox düzeni (üstte) ve CSS kayan yedek yedeği (altta).

İşe yaradı! Sütunlarımız artık mutlu bir şekilde görüntüleniyor ve Flexbox sürümlerine makul ölçüde benziyor. Bazı boşluk farklılıkları bir yana, bu en azından eski bir tarayıcıda kullanılabilir. İçeri girip orijinaline daha da yaklaşmak için daha fazla değişiklik yapabiliriz.

Tarayıcı Özelliklerini Algılayın ve Buna Göre Ayarlayın

Gösterimiz CSS Flexbox'ı algılamaya odaklanırken, Modernizr çok daha fazlasını yapabilir. HTML Canvas, SVG desteği, CSS Grid ve bir dizi başka yararlı bilgi gibi diğer ortak özellikleri arayabilir.

Buradaki fikir, bir kullanıcının tarayıcısının neler yapabileceğini öğrendikten sonra, kodunuzu buna uyacak şekilde ayarlayabilmenizdir. Bu, örneğin çok daha az endişe verici bir süreç olan daha yeni CSS spesifikasyonlarının benimsenmesini sağlar.

Belki de her durumda yedek kullanmanız gerekmeyecektir. Ancak Modernizr'in yardımıyla bunları uygulamanın kolay olduğunu bilmek güzel.