Css değerinin tarayıcı tarafından desteklenip desteklenmediğini nasıl kontrol edebilirim?

Question

Javascript'te çok yetenekli değilim, lütfen bana eşlik et. Safari 6 ve altı ve üstü android mobil tarayıcılar ve belki de daha fazlası css VH değerini desteklemiyor. DIV # kimliğim veya sınıfım, görünümün yüksekliği değil. sizin için kısayol olarak verilen kod İşte

Check whether a css value is supported

edilir:

Aşağıda im gerçekten css değeri ile nasıl kullanılacağını emin değilim ben bazı yararlı bilgiler bulunan bir sayfaya bir bağlantı olduğunu, ancak

if('opacity' in document.body.style) { 
    // do stuff 
} 

function isPropertySupported(property{ 
    return property in document.body.style; 
} 

Yukarıda eklediğim bağlantının yorumlarında, bir css VALUE desteklenip desteklenmediğini ve yanıtın "Geri al, sonra değeri geri oku ve tarayıcının kaldığını kontrol et." Şimdi öğrenmeye başladığım daha fazla javascript bilseydim, bu yararlı bir bilgi olurdu.

Aklımda olan budur ama bunu yapmaktan nasıl emin olacağımı gerçekten bilmiyorum. Div # id veya div.class öğesinin vh css değerine sahip olup olmadığını kontrol edin. Css değerinin tarayıcı tarafından desteklenip desteklenmediğini kontrol edin. Destekleniyorsa, yüklemeye devam edin. Desteklenmezse, kimliği veya sınıfı değiştirin. Bir css değer javascript veya jquery kullanarak tarayıcı tarafından desteklenip desteklenmediğini ı nasıl kontrol ederim

:

Yani benim soru Özetle? Yanıtın yönlendirilmesi gerçekten takdir edilmektedir. Yardımlarınız için teşekkürler.

Answer 1

vh değerinin desteklenip desteklenmediğini kontrol etmek istediğinizi varsayalım, özellikle DIV#id'un bunu taşımasına mı gerek yoktur?

function cssPropertyValueSupported(prop, value) { 
    var d = document.createElement('div'); 
    d.style[prop] = value; 
    return d.style[prop] === value; 
} 
cssPropertyValueSupported('width', '1px'); 
// => true 
cssPropertyValueSupported('width', '1vh'); 
// => maybe true, maybe false (true for me) 
cssPropertyValueSupported('width', '1foobar'); 
// => false 

Answer 2

Orada gördüğünüz kodu görüyorum. o

PutStyleHere yazan yere

var styletotest = "PutStyleHere"; 

if (styletotest in document.body.style) 
{ 
    alert("The " + styletotest + " property is supported"); 

} else { 

    alert("The " + styletotest + " property is NOT supported"); 

} 

Basitçe tırnak içinde test etmek istediğiniz css özelliğini yerleştirmek Ve dosyasını yüklediğinizde o eğer belirten bir açılır pencere gösterecektir çalışır ya da değil. Bununla birlikte, bu gereksiz gibi gözükmektedir.

Basitçe Googling:

[mülkiyet] css W3

burada [mülkiyet] Eğer tarayıcı desteği bilgisini bilmek istiyorum özelliktir.

Ben

Opaklık Css W3

aranır ve ardından W3 linke tıklandığında ...aşağı kaydırabilirsiniz ve böyle istediğiniz bilgi ile sayfanın bir bölümünü göreceksiniz:

Source

Answer 3

Ben Modernizr kullanmayı öneririm.

Modernizr, ziyaretçinizin tarayıcısının hangi HTML5 ve CSS3 özelliklerini desteklediğini tespit eden bir JavaScript kütüphanesidir. Özellik desteğini tespit ederken, geliştiricilerin bazı yeni teknolojiler için test etmelerine ve daha sonra bunları desteklemeyen tarayıcılar için yedeklemeler sağlamasına olanak tanır.

Bazı yararlı linkler:

• Modernizr: the feature detection library for HTML5/CSS3

• Using Modernizr to detect HTML5 features and provide fallbacks

• HTML5 Boilerplate custom build of Modernizr for feature detection

Answer 4

yoktur yeni API CSS.supports