아쉽게도, 모든 브라우저 내 모든 애니메이션이 적용되는 것은 아닙니다. IE, 크롬, 파이어 폭스 등 브라우저마다 반영이 되는 것도 있고 그렇지 않은 것도 있습니다. 공들여 만들었는데 CSS가 지원 되지 않는 것도 문제이지만, 지원 여부를 확인하기 위해 모든 브라우저를 모든 버전 별로 설치하는 것도 번거로운 문제 일 것입니다.
그래서 이 귀찮은 일들을 쉽게 해결하기 위해 다양한 사이트들이 있는데요, 저는 https://caniuse.com 를 사용하고 있습니다. 대부분의 브라우저 및 브라우저 버전까지 세세하게 나누어서 CSS 지원 여부를 보기 쉽게 알려줍니다.
사용법은 간단합니다. https://caniuse.com 에 들어가서 밑줄 친 부분에 Flexbox, CSS Grid 등 원하는 CSS 애니메이션을 입력하시면 됩니다.
초록색은 지원 가능, 빨간색은 지원하지 않음, 연두색은 부분적으로 지원, 회색은 알 수 없음이니 참고하고 봐주시길 바랍니다.
우선적으로 가장 빈번하게 사용되는 애니메이션의 지원 여부를 소개해드리겠습니다.
Flexible Box 입니다.
IE 6-9 버전, Opera 10-11.5 버전, Opera Moblie 12 버전에서는 지원되지 않아 빨간색으로 표시되었고 나머지는 무난하게 돌아가는 것 같습니다.
추가적으로 팁을 알려드리면, 가운데 갈색으로 진하게 칠해진 박스 부분이 가장 최신 버전의 브라우저이고 그 밑 부분은 개발자 버전입니다.
크로스 브라우징이란 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다른 기종의 OS나 HTML 렌더링 기술로 비슷하게 만들어 어떤 환경에서도 이상 없이 작동되게 하는 웹페이지를 제작하는 방법론입니다.
크로스 브라우징에는 다양한 기술들이 있는데요, 그중 몇 가지를 소개해 드리도록 하겠습니다.
웹 표준이란 이렇게 정의되어 있습니다.
웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안을 사용하며, 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영 체제나 브라우저를 사용하더라도 ****동일한 결과를 보이게 하는 것이다.
웹 표준 관련하여 검사를 하는 방법은 W3C가 제공하는 통합검사기 사이트를 이용하는 것입니다. W3C 통합검사기 사이트(https://validator.w3.org/unicorn/?ucn_lang=ko)를 이용하시면 되고, 예시를 보여드리겠습니다.
검사 방법에는 URL, 파일 업로드, 직접 입력이 있으며 위의 코드는 제가 임의의 코드를 넣어보았습니다.
