bramus

{
  description: 'Regular Property that does not inherit',
  result: 295278.9002767051
}
{
  description: 'Regular Property that does inherit (color)',
  result: 278.9483553463621
}
{
  description: 'Regular Property that does inherit (direction)',

bramus

import PerfTestRunner from '/lib/PerfTestRunner.js';
import { makeTree } from '/lib/DOM.js';
import { setCSS, resetCSS } from '/lib/CSS.js';

const $container = document.querySelector('#container');

makeTree($container, 1000, `<div>
  <div class="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"></div>
  <div class="a"></div>
</div>`);

bramus

const extractLayersFromCssRules = (cssRules) => {
    if (!cssRules || !cssRules.length) return [];
	return [...cssRules].filter((cssRule) => {
			return (cssRule instanceof CSSStyleRule) || (cssRule instanceof CSSLayerBlockRule);
		})
		.flatMap((cssRule) => {
			if (cssRule instanceof CSSLayerBlockRule) {
				return [cssRule.name];
			} else {
                return extractLayersFromCssRules(cssRule.cssRules);

bramus

This is a bit of controversial idea that has been lingering in the back of my mind. Basically, I’ve seen the need for authors to configure some things on a page, and it would be nice if they could do that from within CSS.

For example, MPA View Transitions we discussed yesterday, or other things that typically now go into a meta tag in the markup. Beyond VTs, I am thinking of the switch to control the viewport resizing behavior when the virtual keyboard gets shown (see https://drafts.csswg.org/css-viewport/#interactive-widget-section)

I haven’t thought this entirely through (insert chuckle by some of you here) but am thinking of an @config at-rule for that. In it you could put some things like the interactive-widget configuration.

@config {
  interactive-widget: resize-viewport;
}

bramus

(CSS WG Issue: w3c/csswg-drafts#7475)

There is an issue is about position: fixed and how it works, specifically about to what a PosFixed element is laid out against.

Right now, browsers use the Layout Viewport as the Containing Block for PosFixed elements.

Authors use this to position something at the bottom of the page, such as a footer bar on a shopping site or a floating action button.

On mobile this becomes a bit of a problem when the Virtual Keyboard is revealed. Right now, all mobile browsers – except firefox – do not resize the layout viewport when the VK gets shown. Instead, they resize the Visual Viewport (and often shift the Layout Viewport along with that up a bit to keep stuff in view).

bramus

With Scroll-Driven Animations [^1] we have defined some new types of timelines which authors can use to run an animation on. Besides the existing DocumentTimeline, authors can now use a ScrollTimeline to animate based on a scroller’s scroll offset or ViewTimeline to animate as an element crosses its scrollport.

I’ve added this topic to get more ideas around new potential timelines. For example, one type of timeline we at Google discussed was a MediaPlaybackTimeline, where you could sync up animations to a media element – <audio> or <video> – play position.

video {
  timeline: --video;
}

bramus

An issue we’ve heard from authors is that they want to know what scrollbars are doing and respond to that.

There’s a bunch of issues that might go hand in hand to actually solve this:

1. [^1] Expose an env() variable that allows you to get the scrollbar-size. This is a fixed value, independent of whether a scrollbar is shown or not – it just gives you back the size
2. [^2] A way to query which type of scrollbars are being used on the page.
3. A container state query to be able to know if something is overflowing or not

If you combine these three, authors can do things like:

bramus

CSS sibling-count(), sibling-index(), and child-count() current workarounds

CSSWG Issue: w3c/csswg-drafts#4559

Demo: https://codepen.io/bramus/pen/oNVqZZq/546b6c9793668ad461329fb34732657f?editors=0110

sibling-index()

@property --sibling-index {

bramus

$scrollContainer.addEventListener('wheel', (e) => {
    e.preventDefault();
    $scrollContainer.scrollLeft += e.deltaY;
});

bramus

// @source https://codepen.io/thenutz/pen/VwYeYEE
const slider = document.querySelector(".cards");
let isDown = false;
let startX;
let scrollLeft;

slider.addEventListener("pointerdown", (e) => {
	isDown = true;
	slider.classList.add("active");
	startX = e.pageX - slider.offsetLeft;