Modernizr Nedir?

Modernizr, kullanıcılarınızın tarayıcılarında yeni nesil web teknolojilerinin kullanılabilirliğini otomatik olarak algılayan küçük bir JavaScript kodudur. “ UA koklama ” temelli tarayıcıların tüm aralıklarını kara listeye almak yerine , Modernizr , kullanıcılarınızın deneyimlerini tarayıcılarının gerçek yeteneklerine göre kolayca ayarlamanızı sağlamak için özellik algılama özelliğini kullanır .

Modernizr'in size verdiği bu bilgi ile tarayıcılarda bu yeni özelliklerden yararlanarak bunları kullanabilecek veya kullanabilecek ve yine de kullanamayan tarayıcılar için durumu kontrol etmenin kolay ve güvenilir yollarını kullanabilirsiniz.

Özellik algılama nedir?

Web geliştirmenin karanlık çağlarında, kullanıcılarının Awesome-New-Feature ™ teknolojisini kullanıp kullanamayacaklarını belirlemek için çoğu zaman UA koklamalarına başvurmak zorunda kaldık . Pratikte, aşağıdaki gibi bir şey yapmak anlamına gelir

if (browser === "the-one-they-make-you-use-at-work")

{ getTheOldLameExperience(); }

else {

showOffAwesomeNewFeature();

}

Şimdi bu iyi görünüyor değil mi?

Awesome-New-Feature ™ kullanıyoruz ve tabii ki eski bir kabuk tarayıcıda desteklenmiyor, değil mi? Bu durum çok iyi olabilir - bugün. Ancak, bu tarayıcının bir sonraki sürümü Awesome-New-Feature ™ için destek eklerse ne olur ? Şimdi geri dönüp kodunuzu denetlemelisiniz, bu kontrolü yaptığınız her yeri güncelleyiniz. Bu, her tarayıcı için her özellik güncellemesi hakkında bilgi edinme zamanınız olduğunu varsayar. Daha da kötüsü, aslında en yeni sürümde çalıştığını fark edinceye kadar, tüm bu kullanıcılar ofise geri dönüyorlar getTheOldLameExperience.

Bu kullanıcılara - görünüşe göre bir sebepten dolayı standart olmayan bir web sitesi verildi - aslında tarayıcı ve işletim sistemiayarlarına girebilir ve tarayıcının adını değiştirebilir (veya user-agent- UA sniff gerçekleştirirken kodla karşılaştırdığımız şey). Bu noktada - kodunuz anlamsız. Tüm özelliklerinizi gerçekten destekleyebilen ve muhtemelen yapmayanlara izin veren kullanıcıları engelliyorsunuz. Neredeyse herkes kırık bir deneyim alır. Daha iyi bir yolu olmalı!

Var, ve denir Feature Detection, ve daha çok buna benziyor

if (Modernizr.awesomeNewFeature) { showOffAwesomeNewFeature(); } else { getTheOldLameExperience(); }

Kullanıcıların one-they-make-you-use-at-worktarayıcıda olup olmadığına karar vermek yerine ve bunun Başarısız Yeni Özelliközelliğini kullanabildikleri ya da erişmedikleri anlamına geldiği varsayılarak , özellik algılama gerçekten Awesome-New-Feature ™ uygulamasının çalışıp çalışmadığını kontrol eder . tarayıcı, size a ya verir ve trueya falsesonucunu. Şimdi en sevdiğiniz tarayıcı Awesome-New-Feature ™ desteği eklediğinde , kodunuz orada çalışır - otomatik olarak! Artık güncellemeye gerek yok. Kod benzer olmakla birlikte, gerçek niyetine çok daha açık

Modernizr indiriliyor

Modernizr'in son versiyonundan bu yana çok şey değişti. Artık tek bir temel modernizr.jsdosya yok. Bunun yerine, daha önce sahip olabileceğiniz gibi İndirme sayfasına gidin ve projenizde kullanmak istediğiniz özellikleri seçin. Bu sayede mümkün olan en küçük dosyayı sağlayabiliriz, bu da sizin için daha hızlı bir web sitesi anlamına gelir. Bunu yaptıktan sonra, Builddüğmeye basmanız yeterli ve kendi modernizme sahip Modernizr'iniz var.

BuildÖzel olarak indirebildiğiniz çıktıya ek olarak, yıllardır her zaman bir tane oluşturduğunuzu fark edebilirsiniz - iki yeni seçenek vardır.

Komut Satırı Yapılandırması

3.0'dan beri Modernizr, inşa sistemini npm'de bir düğüm modülü olarak da gönderiyor . Bu, yeni bir tarayıcı sekmesi açmak zorunda kalmadan, farklı projeler için Modernizr'in çok sayıda derlemesini hızla oluşturabileceğiniz anlamına gelir.

Npm yüklendikten sonra , modernizr komut satırı aracını çalıştırarak yükleyebilirsiniz.

npm install -g modernizr

Artık özel yapımınızı yapmaya başlamaya hazırsınız! Yapılandırma dosyasını yapı menüsünden indirebilirsiniz ("Komut Satırı Yapılandırması" altında). Bu size , özel yapınızı oluşturmak için Modernizr modülüne vereceğiniz bir JSON dosyası verecektir.

modernizr -c modernizr-config.json

Komut satırını siteden indirdiğiniz yapılandırmanın dosya yolunu yapılandırmanız gerektiğini unutmayın. Yukarıdaki örnekte, dosyayı, modernizrindirdiğimiz klasördençalıştırıyoruz modernizr-config.json.

Grunt Config

Sitenizi her güncellediğinizde, derlemenizi komut satırından el ile çalıştırmak istemiyorsanız, bunu sizin için yapacak bir Gruntgörevini de indirebilirsiniz . Bu yapılandırma dosyası, özel sürümünüzü otomatik olarak oluşturmak için grunt-modernizr ile birlikte kullanılabilir . Sadece Gruntfile’ına ekle , ve sen yarışlara gidiyorsun.

Size yolları ile sağlanan yapılandırma dosyasını güncellemeniz gerektiğini unutmayın devFileve outputFile. Grunt-modernizr için daha fazla belge var.

Yapılandırma seçenekleri

Kullanılabilir seçenekler ve özellik algılamalarına ek olarak, bir dizi ek yapılandırma seçeneği vardır.

classPrefix- varsayılan:""

Her CSS sınıfından önce eklenen bir dize.

enableJSClass- varsayılan:true

Olsun ya da olmasın güncellemek için .no-jsiçin .jskök elemana.

enableClasses- varsayılan:true

Modernizr'ın kendi CSS sınıflarını eklemesi gerekip gerekmediği

Bu seçenekler hakkında daha fazla bilgi için sonraki bölüme bakın

Modernizr'i CSS ile kullanma Modernizr'in dersleri

Varsayılan olarak, Modernizr, tüm testlerinizde kök öğesi ( <html>web siteleri için) için sınıflar ayarlar . Bu, desteklendiğinde her özellik için sınıfın eklenmesi ve no-olmadığı zaman bir ön ek ile eklenmesi anlamına gelir örn. .featureVeya .no-feature). Bu, aşamalı geliştirmeyle özellik eklemenin çok kolay olmasını sağlıyor!

Modernizr'in CSS gradyanları için tespitini dahil ettiğinizi varsayalım. Tarayıcıya bağlı olarak, ya

<html class="cssgradients">da <html class="no-cssgradients">.

Şimdi bu iki durumu biliyorsunuz, her iki vakayı da kapsayacak şekilde CSS yazabilirsiniz.

.no-cssgradients .header { background: url("images/glossybutton.png"); } .cssgradients .header { background-image: linear-gradient(cornflowerblue, rebeccapurple); } classPrefix

Modernizr sınıf isimlerinden biri Zaten mevcut olan sınıflardan biriyle çatışmalarda, bir ekleme seçeneği vardır classPrefixiçini config . Bir sınıfa eklenen gizli saptamayı düşünün .hidden- bir çok kod tabanını halihazırda kullanmakta, bir şeyleri saklamaktadır . Bu özel algılamayı kullanmak isterseniz, aşağıdakileri yapılandırmanız olarak kullanabilirsiniz

{ "classPrefix": "foo-", "feature-detects": ["dom/hidden"] }

Bu <html class="hidden">, sizin elde edeceğiniz anlamına gelir <html class="foo-hidden">.

no-js

Varsayılan olarak, Modernizr tekrar sunacağına <html class="no-js">için <html class="js">. Bu, yalnızca JavaScript'i çalıştıran ortamlarda gösterilmesi gereken belirli öğeleri gizleyebilmenizi sağlar. Bu değişikliği devre dışı bırakmak istiyorsanız, Belirleyebileceğiniz enableJSClassiçin falsede config .

enableClasses

Örneğin, kullanıyorsanız classPrefix, supports-o öneki öğenize eklemeniz gerekir html. yani. supports-no-jsyerine no-js.

Eğer Modernizr 's sınıfların herhangi eklemek istemiyorsanız Son olarak, ayarlayabileceğiniz enableClassesiçin false. Bu vermezetkisi .no-jso güncellenmiş ya ayarlamak gerekir istemiyorsanız bu yüzden, güncelleme enableJSClassiçin falseyapılandırmanızda.

Modernizr'i JavaScript ile Kullanma Modernizr nesnesi

Modernizr, tüm özellik algılamalarının sonuçlarını Modernizrnesne üzerinden takip eder . Bu, her bir test için ilgili bir mülkün ekleneceği anlamına gelir. Ne yapmak istediğini anlamak için kodunda doğruluk testi yapmalısın.

if (Modernizr.awesomeNewFeature) { showOffAwesomeNewFeature(); } else { getTheOldLameExperience(); }

Yardımcı yöntemleri

Modernizr, isteğe bağlı olarak, Modernizr API'sı hakkında daha fazla bilgiyi okuyabileceğiniz bir dizi ek fonksiyon sunar.

Modernizr API'sı Modernizr.on

Modernizr.on(feature,cb)

Modernizr.on('flash', function( result ) { if (result) { // the browser has flash } else { // the browser does not have flash } });

Modernizr.addTest

Modernizr.addTest(feature,test)

Kendi özellik algılarınızı oluşturmanın en yaygın yolu, Modernizr.addTestbir dize (herhangi bir noktalama işareti olmadan yalnızca küçük harf) ve bir boole sonucunu döndürecek yürütme isteğinizle çağırmaktır.

Modernizr.addTest('itsTuesday', function() { var d = new Date(); return d.getDay() === 2; });

Yukarıdakiler çalıştırıldığında, Modernizr.itstuesday'ı truesalı falsegününe ve haftanın diğer günlerine ayarlayacaktır . Dikkat edilmesi gereken bir şey, modernizr nesnesine eklendiğinde, özellik tespit işlevlerinin adlarının her zaman küçük harflerle ayrıştırılmasıdır. Bu var Modernizr.itsTuesdayolmayacak, ama Modernizr.itstuesdayolacak anlamına gelir . Yalnızca herhangi bir özellik algılama işlevinden döndürülen değere baktığımızdan, aslında bir işlevi kullanmanız gerekmez. Basit tespitler için, sadece bir boole değeri döndürecek bir ifadeyi geçmek sadece iyi çalışır.

Modernizr.addTest('hasJquery', 'jQuery' in window);

Daha önce olduğu gibi, Modernizr.hasjqueryjQuery sayfaya eklendiyse, yukarıdaki işlemler doğru olacaktır. Bir işlev kullanmamak, tarayıcınız için az miktarda yük tasarrufu sağlar ve kodunuzu daha okunabilir hale getirir. Son olarak, aynı zamanda özellik isimlerinin ve testlerinin bir nesnesini geçme yeteneğine de sahipsiniz. Tek seferde birden fazla tespit eklemek istiyorsanız bu özellik kullanışlıdır. Anahtarlar her zaman bir dize olmalı ve değer ya bir boole ya da bir boole döndüren işlev olabilir.

var detects = { 'hasjquery': 'jQuery' in window, 'itstuesday': function() { var d = new Date(); return d.getDay() === 2; } } Modernizr.addTest(detects);

İlk yöntemler ile bu yöntem arasında gerçekten bir fark yoktur, sadece daha okunabilir kodlar yazmanıza izin veren bir kolaylıktır.

Modernizr.atRule

Modernizr.atRule(prop)

var keyframes = Modernizr.atRule('@keyframes'); if (keyframes) { // keyframes are supported // could be `@-webkit-keyframes` or `@keyframes` } else { // keyframes === `false` }

Modernizr._domPrefixes

Modernizr._domPrefixes tam olarak _prefixes ile aynıdır , ancak kebap-case özellikleri yerine, tüm özellikleri onların büyük harfli varyantıdır.

Modernizr._domPrefixes === [ "Moz", "O", "ms", "Webkit" ]; Modernizr.hasEvent

Modernizr.hasEvent(eventName,[element])

Modernizr.hasEventTarayıcının sağlanan bir etkinliği destekleyip desteklemediğini belirlemenizi sağlar. Varsayılan olarak, bu algılamayı bir div öğesinde yapar

hasEvent('blur') // true;

Ancak, bir nesneyi div dışında bir şey üzerinde algılamak için hasEvent için ikinci bir argüman olarak verebilirsiniz.

hasEvent('devicelight', window) // true;

Modernizr.mq

Modernizr.mq(mq)

Modernizr.mq, geçerli tarayıcı penceresi durumunun bir medya sorgusuyla eşleşip eşleşmediğini programlı olarak kontrol etmenizi sağlar.

var query = Modernizr.mq('min-width: 900px)'); if (query) { // the browser window is larger than 900px }

Yalnızca geçerli medya sorguları desteklenir, bu nedenle her zaman medya sorgunuzla değerler eklemelisiniz

// good Modernizr.mq('min-width: 900px)'); // bad Modernizr.mq('min-width');

Medya sorgularının genel olarak desteklendiğini test etmek isterseniz,

Modernizr.mq('only all'); // true if MQ are supported, false if not

Tarayıcı medya sorgularını desteklemiyorsa (ör. Eski IE) mq her zaman false döndürecektir.

Modernizr.prefixed

Modernizr.prefixed(prop,[obj],[elem])

Modernizr.prefixed, DOM stili camelCase (css stili kebab-case'in tersine) formunda bir string css değerini alır ve tarayıcının gerçekten desteklediği o özelliğin (muhtemelen önekli) sürümünü döndürür.

Örneğin, eski Firefox’ta ...

prefixed('boxSizing')

'MozBoxSizing'i döndürür Daha yeni bir Firefox'ta, aynı zamanda düzeltilmemiş sürümü destekleyen diğer herhangi bir tarayıcı da geri dönecektir boxSizing. Hiçbir özelliği desteklemeyen herhangi bir tarayıcı, geri dönecektir false. Varsayılan olarak, önekli bir DOM öğesine karşı kontrol edilir. Başka bir nesnede bir mülk olup olmadığını kontrol etmek isterseniz, bunu ikinci bir argüman olarak iletmeniz yeterlidir.

var rAF = prefixed('requestAnimationFrame', window); raf(function() { renderFunction(); })

Bunun gerçek işlevi döndüreceğini unutmayın - işlevin adı değil. Mülkün gerçek ismine ihtiyacınız varsa, falseüçüncü bir argüman olarak geçin

var rAFProp = prefixed('requestAnimationFrame', window, false); rafProp === 'WebkitRequestAnimationFrame' // in older webkit

Öneklenecek bir yaygın kullanım vakası, hangi geçiş bitiş etkinliğinin bağlanacağını belirlemeye çalışıyorsanız, şunun gibi bir şey yapabilirsiniz ...

var transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', * Saf 6, Android Browser 'MozTransition' : 'transitionend', * only for FF < 15 'transition' : 'transitionend' * IE10, Opera, Chrome, FF 15+, Saf 7+ }; var transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];

Benzer bir arama yapmak istiyorsanız, ancak kebab durumunda, prefixedCSS'yi kullanabilirsiniz .

Modernizr.prefixedCSS

Modernizr.prefixedCSS(prop)

Modernizr.prefixedCSSgibidir Modernizr.prefixed, ancak sonucu tireli formda döndürür

Modernizr.prefixedCSS('transition') // '-moz-transition' in old Firefox

Sadece CSS stili özellikleri için yararlı olduğundan, yalnızca bir HTMLElement'e karşı test edilebilir. Özellikler hem DOM stili camelCase hem de CSS stili kebap durumu olarak geçirilebilir.

Modernizr.prefixedCSSValue

Modernizr.prefixedCSSValue(prop,value)

Modernizr.prefixedCSSValue Önceden belirlenmiş css özellikleri için bir yol testi (örn. ekran: -webkit-flex)

Modernizr.prefixedCSSValue('background', 'linear-gradient(left, red, red)')

Modernizr._prefixes

Modernizr._prefixes, önek ve öneklenmiş CSS gibi şeylerin içine karşı test ettiğimiz öneklerin iç listesidir . Kodunuzda kullanabileceğiniz basit bir kebap-case satıcısı önekleri dizisidir. Bazı yaygın kullanım durumları arasında bir CSS özelliğinin olası tüm önekli sürümlerini oluşturma bulunur

var rule = Modernizr._prefixes.join('transform: rotate(20deg); '); rule === 'transform: rotate(20deg); webkit-transform: rotate(20deg); moz-transform: rotate(20deg); o-transform: rotate(20deg); ms-transform: rotate(20deg);'

Bir CSS değerinin olası tüm önekli sürümlerini oluşturma

rule = 'display:' + Modernizr._prefixes.join('flex; display:') + 'flex'; rule === 'display:flex; display:-webkit-flex; display:-moz-flex; display:-o-flex; display:-ms-flex; display:flex'

Modernizr.testAllProps

Modernizr.testAllProps(prop,[value],[skipValueTest])

TestAllProps, belirli bir CSS özelliğinin, bazı önceden belirlenmiş formlarda, tarayıcı tarafından desteklenip desteklenmediğini belirler.

testAllProps('boxSizing') // true

Özellik değerinin geçerli olup olmadığını sınamak için isteğe bağlı olarak dize biçiminde bir CSS değeri verilebilir.

testAllProps('display', 'block') // true testAllProps('display', 'penguin') // false

Yerel algılama (@supports) mevcut olmadığında, değer denetimini atlamak için bir boole, üçüncü bir parametre olarak geçirilebilir.

testAllProps('shapeOutside', 'content-box', true);

Modernizr.testProp

Modernizr.testProp(prop,[value],[useValue])

Sadece testAllProps gibi , sadece dizinin herhangi bir satıcının öneki sürümünü kontrol etmez. Özellik adının camelCase'de sunulması gerektiğini unutmayın (örn. Kutu boyutlandırmayı kutu boyutlandırma değil)

Modernizr.testProp('pointerEvents') // true

Belirli bir değerin desteklenip desteklenmediğini kontrol etmek için isteğe bağlı ikinci bağımsız değişken olarak bir değer de sağlayabilirsiniz.

Modernizr.testProp('pointerEvents', 'none') // true Modernizr.testProp('pointerEvents', 'penguin') // false

Modernizr.testStyles

Modernizr.testStyles(rule,callback,[nodes],[testnames])

Modernizr.testStylesbir CSS kuralı alır ve mevcut sayfaya (muhtemelen birden fazla) DOM öğesiyle birlikte enjekte eder. Bu, IDL'yi kontrol ederek tespit edilemeyen özellikleri kontrol etmenizi sağlar .

Modernizr.testStyles('#modernizr { width: 9px; color: papayawhip; }', function(elem, rule) { // elem is the first DOM node in the page (by default #modernizr) // rule is the first argument you supplied - the CSS rule in string form addTest('widthworks', elem.style.width === '9px') });

Testiniz birden çok düğüm gerektiriyorsa, sayfaya ek kaç tane ek öğe ekleneceğini gösteren üçüncü bir argüman ekleyebilirsiniz. Ek düğümler elem, geri çağrılanın ilk argümanı olarak döndürülen çocuklar olarak enjekte edilir .

Modernizr.testStyles('#modernizr {width: 1px}; #modernizr2 {width: 2px}', function(elem) { document.getElementById('modernizr').style.width === '1px'; // true document.getElementById('modernizr2').style.width === '2px'; // true elem.firstChild === document.getElementById('modernizr2'); // true }, 1);

Varsayılan olarak, tüm ek öğelerin bir kimliği vardır; bu dizinin modernizr[n]nerede nolduğu (örneğin, ilk ek, ikinci genel, #modernizr2ikinci ek #modernizr3, vb.). İşleviniz için daha anlamlı kimliklere sahip olmak istiyorsanız, bunları dördüncü bir argüman olarak dizeler dizisi olarak sağlayabilirsiniz.

Modernizr.testStyles('#foo {width: 10px}; #bar {height: 20px}', function(elem) { elem.firstChild === document.getElementById('foo'); // true elem.lastChild === document.getElementById('bar'); // true }, 2, ['foo', 'bar']);