Index
1. 브라우저 별 지원 애니메이션
아쉽게도, 모든 브라우저 내 모든 애니메이션이 적용되는 것은 아닙니다.
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 버전에서는 지원되지 않아 빨간색으로 표시되었고 나머지는 무난하게 돌아가는 것 같습니다.
추가적으로 팁을 알려드리면, 가운데 갈색으로 진하게 칠해진 박스 부분이 가장 최신 버전의 브라우저이고 그 밑 부분은 개발자 버전입니다.
2. 크로스 브라우징
크로스 브라우징이란 W3C에서 채택된 표준 웹 기술을 적용해 모든 브라우저에 다른 기종의 OS나 HTML 렌더링 기술로 비슷하게 만들어 어떤 환경에서도 이상 없이 작동되게 하는 웹페이지를 제작하는 방법론입니다.
크로스 브라우징에는 다양한 기술들이 있는데요, 그중 몇 가지를 소개해 드리도록 하겠습니다.
2.1 웹표준 준수
웹 표준이란 이렇게 정의되어 있습니다.
웹 표준이란 브라우저 종류 및 버전에 따른 기능 차이에 대하여 호환이 가능하도록 제시된 표준으로, 공통 요소를 사용하여 웹 페이지를 제작하는 기법을 의미한다. 표준화 단체인 W3C(World Wide Consortium)가 권고한 표준안을 사용하며, 웹 표준의 궁극적인 목적은 웹사이트에 접속한 사용자가 어떠한 운영 체제나 브라우저를 사용하더라도 동일한 결과를 보이게 하는 것이다.
웹 표준 관련하여 검사를 하는 방법은 W3C가 제공하는 통합검사기 사이트를 이용하는 것입니다.
W3C 통합검사기 사이트(https://validator.w3.org/unicorn/?ucn_lang=ko)를 이용하시면 되고,
예시를 보여드리겠습니다.
검사 방법에는 URL, 파일 업로드, 직접 입력이 있으며
위의 코드는 제가 임의의 코드를 넣어보았습니다.
검사 결과는 다음과 같이 유효성 검사에서 어떤 검사를 통과하지 못했는지 자세하게 나오게 됩니다.
2.2 벤더 프리픽스
브라우저별로 다른 CSS의 속성을 잡아주기 위해 접두어를 사용하는 것을 벤더 프리픽스(Vendor prefix)라고 합니다. 이 기능을 사용하면 아직 완벽하게 제공되지 않는 CSS 기능을 임시적으로 사용할 수 있습니다.
브라우저 별 벤더 프리픽스는 다음과 같고 css 코드 안에 브라우저 별 벤더 프리픽스를 넣어서 작성하시면 됩니다.
div{ -webkit-border-radius: 5px 4px 6px 12px; /* Chrome, Safari */ -moz-border-radius: 5px 4px 6px 12px; /* Firefox */ -o-border-radius: 5px 4px 6px 12px; /* Opera */ -ms-border-radius: 5px 4px 6px 12px; /* microsoft IE */ }
이 방법 외에도 Prefix free와 같은 플러그인을 사용하면 프리픽스를 매번 입력해야 하는 번거로움을 제거할 수 있습니다.
2.3 초기화
각 브라우저마다 HTML 태그에 대한 기본값이 조금씩 다릅니다. 예를 들어 브라우저마다 margin, border, padding 등 기본값이 각자 다 달라서 태그를 적용한다고 해서 모든 브라우저에서 동일한 화면을 볼 수 없습니다.
이 문제를 해결하기 위해 기본 값을 초기화해주고 태그를 작성한다면 모든 브라우저에서 동일한 결과를 볼 수 있습니다.
구글링을 해보시면 크로스 브라우징을 위한 리셋 파일들이 많이 보이는데요, 그중 가장 인기 있는 파일을 다운로드해서 이용하셔도 되고 다운로드한 파일을 수정하셔서 이용하셔도 됩니다.
2.4 조건부 주석
html 주석 태그를 이용해서 인터넷 익스플로러에 대해 적용하기 위한 특수한 형태의 주석입니다. 인터넷 익스플로러에서만 읽히고 다른 브라우저에서는 주석이라 보고 아래 코드 부분을 무시하게 됩니다.
html 주석을 사용하는 방법과 같고, 아래와 같이 작성하면 됩니다.
<!--[if IE]> 이 브라우저는 IE입니다. <![endif]-->
더 자세한 내용을 참고하시려면 위키피디아(https://ko.wikipedia.org/wiki/조건부_주석) 을 참고해주세요.
5.5 CSS Hack(핵)
hack은 '컴퓨터 문제에 대한 우아하진 않지만 효율적인 해결책'이라는 뜻으로, 크로스 브라우징에서 잘 사용하지 않는 것이 좋긴 합니다. 추후 브라우저가 업데이트되었을 때 hack 사용으로 화면에 표기되지 않거나 오류가 발생할 수 있기 때문입니다.
그럼에도 불구하고 사용하게 되는 이유는 보통 인터넷 익스플로러 때문일 것입니다. 다양한 방법을 사용해도 핵을 사용하지 않고서는 해결되지 않는 문제가 가끔씩 나오곤 합니다. hack 원리는 위에서 설명드린 조건부 주석과 같습니다.
브라우저별로 그 브라우저만 인식할 수 있는 문자나 문자열이 존재하기 때문에 이것을 활용하여 크로스 브라우징을 할 수 있습니다.
닷핵 ( . ) : div { .height:300px; } - IE 6~7 언더스코어 핵 (_) : div { _height:300px; } - Win IE 4~6 해시 핵 ( # ) : div { #height:300px; } - IE 5.5~6, Mac IE 5, Opera7, Mozilla 계열,Firefox 스타 핵 : *html div { height:300px; } - Win IE 4~6, Mac IE 4~5 스타7 핵 : html*div { height:300px; } - Win IE 5.5~6, Mac IE 5, Safari xmlns 속성 핵 : html[xmlns] div { height:300px; } - Mozilla, Firefox, Opera, Safari 등 속성 선택자를 지원하는 브라우저 :root 가상클래스 핵 : :root div { height:300px; } - Mozilla, Firefox, Mac IE 5, Safari 등 가상클래스를 지원하는 브라우저 IE 8에서만 적용 : div { height/*\**/:300px; } - IE 8 IE 8을 포함한 IE버젼에서만 적용하기 : div { height:300px\; } : Only IE IE 7, Opera 적용하기 : *+html body div { height:300px; } - IE 7, Opera 8 이후 버전 IE 6 제외시키기 : div { height/**/:300px; } - Win용 IE 6에서는 적용 제외 IE 7, IE 8에 적용하기 : html>body div { height:300px; } - IE 7, IE 8에서만 적용 파이어폭스만 적용 : @-moz-document url-prefix(){ div {height:300px;}} 크롬만 적용 : @media screen and (-webkit-min-device-pixel-ratio:0) { div {height:300px;}} 출처: https://woodstar.tistory.com/180 [MOUSE world]