HTML5 크로스브라우징

분류없음 2014.02.18 11:31

HTML5 크로스브라우징

html5shiv, ie9.js, ie7.js, modernizr, and css3pie(출처)


<!-- Load jQuery Here -->
<!--[if lt IE 9]> <script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script> <script src="//ie7-js.googlecode.com/svn/version/2.1(beta4)/ie7-squish.js"></script> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->


* html5shiv

HTML5 요소를 지원하지 않는 브라우저에서 해당 요소를 지원할 수 있게 해주는 라이브러리.


* ie9.js, ie7.js

IE를 사람답게(...) 만들어 주는 라이브러리. 구버전의 Internet Explorer에 있는 HTML 및 CSS issue들을 fix함. 투명 png에 대한 부분에 대해 처리.

단순히 head 부분에 위 구문을 집어넣으면 된다.


* Modernizr

HTML5 & CSS3을 지원하는지를 체크해 줌.

html5shiv를 포함하고 있음. 그리고 많은 일을 하지만, 딱히 html5의 많은 요소들을 쓰는 것이 아니라면 사용하지 말 것. 왜냐하면 페이지 속도가 느려지기 때문임. 하지만 그만큼의 가치가 있다고 판단되면 쓰는 것을 권장.


* css3pie

CSS3 요소를 지원하지 않는 브라우저에서 CSS3 요소를 사용할 수 있게 해주는 라이브러리.

http://www.css3pie.com


* Modernizr vs. css3pie

  Modernizr - 안되면 패스. 하지만 되는 부분에 대해서는 확실하게 될 수 있도록?

  css3pie - 무조건 되게 해 주세요. 뭐든지간에 되게 해 달란 말이에요 징징



결론:

구 버전의 브라우저를 지원해야 할 필요가 있는 경우에만 부분 부분적으로 include하는 것을 권장. 기본적으로는 html5shiv+ie9.js 를 사용하고, 필요한 경우에만 Modernizr를 사용할 것.


그리고 html5shiv+ie9 의 경우에는 관련 소스들을 jQuery보다 뒤에 넣을 것.

저작자 표시
신고

설정

트랙백

댓글

jQuery를 이용한 CSS 효과

jQuery/DOM&jQuery 2009.10.24 13:22

jQuery CSS 메소드

css를 jquery에서 별도로 지정하여 효과를 줄수있다. 이때 장점은 브라우저를 넘나들어 모두 가능하다는점이다.문제시 되는 IE6에서도 유사클래스등 지원되지않는것을 jQuery로 해결할 수 있다.복습겸 먼저 css사용법을 다시보자

CSS 지정

css는 다음과 같이 사용 한다. 선택자{ 프로퍼티: 값;} 예제를 보자

#example{backgound: #fcc;}
/*선택자는 아이디인 #example 
 그리고 프로처티는 배경인backgound
 마지막으로 그배경색은 #fcc로 한것*/

이 같은 것을 브라우저를 넘나들어 사용할 수 있도록 jQuery를 이용한것을 보자

jQuery css()메소드

jQuery에서 사용해보자 방법은 다음과 같다.

  • .css('프로퍼티' ,'값')
  • 만약 여러개를 정한다면 중괄호와 콜론을 사용한다. .css({'프로퍼티1':'값1','프로퍼티2':'값2' })

예제를 통해 알아보자

배경색을 #fcc로 할것임

배경색을 #fcc로 하고 폰트 사이즈를 28px로

h4엘리먼트에는 배경색변화 그리고 p엘리먼트에는 배경색변화와 더불어 폰트사이즈도 변하게 할것이다.

$(document).ready(function(){
  $('h4').css('background','#fcc');
  $('p').css({'background':'#fcc','font-size':'28px' });
});

위 소스와 같이$('h4'),$('p')로 접근했고 .css()메소드로 css를 지정해주었다.프로퍼티를 여러개 사용할떄는 중괄호와 콜론을 사용한다는점을 명심해두자.

직접작성한 예제는 여기서보자 그냥 css를 사용한것과 jquery를 이용한예제이다http://sianasiatiger.cafe24.com/study/J_cssEffect.html

jQuery를 이용한 것은 크로스브라우징의 목적도 있지만 이외 css()메소드와 함께 jQuery의 다른 메소드와 함께 혼용하여 다양한효과를 줄수도 있다는 점이 장점이다.

저작자 표시
신고

설정

트랙백

댓글


티스토리 툴바