Come verificare se il valore css è supportato dal browser?

Question

Non sono molto bravo in javascript quindi per favore sii portato con me. Safari 6 e precedenti e vecchi browser mobili Android e forse più non supportano il valore css VH. Il mio DIV # id o classe non è l'altezza del viewport. Di seguito è riportato un link ad una pagina che ho trovato alcune informazioni utili, ma im veramente non è sicuro come usarlo con un valore css:

Check whether a css value is supported

Qui è il codice dato come una scorciatoia per voi:

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

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

Nei commenti del link che ho allegato sopra qualcuno chiede come verificare se un valore di css è supportato e la risposta è "lo hai impostato, quindi rileggi il valore e controlla se il browser lo ha conservato". Ora sono sicuro che sarebbero informazioni utili se sapessi più javascript che ho appena iniziato a imparare.

Questo è quello che ho in mente ma non sono davvero sicuro di come andare in giro a fare questo. Controlla se div # id o div.class ha valore vh css. Verificare se il valore css è supportato dal browser. Se è supportato, continua a caricare. Se non supportato, cambia ID o classe.

Quindi, per riassumere la mia domanda:

Come posso controllare se un valore CSS è supportata dal browser usando JavaScript o jQuery?

La guida alla risposta è molto apprezzata. Grazie per il vostro aiuto.

Answer 1

Suppongo che abbiate intenzione di verificare se il valore vh è supportato, non se lo supporta nello specifico DIV#id?

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

Vedo il codice che hai lì.

var styletotest = "PutStyleHere"; 

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

} else { 

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

} 

È sufficiente posizionare la proprietà CSS che si desidera testare le citazioni in cui si dice

PutStyleHere

E quando si carica il file mostrerà un pop-up che ti dice se funziona o no

Tuttavia questo sembra non necessario.

Semplicemente Googling:

[proprietà] css W3

dove [proprietà] è la proprietà che si desidera conoscere le informazioni supporto del browser.

quando ho cercato

Opacità Css W3

e poi cliccato sul link W3 ...è possibile scorrere verso il basso e vedrete una sezione della pagina con le informazioni che si desidera in questo modo:

Source

Answer 3

io suggerirei di usare Modernizr.

Modernizr è una libreria JavaScript che rileva quali funzionalità di HTML5 e CSS3 supportano il browser del visitatore. Nel rilevamento del supporto delle funzionalità, consente agli sviluppatori di testare alcune delle nuove tecnologie e quindi di fornire fallback per i browser che non le supportano.

Alcuni link utili:

• 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

V'è la nuova API CSS.supports