<?xml version="1.0" encoding="utf-8"?>
<feed xml:lang="en-us" xmlns="http://www.w3.org/2005/Atom"><title>Simon Willison's Weblog: polyfill</title><link href="http://simonwillison.net/" rel="alternate"/><link href="http://simonwillison.net/tags/polyfill.atom" rel="self"/><id>http://simonwillison.net/</id><updated>2018-02-27T13:21:27+00:00</updated><author><name>Simon Willison</name></author><entry><title>Responsive Components: a Solution to the Container Queries Problem</title><link href="https://simonwillison.net/2018/Feb/27/responsive-components/#atom-tag" rel="alternate"/><published>2018-02-27T13:21:27+00:00</published><updated>2018-02-27T13:21:27+00:00</updated><id>https://simonwillison.net/2018/Feb/27/responsive-components/#atom-tag</id><summary type="html">
    
&lt;p&gt;&lt;strong&gt;&lt;a href="https://philipwalton.com/articles/responsive-components-a-solution-to-the-container-queries-problem/"&gt;Responsive Components: a Solution to the Container Queries Problem&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
Philip Walton uses Chrome’s new ResizeObserver API (best described as document.onresize for elements, currently a W3C Editor’s Draft, not yet supported by other browsers) to implement a media-query style mechanism for applying CSS based on the size of the parent container. This is really clever. In the absence of ResizeObserver (which can be polyfilled) it can fall back to showing the narrowest design, which is probably best for mobile anyway. Desktop browsers are better equipped to run the polyfill.

    &lt;p&gt;&lt;small&gt;&lt;/small&gt;Via &lt;a href="https://twitter.com/philwalton/status/968418642613346306"&gt;@philwalton&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;


    &lt;p&gt;Tags: &lt;a href="https://simonwillison.net/tags/css"&gt;css&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/mediaqueries"&gt;mediaqueries&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/progressive-enhancement"&gt;progressive-enhancement&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/polyfill"&gt;polyfill&lt;/a&gt;&lt;/p&gt;



</summary><category term="css"/><category term="mediaqueries"/><category term="progressive-enhancement"/><category term="polyfill"/></entry><entry><title>What is a Polyfill?</title><link href="https://simonwillison.net/2010/Oct/9/polyfill/#atom-tag" rel="alternate"/><published>2010-10-09T11:48:00+00:00</published><updated>2010-10-09T11:48:00+00:00</updated><id>https://simonwillison.net/2010/Oct/9/polyfill/#atom-tag</id><summary type="html">
    
&lt;p&gt;&lt;strong&gt;&lt;a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/"&gt;What is a Polyfill?&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;
Useful new term: a Polyfill is “a shim that mimics a future API providing fallback functionality to older browsers”.


    &lt;p&gt;Tags: &lt;a href="https://simonwillison.net/tags/browsers"&gt;browsers&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/recovered"&gt;recovered&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/polyfill"&gt;polyfill&lt;/a&gt;, &lt;a href="https://simonwillison.net/tags/remy-sharp"&gt;remy-sharp&lt;/a&gt;&lt;/p&gt;



</summary><category term="browsers"/><category term="recovered"/><category term="polyfill"/><category term="remy-sharp"/></entry></feed>