| Feature | On Desktop | On Mobile |
|---|---|---|
| PNG alpha transparency | Yes | Yes |
| querySelector/querySelectorAll | Yes | |
| getElementsByClassName | Yes | |
| CSS3 Multiple backgrounds | Yes | |
| CSS3 Background-image options | Yes | |
| CSS Table display | Yes | |
| CSS Generated content | Yes | |
| CSS 2.1 selectors | Yes | Yes |
| CSS3 selectors | Yes | |
| CSS3 Text-shadow | Yes | |
| CSS3 Colors | Yes | |
| CSS3 Box-sizing | Yes | |
| CSS3 Media Queries | Yes | |
| CSS3 Multiple column layout | Yes | |
| Canvas (basic support) | Yes | |
| Cross-document messaging | Yes | |
| Data URIs | Yes | |
| XHTML served as application/xhtml+xml | Yes | |
| CSS3 Opacity | Yes | Yes |
| JSON parsing | Yes | Yes |
| CSS3 Text-overflow | Yes | |
| CSS3 Overflow-wrap | Yes | Yes |
| CSS min/max-width/height | Yes | Yes |
| CSS inline-block | Yes | Yes |
| dataset & data-* attributes | Yes | Yes |
| CSS Counters | Yes | |
| getComputedStyle | Yes | |
| contentEditable | Yes | |
| Drag and Drop | Yes |
Pretty damning.
At “100%” coverage of features that are in all browsers split by Mobile and Desktop then this is all we have to play with.
Ok, this is actually misleading. If you are willing to miss out on 1% extra reach for your desktop audience then you can get similar feature parity with mobile. But still the feature support that is ubiquitous across the web is actually pretty small especially if you are supporting IE8.
How do I know what the web platform is?
Last year I built iwanttouse.com to make it easier for you to determine the cost on your userbase supporting certain features will have. If I support X, I can only reach Y% of the web’s users
The project is pretty simple. It is a projection of the data on CanIUse.com. For a given “feature” it looks for the earliest version on a platform that it was supported on and sums the “usage”.
I split the feature set by Mobile and Desktop and it gives you some pretty interesting nuggets of data.
Two things that fell out of this:
- Features for Free. If I choose Web Audio (43% on mobile) I can also safely use other features such as Server-sent DOM Events because all browsers that support the former support the latter. (Note: the inverse relationship is not always true)
- Ubiquitous Platform features. As above but platform features that we can rely on being present in all browsers with any significant share.
I want to focus on Ubiquitous Platform features.
How do we improve the web platform?
As a web developer today I face a couple of problems: Legacy browsers that aren’t updated and inconsistent implementation across browsers.
The web feels like a pirate ship, everyone is hacking and slashing in different directions and we are lucky enough that the ship goes forwards. Slowly. How do we become a Ben Ainslie America’s Cup winning yacht?… (Ack, I can’t believe I said that). Point is, how can we improve the modern mobile web consistently if there are multiple large players in the eco-system?
- Wait it out and let the Browser vendors do their thing. This will change over time as people move off the platforms that have stopped progressing as their devices are renewed.
- Ignore the old browsers and the users that use them and go for it.
- Push for consistency across the platform.
My preference is for 2 and 3. But actually 1 is what we really really need to solve.
I like to solve level 1 problems — problems with a technical solution — they’re the things I can fix. I can meet developers and work with them on their sites to measurably make the web better one large site at a time, but it is all small scale…
I decided to take a peek at the features that are supported across the latest mobile browsers and the reach that will have: 44%. We can’t honestly say to a business that you should build experiences for 44% of your potential user base (well, it depends who you want to sell or attract - your demographics might be highly skewed - i.e.. Government legislation, Business demands.)
If you look at the head of the mobile web (44%) there is a compelling feature set. You can build some amazing applications with it.
| Feature | Android Browser 4.4 | iOS Safari 7.0 | Chrome for Android 32.0 | IE Mobile 10.0 | Opera Mobile 16.0 | Firefox for Android 26.0 | Blackberry Browser 10.0 |
|---|---|---|---|---|---|---|---|
| XHTML served as application/xhtml+xml | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| XMLHttpRequest 2 | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| WOFF - Web Open Font Format | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Web Workers | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Web Sockets | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Video element | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| ECMAScript 5 Strict Mode | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Typed Arrays | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Transforms | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Text-overflow | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| SVG in HTML img element | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Inline SVG in HTML5 | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| SVG filters | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| SVG in CSS backgrounds | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| SVG (basic support) | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| defer attribute for external scripts | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| async attribute for external scripts | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| requestAnimationFrame | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| rem (root em) units | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| querySelector/querySelectorAll | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| PNG alpha transparency | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Page Visibility | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS outline | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Offline web applications | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Web Storage - name/value pairs | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Multiple backgrounds | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS min/max-width/height | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| matchMedia | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| JSON parsing | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Range input type | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| input placeholder attribute | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS inline-block | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| sandbox attribute for iframes | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| New semantic elements | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Session history management | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Hashchange event | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| getElementsByClassName | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| getComputedStyle | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Geolocation | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| @font-face Web fonts | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| FileReader API | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Colors | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Transitions | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Text-shadow | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS Table display | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 selectors | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS 2.1 selectors | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS Repeating Gradients | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Opacity | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Media Queries | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS Gradients | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS Generated content | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS Counters | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Box-shadow | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Animation | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Cross-Origin Resource Sharing | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| contenteditable attribute (basic support) | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| classList (DOMTokenList ) | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Text API for Canvas | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Canvas (basic support) | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| calc() as CSS unit value | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Border-radius (rounded corners) | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Background-image options | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Audio element | Yes | Yes | Yes | Yes | Yes | Yes | Yes |
| Cross-document messaging | Yes | Yes | Yes | Partial | Yes | Yes | Yes |
| CSS3 3D Transforms | Yes | Yes | Yes | Partial | Yes | Yes | Yes |
| MPEG-4/H.264 video format | Yes | Yes | Yes | Yes | Yes | Partial | Yes |
| Data URIs | Yes | Yes | Yes | Partial | Yes | Yes | Yes |
| dataset & data-* attributes | Yes | Yes | Yes | Partial | Yes | Yes | Yes |
| CSS position:fixed | Yes | Partial | Yes | Yes | Yes | Yes | Yes |
| Content Security Policy | Yes | Yes | Yes | Partial | Yes | Yes | Yes |
| Blob constructing | Partial | Yes | Yes | Yes | Yes | Yes | Yes |
| CSS3 Overflow-wrap | Yes | Yes | Yes | Partial | Yes | Partial | Yes |
| Progress & Meter | Yes | Partial | Yes | Partial | Yes | Yes | Yes |
| Flexible Box Layout Module | Yes | Yes | Yes | Partial | Yes | Partial | Yes |
But like I said. 44%. It’s a big head but not a feasible platform for the vast majority of companies. I produced the following breakdown of features that we should get Chrome and other vendors to fix feature support at a tactical level to make for a more consistent web and make developers lives easier. The problem is we are only fixing it for 44% of the web’s users. Documented below for consistency
| Feature | Android Browser 4.4 | iOS Safari 7.0 | Chrome for Android 32.0 | IE Mobile 10.0 | Opera Mobile 16.0 | Firefox for Android 26.0 | Blackberry Browser 10.0 |
|---|---|---|---|---|---|---|---|
| TTF/OTF - TrueType and OpenType font support | Yes | Yes | Yes | Unknown | Yes | Yes | Yes |
| Touch events | Yes | Yes | Yes | No | Yes | Yes | Yes |
| Navigation Timing API | Yes | No | Yes | Yes | Yes | Yes | Yes |
| Mutation Observer | Yes | Yes | Yes | No | Yes | Yes | Yes |
| Intrinsic & Extrinsic Sizing | Yes | Yes | Yes | No | Yes | Yes | Yes |
| Font feature settings | Yes | Yes | Yes | No | Yes | Yes | Yes |
| File API | Yes | Yes | Yes | No | Yes | Yes | Yes |
| Server-sent DOM events | Yes | Yes | Yes | No | Yes | Yes | Yes |
| CSS3 tab-size | Yes | Yes | Yes | No | Yes | Yes | Yes |
| Channel messaging | Yes | Yes | Yes | Yes | Yes | No | Yes |
| CSS3 Border images | Yes | Yes | Yes | No | Yes | Yes | Yes |
| Blob URLs | Yes | Yes | Yes | No | Yes | Yes | Yes |
| Viewport units: vw, vh, vmin, vmax | Yes | Partial | Yes | Partial | Yes | Yes | Partial |
| SVG SMIL animation | Yes | Partial | Yes | No | Yes | Yes | Yes |
| IndexedDB | Yes | No | Yes | Yes | Yes | Yes | Partial |
| CSS3 word-break | Partial | Partial | Partial | Yes | Partial | Yes | Partial |
| SVG fonts | Yes | Yes | Yes | No | Yes | No | Yes |
| Download attribute | Yes | No | Yes | No | Yes | Yes | Yes |
| Details & Summary elements | Yes | Yes | Yes | No | Yes | No | Yes |
| CSS Filter Effects | Yes | Yes | Yes | No | Yes | No | Yes |
| CSS3 Multiple column layout | Partial | Partial | Partial | Yes | Partial | Partial | Partial |
| Date/time input types | Yes | Yes | Yes | No | Partial | No | Yes |
| HTML5 form features | Partial | Yes | Partial | Partial | Partial | Partial | Partial |
| Form validation | No | No | Yes | Partial | Yes | Yes | Yes |
| CSS3 Box-sizing | Partial | Partial | Partial | Partial | Partial | Yes | Partial |
| WAI-ARIA Accessibility features | Partial | Partial | Partial | Yes | Partial | Yes | No |
| SVG effects for HTML | Partial | Partial | Partial | No | Partial | Yes | Yes |
| matches() DOM method | Partial | Partial | Partial | Partial | Partial | Partial | Partial |
| HTML templates | Yes | No | Yes | No | Yes | Yes | No |
| Strict Transport Security | Yes | Unknown | Yes | No | Yes | Yes | No |
| getUserMedia/Stream API | No | No | Yes | No | Yes | Yes | Yes |
| Color input type | Yes | No | Yes | No | Yes | No | Yes |
| CSS Feature Queries | Yes | No | Yes | No | Yes | Yes | No |
| Clipboard API | Partial | Partial | Partial | No | Partial | Yes | Partial |
| Canvas blend modes | Yes | Yes | Yes | No | No | Yes | No |
| Ruby annotation | Partial | Partial | Partial | Partial | Partial | No | Partial |
| Number input type | Partial | Partial | Partial | Partial | Partial | No | Partial |
| DeviceOrientation events | Partial | Partial | Partial | No | Partial | Partial | Partial |
| WebGL - 3D Canvas graphics | No | No | Partial | No | Yes | Partial | Yes |
| Web Notifications | Partial | No | No | No | Partial | Yes | Yes |
| Full Screen API | No | No | Yes | No | Yes | Partial | Partial |
| WebP image format | Yes | No | Yes | No | Yes | No | No |
| SVG fragment identifiers | No | No | No | Yes | No | Yes | Yes |
| Shadow DOM | Yes | No | Yes | No | Yes | No | No |
| WebRTC Peer-to-peer connections | No | No | Yes | No | Yes | Yes | No |
| MathML | No | Yes | No | No | No | Yes | Yes |
| Filesystem & FileWriter API | No | No | Yes | No | Yes | No | Yes |
| CSS Masks | Partial | Partial | Partial | No | Partial | No | Partial |
| Web Audio API | No | Yes | Yes | No | No | Yes | No |
| WebM video format | Partial | No | Yes | No | Partial | Partial | No |
| Datalist element | No | No | No | No | No | Yes | Yes |
| CSS Hyphenation | No | Yes | No | No | No | Yes | No |
| CSS Regions | No | Yes | No | Partial | No | No | No |
| Promises | No | No | Partial | No | No | Partial | No |
| Scoped CSS | No | No | No | No | No | Yes | No |
| Shared Web Workers | No | No | No | No | No | No | Yes |
| Opus | No | No | No | No | No | Yes | No |
| Ogg/Theora video format | No | No | No | No | No | Yes | No |
| JPEG XR image format | No | No | No | Yes | No | No | No |
| Drag and Drop | No | No | No | Yes | No | No | No |
| CSS resize property | No | No | No | No | No | Yes | No |
| CSS Grid Layout | No | No | No | Yes | No | No | No |
| Pointer events | No | No | No | Partial | No | No | No |
| CSS3 object-fit/object-position | No | No | No | No | No | No | No |
| Toolbar/context menu | No | No | No | No | No | No | No |
| CSS Variables | No | No | No | No | No | No | No |
| Blending of CSS image | No | No | No | No | No | No | No |
Getting these features implemented would be cool but there is no additional reach at all. More users will not be affected by these new features. We didn’t increase the size of the user base. Yes we might get an amazing WebGL based WebComponents app that people use but will they upgrade their browser or phone to be able to use it? Probably not.
So what do we do?
How do we move the web platform forward in a meaningful way?
It is hard.
Do we want to get back to a world where this is a thing?
Maybe.???
At a minimum we should:
- Build for the 90% and get your partners and customers to see at a minimum the experience that you can build with a huge amount of reach.
- Understand the choices you make and the impact they have. Push your customers and partners to use progressive enchancement. Don’t exclude a huge number of users for a single feature.
- Push for consistency over new platform features across all browser vendors.