-
Notifications
You must be signed in to change notification settings - Fork 639
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
[css-values] Add valid-empty
-like value (for CSS Custom Properties)
#10441
Comments
I just want to clarify that for
It will still resolve to A good use case outside the space toggles is when we want to have a “placeholder” of sorts inside a shorthand. I wrote a post with one example like that here: https://blog.kizu.dev/space-toggle-placeholders/ Re: the name itself, as this will be a CSS-wide keyword, and essentially allowed anywhere, we need something less generic than The goal of the value is to make the declarations like |
Ah, now I see, I missed this detail. In this regard I really like the |
empty
or null
-like value (for CSS Custom Properties)valid-empty
-like value (for CSS Custom Properties)
Or it could be syntactically distinct from other keywords somehow. |
@LeaVerou This one is interesting as well and opens other possibilities. Any ideas what would be syntactically possible? What I like about @kizu’s suggestion |
@LeaVerou I’ve been thinking about other syntaxes as well. We probably have to define if there are use-cases outside of custom props for this keyword. Some high-level ideas (not happy with them) working around CSS’s case-insensitivity (I still like the explicit nature of .meow {
--foo: ();
--baz: !valid;
--bar: *;
} |
I don't get it.
|
tl;dr Make a valid empty custom prop (or a space variable placeholder for that matter) more readable and explicit.
That is the name you can find it under and the CSS community refers to when using it.
Aye, I know. That is true, but that does not make the readability issue any better.
I am not sure I can answer this. But in my opinion
To me having an explicit keyword to set the value of a custom property to
I am not disliking it, it is more to have an explicit keyword. But having comments looks even more hackier to me. EDIT: Fix typo. |
CSS-wide keywords should work everywhere, would you accept I also don't get why you would want And an empty tooltip in devtools doesn't seem cunfusing to me, if the value is empty. |
FWIW I completely agree with @Loirooriol: I think an actual empty value is the most self-explanatory value we could ever come up with. It’s literally WYSIWYG! @kizu It seems that it's the empty tooltip that's the problem here, not the syntax. Dev tools could easily show something like "(Empty value)" to make this clear. |
That is a good point tbh. Maybe only scoping the value keyword to custom properties
Just to show the same behavior of an empty value string and @LeaVerou @kizu Regarding dev tools, I get this tooltip behavior → I am also not able to manually set |
@raphaelokon It looks like this is a bug in Chrome DevTools, please file a bug. |
@Loirooriol Another thing I noticed when registering a custom property with CSS and JS when defining an @property --foo {
syntax: "*";
inherits: false;
initial-value: ; /* Single space here …*/
} window.CSS.registerProperty({
name: "--meow",
syntax: "*",
inherits: false,
initialValue: " ", /* Single space here …*/
}); When getting the value of the custom props we get different value behavior. const styles = window.getComputedStyle(document.documentElement);
console.log(styles.getPropertyValue("--foo")?.length); // => 0
console.log(styles.getPropertyValue("--meow")?.length); // → 1 |
There is also a mention of a Edit: Add issue ref. |
@raphaelokon That's a bug. https://drafts.css-houdini.org/css-properties-values-api/#the-registerproperty-function
|
@yisibl I’ll file a Chrome DevTools bug. @Loirooriol Is there already a bug filed for it in CSS Houdini or should I file one? |
I meant implementation bug. But actually not, it's just parse a declaration what trims whitespace. But I do think |
There was a brief conversation (I think between @kizu and @andruud) I participated during CSS Day regarding a declarative keyword to mark the guaranteed absence of a value for a custom property to avoid the
space toggle hack
, e.g.would become →
I think that the inline conditional or
if()
spec #10064 by @LeaVerou (which was just marked as resolved 🎉) may fix a lot of use-cases around this, but there maybe still be use-cases for a declarative empty value.EDIT: Change the semantic of the keyword and make it less generic by naming it
valid-empty
re comment.The text was updated successfully, but these errors were encountered: