suchen
HeimWeb-FrontendHTML-TutorialChrome 49 Beta:CSS 自定义属性,使用 service workers 进行后台同步以及新的 ES2015 特性_html/css_WEB-ITnose

英文原文: Chrome 49 Beta: CSS custom properties, background sync with service workers, and new ES2015 features

作者:Josh Karlin,Syncing Samurai

除非另外注明,下面介绍的更新适用于最新 Chrome Beta 版(Android、Chrome OS、Linux、Mac 和 Windows)。

CSS 自定义属性

现代网站的 CSS 文件中常常含有重复的值,例如,在整个页面中重复使用一个配色方案中的少数几种颜色。更改此数据非常繁琐且容易出错,因为它分散在一个或多个 CSS 文件中。 为改善这种情况,Chrome 现在支持 CSS 自定义属性 ,允许开发者无需使用外部框架就可以在 CSS 中定义属性变量。然后,开发者可以使用 var() 函数 在文档中的任意位置 引用这些自定义属性 。

更改自定义属性可以更新网站中的多个组件

CSS 自定义属性也可以跨 shadow root 继承,因此,Web 组件可以提供“样式 API”,从而可以在不知道组件内容的情况下调整组件并设置主题。Polymer 库利用此平台功能 简化定制组件 。

使用 service workers 进行后台同步

以前,在通过网络发送更新之前,如果用户没有停留在网站上,网站可能会丢失本地修改或不同步。例如,如果用户点击“发送”并迅速离开,电子邮件网页客户端可能会丢失发送中的消息。新的 Background Sync API 通过在设备下一次连接到网络(即使并未打开该网站)时 ,由 service worker 执行 一次性同步用户的本地更改 来提升网络可靠性。

改进的 ECMAScript 2015 支持

ES2015 规范 (ES6) 是对 JavaScript 进行的重大更新,使开发者可以编写更清晰易读、更强大、更省内存的应用逻辑。 最新版本的 Chrome V8 引擎 支持 91% 的 JavaScript ES2015 功能 。现在,从数组和对象提取数据时或 设置函数参数默认值 时,开发者可以使用 解构 和 默认参数 来避免样板文件代码。 代理对象 和 Reflect API 可以定制以前隐藏的对象行为,如属性查找和分配。最新版本的 Chrome 还可以构建代码块级结构,如在 strict mode 之外可用的  class 和 let 。

Keygen 和 application/x-x509-user-cert

元素 用于生成密钥对,后者是 HTML 表单的一部分。尽管这可以用于增强用户安全性,但 和通过 MIME 类型 application/x-x509-user-cert 发送的用户证书也可能被人利用来中断用户的安全通信,干扰其设备的运行或在未经用户同意的情况下跟踪用户。今后, 将默认返回一个空字符串,并将不再自动下载和安装通过 MIME 类型 application/x-x509-user-cert 发送的用户证书。

此版本中的其他特性

  • 经用户同意,网站可以通过使用新的 MediaRecorder API 录制音频和视频 ,无需依靠插件。

  • 开发者现在可以使用 CSS font-display 控制字体加载方式 ,从而提升页面加载速度。

  • 现在,网站可以检查哪个 service worker 客户端发起了 fetch 请求,并使用 FetchEvent.clientID 属性 返回专用响应。

  • 对于不连续的滚动设备,如鼠标滚轮,Chrome 现在 以动画方式呈现滚动 ,从而可以实现 更顺畅的用户体验 。

  • Chrome 现在更加严格地 保护安全的 Cookie ,并允许开发者使用 Cookie 前缀 标识安全的 Cookie。

  • 现在,网站可以 使用 disableRemotePlayback 属性 (作为 Remote Playback API 一部分)防止远程播放媒体。

  • Event.timeStamp 现在使用 DOMHighResTimeStamp 取代 DOMTimeStamp ,从而可以实现高精度的滚动延迟和 指针速度测量 。

  • Promise 拒绝处理功能现在可以使用 UnhandledRejection 和 RejectionHandled 事件进行跟踪 。

  • 现在,通过使用 URLSearchParams ,开发者可以更轻松地与 URL 的 GET 参数 交互。

  • WebAudio API 现在支持 IIR Filters 、 OfflineAudioContext.suspend() 和 resume() ,以及 DecodeAudioData 中的 promise。

  • WindowClient.navigate() 允许  service worker 将受控窗口定位 到新的 URL。

  • 网站可以检测用户是否已请求减少数据使用,并通过选择 Save-Data 头字段 以更轻快便捷地作出响应。

细微更改

  • Chrome 的 内容安全政策 现在允许“script-src http:”与 HTTP 和 HTTPS 匹配,从而防止开发者无意中拒绝安全资源。
  • Fetch API 的 Request.mode 枚举现在 支持导航模式 ,从而更好地符合规范要求。

  • 现在,匹配属性选择器时,开发者可以选择 忽略大小写 。

  • 现在,开发者可以创建不公开的弹出窗口,页面使用 ‘rel=noopener’ 打开此窗口。

  • addEventListener() 和 removeEventListener() 现在需要它们的前两个参数,同时使用字典语法指定“capture”选项,从而更好地符合规范要求和提高灵活性。

  • Chromium 现在支持 TLS 中的标准版 ChaCha-Poly1305 加密套件 。

  • Navigator.getStorageUpdates() 已删除,因为它不再存在于 Navigator 规范 中。

  • MouseEvent.webkitMovementX/Y 已删除,代之以 无前缀版本 。

  • initTouchEvent 已弃用,代之以 TouchEvent 构造函数 ,以更好地符合规范要求,并将在 Chrome 53 中一起删除。

  • Object.observe() 已弃用,因为它 不再适应标准化的趋势要求 ,并将在未来的版本中删除。

  • getComputedStyle(e).cssX 行为已弃用,因为它并非正式的 规范 的组成部分。

  • 某些 RTCPeerConnection 旧有方法的非标准用法已弃用,以实现基于 promise 的 WebRTC 规范 实施。

  • Document.defaultCharset 已弃用,以更好地符合规范要求。

Post Views: 1

除非特别声明,此文章内容采用 知识共享署名 3.0 许可,代码示例采用 Apache 2.0 许可。更多细节请查看我们的 服务条款 。

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Was ist der Zweck des & lt; datalist & gt; Element?Was ist der Zweck des & lt; datalist & gt; Element?Mar 21, 2025 pm 12:33 PM

Der Artikel erörtert den HTML & lt; Datalist & gt; Element, das die Formulare verbessert, indem automatische Vorschläge bereitgestellt, die Benutzererfahrung verbessert und Fehler reduziert werden.Character Count: 159

Was ist der Zweck des & lt; Fortschritts & gt; Element?Was ist der Zweck des & lt; Fortschritts & gt; Element?Mar 21, 2025 pm 12:34 PM

Der Artikel erörtert den HTML & lt; Progress & gt; Element, Absicht, Styling und Unterschiede vom & lt; Meter & gt; Element. Das Hauptaugenmerk liegt auf der Verwendung & lt; Fortschritt & gt; Für Aufgabenabschluss und & lt; Meter & gt; für stati

Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?Wie verwende ich HTML5 -Formularvalidierungsattribute, um die Benutzereingabe zu validieren?Mar 17, 2025 pm 12:27 PM

In dem Artikel werden unter Verwendung von HTML5 -Formularvalidierungsattributen wie Erforderlich, Muster, Min, MAX und Längengrenzen erörtert, um die Benutzereingabe direkt im Browser zu validieren.

Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?Was ist der Zweck des & lt; iframe & gt; Etikett? Was sind die Sicherheitsüberlegungen bei der Verwendung?Mar 20, 2025 pm 06:05 PM

Der Artikel erörtert das & lt; iframe & gt; Der Zweck von Tag, externe Inhalte in Webseiten, seine gemeinsamen Verwendungen, Sicherheitsrisiken und Alternativen wie Objekt -Tags und APIs einzubetten.

Was ist der Zweck des & lt; Meter & gt; Element?Was ist der Zweck des & lt; Meter & gt; Element?Mar 21, 2025 pm 12:35 PM

Der Artikel erörtert das HTML & lt; Meter & gt; Element, verwendet zur Anzeige von Skalar- oder Bruchwerten innerhalb eines Bereichs und seine gemeinsamen Anwendungen in der Webentwicklung. Es differenziert & lt; Meter & gt; von & lt; Fortschritt & gt; und Ex

Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?Was ist das Ansichtsfenster -Meta -Tag? Warum ist es wichtig für reaktionsschnelles Design?Mar 20, 2025 pm 05:56 PM

In dem Artikel wird das Ansichtsfenster -Meta -Tag erörtert, das für das reaktionsschnelle Webdesign auf mobilen Geräten unerlässlich ist. Es wird erläutert, wie die ordnungsgemäße Verwendung eine optimale Skalierung von Inhalten und Benutzerinteraktion gewährleistet, während Missbrauch zu Design- und Zugänglichkeitsproblemen führen kann.

Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?Was sind die besten Praktiken für die Kompatibilität des Cross-Browsers in HTML5?Mar 17, 2025 pm 12:20 PM

In Artikel werden Best Practices zur Gewährleistung der HTML5-Cross-Browser-Kompatibilität erörtert und sich auf die Erkennung von Merkmalen, die progressive Verbesserung und die Testmethoden konzentriert.

Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?Wie benutze ich die HTML5 & lt; Zeit & gt; Element, um Daten und Zeiten semantisch darzustellen?Mar 12, 2025 pm 04:05 PM

Dieser Artikel erklärt den HTML5 & lt; Time & gt; Element für semantische Datum/Uhrzeit. Es betont die Wichtigkeit des DateTime-Attributs für die Maschinenlesbarkeit (ISO 8601-Format) neben menschenlesbarem Text, das Zubehör steigert

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heiße Werkzeuge

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

mPDF

mPDF

mPDF ist eine PHP-Bibliothek, die PDF-Dateien aus UTF-8-codiertem HTML generieren kann. Der ursprüngliche Autor, Ian Back, hat mPDF geschrieben, um PDF-Dateien „on the fly“ von seiner Website auszugeben und verschiedene Sprachen zu verarbeiten. Es ist langsamer und erzeugt bei der Verwendung von Unicode-Schriftarten größere Dateien als Originalskripte wie HTML2FPDF, unterstützt aber CSS-Stile usw. und verfügt über viele Verbesserungen. Unterstützt fast alle Sprachen, einschließlich RTL (Arabisch und Hebräisch) und CJK (Chinesisch, Japanisch und Koreanisch). Unterstützt verschachtelte Elemente auf Blockebene (wie P, DIV),

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

Herunterladen der Mac-Version des Atom-Editors

Herunterladen der Mac-Version des Atom-Editors

Der beliebteste Open-Source-Editor

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung