CSS 속성 지원 확인

CSS에는 모든 브라우저에서 지원되는 오래된 속성이 있는 반면, 최신 브라우저에서만 지원되고, 그것도 모든 브라우저에서 지원되지는 않는 새로운 속성들도 있습니다.

마크업을 할 때는 해당 속성을 이미 사용할 수 있는지 여부에 대한 결정을 내려야 합니다. 이를 위해 다음과 같은 특별한 규칙이 있습니다: 해당 속성을 지원하지 않는 브라우저를 사용하는 사용자가 전체 사용자의 1% 미만인 경우, 해당 속성을 사용할 수 있습니다.

그러나 여기에는 미묘한 차이가 있습니다. 결국 지원이 없으면 사이트 레이아웃이 무너질 수 있는 속성들이 있습니다, 예를 들어 플렉스박스. 또한 작동 여부가 그다지 중요하지 않은 속성들도 있습니다. 말하자면, 작동하지 않는 hyphens (하이픈 넣기) 속성은 사이트를 크게 악화시키지는 않을 것입니다.

브라우저가 속성을 지원하는지 확인하려면 caniuse.com 서비스를 사용해야 합니다. 이 서비스는 모든 브라우저의 각 버전별 속성 지원 현황과 각 버전을 사용하는 사용자의 비율을 보여줍니다.

이 데이터를 통해 특정 속성을 이미 사용할 수 있는지에 대한 판단을 내릴 수 있습니다. 또한 일부 속성은 아직 사용 중인 일부 브라우저 버전에서 벤더 프리픽스(Vendor Prefix)를 붙여야 할 수 있습니다. 이 점에도 주의를 기울여야 합니다.