← all categories

category

CSS Visual

Corner-shape, colour functions, dynamic-range-limit, accent-color, caret-, paint, image, table borders.

22 of 22 demos built, across 14 releases.

Chrome 152 (1)

  1. Relative Alpha Colors (CSS Color 5 alpha() function)

    Relative alpha colors refer to an origin color, and only change the alpha channel. The meaning of alpha channels is defined in CSS Color 4 § 4.2 Representing Transparency in Colors: the <alpha-value> syntax.

Chrome 150 (3)

  1. AccentColor and AccentColorText system colors

    The AccentColor and AccentColorText system colors can be used in CSS to access the system accent color specified on the user's device. This allows developers to apply native app like styling to their web content in conte...

  2. CSS background-clip: border-area

    Implements the border-area value for the CSS background-clip property, as defined in CSS Backgrounds Level 4. background-clip: border-area clips an element's background to the area painted by its border strokes, taking b...

  3. CSS light-dark() with image values

    Extends the CSS light-dark() function to accept image values (url(), image-set(), none) in author stylesheets, allowing image properties like background-image, list-style-image, border-image-source, cursor, and content t...

Chrome 149 (4)

  1. Clip Text overflow on user interaction

    When a user interacts (editing or caret navigation) with text which has ‘text-overflow: ellipsis’ set, the text switches temporarily from ellipsis to clip allowing the user to see and interact with the hidden overflow co...

  2. image-rendering: crisp-edges

    "image-rendering: crisp-edges" indicates that image should be scaled in a way that preserves contrast and edges, and which avoids smoothing colors or introducing blur to the image in the process Note: spec wise this is ...

  3. Remove explicit border color UA stylesheet rule for tables

    This change removes the erroneous `border-color: gray` CSS rule from the UA stylesheet for the `<table>` element. The spec does not contain this rule: https://html.spec.whatwg.org/multipage/rendering.html#tables-2 and...

  4. Web app scope system accent color

    Restricts access to the system accent color for CSS keywords and `accent-color: auto` to be only within a web app and initial profile context. AccentColor and AccentColorText CSS keywords, pose a significant fingerprint...

Chrome 148 (1)

  1. Remove explicit border color UA stylesheet rule for tables

    This change removes the erroneous `border-color: gray` CSS rule from the UA stylesheet for the `<table>` element. The spec does not contain this rule: https://html.spec.whatwg.org/multipage/rendering.html#tables-2 and...

Chrome 147 (1)

  1. Clip Text overflow on user interaction

    When a user interacts (editing or caret navigation) with text which has ‘text-overflow: ellipsis’ set, the text switches temporarily from ellipsis to clip allowing the user to see and interact with the hidden overflow co...

Chrome 144 (2)

  1. CSS caret-shape property

    The shape of the caret in native applications is most commonly a vertical bar, an underscore or a rectangular block. In addition, the shape often varies depending on the input mode, such as insert or replace. The CSS car...

  2. side-relative syntax for background-position-x/y longhands

    Defines the background image's position relative to one of its edges. This syntax gives web authors a more flexible and responsive mechanisms to define the background image position, instead of using fixed values that ...

Chrome 140 (1)

  1. CSS caret-animation property

    Chromium supports animation of the caret-color property, but when animated the default blinking behavior of the caret interferes with the animation. For instance, see the example at https://drafts.csswg.org/css-ui/#caret...

Chrome 139 (1)

  1. Corner shaping (corner-shape, superellipse, squircle)

    Enable styling corners, on top of the existing border-radius, by expressing the shape/curvature of the corner as a superellipse. This allows shapes like squircles, notches, scoops etc., and animating between them.

Chrome 137 (1)

  1. System accent color for accent-color property.

    This feature empowers web developers to enhance the visual appeal of their websites by leveraging the operating system's accent color for form elements. By utilizing the "accent-color" CSS property, developers can ensure...

Chrome 136 (3)

  1. Corner shaping (corner-shape, superellipse, squircle)

    Enable styling corners, on top of the existing border-radius, by expressing the shape/curvature of the corner as a superellipse. This allows shapes like squircles, notches, scoops etc., and animating between them.

  2. CSS dynamic-range-limit property

    Enables a page to limit the maximum brightness of HDR content.

  3. Unprefixed print-color-adjust

    The print-color-adjust allows adjusting colors in printed web pages. This is the same as Chromium's already-supported -webkit-print-color-adjust, but with a standardized name. The -webkit-prefixed version is not removed...

Chrome 134 (1)

  1. Support ImageSmoothingQuality in PaintCanvas

    Add support for the imageSmoothingQuality attribute on Paint Canvas. It allows a web developer to choose the quality/performance tradeoff when scaling images. There are 3 options in total for imageSmoothingQuality: low, ...

Chrome 132 (1)

  1. CSS caret-animation property

    Chromium supports animation of the caret-color property, but when animated the default blinking behavior of the caret interferes with the animation. For instance, see the example at https://drafts.csswg.org/css-ui/#caret...

Chrome 131 (1)

  1. Support currentcolor in Relative Color Syntax

    Allow relative colors in CSS (using the 'from' keyword) to use 'currentcolor' as a base. This will make it easy for web developers to set complementary colors, based on an element's text color, for that element's borders...

Chrome 130 (1)

  1. Full and unprefixed box-decoration-break support

    Support box-decoration-break:clone both for inline fragmentation (line layout) and block fragmentation (pagination for printing, multicol). Traditionally in Blink, only box-decoration-break:slice (the initial value) has...