it-gundan.com

웹 사이트를 구축하기 위해 HTML5 및 / 또는 CSS3를 사용해야합니까?

새로운 HTML5/CSS3 (Web8!)은 멋지게 들립니다! 지금 사용을 시작하거나 더 많은 브라우저에서 사용할 수있을 때까지 css/xhtml 대기를 고수해야합니까?

16
Jason

HTML5는 이제 모든 브라우저, 심지어 IE5에서도 지원됩니다 (html5shiv 스크립트를 사용하는 경우). http://diveintohtml5.org 를 읽는 것이 좋습니다. 그것은 최고의 HTML5 리소스 중 하나입니다.

CSS3의 경우,이를 사용하는 경우 정규 구문 외에 벤더 predix도 사용해야합니다. 예 :.

국경 반경

-경계 경계 반경

-웹킷 테두리 반경

점진적인 향상을 믿습니다. IE9의 css3 지원은 매우 유망한 소리입니다.

13
Jin

아마도.

현재 사용할 수있는 HTML5의 일부가 있습니다. 예를 들어 양식. HTML5를 지원하지 않는 브라우저 (예 : IE6)에 <input type="email">가있는 경우 <input type="text">를 사용한 경우와 동일한 내용이 표시됩니다. 그러나 HTML5 양식 요소를 지원하는 브라우저에서는 email 유형의 장점을 얻을 수 있습니다. 즉, 클라이언트는 추가 JS없이 값을 오류 검사합니다. 예, HTML5 이외의 브라우저에는 여전히 JS가 필요하지만 지원되는 브라우저에는 유효성 검사 계층이 하나 더 있습니다.

다른 이 사이트의 질문 은 HTML5 및 CSS3를 통해 사용할 수있는 새로운 기능에 대한 개요를 제공합니다. 이 질문의 양식에 대한 많은 좋은 데이터가 있습니다.

Internet Explorer (및 이전 버전의 Safari 및 Firefox)는 이러한 기능 중 많은 기능을 지원하지 않기 때문에 빈 공간을 채우기 위해 JavaScript 라이브러리가 남아 있습니다. 여기에는 성능 저하가 포함됩니다 (브라우저를 사용해야하는 브라우저에만 해당됨). 사용자를 고용 할 때주의하십시오.

기능 지원이 부족한 문제를 완화하려면 이러한 새로운 기능이 가치가 있다고 판단되면 다음 리소스를 사용하십시오.

  • html5shiv : HTML5 요소를 인식하고 스타일을 지정하기 위해 IE에 대한 JavaScript shiv입니다.
  • CSS3 Pie : Internet Explorer 6을 만드는 IE 첨부 동작 (.htc 파일) -8 가장 유용한 CSS3 데코레이션 기능을 렌더링 할 수 있습니다. 요소에 적용하면 IE가 border-radius, box-shadow, border-image, 여러 배경 이미지 및 linear-gradient를 배경 이미지로 인식하고 표시 할 수 있습니다.
  • Modernizr : 기능 감지를 사용하여 다음 CSS3/HTML5 기능에 대해 현재 브라우저를 테스트하여 현재 브라우저를 테스트하는 Javascript 라이브러리 지원되는 요소에 대한 <html> 요소 또한 각 기능에 대한 부울 속성 (지원되는 경우 true_, 지원되지 않는 경우 false)을 포함하는 자체 제목의 전역 JavaScript 객체를 만듭니다. <section>, <header><nav>와 같은 요소를 사용할 수 있도록 HTML5 요소 스타일링 및 인쇄 지원을 추가합니다.
  • ie-css3.js : Internet Explorer는 CSS3 유사 클래스 선택기를 식별하고 이에 정의 된 스타일 규칙을 렌더링 할 수 있습니다. 사이트에서 사용하는 JavaScript 라이브러리에 따라 다른 CSS3 선택기를 지원합니다.
  • DD_belatedPNG : IE6에 PNG 이미지 지원을 추가하는 Javascript 라이브러리. CSS에서 <img /> 요소의 src 또는 background-image 속성으로 PNG를 사용할 수 있습니다. AlphaImageLoader과 달리 background-positionbackground-repeat은 의도 한대로 작동하며 요소는 a:hover 의사 클래스에 응답합니다.
  • TwinHelix IE PNG 수정 : IE 첨부 동작 (.htc 파일 )는 알파 불투명도를 가진 PNG 지원을 IE에 추가합니다. 6. 전체 CSS 배경 위치 지정 및 반복은 추가 (포함) JavaScript를 지원합니다 (CSS 스프라이트 포함).
  • Whatever : hover : 자동으로 패치되는 IE 첨부 동작 (.htc 파일) : IE6, IE7 및 IE8 쿼크의 경우 호버, : active 및 : focus를 사용하면 다른 브라우저 에서처럼 사용할 수 있습니다. AJAX 지원을 포함합니다. 즉, 자바 스크립트를 통해 문서에 삽입되는 모든 HTML이 IE의 :hover, :active:focus 스타일도 트리거합니다.

DD_belatedPNG는 순수한 JavaScript로 Whatever : hover와 TwinHelix의 IE PNG 수정으로 해결 된 두 가지 문제를 해결하는 반면, Whatever : hover와 TwinHelix의 IE PNG 수정은 JavaScript와 IE의 조합을 사용합니다. 첨부 된 동작 (.htc files).

일반적으로 비 IE 브라우저를 사용하는 사람들은 요청에 따라 브라우저를 업그레이드하므로 IE는 "그러나 일부 브라우저는이 기능을 지원하지 않습니다!" 불만. Modernizr은 IE뿐만 아니라 HTML5/CSS3를 사용하는 브라우저에 사용할 수있는 기능을 추가 할 것입니다. ie-css3.js도 같은 작업을 수행 할 것입니다. IE 조건부 주석없이 간단히 구현하면됩니다. 즉, all 브라우저는 사용자가 아니면 서버 측 사용자 에이전트 검사와 함께 포함 시키십시오. 이렇게하면 IE 사용자가 아닌 모든 방문자의 성능이 크게 저하됩니다.)

12
Bryson

가장 적합한 기술을 사용하십시오.

에릭 메이어 (Eric Meyer)는 CSS 규칙에서 벤더별 접두사를 사용하는 것이 CSS 필터 해킹을 사용하는 것만 큼 엉망이 아닌 이유에 대해 좋은 기사 를 썼습니다.

HTML5에도 동일하게 적용됩니다. 다른 기능에 대한 브라우저 지원을 확인할 수 있다면 사용하지 않는 것이 좋습니다. 사이트가 정상적으로 성능이 저하되는 한 계속 운영하십시오.

5
jessegavin

사용하려는 CSS3 기능을 결정할 때 유용한 다른 링크 : http://caniuse.com/ (어떤 플랫폼에서 어떤 요소와 선택기를 사용할 수 있는지에 대한 적절한 분석을 제공합니다)

http://css3please.com/ (CSS3 기능을 망칠 수있는 인 페이지 편집 가능한 놀이터로, 일반적으로 요청되는 스타일링을 위해 어떤 플랫폼에서 어떤 기술과 기능이 지원되는지에 대한 조언을 제공합니다. 둥근 모서리, 그라디언트 배경 등)

2
Jason M. Batchelor

최신 브라우저에서 경험을 향상시키기 위해이 기능을 사용하므로 좋은 브라우저를 사용하는 사용자는 더 멋진 UI (둥근 모서리, 그림자 등)로 "보상"할 수 있습니다. JS 대체품이 없다면 현재 클라이언트 측 양식 유효성 검사를 대신하여 대체로 사용해서는 안됩니다.

1
D4V360

이전 브라우저에서도 지원되어야하는 HTML5를 사용하여 새 프로젝트를 시작하는 경우 가장 좋은 옵션은 Initializr-

http://www.initializr.com/

백엔드에서 HTML5 보일러 플레이트를 사용하고 자체 옵션을 추가하여 자체 사이트에 배포 할 수있는 템플릿을 제공합니다. 여기에는 HTML Shiv 또는 Modernizr과 같은 Javascript 라이브러리가 포함되어있어 이전 브라우저와 사이트를 호환 할 수 있습니다.

1
Mozan Sykol

청중이 무엇이며 사용하려는 기능에 따라 다릅니다. 평균 프로젝트가 ie6에 대한 지원을 중단하기까지 몇 년이 더 걸릴 것으로 예상합니다.

0
theotherreceive

귀하의 사이트가 개인 인트라넷이고 브라우저를 제어하거나 처리 할 수있는 브라우저가 제한적인 경우, 최신 기술에 대해 자유롭게 작업하십시오.

그렇지 않은 경우, 무엇을 사용하든 항상 최저 공통 분모를 고려해야합니다. 이 경우 아마도 IE 6와 다양한 모바일 브라우저의 조합 일 것입니다. 따라서 HTML 5를 계속 사용하면 사이트가 'degrade'되는지 확인하는 추가 문제가 있습니다.

0
Gary.Ray