CSS 유효성 및 Cross Browsing 검사 (CSS Validation & Cross Browsing Check)

CSS의 속성과 값을 현존하는 웹 브라우저들이 제대로 지원하는지 확인하는 기능입니다. 이 기능은 드림위버 8 버전과 CS3 버전이 큰 차이를 지니고 있습니다. 드림위버 8 버전이 현존하는 웹 브라우저의 버전 수준에 못 미치는(한 단계씩 낮은) 브라우저(IE6, FF1, OP8, SF2) 지원결과를 제공한 반면 드림위버 CS3 버전은 현존하는 최신 버전의 브라우저(IE7, FF2, OP9, SF2)에 대한 지원결과까지 확인할 수 있도록 기능을 개선하였기 때문입니다.

CSS 유효성 검사를 위한 환경설정

Check Browser Support-Settings...

Document Panel 에 위치한 Check Browser Support Check Browser Support 메뉴에서 Settings... 를 선택 합니다.

Target BrowserTarget Browser

지원하고자 하는 브라우저와 버전을 선택 합니다. (이미지 설명 : 좌측은 Dreamweaver 8, 우측은 Dreamweaver CS3 버전 입니다. CS3 버전이 보다 최신 버전의 웹 브라우저에 대한 검사결과를 지원하고 있습니다.)

CSS 유효성 및 Cross Browsing 검사

Result Panel-Validation

검사하고자 하는 CSS 문서를 열어놓고 Document Panel 의 Check Browser Support Check Browser Support 기능을 실행합니다. 이것을 실행하더라도 화면상에는 아무 변화가 나타나지 않을 것입니다. 다음 과정을 진행 합니다.

Check Browser Support-Show All Errors

다시한번 Check Browser Support Check Browser Support 메뉴에서 Show All Errors 항목을 실행 합니다.

Target Browser Check

Result Panel 의 Target Browser Check 탭에 검사결과가 출력 됩니다. 사용자가 설정해 놓은 최소 지원 브라우저(Minimum Targert Browser Versions)에서 지원되지 않는 CSS 항목들을 출력해 줍니다. 이곳에서 오류로 보고되는 항목들은 대부분 해당 브라우저에서 렌더링 오류를 유발하는 것들이기 때문에 이 검증방법은 Crowss Browsing 검사결과라고 판단해도 좋습니다. 한편 CSS Hack을 사용하였고 타 브라우저에서는 그것을 오류로 인식하지 않고 무시하더라도 드림위버는 Hack 자체를 오류라고 판단하고 검사결과에 반영합니다.

한 가지 아쉬운 점은 CSS 유효성 검사도구가 웹 브라우저의 버전에 대응하는 검사결과를 출력해 주지만 W3C가 권고하는 현재의 활성 표준(CSS 2.0)에 대응하는 검사결과를 보고해 주지는 않는다는 점 입니다. 따라서 이 검사도구의 사용자는 브라우저에서 지원하지 않아 오류로 보고된 CSS 속성이 현재의 활성 표준인지 아닌지를 가늠할 수 없게 되는 문제가 있습니다.