코딩 스쿨 CSS

언어선택 : HTMLㅣ CSSㅣ JAVAㅣ JAVASCRIPTㅣ MYSQLㅣ SQLㅣ PHP
▶ CSS References
CSS Reference
CSS Selectors
CSS Functions
CSS Reference Aural
CSS Web Safe Fonts
CSS Animatable
CSS Units
CSS PX-EM Converter
CSS Colors
CSS Color Values
CSS Default Values
CSS Browser Support

CSS Browser Support

CSS Browser Support : 브라우저 지원 가이드

CSS 브라우저 지원은 웹 페이지의 스타일이 다양한 브라우저에서 동일하게 동작하는지 확인하는 중요한 요소입니다. 모든 브라우저가 모든 CSS 속성과 기능을 동일하게 지원하지 않기 때문에, 웹 디자이너는 각 브라우저가 어떤 CSS 속성을 지원하는지 이해해야 합니다. 이 가이드는 주요 CSS 속성 및 기능의 브라우저 지원 정보를 제공합니다.

1. 주요 브라우저 목록

CSS 속성의 지원 여부는 주로 아래의 주요 브라우저에서 확인됩니다.

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Opera
  • Internet Explorer (특히 IE11 및 이전 버전)
  • 모바일 브라우저 (Chrome for Android, Safari for iOS)

2. 기본적인 CSS 속성 브라우저 지원

2.1 display

  • 지원 브라우저: 모든 브라우저
  • 설명: display 속성은 요소의 표시 방식을 설정합니다. block, inline, none 등 기본적인 값들은 모든 브라우저에서 지원됩니다.
  • 주의사항: Flexbox와 Grid는 오래된 브라우저에서는 완전히 지원되지 않을 수 있습니다.

2.2 flexbox (display: flex)

  • 지원 브라우저: Chrome, Firefox, Safari, Edge, Opera (최신 버전), 모바일 브라우저
  • 지원 제외: IE10 이하 (IE11에서 제한적으로 지원)
  • 설명: Flexbox는 CSS 레이아웃 시스템으로 요소를 유연하게 배치할 수 있습니다.
  • 폴리필: 오래된 브라우저를 위한 대체 코드나 폴리필 사용이 필요할 수 있습니다.

2.3 grid (display: grid)

  • 지원 브라우저: Chrome (57+), Firefox (52+), Safari (10.1+), Edge (16+), Opera (44+)
  • 지원 제외: IE 및 구형 브라우저
  • 설명: CSS Grid는 2차원 레이아웃 시스템으로, 열과 행 기반의 복잡한 레이아웃을 쉽게 만들 수 있습니다.

3. 색상 관련 속성

3.1 rgba(), hsla()

  • 지원 브라우저: 모든 최신 브라우저 (Chrome, Firefox, Safari, Edge, Opera)
  • 지원 제외: IE8 이하
  • 설명: RGBA와 HSLA는 색상에 투명도를 추가로 설정할 수 있는 방식입니다. 모든 최신 브라우저에서 지원되지만, 매우 오래된 브라우저에서는 지원되지 않습니다.

3.2 linear-gradient(), radial-gradient()

  • 지원 브라우저: Chrome (26+), Firefox (16+), Safari (6+), Edge, Opera (12.1+)
  • 지원 제외: IE9 이하
  • 설명: CSS 그라디언트는 두 가지 이상의 색상이 부드럽게 전환되는 효과를 제공합니다. 브라우저에 따라 접두사(webkit-, moz-)가 필요할 수 있습니다.

4. 글꼴 및 텍스트 관련 속성

4.1 @font-face

  • 지원 브라우저: 모든 최신 브라우저 (Chrome, Firefox, Safari, Edge, Opera)
  • 지원 제외: IE8 이하
  • 설명: 사용자 지정 웹 폰트를 불러와 사용하는 기능으로, 모든 최신 브라우저에서 지원됩니다. 오래된 브라우저는 제한적 지원을 할 수 있습니다.

4.2 text-shadow

  • 지원 브라우저: Chrome (10+), Firefox (4+), Safari (5.1+), Edge, Opera
  • 지원 제외: IE9 이하
  • 설명: 텍스트에 그림자를 적용하는 기능입니다. 오래된 브라우저에서는 지원하지 않을 수 있습니다.

4.3 word-wrap / overflow-wrap

  • 지원 브라우저: 모든 최신 브라우저
  • 설명: 긴 단어가 요소의 경계를 넘어갈 때 자동으로 줄 바꿈을 적용하는 속성입니다. overflow-wrap은 최신 속성명으로, 모든 브라우저에서 지원됩니다.

5. 애니메이션 및 전환 관련 속성

5.1 transition

  • 지원 브라우저: Chrome (26+), Firefox (16+), Safari (6+), Edge, Opera (12.1+)
  • 지원 제외: IE9 이하
  • 설명: CSS 전환은 요소의 속성 값을 일정한 시간에 걸쳐 변화시키는 기능입니다.

5.2 animation

  • 지원 브라우저: Chrome (43+), Firefox (16+), Safari (8+), Edge, Opera
  • 지원 제외: IE9 이하
  • 설명: CSS 애니메이션은 @keyframes 규칙을 사용하여 복잡한 애니메이션 효과를 만들 수 있습니다.

6. 레이아웃 및 위치 관련 속성

6.1 position: sticky

  • 지원 브라우저: Chrome (56+), Firefox (32+), Safari (6+), Edge, Opera (15+)
  • 지원 제외: IE 및 오래된 브라우저
  • 설명: sticky는 요소가 스크롤 시 일정 위치에 고정되도록 하는 속성입니다.

6.2 object-fit

  • 지원 브라우저: Chrome (31+), Firefox (36+), Safari (7.1+), Edge, Opera (19+)
  • 지원 제외: IE 및 오래된 브라우저
  • 설명: object-fit은 이미지나 비디오가 요소 안에서 어떻게 맞춰질지를 설정하는 속성입니다.

7. 브라우저 별 CSS 접두사 (Vendor Prefixes)

오래된 브라우저 또는 특정 브라우저의 지원이 완전히 성숙하지 않은 CSS 기능을 사용할 때는 브라우저 접두사가 필요할 수 있습니다.

  • webkit-: Chrome, Safari, iOS 브라우저

  • moz-: Firefox

  • o-: Opera

  • ms-: Internet Explorer 및 Edge (구버전)

  • 예시 (Flexbox의 접두사 사용):

    .flex-container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}

8. CSS 그리드 및 플렉스 레이아웃 지원

8.1 
 Grid

  • 지원 브라우저: Chrome (57+), Firefox (52+), Safari (10.1+), Edge (16+), Opera (44+)
  • 지원 제외: IE11에서 부분 지원, IE10 이하 지원 안됨
  • 설명: CSS Grid는 2차원 레이아웃을 구현하는 강력한 도구입니다. 모든 최신 브라우저에서 지원되지만, 구형 브라우저에서는 폴리필이 필요할 수 있습니다.

8.2 
 Flexbox

  • 지원 브라우저: 대부분의 최신 브라우저
  • 설명: Flexbox는 1차원 레이아웃 시스템으로, 요소를 수평이나 수직으로 배치할 때 매우 유용합니다.

9. CSS 기능 지원 확인 도구

다음과 같은 도구를 사용하면 CSS 속성 및 기능이 브라우저에서 지원되는지 확인할 수 있습니다:

  • Can I Use (https://caniuse.com)
    • CSS 속성, HTML 기능, 자바스크립트 API 등의 브라우저 지원 여부를 빠르게 확인할 수 있는 도구입니다.
  • MDN Web Docs (https://developer.mozilla.org)
    • 특정 CSS 속성의 브라우저 지원 및 사용법에 대해 자세히 설명되어 있습니다.

요약

CSS 브라우저 지원은 웹 페이지가 다양한 브라우저에서 일관되게 표시되도록 하는 중요한 요소입니다. 최신 브라우저는 대부분의 CSS 기능을 지원하지만, 구형 브라우저(특히 IE)에서는 일부 기능을 지원하지 않거나 제한적으로 지원할 수 있습니다. CSS 접두사나 폴리필을 사용하여 이러한 문제를 해결할 수 있으며, 브라우저 지원 여부는 Can I Use와 같은 도구를 통해 쉽게 확인할 수 있습니다.

copyright ⓒ 스타트코딩 all rights reserved.
이메일 : startcodingim@gamil.com