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

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

Comments

@shans
Copy link
Contributor

@shans shans commented Apr 4, 2016

No description provided.

@shans
Copy link
Contributor Author

@shans shans commented Apr 4, 2016

Also any other types we're missing.

@upsuper
Copy link
Member

@upsuper 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
Copy link
Member

@tabatkins 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
Copy link
Contributor

@domenic domenic commented Apr 8, 2016

s/URIValue/URLValue

@jonnyscholes
Copy link

@jonnyscholes 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
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants