profile
viewpoint

LeaVerou/awesomplete 6630

Ultra lightweight, usable, beautiful autocomplete with zero dependencies.

LeaVerou/animatable 2488

One property, two values, endless possiblities

LeaVerou/bliss 2263

Blissful JavaScript

LeaVerou/contrast-ratio 1690

A tool to calculate the contrast ratio between any two valid CSS colors.

LeaVerou/css3patterns 1203

The popular CSS3 patterns gallery, now on Github :)

LeaVerou/dabblet 770

An interactive CSS playground

LeaVerou/dpi 682

dpi love - Easily find the DPI/PPI of any screen

LeaVerou/conic-gradient 440

Polyfill for conic-gradient() and repeating-conic-gradient()

LeaVerou/chainvas 259

Make APIs suck less

LeaVerou/css3test 200

How does your browser score for its CSS3 support?

push eventLeaVerou/inspire.js

Lea Verou

commit sha ca7e2bf8fb7f4007be8f72416058d5a5ceb2d1fe

Fix live demo bugs

view details

push time in a day

issue commentmavoweb/mavo

How would I make a real-time chat app?

Oooh, I like that!

Of course, there's the problem of what to do when local edits conflict with pulled data. I wonder how the Firebase plugin solves that.

Glench

comment created time in 2 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 1d2e9b60c7585764c80723c30ede80e5b4860b47

Additive steps This makes data-step a space-sparated list of all steps so far, so that one can use [data-step~=“N”] for “N or after N” or [data-step$=“N”] for “exactly step N”

view details

push time in 2 days

pull request commentLeaVerou/multirange

IE compatibility

This is great work, thank you! But do we really need the extra span? IT looks backwards incompatible with existing usage 😢

backflip

comment created time in 3 days

issue commentLeaVerou/prefixfree

clip-path prefix ignored for Safari

Is it a recent version of Safari? If so, I believe it now supports clip-path without a prefix, which may explain why -prefix-free is not adding it.

fogostudio

comment created time in 3 days

issue commentmavoweb/mavo

How would I make a real-time chat app?

@Glench Yes, that would definitely work! What kind of syntax do you envision for it?

Glench

comment created time in 3 days

issue commentmavoweb/mavo

(Saveable) Properties inside dynamic collections are neither editable nor saveable

It works, buut it saves everything, right? Not just the new properties, but also the dynamic ones. Right now every value other than none works, but in the future you would be able to specify different backends for different properties, so we shouldn't encourage people to use any string of characters. For saving to the root backend, I'd recommend auto or inherit.

DmitrySharabin

comment created time in 3 days

pull request commentLeaVerou/dpi

Added Ultrafine LG displays

Thanks!

dzogrim

comment created time in 3 days

push eventLeaVerou/dpi

Séв(aѕтιen) L

commit sha e07e451974101136f8ed7fa20e41b8c8a1938cd8

Added Ultrafine LG displays (#228)

view details

push time in 3 days

PR merged LeaVerou/dpi

Added Ultrafine LG displays

Added Ultrafine LG "Retina" displays (4K and 5K)

+12 -0

0 comment

1 changed file

dzogrim

pr closed time in 3 days

issue commentLeaVerou/prefixfree

clip-path prefix ignored for Safari

Looks like you've typed -clip-path instead of clip-path?

fogostudio

comment created time in 3 days

issue openedshowdownjs/showdown

Double paragraphs when using <p markdown="1">

Hi there,

Thank you for this awesome project. The following MD:

<p class="tip" markdown=1>Some of you will have broader features than others.

Results in a double paragraph when parsed:

<p class="tip" markdown=1><p>Some of you will have broader features than others.

created time in 3 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha f0eb601ab00ef5fb95be97f015178c3f35651f6e

Add backdrop blur to caption

view details

Lea Verou

commit sha 538dfd9b9a35a94ecfec0385c516eaa2298897d5

Play videos without controls by clicking

view details

push time in 7 days

issue closedmavoweb/mavo

Invalid property id in mavo.js

Back in January, I opened an issue showing a problem with a Mavo in SeaMonkey. See https://github.com/LeaVerou/markapp/issues/60 More recently, I was going to work on my test site which has two Mavo tests and both were getting a JS error in Mavo, and I hadn't changed them at all since they were working.

Today, I wanted to start back into Mavo, but the Mavo demo pages were not working for me in SeaMonkey. mavo-demo-not-working

There seems to have been a change in Mavo that works in Firefox, but not in SeaMonkey. Shouldn't this stuff work in most browsers? It was working before in SeaMonkey.

closed time in 7 days

joyously

issue commentmavoweb/mavo

Invalid property id in mavo.js

Please note that many libraries only distribute a transpiled version, we provide users the option and make it very clear in the download page what the tradeoffs are. Browsers that need mavo.es5.js ovr mavo.js today are fairly rare, around < 3% all together.

Thank you for your input. I'm going to go ahead and close this now, since your issue is resolved.

joyously

comment created time in 7 days

push eventLeaVerou/contrast-ratio

Lea Verou

commit sha 0bcdf5f91cc7045e38a8ed7aaa99a0bbf9c04019

Add precise RL and contrast display

view details

push time in 9 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha f17f0a424f166d899a4397685469cf9406b7c4f6

Fix blockquotes in narrow contexts

view details

push time in 10 days

issue commentmavoweb/mavo

How would I make a real-time chat app?

Hi there, Glad you like Mavo!

Can Mavo store and retrieve real-time data? It looks like some plugin backends can work this way, but it would be amazing if the default backends could have options to work this way.

Unfortunately we cannot provide this functionality with all backends, because we are limited by what the backends can do. However, you can use Firebase for real-time data and access control (though you'd need to write the access control rules yourself on Firebase) to prevent everyone from editing everyone else's messages.

Can Mavo have a mix of local data and remote data? I wanted this app to be non-authenticated which means I wanted to have the user set their username string on the first page load and then persist the username in local storage only in that user's browser. But it's not clear to me if this would have to be another Mavo app or have custom JS or what.

Yes, currently the only way to do this would be to have another Mavo app, and refer to this data with expressions.

Can Mavo listen to keyboard events? I used a little JS to listen for a carriage return keyboard event on the text input and then programmatically click the button, but that feels pretty hacky.

Not yet, we are still exploring the best syntax for this to enable customizing the trigger for Actions (beyond keyboard events, e.g. gestures, mouseovers, maybe even things like location changes!). Suggestions are welcome!

Glench

comment created time in 10 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha dd9d633d4c2fdf641527775f79d2f7fa5cc19f54

[live-demo] Add update-reload to fix bugs with Mavo demos

view details

push time in 11 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 10268d62b617559b9115bf0b423df12beb99284d

input[type=url] is also a text input

view details

push time in 11 days

push eventmavoweb/mavo

Lea Verou

commit sha cb57697799815c7058e75e5b332e94e4721a3ca3

npm update

view details

push time in 11 days

issue commentmavoweb/mavo

Invalid property id in mavo.js

Nope, no conditional loading required. We recommend using mavo.es5.js for everyone if you need wider browser support that includes older/more obscure browsers. :) I believe we've been using ... for a long time, pretty much once support for it reached a certain threshold, but perhaps not from the beginning.

I'm going to leave this issue open in case mavo.es5.js doesn't fix the problem, so we can debug further.

joyously

comment created time in 11 days

issue commentmicrosoft/vscode

Smart Tabs - Feature Request

Suggesting an extension for something as fundamental as this, is like making an editor that only supports spaces and saying write an extension to support tabs if you want that. Smart tabs are the proper way to use tabs for indentation, and is a rather significant lacking that VS Code doesn't support them (FWIW Atom does).

jedmao

comment created time in 11 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha e8710e077236f19946c9ca32e643f6aee901cde1

Allow data-prepend and data-append on HTML editor

view details

push time in 11 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 162929e9b7f5e178165bed1335ac3baa563aa8ca

Add h1 styles to .slide > header > h1

view details

push time in 11 days

issue commentmavoweb/mavo

Invalid property id in mavo.js

Are you on a recent version of SeaMonkey? Which rendering engine does it use?

If the problem is ..., I'm not sure we can refactor the entire Mavo codebase because SeaMonkey doesn't support ... yet.

Shouldn't this stuff work in most browsers?

Most, yes, but it's impossible to support all. As much as we would love to, there are tradeoffs. The market share of SeaMonkey is currently less than 0.01%, and it's difficult to find how much less. It's not even listed in StatCounter's CSV and is listed as 0.00% here, which is for 2018. For 2020, it's not even listed.

However, I notice you're using mavo.js. If the problem is indeed ES6, using mavo.es5.js should alleviate it.

joyously

comment created time in 11 days

issue commentw3c/csswg-drafts

[css-color-4] sRGB doesn't really use 80 cd/m^2 white luminance

You should try asking some real color scientists for advice about this one.

You mean like @svgeesus?

svgeesus

comment created time in 12 days

issue commentLeaVerou/awesomplete

Highlighting word with accent

@LeaVerou how it's the proper/easy way to add a awesomplete-plugin?

There is no specific way right now, but I would love to add a directory of plugins!!

vjmartins

comment created time in 12 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha ba4c9a58fe0a2a91b6f526f151899169de88b0bb

[docs] .no-docs-icons

view details

push time in 13 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha a6c5c3e062adf3478f253699d7987df1f0042bef

[live-demo] Attempt to fix Open in new Tab in Safari

view details

push time in 13 days

pull request commentLeaVerou/cubic-bezier

Fixes for your suggestions

They're practically supported everywhere at this point! image

I doubt anyone who uses cubic-bezier.com is using IE11.

adamcoulombe

comment created time in 14 days

push eventdesignftw/hw1-starter

Lea Verou

commit sha f5633d411fff27cc573e7d5e84861098d73690b2

Update README.md

view details

push time in 14 days

pull request commentLeaVerou/cubic-bezier

Fixes for your suggestions

Thank you, merged!

Tip: you may want to look into ES6 template strings, they make this kind of string concatenation look much nicer.

adamcoulombe

comment created time in 14 days

push eventLeaVerou/cubic-bezier

Adam Coulombe

commit sha 9d1439bbfea5394fc61a03d37e99ee566f439c20

Fixes for your suggestions (#19) * Add a Copy Button Adds a copy button next to the cubic bezier headline. Moved the save button below the curve graph * fix responsive layout * add copy success animation * Fixes for PR#18 - Change to small pointing arrow. - Remove "all" from copy options. - Calculate width of copy options so it doesnt get cut off

view details

push time in 14 days

PR merged LeaVerou/cubic-bezier

Fixes for your suggestions
  • Change to small pointing arrow.
  • Remove "all" from copy options.
  • Calculate width of copy options so it shouldn't get cut off.
+9 -5

0 comment

3 changed files

adamcoulombe

pr closed time in 14 days

push eventdesignftw/hw1-starter

Lea Verou

commit sha 0375cc24dfd25d1c6b8c90a9aac218edd6b5310f

Update README.md

view details

push time in 14 days

push eventdesignftw/hw1-starter

Lea Verou

commit sha c0aaac04b695ad5c3f4243af0aa712fa836c7606

Create README.md

view details

push time in 14 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 190a27e04b6bbf626669eb0fa9e08feb97ddddd5

Fix notes in presenter mode

view details

push time in 14 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 0cccd4b506f7a4ea5c6f46402683461d7adcc258

fix ribbon

view details

push time in 15 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 64a31e52bd1a8e31e5cd2530ea783c5947fe5813

Retry playing video on click if play fails

view details

push time in 15 days

push eventLeaVerou/css.land

Chris Lilley

commit sha 6d50ee37f7b21bc4e50d5b05ef83d5bd6508e13f

Add rec.2020 (#2)

view details

push time in 15 days

PR merged LeaVerou/css.land

Reviewers
Add rec.2020

In addition to the sRGB and display-p3 values, also display rec.2020 which is the colorspace for broadcast 4k HDR content (Netflix, Disney, etc). If the color is outside rec.2020 then seriously, nothing is going to display that color anytime this decade.

+17 -0

0 comment

2 changed files

svgeesus

pr closed time in 15 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha b6df4918d91d9c19cc72ffb3148c5b3a12fc56e6

[presenter] Fix bug

view details

Lea Verou

commit sha a05326ed8f258e9310d77a6934e701bef67ac58e

CSS

view details

push time in 15 days

pull request commentLeaVerou/cubic-bezier

Add Copy Button

Very nice UI too! I love that there's a sensible default when you click on copy, but also a set of options under the arrow (I would pick the SMALL POINTING TRIANGLE instead though, or make it smaller with CSS). Do note that it's never needed to specify all in the shorthand, as this is the default.

Also text is cut off: image

But overall, great work!!

adamcoulombe

comment created time in 16 days

pull request commentLeaVerou/cubic-bezier

Add Copy Button

Thank you!

adamcoulombe

comment created time in 16 days

push eventLeaVerou/cubic-bezier

Adam Coulombe

commit sha 94aee8527b0c58f8df6e2e852496d3b03a997a4d

Add Copy Button (#18) * Add a Copy Button Adds a copy button next to the cubic bezier headline. Moved the save button below the curve graph * fix responsive layout * add copy success animation

view details

push time in 16 days

PR merged LeaVerou/cubic-bezier

Add Copy Button

This PR Adds a copy button next to the cubic bezier headline.

I also moved the save to library button below the curve graph where it makes a bit more sense now that theres an actual copy button.

Thanks!

Animated gif showing copy action

+169 -14

0 comment

3 changed files

adamcoulombe

pr closed time in 16 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 7bfd097b1c5b753b2e251d26cb1dfba9ce16f411

If slide id not found, load most recently viewed slide Awesome feature suggestion by @karger

view details

push time in 17 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha df5ee592efb62628c0f5b48e6dddec0301a94dd8

[presenter] Fix presenter mode, support details.notes

view details

push time in 17 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 79c8e4c5d8ec3f449dbab264a730308cf5b2a237

Fix video autoplay

view details

push time in 17 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 6dee14139758154bf612dd7fee23d20b6cca3d83

[live-demo] Remove i icon

view details

push time in 19 days

push eventmavoweb/mavo.io

Lea Verou

commit sha 8938d838234964c72f1cbd8a3596076618835468

(properties docs)Updated docs.json

view details

push time in 19 days

push eventmavoweb/mavo.io

Lea Verou

commit sha 5386839d02aff58d1146e4030a368fb7dd2ec28d

(properties docs)Updated docs.json

view details

push time in 19 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 97cb9fb27f6b614eeaf1a54979a2ef9cc0e03a93

[live-demo] Properly remove slide numbers from demo

view details

push time in 20 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 2eae597176680ed317fb0ba171431185c135da8b

[live-demo] Headings

view details

Lea Verou

commit sha fcf52658ee92191368a3621d1306d17ca43173d4

Provide way to hide slide number, hide by default in demos

view details

push time in 20 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 38819fceef0997b13a32bbecc880983ac51db3cb

Fixes designftw/website#3

view details

push time in 20 days

delete branch designftw/hw1-starter

delete branch : luke/titles

delete time in 21 days

push eventdesignftw/hw1-starter

Luke Murray

commit sha e071787ec9faff1fac8693d4f4d5549b609eef55

title text

view details

Lea Verou

commit sha dbb1767ca005d6a435ead5d1d5863fb28b354189

title text (#1) title text

view details

push time in 21 days

PR merged designftw/hw1-starter

Reviewers
title text
+2 -2

0 comment

2 changed files

lukesmurray

pr closed time in 21 days

push eventdesignftw/hw1-starter

Lea Verou

commit sha fbd1e69beecd5a110765fb646ad3126d868b14fd

Add other pages in ex2

view details

push time in 21 days

create barnchdesignftw/hw1-starter

branch : master

created branch time in 21 days

created repositorydesignftw/hw1-starter

Starter skeleton for HW1

created time in 21 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 682d432f56c1042cbf5f3972a5052e2146d57aa9

[docs] Fix global attribute links

view details

push time in 21 days

push eventLeaVerou/css.land

Lea Verou

commit sha a61b1558a7bc57b692dfc64b50276d575a5510ad

Add decimals setting

view details

Lea Verou

commit sha b7dac9e53339458041aff5b8f9dd09850a33427a

Fix is within P3 calculation

view details

push time in 24 days

push eventmavoweb/mavo

Lea Verou

commit sha db67e356851aaab4ad8665506a067f763f50a0be

Fix bug with round()

view details

push time in 24 days

push eventLeaVerou/css.land

Lea Verou

commit sha 1026e2cf8a9c577b31b4d5b8eb03fb5ac6f9d076

Fix is within sRGB

view details

Lea Verou

commit sha b1d7b0c9a4bea261bc90ef42db3d64ab27bd5ac9

Fix cancel in color import

view details

push time in 24 days

push eventLeaVerou/css.land

Lea Verou

commit sha dab98741aad2dab17a6ff2e245658985bf7695c8

Fix import color

view details

push time in 24 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha 60ea55a8bf70fc12f3418454667062cdae19bb83

Collapse prev slide button

view details

push time in 24 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha d032caab9ec7c6d035d3952cc433c1301df276ab

[live-demo] Add Previous button

view details

push time in 25 days

push eventLeaVerou/inspire.js

Lea Verou

commit sha ef22679dbef87748c813700c42d25e884dae4c05

Comment out notes stuff from live demo plugin

view details

Lea Verou

commit sha 465f987234ea527fb20647334cc7fe922a71c512

Add em dash before blockquote>.cite

view details

Lea Verou

commit sha 015d420a699941a5558edc2dc84cf9f0b6c733bc

[docs] Fix MDN favicon

view details

push time in 25 days

issue commentw3c/csswg-drafts

[css-cascade] Custom cascade origins

The selector-specificity :where() approach is both narrowly-applied and removes all specificity, which could still be a useful tool within origins

Its goal is exactly the opposite: because it's a pseudo-class, it allows only removing part of the selector from the specificity calculation, enabling authors to distinguish importance-signifying criteria from merely filtering criteria. Of course it can be used for the whole selector, but it doesn't have to be, nor was that the primary use case I had in mind when I proposed it.

mirisuzanne

comment created time in a month

push eventLeaVerou/inspire.js

Lea Verou

commit sha 18c1124532dabdfb804ae1be9b072f75211e2934

Fix docs plugin

view details

push time in a month

issue commentLeaVerou/awesomplete

Scrolling with arrow key, highlights next but quickly goes back to highlight first item

no more support for awesomplete? :(

I'm just busy. A reduced testcase would help. Please google how to make a reduced testcase and post one here. It's generally easier to get support (in any project!) if you provide one instead of just dumping your code in an issue. We don't have crystal balls.

hkunz

comment created time in a month

pull request commentmavoweb/mavo.io

Suggested edits to data

Thanks!

DmitrySharabin

comment created time in a month

push eventmavoweb/mavo.io

Dmitry Sharabin

commit sha 0c38e3345170baa66a79571d699621d93ca82dba

(Function Docs) Updated functions.json (#70)

view details

push time in a month

PR merged mavoweb/mavo.io

Suggested edits to data

Hello there! I used Mavo to suggest the following edits: I added hours parameter in the time() function description. Preview my changes here: https://mavo.io/docs/functions/?storage=https%3A%2F%2Fraw.githubusercontent.com%2FDmitrySharabin%2Fmavo.io%2Fmaster%2Fdocs%2Ffunctions%2Ffunctions.json&functions-storage=https%3A%2F%2Fgithub.com%2Fmavoweb%2Fmavo.io%2Fdocs%2Ffunctions%2Ffunctions.json

+3 -3

0 comment

1 changed file

DmitrySharabin

pr closed time in a month

pull request commentmavoweb/mavo

Rename 'hour' to 'hours'

Thanks!

DmitrySharabin

comment created time in a month

push eventmavoweb/mavo

Dmitry Sharabin

commit sha 0c0acf41faf5ec3f78c35971b8a944251f8cf9e2

Rename 'hour' to 'hours' (#567) Harmonize the `hours` value with other values

view details

push time in a month

PR merged mavoweb/mavo

Reviewers
Rename 'hour' to 'hours'

Harmonize the hours value with other values.

+1 -1

0 comment

1 changed file

DmitrySharabin

pr closed time in a month

push eventmavoweb/mavo.io

Lea Verou

commit sha 42a647f57060a5d3696ee0e0c48a8d84746c2d35

Fix simple color picker

view details

push time in a month

CommitCommentEvent

push eventLeaVerou/css.land

Lea Verou

commit sha e11b082ecb14904418e4c2880fe1859d3a2d9c0d

Add import button, hide some stuff under "Advanced" section

view details

push time in a month

push eventLeaVerou/mygraine

Lea Verou

commit sha 4c9ef341ec75ae00e27d4e7bc8b438256651e112

Fix default date & time

view details

push time in a month

push eventmavoweb/mavo

Lea Verou

commit sha e204d536ffba8e6a037fccba37891a30b7528380

Add 'hour' parameter in time() for whole hour timestamps ping @DmitrySharabin for docs

view details

push time in a month

pull request commentmavoweb/mavo.io

Suggested edits to data

Thanks!

DmitrySharabin

comment created time in a month

push eventmavoweb/mavo.io

Dmitry Sharabin

commit sha 4c3b5eb102e1855c8c969acede3d74718c69dbbc

(Function Docs) Updated functions.json (#69)

view details

push time in a month

PR merged mavoweb/mavo.io

Suggested edits to data

Hello there! I used Mavo to suggest the following edits: I corrected categories for some functions:

  1. ifMath changed to Logical
  2. urlMath changed to Other
  3. rangeMath changed to List (as a .. b is also in List)
  4. inOther changed to List (as has is also in List). Preview my changes here: https://mavo.io/docs/functions/?storage=https%3A%2F%2Fgithub.com%2FDmitrySharabin%2Fmavo.io%2Fdocs%2Ffunctions%2Ffunctions.json&functions-storage=https%3A%2F%2Fgithub.com%2Fmavoweb%2Fmavo.io%2Fdocs%2Ffunctions%2Ffunctions.json
+4 -4

0 comment

1 changed file

DmitrySharabin

pr closed time in a month

issue commentw3c/csswg-drafts

[css-color-4] Should the color() function accept 'lab' as a color gamut keyword

I have been wondering too about another function which takes a list of colors plus a colorspace, and returns the set of colors all adjusted together such that the most out of gamut color is just inside (and the rest are adjusted too, so their relative relationships are intact).

That's quite manual too. It would be nice to have an opt-in to do this for entire elements automatically.

smfr

comment created time in a month

issue commentw3c/csswg-drafts

[css-color-4] Should the color() function accept 'lab' as a color gamut keyword

On one hand, this is extra testing and documentation work for little benefit. On the other hand, I can see use cases if the gamut keyword is in a variable. But those cases are rather limited.

smfr

comment created time in a month

push eventLeaVerou/inspire.js

Lea Verou

commit sha 3d10602a403da0a9752b4c9cebb9266ed392f175

Tweaks

view details

Lea Verou

commit sha 358e93e926cc734ede5126e2fed2783ee45c4564

[plugins/media] Default to white background color

view details

Lea Verou

commit sha 9b4133b9bd33400639a01cdbd54201d67e9da554

Allow plugins to have metadata, rename Inspire.plugins to Inspire.pluginsLoaded

view details

push time in a month

issue commentw3c/csswg-drafts

[css-color-4] Do gradients/animations using lab/lch colors interpolate in the Lab colorspace?

Do we particularly need that one? "wider" is not easily determined; for example display-p3 and a98-rgb are largely overlapping; though prophoto-rgb is wider (and includes imaginary colors)

I was wondering about that. I think 1 and 3 are sufficient, especially if there's a way to override the heuristic (e.g. relative color syntax to convert between color spaces)

smfr

comment created time in a month

issue commentw3c/csswg-drafts

[css-color-4] Do gradients/animations using lab/lch colors interpolate in the Lab colorspace?

How about the following heuristic then:

  • Interpolation between colors of the same color space is done in that color space
  • Interpolation between colors of different color spaces, where one color space is a strict subset of the other is done in the wider color space
  • Any other interpolation is done in Lab

The heuristic can easily be overridden to a wider color space with the relative color syntax from #3187 that is added in Color 5.

A gradient from device-cmyk to sRGB, or sRGB to Lab, or some other exotic combination is fairly unikely to give good results, and I'd expect would be down to the user not understanding what they've asked for.

Not necessarily. It could be between a variable/user defined color and a fixed color. I don't think we should brush off such use cases.

smfr

comment created time in a month

issue commentw3c/csswg-drafts

[css-color-4] Do gradients/animations using lab/lch colors interpolate in the Lab colorspace?

I agree, which is why a per-element working colorspace, rather than a brute force all-or-nothing working colorspace for the whole page, is more flexible and author friendly.

I don't think per-element would cut it either, ideally it needs to be per operation. You could have a transition and a gradient on the same element, from different stylesheets. One of them is between sRGB colors, the other between Lab colors. You need to interpolate the former in sRGB for webcompat, but the latter in Lab because sRGB would produce terrible results (since the colors could very likely be both out of sRGB gamut). There could be a document or element color space to fall back on perhaps, but interpolating Lab colors in sRGB should never happen.

smfr

comment created time in a month

issue commentw3c/csswg-drafts

[css-color-4] Do gradients/animations using lab/lch colors interpolate in the Lab colorspace?

I think we all agree that Lab interpolation is in every way superior, and the only reason we can't switch everything to that by default is backwards compat, right?

Assuming the above statement is correct, I think anything where authors have to explicitly enable lab interpolation is a bad idea from a usability point of view and should be a last resort if nothing more reasonable can be implemented. It seems reasonable to me that as long as there's at least 1 non-sRGB color, the interpolation should happen in Lab, since there's no backwards compat concern.

If a gradient/animation uses a mixture of lab() and rgb() colors, I assume it would fall back to RGB interpolation.

If you interpolate Lab and sRGB via sRGB interpolation, you could end up having an abrupt jump in the first interpolation step, since the Lab color may be outside the sRGB gamut. Given that sRGB is rather small compared to Lab, that's not a rare case, but significantly more than 50% likely. Interpolation must always happen in a superset of the gamuts of the colors involved, so Lab is a safe choice, whereas sRGB is not.

What happens if you mix lab() and colors in one of the other predefined colorspaces (display-p3, rec-2020 etc)?

Given that Lab encompasses all visible colors, Lab interpolation should be safe here too.

smfr

comment created time in a month

pull request commentmavoweb/mavo

Revert "Make <option> read-only, fixes 559"

@DmitrySharabin you could try taking another stab at fixing the original issue if you want :) I'd suggest using Requestly to alias all Mavo URLs to your local URLs and browsing the Mavo site, running the testsuite and any other Mavo apps you can think of, to make sure no regressions are introduced.

LeaVerou

comment created time in a month

delete branch mavoweb/mavo

delete branch : revert-564-issue-559

delete time in a month

push eventmavoweb/mavo

Lea Verou

commit sha be6726215b731ef59b0f64df0a7123724942bb24

Revert "Make <option> read-only, fixes 559" (#566) This reverts commit c1395678e9d7e4a52ce6528335029b798c6f15cb.

view details

push time in a month

PR merged mavoweb/mavo

Revert "Make <option> read-only, fixes 559"

Reverts mavoweb/mavo#564

+0 -6

0 comment

1 changed file

LeaVerou

pr closed time in a month

PR opened mavoweb/mavo

Revert "Make <option> read-only, fixes 559"

Reverts mavoweb/mavo#564

+0 -6

0 comment

1 changed file

pr created time in a month

create barnchmavoweb/mavo

branch : revert-564-issue-559

created branch time in a month

more