Chrome 86이 이제 안정적으로 출시되기 시작했습니다.
https://developers.google.com/web/updates/2020/10/nic86
알아야 할 사항은 다음과 같습니다.
저는 Pete LePage입니다. 집에서 일하고 촬영합니다. Chrome 86의 개발자를 위한 새로운 기능에 대해 자세히 알아 보겠습니다.
File System Access
오늘날에는 <input type = "file"> 요소를 사용하여 디스크에서 파일을 읽을 수 있습니다. 변경 사항을 저장하려면 앵커 태그에 다운로드를 추가하면 파일 선택기가 표시되고 파일이 저장됩니다. 연 동일한 파일에 쓸 수 있는 방법이 없습니다. 그 워크 플로우는 성가신 일입니다.
원본 평가판을 졸업하고 이제 안정적으로 사용할 수 있는 파일 시스템 액세스 API (이전의 기본 파일 시스템 API)를 사용하여 파일 선택기를 표시하는 showOpenFilePicker()를 호출 한 다음 가능한 파일 핸들을 반환 할 수 있습니다. 파일을 읽는 데 사용합니다.
async function getFileHandle() {
const opts = {
types: [
{
description: 'Text Files',
accept: {
'text/plain': ['.txt', '.text'],
'text/html': ['.html', '.htm']
}
}
]
};
return await window.showOpenFilePicker(opts);
}파일을 디스크에 저장하려면 이전에 가져온 파일 핸들을 사용하거나 showSaveFilePicker()를 호출하여 새 파일 핸들을 얻을 수 있습니다.
async function saveFile(fileHandle) {
if (!fileHandle) {
fileHandle = await window.showSaveFilePicker();
}
const writable = await fileHandle.createWritable();
await writable.write(contents);
await writable.close();
}쓰기 전에 Chrome은 사용자가 쓰기 권한을 부여했는지 확인하고 쓰기 권한이 부여되지 않은 경우 Chrome에서 먼저 사용자에게 메시지를 표시합니다.
showDirectoryPicker()를 호출하면 디렉토리가 열리므로 파일 목록을 가져 오거나 해당 디렉토리에 새 파일을 만들 수 있습니다. 많은 파일과 상호 작용하는 IDE 또는 미디어 플레이어와 같은 것에 적합합니다. 물론, 무엇이든 쓰기 전에 사용자는 쓰기 권한을 부여해야 합니다.
API에 더 많은 것이 있으므로 web.dev의 파일 시스템 액세스 문서를 확인하세요.
Origin Trial: WebHID
일반적으로 HID라고 하는 휴먼 인터페이스 장치는 사람으로부터 입력을 받거나 사람에게 출력을 제공합니다. 너무 새롭거나, 너무 오래되었거나, 시스템의 장치 드라이버가 액세스 할 수 없는 드문 휴먼 인터페이스 장치가 많습니다.
이제 오리진 평가판으로 제공되는 WebHID API는 JavaScript에서 이러한 장치에 액세스하는 방법을 제공하여 이 문제를 해결합니다. WebHID를 사용하면 웹 기반 게임에서 모든 버튼, 조이스틱, 센서, 트리거, LED, 럼블 팩 등을 포함한 게임 패드를 최대한 활용할 수 있습니다.
butOpenHID.addEventListener('click', async (e) => {
const deviceFilter = { vendorId: 0x0fd9 };
const opts = { filters: [deviceFilter] };
const devices = await navigator.hid.requestDevice(opts);
myDevice = devices[0];
await myDevice.open();
myDevice.addEventListener('inputreport', handleInpRpt);
});웹 기반 화상 채팅 앱은 특수 스피커의 전화 버튼을 사용하여 통화를 시작 또는 종료하고 오디오를 음소거 하는 등의 작업을 수행 할 수 있습니다.
물론 이와 같은 강력한 API는 사용자가 명시적으로 허용하도록 선택한 경우에만 장치와 상호 작용할 수 있습니다.
자세한 내용, 예제, 시작 방법 및 멋진 데모는 일반적이지 않은 HID 장치에 연결을 확인하십시오.
Origin Trial: Multi-Screen Window Placement API
오늘날에는 window.screen()을 호출하여 브라우저 창이 있는 화면의 속성을 가져올 수 있습니다. 하지만 다중 모니터 설정이 있다면 어떨까요? 죄송합니다. 브라우저는 현재 표시된 화면에 대해서만 알려줍니다.
const screen = window.screen;
console.log(screen);
// {
// availHeight: 1612,
// availLeft: 0,
// availTop: 23,
// availWidth: 3008,
// colorDepth: 24,
// orientation: {...},
// pixelDepth: 24,
// width: 3008
// }Multi-Screen Window Placement API는 Chrome 86에서 오리진 평가판을 시작하여 컴퓨터에 연결된 화면을 열거하고 특정 화면에 창을 배치 할 수 있습니다. 특정 화면에 창을 배치 할 수 있는 것은 프레젠테이션 앱, 금융 서비스 앱 등과 같은 작업에 매우 중요합니다.
API를 사용하려면 먼저 권한을 요청해야 합니다. 그렇지 않은 경우 브라우저는 처음 사용하려고 할 때 사용자에게 메시지를 표시합니다.
async function getPermission() {
const opt = { name: 'window-placement' };
try {
const perm = await navigator.permissions.query(opt);
return perm.state === 'granted';
} catch {
return false;
}
}사용자가 권한을 부여하면 window.getScreens()를 호출하면 Screen 객체 배열로 해결되는 promise가 반환 됩니다.
const screens = await window.getScreens();
console.log(screens);
// [
// {id: 0, internal: false, primary: true, left: 0, ...},
// {id: 1, internal: true, primary: false, left: 3008, ...},
// ]그런 다음 requestFullScreen()을 호출하거나 새 창을 배치 할 때 해당 정보를 사용할 수 있습니다. Tom은 web.dev의 Multi-Screen Window Placement API 문서를 사용하여 여러 디스플레이 관리에 대한 모든 세부 정보를 제공합니다.
And more
새로운 CSS 선택기 : focus-visible을 사용하면 브라우저가 기본 포커스 표시기를 표시할지 여부를 결정할 때 사용하는 것과 동일한 휴리스틱을 선택할 수 있습니다.
/* Focusing the button with a keyboard will
show a dashed black line. */
button:focus-visible {
outline: 4px dashed black;
}
/* Focusing the button with a mouse, touch,
or stylus will show a subtle drop shadow. */
button:focus:not(:focus-visible) {
outline: none;
box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);
}CSS :: marker 의사 요소를 사용하여 목록의 색상, 크기 또는 숫자 또는 글 머리 기호 유형을 사용자 정의 할 수 있습니다.
li::marker {
content: '?';
}
li:last-child::marker {
content: '?';
}Chrome Dev Summit이 가까운 화면으로 올 예정 이니 자세한 정보는 YouTube 채널을 계속 지켜봐 주세요!
등록된 댓글이 없습니다.
