ep90 Monthly Web 202111

published_at
2021-12-13
guest
@myakura
toc
headings

Theme

第 90 回のテーマは 2021 年 11 月の Monthly Web です。

Show Note

Chrome 動向

Stable: 96

Updates

  • New in Chrome 96 - Chrome Developers
  • What's New In DevTools (Chrome 96) - Chrome Developers
    • https://developer.chrome.com/en/blog/new-in-devtools-96/
    • Preview feature: New CSS Overview panel
    • Rendering tab updates
      • Emulate the CSS prefers-contrast media feature
      • Emulate the Chrome's Auto Dark Theme feature
    • Copy declarations as JavaScript in the Styles pane
    • New Payload tab in the Network panel
    • Improved the display of properties in the Properties pane
    • Console updates
      • Option to hide CORS errors in the Console
      • Proper Intl objects preview and evaluation in the Console
      • Consistent async stack traces
      • Retain the Console sidebar
    • Deprecated Application cache pane in the Application panel
    • [Experimental] New Reporting API pane in the Application panel
  • Chromium Blog: Chrome 97: WebTransport, New Array Static Methods and More
    • https://blog.chromium.org/2021/11/chrome-97-webtransport-new-array-static.html
    • Preparing for a Three Digit Version Number
    • Features in this Release
      • Auto-expand Details Elements
      • Content-Security-Policy Delivery via Response Headers for Dedicated Workers.
      • CSS
        • font-synthesis Property
        • transform: perspective(none)
      • Feature Policy for Keyboard API
      • HTMLScriptElement.supports() Method
      • Late Newline Normalization in Form Submission
      • Standardize Existing Client Hint Naming
      • WebTransport
    • JavaScript
      • Array and TypedArray findLast() and findLastIndex()
    • Deprecations and Removals
      • Remove SDES Key Exchange for WebRTC
      • Remove WebSQL in Third-Party Contexts
      • Remove SDP Plan B
  • What's New In DevTools (Chrome 97) - Chrome Developers
  • Deprecations and removals in Chrome 97 - Chrome Developers
  • Chrome Dev Summit

Intents

V8

Other

Firefox 動向

Stable: 95.0

Updates

Intents

Other

Safari 動向

Stable: 15.1

Updates

  • New WebKit Features in Safari 15
    • https://webkit.org/blog/11989/new-webkit-features-in-safari-15/
    • Web Extensions
    • HTML
      • theme-color
    • CSS
      • aspect-ratio
      • Color Level 4
      • new list-style-type
    • Web Inspector
    • JavaScript and WebAssembly
      • support for top-level await
      • Error.cause
      • private class methods and accessors
      • BigInt64Array and BigUint64Array
    • Web APIs
      • WebGL2
      • Web Share API
      • requestAnimationFrame
      • performance.timeOrigin
    • Media
      • Opus in WebM
      • VP9 and WebM in MSE
      • MediaSession API to Share Play
    • Security and Privacy
      • automatic HTTPS upgrade
      • hide IP from known trackers
      • updates to Private Click Measurement
    • Authentication and Passwords
      • autocomplete=one-time-code
      • apple-otpauth:
      • otpauth QR code
      • Secure login with iCloud Keychain verification codes
    • Payments
      • Payment Request API
  • Release Notes for Safari Technology Preview 134
    • https://webkit.org/blog/12033/release-notes-for-safari-technology-preview-134/
    • CSS
      • Unprefixed -webkit-appearance and added support for the auto value (r283858, r284098)
      • Added support for the x resolution unit outside of image-set (r282396)
      • Added support for text-decoration-skip-ink (r282397)
    • Fonts
      • Added parsing support for font-palette-values (r282806)
      • Added parsing support for font-palette (r282851)
      • Added pushing font-palette-values data into CSSFontSelector (r282838)
      • Added support for CSSFontPaletteValuesRule.name (r283140)
      • Added Web Inspector support for font-palette (r282987)
      • Allowed base-palette can accept "light" or "dark" (r283398)
    • Scrolling
      • Enabled support for ScrollOptions' ScrollBehavior and CSS scroll-behavior properties (r284029)
    • Rendering
      • Enabled 2D canvas color space support on Apple platforms (r283541)
      • Updated converting an SVG image for canvas drawImage to choose an appropriate color space (r283531)
    • Dialog Element
      • The <dialog> element is now enabled by default (r284155), also including:
        • support for the CSS ::backdrop pseudo element
        • support for the top layer
        • <form method="dialog"> support
      • The inert attribute is available for testing behind an experimental flag with the same name
    • WebAssembly
      • Allowed WASM to use up to 4GB (r284330)
      • Implemented the WebAssembly exception handling proposal (r283852)
    • JavaScript
      • Enabled unlinked Baseline JIT for performance (r283139)
    • Web API
      • Enabled BroadcastChannel (r282426)
      • Implemented top-origin and frame-origin partitioning for BroadcastChannel (r282366)
      • Enabled Storage API by default (r284273)
      • Enabled FileSystemAccess and AccessHandle by default (r284131)
      • Implemented FileSystemSyncAccessHandle read() and write() (r284059)
      • Implemented the borderBoxSize and contentBoxSize parts of ResizeObserver (r282441)
      • Implemented CSP script-src-elem, style-src-elem, script-src-attr and style-src-attr directives (r284254)
    • WebRTC
      • Added support for WebRTC media capabilities (r284085, r284236)
      • Changed MediaCapabilities to enqueue a task to resolve promises (r284236)
    • Accessibility
      • Exposed the URL attribute of <video> elements (r283799)
      • Made PDFs loaded via <embed> accessible (r282358)
    • Private Click Measurement
      • Allowed measurement of links in nested, cross-site iframes (r283593)
    • Web Extensions
      • Allowed more directives to be included in the content_security_policy of an extension's manifest, such as the sandbox directive
  • Release Notes for Safari Technology Preview 135
    • https://webkit.org/blog/12040/release-notes-for-safari-technology-preview-135/
    • CSS
      • Media queries affect Cascade Layer order (r284859)
      • Enabled accent-color by default (r284634)
      • Added support for small svw/svh/svmin/svmax, large lvw/lvh/lvmin/lvmax, and dynamic dvw/dvh/dvmin/dvmax viewport units (r284628)
      • Added flex-basis: content support (r284440)
      • Added support for contain: style for counters (r284642, r284755)
      • Added support for ::before and ::after pseudo elements after ::slotted (r284973)
      • Added support for more CSS properties for ::marker (r284519)
      • Allowed :is and :where after all pseudo elements (r285054)
      • Made :-webkit-any() a synonym of :is() (r285032)
    • WebAPI
      • Enabled lazy image loading by default (r284995)
      • Added support for rel="noopener/noreferrer" on <form> elements (r284749)
      • Exposed MediaCapabilities to Workers (r284443)
    • Media
      • Added support for requestVideoFrameCallback API for MediaStreamTrack-based backends (r284528)
  • Release Notes for Safari Technology Preview 136
    • https://webkit.org/blog/12137/release-notes-for-safari-technology-preview-136/
    • CSS
      • Added support for contain: paint (r285583)
      • Added support for the revert-layer value (r285624)
      • Added flex-basis: content support (r285709)
      • Implemented Scroll To Text Fragment directive parsing (r285528)
    • JavaScript
      • Implemented IntlNumberFormat v3 (formatRangeToParts is not implemented yet) (r285418)
      • Implemented Temporal.Instant (r285178)
    • Web API
      • Implemented custom element definition's disable shadow flag (r285740)
    • Media
      • Fixed showing languages and subtitles tracks button and menu for <audio> (r285216)
    • Web Animations
      • Added support for composite operations for software animations (r285397)
    • WebAuthn
      • Implemented add_virtual_authenticator and remove_virtual_authenticator for WebDriver (r285267)
    • Web Extensions
      • Added support for manifest_version 3 and service_worker background scripts, while also supporting the option of using non-persistent background pages
      • Added support for script and style injection via the browser.scripting APIs
      • Added support for dynamic and session rules via the browser.declarativeNetRequest APIs
  • PCM for In-App Direct Response Advertising

Position

Other

Edge 動向

Stable: 96

Updates

Chakra

Other

WHATWG/W3C 動向

TPAC

Draft

Other

TC39 動向

Meeting

Proposals Diff

New Proposals

Other

IETF 動向

WG

Other

CDN 動向

Cloudflare

Fastly

Other

セキュリティ動向

周辺動向

  • Sorry Safari team - Modern Web Development with Chrome by Paul Kinlan
    • https://paul.kinlan.me/sorry-safari-team/
    • Chrome Dev Summit で Compat 2021 の成果報告があった
    • 3 ブラウザそれぞれでスコアが向上していたが、 Safari だけ点数が低かった
      • 実は数ヶ月前の Safari TP でテストしていたことが判明
      • スコアの元になった web-platform-tests はインフラの都合上、新しい Safari TP を入れられていなかった
    • public shaming として扱われて燃えてしまい、 Paul Kinlan が謝罪
  • Top web developer pain points in 2021 - Modern Web Development with Chrome by Paul Kinlan
    • https://paul.kinlan.me/top-web-developer-pain-points-in-2021/
    • 米国、イギリスとインドの開発者に、 Web 開発の難しいところについて 3 ヶ月ごとにアンケートをとった
    • 上位 5 つの変化はそこまでなかった
      • Keeping up with changes to the web platform/web standards
      • Keeping up with a large number of new and existing tools or frameworks
      • Making a design/experience work the same across browsers
      • Testing across browsers
      • Understanding and implementing security measures
  • 2021 Web Almanac
  • Open Props: sub-atomic styles

イベント

Wrap Up

  • chrome
    • 96
      • emulate version 100
      • bfcache default on desktop
    • 97
      • WebTransport
      • scriptElement.support()
      • Array.findLast(), Array.findLastIndex()
    • Prototype
      • capability delegation
      • input element showPicker()
      • blocking=rendering 属性
      • NFC.makeReadonly()
      • Set-Cookie の Domain="" を許容
    • Ship
      • Request Origin / Redirect Chain
      • Private Network Access for Preflight
      • Cascade Layer
      • Sec-CH-UA-Full-Version-List
    • CDS
      • animation smoothness metrics
      • resposiveness metrics
    • web.dev
      • UI fund
    • Search Central
      • Page Experience ranking to desktop rollout in Feb 2022
    • Other
      • Bento.js (Bento AMP)
      • BlinkOn 15
  • Firefox
    • 94
      • self.structuredClone()
      • scriptElement.supoorts()
    • 95
      • site isolation rollout
      • crypto.randomUUID()
      • UA sniffing for slack.com
    • Ship
      • SameSite=Lax by default
  • Safari
    • 15.0
      • <meta name="theme-color">
      • aspect-ratio
      • top-level await
      • Error.cause
      • Private Class methods/accessors
      • WebGL2
      • autocomplete="one-time-code"
    • TP 134
      • text-decoration-skip-ink
      • enable <dialog> by default
      • inert attribute behind flag
      • enable BroadCastChannel by default
      • enable Storage API + FileSystemAccess + AccessHandle by default
      • CSP script-src-elem, script-src-attr, etc.
    • TP 135
      • enable accent-color by default
      • CSS small/large/dynamic viewport units
      • enable image lazy-loading by default
    • TP 136
      • contain: paint
      • Scroll To Text Fragment parsing
      • manifest_version 3
    • Other
      • enable :focus-visible by default
  • Edge
    • Developer Support Internet team internship
    • Recreate My Problem ボタンでバグレポート
  • WHATWG/W3C
    • TPAC2021
      • Sate Of CSS 2021
      • Making WebViews Work for the Web
      • Cognitive Accessibility Task Force (COGA)
    • XS-Leaks summit
    • Aria Recommendation
    • WHATWG New Living Standards
      • WebIDL
      • Test Utils
      • WebSocket
      • File System
    • TAG Election
    • Interoperability Remedies Community Group
  • TC39
    • Error Cause stage 4
    • tc39/proposal-function-helpers
    • tc39/proposal-destructuring-private
    • tc39/proposal-regexp-modifiers
  • IETF
    • Publication request: draft-ietf-httpbis-targeted-cache-control-02
    • Publication request: draft-ietf-httpbis-priority-09
    • Working Group Last Call: Digest Fields
    • Bundle Preload と WebBundle のマージ
    • Secure Credential Transfer (iCloud のような鍵共有)
    • Avoiding Internet Centralization
  • CDN
    • Cloudflare
      • Mirai による 2Tbps の DDoS
    • Fastly
      • log4j の脆弱性
  • 周辺
    • CDS の Compat2021 で Safari TP が古かったことを Paul Kinlan が謝罪
    • Web Almanac 2021
    • Open Props (css variables での css framework)