_.._to_CSS.png)
MAC OS에서 Safari의 경우 a태그에 background-color가 적용이 되지 않는 이슈가 있었다
확인 해보니 크로스 브라우징 문제로 인해 적용이 되지 않았고 이유를 살펴보니 appearance란 CSS 속성이 운영 체제의 테마를 기준으로 플랫폼에 기본 스타일이 박혀있었다
아래의 css 코드 확인
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}그리하여 -webkit-appearance 라는 코드를 주석처리 또는 none 값으로 해결하였으며 크로스브라우징이라는 부분을 새롭게 공부하여 블로깅을 해본다.
Cross Browsing(크로스 브라우징)
1. 크로스브라우징이란 뭘까 ?
크로스브라우징은 웹 페이지 제작 시에 모든 브라우저에서 깨지지 않고 의도한 대로 올바르게(호환성) 나오게 하는 작업을 말한다.
css를 건들이게 되는 퍼블리셔나 프론트엔드 개발자로써는 놓치지 않고 가야하는 부분이며 반응형 웹페이지를 만드는 것과 같이 스트레스를 무지하게 받게 되는 것중 하나 !! ....
크로스 브라우징을 고려하지 않는다면 HTML, CSS, JS등 코드가 원하는대로 적용이 안될 수 있으며
그러한 이유로는 브라우저 마다 렌더링 엔진이 다르기에 전부 적용이 되게끔 설정 해줘야 하는 것이다.
2. 렌더링 엔진 ?
렌더링 엔진이란 페이지를 렌더할 때에 실질적으로 페이지를 작업해주는 브라우저의 엔진들을 의미한다
엔진의 종류로는 트라이던트, 게코, 웹킷, 프레스토, 블링크, 듀얼 엔진등 다양하다
각 엔진은 사용되는 브라우저의 버전 혹은 지원하는 회사(ex: 구글, MS, 애플..)등에 따라 다르게 사용된다.
3. 그렇다면 어떻게 대응해야하는가?
일단 기본적으로 브라우저를 작업하는 사람이라면 해당 프로젝트의 타겟이 되는
가장 높은 점유율을 가지고 있는 브라우저를 포커싱을 하는게 중요하다
(https://gs.statcounter.com/ << 전 세계 브라우저 점유율 조사 사이트)
각 나라별로 사용자들의 순위가 다르며 모바일과 데스크탑등 다양한 환경에 따라 점유율 또한 달라진다.
그래서 프로젝트 진행시에 타겟과 정책을 잘 잡아야 하며
아래와 같은 방법으로 크로스 브라우징 작업을 진행할 수 있다.
크로스 브라우징 작업 !!
- 캔 아이 유즈를 통해 각 브라우저에 호환성을 검토한다 (https://caniuse.com)
- CSS 초기화 작업을 통해 브라우저마다 차이가 나는 기본 스타일 값들을 초기화 시킨다.(reset.css등..의 작업)
- 핵(HACK) 을 사용하여 작업한다
(스타일을 줄 때 특수문자를 넣어 특정 브라우저들에게는 인식이 안되지만 IE 특정 버전에는 인식되도록 하는 방법이다 하지만 핵 사용은 최대한 지양하는게 좋다 왜냐하면 CSS 유지보수를 어렵게하기 때문이다)
크롬 핵
@media screen and (-webkit-min-device-pixel-ratio:0){
여기에 css 작업
}
파이어폭스 핵
@-moz-document url-prefix() {
여기다 쓸 css 넣기
}
==
선택자핵
/* IE 6 이상 */
* html #uno { }
/* IE 7 이상 */
*:first-child+html #dos { }
/* IE 7 과 현대 브라우저 */
html>body #tres { }
/* 현대 부라우저 (IE 7 빼고) */
html>/**/body #cuatro {}
/* 오페라 9.27 이상 */
html:first-child #cinco {}
/*사파리,크롬,오페라 다수브라우저핵*/
html[xmlns*=""] body:last-child #seis { }
/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
html[xmlns*=""] body:last-child #seis { }
/*사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
body:nth-of-type(1) #siete { }
/* 사파리 3+, 크롬 1+, 오페라 9+, 불여우 3.5+ */
body:first-of-type #ocho { }
/* 사파리 3, 크롬 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
}
- IE용 주석을 이용하는 방법 (IE는 사실 단종..)
<!-- [if IE 7]>
<link href="ie7.css" type="text/css" rel="stylesheet"/>
<![endif]-->
<!-- [if IE 8]>
<p> 이 문구는 IE8이 포함되지 않은 하위 브라우저, 즉 IE7,6에서 보여지게 됩니다.</p>
<![endif]-->
- 메타 태그를 이용하기!
<head>
// ...
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
//...
</head>
head 요소 안에 넣어두면 IE가 그 해당 문서를 읽고 원하는 모드로 렌더링을 하게 해준다
content="IE=edge"는 해당 브라우저가 할 수 있는 가장 최신의 렌더 버전으로 렌더링이 된다
크로스 브라우징 작업의 경우 그 의미를 정확히 알고 작업을 해야하며 보통 IE의 버전이 낮을 수록 컴퓨터 성능도 낮을 테니 그렇게 되면 성능 저하는 더 치명적이게 나타난다
(ex: IE 하위버전에서 html5를 사용하려고 라이브러리를 사용하는 건 큰 성능 저하가 난다)
CSS 캐시 방지
이 글을 쓰게 된 이유이기도 하다
이미 AWS를 통해 배포가 되어 있는 사이트에서 브라우저 호환성으로 인해 맥의 사파리에서 CSS가 적용되지 않는 문제가 생겼고 webkit으로 이미 기존 CSS가 먹고 있는 상황이라 hotfix로 주석 처리후 배포가 진행됬다
근데 ? 반영이 되지 않는 것 ..
이유가 뭔가하니 바로 CSS의 캐시 적용 문제였다.
기존에 작업을 했을때는 항상 배포가 되지 않은 프로젝트 였거나 혹은 배포가 됬다고 하더라도 이미 CSS 캐시 방지용 코드가 적용되어 있거나 했었던 것 같아 처음 경험해보는 문제 였다.
웹사이트를 사용자가 처음 방문하게 되면, 해당 웹페이지와 관련된 html, css, js, image, multimedia 파일들이 캐시로 저장이 되게 되고 이 캐시들이 정보를 가지고 있어 반영이 안되는 것 !!
그러면 사용자보고 전화해서 일일히 "아 죄송한데 캐시좀 지워주세요" 할 수는 없기에 해당 문제를 사전에 방지해야한다. (내가 전화하는게 아니라면 괜찮을 수도 ㅎ)
캐시 문제 해결
캐시 문제를 해결하기 위해선 캐시 자체의 기본 동작 방식을 역이용하는 것 !
기본적으로 캐시의 동작은 URL을 기준으로 기존에 동일한 URL에 요청한 적이 있었는지를 판단하게 된다. 쉽게 말하면 해당 URL을 바꿔주면 기존 캐시에 의해 영향 받을 일이 없는것
<link rel="stylesheet" type="text/css" href="test.css?version=1.2">이런식으로 뒤에 쿼리스트링을 이용해서 버전을 명시해주는 경우가 주로 많다 !! :)
너무 간단 ! 주니어 개발자의 경우 배포가 되어 있는 프로그램을 수정할 일이 회사에 들어가기 전에는 별로 없지만 이런 크로스 브라우징과 캐시 문제에 대해 생각을 하고 개발을 해야 된다는 것을 알게 되었다
캐시관련내용이 좋네요 감사합니다~