Interop 2024년 중반 업데이트

Rachel Andrew

이제 하반기로 접어들면서, 올해의 광고주들이 어떻게 Interop 2024는 올해 웹 상호 운용성을 개선했습니다.

Google의 출발점

연초, Chrome의 실험 브라우저 지원 점수는 83점입니다.

<ph type="x-smartling-placeholder">
</ph> 대시보드 점수: 상호 운용성: 65, 조사: 0, Chrome Canary: 83, Edge Dev: 82, Firefox Nightly: 80, Safari Technology Preview: 79.
2024년 2월의 Interop 2024 대시보드
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">대시보드 점수: 상호 운용성: 75, 조사: 5, Chrome Canary: 90, Edge Dev: 89, Firefox Nightly: 87, Safari Technology Preview: 88.</ph>
2024년 6월 말 상호 운용성 2024 대시보드

현재 해당 점수는 90점이며, Chrome 126 출시를 앞두고 있습니다 전반적인 실험 상호 운용성 점수가 높아짐 이 게시물에서는 포인트를 얻는 데 도움이 된 몇 가지 기능을 공유합니다. 확인할 수 있습니다.

팝오버

팝오버는 2024년 4월에 Baseline Newly Available의 일부로 포함되었습니다. 팝오버 빌드해야 하는 UI 기능이 매우 많기 때문입니다. 예를 들어 메뉴, 도움말, 선택을 위한 오버레이, 교육 UI는 팝오버 팝오버를 진행하기 전에는 이러한 기능을 만드는 데 많은 맞춤 작업이 필요했습니다. 있습니다. 여러 요소가 동시에 열리지 않았는지 확인하거나 사용 설정하는 코드 사용자가 요소 바깥을 클릭하면 빛이 닫힙니다. 또한 UI 요소가 나머지 요소 위에 있도록 하기 위해 z-index에서 어려움을 겪었습니다. 인터페이스입니다.

이 모든 기능을 비롯한 다양한 기능이 Popover API 개발 시간 절약 성능과 접근성이 뛰어난 인터페이스를 만드는 데 도움이 됩니다. 대상 예를 들어, 다음 코드는 '밝기 닫기'가 있는 팝오버를 만듭니다. 열릴 때 다른 팝오버를 자동으로 닫습니다.

<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>

브라우저 지원

  • Chrome: 114 <ph type="x-smartling-placeholder">
  • Edge: 114. <ph type="x-smartling-placeholder">
  • Firefox: 125 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

소스

자세한 내용은 기준에 팝오버 API 적용을 참고하세요. 여러 항목 이미 팝오버의 이점을 누리고 있습니다. Tokopedia는 React 코드의 양을 폴리필을 사용하여 문제를 해결합니다.

@property의 고급 맞춤 속성

@property CSS 규칙을 사용하면 이름과 값보다 더 자세한 정보를 제공합니다. 허용되는 문법을 설정하여 이 속성이 보유하는 데이터 유형을 정의합니다. 예를 들면 색상, 숫자, 길이가 있습니다. 그런 다음 속성 상속 및 초깃값이 있습니다

@property --myColor {
  syntax: '<color>';
  inherits: false;
  initial-value: hotpink;
}

@property 규칙은 현재 Firefox의 실험 점수를 개선합니다. 이번 달 말에 Firefox 128이 출시되면 안정화 점수가 향상되었습니다. 또한 Cloud Shell 새로 사용 가능한 기준.

브라우저 지원

  • Chrome: 85. <ph type="x-smartling-placeholder">
  • Edge: 85. <ph type="x-smartling-placeholder">
  • Firefox: 128 <ph type="x-smartling-placeholder">
  • Safari 16.4. <ph type="x-smartling-placeholder">

소스

@property: CSS 변수의 강력한 기능 제공에서 자세히 알아보세요.

font-size-adjust 속성

CSS font-size-adjust 속성을 사용하면 소문자 크기를 수정할 수 있습니다. 상대적으로 0이 될 수 있습니다. 이렇게 하면 대체 글꼴이 여전히 특히 작은 글꼴 크기에서 읽기 쉽습니다.

font-size-adjust 속성이 현재 실험 점수에 포함되어 있습니다. 그러나 이번 달의 Chrome 127 또한 Baseline Newly Available에도 조인됩니다.

브라우저 지원

  • Chrome: 127 <ph type="x-smartling-placeholder">
  • Edge: 127. <ph type="x-smartling-placeholder">
  • Firefox: 3. <ph type="x-smartling-placeholder">
  • Safari 16.4. <ph type="x-smartling-placeholder">

소스

텍스트 줄바꿈: 균형

text-wrap: balance를 사용하면 브라우저가 최적의 균형을 찾아 텍스트 줄바꿈을 사용할 수도 있습니다. 이는 특히 제목에 제목 줄바꿈이 사용된 것을 예로 들 수 있습니다.

이 문제는 최근 Safari에서 지원되고 있으며 다른 브라우저에서도 이 문제를 해결하기 위해 노력하고 있습니다. 테스트를 통과하지 못해 이 기능이 모든 브라우저에서 제대로 작동하는지 확인합니다.

브라우저 지원

  • Chrome: 114 <ph type="x-smartling-placeholder">
  • Edge: 114. <ph type="x-smartling-placeholder">
  • Firefox: 121 <ph type="x-smartling-placeholder">
  • Safari 17.5. <ph type="x-smartling-placeholder">

소스

이러한 주요 기능이 상호 운용될 수 있을 뿐만 아니라 되었습니다. 통과한 각 테스트는 당면한 상호 운용성 문제를 해결하는 데 도움이 될 수 있습니다 앞으로 2020년과 2020년 사이에 100% 목표를 달성할 수 있습니다