웹 프론트엔드 HTML 튜토리얼 JS判断浏览器是否支持某一个CSS3属性_html/css_WEB-ITnose

JS判断浏览器是否支持某一个CSS3属性_html/css_WEB-ITnose

Jun 24, 2016 am 11:58 AM
css3 js 판단 지원하다

1、引子

css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候。比如transition的animation-play-state,就只有部分浏览器支持。

2、检测方法

下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性:

Js代码   

  1. /** 
  2.     * 判断浏览器是否支持某一个CSS3属性 
  3.     * @param {String} 属性名称 
  4.     * @return {Boolean} true/false 
  5.     * @version 1.0 
  6.     * @author ydr.me 
  7.     * 2014年4月4日14:47:19 
  8. */  
  9.        
  10. function supportCss3(style) {  
  11.     var prefix = ['webkit', 'Moz', 'ms', 'o'],  
  12.     i,  
  13.     humpString = [],  
  14.     htmlStyle = document.documentElement.style,  
  15.     _toHumb = function (string) {  
  16.     return string.replace(/-(\w)/g, function ($0, $1) {  
  17.     return $1.toUpperCase();  
  18.     });  
  19.     };  
  20.        
  21.     for (i in prefix)  
  22.     humpString.push(_toHumb(prefix[i] + '-' + style));  
  23.        
  24.     humpString.push(_toHumb(style));  
  25.        
  26.     for (i in humpString)  
  27.     if (humpString[i] in htmlStyle) return true;  
  28.        
  29.     return false;  
  30. }  

 3、使用方法

Js代码   

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

 

4、参考资料

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

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

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 권장 사항: 우수한 JS 오픈 소스 얼굴 감지 및 인식 프로젝트 Apr 03, 2024 am 11:55 AM

얼굴 검출 및 인식 기술은 이미 상대적으로 성숙하고 널리 사용되는 기술입니다. 현재 가장 널리 사용되는 인터넷 응용 언어는 JS입니다. 웹 프런트엔드에서 얼굴 감지 및 인식을 구현하는 것은 백엔드 얼굴 인식에 비해 장점과 단점이 있습니다. 장점에는 네트워크 상호 작용 및 실시간 인식이 줄어 사용자 대기 시간이 크게 단축되고 사용자 경험이 향상된다는 단점이 있습니다. 모델 크기에 따라 제한되고 정확도도 제한됩니다. js를 사용하여 웹에서 얼굴 인식을 구현하는 방법은 무엇입니까? 웹에서 얼굴 인식을 구현하려면 JavaScript, HTML, CSS, WebRTC 등 관련 프로그래밍 언어 및 기술에 익숙해야 합니다. 동시에 관련 컴퓨터 비전 및 인공지능 기술도 마스터해야 합니다. 웹 측면의 디자인으로 인해 주목할 가치가 있습니다.

Windows Hello가 지원되지 않는 카메라 문제를 해결하는 방법 Windows Hello가 지원되지 않는 카메라 문제를 해결하는 방법 Jan 05, 2024 pm 05:38 PM

Windows Shello를 사용하는 경우 지원되는 카메라를 찾을 수 없습니다. 일반적인 이유는 사용하는 카메라가 얼굴 인식을 지원하지 않거나 카메라 드라이버가 올바르게 설치되지 않았기 때문입니다. 그럼 설정 방법을 살펴보겠습니다. Windowshello에서 지원되는 카메라 튜토리얼을 찾을 수 없습니다. 이유 1: 카메라 드라이버가 올바르게 설치되지 않았습니다. 1. 일반적으로 Win10 시스템은 다음과 같이 대부분의 카메라에 대한 드라이버를 자동으로 설치할 수 있으며, 카메라를 연결한 후 알림이 표시됩니다. 이때 장치를 열어서 카메라 드라이버가 설치되어 있는지 관리자를 확인하세요. 그렇지 않은 경우 수동으로 설치해야 합니다. WIN+X를 누른 다음 장치 관리자를 선택합니다. 3. 장치 관리자 창에서 카메라 옵션을 확장하면 카메라 드라이버 모델이 표시됩니다.

PyCharm Community Edition은 충분한 플러그인을 지원합니까? PyCharm Community Edition은 충분한 플러그인을 지원합니까? Feb 20, 2024 pm 04:42 PM

PyCharm Community Edition은 충분한 플러그인을 지원합니까? 구체적인 코드 예제가 필요 소프트웨어 개발 분야에서 Python 언어가 점점 더 널리 사용됨에 따라 전문적인 Python 통합 개발 환경(IDE)인 PyCharm이 개발자들에게 선호되고 있습니다. PyCharm은 Professional 버전과 Community 버전의 두 가지 버전으로 나누어집니다. Community 버전은 무료로 제공되지만 Professional 버전에 비해 플러그인 지원이 제한됩니다. 그렇다면 문제는 PyCharm Community Edition이 충분한 플러그인을 지원하느냐는 것입니다. 이 기사에서는 특정 코드 예제를 사용하여

장점과 단점 분석: 오픈 소스 소프트웨어의 장점과 단점을 자세히 살펴봅니다. 장점과 단점 분석: 오픈 소스 소프트웨어의 장점과 단점을 자세히 살펴봅니다. Feb 23, 2024 pm 11:00 PM

오픈소스 소프트웨어의 장단점: 오픈소스 프로젝트의 장단점을 이해하려면 구체적인 코드 예제가 필요합니다. 오늘날 디지털 시대에 오픈소스 소프트웨어는 점점 더 많은 관심과 존경을 받고 있습니다. 오픈소스 소프트웨어는 협력과 공유의 정신을 바탕으로 한 소프트웨어 개발 모델로서 다양한 분야에서 널리 사용되고 있습니다. 그러나 오픈 소스 소프트웨어의 많은 장점에도 불구하고 몇 가지 과제와 제한 사항도 있습니다. 이 기사에서는 오픈 소스 소프트웨어의 장단점을 자세히 살펴보고 특정 코드 예제를 통해 오픈 소스 프로젝트의 장단점을 보여줍니다. 1. 오픈소스 소프트웨어의 장점 1.1 개방성과 투명성 오픈소스 소프트웨어

js와 vue의 관계 js와 vue의 관계 Mar 11, 2024 pm 05:21 PM

js와 vue의 관계: 1. 웹 개발의 초석인 JS 2. 프론트엔드 프레임워크로서의 Vue.js의 등장 3. JS와 Vue의 상호 보완적인 관계 4. JS와 Vue의 실제 적용 Vue.

Go 언어에서 날짜가 전날인지 확인하는 방법은 무엇입니까? Go 언어에서 날짜가 전날인지 확인하는 방법은 무엇입니까? Mar 24, 2024 am 10:09 AM

질문: Go 언어에서 날짜가 전날인지 어떻게 확인하나요? 일상적인 개발에서 날짜가 전날인지 확인해야 하는 상황에 자주 직면합니다. Go 언어에서는 시간 계산을 통해 이 기능을 구현할 수 있습니다. 다음은 Go 언어에서 날짜가 전날인지 확인하는 방법을 보여주기 위해 특정 코드 예제와 결합됩니다. 먼저 Go 언어로 time 패키지를 가져와야 합니다. 코드는 다음과 같습니다. import("time") 그런 다음 IsYest 함수를 정의합니다.

jQuery 사용 사례: 변수가 비어 있는지 확인하는 여러 가지 방법 jQuery 사용 사례: 변수가 비어 있는지 확인하는 여러 가지 방법 Feb 27, 2024 pm 04:12 PM

jQuery는 웹 개발에 널리 사용되는 JavaScript 라이브러리로, 웹 페이지 요소를 조작하고 이벤트를 처리하는 간단하고 편리한 방법을 많이 제공합니다. 실제 개발에서는 변수가 비어 있는지 확인해야 하는 상황에 자주 직면합니다. 이 기사에서는 jQuery를 사용하여 변수가 비어 있는지 확인하고 특정 코드 예제를 첨부하는 몇 가지 일반적인 방법을 소개합니다. 방법 1: if 문을 사용하여 varstr="";if(str){co 결정

win11을 업그레이드하기 위해 보안 부팅을 활성화하는 것이 필수 조건입니까? 보안 부팅을 켜는 방법 win11을 업그레이드하기 위해 보안 부팅을 활성화하는 것이 필수 조건입니까? 보안 부팅을 켜는 방법 Jan 29, 2024 pm 08:33 PM

우리 모두 알고 있듯이 win11 시스템을 설치하려면 컴퓨터가 TPM2.0을 지원하고 보안 부팅을 활성화해야 합니다. 컴퓨터에 win11 설치에 실패하는 경우 보안 부팅이 켜져 있지 않기 때문일 수 있습니다. 다음은 일부 브랜드의 컴퓨터에서 보안 부팅을 활성화하는 방법에 대한 튜토리얼입니다. 이것이 도움이 되기를 바랍니다. win11로 업그레이드할 때 보안 부팅을 지원해야 한다는 메시지가 나타나면 어떻게 해야 합니까? 1. ASUS 마더보드 1. 먼저 중국어로 전환한 다음 키보드에서 F7을 눌러 프롬프트에 따라 고급 설정을 엽니다. 3. 그런 다음 키 관리를 선택합니다. 2. Lenovo 컴퓨터 1. 2020년 이전 Lenovo 컴퓨터 모델의 경우 F2를 눌러 BIOS 설정으로 들어간 다음 위에서 보안을 선택해야 합니다. 2. 보안 탭에서 secureboot를 삭제하고 E로 변경합니다.

See all articles