일요일은 개발자 블로그를 개발하는 날입니다. 이런저런 테크 트렌드를 보고 줍줍한 것들입니다.
테크 트렌드 줍줍
이번주 일요일에 이 내용들 정리하면 될 것 같습니다.
21 Awesome Web Features you’re not using yet
html dialog
<dialog id="a">
<form method="dialog">
<button>close</button>
<button onclick="a.close()">close</button>
</form>
</dialog>
<button onclick="a.showModel()">show modal</button>
dialog::backdrop {
background-color: #fff;
}
popover
<button popovertarget="popinoff">open</button>
<div id="popinoff" popover>
<p>hello</p>
</div>
Web GPU
WebGL의 후계자입니다. 웹에서 3D 처리를 더 효율적으로 할 수 있습니다. 또 tensorflow.js에도 적용할 수 있을 것입니다.
컨테이너 쿼리
cq
단위들이 많이 추가되었습니다.
.article {
container-type: inline-size;
}
@container (min-width: 700px) {
.card {
flex-direction: colum;
font-size: max(1.2rem, 1rem + 2cqi);
}
}
불필요한 방정식에 의존할 필요가 없어졌습니다.
color mix
.box {
width: 420px;
aspect-ratio: 16 / 9;
background-color: color-mix(in srgb, red, blue);
}
CSS 네스팅
.card {
.heading {
font-weight: bold;
h1 {
color: springgreen;
}
}
}
color font
위에 제공하는 간지나는 폰트를 활용할 수 있습니다.
웹바이탈 익스텐션
위에서 받으면 됩니다.
Web Vitals Chrome Extension - repo
Array.at
console.log([1, 2, 3, 4, 5].at(-1)); // 5