TOAST UI

Applications
ChartEditorGridCalendarImage-editor
Components
App LoaderAuto CompleteColor PickerContext MenuDate PickerPaginationRollingSelect BoxTime PickerTree
Tools
TOAST UI DocESLint ConfigRelease Note
FE Guide
Posts

월간 크롬 이슈 리포트 2022년 5월호

들어가며

프런트엔드 개발의 가장 큰 디펜던시인 크롬 브라우저의 주요 이슈를 Chrome Platform Status의 Roadmap과 한 달간 blink-dev 활동 요약을 기준으로 정리하여 공유한다.

💡M은 Milestone을 의미하며, M102은 102버전을 의미한다.

💡 웹 플랫폼 관련 이슈 위주로 다루며, 서비스에 영향이 크다고 판단되는 부분은 목차에 📌 를 표시한다.

💡 표준화에 대한 웹 개발자의 의견은 Chrome Platform Status 사이트에 쓰인 내용을 그대로 인용했다.

목차

  1. M102

    • inert 속성

  2. M103

    • AbortSignal.timeout() 정적 메서드
    • 로드 전 popstate 이벤트 발생 허용
    • "deflate-raw" 압축 포맷
    • role 속성에 대한 ARIA 속성 반영
    • Element.isVisible 메서드
    • 포커스 그룹
    • 로컬 폰트 접근
    • 추측 규칙 API에 의해 트리거된 동일 출처 prerendering
    • 탐색을 위한 HTTP 응답코드 103 Early Hint
    • form 요소의 rel 속성

  3. M104 (dev)

    • 웹 블루투스 API 권한 정책
    • CSS object-view-box

  4. Dev Trial

    • 전체화면 기능 위임
    • :has() 의사 클래스
    • overflow-clip-margin 프로퍼티에 visual-box 값 지원

  5. 그 외 프로토타이핑

    • 컨테이너 쿼리
    • CSS :modal 의사 클래스

버전별 이슈 리스트

1. M102

inert 속성

이슈

inert 속성을 사용하면 웹 작성자가 DOM 트리의 일부를 비활성으로 표시할 수 있다.

데모

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

2. M103

AbortSignal.timeout() 정적 메서드

이슈

주어진 시간(밀리초) 후에 자동으로 중단되는 새로운 AbortSignal 객체를 반환한다. 이 메서드로 개발자는 신호 수락 비동기 API(예를 들어 fetch())에 대한 시간 초과를 쉽게 구현할 수 있다.

데모

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

로드 전 popstate 이벤트 발생 허용

이슈

이전의 크롬 브라우저에서는 hashchange를 비동기로 실행하고 load 이벤트까지 popstate를 지연했다. 이는 문서를 로드하는데 걸리는 시간에 따라 이벤트의 순서가 [hashchange, popstate] 또는 [popstate, hashchange]가 될 수 있음을 의미한다. 변경 후의 크롬 브라우저는 파이어폭스 브라우저와 동일하게 URL 변경 즉시 popstate가 발생한다. 즉 순서가 항상 [popstate, hashchange]가 된다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 배포됨
  • Safari: 의견 없음
  • 웹 개발자: 의견 없음

References

"deflate-raw" 압축 포맷

이슈

새로운 압축 포맷인 "deflate-raw"를 추가한다. 이를 통해 웹 개발자가 헤더나 푸터 없이 원시 압축 스트림에 액세스할 수 있다. 예를 들어 zip 파일을 읽고 쓰는데 필요하다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 의견 없음
  • Safari: 의견 없음
  • 웹 개발자: 의견 없음

References

role 속성에 대한 ARIA 속성 반영

이슈

웹 개발자가 "role" ARIA 속성을 직접 쿼리하고 수정할 수 있도록 자바스크립트 API를 제공한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

references

Element.isVisible 메서드

이슈

Element.isVisible()는 요소가 보이면 true를 반환하고 그렇지 않으면 false를 반환한다. display: none, visibility, content-visibility, opacity를 포함해 요소를 보이지 않게 만드는 다양한 요소를 확인한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 의견 없음
  • Safari: 의견 없음
  • 웹 개발자: 의견 없음

references

포커스 그룹

이슈

포커스 그룹 기능은 포커스가 가능한 엘리먼트들 사이에서 키보드 화살표 키를 이용해 키보드 포커스 탐색을 용이하게 하는 기능이다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 의견 없음
  • Safari: 의견 없음
  • 웹 개발자: 긍정적

references

로컬 폰트 접근

이슈

로컬 폰트로 작업하려는 웹 앱은 사용자가 먼저 서버에 업로드해야 한다. 경우에 따라 이 문제를 해결하기 위해 폰트 접근 같은 추가 기능을 제공하고 로컬 폰트를 WebFont로 제공하는 별도의 로컬 프로그램을 설치하도록 사용자에게 요청한다.

폰트 접근 API를 사용하면 웹 앱이 이런 방법을 쓰지 않고도 로컬 폰트 및 일부 메타 데이터 목록에 접근할 수 있다.

데모

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

추측 규칙 API에 의해 트리거된 동일 출처 prerendering

이슈

prerendering은 웹 페이지가 필요로 하기 전에 로드하므로 해당 페이지에 대한 실제 탐색이 발생하면 즉시 표시될 수 있다.

데모

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 의견 없음
  • Safari: 의견 없음
  • 웹 개발자: 의견 없음

References

탐색을 위한 HTTP 응답코드 103 Early Hint

이슈

최상위 프레임 탐색 중에 HTTP 응답코드 103 Early Hint를 지원한다. 응답에 링크 헤더가 포함된 경우 크롬 브라우저는 최종 응답이 수신되기 전에 지정된 리소스(modulepreload 포함)를 preload하거나 지정된 출처에 preconnect하려고 시도한다. 이를 통해 웹 개발자는 LCP 같은 코어 웹 바이탈을 최적화할 수 있다.

데모

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

form 요소의 rel 속성

이슈

form 요소에 rel 속성을 추가한다. rel=noopener가 있는 form 요소로 탐색된 웹 사이트에 window.filename이 나타나지 않도록 하고 참조 헤더가 rel=noreferer와 함께 전송되지 않게 한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

3. M104 (dev)

웹 블루투스 API 권한 정책

이슈

웹 블루투스 API를 사용하면 웹 페이지가 블루투스를 통해 장치와 통신할 수 있다. 그러나 이 API는 교차출처 iframe에서 사용할 수 없다. 최상위 문서가 API의 메서드를 사용하려면 교차출처 iframe이 명시적으로 허용되어야 한다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

CSS object-view-box

이슈

object-view-box를 이용하면 작성자가 대상 대체 요소의 컨텐츠 상자 내에 그려야하는 이미지 내의 하위 집합을 지정할 수 있다. 이를 통해 CSS 그림자 같은 적절한 동작으로 사용자 정의 광원 또는 그림자가 적용된 이미지를 만들 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

4. Dev Trial

전체화면 기능 위임

이슈

전체화면 기능 위임 기능을 이용하면 송신자 창에서 일시적인 사용자 활성화를 포기한 후 신뢰할 수 있는 다른 창으로 requestFullscreen()을 호출하는 기능을 전송할 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

:has() 의사 클래스

이슈

:has() 의사 클래스는 인수로 전달된 선택자와 일치하는 요소가 하나 이상 있는 요소를 지정하는 선택자다. M105 배포 예정이다.

데모

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

overflow-clip-margin 프로퍼티에 visual-box 값 지원

이슈

overflow-clip-margin은 overflow: clip인 요소를 자르기 전에 그 경계를 벗어나는 정도를 결정한다. 이 속성에 visual-box 값을 사용해 컨텐츠가 잘리는 overflow clip edge를 정의하는 참조 상자를 구성할 수 있다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

  • Firefox: 긍정적
  • Safari: 의견 없음
  • 웹 개발자: 의견 없음

References

5. 그 외 프로토타이핑

컨테이너 쿼리

이슈

작성자가 컨테이너 요소의 크기에 따라 요소의 스타일을 지정할 수 있다. @media 쿼리와 비슷하지만 뷰포트 크기 대신 컨테이너 크기를 기준으로 평가한다는 점만 다르다.

/* 기본적으로 display: block을 사용하지만 충분한 공간이 있다면 display: flex를 사용한다. */

.component {
  container-type: inline-size;
}
.component > main {
  display: block;
}

@container (inline-size >= 800px) {
  .component > main {
    display: flex;
  }
}

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

CSS :modal 의사 클래스

이슈

dialog 요소의 스타일을 지정하는 의사 클래스 선택자를 추가한다. :modal 의사 클래스는 해제될 때까지 외부 요소와의 모든 상호작용을 배제하는 상태에 있는 요소를 나타낸다.

표준화

상기 제안에 대한 타 브라우저의 의견은 다음과 같다.

References

#browser
#toastui
임재언2022.06.03
Back to list
Applications
ChartEditorGridCalendarImage-editor
Components
App LoaderAuto CompleteColor PickerContext MenuDate PickerPaginationRollingSelect BoxTime PickerTree
Tools
TOAST UI DocESLint ConfigRelease Note
FE Guide
Posts
© NHN Cloud Corp.