[css-images-4] Allow stripes to be used as gradients

Open
#7,244 18 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
5/5
Estimated time
Over a week
Newbie friendliness
25/100
Issue type
Feature
Clarity
Needs clarification
Activity status
Stale
Tech stack
css
Domain
frontend, web-dev

Research direction

Start by reading this issue together with the linked CSSWG issue #2532 and related issue #7241. Compare the three gradient-based proposals and establish which syntax the specification should adopt; done means the CSS Images 4 proposal is resolved and documented with agreed examples and behavior.

Written by the indexing model from the issue text.

Description

Closed Accepted by CSSWG Resolution css-images-4 Needs Edits

In https://github.com/w3c/csswg-drafts/issues/2532 it was discussed to allow one-dimensional images in two-dimensional contexts. Lately it was resolved to discuss this feature separately from the original use case of one-dimensional images.

So far, there were four ideas to achieve that. The direct way of adding <1d-image> to <image> is discussed in #7241. The other three all have in common that they refer to gradients or gradient-like funcions. I've summarized them here (in the order they were mentioned) including their pros and cons:

  1. Add <1d-image> to existing gradient functions

    Examples:

    background-image: linear-gradient(45deg, stripes(red, yellow, lime, blue));
shape-outside: radial-gradient(stripes(black, transparent 20%));
background-image: linear-gradient(45deg, black, stripes(red, yellow, lime, blue) 100px, white);

    Pros:

    • Existing gradient functionality is reused
    • Syntax is reused in different contexts
    • Besides linear stripes also radial and conical stripes and their repeating variants possible
    • Allows mixing stripes and gradients

    Cons:

    • Nested functions
    • Semantically incorrect

  2. Create separate stripes functions

    background-image: linear-stripes(45deg, red, yellow, lime, blue);
shape-outside: radial-stripes(black, transparent 20%);

    Pros:

    • Similar to gradients without nesting

    Cons:

    • Behavior of thickness different to length in gradients
    • No reuse of <1d-image>

  3. Add keyword to existing gradient functions

    background-image: linear-gradient(45deg stripes, red, yellow, lime, blue);
shape-outside: radial-gradient(stripes, black, transparent 20%);

    Pros:

    • Existing gradient functionality is reused
    • No nesting

    Cons:

    • Behavior of thickness different to length in gradients
    • No reuse of <1d-image>

Sebastian

Dominant language
Bikeshed
Stars
4.9k
Forks
816
Avg merge
2d 18h
Merged PRs (30d)
24

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from w3c/csswg-drafts

All issues in w3c/csswg-drafts

Similar issues

More Web Dev issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.