JS determines whether the browser supports a certain CSS3 attribute and js browser css3 attribute.

JS determines whether the browser supports a certain CSS3 attribute and js browser css3 attribute.
1. Introduction

The emergence of css3 makes the browser's performance more colorful, and the biggest impact of performance is animation. During daily animation writing, it is necessary to determine whether the browser supports it in advance, especially when writing a CSS3 animation library. For example, the animation-play-state of transition is only supported by some browsers.

2. Detection Method

The following method uses a script to determine whether the browser supports a certain CSS3 attribute:

Js Code

1. /**
2. * Determines whether the browser supports a certain CSS3 attribute.
3. * @ Param {String} attribute name
4. * @ Return {Boolean} true/false
5. * @ Version 1.0
6. * @ Author ydr. me
7. * April 4, 2014 14:47:19
8. */
10. Function supportCss3 (style ){
11. Var prefix = ['webkit', 'moz', 'ms', 'O'],
12. I,
13. HumpString = [],
14. HtmlStyle = document.doc umentElement. style,
15. _ ToHumb = function (string ){
16. Return string. replace (/-(\ w)/g, function ($0, $1 ){
17. Return $1. toUpperCase ();
18. });
19. };
21. For (I in prefix)
22. HumpString. push (_ toHumb (prefix [I] + '-' + style ));
24. HumpString. push (_ toHumb (style ));
26. For (I in humpString)
27. If (humpString [I] in htmlStyle) return true;
29. Return false;
30. }

3. Usage

Js Code

1. Alert (supportCss3 ('animation-play-state '));

 

4. References

Http://note.rpsh.net/posts/2011/05/20/css

Http://ecd.tencent.com/css3/guide.html

How does js determine the browser type?

<Script type = "text/javascript">

Function isIE (){
Return navigator. appName. indexOf ("Microsoft Internet Explorer ")! =-1 & document. all;
}

Function isIE6 (){
Return navigator. userAgent. split (";") [1]. toLowerCase (). indexOf ("msie 6.0") = "-1 ″? False: true;
}

Function isIE7 (){
Return navigator. userAgent. split (";") [1]. toLowerCase (). indexOf ("msie 7.0") = "-1 ″? False: true;
}

Function isIE8 (){
Return navigator. userAgent. split (";") [1]. toLowerCase (). indexOf ("msie 8.0") = "-1 ″? False: true;
}

Function isNN (){
Return navigator. userAgent. indexOf ("Netscape ")! =-1;
}

Function isOpera (){
Return navigator. appName. indexOf ("Opera ")! =-1;
}

Function isFF (){
Return navigator. userAgent. indexOf ("Firefox ")! =-1;
}

Function isChrome (){
Return navigator. userAgent. indexOf ("Chrome")>-1;
}
</Script>

The following describes how to obtain the browser information of the client using js.

The Navigator object contains information about the browser. Js obtains the browser information of the client through the attributes of Navigator.
Navigator object attributes:

Attribute
Description

AppCodeName: return the code name of the browser.
AppMinorVersion returns the secondary version of the browser.
AppName: the browser name.
AppVersion: returns the platform and version information of the browser.
BrowserLanguage returns the language of the current browser.
CookieEnabled: returns a Boolean value indicating whether the cookie is enabled in the browser.
CpuClass returns the CPU level of the browser system.
Returns a Boolean value indicating whether the system is in offline mode.
Platform returns the operating system platform that runs the browser.
SystemLanguage returns the default OS language.
UserAgent return... the remaining full text>

If the client browser supports JS?

When you add the prompt information in <noscript> </noscript>, it will be displayed if it is not supported.