html5 기본 기능과 벤더 프리픽스 제거

1. 선택자

document.querySelector(선택자) - 선택자로 한 개의 문서 객체를 선택

document.querySelectorAll(선택자) - 선택자로 모든 문서 객체를 선택

2. 전체 화면

element.requestFullscreen() - 특정 요소를 전체 화면으로 만듭니다. 

element.cancelFullscreen() - 특정 요소의 전체 화면을 해제합니다.

var elements = document.querySelectorAll('.fullscreen');

for(var i = 0; i<elements.length; i++){

elements[i].onclick = function(){

if(this.requestFullscreen){

this.requestFullscreen();

}

else if(this.msRequestFullscreen){

this.msRequestFullscreen();

}

else if(this.webkitRequestFullscreen){

this.webkitRequestFullscreen();

}

else if(this.mozRequestFullscreen){

this.mozRequestFullscreen();

}

else if(this.oRequestFullscreen){

this.oRequestFullscreen();

}

}

}

3. 벤더 프리픽스

익스플로러 -ms-

크롬, 사파리 -webkit-

파이어폭스 -moz-

오페라 -o-

<style>

/* HTML5 */

div.fullscreen:fullscreen{ width:60%; border-radius:10px; }

/* 웹 브라우저 */

div.fullscreen:full-screen{ width:60%; border-radius:10px; }

div.fullscreen:-ms-full-screen{ width:60%; border-radius:10px; }

div.fullscreen:-webkit-full-screen{ width:10%; border-radius:10px; }

div.fullscreen:-moz-full-screen{ width:60%; border-radius:10px; }

div.fullscreen:-o-full-screen{ width:60%; border-radius:10px; }

   </style>

4. 벤더 프리픽스 삭제

removePrefix.html

<script>

var removePrefix = (function(){

var prefixes = ['webkit','ms','moz','o'];

var capitalize = function(name){

return name.substr(0,1).toUpperCase() + name.substr(1);

};

return function(object, name){

prefixes.forEach(function(prefix){

object[name] = object[name] || object[prefix + capitalize(name)];

});

};

})();

</script>