2011-04-14 2 views
49

내 문서에서 HTML5 및 CSS3을 사용하기 시작했습니다. 이 새로운 태그 및 스타일을 사용하여 Internet Explorer의 속도를 높이려면 JavaScript가 필요하다는 것을 알고 있지만 언제 사용할 것인지 잘 모릅니다!Modernizr, html5shiv, ie7.js 및 CSS3 파이. 어느 것을 언제 사용할 수 있습니까?

내 계획은 html5shiv와 IE9.js를 사용하여 HTML5 태그와 투명 png (그리고 그들이 수정 한 다른 성가신 오류)를 살펴 보았지만 Modernizr와 CSS3 Pie는 내 관심을 끌었습니다.

Modernizr을 사용하는 경우 제 질문은 html5shiv 및 IE9.js에 대한 필자의 요구 사항을 고려합니까? 아니면 이것도 포함시켜야합니까? 오버랩이 있다면 무엇입니까?

그리고 Modernizr 또는 다른 사람들이 CSS3 Pie로 수행하는 작업은 무엇입니까? 혹은 그 반대로도?

여러분의 도움에 감사드립니다. 네가하는 일을 내가 알게 해줘!?

+0

참조 매우 비슷한 질문을 같이 많이 테스트 해보십시오 : http://stackoverflow.com/questions/3855294/html5shiv-vs- dean-edwards-ie7-js-vs-modernizr-to-choose/3855343 # 3855343 – Spudley

+0

CSS3PIE와 관련하여 Modernizr을 사용하여 "조건부 JS 로딩"을 수행 할 필요가 없습니다. IE 브라우저 만 9를로드하므로 PIE 라이브러리. http://stackoverflow.com/questions/5609651/will-css3pie-htc-file-load-for-other-browsers-even-they-dont-need와 http://stackoverflow.com/questions/8545501/how를 참조하십시오. -to-load-css3-pie-only-for-ie-7 및 -8-but-for-for-9 –

답변

70

나는 이들 각각에 대해 광범위한 경험을 갖고 있으며, 몇 년씩 사용해 왔습니다.

모더 나이저는

는 HTML5shiv 기능 을 포함 또한 않는 더 많은 - 당신이 다른 기능을 사용하지 않는 경우, 다음, 그것을 사용하지 않는이 페이지가로드 속도를 느리게 않지만, 경우에 가치가있다 너는 그것을 필요로한다!

는 HTML5shiv

는 아주 작은 단지 HTML5의 IE의 요소, 아무것도를 해결합니다.

CSS3PIE

당신이 IE의 이전 버전에서 국경 - 반경, 구배 및 상자 그림자를 사용할 수 있습니다. 또한 IE 6에서 PNG를 허용 할 수 있습니다. 페이지로드에 눈에 띄는 지연을 추가합니다.

ie7.js (및 ie9.js)

당신에게 많은 CSS3 선택자, 최소 및 최대 폭, 여러 클래스 고정 위치를 준다. 또한 원할 경우 PNG 수정을 할 수 있습니다. 많은 것을 늦추는 것처럼 보이지 않습니다.

내 조언은 두 가지 범주로 떨어질 것이라고 결론 :

그냥 새를 사용하는 경우 요소 및 CSS3 선택기 (인터넷?!에 이년 새로운), 다음 사용 IE9 .js + html5shiv. 이것은 가볍고, IE6에서 아무 것도 지원하지 않는다는 것을 기억하지 않고도 작업 할 수 있습니다.

CSS3 항목을 많이 사용하는 경우 CSS3PIE는 테두리 반경과 상자 그림자를 정렬합니다. 그래디언트 지원은 조금 희박 해 보였으므로 항상 대신 대체 이미지를 사용했습니다. Modernizr을 사용하면 다양한 지원 기능을 가진 브라우저에 다양한 속성을 쉽게 제공 할 수 있습니다. 저는 주로 브라우저에 CSS 전환 및 변형이 있는지 여부를 확인하는 데이 방법을 사용했습니다. 이는 이미지 슬라이더 나 콘텐츠 회전식 캐 러셀에 유용하기 때문입니다. 커스터마이징 도구를 사용하여 원하는 기능 만 포함 할 가치가 있습니다. 웹 양식에는 몇 밀리 초 동안 50 개의 텍스트 상자가 표시되므로 원하지 않으면 비활성화 할 가치가 있습니다.

희망이 도움이 되셨습니다.

+3

대단히 도움이됩니다! 고맙습니다. 마지막 질문 하나, 나는 Modernizr을 사용하기로 선택하면 html5shiv의 필요성을 충족시킬 것이라고 말하면서 이해하지만 ie9.js는 무엇입니까? Modernizr을 사용하는 경우, html5shiv를 사용하여 투명한 png 등을 조사해야합니까? CSS3 PIE도 마찬가지입니다. html5shiv 또는 ie9.js의 기능을 살펴 봅니까? 페이지에 필요한 것만 사용하고 싶으므로 무엇이 중복되는지 파악하는 것이 큰 도움이됩니다. – stefmikhail

+1

내 대답을 다시 읽고, 나는 이미 그 모든 것을 다 커버했다고 생각합니다. –

6

필요한 것을 사용하는 것이 좋습니다. 사용중인 기능을 지원하는 브라우저에서 앱을 빌드하고 지원하는 다른 브라우저에서 주기적으로 테스트하십시오. 무언가가 제대로 작동하지 않으면 html5shiv, IE9.js, Modernizr 또는 CSS3 Pie 등 적절한 픽스를 찾으십시오. HTML5 및 CSS3의 모든 새로운 기능을 한 페이지에서 모두 사용하지 않으므로 모든 Polyfill 라이브러리를 포함 할 필요가 없습니다. 사용하려는 기능에 문제가있을 때까지 기다렸다가이를 수행하는 데 필요한 라이브러리를 찾으십시오.

+0

조언을 주셔서 감사합니다. 그것은 확실히 의미가 있습니다. – stefmikhail

2

저는 주로 CSS3Pie를 사용했습니다 ... 잘 작동합니다. 그러나 오늘 오후에 I.E8을 사용하여 노트북에서 테스트를 해본 결과 문제가있었습니다 ... CSS 라인을 사용하지 못하게되었습니다 ... css3pie 코드를 제거하면 사이트 속도가 두 배 빨라졌습니다 ... 그런 다음에 왔습니다. accss css3 감속에 대해 논쟁하는 사람들과 게시물 ... 그래서 지금 IE8에 대한 다른 방법을 찾을 바쁜 오전 & IE8 국경 반경과 음영을 가지고. 당신이 그것을 사용하려는 경우

... 그것은 또한 여기에 비 공식 수정

+1

IE7-IE8의 대안은 둥근 모서리가 없거나 이미지로 전환하는 것입니다 (그러나 css3pie의 기본 기술 중 일부는 사용할 수 있지만 요즘 레거시 브라우저의 테두리를 반올림하지 않기로했습니다.) modernizr + ie9.js를 직접 사용하십시오. 왜냐하면 modernizr이 제공하는 추가 목표를 많이 사용하기 때문입니다. – Tracker1