엣지 브라우저 CSS, 익스플로러 브라우저 CSS, 크롬 브라우저 CSS를 각각 적용해 보자.
제가 알고 있는 브라우저의 종류만 해도 대략 5가지 정도 됩니다. 익스플로러, 엣지, 파이어폭스, 오페라, 크롬 브라우저 등 모든 브라우저의 환경에 맞춰서 동일한 화면을 구성한다는 게 쉬운 일은 아닌 것 같습니다.
일정에 압박이나 기존에 사용하던 소스를 활용해서 새로운 무언가를 만들어 활용하고자 하는 경우에는 다양한 브라우저의 환경에 맞춰 소스를 작성한다는 것은 웹 프로그래밍을 하면서 정말 어려운 일 같기도 합니다.
시간이 좀 더 주어진다면 모든 환경에 맞춘 HTML 태그 작성과 모든 브라우저를 지원하는 CSS 문법을 사용하겠지만 사실상 그렇게 일을 처리하기 위해서는 시간적 여유가 필요합니다.
개인적인 경험으로는 크롬 브라우저에 맞춰 작성한 화면은 파이어폭스 브라우저에서도 잘 작동 하였습니다만 엣지 브라우저나 익스플로러 브라우저에서는 작동하지 않는 CSS 코드도 꽤 있습니다.
브라우저의 버전별로 사용법이 다르기도 하고 다양한 화면에 맞춰 완벽한 화면을 구성한다는 것이 쉬운 일은 아닌 것 같습니다.
대부분 크롬 브라우저에서 정상적으로 보이는 웹 화면이었지만 익스플로러 브라우저와 엣지 브라우저에서는 제대로 된 화면이 표시되지 않는 경우가 많았습니다.
게다가 익스플로러 브라우저에서 잘 보이던 화면이 엣지 브라우저 화면에서 보이지 않는 경우도 있었습니다. 새롭게 만드는 페이지라면 규칙에 잘 맞춰 코딩하겠지만 시간적 여유가 없거나 급하게 처리되어야 하는 경우라면 필요에 따라서 특정 브라우저에 적용해 보시는 것도 나쁘지 않을 것 같습니다.
먼저 간단한 소스 코드를 작성하여 브라우저별로 색깔이 다르게 나오도록 적용해 보았습니다. 가장 왼쪽이 익스플로러 브라우저, 가운데는 크롬 브라우저, 오른쪽은 엣지 브라우저입니다.
아래 코드는 각각의 브라우저에서 다른 배경 색깔이 표시되도록 적용한 코드입니다.
가장 먼저 기준은 크롬 브라우저를 기준으로 코드를 작성하여 백그라운드 컬러만 분홍색으로 맞춰 놓았습니다.
기본적으로 분홍색으로 색상을 지정하였기 때문에 크롬, 파이어폭스, 오페라 브라우저에서는 분홍색 컬러로 표시가 됩니다.
CSS 코드 중 엣지와 익스플로러 브라우저만 색상을 다르게 지정하고 코드를 작성하였으며 아래 코드를 복사해서 사용해 보시면 각각의 브라우저에서 다른 배경 색깔이 표시되는 것을 확인하실 수 있습니다.
<html>
<head>
<title> 브라우저 종류별로 테스트 </title>
<style>
/*
크롬 브라우저인 경우만 적용된다고 하는데 엣지 브라우저에서도 적용 되더군요.
이건 그래서 빼고 기본 컬러를 지정하고 엣지와 익스플로러 브라우저만 색깔을 변경 했습니다.
요건 제가 나중에 필요할때 써먹으려고 주석해 놓은거니 신경 안쓰셔도 됩니다.
@media screen and (-webkit-min-device-pixel-ratio:0){
#main_div{
background-color:green;
}
}
*/
#main_div{
text-align: center;
border: 1px solid black;
width: 100%;
height: 1000px;
line-height: 900px;
background-color:#ffa0c3;
}
/* 엣지 브라우저일때만 CSS 적용*/
@supports (-ms-ime-align: auto){
#main_div{
background-color:red;
}
}
/* IE10 이상 (IE11도 포함) 익스플로러 브라우저일때만 CSS 적용*/
_:-ms-input-placeholder, :root #main_div {
background-color:blue;
}
</style>
</head>
<body>
<div id="main_div">
<p>브라우저 종류별로 색상이 다르게 나오도록 표시해 볼까?</p>
</div>
</body>
</html>
어떠한 브라우저 환경에서도 동일한 화면의 스타일을 적용하는 게 당연한 이야기이지만 재미 삼아서 브라우저별로 색상이 다르게 나오도록 간단히 코드를 작성해 보았습니다.
물론 제가 나중에 참고할 용도로 보기 좋게 작성한 부분도 있지만 필요한 분들은 참고하셔서 급할 때 사용하시면 좋을 것 같습니다.
