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

[css-typed-om-2] Spec up URIValue, ShapeValue, StringValue, CounterValue, TimeValue, PercentageValue, FrequencyValue, VoiceValue, CustomIdentValue, TransitionTimingFunctionValue. What is attr(<identifier>) in other specs? #158

shans opened this issue Apr 4, 2016 · 5 comments


Copy link

shans commented Apr 4, 2016

No description provided.

Copy link
Contributor Author

shans commented Apr 4, 2016

Also any other types we're missing.

Copy link

upsuper commented Apr 4, 2016

CustomIdentValue probably should be merged with KeywordValue somehow I guess. It seems to me they share the same syntax.

I wonder what value type would font-family use :/

Copy link

Yeah, we can merge CustomIdentValue and KeywordValue; at the OM level we'd preserve casing, and internally either keep the casing or lowercase things, as appropriate. Serializing keywords would emit lowercase regardless of the input casing.

font-family is a list of goddam strings, and I won't countenance any arguments to the contrary. Stylesheet syntax just happens to allow a variant syntax for it.

Copy link

domenic commented Apr 8, 2016


Copy link

Dropping a message to voice support for the value of attr() to be supported in CSS OM 2. One of the things I'm very excited by in Houdini is to get the best of both technologies like WebGL/2D Canvas and HTML. Where WebGL/2D Canvas gives developers complete flexibility over how content is displayed and HTML ensures that websites/apps can be interpreted by machines (especially important for A11Y).

By making the value of attr() available to these new APIs, combined with CSS paint/layout APIs, we can make portable and complex visual styles. An almost-there example of this is this threejs+CSS paint api example which shows enormous potential for making complex styles more modular and portable. However, unfortunately in this context the text has to be set manually which breaks the declarative advantages that CSS paint api brings to the table.

It would be amazing to be able to do something like this:


<div id="stage" aria-label="3D Website heading"><h1>3D Website heading</h1></div>


#stage {
	--content: attr(aria-label);
	background-image: paint(3DText);
#stage h1 {
	visibility: hidden; /* This way we still get the correct size of the typography for use later */


	class {
		static get inputProperties() {
			return ["--content"];

		paint(ctx, size, props) {

Apologies if this is the incorrect place for this!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet

No branches or pull requests

5 participants