브라우저별 CSS 코드 작성 방법

반응형

모든 웹 페이지는 브라우저마다 다르게 렌더링됩니다. 브라우저가 웹사이트 뒤에 있는 코드를 읽을 때, 그것은 정보를 기본 설정으로 변환합니다. 예를 들어, Safari와 Internet Explorer는 기본 글꼴이 다르므로 이러한 브라우저에서 특정 사이트의 글꼴이 변경됩니다. Safari는 Helvetica 제품군이 기본 설정이고 Microsoft의 Internet Explorer는 Arial 글꼴 제품군이 기본 설정입니다.

이 문서에서는 웹 사이트에 대한 교차 브라우저 호환성을 보장하기 위해 브라우저별 CSS 코드를 만드는 방법에 대해 설명합니다.

일반적인 CSS 브라우저 호환성 문제

브라우저 간에 차이가 발생하는 가장 흔한 원인은 기본 문제일 수 있습니다. HTML과 CSS로 작업할 때 동일한 웹 응용 프로그램에 대한 브라우저 관련 문제에 직면하는 것이 일반적이다. 따라서 브라우저에 관계없이 원활한 사용자 환경을 보장하기 위해 브라우저별 CSS 코드를 개발할 필요가 있다.

CSS 그리드: CSS 그리드는 웹 디자인에 널리 사용됩니다. 필요에 따라 요소를 배치하고 속성을 적용할 수 있는 그리드 프레임워크를 제공합니다. 사용이 용이하고 유연하기 때문에 CSS 그리드는 웹 디자이너와 개발자들 사이에서 고정물이 되었다.
그러나 CSS 그리드의 요소들은 모든 브라우저에서 일관되게 동작하지는 않는다. 예를 들어, 애니메이션 그리드는 모질라의 게코 엔진에서는 원활하게 동작하지만 크로미엄과 웹킷에서는 동작하지 않는다.

 

CSS 위치: 고정식: 이 특성은 사용자가 페이지에서 스크롤하는 경우에도 뷰포트의 요소를 고정합니다. 보통 화면 위에 있는 탐색 막대를 고정하는 데 사용됩니다. 일반적으로 헤더와 탐색 막대에서 꽤 잘 작동하지만 테이블의 헤더와 같은 다른 요소와 함께 배치되면 불일치가 나타난다. 이 경우 크로미엄에서 실패한다. 또한 Safari에서 이를 구현할 때 나타나는 수많은 불일치가 있습니다.

CSS Flexbox: CSS Flexbox는 다재다능한 특성과 컨테이너를 만들고 요소를 채울 수 있는 간편한 기능 덕분에 널리 사용되고 있습니다. 그러나 사용자는 Flexbox 내에서 가로 세로 비율(높이 및 너비)을 처리하는 데 종종 문제가 발생합니다. 이는 일반적으로 CSS Flexbox에 의해 설정된 컨테이너 내의 이미지를 관리해야 하는 경우에 적용됩니다. 또한 컨테이너 내의 항목을 여러 요소 및 규모로 정렬할 때도 문제가 발생합니다. 예를 들어, CSS 브라우저 비호환성인 블링크 엔진에서는 접기가 작동하지 않는다는 것을 알 수 있다.

CSS에서 브라우저 간 호환성 문제를 관리하기 위한 솔루션

앞서 언급한 문제를 해결하고 해결하는 가장 효과적인 방법은 브라우저별 CSS 코드를 작성하고 구현하는 것입니다. Chrome, Internet Explorer, Edge, Firefox 및 Safari용 브라우저별 코드가 아래에 나와 있습니다.

테스트 준비가 된 사이트는 실제 브라우저 및 장치에서 검증 및 검증되어야 합니다. 에뮬레이터와 시뮬레이터의 많은 부적합한 점으로 테스트를 제한하지 말고 실제 사용자 환경에서 코드를 실행하십시오.

 

IE, Chrome, Mozilla, Edge 및 Safari 브라우저용 브라우저별 CSS 코드부터 시작하겠습니다.

Google Chrome 호환성을 위한 CSS 코드

모든 브라우저는 다르게 동작하며 고유한 유형의 CSS를 가지고 있다. 크롬 브라우저의 경우 웹킷 픽셀 비율을 설정해야 합니다. 아래 코드는 다양한 Chrome 버전에서 이를 수행하는 방법을 보여줍니다.

/* Chrome 버전 29 이상 */
@미디어 화면 및 (-webkit-min-device-device-device-device:0)
및 (최소 해상도:.001dpcm) {
선택기{ 속성:값; }
}

 

/*실제 Chrome 버전 29 이상에서 테스트 웹 사이트 */

/* Chrome 버전 22-28 */
@미디어 화면 및 웹킷-min-device-device-device-device-device:0) {
선택기 { -filename-:only(;)
속성:값;
);}
}

/* Chrome, Safari 및 Edge Browser 및 Firefox */
@미디어 및 (-webkit-min-device-device-device-device:0) {
{ 속성:값; } 선택기
}

IE(Internet Explorer) 호환성을 위한 CSS 코드

 

IE 브라우저의 경우 CSS 코드에 조건문을 사용합니다. 여기 예에서는 헤더 섹션, HTML 요소 등과 같은 모든 섹션에 대해 if conditional을 사용합니다.

/* 헤드 섹션 CSS */와 함께 조건부 주석 사용

/* HTML 요소 */와 함께 조건부 주석 사용

/* IE10+ */
@미디어 화면 및 (-ms-높은 화면: 활성), (-ms-높은 화면: 없음) {
{ 속성:값; } 선택기
}

/* IE6,7,9,10 */
@미디어 화면 및 (최소 너비: 640px), 화면\9 {
{ 속성:값; } 선택기
}

 

/* IE6,7 */
@미디어 화면\9 {
{ 속성:값; } 선택기
}

/* IE8 */
@미디어 \0스크린 {
{ 속성:값; } 선택기
}

/* IE9,10 */
@미디어 화면 및 (최소 너비:0\0){
{ 속성:값; } 선택기
}

Microsoft Edge 호환성을 위한 CSS 코드

 

Microsoft Edge 브라우저의 경우 속성 값이 있는 간단한 선택기를 포함하므로 프로세스가 간단합니다. 또한 브라우저별 CSS 코드를 쉽게 만들 수 있는 자동 정렬 기능을 제공합니다.

@209(-ms-ime-align:auto)
선택기 {
속성: 값;
}
}

Mozilla Firefox 호환성을 위한 CSS 코드

Firefox에서는 먼저 URL의 접두사를 사용합니다. 또는 운영 체제의 테마에 따라 플랫폼 네이티브 스타일링을 사용하여 요소를 표시합니다.

@-document URL-document {
선택기 {
속성:값;
}
}

 

아니면

@mess(-비합치:없음) {
{ 속성:값; } 선택기
}

Safari 호환성을 위한 CSS 코드

Safari 웹 브라우저의 경우 미디어는 최신 버전에서 최소 해상도 및 웹킷 모양 속성을 사용합니다. 이전 버전의 사파리에서는 CSS 속성에 픽셀 비율을 사용하였다.

/* Safari 11+ /
@매체가 전부가 아니며 (최소 해상도:.001dpcm)
{ @mit(-웹킷 불일치:없음) 및 (스트로크 색상:명료) {
선택기 {
속성:값;
}
}
/ 실제 Safari 11+ */에서 테스트 웹 사이트

 

/* Safari 10.1 */
@매체가 전부가 아니며 (최소 해상도:.001dpcm){
@http(-webkit-inconance:none) 및 (stroke-color:incrent) {
선택기 {
속성:값;
}
}

/* Safari 6.1-10.0(10.1은 아님) */
@미디어 화면 및 (min-color-index:0) 및 webkit-min-device-device-device-device-device-device:0){
@미디어 {
선택기 {
속성:값;
}
}

코드가 만들어지면 실제 브라우저와 장치에서 테스트하여 CSS 코드가 다른 브라우저에서 정확하게 렌더링되는지 확인해야 합니다. 이를 위한 가장 쉬운 방법은 실제 장치 클라우드에서 테스트를 수행하는 것입니다.

각 웹사이트가 여러 브라우저와 브라우저 버전을 통해 접속되는 세상에서 개발자, 테스터, 조직은 호환되지 않는 CSS를 운영 환경으로 탈출시킴으로써 특정 브라우저의 사용자들을 소외시킬 여유가 없다.

웹사이트 개발을 위한 CSS 코드를 생성할 때 이 글에 있는 정보를 포함하세요. 그것은 개발자들과 테스터가 그들이 만든 모든 웹사이트의 일부로서 긍정적이고 고도로 최적화된 사용자 경험을 제공하기 위해 열심히 일할 필요가 없도록 보장할 것이다.