HTML has a problem. As implemented in browsers many interactive elements cannot be styled as desired by web developers, or developers as directed by designers, marketing or any of the numerous others whose wishes code cutters must abide by.
Something borrowed, something blue
Take for example, Google’s gmail UI, a ‘web application’ if there ever was one. It consists of literally 100’s of controls, many of which are simple controls such as buttons and checkboxes.
Looking under the hood, what is evident is there are a lot of custom controls built from <div>‘s and <span>‘s:
HTML: 1, HEAD: 1, STYLE: 8, META: 6, TITLE: 1, LINK: 3, SCRIPT: 11, BODY: 1, IFRAME: 11, DIV: 3757, FORM: 3, INPUT: 11, NOSCRIPT: 1, P: 1, A: 107, B: 433, OL: 1, LI: 19, BR: 115, UL: 2, SPAN: 1603, IMG: 263, H2: 6, FIELDSET: 2, LEGEND: 2, TABLE: 10, TBODY: 61, TR: 284, TD: 1618, BUTTON: 1, H1: 1, NOBR: 1, H3: 6, HR: 1, COLGROUP: 5, COL: 34, TEXTAREA: 1.
Digging a little deeper:
There are 1172 instances of the role attribute, including:
- 304 –
role="checkbox" - 83 –
role="button" - 54 –
role="option"
These roles are some examples of native elements of HTML that in 2015 continue to be re-invented using <div>‘s and <span>‘s, but have been around since pretty much the dawn of HTML. The <button> and <input type="button"> elements are latecomers as they first appeared in HTML 4 in 1999, while <input type="checkbox"> and <option> appeared in HTML 2 in 1995.
Now in 2015 we have web components re-inventing native HTML buttons, radio buttons and checkboxes, for relief from the scourge of divitis, perpetrated upon us by the as shipped inability to style a native HTML element as desired.
Is it just me, or are new web UI technologies continuing to try to solve the wrong problems?
When will browsers implement #HTML5 UI features in a way that web developers want to use them? #fronteers 2010 pic.twitter.com/mp2uhzHNnE
— Steve Faulkner (@stevefaulkner) February 1, 2015
@codepo8 suggest developers want browsers to provide functional UI structures that can be easily painted and decorated, not locked down
— Steve Faulkner (@stevefaulkner) February 1, 2015
@codepo8 old rope <div> and <span> new rope <x-div> and <x-span>
— Steve Faulkner (@stevefaulkner) February 1, 2015
Further reading
- Minimum Viable Custom Elements – thread on w3c web apps mailing list
- Extensibility
- On the accessibility of web components. Again.
