🕸브라우저별 CSS 별도 적용하기

브라우저별 HTML에서 CSS 다르게 적용할 수 있게 진행하는 방법

HTML 코드에서 CSS를 브라우저 별로 다르게 적용해야하는 상황은 분명히 발생한다.

예를 들어, Chrome, Safari에서 같은 CSS라도 어디에서는 멀쩡하게 적용되는 것 같아도, 다른 곳에서는 적용 안되는 경우들이다.

이 경우, 해결책은 명확하다. 아래의 코드를 확인해보자.

<script type="text/javascript">
if( (navigator.userAgent).indexOf("Chrome") > -1   //Chrome, 안드로이드 폰, Edge가 해당됩니다.
            || (navigator.userAgent).indexOf("rv:") > -1   //익스플로러만 해당됩니다
            ){
            document.write('<link href="for_Chrome_IE.css" rel="stylesheet" />');
        }else{
            document.write('<link href="for_Safari.css" rel="stylesheet" />');   //아이폰, 사파리가 해당
        }
</script>

<script> 태그만 사용 안하면 프론트엔드에서도 브라우저별로 다르게 CSS 적용하는 방법이 가능하다.

Chrome 또는 Explorer 일 경우와 그 외의 브라우저의 경우로 나눠서 CSS 태그를 추가하자.

잘 모르니 삽질하는 상황은 분명히 발생하는데, 나보다 앞서 삽질한 사람들은 항상 있는 것 같다.

내실이 단단한 개발자로서 꾸준히 성장해나가자.