이번에는 크로스브라우징과 모바일 호환성 이슈에 대해 포스팅 할 것이다. 그럼 우전 크로스브라우징이란 무엇인지 부터 알아보자
크로스브라우징이란?
크로스브라우징이란 브라우저마다 웹을 랜더링엔진이 다르기 때문에 여기서는 내가 원하는 대로 잘 동작하는데 다른 곳에서는 내가 원하지 않는 디자인이 섞여 들어가거나 의도치 않게 동작 할 수도 있다. 즉 이러한 문제를 해결하여 어떤 환경에서라도 동일한 경험을 제공 하도록 하는 것이 크로스브라우징이라고 말할 수 있을 것이다.
렌더링 엔진의 종류
그렇다면 브라우저 별로 적용되고 있는 랜더링 엔진은 무엇일지 알아보자
위의 그림을 보면 현제 검색엔진들 별로 사용하는 엔진들을 알 수 있다. 우리에게 가장 친숙하고 접유율이 높은 크롬도 한때는 애플과 같은 웹킷을 사용하다 웹킷의 개조형(?)인 블링크를 사용하는 것을 알 수 있다. 아래에서 자세히 포스팅하겠지만 블링크를 사용하지만 웹킷에서 그 줄기를 가져와서 그런지 css접두사를 붙여 크로스브라우징을 할때 -webkit-을 사용하면 크롬도 함께 적용되는걸 알 수 있다.
크로스브라우징을 하는 방법과 safari 검색엔진
기본적으로 크로스브라우징은 위에서 본것처럼 css에 접두사를 붙여 그 검색엔진에 맞게 재조정하거나 해당 검색엔진의 기본적으로 함께 오는 css를 없애는 방식으로 크로스브라우징을 진행한다.
접두사와 해당 접두사별 검색엔진은 위와 같다.
모두 최대한 비슷한 환경을 위한 css 리셋
개발을 하면 css reset은 대부분 하고 시작할 것이다. css reset은 다른 브라우저도 최대한 같은 환경에서 진행하기 위해서 진행하는 과정이니 이는 필수로 하는 것이 좋다!
can i use?
크로스브라우징을 진행하다 보면 내가 사용하는 속성이 이 브라우저에서는 적용이 되는지 모를때가 있다. 그럴때는 can i use?라는 호환성을 볼 수 있는 사이트를 사용하자 이 사이트를 들어가 can i use? 라고 적힌 오른쪽 부분의 검색창에 자신이 사용할 속성을 입력해보면 브라우저별 지원여부를 알 수 있다.
여기를 누르면 이동
@supports를 적극 이용해보자!
아마 공불르 시작한지 얼마 되지 않았거나 크로스브라우징을 신경쓰지 않고 개발을 진행하다보면
@supports를 사용해보지 않았을거라 생각한다 @supports를 사용하면 사용자가 사용하는 브라우저에 내가 사용하는 속성이 지원되는지 자동으로 체크 할 수 있고 만약 지원하지 않는다면 실행할 코드를 작성하여 호환성 문제를 해결하는데 굉장히 편하게 할 수 있다. 사용방법은
@supports(확인을 원하는 속성){
있을 경우 적용할 속성
}
@supports not (확인을 원하는 속성){
없을 경우 적용할 속성
}
이러한 방식으로 사용 할 수 있고 and나 or같은 논리 연산을 사용하여 좀더 많은 조건을 확인 할 수도 있지만 글이 여기서는 설명하지 않고 mdn링크만을 남기겠다
mdn링크
크롬과 같은 webkit을 사용하지만 다르게 나오는 safari
크롬과 safari는 기본적인 css height, overflow와 같은 css문들도 다르게 출력되는 경우가 있다. 어째서 그런지 다르게 나오는 종류에는 무엇이 있는지 한번 살펴보겠다.
높이를 조정하는 height
필자는 맥북이 없어 최신 사파리에서 테스트해본적이 없어 최근에도 이런 오류가 생기는지는 모르지만 전에는 크롬에서 height:100vh를 사용하는 것과 사파리에서 height: 100vh를 사용하는건 다른 결과가 나왔었다. 크롬에서는 동작이 의도한 대로잘 나왔지만 사파리에서는 스크롤을 하면 생기는 하단바에 의해 정확히 100vh 값이 나오지 않았었다. 이는 height:100%주는 것으로 해결 할 수 있다.
폰트의 문제
가끔 사파리를 사용하다 보면 크롬에서는 개발자가 의도한 폰트가 제대로 설정되고 사파리에서는 안 되고 기본 설정으로 적용되는걸 알 수 있다. 사실이것은 검색엔진의 문제라기 보다는 개발자의 실수, 부주의함이 원인이지만 한번씩 나오는 실수이므로 적어보자면 일단 이러한 현상이 나오는 이유는 각 브라우저는 설정한 폰트를 불러올 수 없을때를 대비하여 기본적으로 폰트가 지정되어있는 상태이다. 그리고 보통 폰트를 지정할때 font-family만을 사용하여 지정해주는데 이것이 문제가 되는 것이다. font-family가 동작하는 방식을 생각해보면 알 수 있는데 아래와 같이 동작한다
우선 font-family는 font-family: [1순위], [2순위], [3순위], [...]이런 식으로 1순위 2순위 식으로 작성이 되어 있다고 가정하겠다.
- 1순위 폰트가 os에 다운이 되어있는지 확인한다 만약 없다면.
- font-face로 지정된 폰트가 있는지 있다면 다운할 수 있는지를 확인
- 불가능하다면 1순위는 없는 것으로 판단
- 사용가능한 폰트가 발견될때 까지 반복
이러한 방식으로 font-family가 작동하는데 가끔 font-family의 마지막에 기본 폰트를 설정하지 않을때가 있다. 그렇게 되면 앞선 다른폰트를 찾지 못하게되었을때 standard 즉 웹 브라우저에서 기본으로 지정하는 폰트를 따라 가게 된다.(네트워크 문제등으로 다운받지 못할 수도 있으니) 여기서 위에서 같은 폰트의 문제가 생기는 것인데 이러한 문제는 위에 설명에서 나왔듯 font-face를 써주고 font-family의 끝에 기본 폰트를 제대로 명시해주는 것으로 standard 폰트를 사용하는 것을 피할 수 있다.
css리셋을 할때 -webkit-appearance-를 하는 이유
css 초기화를 할때 보면 -webkit-appearance:none 이라는 문구를 볼 수 있을 것이다 이것을 하는 이유는 필자도 전부 알지는 못하지만 필자가 아는 몇가지 라고 적고자 한다. 이유는 아래와 같이
- a태그의 백그라운드가 적용이 안돼는 이슈가 생긴다.
- 하위 사파리 버전에서 input에 그림자가 기본적으로 적용되는 현상을 막는다
사파리 foucs시 영역의 위치가 이상함
이 문제는 오직 사파리에서만 발생하는 독특한 현상이다 우선 input 박스를 만들고 input박스의 크기보다 긴 텍스트를 입력하고 다른 곳을 클릭하여 focus를 해제한다 그후 키보드의 tap을 입력하여 다시 접근하여 보면 접근되는 위치가 해당 박스가 아닌
이러한 사진과 같이 이상한 위치에 잡히는걸 볼 수 있다. 이 사진을 가져온 stack overflow에서는 padding을 사용하였는데 다른 블로그나 예제를 찾아보아도 input박스안에 padding이 있을때 이러한 문제가 생기는 것 같았다 그래서 필자는 input박스에 padding값을 인식하지 못하는 문제라고 생각하고 있다 현제 이미지는 padding: 3px 20px 3px 5px; 이렇게 주고 있는데 실제로 패딩이 없다면 뭔가 딱 맞을 것 같은 위치이다.
이를 해결하기 위한 근본적인 해결법은 계속 검색을 해보았지만 찾을 수 없었고 각 상황에 맞게 다양한방식으로 모두 해결하여 사용하는 것 같았다.
