I’ve built a site that aims to provide the simplest possible examples of HTML, CSS and JavaScript:
Motivations:
- ‘show me the code!’
- ‘does technology X work on platform Y?’
- ‘where the heck is that Foo example I saw?’
- a minimum of ‘huh?’
- easier to find simple stuff than gist.github.com, etc.
- simpler and more comprehensive than html5demos.com, w3schools, etc.
- short, consistent, guessable URLs with sensible redirects (e.g. /ajax => /xhr, /pc => /peerconnection)
- easy to maintain
Caveats:
- somewhat oriented to Chrome, and only cross-platform where I can be bothered and/or I think it make sense
- lots missing: media queries, IndexedDB, WebGL, etc. – will add these when I get around to it
- no templating
I hope it’s useful – comments and suggestions much appreciated!
no offence – but its 100% chrome oriented. Would be nice to have simple_xbrowsers.info
>> no offence – but its 100% chrome oriented. Would be nice to have simple_xbrowsers.info
Yeah — simpl_xbrowsers.info would be good. Fork!
To be fair, simpl.info isn’t all Chrome. I did a very quick survey of what’s supported by current versions of browsers (see below — ‘All’ means IE9 or 10 plus Chrome, Firefox and Safari). This list is probably somewhat inaccurate, but it does show that most of the examples will work on most browsers (on desktop at least!)
Also, simpl.info is meant simply to give examples of the newest HTML, CSS and JavaScript — and a few other bits I think are worth highlighting — and not to provide information about API support.
…………………….
All: Ajax (aka XMLHttpRequest)
and
All: AppCache
All: Array methods: some, every, filter, forEach, map
All:
Firefox: Audio Data
Firefox, Chrome: Battery API
All: canPlayType()
All:
Chrome, Safari: CSS filters
CSS flexbox: all
All: CSS transition
Chrome, Firefox: Data channels
All:
Chrome, Safari:
Chrome, Safari: Device Orientation
All: Fieldset (localStorage example)
Chrome: FileSystem
All: Geolocation
Firefox, Chrome, Opera: getUserMedia()
All: History pushState() and popState()
IE, Chrome, Safari: Hyphenation (soft hyphen)
All: Image: a big one (20MB)
All (partial): Input types: email, tel, url, date, time, colour
All: localStorage
Chrome, Safari, Firefox: Media Capture (using )
Firefox, Chrome: MutationObserver
Object.observe()
IE, Firefox, Chrome: Navigation Timing (window.performance)
All: navigator.userAgent
IE, Firefox, Chrome, Opera: Page Visibility API
All: postMessage()
All: querySelector() and querySelectorAll()
Chrome, Firefox: RTCDataChannel (WebRTC)
Firefox, Chrome, Opera: RTCPeerConnection (WebRTC)
All: sessionStorage
All: SVG
Chrome, IE: with
All: (with autoplay)
Web Audio: Chrome, Safari
Web Fonts: All
WebP: Chrome, Opera
WebRTC (getUserMedia, RTCPeerConnection, RTCDataChannel)
WebSQL: Chrome, Safari, Opera
Web Workers: All
XMLHttpRequest (aka Ajax): All