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.
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.
<link rel="preload"> and <link rel="modulepreload">. We will pursue a CSS-based solution for the web font use cases. See
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.
(This version is obsolete. Please refer to the latest version)
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.
This proposal is obsolete. Please refer to the new version.
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:
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:
** Not standardized yet!! **
This doc explains descriptors ascent-override, descent-override, line-gap-override and advance-override for CSS @font-face rule.
Usage:
| 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'); |
| WPR_PATH=/path-to-user-home/go/src/github.com/catapult-project/catapult/web_page_replay_go/src/ |
| <!DOCTYPE html> | |
| The middle level frame. | |
| <iframe src="https://jsfiddle.net/own3vqrs/embedded/result/"></iframe> |