CSS(Cascading Style Sheets)의 점진적인 향상에 대한 자세한 설명

CSS(Cascading Style Sheets)를 사용하여 작업에 점진적인 향상을 통합하는 방법에는 여러 가지가 있습니다. 이 기사에서는 보다 성공적인 방법에 대해 논의하고 사이트를 점진적으로 향상시키는 다른 방법을 고려할 것입니다.

스타일 시트 구성

많은 웹 디자이너와 개발자는 스타일 시트를 문서에 도입하는 방법에 대해 많이 생각하지 않지만 실제로는 예술입니다. 올바른 접근 방식을 사용하면 점진적인 향상의 많은 이점을 즉시 얻을 수 있습니다.

여러 스타일 시트 사용

스타일을 조금만 나누면 많은 이점을 얻을 수 있습니다. 분명히 1500줄이 넘는 스타일시트는 유지 관리하기가 다소 어려우며 여러 스타일시트로 분할하면 작업 흐름이 향상되고 노력이 절약될 수 있습니다. 거의 언급되지 않는 또 다른 이점이 있습니다. 대상 미디어 유형(번역: 컴퓨터, 프린터, 텔레비전, 휴대폰 등과 같은 다양한 미디어 유형을 나타냄)에서 보다 일관된 프리젠테이션 효과를 얻는 데 도움이 됩니다.

main.css 파일에는 사이트의 모든 스타일 규칙이 포함되어 있습니다. 이를 타이포그래피, 레이아웃 및 색상이 포함된 독립적인 스타일 시트(type.css,layout.css, color.css)로 분할하는 것을 고려하세요.


(그림: 단일 스타일 시트를 여러 관련 스타일 시트로 분할하는 방법)

위의 분리가 완료되면 몇 가지 마법의 트릭을 사용하여 오래된 브라우저(예: IE5/Mac) 및 CSS 레이아웃에 대한 강력한 지원이 부족한 많은 브라우저에 "낮은 충실도" 환경을 자동으로 제공할 수 있습니다. 어떻게 하나요? 그것은 모두 파일을 가져오는 방법에 따라 다릅니다. main.css가 link 요소를 통해 도입되었다고 가정합니다.


먼저 위의 참조 줄을 세 가지 관련 스타일시트로 나눕니다.


과거에는 많은 개발자가 미디어 값을 "스크린" 또는 "프로젝션"으로 설정하여 Netscape 4.x에서 레이아웃 스타일을 완전히 유효하지 않게 만들었습니다(주석: Netscape 4.x는 플로팅 및 위치 지정과 같은 복잡한 레이아웃을 지원하지 않습니다). 그러나 더 나은 해결책이 있습니다. 이 방법을 자세히 설명하기 전에 대체 미디어 유형을 살펴보겠습니다.

선택적 미디어 유형

점진적인 향상은 주로 콘텐츠에 중점을 두고 있으며, 우리는 콘텐츠 표시를 지원하는 모든 장치에 "향상된" 경험을 제공하고자 합니다. 따라서 인쇄 및 모바일 장치와 같은 브라우저 이상의 장치를 고려하는 것이 중요합니다.

불행하게도 모바일 장치 시장은 여전히 ​​세분화되어 있고 미성숙합니다(모든 휴대용 브라우저가 "화면"을 대상으로 하는 미디어 유형 스타일을 렌더링할 것이라고 순진하게 생각하지 마십시오). 결과적으로, 모든 미디어에서 점진적인 향상에 대한 자세한 논의는 책은 아니더라도 많은 페이지를 차지하게 될 것입니다. 하지만 절망하지 마세요. 모바일 세계에서는 차이점이 통합되기 시작했고, 일부 매우 똑똑한 사람들이 우리의 발전을 돕기 위해 자원을 모으기 시작했습니다. 그러나 시간과 노력을 절약하기 위해 인쇄 장치에 중점을 둘 것입니다.

일반적으로 인쇄 스타일을 추가하려면 다른 링크 요소를 사용해야 합니다.


관례적으로 위 스타일 시트에는 레이아웃 및 색상 규칙을 포함한 모든 인쇄 관련 규칙이 포함되어 있습니다. 특히 레이아웃의 경우 스타일 시트의 대부분의 규칙이 main.css에서 복사될 가능성이 높습니다. 즉, 이로 인해 중복된 코드가 많이 발생하게 됩니다.

출판 스타일과 색상 스타일을 레이아웃 스타일에서 분리하면 더 이상 인쇄 스타일 시트에 반복되는 규칙이 필요하지 않다는 이점을 볼 수 있습니다. 이 외에도 사이트의 유용성을 개선하고 문제가 있는 브라우저에서 특정 레이아웃 스타일을 숨기는 데 또 다른 구성 팁을 사용할 수 있습니다.

스타일시트를 다시 살펴보면 다음 코드를 고려해보세요.


우리는 미디어 유형을 선언하지 않았으므로 Netscape 4.x는 이 세 파일의 모든 스타일을 읽습니다. 그러나 Netscape 브라우저는 기본적인 CSS를 이해하므로 이를 활용할 수 있습니다. layout.css에 포함된 모든 스타일을 screen.css라는 적절한 이름의 새 스타일 시트로 이동하여 스타일을 더욱 체계적으로 구성할 수 있습니다. 마지막으로, screen.css를 가져오도록 레이아웃.css의 콘텐츠를 업데이트합니다. 그러면 NS4.x와 그 형제 브라우저가 더 이상 스마트하지 않습니다(왜냐하면 @import 지시문을 이해하지 못하기 때문입니다). (번역 참고: 여기서 글쓴이가 얘기하고 있는 것은 레이아웃.css의 모든 내용을 screen.css로 옮긴 다음,layout.css의 @import를 통해 screen.css를 도입한다는 것입니다. 제 생각에는 에 추가하는 것이 가장 좋은 방법인 것 같습니다. 레이아웃.css NS4.x에서도 이해할 수 있는 가장 기본적인 레이아웃 스타일을 유지하고 기타 고급 레이아웃 스타일을 screen.css로 옮깁니다.


개선의 여지가 있습니다. 스타일시트 대상 미디어를 선언해야 하며, @import 선언에 미디어 유형을 추가하여 이를 수행합니다.


문제는 IE7 이하의 브라우저가 이 구문을 이해하지 못하기 때문에 위의 스타일 시트를 무시한다는 것입니다. 위의 스타일 시트를 이러한 브라우저에 제공하려는 경우(종종 원하는 경우) 조건부 주석을 사용하여 쉽게 수행할 수 있습니다. 아래에서 자세히 설명하겠습니다. 독수리처럼 예리한 눈을 가진 사람이라면 스타일 시트 이름 양쪽에 큰 따옴표(") 대신 작은 따옴표(')가 사용된다는 것을 알 수 있을 것입니다. 이 작은 트릭을 사용하면 IE5/Mac이 스타일을 무시할 수 있습니다. IE5/Mac CSS 레이아웃 기능은 매우 약하며(특히 플로팅 및 위치 지정 지원) 레이아웃 규칙을 숨기는 것이 완벽하게 허용되지만 결국 색상 및 레이아웃 정보를 얻을 수 있는 경우도 있습니다. .

동일한 기술을 사용하여 print.css 파일을 가져올 수 있습니다(예상할 수 있듯이 인쇄 레이아웃에 대한 특정 규칙이 포함되어 있음).


이제 우리는 아름답게 정리된 스타일 시트를 갖게 되었을 뿐만 아니라 사이트 디자인을 점진적으로 향상시킬 수 있는 효과적인 방법도 갖게 되었습니다.


(여러 스타일 시트가 서로 어떻게 연관되어 있는지와 이를 문서에 적용하는 방법에 대한 그림)

IE6을 어떻게 처리하나요?

많은 사람들에게 Internet Explorer 6은 새로운 Netscape 4이며 모두가 Internet Explorer 6이 사라지기를 원합니다.

IE6 문제에 대한 설명은 생략하겠습니다. IE6의 문제는 잘 문서화되어 있으며 솔직히 해결하기가 그리 어렵지 않습니다. 더욱이 IE7의 채택은 매우 빠르게 진행되고 있으며(특히 소비자 시장에서) IE8은 이미 공개 베타 버전입니다. 이는 언젠가 우리가 노후화된 IE6에 작별을 고할 수 있다는 것을 의미합니다.

의도했든 의도하지 않았든 Microsoft가 IE5를 출시했을 때 IE5는 점진적인 향상을 위한 좋은 도구인 조건부 주석을 제공했습니다. 이러한 기발한 논리(다른 모든 브라우저에서는 HTML 주석으로 분류됨)는 특정 마크업 코드 조각이 IE에서만 작동하도록 허용할 뿐만 아니라 이러한 코드 조각이 특정 IE 버전에서만 작동하도록 허용합니다.

웹 표준을 인식하는 개발자로서 우리는 항상 기존 표준을 준수하는 대부분의 브라우저에서 우리의 디자인을 먼저 테스트한 다음 사소한 변경으로 다시 정상 궤도에 오를 수 있는 브라우저에 대한 패치를 제공해야 합니다. 모든 사람의 작업 흐름은 다르지만 모든 프로젝트를 표준 문서 세트로 시작하는 것이 가장 좋습니다. 내 기본 제품군에는 다음 파일이 포함되어 있습니다.


그런 다음 프로젝트의 필요에 따라 브라우저별 CSS 파일을 추가하여 "사소한 수정 사항"을 포함합니다. 현재 대부분의 프로젝트에서 이러한 파일은 ie7.css 및 ie6.css입니다. 프로젝트에 IE6 이전 버전에 대한 지원이 필요한 경우 해당 파일(예: ie5.5.css 등)도 생성합니다. 이 파일을 사용하여 적절한 스타일시트에 스타일 규칙을 추가하기 시작했습니다.

대부분의 CSS가 Firefox의 CSS 편집기 사이드바를 사용하여 작성되었기 때문에 Mozilla Firefox에서 CSS 테스트를 시작합니다. Firefox에서 페이지 디자인을 마친 후 즉시 다른 브라우저를 열어 테스트하고 확인했습니다. 대부분은 웹 표준을 준수하기 때문에 완벽하게 수행됩니다. 그런 다음 IE7을 열어 테스트합니다. 대부분의 경우 문제가 많지 않습니다. 때때로 hasLayout을 실행해야 하거나 기타 사소한 레이아웃 오류를 수정해야 합니다. 이러한 수정 사항을 기본 제품군의 스타일시트 파일에 작성하는 대신 ie7.css에 추가하고 문서 HEAD의 조건부 주석을 통해 도입했습니다.


위의 조건부 주석을 사용하면 IE7 이하(번역 참고: lte는 작거나 같음의 약어)에서 도입된 스타일을 인식할 수 있습니다. 따라서 IE7로 페이지를 탐색하면 이러한 패치를 얻을 수 있습니다. 그러나 이러한 문제가 해결되었을 수 있는 IE의 새 버전을 사용하는 경우(예를 들어 IE8에서는 hasLayout을 포기하고 더 이상 이러한 문제가 발생하지 않음) 이러한 스타일은 무시됩니다. 반면에 이러한 스타일은 IE6을 사용하여 얻을 수 있습니다. IE7의 렌더링 버그는 IE6에도 존재하는 경향이 있기 때문에 이는 좋습니다. 위에서 언급한 것처럼 IE7 이하 버전에서는 미디어 유형으로 @import를 이해할 수 없습니다. 이런 방식으로 screen.css를 도입하는 것은 IE7 이하 버전에서는 유효하지 않습니다. 따라서 screen.css를 도입하려면 ie7.css 파일 상단에 미디어 유형 없이 @import 문도 추가해야 합니다.

IE7을 패치한 후에는 IE6을 열고 패치가 필요한지 확인하겠습니다. 필요한 경우 문서에 또 다른 조건부 주석을 추가하여 ie6.css로 가져옵니다.


그런 다음 IE6에서 요구하는 패치를 해당 스타일 시트에 추가하기만 하면 이러한 스타일 시트는 IE7에서 무시되지만 IE5.5와 같은 버전에는 여전히 영향을 미칩니다.

이러한 방식으로 조건부 주석을 사용하면 프로젝트의 대상 브라우저를 쉽게 관리하고 CSS 패치 파일을 독립적이고 무료로 유지할 수 있습니다.

기타 고려사항

CSS 점진적 향상은 스타일 시트를 문서와 연결하는 방법에만 국한되지 않고 CSS를 작성하는 방법에도 적용될 수 있습니다.

예를 들어 생성된 콘텐츠를 생각해 보세요. 모든 브라우저에서 지원되는 것은 아니지만 이는 추가 디자인이나 텍스트를 추가하는 좋은 방법입니다. 이는 페이지의 유용성을 위해 필수는 아니지만 시각적 또는 기타 개선 사항을 제공할 수 있습니다.

간단한 문의 양식을 예로 들어보겠습니다.


(그림: 이 예에 사용된 HTML 형식(코드는 아래에 제공됩니다))

위 HTML 코드를 작성하다 보면 자연스럽게 label 요소에 콜론(:)이 쓰여질 가능성이 높습니다. 왜 이런 일을 하는가? 실제로 라벨 요소에 콘텐츠가 추가되었나요? 설마. 이것의 목적은 사용자에게 추가적인 시각적 단서를 제공하는 것입니다. 레이블 요소의 경우 중복되므로 제거해야 합니다.


더 완벽하게 적합한 방법은 콘텐츠를 생성하여 문서에 콜론을 다시 추가하는 것입니다.


이러한 방식으로 양식을 작성하면 유연성이 제공됩니다. 전체 사이트에서 장식 문자를 제거해야 할 때 각 양식을 찾을 필요 없이 CSS 파일을 간단히 편집할 수 있습니다(한때 위치를 알고 있었지만). 이 트릭은 또한 품질이 저하됩니다. 콜론이 없으면 양식이 사용할 수 없게 렌더링되지 않기 때문입니다. 이는 점진적인 향상의 좋은 예입니다.

어쩌면 고급 CSS 선택기(번역: 선택기, 선택기로 번역되기도 하지만 연산자가 연산자 대신 연산자로 번역되는 등 선택기가 원래 의미를 더 잘 반영할 수 있다고 생각함)를 사용하면 특정 스타일을 변경할 수 있다는 사실을 발견했을 수도 있습니다. 고급 브라우저를 사용하면 시간이 지남에 따라 사이트를 개선하는 데 도움이 됩니다. 좋은 예는 IE6, 동시대 브라우저 및 이전 브라우저에서 이해되지 않는(따라서 무시되는) 속성 선택기입니다. Egor Kloos는 CSS Zen Garden에 "Gemination"이라는 제목으로 제출하면서 이 개념을 아름답게 사용했습니다.


(그림: 표준 브라우저와 IE6에서 Egor Kloos의 CSS Zen Garden 작업("Double Double") 렌더링 비교)

그는 어떻게 했나요? 다음은 약간 수정된 예제 코드입니다.


차이점은 명백하며 CSS에서 점진적인 향상이 어떻게 사용될 수 있는지를 보여주는 아름다운 예시입니다.

마찬가지로 Andy Clarke의 사이트에는 IE6 관련 유용한 정보가 있습니다. IE의 필터를 사용하고 일부 조건부 주석을 추가함으로써 Andy는 사이트에서 모든 색상을 제거하고 진정한 "lo-fi" 경험을 제공하는 몇 가지 교체 가능한 이미지를 제공했습니다.


(그림: 표준 브라우저와 IE6의 Andy Clark 사이트 비교)

위 그림의 회색 기술은 다음과 같습니다. 조건부 주석으로 추가된 IE6(및 아래)용 스타일시트에 다음 명령문을 추가합니다.


위의 두 가지 예에는 일상 업무에 사용되지 않는 기술이 너무 많이 포함되어 있을 수 있지만 실제로 CSS 점진적 향상을 적용하는 방법에 대한 개념을 잘 보여줍니다.

요약

논의한 것처럼 CSS 점진적 향상을 사이트에 적용하는 방법에는 여러 가지가 있습니다. 가장 간단하고 아마도 가장 좋은 방법은 스타일 시트를 구성하고 이를 문서에 연결할 방법을 신중하게 생각하는 것입니다. 조건부 주석을 이해하고 나면 IE 관련 문제를 처리하는 것이 식은 죽 먹기가 될 것입니다. 선택기 사용 방법과 선택기가 사용되는 시나리오를 명확하게 이해하고 있다면 CSS에서 더 세밀하게 조정할 수 있습니다.

이러한 지식을 갖추면 귀하는 점진적인 향상 전문가가 되는 길에 들어서게 될 것입니다.