DOCSEARCHbyAlgolia
Submit Docs

W3C CSS Working Group Drafts

repository·main·Indexed 26 days ago

https://github.com/w3c/csswg-drafts

A repository containing CSS Working Group draft specifications and utility tools. It includes documentation for CSS properties like overscroll-behavior, specifications for CSS Scrollbars and CSS Table Module Level 3, and various build scripts for generating SVG color diagrams (Oklab, Jzazbz), converting Markdown to HTML, and managing specification indices.

Tokens
37.1K
Snippets
90
Records
205
Agent score
89%

What's inside w3c-csswg-drafts

  1. Overview of CSS Image Animation

    main
    The CSS Image Animation proposal aims to provide a declarative syntax for developers to enable or disable the animation of images (such as GIF, APNG, and WebP) directly via CSS. This allows for fine-grained control over playback experiences, such as starting an animation paused and playing it on hover, or respecting user preferences like prefers-reduced-motion for specific decorative or UI images.

  3. Overview of CSS Table Module Level 3

    main
    The CSS Table Module Level 3 is a draft specification addressing several pending issues and enhancements to the CSS Table model. It focuses on improving table behavior regarding repeating headers/footers, rowspanning with border-collapse, row-group sizing, and percentage resolution in generated cells.

  4. Overview of CSS Gap Decorations

    main
    CSS Gap Decorations is a proposed extension to CSS that allows developers to draw rules (lines or decorations) within the gaps of container layouts like grid, flex, and grid-lanes. This feature aims to bring functionality similar to CSS multi-column column-rule properties to other layout models, providing a more ergonomic way to handle separators and dividers without manual workarounds.

  5. Understand Scroll-driven Animations

    main
    Scroll-driven animations allow you to link animation progress to scroll position rather than a wall-clock timer. This is achieved by using new AnimationTimeline implementations: ScrollTimeline and ViewTimeline. These APIs work with existing Web Animations and CSS Animations, enabling smoother, more performant animations that can often run off the main thread.

  6. Use `env(preferred-text-scale)` to respect user text scale settings

    main
    The proposed env(preferred-text-scale) CSS environment variable provides authors with access to the user's system font scale factor. This allows developers to adjust website layouts to accommodate increased text sizes without forcing a full page zoom (which scales all elements, including non-text elements) or breaking existing layouts. This is particularly useful for mobile web content and content rendered within app Web Views where standard browser zoom controls may be unavailable.

  7. Understand the Spatial Navigation Processing Model

    main

    When spatial navigation is active, pressing an arrow key moves focus to the best target in that direction or scrolls the container if no target is found.

    The search process:

    1. The User Agent searches for visible and focusable items in the requested direction within the current spatial navigation focus container.
    2. If a target is found, focus moves there.
    3. If no target is found, the User Agent attempts to scroll the current container in that direction.
    4. If the container cannot be scrolled (e.g., it is not scrollable or is at its limit), the User Agent moves up the ancestry chain to the next spatial navigation focus container and repeats the process.
    5. This continues until focus is moved, a scroll occurs, or the root element is reached.

    Focus Containers: By default, the root element, scrollable elements, and iframes act as containers. You can define custom containers using the spatial-navigation-contain CSS property.

  8. Understand Scroll-driven Animation Timelines

    main

    Scroll-driven animations use timelines to control the progress of an animation based on scroll position rather than time. The specification introduces two primary types of timelines:

    1. ScrollTimeline: Used to link animation progress to the scroll progress of a specific scroller.
    2. ViewTimeline: Used to link animation progress to an element's visibility/progress as it passes through a scrollport (e.g., for reveal effects).

    These timelines integrate with the Web Animations API and can be used in conjunction with the Houdini Animation Worklet for complex, off-thread animations.

  9. Goals of CSS Gap Decorations

    main

    The primary objectives for the CSS Gap Decorations specification are:

    • Extend column rule properties: Apply existing column rule logic to grid, flex, and grid-lanes layouts.
    • Introduce row-direction decorations: Enable gap decorations that run in the row direction on container layouts.
    • Support varying decorations: Allow gap decorations to change appearance over the container (e.g., for alternating row separators).

  10. Understand CSS Nesting proposal options

    main

    The CSS Working Group is evaluating several different syntax proposals for CSS Nesting. These proposals differ primarily in how they handle the nesting context, the requirement of the & (nesting selector), and how they distinguish between property declarations and nested style rules.

    Key proposal categories include:

    1. Current spec approach: Every nested rule must be unambiguous, requiring either an & prefix or an @nest rule. If using a selector list, every selector must start with &.
    2. Parser switch approach: A parsing state is triggered (e.g., by an at-rule or a specific selector type), after which subsequent rules are assumed to be nested. This aims to mimic Sass/Less-style nesting.
    3. Non-letter start approach: Nested rules must start with something other than an identifier (e.g., & div or :is(div)). This avoids ambiguity with properties without requiring a formal parser switch.
    4. Postfix approach: Nested rules are contained in a block following the main rule. This can be implemented via an @nest rule, a special ASCII selector (like &&), or bare braces.
    5. Top-level nesting container: Uses a top-level @nest rule that contains a block of nested rules. This separates properties from rules and avoids the need for & in most nested selectors.

  12. Understand Element-Scoped View Transitions scoping

    main

    Element-scoped view transitions allow developers to isolate view transitions to a specific subtree rather than the entire document. This solves issues where global document-level transitions interfere with the z-index order of overlaid elements (like tooltips or menus) that are not part of the transition.

    By using an element as a scope, the ::view-transition pseudo-element tree is painted on top of the scope regardless of the z-index of other elements in the document, providing better modularity and composition.