마케팅 팀은 여전히 프레임워크 런타임 없이 메뉴, 서랍 및 동의 배너가 제자리에 "팝업"되는 정적 HTML 마이크로사이트를 제공합니다. 까지@시작 스타일, 작성자는 중복된 클래스가 있는 첫 번째 프레임을 인라인으로 위조했습니다.opacity:0해킹 또는 다음 애니메이션 프레임의 속성을 전환하는 JavaScript. 새로운 규칙을 사용하면 요소의 모양을 선언할 수 있습니다.before스타일이 표시된 후 첫 번째 스타일 업데이트를 수행하고 나머지는 일반적인 전환에 의존합니다. 이 가이드는 컴파일된 대상을 대상으로 합니다.정적 HTML/CSS번들, 기능과 결합이미 제공하고 있는 Popover API 패턴, 그리고 그 이유를 설명합니다.Safari/WebKit하드웨어 승인은 여전히 필수입니다.
브라우저 매트릭스, 숫자 가드레일(기간 제한, 최대 번역 거리), 모션 감소 정책 및 임대에 적합한 주간 Safari 체크리스트를 가지고 떠날 것입니다.맥 미니 budget.
정신 모델: 첫 번째 프레임과 열린 상태
팝오버가 열리면 엔진은 이를 최상위 레이어로 승격시키고 개방형 스타일을 적용합니다. @starting-style이 없으면 첫 번째 페인팅된 프레임은 이미 "개방형" 불투명도 및 변형을 표시하므로 숨겨진 상태로부터의 모든 전환은 위조되어야 합니다. @starting-style은 첫 번째 프레임에만 합성 시작점을 도입합니다. 페인트 후에 캐스케이드는 일반 공개 규칙에 따라 다시 계산되며transition속성은 델타에 애니메이션을 적용합니다.
CMS 미리보기와 프로덕션 간에 DOM을 동일하게 유지할 수 있으므로 이는 정적 사이트에 중요합니다..is-entering맞춤형 JS가 관리하는 클래스입니다. 불투명도가 사라지는 것과 동일한 타이밍에 초점이 보이는 윤곽선을 정렬할 수 있으므로 접근성이 향상됩니다.
제한사항: @starting-style은 레이아웃을 만들어내지 않습니다. 요소가display:none, 이전과 동일한 박스 트리 규칙에 여전히 참여합니다. 첫 번째 프레임이 표시되면 스타일을 지정하는 것입니다.
2026년 초 공공 설계 시스템의 원격 측정은 대략적으로 제안합니다.5~8%세션 중 여전히 지원 없이 브라우저에 상주합니다. 점진적인 개선을 계획하세요.
디자이너는 엔지니어가 이징 곡선을 추측하는 대신 CSS 블록에 직접 매핑할 수 있도록 "시작" 및 "안정" 토큰으로 Figma 타임라인에 주석을 달아야 합니다.
전환을 사용한 구문 작성
팝오버 패널의 최소 패턴:
.panel {
opacity: 1;
transform: translateY(0);
transition: opacity 220ms ease, transform 260ms cubic-bezier(.2,.8,.2,1);
}
@starting-style {
.panel {
opacity: 0;
transform: translateY(8px);
}
}기간을 다음 미만으로 유지하세요.320msUI 표면의 경우; 새로 고침이 높은 iPhone 디스플레이에서는 페이드가 길어지면 느리게 느껴집니다. 수직 이동을 다음으로 제한하십시오.8~12픽셀메뉴 및16픽셀모달 시트의 경우 모션이 잠재의식적으로 유지됩니다.
와 결합할 때popover="auto", 라이트 해제 타이밍을 기억하세요. 배경화면 필터가 활성화된 경우 Safari는 Chromium과 다르게 프레임을 통합할 수 있습니다. 두 엔진을 모두 테스트하세요.
대화 상자 요소의 경우 다음과 쌍을 이룹니다.::backdrop조심스럽게 전환합니다. 배경화면은 자체 레이어에 페인트하고 지속 시간이 다음보다 많이 다를 경우 패널 모션에서 동기화를 해제할 수 있습니다.40ms.
정적 생성기는 구성 요소 부분당 한 번씩 이러한 블록을 방출해야 합니다. 클래스 이름이 서로 다른 수십 페이지에 걸쳐 동일한 @starting 스타일 섹션을 복제하지 마세요.
2026년의 브라우저 매트릭스
| Engine | @시작 스타일 | 정적 QA 초점 |
|---|---|---|
| 크롬 117+ | Supported | DevTools는 애니메이션 검사기에서 시작 상태와 열린 상태를 보여줍니다. |
| 파이어폭스 129+ | Supported | 전환 목록 속성이 시작 값에서 애니메이션화할 수 없는 경우 강력한 경고가 표시됩니다. |
| 사파리 17.4+ | Supported | 각 부 릴리스를 다시 테스트하십시오. STP는 배경화면+팝오버 콤보에 따라 다를 수 있습니다. |
| 레거시 웹킷 | None | 불투명도 전용 또는 즉시 개방형 대체를 제공합니다. |
클라우드 Mac mini의 Safari QA
Playwright WebKit은 구문 분석 오류를 포착하지만 동적 유형이 글꼴 크기를 조정할 때 미묘한 단일 프레임 깜박임은 포착하지 않습니다. 할당하다25~40분Apple 실리콘 릴리스별: 계약 승인을 위한 안정적인 Safari, 회귀를 이등분할 때 Safari 기술 미리보기.
하드웨어 조달이 느리다면 클라우드를 임대하세요맥 미니스프린트를 위해. MacHTML Apple Silicon 호스트는 일반적으로 가격이 비슷합니다.$16.9/일, 정적 번들을 푸시하기 위한 SSH와 대화형 애니메이션 검토를 위한 VNC를 포함합니다. 하룻밤 동안 빌려준 노트북보다 저렴합니다.
거울 생산font-display, 웹폰트 URL 및backdrop-filter미리보기 설정; 일치하지 않는 글꼴은 글리프 측정항목을 변경하고 CSS가 바이트 단위로 일치하는 경우에도 변환이 "잘못된" 것처럼 보이게 만듭니다.
슬로우 모션 화면 녹화를 캡처하세요.120fps마케팅에서 "단일 프레임 플래시"에 대해 이의를 제기하는 경우 Safari의 GPU 합성기는 레이어를 승격할 때 때때로 하나의 밝은 프레임을 생성합니다.
작업은 CDN 캐시 키를 @starting 스타일 규칙이 포함된 CSS 해시에 연결해야 부분 배포가 오래된 HTML과 새 애니메이션 토큰을 쌍으로 연결하지 않도록 합니다.
움직임 감소 및 전정 안전성
큰 번역을 다음으로 묶으세요.@media (prefers-reduced-motion: reduce)그리고 캡 무브먼트를2~4픽셀더 짧은 기간으로. macOS에서 대비 증가를 활성화한 사용자에게 즉시 열기를 제공합니다.
WCAG 모션 지침을 충족하기 위해 @starting 스타일에만 의존하지 마십시오. 여전히 사용자 설정을 존중해야 합니다.
테스트 체크리스트: 시작 프레임 중에 초점 링이 계속 표시되는지 확인하고, 한 프레임의 불투명도가 0인 경우에도 화면 판독기가 상태 변경을 듣는지 확인하고, 각 애니메이션 리팩터링 후에 VoiceOver를 실행합니다.
국제화: CJK 줄 바꿈은 로캘 간 패널 높이를 변경할 수 있습니다. 변환이 다음과 같은 경우 디센더를 자르지 않는지 확인하세요.translateY적용됩니다.
보안 검토자는 불투명도가 0에서 시작될 때 클릭재킹에 대해 걱정하는 경우가 있습니다. 적중 테스트 창이 남용되지 않는지 확인하십시오. @starting-style은 이벤트 타겟팅 의미를 변경하지 않습니다.
계단식 레이어 및 특이성 트랩
@starting 스타일 블록을 같은 곳에 배치하세요.@layer구성요소 스타일로 사용하세요. 유틸리티가 상위 레이어에 있는 경우 실수로 시작 불투명도를 무시하고 효과를 깨뜨릴 수 있습니다. 스타일 가이드의 문서 레이어 순서:reset, components, utilities공통 기준입니다.
마케팅에서 긴급 상황에 대비해 인라인 스타일을 주입할 때 절대 설정하지 않도록 가르치세요.transition:none애니메이션 쉘에서는 시작 스타일과 열린 상태 사이의 연결을 비활성화합니다.
부분 버전 지정: @starting-style 블록이 변경될 때마다 주석 헤더를 추가하여 감사 중에 Git 비난을 계속 읽을 수 있도록 합니다.
측정 후에만 컨테이너 쿼리와 결합: 중첩된 포함은 첫 번째 프레임 타이밍을 몇 밀리초만큼 이동하는 추가 레이아웃 패스를 강제할 수 있습니다. 일반적으로 괜찮지만 저전력 장치에서는 볼 수 있습니다.
마지막으로 다음을 금지하는 린트 규칙을 추가합니다.animation기간이 명시적으로 검토되지 않는 한 @starting-style과 동일한 선택기에 대한 속기 — 속기 재설정은 자동으로 전환 목록을 방해할 수 있습니다.
성능 및 메인 스레드 규율
각각의 새로운 애니메이션 표면은 합성기 작업을 증가시킵니다. Apple 실리콘 노트북에서는 이것이 치명적인 경우가 거의 없지만 Safari QA와 CI 스크린샷을 모두 제공하는 팬이 없는 미니에서는 동시 애니메이션 팝오버를 아래에 유지하세요.three위의 프레임 드롭을 방지하기 위해 뷰포트당8ms스크롤하는 동안.
Prefer transform and opacity@starting 스타일 선언의 경우; 애니메이션을 피하세요box-shadowWebKit에서 다시 그리기가 많은 경로를 강제로 적용하기 때문에 시작 블록에서 반경이 흐려집니다.
마케팅에서 "블러인" 효과를 요청하는 경우 이미 정적 블러를 전달하는 의사 요소에 불투명도를 적용하여 가짜로 만듭니다. 필터 커널을 프레임별로 애니메이션화하는 것보다 저렴합니다.
이러한 예산을 구성 요소 README에 문서화하면 향후 리브랜딩 시 촉박한 기한 하에 컴포지터 제한을 다시 학습하는 대신 동일한 성능 계약을 상속받을 수 있습니다.
FAQ
@starting-style이 Popover API를 대체합니까?
아니요 - 팝오버는 상호 작용과 최상위 레이어를 처리합니다. @starting-style은 첫 번째 프레임 페인트를 처리합니다.
Safari는 제작 준비가 되어 있나요?
지원되는 버전에서는 예. 각 릴리스마다 하드웨어 QA 일정을 계획합니다.
QA 시간은 얼마나 되나요?
25~40분의 Safari 집중과 움직임 감소를 위한 15분을 계획하세요.
애플 실리콘 맥 미니WebKit 애니메이션 논쟁을 해결하는 가장 빠른 방법은 여전히 남아 있습니다. 기본 합성, 장시간 녹화 세션 중 예측 가능한 발열, Linux VM이 에뮬레이트할 수 없는 macOS 접근성 토글 등이 있습니다.MacHTMLSSH/VNC를 사용하여 클라우드 Mac mini 호스트를 임대하므로 정적 사이트 팀은 또 다른 CapEx 주기(스프린트 프로비저닝, 증거 캡처, 녹색 시 해체) 없이 @starting 스타일, 팝오버 및 대화 상자 스택을 검증할 수 있습니다.
클라우드 Mac mini에서의 Safari @starting 스타일 QA
Apple Silicon 하드웨어를 임대하여 실제 WebKit 합성을 통해 첫 번째 프레임 애니메이션, 팝오버 타이밍 및 모션 감소 경로를 검증하세요.