하반기를 앞두고 Interop 2024가 올해 웹 상호 운용성을 어떻게 개선했는지 살펴볼 좋은 기회입니다.
시작점
올해 초 Chrome의 실험용 브라우저 지원 점수는 83이었습니다.
현재 점수는 90점이며, 6월에 Chrome 126이 출시된 시점의 안정화 브라우저 점수는 85점입니다. 전반적인 실험적 상호 운용성 점수가 10점 상승했으며 이 게시물에서는 이 점수에 기여한 몇 가지 기능을 공유합니다.
팝오버
팝오버는 2024년 4월에 새로 제공되는 기준의 일부가 되었습니다. 팝오버는 메뉴, 도움말, 선택을 위한 오버레이, 교육 UI와 같이 빌드해야 하는 많은 UI 기능이 팝오버 유형이기 때문에 흥미롭습니다. 팝오버가 도입되기 전에는 이러한 기능을 만들려면 많은 양의 맞춤 코드가 필요했습니다. 여러 요소가 한 번에 열리지 않도록 하거나 사용자가 요소 외부를 클릭할 때 조용히 닫기를 사용 설정하는 코드입니다. UI 요소가 나머지 인터페이스 위에 유지되도록 z-index
를 사용하면서 어려움을 겪었을 수도 있습니다.
이러한 기능과 그 밖의 많은 기능이 Popover API에 포함되어 있어 개발 시간을 절약하고 더 나은 성능과 접근성을 갖춘 인터페이스를 만들 수 있습니다. 예를 들어 다음 코드는 열릴 때 다른 팝오버를 자동으로 닫는 light-dismiss가 있는 팝오버를 만듭니다.
<button popovertarget="my-popover">Open Popover</button>
<div id="my-popover" popover>
<p>I am a popover with more information. Hit <kbd>esc</kbd> or click away to close me.</p>
</div>
Popover API가 기준선에 도착에서 자세히 알아보세요. 이미 많은 애플리케이션에서 Popoves의 이점을 누리고 있습니다. Tokopedia는 이 기능을 활용하고 지원되지 않는 브라우저에 폴리필을 사용하여 React 코드의 양을 크게 줄일 수 있었습니다.
@property
를 사용한 고급 맞춤 속성
@property
CSS 규칙을 사용하면 표준 맞춤 속성에서 사용할 수 있는 이름과 값보다 훨씬 더 자세한 고급 맞춤 속성을 만들 수 있습니다.
허용되는 문법을 설정하여 이 속성이 보유하는 데이터 유형(예: 색상, 숫자, 길이)을 정의합니다. 그런 다음 속성이 상속되는지 여부와 초깃값을 설정합니다.
@property --myColor {
syntax: '<color>';
inherits: false;
initial-value: hotpink;
}
현재 @property
규칙은 Firefox의 실험 점수를 개선하여 이달 말에 Firefox 128이 출시될 때 안정적인 점수를 높입니다. 또한 새로 사용 가능한 기준선에 조인됩니다.
@property: CSS 변수에 강력한 기능 부여에서 자세히 알아보세요.
font-size-adjust
속성
CSS font-size-adjust
속성을 사용하면 대문자 크기를 기준으로 소문자 크기를 수정할 수 있습니다. 이는 글꼴 대체가 발생할 수 있는 상황에서 유용합니다. 특히 작은 글꼴 크기에서 대체 글꼴을 계속 읽을 수 있도록 하는 데 도움이 됩니다.
font-size-adjust
속성은 현재 Chrome의 실험용 점수에 포함되어 있지만, 이달 Chrome 127과 함께 출시되면 안정적인 점수가 증가합니다. 또한 '새로 사용 가능한 기준점'에 합류합니다.
text-wrap: balance
text-wrap: balance
를 사용하면 브라우저에 텍스트의 균형이 가장 좋은 줄 바꿈을 파악하도록 지시합니다. 이는 특히 제목에 유용하여 제목이 두 번째 줄에서 단일 단어로 줄바꿈되는 것을 방지합니다.
이 기능은 최근 Safari에서 지원되기 시작했으며 다른 브라우저에서는 이 기능이 모든 브라우저에서 잘 작동하도록 실패한 테스트를 수정하기 위해 노력하고 있습니다.
이러한 주요 기능이 상호 운용 가능해진 것 외에도 다른 많은 개선사항이 적용되었습니다. 통과하는 각 테스트는 발생하지 않을 상호 운용성 문제를 나타냅니다. 올해 말까지 100% 점수에 얼마나 근접할 수 있을지 기대됩니다.