Skip to content

Instantly share code, notes, and snippets.

View bramus's full-sized avatar

Bramus bramus

View GitHub Profile
@bramus
bramus / get-layers.js
Last active September 20, 2023 22:16
Get all Cascade Layers on a page
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
bramus / at-config.md
Created July 20, 2023 20:54
CSS `@config`

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
bramus / reinterpret-posfixed.md
Created July 20, 2023 20:51
Reinterpret `position: fixed` (PosFixed vs. Viewport)

(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
bramus / animation-timelines.md
Last active July 20, 2023 21:04
Animation Timelines

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
bramus / css-scrollbars.md
Created July 20, 2023 20:44
CSS Scrollbars

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
bramus / css.md
Last active February 1, 2024 09:36
CSS `sibling-count()`, `sibling-index()`, and `child-count()` current workarounds
@bramus
bramus / vertical-to-horizontal-scroll.js
Created June 16, 2023 08:51
vertical-to-horizontal-scroll.js
$scrollContainer.addEventListener('wheel', (e) => {
e.preventDefault();
$scrollContainer.scrollLeft += e.deltaY;
});
@bramus
bramus / click-and-drag-to-scroll.js
Last active June 16, 2023 07:50
click-and-drag-to-scroll.js
// @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;
@bramus
bramus / article.html
Last active May 16, 2023 09:13
Scroll-Driven Animations Outdated Article/Demo Notice
<p>UPDATE: The Scroll-Linked Animations Specification and its proposed syntax have undergone a major rewrite since writing this post. The spec also got renamed to Scroll-Driven Animations. This post details an older version of the syntax and has not been updated to reflect these changes.</p>
<p>To learn more about the new syntax, visit <a href="https://scroll-driven-animations.style/" target="_top">https://scroll-driven-animations.style/</a>.</p>
@bramus
bramus / bookmarklet.md
Last active August 3, 2023 16:56
Mastodon User Page Bookmarklet