Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
183 lines (157 sloc) 11.2 KB
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript." />
<meta name="author" content="//samdutton.com">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript">
<meta itemprop="image" content="images/icons/icon192.png">
<meta name="mobile-web-app-capable" content="yes">
<meta id="theme-color" name="theme-color" content="#fff">
<title>simpl.info</title>
<link rel="apple-touch-icon" href="images/icons/icon48.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/icons/icon144.png">
<link rel="apple-touch-icon" sizes="192x192" href="images/icons/icon192.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/icons/icon72.png">
<link rel="apple-touch-icon" sizes="96x96" href="images/icons/icon96.png">
<link rel="canonical" href="https://simpl.info">
<link rel="icon" href="/favicon.ico" type="image/png" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="32x32" href="images/icons/icon32.png">
<link rel="icon" sizes="192x192" href="images/icons/icon192.png">
<link rel="shortcut icon" href="images/icons/icon72.png">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="css/main.css" />
<base target="_blank">
</head>
<body>
<div id="container">
<!-- <div id="highlight">
<p>Subscribe to my free newsletter for audio, video and realtime.</p>
<p>Sign up: <a href="http://bit.ly/signupmedia" title="Newsletter sign-up">bit.ly/signupmedia</a>.</p>
<p>Archive: <a href="http://medianews.me" title="Newsletter archive">medianews.me</a>.</p>
</div> -->
<div id="highlight">
<p>New codelab: <a href="https://codelabs.developers.google.com/codelabs/adaptive-web-media">High performance video for the mobile web</a></p>
</div>
<h1>simpl.info</h1>
<div class="custom-follow-button">
<a href="https://twitter.com/intent/follow?original_referer=http%3A%2F%2Fsimpl.info%2F&ref_src=twsrc%5Etfw&region=follow_link&screen_name=sw12&tw_p=followbutton" target="_blank" alt="Follow @sw12">
<i class="btn-icon"></i>
<span class="btn-text">Follow</span>
</a>
</div>
<p>This site aims to provide simplest possible examples of HTML, CSS and JavaScript.</p>
<p>There are shortcuts for many of these pages (see <a href="shortcuts" title="Full list of redirect URL shortcuts">full list</a>). For example, <a href="//simpl.info/v" title="Video element demo">simpl.info/v</a> redirects to <a href="//simpl.info/video" title="Video element demo">simpl.info/video</a>.</p>
<p>I also maintain a <a href="https://docs.google.com/document/d/1Uy7zybjFecFWmW2xTbYKN8t-JhG0_hlJzW6xJjkUA-I" title="HTML, CSS and JavaScript resources">list of resources</a> for tutorials, documentation and reference material.</p>
<p class="borderBelow">Submit bug reports, requests and comments at <a href="https://github.com/samdutton/simpl" title="simpl.info github repo">github.com/samdutton/simpl</a>.</p>
<div id="links">
<a href="xhr" title="Ajax (aka XMLHttpRequest) example">Ajax (aka XMLHttpRequest)</a>
<a href="appcache" title="Application Cache">AppCache</a>
<a href="array" title="Array methods">Array methods: some, every, filter, forEach, map</a>
<a href="audio" title="Audio element">&lt;audio&gt;</a>
<a href="audiodata" title="Audio Data API">Audio Data</a>
<a href="battery" title="Battery API">Battery API</a>
<a href="canplaytype" title="canPlayType()">canPlayType()</a>
<a href="canvas" title="Canvas element example">&lt;canvas&gt;</a>
<a href="cssfilters" title="CSS filters">CSS filters</a>
<a href="flexboxcenter" title="CSS flexbox center">CSS flexbox: center</a>
<a href="flexboxexpand" title="CSS flexbox expand-to-fit example">CSS flexbox: expand to fit</a>
<a href="cssnegativeselector" title="CSS negative selector example">CSS negative selector</a>
<!-- <a href="cssoverflowscrolling" title="CSS overflow-scrolling example">CSS overflow-scrolling</a>
-->
<a href="csstextindent" title="CSS text-indent example">CSS text-indent</a>
<a href="csstransition" title="CSS transition example">CSS transition</a>
<a href="rtcdatachannel" title="RTCDataChannel example">Data channels</a>
<a href="datalist" title="Input datalist element example">&lt;datalist&gt;</a>
<a href="details" title="Details/summary element example">&lt;details&gt; and &lt;summary&gt;</a>
<a href="devicemotion" title="Device Motion example">Device Motion</a>
<a href="deviceorientation" title="Device Orientation example">Device Orientation</a>
<a href="eventsource" title="EventSource (Server-Sent Events) example">EventSource (aka Server-Sent Events)</a>
<a href="fetch" title="Fetch API example">Fetch</a>
<a href="localstorage" title="Fieldset example">Fieldset (localStorage example)</a>
<a href="filesystem" title="FileSystem example">FileSystem</a>
<a href="filesystem/blob" title="FileSystem example using the Blob API">FileSystem using Blob</a>
<a href="fullscreen" title="Fullscren">Fullscreen</a>
<a href="geolocation" title="Geolocation example">Geolocation</a>
<a href="https://www.simpl.info/getusermedia" title="getUserMedia() example">getUserMedia</a>
<a href="https://www.simpl.info/getusermedia/constraints" title="getUserMedia() example with constraints">getUserMedia: choose resolution</a>
<a href="https://www.simpl.info/getusermedia/sources" title="getUserMedia() example using MediaStreamTrack.getSources()">getUserMedia: select camera and microphone</a>
<a href="history" title="History method example">History pushState() and popState()</a>
<a href="softhyphen" title="Soft hyphen (&amp;shy;) example">Hyphenation (soft hyphen)</a>
<a href="iframe" title="iframe element example">&lt;iframe&gt;</a>
<a href="bigimage" title="Example of an image with large file size">Image: a big one (20MB)</a>
<a href="imagecapture" title="ImageCapture example: take a photo">ImageCapture</a>
<a href="inputtypes" title="Examples of input elements with different types">Input types: email, tel, url, date, time, colour</a>
<!-- <a href="indexeddb" title="IndexedDB example">IndexedDB</a> -->
<a href="localstorage" title="localStorage">localStorage</a>
<a href="mediacapture" title="Media Capture API">Media Capture (using &lt;input&gt;)</a>
<a href="mediafragments" title="Media Fragments API">Media Fragments</a>
<a href="mse" title="Media Source Extensions example">Media Source Extensions (MSE)</a>
<a href="getusermedia/sources" title="getUserMedia() example using MediaStreamTrack.getSources()">MediaStreamTrack.getSources()</a>
<a href="mediarecorder" title="MediaStream Recording API">MediaRecorder</a>
<a href="mutationobserver" title="MutationObserver example">MutationObserver</a>
<a href="observe" title="Object.observe() example">Object.observe()</a>
<a href="navigationtiming" title="Navigation Timing demo">Navigation Timing (window.performance)</a>
<a href="useragent" title="navigator.userAgent">navigator.userAgent</a>
<a href="notification" title="Notification API example">Notification</a>
<a href="pagevisibility" title="Page Visibility API example">Page Visibility API</a>
<a href="pictureart" title="Picture element art direction example">&lt;picture&gt; for art direction</a>
<a href="picturetype" title="Picture element alternative sources example">&lt;picture&gt; with alternative file types</a>
<a href="postmessage" title="postMessage() example">postMessage()</a>
<a href="promises" title="Promises example">promises</a>
<a href="queryselector" title="querySelector() and querySelectorAll() examples">querySelector() and querySelectorAll()</a>
<a href="resourcetiming" title="Resource Timing demo">Resource Timing</a>
<a href="rtcdatachannel" title="RTCDataChannel">RTCDataChannel (WebRTC)</a>
<a href="rtcpeerconnection" title="RTCPeerConnection">RTCPeerConnection (WebRTC)</a>
<a href="eventsource" title="EventSource (Server-Sent Events) example">Server-Sent Events (aka EventSource)</a>
<a href="serviceworker" title="sessionStorage example">ServiceWorker</a>
<a href="sizeswvalues" title="img element: sizes attribute with srcset using w values">sizes attribute with srcset using w values</a>
<a href="sessionstorage" title="sessionStorage example">sessionStorage</a>
<a href="srcsetwvalues" title="img element with srcset attribute using w values">srcset: using w values with &lt;img&gt;</a>
<a href="srcsetxvalues" title="img element with srcset attribute using x values">srcset: using x values with &lt;img&gt;</a>
<a href="stt" title="Web Speech API: speech to text">speech recognition</a>
<a href="tts" title="Web Speech API: text to speech">speech synthesis</a>
<a href="svg" title="SVG example">SVG</a>
<a href="track" title="Track element">&lt;track&gt; with &lt;video&gt;</a>
<a href="track/audio" title="Track element for audio">&lt;track&gt; with &lt;audio&gt;</a>
<a href="track/map" title="Track element with synchronised metadata">&lt;track&gt; to synchronise video playback with Google Maps &amp; Street View display</a>
<a href="useragent" title="User agent example">user agent</a>
<a href="vibrate" title="navigator.vibrate() example">Vibrate</a>
<a href="video" title="Video element">&lt;video&gt; with autoplay</a>
<a href="videoalpha" title="Video with alpha transparency">&lt;video&gt; with alpha transparency</a>
<a href="video/events" title="All video element events">&lt;video&gt; events</a>
<a href="video/scripted" title="Video with scripted playback">&lt;video&gt; with scripted playback</a>
<a href="longvideo" title="Long video example (~380MB)">long video (~380MB)</a>
<a href="video/multi" title="20+ video elements">multiple video elements</a>
<a href="videomedia" title="Video media query attribute">video with src media query</a>
<a href="videooverlay" title="Long video example (~380MB)">video with &lt;div&gt; overlay</a>
<a href="video/range" title="Video range request using the Fetch API">video range request</a>
<a href="webaudio" title="Web Audio">Web Audio</a>
<a href="webfonts" title="Web fonts">Web Fonts</a>
<a href="webgl" title="Fullscren">WebGL</a>
<a href="webp" title="WebP">WebP</a>
<a href="webrtc" title="WebRTC home">WebRTC (getUserMedia, RTCPeerConnection, RTCDataChannel)</a>
<a href="stt" title="Web Speech API: speech to text">Web Speech: speech recognition</a>
<a href="tts" title="Web Speech API: text to speech">Web Speech: speech synthesis</a>
<a href="websql" title="WebSQL">WebSQL</a>
<a href="webworkers" title="Web Workers example">Web Workers</a>
<a href="xhr" title="XMLHttpRequest (aka Ajax) example">XMLHttpRequest (aka Ajax)</a>
</div>
<a href="https://github.com/samdutton/simpl/blob/gh-pages/index.html" title="View source for this page on GitHub" id="viewSource">View source on GitHub</a>
</div> <!-- container -->
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-33848682-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ?
'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>