Web Platform Features Showcase

A collection of modern web features using CSS, Houdini Paint API, and Web Platform APIs. Examples include layout techniques, custom paint worklets, and browser APIs working together.

CSS Anchor positioning

CSS Anchor Positioning allows elements to be tethered to other elements, with dynamic adjustments based on proximity & overflow.

Read more

CSS Mixins Module

CSS Mixins allow authors to define custom properties that represent a block of styles, which can be applied to other rules.

Read more

CSS Values & Units Level 5

CSS Values and Units Module Level 5 introduces new CSS value types and units, enhancing the expressiveness of CSS.

Read more

CSS Painting API Level 1

The CSS Paint API allows developers to generate an image in JavaScript that can be drawn directly to an element, similar to a CSS gradient or image.

Read more

CSS Properties & Values API

The CSS Properties and Values API allows developers to register custom CSS properties, defining their syntax, initial value, and inheritance behavior.

Read more

CSS Typed Object Model

The CSS Typed Object Model (OM) provides a JavaScript interface to CSS values that is more performant and easier to use than string-based manipulation.

Read more

Document view transitions

CSS View Transitions Level 2 expands the capabilities of smooth transitions between different DOM states, offering more control over animations.

Read more

Custom Elements

Custom Elements allow authors to define their own HTML tags, encapsulating structure and behavior for reusable web components.

Read more

HTML Popover API

The Popover API provides a built-in mechanism for displaying popover content, such as menus, tooltips, and dialogs, without complex JavaScript.

Read more