Re: Presentation: Why Polyfilling CSS Is Hard - followup to Extensible Web Summit - Berlin

Yes, I sure am :-)


I wonder how the “GhostDOM” proposal relate to this proposal. Would we support the desired use cases if we did:


Add a “slot(className…)” function to the “content” property to give the ability to create new pseudo-elements via CSS, and a “nth-slot(className, n)” functional pseudo element allowing the style the “nth” pseudo-element having class “className” (as well as “slots(className)” which allows to style all pseudo-elements having the class “className”).
 


Add a ::background pseudo-element which would be a ‘magically’ absolutely positioned element covering the surface of the main element above its ‘background’ but beneath any child node of the main element, to which you can add slots using the ‘content’ property (or just use any image using “element::background { content: url(…) }” if the default content sizing algorithm is okay for you).



If yes, I would be open to reopening the case & take enough time together to write a small CSS Spec to kickstart the idea, and send a joint email to www-style pushing the idea. If no, I’m super-interested in hearing more about the use-cases, so let’s get this conversation rolling!


Best regards,

François








De : Brian Kardell
Envoyé : ‎vendredi‎ ‎17‎ ‎octobre‎ ‎2014 ‎01‎:‎17
À : public-nextweb@w3.org





Just incase anyone is interested....


---------- Forwarded message ----------
From: Julian Viereck <julian.viereck@googlemail.com>
Date: Thu, Oct 16, 2014 at 5:55 PM
Subject: Presentation: Why Polyfilling CSS Is Hard - followup to
Extensible Web Summit - Berlin
To: www-tag@w3.org


Hi all,

at the Extensible Web Summit in Berlin [1] was a discussion about why
creating polyfills for CSS is hard or even impossible. As a followup,
I've given a presentation about this topic at the Webtuesday Meetup in
Zurich/Switzerland [2]. You can find the presentation on SpeakersDeck:

  Why Polyfilling CSS Is Hard
  https://speakerdeck.com/jviereck/why-polyfilling-css-is-hard


The presentation was high level and look as example on creating
polyfills for layout related CSS features (e.g. CSS Regions or the
Grid Style Sheet project, which adds constraints to CSS).

Towards the end of the presentation I mentioned a few low-level bits
that are missing in CSS and that might make polyfilling CSS easier.
Basically, I was looking at existing features in CSS and tried to come
up with lower level CSS features to express them in the hope that the
new build foundation is useful for creating polyfills more easily.
Here are my two ideas as a rough outline:

#1: GhostDom

CSS has the ability to create new "text boxes" using the "content"
attribute. For me this feels like creating some "ghost dom" entries -
they are not really visible in the DOM but their present is noticeable
during rendering later on. Beside the "content" attribute you could
think about the "background" attribute to also create a new "ghost
dom" behind the current element, which then can contain an <img> tag
to display a background image. The pseudo-elements via "::before" and
"::after" could also be expressed via such "ghost dom", that are
placed at the appropriate position related to the matched DOM entry.

#2: ShadowStyles

The idea for ShadowStyles came to me when thinking about the new
ShadowDOM API. When creating a polyfill, it would be nice to create
new properties, which then expand into existing properties. E.g. the
"background" attribute triggers the creation of a GhostDom entry and
adds a <img> in case a background image should be displayed.

Cheers,

- Julian

[1]: http://lanyrd.com/2014/extwebsummit-berlin/

[2]: http://webtuesday.ch/meetings/20141014/




-- 
Brian Kardell :: @briankardell :: hitchjs.com