10 년 전, 가장 최첨단 웹 사이트 디자이너 만 웹 페이지 레이아웃 및 장식에 CSS를 사용할 것입니다. 당시 브라우저의 CSS 레이아웃에 대한 지원은 불완전하고 허점으로 가득 차 있었기 때문에이 사람들은 웹 표준화를 주장했지만 해킹을 사용하여 모든 브라우저에서 페이지를 표시해야했습니다. 사용 된 점점 더 많은 해킹 기술 중 하나는 브라우저 스니핑입니다. Navigator.useragent 속성을 사용하여 사용자가 사용하는 브라우저의 브랜드와 버전을 결정합니다. 브라우저 스니핑 기술은 다른 브라우저에 다른 지침을 적용하기 위해 코드를 빠르게 분기 할 수 있습니다.
오늘날 CSS 기반 레이아웃은 이미 매우 일반적이며 브라우저는 매우 견고합니다. 그러나 이제 CSS3와 HTML5가 여기에 있으며 역사가 돌아 서서 원래 장소로 돌아 왔습니다. 다양한 브라우저의 이러한 새로운 기술에 대한 지원이 다시 고르지 않기 시작했습니다. 우리는 오랫동안 깔끔하고 표준 호환 코드를 작성하는 데 사용되어 왔으며 더 이상 CSS 해킹 또는 브라우저를 사용하여 신뢰할 수없고 저수준 기술을 스니핑하지 않습니다. 또한 점점 더 많은 사용자가 웹 사이트가 모든 브라우저에서 동일하게 보일 필요가 없다는 아이디어에 동의 할 것이라고 생각합니다. 그래서이 친숙한 상황 (다른 브라우저 지원)에 직면하여 지금 우리는 어떻게해야합니까? 단순 : 기능 감지를 사용합니다. 즉, 브라우저에게 누구입니까? 신뢰할 수없는 추측을하기 위해. 대신, 우리는 당신이 이것을 할 수 있는지 브라우저에 묻습니다. 이것은 브라우저를 감지하기 쉽지만 여전히 수동으로 하나씩 테스트하는 데 시간을 보내는 것이 지루합니다. Modernizr는 현재 우리를 도울 수 있습니다.
Modernizr : HTML5 및 CSS3를 위해 특별히 개발 된 기능 감지 라이브러리
ModernIZR은 오픈 소스 JS 라이브러리로 게스트 브라우저의 차이 (새로운 표준 지원 차이를 참조)를 기반으로 다양한 수준의 경험을 개발하는 디자이너가 더 쉽게 개발할 수 있습니다. 이를 통해 디자이너는 이러한 새로운 기술을 지원하지 않는 다른 브라우저의 제어를 희생하지 않고 HTML5 및 CSS3을 지원하는 브라우저의 개발을 위해 HTML5 및 CSS3 기능을 최대한 활용할 수 있습니다.
웹 페이지에 ModernIzr의 스크립트를 포함시킬 때 현재 브라우저가 @font-face, border-radius, border-image, box-shadow, rgba () 등과 같은 CSS3 기능을 지원하는지 여부를 감지하고 HTML5 기능이 오디오, 비디오, 로컬 스토리지 및 특성과 같은 지원되는지 여부를 감지합니다. 이 정보를 얻기 위해이 정보를 지원하는 브라우저에서 이러한 기능을 지원하여 JS 기반 폴백을 생성할지 여부를 결정하거나 지원하지 않는 단순히 다운 그레이드 할 수 있습니다. 또한 ModernIZR을 사용하면 IE가 HTML5 요소에 대한 CSS 스타일의 적용을 지원할 수 있으므로 개발자는 이러한 의미 론적 태그를 즉시 사용할 수 있습니다.
Modernizr은 점진적 향상 이론을 기반으로 개발되므로 개발자가 계층 별 웹 사이트 계층을 만들도록 지원하고 권장합니다. 모든 것은 JavaScript가 적용된 유휴 기초로 시작하여 강화 된 응용 프로그램 계층을 하나씩 추가합니다. Modernizr이 사용되기 때문에 브라우저가 지원하는 내용을 쉽게 알 수 있습니다. Modernizr를 적용하여 최첨단 웹 사이트를 만드는 예를 살펴 보겠습니다.
Modernizr를 적용하는 것으로 시작하십시오
먼저, www.modernizr.com에서 Modernizr의 최신 안정 버전을 다운로드하십시오 (현재 Modernizr의 공식 웹 사이트는 중국에서 차단되었으며 Github에서 다운로드하거나 간단하게하려면 마스터에서 최신 버전 1.7 스크립트 파일을 다운로드 할 수 있습니다). 공식 웹 사이트에서는 탐지를 위해 지원하는 모든 기능 목록을 볼 수 있습니다 (이 기사의 마지막 페이지는 벽을 뒤집을 수없는 어린이 신발이 그들이 지원하는 것을 알 수 있도록이 목록을 제공합니다). 최신 버전을 다운로드 한 후 (저자는이 기사를 작성할 때 버전 1.5를 사용 했음) 페이지 영역에 추가하십시오.
다음으로, No-JS 클래스를 요소에 추가하십시오.
Modernizr가 실행되면 No-JS 클래스를 JS로 바꾸어 실행 중인지 알려줍니다. Modernizr 은이 작업을 수행 할뿐만 아니라 감지하는 모든 기능에 클래스 클래스를 추가합니다. 브라우저가 기능을 지원하지 않으면 기능에 해당하는 클래스 이름을 NO-로 접두사합니다. 따라서 요소가 다음과 같이 될 수 있습니다.
Modernizr은 또한 Modernizr이라는 JS 객체를 만들 것입니다. 이는 각 감지 된 기능에 대해 부울 결과 목록입니다. 브라우저가 새로운 캔버스 요소를 지원하는 경우 Modernizr.canvas의 값은 참입니다. 브라우저 가이 새로운 요소를 지원하지 않으면 해당 값이 False입니다. 이 JS 객체에는 Modernizr.video.h264와 같은 특정 기능에 대한 자세한 정보가 포함되어 있습니다. 브라우저 가이 특수 코덱을 지원하는지 여부를 알려줍니다. Modernizr.inputtypes.search는 현재 브라우저가 새로운 검색 입력 유형을 지원하는지 여부를 알려줍니다.
처리되지 않은 간단한 작은 페이지는 사전 테스트 시스템과 비슷하지만 의미와 접근성이 향상됩니다. 작은 텍스트 형식, 색상 및 레이아웃에 약간의 기본 스타일을 추가하겠습니다. 현재 새로운 것은 없으며, 시맨틱 구조 HTML 페이지에 표현식 스타일을 추가하고 스타일을 추가 한 후 페이지를보십시오.
아래에서는이 페이지를 향상시켜 더 흥미롭게 만들고 싶습니다. 헤드의 H1에 독특한 텍스트 효과를 적용하고, 탐지 기능 목록을 두 열로 나눈 다음, Modernizr에 관한 모든 것을 오른쪽에 가져오고 싶습니다. 나는 또한 페이지의 내용 주위에 테두리를 아름답게 만들고 싶습니다. 이제 더 강력한 CSS3을 사용하면 브라우저가 지원하지 않으면이를 무시할 규칙에 더 많은 속성을 추가 할 수 있습니다. CSS Cascade (상속)를 사용하면 Modernizr에 의존하지 않고 Border-Radius와 같은 새로운 속성을 사용할 수 있습니다. 그러나 ModernIzr을 사용하면 기존 수단으로 제공 할 수없는 몇 가지 기능을 제공 할 수 있습니다. 새로운 것들에 대한 브라우저의 차별적 지원을 기반으로 동적으로 수정 된 클래스 이름. 우리 페이지에 2 개의 새로운 규칙을 추가하여 이것을 설명하겠습니다.
첫 번째 규칙은 #Content 요소에 12 픽셀 둥근 코너를 추가합니다. 그러나 기존 페이지에서는 속성 값이 2px 시작 #666 인 #Content 요소와 테두리를 설정했습니다. 상자가 직각이지만 둥근 모서리에 있지 않을 때는 꽤 좋아 보입니다. Modernizr 덕분에 브라우저에서 지원하는 Border-Radius가있는 1px Real Edge to Box를 설정할 수 있습니다.
두 번째 규칙은 조금 더 발전했습니다. #Content 요소에 그림자를 추가하고 Box-Shadow 속성을 지원하는 브라우저의 테두리 속성을 제거했습니다. 왜? 대부분의 브라우저는 모서리와 모서리를 그림자와 조합하는 데 좋은 성능을 제공하지 않기 때문에 (이것은 주목해야 할 브라우저의 결함이지만, 우리는 지금 그것을 견뎌야합니다). 그림자를 사용하고 국경 만 사용하는 대신 그림자를 서라운드 요소에 사용합니다. 이런 식으로, 나는 세계에서 최고, 정확하며 최고의 CSS 성능을 가질 수 있습니다. Box-Shadow 속성을 지원하는 브라우저에 아름다운 그림자가 나타납니다. Border-Radius 속성 만 지원하는 브라우저는 아름다운 둥근 얇은 테두리를 나타냅니다. 이 두 가지를 지원하지 않는 브라우저가 깨진 브라우저의 경우 2 픽셀 오른쪽 각 경계가 표시됩니다.
아래에서는 헤더에 맞춤형 특수 글꼴을 적용하려고합니다. 다음은 H1에 대한 현재 진술이며 변경 사항이 없습니다.
이 진술은 기본 페이지에서 잘 작동하며 27 픽셀 텍스트 크기는 H1에 대해 설정 한 글꼴의 표시에도 적합합니다. 그러나 글꼴을 위해서는 Beautiful이라고 불리는 27 픽셀이 너무 작습니다. 여기서 우리는이 사용자 정의 글꼴을 사용하기 위해 다른 규칙을 추가하려고합니다.
먼저 @font-face 선언을 추가하고 사용자 정의 글꼴의 경로, 파일 이름 및 글꼴 이름을 지정합니다. 그런 다음 CSS 문을 사용하여 H1의 글꼴 스타일을 선택합니다. 아름다운 글꼴 자체가 다른 글꼴의 텍스트보다 훨씬 작기 때문에 여기에서 큰 글꼴 크기를 선택했음을 알 수 있습니다. 따라서 사용자 지정 글꼴을 표시 할 때 브라우저에 큰 글꼴 크기를 제공하도록 지시해야합니다.
또한 아름다운 필기 텍스트에는 텍스트 섀도 잉과 관련된 렌더링 문제가 있으므로 브라우저가 사용자 정의 텍스트를 사용하기로 결정할 때 텍스트 섀도우를 취소해야합니다. 또한 감지 기능 부품 목록은 두 개의 열로 나누어야합니다. 내 목표를 달성하기 위해 멋진 CSS 열 속성을 사용하고 싶습니다.이 속성을 사용하여 브라우저가 순서를 방해하지 않고 목록을 열로 지능적으로 나눌 수 있습니다. 우리 목록에는 숫자 숫자가 없지만 알파벳 순서로 배열됩니다. 물론 모든 브라우저 가이 속성을 지원하는 것은 아닙니다. 지원하지 않는 사람들의 경우 Float를 사용하여 2 개의 열의 목적을 달성하기 위해 Float를 사용합니다. Float를 사용한 후에는 더 이상 목록이 더 이상 알파벳순으로 배열되지 않지만 아무것도 아닌 것보다 낫습니다.
나는 다른 상황에 대해 다른 속성을 설정하기 위해 Modernizr을 다시 사용했습니다. 브라우저가 CSS 열을 지원하면 목록을 2 개의 열로 완벽하게 나눕니다. 지원되지 않으면 플로팅 방법을 사용하여 부동으로 목록을 두 개의 열로 만듭니다. 완벽하지는 않지만 단일 열의 긴 목록을 직접 적용하는 것보다 낫습니다.
여기서 당신은 내가 속성에 다른 접두사 (-moz-, -webkit-, -o-)를 추가했다는 것을 알았을 것입니다. 이는 다른 브라우저 제조업체 가이 기능의 구현에 대한 다른 정의를 가지고 있기 때문에이 기능을 구현하려면 해당 접두사를 다른 브라우저에 추가해야합니다.
이러한 변경 후 새 페이지가 더 좋아 보입니다.
우리는이 튜토리얼을 끝내기 위해 우리 페이지에 더 진보적 인 향상을 추가 할 것입니다. WebKit 기반 브라우저는 CSS 변환, 애니메이션 및 3 차원 혁신과 같은 더 멋진 특수 효과를 지원합니다. 그리고 마지막 단계의 페이지에 이러한 특수 효과를 적용하고 싶습니다. 다시 말하지만, 이러한 속성은 기존 CSS에 추가되고 지원하지 않는 브라우저에서 무시됩니다. 따라서, 한편으로 점진적인 향상이 지원되지 않는이 상황에 Modernizr을 사용하는 것이 적절합니다.
첫 번째 세트 :
@KeyFrames 규칙은 새로운 CSS 애니메이션 사양의 일부이며 현재 WebKit 만 지원합니다. 이를 통해 모든 속성에 대한 완전한 애니메이션 경로를 선언하고 원하는 모든 단계에서 변경할 수 있습니다. 애니메이션에 대한 자세한 내용은 W3C 작업 초안 사양을 읽으십시오.
여기서 우리는 요소가 3 차원 공간에서 회전하는 코드를 추가합니다.
로고를 회전시켜야하기 때문에 회전 할 때 배경과 더 조화롭게 진행되기를 바랍니다. 따라서 PNG 형식 파일이 여기에서 사용됩니다. 또한 오버플로 : 숨겨진 속성을 사용하여 Indented-9999 픽셀로 헤더의 텍스트를 숨 겼습니다. 요소를 3D로 회전시키는 것은 흥미롭지 만 너무 아름답 지 않습니다. 마지막으로, 우리는 애니메이션 규칙을 사용하여 회전 기간을 2 초로 설정하여 자체 중심 축을 따라 회전하고 절대 멈추지 않았습니다.
마지막 페이지는 멋지게 보이며 WebKit 브라우저의 재미있는 애니메이션을 설정합니다. 지금까지 귀하의 웹 사이트를 Modernizr로 제어하여 손목이 얼마나 멋진 지, 실제 진보적 인 향상을 만들 수있는 간단한 점을 이해할 수 있기를 바랍니다. 이것은 Modernizr의 모든 이점 일뿐 만 아니라 JS를 기반으로 폴백을 구축하고 HTML5의 멋진 새로운 기능을 적용하는 데 도움이 될 수 있습니다.