CSS Observer Module level 1

Fantasized Draft, 28 March 2019Anchor Link

This version:

https://uga.dev/documents/fantasized-specs/css-observer

Editors:

Hiroya Uga

Issue Tracking:

GitHub Issues

AbstractAnchor Link

This module introduces the ability to observe the status of elements, with new css properties and pseudo classes. For example, entering and leaving of elements the screen view area by scroll, and changing the display property of elements. The define of these are approach to enable interaction implementation without JavaScript.

1. IntroductionAnchor Link

Sometimes in web pages, elements are required a change style when enters the screen by scroll. For example, elements is observed by such as the Intersection Observer API, and change style by manipulating the attributes of the elements entered on the screen is adopted. In that case, may be used CSS Transitions, CSS Animations, and requestAnimationFrame often.

This module realizes such an expression only with CSS, without processing of start and end of observer by JavaScript.

2. ObserversAnchor Link

2.1. The observe-type propertyAnchor Link

none

The user agent do not observe element.

view

The user agent observe entry and exit of elements in all directions.

view-in

The user agent observe entry of elements in all directions.

view-out

The user agent observe exit of elements in all directions.

view-*

This asterisk of notation replaced the move keyword(ex. in, out). This The user agent observe entry or exit elements in all directions.

view-*-in

This asterisk of notation replaced the direction keyword(ex. top, right, bottom, left). This The user agent observe entry of elements in instructed directions.

view-*-out

This asterisk of notation replaced the direction keyword(ex. top, right, bottom, left). The user agent observe exit of elements in instructed directions.

display

The user agent observe css display property of elements. Communicate the CSSOM of change after ​​to the user agent, before properties change from none to the values ​​that form box models. This spec is to support CSS transition animation work without requestAnimationFrame, even if display property changes from none to block at same time.

function sample() {
  target.style.display = 'none';
  target.style.height = 0;

  button.addEventListener('click', function () {
    target.style.display = 'block';

    // requestAnimationFrame(() => {
    target.style.height = '100px';
    // });
  });
}

a div {
  display: none;
  height: 0;
  transition: 0.2s height ease-out;
  observe: display; /* The user agent is observing change of display property. */
}

a:hover div,
a:focus div {
  display: block;
  height: 100px; /* CSS Transitions work because the user agent is known that height of this element is 0. */
}

<single-observe-property> = all | <custom-ident>;

A value of none means that no property will transition. Otherwise, a list of properties to be transitioned, or the keyword all which indicates that all properties are to be transitioned, is given.

2.2. The observed-wrapper propertyAnchor Link

The element with view-* in observe-type indicates the direction in which the intersection will be monitored.
By default, observed-wrapper: all is specified for document.scrollingElement, and the default value for other elements is none.

none

The user agent do not observe element.

top

The user agent monitors elements with observe-type of view-* to see if they intersect on the top.

right

The user agent monitors elements with observe-type of view-* to see if they intersect on the right.

left

The user agent monitors elements with observe-type of view-* to see if they intersect on the left.

bottom

The user agent monitors elements with observe-type of view-* to see if they intersect on the bottom.

vertical

The user agent monitors elements with observe-type of view-* to see if they intersect on the vertical direction.

horizontal

The user agent monitors elements with observe-type of view-* to see if they intersect on the horizontal direction.

all

The user agent monitors elements with observe-type of view-* to see if they intersect on all direction.

2.3. The observe-disconect propertyAnchor Link

Specifies whether to continue monitoring after the rule specified in observe-type is met.

3. SelectorsAnchor Link

3.1. Pseudo-classesAnchor Link

4. UsegeAnchor Link

div {
  observe: view-top once;
  transition: 0.2s opacity ease-out;
  opacity: 1; /* For not support browsers */
}

div:view-in {
  opacity: 1; /* In the screen */
}

div:view-out {
  opacity: 0; /* Out of screen */
}