Polyfilling the gaps
summary
Polyfills follow three concrete steps: feature detection, implementation, distribution. Practical notes: a two‑line document.head shim breaks frames; localStorage access throws in Firefox 3.6; Object.watch exists only in Firefox; Opera once false‑positives pointer events. Clever reuse of browser features wins — Paul Irish’s matchMedia div trick checks a media query by injecting CSS and reading offsetWidth. Beware scope and size — a progress polyfill ballooned to 200 lines and still felt wrong.
AI-written summary · about
chapters (12)
- 0:00Start
- 5:55Cone ideas
- 11:19HTML elements Optimistic thought
- 13:25Attribute values
- 29:24Adapting to change attributes
- 31:20mutation events
- 34:00Accessons
- 42:13Use built-in functionality
- 42:49matchMedia
- 47:43Accessibility
- 48:30CSS polyfills
- 52:40Help yourself
related talks
03mMoving JS from Libraries to Polyfills
11m99 Ways to Take Away Your Ugly Polyfills
47mOptimize the frontend by running your own polyfill.io server
45mRefactoring the polyfills recipe
49mPanel 4: Responsive Layout
40mJavaScript in the age of HTML 5 and CSS 3
30mThe State of HTML5 - Inaugural Address
20mMoving JS from Libraries to Polyfills