Bildiğiniz gibi, genişlikten daha duyarlı web siteleri oluşturmak için çok daha fazlası var. Siteleri diğer faktörlere göre ayarlamak için size geri bildirim sağlayan sensörlere ihtiyacınız vardır.
Kullanıcınızın sensöründen veya tarayıcısından gelen geri bildirimlerimizi iyileştirmenin en iyi yolu, adında bir JavaScript kütüphanesi kullanmaktır. Modernizr. Bu makalede, genişliğin ötesine geçtiğinizde neden Modernizr'in paha biçilemez bir araç olduğunu açıklayacağım.
Ön geliştirmede, geliştiriciler bir siteyi belirli bir tarayıcı tarafından kullanılan düzen motorunun kısıtlamalarına uyacak şekilde ayarladı. 2003 yılında sadece üç tarayıcı vardı: Netscape, Internet Explorer ve Opera. Firefox, Safari ve ilk mobil tarayıcı olan Opera Mini, 2005 yılında piyasaya sürüldü. Chrome 2008'e kadar serbest bırakılmadı.
Şu anda her biri kendi mobil versiyonuna sahip beş ana tarayıcı var. Bu tarayıcı dizisinde, kullanıcıların yeni sürüme geçirmedikleri eski sürümler de vardır. Birden fazla ekran boyutu için çoklu düzenler oluşturmanın sonunda sıfır toplamlı bir oyun haline geldiği gibi, birden fazla tarayıcı için birden çok ön uç oluşturuyor.
Yeni, son teknoloji mobil tarayıcıları barındırmak için duyarlı web tasarımı kullanıyoruz. Ancak, yeni tarayıcıları barındırırken, eski tarayıcıların pahasına yapılmaması önemlidir.
Tarihsel olarak optimizasyon, en popüler tarayıcılar için bir site oluşturmanın bir ürünü olarak geldi ve sitenin bir dizi popüler tarayıcıda aynı görünmesini sağlamak için ince ayar yaptı. Tasarımların tüm tarayıcıların yeteneklerini barındırması gerekecekti.
Progressive enhancement, tarayıcıların modern özellikleri desteklememesiyle baş edebilecek bir stratejidir. En güncel özellikler için oluşturmanın bir cazibesi vardır, ancak duyarlı bir web'de, bir sitenin tasarımı, görüntülendiği çerçeveye göre bağlamsaldır. Duyarlı web tasarımı, en belirgin değişen bağlamı (çerçevenin boyutu) çözdüğü için popüler hale geldi, ancak tarayıcının içeriği, viewport boyutundan çok daha derine iniyor.
SVG, yüksek çözünürlüklü ekranlar için harika bir çözüm sunar, ancak eski tarayıcılardaki desteği nedir? IE 8 veya daha eski sürümlerde desteklenmez, bu yüzden bu tarayıcıyı destekliyorsanız bir geri dönüş oluşturmak zorundasınız. Tarayıcıyı tanımlayabilir ve bu tarayıcıya karşı alternatif stiller sunabilirsiniz, ancak SVG'yi desteklemeyen her tarayıcı için aynı alternatif stillere sahip olmanız gerekir.
SVG'yi desteklemeyen her tarayıcıya karşı kullanılacak bir stil yazabilirseniz daha kolay olmaz mıydı? Bu şekilde, eski sürümlerin kullanıcılarından hata raporlarını takip etmek zorunda kalmazsınız. Geri dönüşü bir kez kurup unutursun.
Geleneksel olarak, özellik saptama, tarayıcının kullanıcı aracısı tespit edilerek gerçekleştirilmiştir. Bu, navigator nesnesini kullanarak JavaScript ile yapılır. Navigator nesnesi, Netscape günlerine kadar uzanır ve tarayıcılar arası uyumluluk açısından geliştiricinin en iyi aracı olarak kullanılır.
Chrome'unuz varsa ve DevTools'u etkinleştirdiyseniz, bir sayfaya sağ tıklayıp Elementi İncelemek'i seçerek tarayıcınızın web denetleyicisini açın. Ardından, Konsol'a tıklayın ve düzeltme yapıldıktan sonra “navigator.userAgent” yazın ve Enter'a basın. Bu, kullandığınız tarayıcıyı tanımlamak için kullanılan bir metin dizesi olan geçerli tarayıcınızın kullanıcı aracısını döndürür. Chrome aşağıdakileri döndürür:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35Birçok yönden, navigator nesnesi, kullanıcılarımızın neler yapabileceği konusunda sistemimizi bilgilendirmek için elimizdeki en iyi sensörlerden biridir; Ancak, gelecekteki dostça değil. Sitenizin aktüatörlerini, tarayıcının neyi yaptığı ve desteklemediği konusunda birçok varsayım üzerinde temellendirir. Ayrıca, kullanıcılar tarayıcıyı destekleyemeyebilecek sitelere erişmek için yapılandırabileceğinden de güvenilmezdir.
Modernizr, tarayıcıdaki özellikleri algılamak için kullanılan bir JavaScript kütüphanesidir. Sayfanızın başına yüklenir ve sayfa yüklenirken çalışır. Sitenize eklediğinizde jQuery gibi başka herhangi bir JavaScript kütüphanesi eklemek kadar basittir, ancak bir kez eklendiğinde, Modernizer size sayfanızı oluşturma ve her kullanıcıya kaliteli bir deneyim sunulmasını sağlama konusunda inanılmaz bir kontrol sağlar.
Yüklendikten sonra, Modernizr, tarayıcının hangi özellikleri desteklediğini belirlemek ve test etmek için kullanabileceğiniz bir JavaScript nesnesi oluşturmak için kullanıcının tarayıcısına karşı bir dizi denetim gerçekleştirir. Modernizr bu özellikler için destek oluşturmaz; Modern özellikler için geri dönüş desteği sağlamanın bir yolunu sunar. Örneğin, SVG durumunda, Modernizr SVG desteğinden yoksun tarayıcılar için bir geri dönüş resmi sunmamızı sağlar.
Modernizr, HTML etiketine bir dizi sınıf uygular ve size, ilgili CSS sınıflarını kullanarak sayfanın CSS'sini değiştirme olanağı verir. Bu CSS sınıfları, sayfalarınızı, bir sayfa için aşamalı geliştirmelere izin verecek şekilde ayarlayan aktüatörleri oluşturmak için CSS sistemlerini kullanmanıza izin verir.
Kullanıcı Aracısı'nı kullanmanın aksine, Modernizr, özellikleri boolean (true veya false) değerlerini döndüren bir dizi JavaScript testi yürüterek doğrudan tespit eder. Bu, html etiketine ayarlanan sınıfları belirler ve size, bir özelliğin kullanılabilir olup olmadığını algılamak için JavaScript'i kullanma olanağını verir.
Modernizr'i yüklemek, sayfanızın başındaki JavaScript kitaplığına bağlanmak kadar basittir, ancak yükleme işleminin karmaşık hale geldiği yerde, ihtiyacınız olan sürümü oluşturmaktır. Modernizr iki versiyonda indirilebilir. geliştirme sürümü ve üretim sürümü.
Geliştirme sürümü tam 42 KB, sıkıştırılmamış bir dosyadır. Bu sürüm, JavaScript konusunda iyi bir fikir sahibi olmanız ve gerçekleştirdiği testlerde bazı düzeltmeler yapmak istiyorsanız mükemmeldir. Sıkıştırılmamış olduğu için, okunması ve artırılması kolaydır, ancak en iyisi, geliştiricilere JavaScript'in sıkı bir şekilde kavranmasıdır.
Javascriptte tamamen usta olmayan veya hızlı bir şekilde Modernizr'ın özelleştirilmiş bir versiyonunu oluşturmak isteyenler için, kütüphanenin üretim versiyonunun devreye girdiği yer burasıdır. Sitedeki üretim sürümü oluşturma aracı, yalnızca istediğiniz sınamalarla bir sürüm oluşturma olanağı sağlar.
Bu, sadece belirli bir test setine ihtiyacınız olduğunu bildiğiniz zaman işe yarar. Örneğin, siteniz CSS kutu gölgelerinden yararlanmayabilir, ancak CSS geçişlerini desteklemesi gerekebilir. Oluşturma aracını kullanarak, ihtiyacınız olan testleri ekleyebilir ve ihtiyacınız olmayanları ekleyebilir, kaynak kodu düzeltmesini ve kullanıcının toplam yükleme süresini kısaltabilirsiniz.
Örneğimiz için geliştirme sürümü üzerinde çalışacağım. Bir site oluşturduğumda, tam sürümle çalışmanın en iyisi olduğunu ve sitenizde hangi özellikleri kullanacağınızı öğrendikten sonra, sürümü kırptığınızı görüyorum.
Modernizr ile bazı basit özellik algılama yapalım. Ham örnek site ile başlayacağız.
Tarayıcımızın SVG'yi destekleyip desteklemediğini belirlemek için bu küçük testi kullanalım. Sadelik adına, desteği tespit etmek için sayfaya yalnızca iki span etiketi ekleyeceğiz.
Huzzah! You have SVG support.BOO! You don't have SVG support.Bunu SVG'yi destekleyen bir tarayıcıda test ederseniz, “Huzzah! SVG desteğiniz var. ”SVG'yi desteklemeyen bir tarayıcınız varsa,“ BOO! SVG desteğiniz yok. ”Mesajı.
Bu örnek oldukça ilkeldir, ancak çapraz tarayıcı sorunlarını gidermek için Modernizr kullanmanın temel fikrini gösterir. Eski kullanıcı aracısı yöntemiyle aynı düzeltmeyi yapıyorsak, SVG'yi desteklemeyen ve her biri için CSS'mizi değiştiren her tarayıcı için bir stil sayfamız olmalı. (İlgilenen herkes için, SVG desteği olmayan tek büyük tarayıcılar Internet Explorer 7 ve altındadır.)
Svg / no-svg sınıfını sayfadaki html'ye ekleyerek, CSS'nizin artık mevcut CSS kurallarını geçersiz kılmak için kullanılabilecek bir seçici var. Üstteki etikette olduğundan, sayfadaki diğer sınıfları geçersiz kılmak için kullanılabilir.
Dolayısıyla, bu durumda, her iki span etiketi de görüntülenir: yok; SVG desteği yoksa, ekran: .no sınıfıyla span etiketindeki satır içi bildirimi, ekranı geçersiz kılar: html etiketindeki no-svg kuralına gizli teşekkürler.
Aynı fikrin daha kullanışlı bir örneğini deneyelim. Tarayıcıda SVG'yi desteklemiyorsa, sayfada bir SVG arka plan resmi olmasını isteyebiliriz. Varsayılan olarak PNG görüntüsünü kullanacağız. Bu şekilde, SVG gerekli olmadıkça ve aşamalı bir geliştirme haline gelmedikçe sunulmaz.
Artık, yüksek çözünürlüklü ekranlara sahip kullanıcılar için harika ve net görünecek harika bir SVG kafatasına sahibiz ve eski tarayıcılara sahip kullanıcılar için hala iyi görünüyor.
Modernizr hakkında öğrenilecek çok miktarda bilgi var. Tarayıcıların SVG'yi desteklediği bir çalışan listesini hatırlamak veya sürdürmek zorunda kalmadan tarayıcılar arası yeteneğin nasıl çalıştığını gösterdik.
Olağanüstü şekilde, kullanıcı aktüatörlerine hızlı ve oldukça işlevsel web siteleri oluşturmak için hizmet edecek bir sistem olarak işlev görür.
Modernizr'i projelerinizde kullanıyor musunuz? Duyarlı içerik sunmak için başka hangi yöntemleri kullandınız? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, ıraksak çizgiler görüntü Shutterstock üzerinden.