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

Activity

1. shans

   added

   css-typed-om-2

   on Apr 4, 2016
2. shans commented on Apr 4, 2016

   

   shans

   on Apr 4, 2016

   ContributorAuthor

   More actions

   Also any other types we're missing.
3. upsuper commented on Apr 4, 2016

   

   upsuper

   on Apr 4, 2016

   Member

   More actions

   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 :/
4. tabatkins commented on Apr 6, 2016

   

   tabatkins

   on Apr 6, 2016

   Member

   More actions

   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.
5. domenic commented on Apr 8, 2016

   

   domenic

   on Apr 8, 2016

   Contributor

   More actions

   s/URIValue/URLValue

   👍React with 👍1Reacted by Masataka Yakura
6. jonnyscholes commented on Jul 14, 2018

   

   jonnyscholes

   on Jul 14, 2018

   More actions

   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!