Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update the mix-blend-mode CSS property page: add plus-darker and plus-lighter values #31095

Merged
merged 4 commits into from
Dec 27, 2023

Conversation

SelenIT
Copy link
Contributor

@SelenIT SelenIT commented Dec 18, 2023

Description

Add two recently added values plus-darker and plus-lighter to the "Values" section.

Motivation

The specification has been updated recently to add two more values in addition to those listed in the <blend-mode> data type. The "Browser compatibility" section already lists the plus-lighter value but the "Values" section still misses both of them.

Additional details

The plus-lighter value is particularly useful for the cross-fade effects, as explained in the specification itself and in this article by Jake Archibald

Related issues and pull requests

This PR doesn't depend on other issues or PRs

@SelenIT SelenIT requested a review from a team as a code owner December 18, 2023 10:46
@SelenIT SelenIT requested review from estelle and removed request for a team December 18, 2023 10:46
@github-actions github-actions bot added the Content:CSS Cascading Style Sheets docs label Dec 18, 2023
Copy link
Contributor

github-actions bot commented Dec 18, 2023

Preview URLs

External URLs (1)

URL: /en-US/docs/Web/CSS/mix-blend-mode
Title: mix-blend-mode

(comment last updated: 2023-12-27 10:44:12)

@estelle
Copy link
Member

estelle commented Dec 18, 2023

In values, we use two terms, highlighted in italics, that need to be defined.

plus-darker compositing operator
plus-lighter compositing operator

I am not even finding these in the canvas section, which is where i thought they originated. If they did originate there, we should find the definition or define them there and link the definitions. Otherwise, we should state what they do/are.

Can we add the values to the example at /en-US/docs/Web/CSS/mix-blend-mode#effect_of_different_mix-blend-mode_values as all the other keyterm values are included there? Seeing the effect may help with users understanding what the compositing operator does.

Should we add plus-darker to the BCD? Should it be the same line as plus-lighter, or are they being implemented separately?
I filed mdn/browser-compat-data#21665 which just adds code around the plus-lighter so people know it's a keywork.

@teoli2003
Copy link
Contributor

Is plus-darker implemented? Is it something that is missing in the BCD table? (I guess it is not part of the basic support of the property

As it is a recent value, I added it in openwebdocs/mdn-bcd-collector#991 so that it can be detected by the collector: the bcd table should stay up-to-date that way.

@SelenIT
Copy link
Contributor Author

SelenIT commented Dec 19, 2023

The specification defines these values directly through their corresponding Porter Duff compositing operators. Apparently there is no other definition for them at the moment.

Updated the file again to add these two values to the examples section.

Basing on w3c/fxtf-drafts#447, plus-darker is currently supported only by Safari, and it's not clear yet whether its implementation and the specification match each other.

Copy link
Member

@estelle estelle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i suggest we link to the porter-duff compositing operator

files/en-us/web/css/mix-blend-mode/index.md Outdated Show resolved Hide resolved
files/en-us/web/css/mix-blend-mode/index.md Outdated Show resolved Hide resolved
SelenIT and others added 4 commits December 27, 2023 13:42
Add two recently added values to the "Values" section. The `plus-lighter` value is already mentioned in the compat table
@SelenIT
Copy link
Contributor Author

SelenIT commented Dec 27, 2023

The suggested changes are now applied

Copy link
Member

@estelle estelle left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks! 🎉

@estelle estelle merged commit a1046c0 into mdn:main Dec 27, 2023
7 checks passed
dipikabh pushed a commit to dipikabh/content that referenced this pull request Jan 17, 2024
…`plus-lighter` values (mdn#31095)

* Add `plus-darker` and `plus-lighter` values to the "Values" section

Add two recently added values to the "Values" section. The `plus-lighter` value is already mentioned in the compat table

* fix a typo

* Add plus-darker and plus-lighter to the example section

* Add links to the spec as suggested in code review

Co-authored-by: Estelle Weyl <[email protected]>

---------

Co-authored-by: Estelle Weyl <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:CSS Cascading Style Sheets docs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants