如何檢查瀏覽器是否支持css值?

[英]How to check if css value is supported by the browser?


Im not very skilled in javascript so please be bear with me. Safari 6 and below and older android mobile browsers and maybe more do not support the css value VH. My DIV#id or class is not the height of the viewport. Below is a link to a page i found some useful information, but im really not sure how to use it with a css value:

我的javascript不是很熟練,請耐心聽我說。Safari 6以及更老的android移動瀏覽器以及更多的瀏覽器都不支持css value VH。我的DIV#id或類不是viewport的高度。下面是一個鏈接,我找到了一些有用的信息,但我真的不知道如何使用它與css值:

Check whether a css value is supported

檢查是否支持css值

Here is the code given as a shortcut for you:

以下是作為快捷方式提供的代碼:

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

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

In the comments of the link i attached above someone does ask how to check if a css VALUE is supported and the answer is, "You set it, then read the value back and check if the browser retained it." Now im sure that would be useful information if i knew more javascript which i have just started to learn.

在我上面附加的鏈接的評論中,有人問如何檢查css值是否被支持,答案是:“您設置它,然后讀取該值並檢查瀏覽器是否保留它。”現在我確信,如果我知道更多我剛開始學習的javascript知識,這將是非常有用的信息。

This is what i have in mind but im really not sure how to go around doing this. Check if div#id or div.class has vh css value. Check whether the css value is supported by the browser. If its supported then keep loading. If not supported then change id or class.

這是我的想法,但我真的不知道該怎么做。檢查div#id或div.class是否具有vh css值。檢查瀏覽器是否支持css值。如果支持,則繼續加載。如果不支持,則更改id或類。

So to sum up my question:

總結一下我的問題:

How do i check if a css value is supported by the browser using javascript or jquery?

如何檢查使用javascript或jquery的瀏覽器是否支持css值?

Guidance to the answer is really appreciated. Thanks for your help.

對答案的指導非常感謝。謝謝你的幫助。

5 个解决方案

#1


13  

I assume you meant to check whether the vh value is supported, not whether specifically DIV#id bears it?

我假設您要檢查vh值是否被支持,而不是確定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

#2


2  

I see the code you have there.

我看到你的代碼了。

var styletotest = "PutStyleHere";

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

} else {

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

}

Simply place the css property you want to test in the quotes where it says

只需將您想要測試的css屬性放在引號中

PutStyleHere

PutStyleHere

And when you load the file it will show a popup telling you if it works or not.

當你加載文件時,它會顯示一個彈出窗口告訴你它是否有效。

However this seems unnecessary.

然而這似乎是不必要的。

Simply Googling:

簡單搜索:

[property] css W3

css W3[屬性]

where [property] is the property you want to know browser support information.

where [property]是您希望了解瀏覽器支持信息的屬性。

When I searched

當我搜索

Opacity Css W3

不透明度Css W3

and then clicked on the W3 link... you can scroll down and you will see a section of the page with the info you want like this:

然后點擊W3鏈接…你可以向下滾動,你會看到頁面的一個部分,上面有你想要的信息:

Browser SUpport

Source

#3


2  

There is the new API CSS.supports

有新的API css .支持

#4


1  

I'd suggest to use Modernizr.

我建議使用現代化。

Modernizr is a JavaScript library that detects which HTML5 and CSS3 features your visitor's browser supports. In detecting feature support, it allows developers to test for some of the new technologies and then provide fallbacks for browsers that do not support them.

Modernizr是一個JavaScript庫,它可以檢測出你的訪問者的瀏覽器支持哪些HTML5和CSS3特性。在檢測特性支持時,它允許開發人員測試一些新技術,然后為不支持它們的瀏覽器提供回退。

Some useful links:

一些有用的鏈接:

#5


1  

We can since a while test from javascript if a css rule if available in the context with CSS.supports.

我們可以從javascript中測試一下,如果css規則可以在css.support的上下文中使用。

(Since Firefox 22/ Chrome 28)

(火狐22/ Chrome 28)

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

The CSS.supports() static methods returns a Boolean value indicating if the browser supports a given CSS feature, or not.

支持()靜態方法返回一個布爾值,指示瀏覽器是否支持給定的CSS特性。

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

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


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2016/03/24/72f4552b680acbce043c165818941c70.html



 
粤ICP备14056181号  © 2014-2021 ITdaan.com