반응형
최근 웹퍼블리싱을 하다보면 고객사의 요청에 의해 마이크로소프트(MS) 엣지(Edge) 브라우저를 크로스브라우징하여 마크업 진행하는 경우가 종종 있다.
크롬 또는 익스플로러 브라우저와 같이 크로스브라우징을 하면서 아직은 크게 어려움은 없었으나, 최근 엣지(Edge) 브라우저 크로스브라우징을 하다 페이지 전부 CSS가 깨져버린 상황을 겪었다.
그동안 엣지(Edge) 브라우저 크로스브라우징을 하면서 그런일은 없었기에 적지 않게 놀랐다.
작업했던 마크업 파일은 기존 우리 회사(맑은커뮤니케이션)에서 마크업하던 작업물이 아닌, 타 업체로 부터 인계를 받아 유지/보수 진행하던 마크업이라 더 난감한 상황이였다.
하지만, 구글링을 해봐도 css들이 왜 적용안되는지 알 길이 없었다.
혹시나 하여 css 처리방식이 @import 방식으로 처리되어 있어, link 방식으로 변경하였더니 멀정하게 반영되는 것이다.
문제의 답은 간단했다. 엣지(Edge) 브라우저는 @import 방식을 처리하지 못했던 것이다. 헉....
우리 회사(맑은커뮤니케이션)에서는 css 처리방식을 @import 방식을 쓰지 않고 link 방식만을 쓰기 때문에 그동안 문제를 발견하지 못했던 것이다.
하지만 많은 회사들이 @import방식을 아직도 많이 사용하기에 공유하고자 글을 작성한다.

Link 방식 vs @import 방식

결과적으로 보면 같아 보일 수 있겠지만, 사실은 Link 방식을 사용하는 것이 @import 방식을 사용하는 것보다 페이지의 로딩 속도 측면에서 뛰어나다.

@import 방식의 장, 단점

CSS파일 내에 @import를 이용하여 CSS를 연결하는 방식이다.
하나의 CSS파일에 여러개의 페이지 CSS를 로드시켜 편리하다고 생각하면, 편리하다고도 할 수 있다.
그러나 성능을 생각한다면 그리 좋은 방법은 아니다. @import를 많이 사용한다면, 익스플로러에서는 다운로드 순서가 다르게 작동하여 문제가 발생할 수 있으며, 병렬방식이 아닌 직렬방식으로 다운로드 하기때문에 전체 로딩시간이 길어지는 문제점이 있기에, 추천하는 방법은 아니다.
그리고 이 글의 주제처럼 엣지(Edge) 브라우저에서 @import 방식을 사용할 경우 @import된 CSS파일을 적용하지 못한다.

사용방법은 아래와 같습니다.

@import url("reset.css");
@import url("content.css");

Link 방식의 장, 단점

HTML의 Link태그를 사용하는 CSS연결 방식이다.
필자가 사용하는 CSS연결 방식으로 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가 등 유지/보수에 용이하며, 직렬방식이 아닌 병렬방식으로 다운로드 하기에 로딩속도가 빠르고, CSS파일 여러개를 Link 방식으로 다운로드 하더라도 익스플로러에서 순서가 동일하게 작동한다.
그리고 이 글의 주제처럼 엣지(Edge) 브라우저에서 CSS파일을 다운로드 하지 않는 일이 발생하지 않는다.

사용방법은 아래와 같습니다.



마치며...

처음 이 글을 작성하고자 한 이유는 엣지(Edge) 브라우저가 @import 방식을 처리 안된다는 것을 공유하고자 작성하였으나, @import방식과 Link방식의 차이점을 설명하여 엣지(Edge) 브라우저의 버그문제도 있지만 Link 방식을 사용하는 것이 더 이롭다는것을 알려드리고 싶었습니다.
아직도 많은 회사들이 @import 방식을 많이 사용하는데, 이럴경우 접속자가 많은 사이트의 경우 로딩속도가 현저하게 늦어지며, 엣지(Edge) 브라우저에서 CSS가 적용안된 사이트를 보게 될 수 있기에 이 글을 작성하게 되었습니다.

반응형

+ Recent posts