분류 html

Chrome 86의 새로운 기능

컨텐츠 정보

  • 조회 18 (작성일 )

본문

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에서 먼저 사용자에게 메시지를 표시합니다.


permission prompt screen shot 


showDirectoryPicker()를 호출하면 디렉토리가 열리므로 파일 목록을 가져 오거나 해당 디렉토리에 새 파일을 만들 수 있습니다. 많은 파일과 상호 작용하는 IDE 또는 미디어 플레이어와 같은 것에 적합합니다. 물론, 무엇이든 쓰기 전에 사용자는 쓰기 권한을 부여해야 합니다.


API에 더 많은 것이 있으므로 web.dev의 파일 시스템 액세스 문서를 확인하세요.


Origin Trial: WebHID 


일반적으로 HID라고 하는 휴먼 인터페이스 장치는 사람으로부터 입력을 받거나 사람에게 출력을 제공합니다. 너무 새롭거나, 너무 오래되었거나, 시스템의 장치 드라이버가 액세스 할 수 없는 드문 휴먼 인터페이스 장치가 많습니다.


Game controller 


이제 오리진 평가판으로 제공되는 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 device picker 


자세한 내용, 예제, 시작 방법 및 멋진 데모는 일반적이지 않은 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 채널을 계속 지켜봐 주세요!