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

Open
shans opened this Issue Apr 4, 2016 · 5 comments

Comments

Projects
None yet
5 participants
@shans
Copy link
Contributor

shans commented Apr 4, 2016

No description provided.

@shans shans added the css-typed-om-2 label Apr 4, 2016

@shans

This comment has been minimized.

Copy link
Contributor

shans commented Apr 4, 2016

Also any other types we're missing.

@upsuper

This comment has been minimized.

Copy link
Member

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 :/

@tabatkins

This comment has been minimized.

Copy link
Member

tabatkins commented Apr 6, 2016

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.

@domenic

This comment has been minimized.

Copy link

domenic commented Apr 8, 2016

s/URIValue/URLValue

@jonnyscholes

This comment has been minimized.

Copy link

jonnyscholes commented Jul 14, 2018

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:

HTML

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

CSS

#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 */
}

JS

registerPaint(
	"3DText",
	class {
		static get inputProperties() {
			return ["--content"];
		}

		paint(ctx, size, props) {
			3DText.setContext(ctx);
			3DText.setText(props.get("--content"));
			3DText.setSize(size);
		}
	}
);

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