web의 현재 - Google IO 2022 [Google Chrome Developers]

New for the web platform - GoogleIO 2022

해당 글의 내용들을 담은 예시 구현 코드는 여기서 확인할 수 있다.

각각의 속성에 맞게끔 html 파일들을 따로 작성하였으니, 직접 눈으로 확인하고 싶은 분들은 확인하면 좋을 것 같다.
(container query처럼 몇몇 속성들은 아직 지원하지 않는 브라우저가 있으니, 주의해야 한다.)

UI

1. accent-color

Customizable theming for base UI form controls
기본으로 제공되는 input들에 대한 강조 색상을 지정할 수 있다.
color-scheme 속성에 대해서도 자동 조정 값을 제공한다. (light / dark mode)

:root {
    color-scheme: light dark;
    accent-color: magenta;
}

2. dialog

기본으로 제공되는 Modal 요소.
접근성까지 고려되어 있음.
(키보드 포커싱: space, enter로 열기 / esc로 닫기 / 뒷 배경 요소에 대한 접근 제한 등)

Performance

3. bfcache

Going back and forth, instantly.
기존에 safari를 사용해봤다면 알 것.
(특정 페이지에서 뒤로가기 시에, 이전 페이지 리프레시 없이 바로 표시되는 것)
Devtools에서 가능/불가능한 페이지에 대한 이유 설명해줌.
(Application > Cache > Back/forward cache)

4.Image lazy loading

ability to delay rendering of images to prioritize more critical page assets.
이미지 소스가 많은 페이지에 대해서 간단하게 성능 개선을 할 수 있음.

<img src="" loading="lazy" />
<iframe src="" loading="lazy" />

5. aspect-ratio

.whatever {
    aspect-ratio: 16 / 9;
}

6. containment

prerequisite for container queries

defer rendering of DOM through developer-controlled subtree isolation.
contain 속성값에 따라 특정 요소(content)를 독립적으로 관리할 수 있음.
content 내부에 어떤 새로운 요소가 추가되더라도, 브라우저는 content 바깥에 대해서 relayout이나 repaint를 할 필요가 없는 것으로 이해하게 된다. 만약 content 속성의 요소를 감싸고 있는 부모 요소가 content의 사이즈에 의존하는 것이라면, 사이즈 변경에 대해서 새롭게 측정할 필요가 있을 것이다.

[예시] https://wit.nts-corp.com/2019/07/08/5594

<h1>My blog</h1>
<article>
  <h2>Heading of a nice article</h2>
  <p>Content here.</p>
</article>
<article>
  <h2>Another heading of another article</h2>
  <p>More content here.</p>
</article>

article {
    contain: content;
    /* content는 layout, paint의 축약어이다.*/
}

7. Interaction to next paint

Web app capabilities

8. Media Session API

Control media via the OS and devices.
스마트워치를 생각하면 쉬울 듯.

Scripting primitives

9. Structured cloning

can clone more things like blobs, image, bitmaps, typed array.
can use it even NodeJS, Deno

 //before
 const clone1 = JSON.parse(JSON.stringify(obj))
 //after
 const clone2 = structuredClone(obj)

9. createImageBitmap

async function blobToImg(blob){
    const url = URL.createObjectURL(blob)

    try {
        const img = new Image();
        img.src = url;
        await img.decode();
        return img;
    } finally {
        URL.revokeObjectURL(url)
    }
}

const blobToImg = (blob) => createImageBitmap(blob);

10. Private properties and methods in Class

class Whatever extends EventTarget {
    #counter = 0
    get counter() {
        return this.#counter
    }
    #fireIncrementEvent() {
        this.dispatchEvent(new Event('increment'))
    }
    incrementCounter() {
        this.#counter++;
        this.#fireIncrementEvent();
    }
}

11. Array.at

//before
const last = array[array.length - 1];
const last = array.slice(-1)[0];
//after
const last = array.at(-1)

CSS

12. Cascade layers

User-controlled CSS layer precedence
layer는 말 그대로, css 스타일들을 layer라는 단위로 묶음하여 겹겹이 쌓으면서 적용할 수 있다는 것.
위쪽에 (나중에) 추가된 layer는 동일한 selector에 대한 속성값이 기존에 있다고 하더라도,
우선순위에 상관없이 덮어쓰게 된다.

13. container queries

polyfill