Skip to content

Instantly share code, notes, and snippets.

Avatar

Xiaocheng Hu xiaochengh

  • Google
  • California, US
View GitHub Profile
@xiaochengh
xiaochengh / extension.md
Last active Feb 2, 2022
Extension: `DocumentOrShadowRoot.getCascadeLayers()`
View extension.md

This proposal extends the DocumentOrShadowRoot mixin with a new method getCascadeLayers(), which returns the names of all the CSS cascade layers defined in the tree scope, sorted by the layer ordering.

Motivation

DocumentOrShadowRoot.getCascadeLayers() allows browser DevTools to present a visualization of all layers, for example:

Without this extension, DevTools have to manually collect the @layer rules from the stylesheets and reconstruct the full layer names and the sorted layer ordering.

View proposal-v3.md

Updates

  • May 2022: The attribute has been removed from <link rel="preload"> and <link rel="modulepreload">. We will pursue a CSS-based solution for the web font use cases. See

Explainer

All current browsers already have a render-blocking mechanism: after navigation, the user agent will not render any pixel to the screen before all stylesheets and synchronous scripts in <head> are loaded and evaluated (or a UA-defined timeout is reached)1. This prevents a Flash of Unstyled Contents (FOUC) and ensures critical scripts (like framework code) are executed, so that the page is usable after the first rendering cycle.

@xiaochengh
xiaochengh / proposal.md
Last active Dec 1, 2021
Feature proposal: explicit render-blocking link resources and scripts using the `blocking` attribute
View proposal.md

(This version is obsolete. Please refer to the latest version)

Explainer

All current browsers already have a render-blocking mechanism: after navigation, the user agent will not render any pixel to the screen before all stylesheets and synchronous scripts in <head> are loaded and evaluated (or a UA-defined timeout is reached)1. This prevents a Flash of Unstyled Contents (FOUC) and ensures critical scripts (like framework code) are executed, so that the page is usable after the first rendering cycle.

In this proposal, we extend the above idea and propose a new attribute blocking that can be added to <link> and <script> elements in <head>. For now, we would only allow one value blocking="render" to support the most demanding use cases, but we would also like to keep the syntax open for future extensions.

Use cases

@xiaochengh
xiaochengh / proposal.md
Last active Nov 13, 2021
(Obsolete) Feature proposal: `renderblocking` attribute on <link> and <script> elements
View proposal.md

This proposal is obsolete. Please refer to the new version.

Explainer

All current browsers have a render-blocking mechanism: after navigation, the user agent will not render any pixel to the screen before all stylesheets and synchronous scripts in <head> are loaded and evaluated (or a UA-defined timeout is reached)1. This prevents a Flash of Unstyled Contents (FOUC) and ensures critical scripts (like framework code) are executed, so that the page is usable after the first rendering cycle.

This proposal extends the above idea and proposes a new attribute renderblocking that can be added to <link> and <script> elements in <head> to support more use cases:

@xiaochengh
xiaochengh / cascade-layer.md
Last active Dec 8, 2021
CSS cascade layer explainer
View cascade-layer.md

Use case: Set base style with a 3rd party library, and then override some style.

With cascade layers (spec), this can be done by simply putting 3rd party rules and author's own rules in different layers, so that author's own rules have higher priority than the 3rd party library.

There is no need to tweak selector specificity or source ordering.

3rd party style library:

@xiaochengh
xiaochengh / explainer.md
Last active Mar 10, 2021
Explainer: Font Metrics Override Descriptors
View explainer.md

Explainer: Font Metrics Override Descriptors

** Not standardized yet!! **

Spec

This doc explains descriptors ascent-override, descent-override, line-gap-override and advance-override for CSS @font-face rule.

Usage:

@xiaochengh
xiaochengh / explainer.md
Last active Sep 19, 2021
Explainer: Font Metrics Override Descriptors
View explainer.md

Explainer: Font Metrics Override Descriptors

(A newer version is at here, where a new descriptor advance-override is added)

Spec

This doc explains descriptors ascent-override, descent-override and line-gap-override for CSS @font-face rule.

Basic usage:

@xiaochengh
xiaochengh / cls_font_nofont_hack.js
Last active Sep 4, 2020
Demo: Override fallback font metrics to reduce CLS
View cls_font_nofont_hack.js
const puppeteer = require('puppeteer');
const fs = require('fs');
const fsExtra = require('fs-extra')
const mustache = require('mustache')
const atob = require('atob');
const btoa = require('btoa');
let REPEAT = 10;
let TEMPLATE = fs.readFileSync('template-hacked.html', 'utf8');
@xiaochengh
xiaochengh / .env.example
Last active Aug 24, 2020
Analyze CLS caused by web fonts
View .env.example
WPR_PATH=/path-to-user-home/go/src/github.com/catapult-project/catapult/web_page_replay_go/src/
View middle-level.html
<!DOCTYPE html>
The middle level frame.
<iframe src="https://jsfiddle.net/own3vqrs/embedded/result/"></iframe>