시작하기

호환성

사용 가능한 폴백을 유지하며 새 CSS 기능을 사용하고 브라우저 동작을 확인하며 서드 파티 스타일을 캐스케이드에 배치합니다.

이 페이지의 내용

Master CSS는 CSS를 생성하고 브라우저는 적용 가능한 속성, 값, 선택자를 결정합니다. 사용 가능한 기본 동작을 만들고 개선에 도움이 되는 새 기능을 추가하며 기존 스타일이 캐스케이드에 어떻게 참여하는지 확인하세요.

다음 예제들은 설치를 완료하고 앱이 @import '@master/css';를 불러오는 상태를 전제로 합니다.

#브라우저 기본 요구 사항 확인하기

기본 프리셋은 캐스케이드 레이어, OKLCH 색상, 적응형 값을 위한 light-dark()를 사용합니다. 향상 기능에 폴백을 제공해도 이 기본 요구 사항이 사라지지는 않습니다. 지원할 브라우저를 기준으로 브라우저 기본 요구 사항과 벤더 접두사를 확인하세요.

클래스가 인식된다고 브라우저 호환성이 보장되지는 않습니다. Master는 일부 속성의 호환 접두사를 출력하며 모든 새 기능을 폴리필하지는 않습니다. 도구 결과의 unknown 역시 해당 검사가 CSS를 검증하지 못했다는 뜻이며, CSS가 유효하지 않거나 배포해도 안전하다는 증거가 아닙니다.

#폴백을 유지하면서 기능 추가하기

#네이티브 선언

자동 크기 조절을 사용할 수 없어도 메모 필드는 편집 가능해야 합니다. 일반 textarea 크기를 지정하고 세로 크기 조절을 허용한 뒤 field-sizing: content를 향상 기능으로 추가하세요. 이 네이티브 속성은 내용에 따라 컨트롤 크기를 조절하며 최소 및 최대 높이가 유용한 범위로 제한합니다.

field-sizing: content 확인 중…

폴백이 있는 메모 필드

<div class="w-full (max-width:28rem) mx-auto">  <label for="project-note" class="block mb-xs text-sm fg-text-strong">Project notes</label>  <textarea id="project-note" name="note" rows="3" class="block w-full p-sm r-md b(1) b-solid b-line-divider bg-surface-inset text-sm fg-text-strong (resize:vertical) (min-height:6rem) (max-height:12rem) outline(2):focus-visible outline-solid:focus-visible outline-offset(3) (field-sizing:content)@supports(field-sizing:content)">Plan the next release. Review the draft. Check the examples. Test with a keyboard. Verify the small screen. Publish when ready.</textarea></div>

생성된 CSS

@layer theme {  :root,  :host {    --color-zinc-5: oklch(96.5% .0011 265);    --color-zinc-100: oklch(15% .0016 265)  }  :root,  :host {    --color-surface-inset: light-dark(var(--color-zinc-5), var(--color-zinc-100));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-xs: .5rem;    --spacing-sm: .75rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .bg-surface-inset {    background-color: var(--color-surface-inset)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .block {    display: block  }  .mx-auto {    margin-inline: auto  }  .mb-xs {    margin-bottom: var(--spacing-xs)  }  .outline-offset\(3\) {    outline-offset: calc(3 * 1px)  }  .p-sm {    padding: var(--spacing-sm)  }  .w-full {    width: 100%  }  .\(max-height\:12rem\) {    max-height: 12rem  }  .\(max-width\:28rem\) {    max-width: 28rem  }  .\(min-height\:6rem\) {    min-height: 6rem  }  .\(resize\:vertical\) {    resize: vertical  }  .outline-solid\:focus-visible:focus-visible {    outline-style: solid  }  .outline\(2\)\:focus-visible:focus-visible {    outline-width: calc(2 * 1px)  }  @supports (field-sizing:content) {    .\(field-sizing\:content\)\@supports\(field-sizing\:content\) {      field-sizing: content    }  }}

줄을 추가하거나 삭제하세요. 지원 브라우저는 필드를 최대 12rem까지 늘리고, 그 외에는 초기 크기를 유지합니다. 두 경우 모두 스크롤과 크기 조절이 가능합니다.

(field-sizing:content)는 네이티브 선언을 제공합니다. @supports(field-sizing:content) 접미사는 해당 선언을 CSS 기능 쿼리 안에 둡니다. 쿼리가 일치하지 않으면 기본 스타일과 일반 textarea 동작이 유지됩니다.

미리보기는 현재 브라우저의 문법 지원을 확인합니다. 대상 브라우저에서 실제 편집 동작도 테스트하세요. 지원 브라우저에서 폴백을 확인하려면 조건부 클래스를 잠시 제거합니다. 필드의 자동 확장은 멈추지만 스크롤로 모든 텍스트에 접근할 수 있어야 합니다. 이는 향상 기능을 분리하는 것으로, 이전 브라우저를 흉내 내는 것은 아닙니다.

생성된 CSS에서 출력된 조건을 확인하세요. 조건에 클래스 문법이 설명되어 있습니다. 네이티브 CSS는 더 복잡한 기능 쿼리를 표현할 수 있습니다.

#새 선택자

선택자 기반 향상에도 같은 방법이 적용됩니다. 여기서는 :has(:checked)가 체크박스를 선택했을 때 레이블에 파란 테두리를 줍니다. 선택자를 지원하지 않아도 네이티브 체크박스는 선택을 기록합니다:

선택적 강조가 있는 체크 상태

<label class="flex items-center gap-sm w-fit mx-auto p-sm r-md b(1) b-solid b-line-divider bg-surface-raised text-sm fg-text-strong b-blue-60:has(:checked)">  <input type="checkbox" name="updates" class="m(0) shrink(0) (accent-color:currentColor)">  <span>Send me release notes</span></label>

생성된 CSS

@layer theme {  :root,  :host {    --color-zinc-90: oklch(24.6% .0022 265);    --color-zinc-100: oklch(15% .0016 265);    --color-blue-60: oklch(51.83% .2687 266.1)  }  :root,  :host {    --color-surface-raised: light-dark(var(--color-white), var(--color-zinc-90));    --color-line-divider: light-dark(oklch(0% 0 none / .12), oklch(100% 0 none / .12));    --color-text-strong: light-dark(var(--color-zinc-100), var(--color-white))  }  :root,  :host {    --color-white: oklch(100% 0 none)  }  :root,  :host {    --font-size-sm: .875rem;    --text-sm: var(--font-size-sm);    --text-sm--line-height: 1.5;    --text-sm--letter-spacing: 0;    --radius-md: .375rem;    --spacing-sm: .75rem  }}@layer utilities {  .text-sm {    font-size: var(--text-sm);    line-height: var(--text-sm--line-height, normal);    letter-spacing: var(--text-sm--letter-spacing, normal)  }  .items-center {    align-items: center  }  .bg-surface-raised {    background-color: var(--color-surface-raised)  }  .b-line-divider {    border-color: var(--color-line-divider)  }  .r-md {    border-radius: var(--radius-md)  }  .b-solid {    border-style: solid  }  .b\(1\) {    border-width: calc(1 * 1px)  }  .fg-text-strong {    color: var(--color-text-strong)  }  .flex {    display: flex  }  .shrink\(0\) {    flex-shrink: 0  }  .gap-sm {    gap: var(--spacing-sm)  }  .m\(0\) {    margin: calc(0 * 1px)  }  .mx-auto {    margin-inline: auto  }  .p-sm {    padding: var(--spacing-sm)  }  .w-fit {    width: fit-content  }  .\(accent-color\:currentColor\) {    accent-color: currentColor  }  .b-blue-60\:has\(\:checked\):has(:checked) {    border-color: var(--color-blue-60)  }}

체크박스를 선택하세요. 지원 브라우저에서는 레이블 테두리도 바뀝니다. 선택의 주된 표시는 체크 표시입니다.

기본 스타일을 새 선택자와 독립적으로 유지하세요. 필수 컨트롤이나 내용이 향상 기능에 의존하게 하지 마세요. 선택자 표기와 조합은 선택자를 참고하세요.

#서드 파티 CSS를 캐스케이드에 배치하기

일반 유틸리티가 라이브러리의 일반 스타일을 덮어써야 한다면 해당 CSS를 앞선 defaults 레이어로 가져오세요. Master 통합이 처리하는 앱 CSS 진입점에서 이 가져오기보다 먼저 레이어 순서를 선언합니다.

Swiper 코어, 탐색, 페이지 매김 스타일을 이미 사용하는 프로젝트라면 이 진입점으로 불러오고 다른 곳에서 레이어 없는 사본을 추가로 가져오지 마세요:

app.css

@layer theme, base, defaults, components, utilities;@import 'swiper/css' layer(defaults);@import 'swiper/css/navigation' layer(defaults);@import 'swiper/css/pagination' layer(defaults);@import '@master/css';@layer components {  .swiper-slide {    background-color: var(--color-surface-raised);  }}

슬라이더의 기존 마크업에서 한 슬라이드는 컴포넌트 표면을 유지하고 다른 슬라이드는 로컬 유틸리티를 추가할 수 있습니다:

<div class="swiper-slide">Default surface</div><div class="swiper-slide bg-blue-60 fg-white">Featured slide</div>

utilities의 일반 배경 선언은 components보다 우선하고, 후자는 defaults보다 우선합니다. HTML 클래스 이름의 순서를 바꾸어도 결과는 달라지지 않습니다.

더 강한 재정의를 추가하기 전에 브라우저 개발자 도구에서 경쟁하는 선언을 확인하세요. 같은 작성자 출처와 컨텍스트에서는 레이어 없는 일반 스타일이 레이어 안의 일반 스타일보다 우선합니다. 벤더의 !important 선언도 일반 유틸리티보다 우선하며 중요한 선언은 레이어 순서를 뒤집습니다. 이는 Master 전용 우선순위 체계가 아닌 네이티브 캐스케이드 규칙입니다. 캐스케이드 레이어에 진단 절차가 나와 있습니다.

Master가 관리하는 스타일시트의 네이티브 선택자는 기본적으로 유지됩니다. 네이티브 가지치기를 활성화한다면 자신이 관리하는 스타일시트에서 @preserve native로 벤더, CMS, 외부 주입 선택자를 보호하거나 해당 소스를 가지치기 대상 밖에 두세요. 서드 파티 위젯이 사용하는 선택자는 앱이 스캔하는 마크업에 나타나지 않을 수 있습니다.