Web Standards for Regular Folk

 

Ryan Hayes for TriJS Meetup

11/11/2014

What are Web Standards?

Web Standards are  a set of specifications on how browsers should do with your markup and code (basically).

HTML + CSS

The W3C (www.w3.org) is the standards body for HTML and CSS!  This includes:

• WebApps (HTML, AJAX, SVG)
• Semantic Web
• Media
• XML
• Web Services (SOAP, REST)
• Browsers+Tools (UA Strings)

JavaScript

A.K.A ECMAScript

ECMA International is the standards organization for JavaScript (but it's called ECMAScript)!

 

Fun Fact #1: Sun Microsystems holds the trademark for JavaScript, so in writing, it's mostly referred to as JS.

 

Fun Fact #2: JavaScript is an implementation of ECMAScript!

Standards are really slow in being finalized! 

Steps of a W3C Spec

(Can be over a 5+ year period and change drastically, or be rescinded) 

• Working Draft
• Candidate Recommendation
• Proposed Recommendation
• Recommendation
• Standard

Perspective: The HTML5 Spec was finalized last week and has been in flux since well before 2009.

Wait on Spec

• Slower perf
• Best for LOB Apps
• Use this option if you like to "Set it and forget it"
• No budget to babysit
• Use JavaScript libraries
• 3rd Party Plugins

Oooh, Shiny!

• Faster perf
• Spec may change (rewrite)
• Add fallbacks/graceful degradation
• Better experience if you can put in the work
• Best for richer, purpose-built apps

Choose Wisely

Practical Tips!

(things to remember so you don't have a bad time)

Vendor Prefixes

Prefixes are a way for browsers to test out implementations themselves, without screwing up the "standard" version.

 

#ProTip!: If you rely solely on a prefix, eventually the web will move to the prefixless one and catch up, but your site won't work on those browsers.

 

->leaverou.github.io/prefixfree/

• -ms- Microsoft
• -moz- Mozilla Foundation (Gecko-based browsers)
• -o- Opera Software
• -webkit- Safari (and other WebKit-based browsers)

Use Feature Detection instead of UserAgent Sniffing!

#ProTip: If you check for a browser version, you are doing it wrong.  

 

Use http://modernizr.com to check for features and then do something else if not supported.  This helps future-proof!