2019년 1월 29일 정식 릴리즈 된 Chrome 72, Firefox 65 새로운 기능 중 UI 개발과 관련된 내용을 정리했습니다.

📌 Chrome 72

🔔 New Feature

  • [JavaScript] Intl.ListFormat
  • [JavaScript] Public class fields
  • [JavaScript] User Activation Query API
  • [JavaScript] Well-formed JSON.stringify

🔕 Remove Feature

  • [JavaScript] Deprecate PaymentAddress.languageCode
  • [JavaScript] Don’t allow popups during page unload

Intl.ListFormat

New Feature, Javascript
성능을 저하시키지 않고 라이브러리 및 프레임 워크에서 목록 포맷을 지정할 수 있습니다.

const lf = new Intl.ListFormat('en');
lf.format(['Frank']);
// → 'Frank'
lf.format(['Frank', 'Christine']);
// → 'Frank and Christine'
lf.format(['Frank', 'Christine', 'Flora', 'Harrison']);
// → 'Frank, Christine, Flora, and Harrison'
const lf = new Intl.ListFormat('en', { type: 'disjunction' });
lf.format(['Frank', 'Christine', 'Flora', 'Harrison']);
// → 'Frank, Christine, Flora, or Harrison'
const lf = new Intl.ListFormat('zh');
lf.format(['永鋒', '新宇', '芳遠', '澤遠']);
// → '永鋒、新宇、芳遠和澤遠'

Public class fields

New Feature, Javascript
ECMAScript 클래스에 Public 필드를 도입합니다.

class MyClass {
    instanceProperty = 0;
    static staticProperty = 0;
}

User Activation Query API

New Feature, Javascript & User input
Chrome72는 사용자 활성화(user activation) 여부를 묻는 User Activation Query API를 제공합니다.
이는 성가신 웹 페이지 동작을 피하기 위해 의도적으로 제한된 API (ex. requestFullScreen()autoplaywindow.open()postMessage())에 유용합니다.
navigator와 MessageEvent에서 모두 사용할 수 있는 새 userActivation 속성은 다음 속성을 지원합니다.

  • hasBeenActive: 연관된 창이 라이프사이클 내에 사용자 활성화 태스크가 있었는지 표시 (사용자 활성화에 의해 현재 태스크가 트리거되었는지 여부는 반영하지 않음)
  • isActive: 연관된 창이 라이프사이클 내 사용자 활성화 태스크의 현재 여부 표시

postMessage() 메서드는 windowworker 및 MessagePort객체에 대한 옵션 인수를 받을 수 있습니다.
이 메서드는 기존 인수를 포함하고 메시지 수신자에게 사용자 활성화가 있음을 알리는 classUserActivation 부울 속성을 추가합니다.
다음은 iframe에서 사용자 활성화가 있음을 parent에 알리는 방법입니다.

// Check that WindowPostOptions is supported
if (window.parent.postMessage.length === 1) {
    window.parent.postMessage('resize', {includeUserActivation: true});
} else {
    window.parent.postMessage('resize', '/');
}

그런 후 parent는 응답하기 전에 여전히 활성 상태인지 확인할 수 있습니다.

if (event.userActivation && event.userActivation.isActive) {
    return Promise.resolve();
}

Well-formed JSON.stringify

Update Feature, Javascript
잘못 구성된 유니 코드 문자열을 반환하지 못하도록 JSON.stringify()를 변경합니다.
이전에는 any 포함된 경우 단독 surrogate를 출력했습니다.
Chrome72부터 JSON.stringify()는 단독 surrogate에 대한 escape sequence를 출력하므로 유효한 유니 코드를 출력(UTF-8로 표현 가능)합니다.

JSON.stringify('\uD800');
// Previously, this returned → '"�"'
// Starting in Chrome 72, this returns → '"\ud800"'

Deprecate PaymentAddress.languageCode

Deprecate Feature, Javascript & Misc
PaymentAddress.languageCode는 Payment Request API에서 발송, 청구, 배송 또는 픽업 주소의 언어를 브라우저가 추측합니다.
languageCode는 Firefox, Safari에서 이미 제거되었습니다.
Chrome 74에서 완전히 제거될 예정입니다.

Don’t allow popups during page unload

Remove Feature, Javascript
페이지 언로드 시 팝업을 허용하지 않습니다.
브라우저는 “popup blocker”라는 시스템을 가지고 있지만, 이번 업데이트를 통해 팝업 차단이 활성화되었는지 여부와 관계없이 페이지 언로드 시 window.open() API를 허용하지 않습니다.


📌 Firefox 65

🔔 New Feature

  • 옵션 페이지에서 Firefox 언어 설정 가능합니다. (이전에는 언어팩을 설치해야 했습니다.)
  • AV1 video codec에 대한 Windows 재생 지원이 추가되었습니다.
  • WebP image format 지원합니다.
  • [Windows] MSI installer로 Firefox 설치 가능합니다.
  • [Mac] iOS 기기에서 Mac에 접근하기위한 MacOS Handoff 지원합니다.
  • [Linux] 탭 바를 스크롤하여 탭 전환이 가능합니다.

Inspector (for developer)

  • Flexbox 탐색 도구 추가
    Flexbox의 컨테이너를 탐지하여 강조 표시를 하고, Flex 아이템의 크기를 디버깅할 수 있도록 인스펙터 도구가 추가되었습니다.

    • flex 뱃지는 flexbox 컨테이너를 표시할 뿐 아니라, 하위 요소에 대한 세부 정보를 보여주는 페이지 오버레이 활성/비활성 버튼의 역할도 합니다.

  • flex 요소의 크기가 어떻게 결정되었는지에 대한 설명을 시각화합니다.

    [참고] CSS Flexbox Inspector
  • new Changes tab (변경사항 탭) 반영
    인스펙터에서 수정한 모든 CSS 변경사항을 new Chages tab(변경사항 탭)에서 바로 표시합니다.
  • HTML
    • disabled 처리된 HTML 요소(예 : <button><fieldset><input><select>,<textarea> )에 이벤트가 전달됩니다.
  • CSS
    • image-rendering 속성 중 crisp-edges의 벤더 프리픽스(-moz-)가 제거됩니다.
    • break-* 속성이 구현되었으며, page-break-* 속성은 break-* 에 통칭됩니다.
      page-break-* 속성은 인쇄 시 설정한 위치에서 다음 페이지로 넘길 수 있으나,
      break-* 속성은 인쇄 페이지 외에도 화면의 다중 column, context 단위에서 break 지정이 가능합니다.
    • overflow-wrap 속성의 anywhere 값이 구현되었습니다.
    • 다른 브라우저와의 호환성을 위해 몇 가지 새로운 -webkit-appearance 값이 추가되었습니다.
      • meter : 기존의 meterbar를 통칭합니다.
      • progress-bar : 기존의 progressbar를 통칭합니다.
      • textarea : 기존의 textfield-multiline을 통칭합니다.
    • user-select의 동작이 다른 브라우저와 동일하게 변경되었습니다.
      • user-select : all 은 자식 요소에 설정된 user-select: none 의 값을 무시하지 않습니다.
        다음 코드에서 none 텍스트는 선택되지 않습니다. 이전에는 부모 요소에 설정된 값이 자식에게 적용되었습니다.

        <div style="-webkit-user-select: all">All
          <div style="-webkit-user-select: none">None</div>
        </div>
      • contentEditable (편집가능한 요소) 중첩된 non-contenteditable 요소는 이제 선택 가능합니다.
      • user-select는 이제 shadow DOM 내부, 외부에서 일관되게 작동합니다.
      • -moz-text 값이 제거되었습니다.
        [참고] https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
    • CSS 환경 변수 (env())가 구현되었습니다.
  • JavaScript
  • Removal
    • layout.css.shape-outside.enabled 기능이 제거되었습니다.
      shape-outsideshape-marginshape-image-threshold 모두 공식 지원하고 있습니다.
    • user-select 속성의 여러 Firefox 전용 값 (-moz-all-moz-texttri-stateelementelementstoggle)이 제거되었습니다.

출처


0개의 댓글

답글 남기기

아바타 플레이스홀더

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다