CSS 기능 중 주목할 만한 몇 가지와 그 설명들입니다.
브라우저에서 지원가능한 시기에는 구지 SASS를 사용할 필요가 없는 날이 오겠네요.
1. CSS Nesting
설명:
Sass와 같은 CSS 전처리기에서 제공되던 네스팅(Nesting) 기능이 이제 CSS 표준으로 도입되고 있습니다.
사용법:
.container {
color: black;
.child {
color: red;
}
}
장점: 코드를 더 간결하게 작성할 수 있고 구조적으로 이해하기 쉬움.
지원 여부:
Chrome: 부분 지원 (플래그 설정 필요)
Firefox: 미지원 (개발 중)
Safari: 미지원 (예정)
Edge: Chrome 기반으로 부분 지원
호환성 팁: Sass 또는 PostCSS 같은 전처리기를 활용해 네스팅을 사용 가능.
2. Container Queries
설명:
요소가 속한 컨테이너의 크기에 따라 스타일을 적용할 수 있는 기능.
사용법:
@container (min-width: 500px) {
.box {
background-color: blue;
}
}
장점: 반응형 디자인을 구현할 때 더 정교한 컨트롤 가능.
지원 여부:
Chrome: 지원 (v105+)
Firefox: 지원 (v110+)
Safari: 지원 (v16+)
Edge: 지원 (Chrome 기반)
호환성 팁: Polyfill을 사용할 수 있으나 브라우저 지원이 넓어져 대체 필요성은 감소.
3. :has() 선택자
설명:
요소 내부에 특정 자식 요소가 있는지 여부에 따라 스타일을 적용.
사용법:
div:has(> img) {
border: 2px solid green;
}
장점: 부모 요소에 조건부 스타일을 적용 가능.
지원 여부:
Chrome: 지원 (v105+)
Firefox: 지원 (v103+)
Safari: 지원 (v15.4+)
Edge: 지원 (Chrome 기반)
호환성 팁: JS를 활용한 클래스 토글 방식으로 우회 가능.
4. :is() 및 :where() 선택자
설명:
여러 선택자를 결합할 때 사용.
:is()는 가중치를 그대로 계산.
:where()는 가중치를 0으로 처리.
차이점:
| 특성 | :is() |
:where() |
|---|---|---|
| 가중치 | 가장 높은 가중치(내부 셀렉터 포함) 적용 | 가중치 0으로 고정 |
| 용도 | 스타일 적용 시 우선순위가 필요할 때 | 기본 스타일 설정 또는 덮어쓰기 쉽게 할 때 |
사용법:
/* 가중치 있음 */
:is(h1, h2, h3) {
font-weight: bold;
}
/* 가중치 없음 */
:where(h1, h2, h3) {
margin: 0;
}
지원 여부:
Chrome: 지원
Firefox: 지원
Safari: 지원
Edge: 지원
호환성 팁: 모든 최신 브라우저에서 지원하므로 추가 우회법 필요 없음.
5. @scope 규칙
설명:
특정 컨텍스트 내에서 스타일을 제한적으로 적용하는 새로운 방법.
사용법:
@scope (.container) {
h1 {
color: red;
}
}
장점: CSS의 전역성 문제를 완화.
지원 여부:
Chrome: 미지원
Firefox: 미지원
Safari: 미지원
Edge: 미지원
호환성 팁: Scoping 기능이 필요할 경우 Shadow DOM 또는 CSS Modules 사용.
6. Color Functions (color-mix, color-contrast)
설명:
색상을 동적으로 혼합하거나 명암비를 계산하는 기능.
사용법:
/* 색 혼합 */
background-color: color-mix(in srgb, red 50%, blue 50%);
/* 명암비 */
color: color-contrast(white vs black);
지원 여부:
Chrome: 지원 (v111+)
Firefox: 부분 지원 (color-mix 지원, color-contrast 미지원)
Safari: 지원 (v16+)
Edge: 지원 (Chrome 기반)
호환성 팁: 필요할 경우 JS를 사용해 동적 색상 계산 가능.
7. CSS Grid의 Subgrid
설명:
하위 요소에서 부모 그리드의 행과 열 정의를 재사용할 수 있는 기능.
사용법:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.sub-container {
display: subgrid;
}
지원 여부:
Chrome: 지원 (v117+)
Firefox: 지원 (v71+)
Safari: 지원 (v16+)
Edge: 지원 (Chrome 기반)
호환성 팁: Subgrid가 미지원인 브라우저에서는 Flexbox 대체 가능.
8. View Transitions API
설명:
페이지나 상태 변경 시 부드러운 전환 효과를 제공.
사용법:
@keyframes fade {
from { opacity: 0; }
to { opacity: 1; }
}
.transition {
animation: fade 1s ease-in-out;
}
Chrome: 지원 (v111+)
Firefox: 미지원
Safari: 미지원
Edge: 지원 (Chrome 기반)
호환성 팁: JS 라이브러리(예: GSAP)를 사용해 유사한 전환 효과 구현 가능.
9. 새로운 단위 (lvh, svh, dvh 등)
설명:
뷰포트 높이 문제를 해결하기 위해 새로운 단위가 도입됨.
lvh: 뷰포트의 로컬 높이.
svh: 뷰포트의 작은 높이.
dvh: 뷰포트의 동적 높이. (추천)
주소표시줄까지 영역을 가져갈것인가 아닌가에 따라 선택하면 된다.
https://blanche-toile.com/web/large-small-and-dynamic-viewport-units
CSSのビューポート単位(svh, lvh, dvh)でUI表示に合わせたスタイルを適応させる | Free Style
スマートフォンやタブレット端末でのツールバーやアドレスバーを含む100vhの表示問題は、CSS Values and Units Module Level 4で追加された新しい単位「sv* / lv* / dv*」を使うことで、UIの表示を踏まえ
blanche-toile.com
사용법:
height: 100dvh; /* 동적 */
지원 여부:
Chrome: 지원 (v108+)
Firefox: 지원 (v110+)
Safari: 지원 (v16+)
Edge: 지원 (Chrome 기반)
호환성 팁: 미지원 브라우저에서는 vh와 함께 JS로 동적 높이 계산 가능.
10. Layered CSS (@layer)
설명:
CSS 우선순위를 명시적으로 제어 가능.
사용법:
@layer base {
h1 {
color: black;
}
}
@layer components {
h1 {
color: blue;
}
}
장점: 스타일 충돌을 방지하고 코드의 구조화에 도움.
이 외에도 CSS는 지속적으로 발전하고 있으며, 브라우저 지원 현황에 따라 사용할 수 있는 기능들이 다를 수 있습니다.
지원 여부:
Chrome: 지원 (v99+)
Firefox: 지원 (v97+)
Safari: 지원 (v15.4+)
Edge: 지원 (Chrome 기반)
호환성 팁: 구형 브라우저에서는 전통적인 CSS 우선순위 방식으로 대체 가능.
브라우저 지원 현황 정리 사이트
Can I Use: https://caniuse.com/
Can I use... Support tables for HTML5, CSS3, etc
caniuse.com
CSS 기능별 브라우저 지원 상황을 실시간으로 확인 가능.
MDN Web Docs: https://developer.mozilla.org/
MDN Web Docs
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.
developer.mozilla.org
각 기능의 브라우저 호환성 및 예제 제공.
CSS의 새로운 기능을 사용할 때는 꼭 Fallback 스타일과 Polyfill을 고려하여 크로스 브라우징 문제를 해결하세요!
도구 추천:
Modernizr → 브라우저 기능 지원 여부를 감지.
PostCSS → CSS 컴파일 도구로 Fallback 스타일과 Polyfill 제공.
이런 방식을 활용하면 크로스 브라우징 문제를 효과적으로 해결할 수 있습니다.
