by Estelle Weyl at HTML5 Texas Conference in Austin, TX (Deck)
It may feel like the HTML5, CSS3 and ECMAScript specifications are moving along at a snails pace, but browser capabilities are moving quickly, and it is difficult to keep up with all the new feature support. In this session we’ll cover some brand spanking new and older but unknown features that make debugging, designing and developing more fun.
1. $(‘selector’) without jQuery
- Supported since IE8
- You can access DOM elements with standard css selectors
2. Everything is Editable
- Everything can be updated
- Can even paste!
- Updates the DOM
- Turn anything into a form element
- Supported since IE5
3. Can store lots of data
- LocalStorage
- SessionStorage
- WebSQL (deprecated but available in webkit)
- IndexedDB (new standard, but not supported in any browser)
Cookie Limitations
- Sent with every HTTP request (in plain text)
- Limited to 4KB each, 20 per domain & 300 per browser
- No real API
Local and Session Storage
- Not sent to server (more secure / less bandwidth)
- Limited to 5MB each
- Long term or session long
- Simmple API
localStorage
- Save text value on the client-side (crash-safe)
- only works on the same domain
- very simple to use
Data Storage
- localStorage ➫ persistent storage
Supported everywhere since ie8+ - sessionStorage ➫ per tab storage
Supported everywhere since ie8+ - WebSQL ➫ Mobile Web Apps
deprecated. Will never be in FF/IE - IndexedDB ➫ 2014?
Found in IE10, FF, Chrome, BB. Not Safari or other mobile yet
4. SVG as Background Images (Latecomers: IE9 & Android 3)
- Scalable Vector Graphics
- 2D image format
- supports interactivity and animation
Remember that it uses DOM nodes and can slow things down
5. Can count with CSS (supported since IE8)
can create a counter on any element and increment on the next instance of that element. You can reset when you get to another element and make your own numbered outlines.
It is generated content and not part of the DOM
6. CSS can Calculate
(Prefixed in FF4, Saf6, BB10, Chr19, FF15 Android – Without prefix in FF16, IE 9+, Chrome 26 – No Opera, Android or mobile Chrome love…. yet)
Calculate percentages in the box model.
7. IE6 and IE7 can buy you a house
Charge more for old browser support!
8. Browsers can take a picture
(Firefox, Chrome and Opera only)
using getUserMedia
9. Animate Sprites
using animation, timing and bezier curves (cubic-bezier.com)
Check out the Gangham Style css animation!
10. Help you manage memory
In the debugger – Chrome Developer Tools – Timeline -> Memory
[…] 10 Things You Didn’t Know a Browser Could Do: Thanks Jonathan Jeter for your recap of Estelle Weyl‘s presentation at this weekend’s HTML5.tx conference. One of my personal favorites is counting with CSS. For more info, view Estelle’s presentation slides on Github. […]