cross-browsing

유댕·2023년 12월 8일

회사

목록 보기

4/8

우리 사이트는 IE 10 까지 지원하고 있다.

크로스 브라우져를 개발하기 위해 CSS속성 앞에 브라우져별 접두사

Next.js는 default configuration에 vender prefix를 CSS rules에 추가하는 Autoprefixer 가 자동으로 설정되어있다.

💡 새로운 css 속성을 사용할때는 모든 브라우저에 호환이 되는지 항상 확인하여야한다.

위 링크에서 확인할 수 있듯이 Flex 는 ie 브라우저에서 호환되지 않는다.

이러한 이유로 웹에서는 float를 사용하고 있다.

float된 자식요소를 포함하는 경우에 부모요소는 높이를 인지하지 못해서 레이아웃이 무너지는 현상이 발생한다.

이러한 이슈를 해결하기 위해서 float을 사용할때는 항상 float을 먼저 해지해주어야 한다.

float 해지하는 테크닉은 여러가지가 있지만, 현재 헬로마켓 웹에서는 가장 널리 쓰이고 있는 css를 통해 빈 가상요소(:after)를 생성하여 float를 해지하는 방법을 사용하고 있다.

// float을 적용하고자하는 요소의 부모요소에 가상요소 :after를 적용해준다.
.parent:after { 
  content: '';
	clear: both;
  display: block;
}

.child {
  float: left;
}

ie에서도 flex를 사용할수 있는 방법이 있지만 ie 10까지 호환이 되는지 확인이 필요하다.