<commit_before><!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8 />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>Picturefill</title>
		<style>
				body {
					font-family: sans-serif;
					margin: 5%;
				}
				h1 em {
					display: block;
					font-size: .7em;
					color: #666;
					font-style: normal;
					margin: .5em 0;
				}
				pre {
					overflow: auto;
					background: #fafafa;
					font-size: 1em;
					border: 2px solid #ddd;
					padding: .5em 1em;
					width: 100%;
					font-family: "monaco", monospace;
				}
				pre code {
					margin: 0;
					padding: 0;
				}
				img {
					max-width: 100%
				}
		</style>
		<script>
			// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
			document.createElement( "picture" );
			document.createElement( "source" );
		</script>
		<script async="true" src="src/picturefill.js"></script>
	</head>
	<body>
		<h1>Picturefill <em>A &lt;picture&gt; element polyfill</em></h1>
		<p>...with support for srcset, sizes, and type attributes too!</p>

		<p>The <a href="http://picture.responsiveimages.org/">picture element</a> allows web developers to deliver an appropriate image to the user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill is a JavaScript file that enables support for the <code>picture</code> element in browsers that do not yet support it, so you can reliably use it today!</p>

		<h2>Basic markup pattern</h2>

		<p>Your <code>picture</code> element should contain a series of <code>source</code> elements followed by an <code>img</code> element. Each <code>source</code> element must have a<code>srcset</code> attribute specifying one or more image url sources (which can use expanded srcset syntax if desired for resolution switching). Additionally, you may add a  <code>media</code> attribute containing CSS3 Media Queries, and/or a <code>sizes</code> attribute to pair with <code>srcset</code>.</p>

		<p>Here's one with <code>srcset</code> and <code>media</code>. The first source that matches will determine the src of the <code>img</code> element at the end.</p>

<pre><code>&lt;picture&gt;
	&lt;source srcset=&quot;examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;&lt;/source&gt;
	&lt;source srcset=&quot;examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;&lt;/source&gt;
	&lt;source srcset=&quot;examples/images/medium.jpg&quot;&gt;&lt;/source&gt;
	&lt;img alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;/picture&gt;
</code></pre>

		<h3>IE9 Support</h3>
		<p>To support IE9, you will need to wrap a <code>video</code> element wrapper around the source elements in your <code>picture</code> tag. You can do this using conditional comments, like so:</p>

<pre><code>&lt;picture&gt;
	&lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
	&lt;source srcset=&quot;examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;&lt;/source&gt;
	&lt;source srcset=&quot;examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;&lt;/source&gt;
	&lt;source srcset=&quot;examples/images/medium.jpg&quot;&gt;&lt;/source&gt;
	&lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
	&lt;img alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;<commit_msg>link to dist js, which includes matchmedia polyfill. fixes #176<commit_after><!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8 />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<title>Picturefill</title>
		<style>
				body {
					font-family: sans-serif;
					margin: 5%;
				}
				h1 em {
					display: block;
					font-size: .7em;
					color: #666;
					font-style: normal;
					margin: .5em 0;
				}
				pre {
					overflow: auto;
					background: #fafafa;
					font-size: 1em;
					border: 2px solid #ddd;
					padding: .5em 1em;
					width: 100%;
					font-family: "monaco", monospace;
				}
				pre code {
					margin: 0;
					padding: 0;
				}
				img {
					max-width: 100%
				}
		</style>
		<script>
			// Picture element HTML shim|v it for old IE (pairs with Picturefill.js)
			document.createElement( "picture" );
			document.createElement( "source" );
		</script>
		<script async="true" src="dist/picturefill.js"></script>
	</head>
	<body>
		<h1>Picturefill <em>A &lt;picture&gt; element polyfill</em></h1>
		<p>...with support for srcset, sizes, and type attributes too!</p>

		<p>The <a href="http://picture.responsiveimages.org/">picture element</a> allows web developers to deliver an appropriate image to the user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill is a JavaScript file that enables support for the <code>picture</code> element in browsers that do not yet support it, so you can reliably use it today!</p>

		<h2>Basic markup pattern</h2>

		<p>Your <code>picture</code> element should contain a series of <code>source</code> elements followed by an <code>img</code> element. Each <code>source</code> element must have a<code>srcset</code> attribute specifying one or more image url sources (which can use expanded srcset syntax if desired for resolution switching). Additionally, you may add a  <code>media</code> attribute containing CSS3 Media Queries, and/or a <code>sizes</code> attribute to pair with <code>srcset</code>.</p>

		<p>Here's one with <code>srcset</code> and <code>media</code>. The first source that matches will determine the src of the <code>img</code> element at the end.</p>

<pre><code>&lt;picture&gt;
	&lt;source srcset=&quot;examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;&lt;/source&gt;
	&lt;source srcset=&quot;examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;&lt;/source&gt;
	&lt;source srcset=&quot;examples/images/medium.jpg&quot;&gt;&lt;/source&gt;
	&lt;img alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
&lt;/picture&gt;
</code></pre>

		<h3>IE9 Support</h3>
		<p>To support IE9, you will need to wrap a <code>video</code> element wrapper around the source elements in your <code>picture</code> tag. You can do this using conditional comments, like so:</p>

<pre><code>&lt;picture&gt;
	&lt;!--[if IE 9]&gt;&lt;video style=&quot;display: none;&quot;&gt;&lt;![endif]--&gt;
	&lt;source srcset=&quot;examples/images/extralarge.jpg&quot; media=&quot;(min-width: 1000px)&quot;&gt;&lt;/source&gt;
	&lt;source srcset=&quot;examples/images/large.jpg&quot; media=&quot;(min-width: 800px)&quot;&gt;&lt;/source&gt;
	&lt;source srcset=&quot;examples/images/medium.jpg&quot;&gt;&lt;/source&gt;
	&lt;!--[if IE 9]&gt;&lt;/video&gt;&lt;![endif]--&gt;
	&lt;img alt=&quot;A giant stone face at The Bayon temple in Angkor Thom, Cambodia&quot;&gt;
{'fraction_non_alphanumeric': 0.15649021029731688, 'fraction_numerical': 0.01406816533720087, 'mean_word_length': 4.4256490952006295, 'pattern_counts': {'":': 0, '<': 141, '<?xml version=': 0, '>': 141, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '162984', 'n_tokens_mistral': 2684, 'n_tokens_neox': 2293, 'n_words': 656}