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

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

2014-10-extendingcss-webtuesday.key 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/