Why Polyfilling CSS Is Hard

New features in JavaScript are often tested first by using a polyfill. However, this is not that simple (or even impossible) in the case of CSS, although we all know that "CSS is awesome". Why does this problem exist? In this talk you will learn how CSS interacts with the other parts of the browser and what the challenges for creating a polyfill for new CSS features are.

Transcript

1. Why Polyfilling CSS Is Hard by Julian Viereck
 Webtuesday, Zurich - 14.10.2014
2. https://medium.com/@jviereck/why-do-all-code-editors-look-the- same-43de0df2daed Personal Prototyping Project
3. Outline of the talk • What is a Polyfill? • CSS is the Swiss Knife of the browser • CSS + JS 㱺 Polyfill all the things? • Short answer: No - but why? • Conclusion
4. https://remysharp.com/2010/10/08/what-is-a-polyfill
5. Polyfill • Replicate something the browser doesn’t have yet • Personally also: • Performance less important • Should not break existing features • E.g. setting style=“float: right” should still work
6. – The Extensible Web Manifesto “Make it possible to polyfill more of the platform's new features.” Extensible Web Manifesto <3 Polyfill
7. http://extensiblewebmanifesto.org/
10. www.thedailysnap.com
11. Image from: http://www.freevector.com/swiss-knife-vector/ CSS CSS: the Swiss Knife of the browser?
12. What’s in the CSS Box • CSS interacts with: • Visual appearance (text color, border, …) • Layout: • Dimensions of elements (width, height, …) • Position of elements (absolute position, CSS translation, …) • Interaction with other elements (inline vs block display, …) • Time evolution (CSS animations) • Content definition (via content property), GPU Acceleration • CSS “contains”: • Constraint solver • Interactive Query language (e.g. div:hover { color: red }) • And many more (CSS Variables, …)
13. Content via CSS http://jsbin.com/dofizicepiwa/1/
14. First idea: Polyfill CSS via CSS + JS Where does this work? 㱺
15. Polyfill CSS via CSS + JS • Example: • Polyfill CSS Animations • Set position in every requestAnimationFrame • From JS: `element.style.top = i +“px”` • Existing CSS features + JS 㱺 Polyfill ✓
16. When does CSS Polyfill
 work at all? • Works if: • Can express new CSS features in terms of existing CSS features Goal: Existing features: Polyfill-able? ✓=yes ✓*=well
17. What’s in the CSS Box • CSS interacts with: • Visual appearance (text color, border, …) • Layout: • Dimensions of elements (width, height, …) • Position of elements (absolute position, CSS translation, …) • Interaction with other elements (inline vs block display, …) • Time evolution (CSS animations) • Content definition (via content property), GPU Acceleration • CSS “contains”: • Constraint solver • Interactive Query language (e.g. div:hover { color: red }) • And many more (CSS Variables, …) ✓* ✓* x ✓/x ✓ Polyfill-able with CSS + JS: x=no , ✓=yes, ✓*=well x ✓ ✓
18. So, let’s build a layout Engine in JS? What could go wrong?
19. http://gridstylesheets.org/
20. Grid Style Sheet • Constraint CSS (CCSS):! • #article[font-size] == #box[height] / 12 !strong • Grid-Flavored VFL! • Turns: • #panel[left] + 10 == #button1[left]; • #button1[right] + 10 == #button2[left]; • Into: • @horizontal |-[#button1]-[#button2]-| in(#panel) gap(10); • And more crazy things!
21. GSS Example
22. http://vimeo.com/91393694 GSS Architecture Overview
23. http://webplatform.adobe.com/css-regions-polyfill/
24. https://github.com/FremyCompany/css-regions-polyfill/ blob/master/documentation/GLOBAL_OVERVIEW.md Useful libraries for extending CSS
25. http://docs.webplatform.org/wiki/css/tutorials/css-regions
26. Demo
27. Under the hood
28. Problem with 
 “Custom” Layout Engine • Need to map to existing features • DOM gets lots of style=“…” and 
 DOM event listeners • Need to work with existing CSS features • Is “float: left” handled in your engine? Getting floats right is hard, see: http://pcwalton.github.io/blog/2014/02/25/revamped-parallel-layout-in-servo/
29. Might be okay, but… • Polyfill layout might be “okay’ish” • But, recall - CSS Is The Swiss Knife: • Interacts with many parts of the browser • But not all internals are exposed!
30. Browser Render Pipeline http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/
31. Browser internals http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ What can CSS do here?
32. CSS & Render Tree http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ • Possibilities: Shake tree • Change tree location • Add new boxes • Change sizes • …
33. Possibilities ≠ 
 Existing Features • Possibilities: • Change tree location • Add new boxes • Pollute styles • Change sizes • … (see next slide) ➡ Handwaving Solutions ➡ renderInSameBoxAs? ➡ GhostDom? ➡ ShadowStyles? ➡ ? ➡ ?
34. Possibilities ≠ 
 Existing Features • And Even More: • Controlling font / image loading & rendering • Line breaking • RTL layout • Style single letter • … https://github.com/igrigorik/css-font-timeout/blob/patch-1/README.md http://extensiblewebreportcard.org/#toc-20 Internals are not ! exposed to developer more details:
35. Scripting CSS? • How about making CSS “turing complete”/scriptable? • No :) • One turing complete language in the browser is enough (aka. JavaScript) • Keeps a lot of things simpler (GC, …) • Problem are underlaying missing exposed features • Better: More ways to express intends
36. Conclusion • Writing a Polyfill for CSS: • Works fine for some features (animations, …) • For layout • Solutions are more hacks than polyfills • For rendering • Try to map to SVG/Canvas or bad luck :/ • Therefore: • Need new low-level CSS features to enable CSS Polyfills Not sure if this
 is a good idea!
37. Julian Viereck
 @jviereck
 +JulianViereck Thanks!