3.0.0-alpha.10 Alpha
Style Utilities

Reduce FOUCE

Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.

No class is needed to use this utility, it will be applied automatically as long as it its CSS is included.

Here is a comparison of the loading experience with and without this utility, with a simulated slow loading time:

How does it work?

The utility consists of a timeout (2s by default) and a fade duration (200ms by default).

An element is considered ready when both of these are true:

  1. Either It has been registered or has a did-ssr attribute (indicating it was pre-rendered)
  2. If it’s a Web Awesome component, its contents are also ready

Customization

You can use the following CSS variables to customize the behavior:

Variable Description Default
--wa-fouce-fade The transition duration for the fade effect. 200ms
--wa-fouce-timeout The timeout after which elements will appear even if not registered 2s

The fade duration cannot be longer than the timeout. This means that you can disable FOUCE reduction on an element by setting --wa-fouce-timeout: 0s.

For example, if instead of did-ssr you used an ssr attribute to mark elements that were pre-rendered, you can do this to get them to appear immediately:

[ssr] {
  --wa-fouce-timeout: 0s;
}

You can also opt-out from FOUCE reduction for an element and its contents by adding the .wa-fouce-off class to it. Applying this class to the root element will disable the utility for the entire page.

Opting In

If you want to use this utility only without all others, you can include the following CSS file from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.10/dist/styles/utilities/fouce.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.10/dist/styles/utilities/fouce.css');

Want them all? Follow the instructions on the Utilities overview page to get all Web Awesome utilities.

    No results