코드랩 레퍼런스
Modernizr 본문
Moderniz는 구 버전 브라우저에서 HTML5와 CSS3의 기능을 확인하기 위한 스크립트입니다.
Modernizr modernizr.com
Moderniz는 구 버전 브라우저에서 HTML5와 CSS3의 기능을 확인하기 위한 스크립트입니다. 브라우저 검사를 통해 HTML 요소에 어떤 기능이 지원이 되는지 확인 할 수 있으며, CSS3를 지원하는 경우와, 지원하지 않는 경우의 CSS작업이 가능합니다.
Moderniz 소스를 연동하면 다음과 같이 html 태그 표현 가능한 CSS들이 나열됩니다.
<!DOCTYPE html>
<html class="js rgba csscalc opacity supports displaytable display-table cssvhunit cssvwunit mediaqueries textshadow cssanimations backgroundsize boxshadow borderradius boxsizing no-overflowscrolling csstransforms csstransitions csstransforms3d" lang="ko">
<head>
<meta charset="UTF-8">
<title>strike</title>
</head>
<body>
</body>
</html>
그럼 CSS3의 지원 여부에 따라 다음과 같이 코드를 작성할 수 있습니다.
/* background-size 미지원 할 경우 */
background-image: url(../img/img.jpg);
background-repeat: repeat;
/* background-size 지원 할 경우 */
background-image: url(../img/img.jpg);
background-size: cover;
이렇게 하면 CSS3를 지원하지 않는 구 브라우저에서도 최소한 대처를 할 수 있기 때문에 어느 정도 호환성은 지킬 수 있습니다. Modernizr는 필요한 기능만 정의를 해서 파일크기를 최소화하여 사용하는 것을 추천합니다.
Related Articles
more
