web-dev-qa-db-fra.com

Comment vérifier si la valeur CSS est prise en charge par le navigateur?

Je ne suis pas très compétent en javascript, alors soyez indulgent avec moi. Safari 6 et versions antérieures et inférieures Android et peut-être plus ne prennent pas en charge la valeur CSS VH. Mon ID ou classe DIV # n'est pas à la hauteur de la fenêtre d'affichage. Ci-dessous, un lien vers une page. j'ai trouvé des informations utiles, mais je ne sais vraiment pas comment l'utiliser avec une valeur css:

Vérifiez si une valeur css est prise en charge

Voici le code donné comme raccourci pour vous:

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

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

Dans les commentaires du lien que j'ai joint ci-dessus, quelqu'un demande comment vérifier si une valeur CSS est prise en charge et la réponse est: "Vous la définissez, puis relisez la valeur et vérifiez si le navigateur l'a conservée." Maintenant, je suis sûr que ce serait une information utile si je connaissais plus de javascript que je viens de commencer à apprendre.

C'est ce que j'ai à l'esprit mais je ne sais vraiment pas comment faire cela. Vérifiez si div # id ou div.class a une valeur vh css. Vérifiez si la valeur css est prise en charge par le navigateur. Si c'est pris en charge, continuez à charger. Si non pris en charge, changez l'ID ou la classe.

Donc, pour résumer ma question:

Comment puis-je vérifier si une valeur css est prise en charge par le navigateur en utilisant javascript ou jquery?

L'orientation vers la réponse est vraiment appréciée. Merci de votre aide.

javascriptjquerycssbrowserviewport
23
Guillaume Palm

Je suppose que vous vouliez vérifier si la valeur vh est prise en charge, pas si spécifiquement DIV#id le supporte?

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
29
Amadan

Il y a la nouvelle API CSS.supports . Pris en charge dans la plupart des navigateurs sauf IE .

console.log(
  // CSS.supports(property, value)
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // CSS.supports(DOMstring)
  5, CSS.supports("( transform-Origin: 5% 5% )"),
  6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " 
  + "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")
)

Et il existe une fonctionnalité similaire en CSS, le @ prend en charge le sélecteur de requête de fonctionnalité , également pris en charge dans la plupart des navigateurs sauf IE :

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}
19
Eric Willigers

Je vois le code que vous avez là-bas.

var styletotest = "PutStyleHere";

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

} else {

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

}

Placez simplement la propriété css que vous souhaitez tester dans les guillemets où elle est indiquée

PutStyleHere

Et lorsque vous chargez le fichier, il affichera une fenêtre contextuelle vous indiquant si cela fonctionne ou non.

Cependant, cela semble inutile.

Googler simplement:

[propriété] css W3

où [propriété] est la propriété que vous souhaitez connaître les informations de prise en charge du navigateur.

Quand j'ai cherché

Opacity Css W3

puis cliqué sur le lien W3 ... vous pouvez faire défiler vers le bas et vous verrez une section de la page avec les informations que vous souhaitez comme ceci:

Browser SUpport

Source

4
Trevor Clarke

Nous pouvons depuis un certain temps tester à partir de javascript si une règle css est disponible dans le contexte avec CSS.supports.

(Depuis Firefox 22/Chrome 28 )

console.log(
CSS.supports("( transform-Origin: 5% 5% )"),
"\n",
CSS.supports("( display: flex )"),
"\n ",
CSS.supports("( background-color: #12233212 )")
)

La méthode statique CSS.supports () renvoie une valeur booléenne indiquant si le navigateur prend en charge ou non une fonctionnalité CSS donnée.

https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports

4
NVRM

Je suggère d'utiliser Modernizr.

Modernizr est une bibliothèque JavaScript qui détecte les fonctionnalités HTML5 et CSS3 prises en charge par le navigateur de votre visiteur. En détectant la prise en charge des fonctionnalités, il permet aux développeurs de tester certaines des nouvelles technologies, puis de fournir des solutions de secours aux navigateurs qui ne les prennent pas en charge.

Quelques liens utiles:

2
Stickers

C'est mon code qui prend en compte les propriétés totalement non prises en charge en vérifiant la présence d'accessoires camel-Case dans le style et utilise CSS.supports si disponible.

const prefixes = ['', '-webkit-']

function supports(prop, value) {
  if ('CSS' in window && 'supports' in window.CSS) {
    for (let i = 0; i < prefixes.length; i++) {
      const property = prefixes[i] + prop

      if (window.CSS.supports(property, value) ) { return true }
    }
    return false
  }

  const el = document.createElement('div')

  let found = false
  prefixes.forEach((pr) => {
    if (found) return
    const p = `${pr}${prop}`
    const Prop = p.replace(/-(.)/g, (m, s) => s.toUpperCase())
    if (!(Prop in el.style)) return
    el.style[p] = value
    found = el.style[p] == value // can just check if it's not empty actually
  })
  return found
}
0
zavr