Xiaocheng Hu xiaochengh

Explainer: Font Metrics Override Descriptors

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

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

Basic usage:

Explainer: Font Metrics Override Descriptors

** Not standardized yet!! **

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

Usage:

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:

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)¹. 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:

Block rendering on a critical web font to prevent layout shifting or a flash of invisible/unstyled text (see [here](https://gist.github.com/xiaochengh/c29c6246ead0cbb72708f10baa89bde4#eliminate-layout-shifting-for-cri

(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)¹. 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

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
- HTML issue#7896
- CSSWG issue#7271

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)¹. 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 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.

	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');

	<!DOCTYPE html>
	The middle level frame.
	<iframe src="https://jsfiddle.net/own3vqrs/embedded/result/"></iframe>