• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 폰트와 크로스브라우징

폰트에 각 설정된 값, 만들어진 과정 등 여러 정확하지 않은 원인에 따라서 각 브라우저에서는 설정해 준 폰트가 적용될 수도 있고, 아닐 수도 있습니다.

이럴 때는 어쩔 수 없는 경우이므로, 되도록이면 프로젝트 시작 전에 폰트의 크로스브라우징을 점검하고 시작하면 좋습니다.

‼️ 미디어 쿼리로 크로스 브라우징 보완하기

CSS에서 미디어 쿼리를 활용해 브라우저 환경에 따라 스타일을 다르게 적용할 수 있습니다.

@media not all and (min-resolution: 0.001dpcm)은 WebKit 기반 브라우저, 특히 Safari에서만 특정 스타일을 적용할 수 있도록 설계된 미디어 쿼리입니다.

사파리에서 크로스 브라우징 문제를 해결하기 위해 이렇게 특정 미디어 쿼리를 사용할 수 있습니다. 사파리 브라우저는 다른 브라우저와는 약간 다른 방식으로 CSS를 해석하거나, 특정 CSS 속성을 지원하지 않는 경우가 있을 수 있습니다. 그래서 이런 미디어 쿼리를 사용하면, 사파리에서만 작동하는 스타일을 정의할 수 있습니다.

@media not all and (min-resolution: 0.001dpcm) {
    div {
        color: blue;
    }
}

이와 같은 방식으로 특정 브라우저에서의 폰트 스타일 문제를 미디어 쿼리를 통해 해결할 수 있습니다.

📝 실습 코드