Post on 20-Jan-2015
description
HTML Elements Standards
by: Tiago Cardoso
Why bother? I can still do it
● I can do it all with client-side handling ● Every element is standard-natively clickable ● Prevent any native handling in every custom
element event scripting (e.preventDefault...)
● it only works with javascript in some cases.
Well, you kinda should bother!
● Yahoo: 2% of their users are jscript-disabled ● Statistics don't tell whole story: No-js-users
can't reach all pages in only-javascript websites and tend not to come back if nothing works.
● Browser native styling for elements. ● Screen readers, Mobile Devices, etc...
devices with other user inputs. Semantics very important.
● Focusable elements (tabindex does not
solve it all) ● Navigable through keyboard tab key.
● Specific events. ex: visited/clicked/etc.... for anchor tags.
● - anchor tags get crawled, button tags do not
("nofollow" rule is not followed 100%)
Part 1Anchor Tags and Buttons
Elements
Anchor Tag: <a ....></a> Button Tag: <button>....</button> Input Submit: <input type="submit"/> Input Button: <input type="button"/>
<a href=#a> The Anchor Tag </a>
● A link is a connection from one Web resource to another.
● The link starts at the "source" anchor and points to the "destination" anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.)
<a href="#b">..</a>
<a id="b" href="c.html">...</a>
x.html c.html
<html....>...
<button> The Button Tag </button>
● form inner element ● Defines a push button, submission of form. ● Inside the element you can put content, like
text or images.
<input type=submit value=Submit/>
● form inner element ● Defines a button for submission of form. ● Label of the button is defined by its value
attribute. No option to change background image natively.
<input type=button value=but /input>
● form inner element ● The input buttons represents a button in a
form with no default behavior. ● Input buttons and input submits are styled
similarly (the same difficulties, therefore). ● Typically associated to client-side behaviour.
Conclusion
Links vs. buttons - Links must never change state, while buttons could potentially change state. - similar to RESTful semantics; GET vs. POST/PUT/DELETE
Use case: the post action links
Like/Comment/Share
Use case: the post action links
like
Use case: the post action links
comment
Use case: the post action links
share
Use case: the post action links
like
Use case: the post action links
comment
Use case: the post action links
share
Semantic AnalysisLike Action Adds a new “Like/Follower” to a post -> changes state in the server. Comment Action Makes the comment form visible to the client -> client side flickering. Share Action Facebook: Opens a pop-up formRestorm: Loads an inline form
Use case: the post action links
3 - 1
semantic match
Questions?
Possible Topics: ● discuss the nofollow attribute; ● web-crawling implications in our HTML documents;
End of Part 1
Part DeuxForm Elements
Intro
● Design and Appearance decisions sometimes drive the Architectural Design.
● Clients sometimes (most of times?) base their requisites
on something they saw, like how it looked, but don't know what it does. Developers tend to sometimes follow that lead.
Should it be the other way round? Is there a balance?
Why you should use? (form elements)
● No need to provide script that handles functionality
● Works for JS and no-JS forms ( <3 ) ● All reasons described in Part 1 that apply to
them
Why would you run away from it?
● Form native elements are usually hard to style.
● Cross-browser styling on top of that (<3 your
IEs) (please interrupt me if you have something to add to this list)
Radio Buttons and CheckboxesRadio Buttons:
- used for selection of an item from a list of items. Checkboxes:
- used for selection of multiple items from a list of items. checked: Gives the default checkedness of the input element.name: Gives the name of the input element.required: When specified, the element is required.value: Gives the default value of the input element.
Radio Buttons and Checkboxes
Issues: ● how to style them like tag buttons? ● how to make the radio/checkboxes
disappear and leave only the label? ● And how to make them work in every used
browser?
Use case - RightclearingThe Tags
● Multiple selection of items, orthodoxly represented by checkboxes;
● styling concerns led to the decision of implementing them with anchor tags supported by an hidden input field and a javascript plugin;
Use case - Rightclearing
Pros:● looks really good in all of the supported browsers!Cons:● a lot of client-side scripting (the better part of a custom
plugin of ours) was written to simulate part of the behaviour that the checkbox natively provides.
● non-focusable, does not respond to keyboard events (no mouse, no fun. could be part of the plugin mentioned above, but it would just bloat it).
● javascript-dependent, main reason why the RC search doesn’t work without script (correct me if I’m wrong).
LET THE BROWSER WARS BEGIN!standard css:
.genres { border: medium none; border-radius: 0 0 3px 3px; float: left; margin: 0; padding: 5px; display: inline-block; vertical-align: middle; background: url("http://www.rightclearing.com/images/rightclearing/blue.png?54f75c7") repeat scroll 0 0 transparent; margin-right: 0;}
div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p { background: none repeat scroll 0 0 transparent; border: 0 none; font-size: 100%; margin: 0; outline: 0 none; padding: 0; vertical-align: baseline;}
Tryout 1: Anchor Tag Tags (present)
HTML:
<div class="genres">
<a href="#" data-value="2" class="genres_2">
<div class="left"></div>
<div class="center">
<span class="tag_text">Alternative</span>
</div>
<div class="right"></div>
</a>
<a href="#" data-value="3" class="genres_3 selected">
<div class="left"></div>
<div class="center">
<span class="tag_text">Rock</span>
</div>
<div class="right"></div>
</a>
</div>
a { border: 1px solid rgba(33, 33, 38, 0.55); color: rgba(33, 33, 38, 0.9); cursor: pointer; float: left; font-size: 13px; font-weight: normal; line-height: 24px; margin: 0 0 3px 3px; position: relative; white-space: nowrap; border: medium none; opacity: 1; background: none repeat scroll 0 0 transparent; border: 0 none; font-size: 100%; outline: 0 none; vertical-align: baseline; text-decoration: none;}.left { border-radius: 3px 0 0 3px; width: 5px;}.right { border-radius: 0 3px 3px 0; width: 5px;}a:hover { color: #0096E6; text-shadow: 0 0 4px rgba(0, 150, 230, 0.4);}a:hover > div { background: none repeat scroll 0 0 #0096E6; color: #FFFFFF; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6); }a.selected {
background: url("http://www.rightclearing.com/images/rightclearing/blue.png?54f75c7") repeat scroll 0 0 transparent;}
CSS: a div { display: inline-block; float: left; height: 24px !important; color: #FFFFFF; }
Anchor Tag Tags: Output
Firefox
Anchor Tag Tags: Output
Firefox
Chrome
Anchor Tag Tags: Output
Firefox
Chrome
Opera
Anchor Tag Tags: Output
Firefox
Chrome
Opera
IE9
Anchor Tag Tags: Output
Firefox
Chrome
Opera
IE9
IE8
Anchor Tag Tags: Output
Firefox
Chrome
Opera
IE9
IE8
IE7
Tryout Deux: Checkbox Tags (future?)
HTML:
<div class="genres">
<label>
<input type="checkbox" name="search[genres]" value="2">
<div class="title">
Alternative
</div>
</label>
<label>
<input type="checkbox" name="search[genres]" value="3">
<div class="title">
Rock
</div>
</label>
</div>
CSS: label { border: 1px solid rgba(33, 33, 38, 0.55); color: rgba(33, 33, 38, 0.9); cursor: pointer; float: left; font-size: 13px; font-weight: normal; line-height: 24px; margin: 0 0 3px 3px; position: relative; white-space: nowrap; border: medium none; opacity: 1; background: none repeat scroll 0 0 transparent; border: 0 none; font-size: 100%; outline: 0 none; vertical-align: baseline;} .title:hover { background: none repeat scroll 0 0 #00AAFA; color: #FFFFFF; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6); } :root input { position: absolute; clip: rect(0,0,0,0); } .title { display: inline-block; *display: inline; border-radius: 3px; padding: 0 5px;} input:checked + .title { background: none repeat scroll 0 0 #0096E6; color: #FFFFFF; text-shadow: 0 0 2px rgba(255, 255, 255, 0.6); }
Checkbox Tags: Output
Firefox
Checkbox Tags: Output
Firefox
Chrome
Checkbox Tags: Output
Firefox
Chrome
Opera
Checkbox Tags: Output
Firefox
Chrome
Opera
IE9
Checkbox Tags: Output
Firefox
Chrome
Opera
IE9
IE8
Checkbox Tags: Output
Firefox
Chrome
Opera
IE9
IE8
IE7
Checkbox Tags: Output
Firefox
Chrome
Opera
IE9
IE8
IE7
Safari
(it will work in IE 10)
Conclusions
Appearance 1 - Everything looks good.(unsupported css features in the IE <=9, like border-radius and text-shadow)
2 - Everything looks at least functional. Graceful Degradation. Functionality 1 - Works with javascript.2 - Works. point.
Appearance over Functionality or
Functionality over Appearance?
Questions?
Possible Topics: ● Why doesn’t the checkbox disappear in the IEs 8-? (hint: IE is evil)
Referenceshttp://developer.yahoo.com/blogs/ydn/posts/2010/10/how-many-users-have-javascript-disabled/http://www.w3.org/TR/html401/struct/links.htmlhttp://www.w3schools.com/tags/tag_button.asphttp://discuss.joelonsoftware.com/default.asp?design.4.541972.17http://www.w3.org/wiki/HTML/Elements/input/submithttp://www.w3.org/wiki/HTML/Elements/input/buttonhttp://www.w3.org/wiki/HTML/Elements/input/radiohttp://www.w3.org/wiki/HTML/Elements/input/checkboxhttp://jsfiddle.net/http://lea.verou.me/2011/05/rule-filtering-based-on-specific-selectors-support/http://yfrog.com/h7ja8ep