Embed Size (px)
Citation preview
HTML5 & CSS3by Steve Smith - Ordered List, Sidebar Creative FoWD:NYC 2009
Demo files available for download at: http://speaking.orderedlist.com/fowd2009/
Set the StageA few things to keep in mind...
Ask questions at any time
Both the HTML5 and CSS3 specs are unfinished, and still changing
Progressive en(hance|rich)ment
HTML5Something about 2022...
SerializationsHTML5
XMLapplication/xhtml+xml
HTMLtext/html
DoctypesHTML5
XML no doctype, served application/xhtml+xml
<html xmlns="http://www.w3.org/1999/xhtml">
HTML easy doctype, served text/html
<!doctype html>
DEMOStarting with HTML5
demo1.html
<!doctype html> <html> <head> <title>HTML5 Example</title> </head> <body> <h1>Hello World</h1> </body></html>
ValidationHTML5
W3C Validator (Experimental)http://validator.w3.org/
HTML5New Structural Tags
Header<header>
The header of a section, typically a grouping of headlines, but may also contain supplemental information about the section.
Footer<footer>
A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
Navigation<nav>
Defines the navigation area, typically a list of links.
Aside<aside>
Indicates content that is tangentially related to the content around it.
Section<section>
A thematic grouping of content, typically with a header, possibly with a footer.
Article<article>
An independent entry in a blog, magazine, compendium, and so on.
HTML5 BlogA Simple Example
HTML5 BlogThe Header
<body> <header> <h1><a href="#">Blog Name</a></h1> </header></body>
HTML5 BlogThe Navigation
</header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Archives</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav></body>
HTML5 BlogThe Main Content
</nav> <div> <article> <h1><a href="#">Title</a><h1> <p>Lorem ipsum...</p> <footer><a href="#">5 Comments</a></footer> </article> ... </div></body>
HTML5 BlogThe Secondary Content
</div> <aside> <h2>Categories</h2> <ul> <li><a href="#">General</a></li> <li><a href="#">Life</a></li> <li><a href="#">Books</a></li> </ul> </aside></body>
HTML5 BlogThe Footer
</aside> <footer> <p>Copyright © 2008 All Rights</p> </footer></body>
DEMOMoving XHTML to HTML5
Open demo2.html
Replace the structure with the new HTML5 structural tags.
StylingHTML5 Structural Tags
Browsers treat unknown tags as inline elements.
Be sure to display:block;
Remember, it’s header not #header
Link TagIntelligent Defaults
Type attribute assumed text/css
<link rel="stylesheet" href="css/demo2.css" media="screen">
DEMOLinking CSS to HTML5
Open demo2.html
Add a link tag to link css/demo2.css to the newly edited html file.
Fixing IEHTML5 Structural Tags
CSS doesn’t recognize new tag names as selectors
However, if you create a DOM element with JavaScript, CSS figures it out
To get IE to style the header, document.createElement("header");
Script TagIntelligent Defaults
Type attribute assumed text/javascript
<script> // JavaScript here</script>
Fixing IEWith JavaScript
<link...> <script> document.createElement('header'); document.createElement('footer'); document.createElement('aside'); document.createElement('nav'); document.createElement('article'); </script></head>
Other TagsNew in HTML5
Figure<!gure>
Describe a block level image, along with a related caption.
<figure> <dd><img src="/path/to/image.png" alt="LOLCAT"> <dt>OMGWTFBBQ by <cite>LOLPHOTOS</cite></dt></figure>
Mark<m>
Indicates text that is "marked" somehow but not necessarily emphasized.
This is a <m>searched</m> term.
Time<time>
Indicates a specific date or time. datetime attribute is optional
<time>November 3, 2008</time> <time datetime="2008-11-03T09:35:00-05:00"> 9:35am on November 3rd</time>
Meter<meter>
Indicates a numeric value in a specified range.
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>
Progress<progress>
Indicates a progression with current and maximum value.
<progress value="150" max="600">25%</progress>
Video / Audio<video> <audio>
Self explanatory.
<video src="albi.mov"></video>
<audio src="beep.mp3"></audio>
DEMOAdding HTML5 Video
Open demo3.html
Add the video located in media/albi.mov in the video section.
Give it an id of albi.
Auto PlayVideo Attribute
Start playing the video as soon as the page loads.
<video src="media/albi.mov" id="albi" autoplay></video>
DEMOAutoplay HTML5 Video
Open demo3.html
Add the autoplay attribute so the video plays on page load.
ControlsDefault Browser Buttons
Add controls to pause, play, and scrub through videos.
<video src="media/albi.mov" id="albi" controls></video>
DEMOControl HTML5 Video
Open demo3.html
Add the controls attribute so the browser adds default controls to the embedded video.
CustomPlay & Pause with JavaScript
Control the video with JavaScript
video = document.getElementById('albi'); video.play(); video.pause(); video.paused(); // returns true if paused
ExampleButton Controls
Play and Pause with Button Tags
<button onclick="document.getElementById('albi').play()"> Play </button>
<button onclick="document.getElementById('albi').pause()"> Pause </button>
DEMOCustom HTML5 Video Controls
Open demo3.html
Remove the default browser controls and add buttons to play and pause the embedded video.
DEMOHTML5 Audio and Controls
Open demo3.html
Add the audio in media/beep.mp3 into the audio section, and create a JavaScript button to play the sound.
Take 5Next Up: events, data- attributes, and forms
New Eventsonhashchange
This event is triggered when a link changes the hash in the url.
<body onhashchange="someFunction()">
Currently this is only implemented in Internet Explorer.
BenefitsWhy is onhashchange so awesome?
Lets us observe one event to get all the updates on the url hash string of the current page.
If we write JavaScript to get data based on the hash string, we only have to observe one event, rather than the click event on possibly hundreds of links.
Custom Datadata- attributes
You can create any attribute that starts with data- and it’s valid.
<a href="#" data-event-id="34">Event 34</a>
BenefitsWhy are data- attributes helpful?
Web applications can now store meta data about elements directly along with the element itself rather than using improper attributes (rel) or using custom objects.
These attributes are easily added into markup for microformats and the like.
FormsIn HTML5
New InputsMore Types than Just Text
date
datetime
datetime-local
month
week
time
number
url
range (with min and max attributes)
DEMONew HTML5 Input Types
Open demo4.html
Add three new label/input combinations with the email type, the url type, and the date type forgetting a birthdate.
AttributesNew Attributes on Input Elements
required
autofocus
pattern
list (relates to the new datalist element)
DEMONew HTML5 Input Attributes
Open demo4.html
Require the name input, andautofocus on it on page load.
PatternRegular Expression Validation
The value of the pattern element is a regular expression to compare to the input value.
<input type="text" pattern="\d\d\d-\d\d\d-\d\d\d\d" name="phone">
DEMOHTML5 Pattern Validation
Open demo4.html
Add a phone number field validated by the pattern \d\d\d-\d\d\d-\d\d\d\d
SelectorsPseudo-elements in CSS
::enabled and ::disabled
::checked
::valid and ::invalid
::in-range and ::out-of-range
::required and ::optional
DEMOHTML5 Form Selectors
Open demo4.html
Add a style tag in the header, and style invalid fields with a #FFE0DD background and #911 text color.
RepeatableRegions
TemplatesDe!ne and ID
Repeatable regions rely on templates to add new form fields.
<ul> <li id="email-template" repeat="template"> <input type="email" name="email"> </li> </ul>
RemovingRepeatable Regions
If you want a way to remove an added item, you’ll need a button.
<ul> <li id="email-template" repeat="template"> <input type="email" name="email"> <button type="remove">Delete</button> </li> </ul>
AddingRepeatable Regions
If you want a way to add an item from a template, you’ll need a button.
</li> </ul><button type="add" template="email-template"> Add Email</button>
DEMOHTML5 Repeatable Regions
Open demo4.html
Change email field from a single entry to a repeatable region. Headline the region with an h1.
Browsersand Repeatable Regions
Works with Opera 10
No other current browsers support
JavaScript Solutions are very close
http://code.google.com/p/webforms2/ works in everything except IE8.
Finishing UpThings to Watch
NotablesThings to Watch
Local Data Storage for offline data
Drag/Drop API
JavaScript wins
Questions?On HTML5
Take 10Next Up: CSS3 Advanced Selectors
AttributeSelectors in CSS3
Any Valuediv[attr]
Selects an element with the specified attribute set to any value.
a[title] { //styles }
<a href="#" title="My Link">Some Link</a>
DEMOAttribute Selectors
Open demo5.html
Set the background on all a tags to #FF9 that have a rel attribute set.
Exact Valuediv[attr=value]
Selects an element with the specified attribute set to an exact value.
a[title="Home Page"] { //styles }
<a href="/" title="Home Page">Some Link</a>
DEMOAttribute Value Selectors
Open demo5.html
Set the background on all a tags to #FF9 that have a rel attribute equal to exactly met.
In a Listdiv[attr~=value]
Selects elements with the specified attribute is a space separated list of values, one of which is exactly specified.
a[class~=current] { //styles }
<a href="#" class="nav current">Some Link</a> <a href="#" class="current">Another Link</a>
DEMOAttribute Value Selectors
Open demo5.html
Set the background on all a tags to #FF9 that are marked as friends using the rel attribute.
Subcodediv[attr|=value]
Selects an element with the specified attribute is either the exact value, or starts with value- .
a[lang|=en] { //styles }
<a href="#" lang="en">Some Link</a> <a href="#" lang="en-us">Another Link</a>
Starts Withdiv[attr^=value]
Selects an element with the specified attribute starts with the specified value.
a[class^=pi] { //styles }
<a href="#" class="pingpong">Some Link</a> <a href="#" class="pickel">Another Link</a>
Ends Withdiv[attr$=value]
Selects an element with the specified attribute ends with the specified value.
a[class$=pi] { //styles }
<a href="#" class="api">Some Link</a> <a href="#" class="pi">Another Link</a>
Containsdiv[attr*=value]
Selects an element with the specified attribute contains at least one instance of the specified value.
a[class*=der] { //styles }
<a href="#" class="orderedlist">Some Link</a> <a href="#" class="reader">Another Link</a>
PseudoSelectors in CSS3
First Child:!rst-child
Selects the first instance of the selected element within it’s parent.
li:first-child { //styles } /* selects the first list item */
li:first-child a { //styles } /* selects all a tags inside the first list item */
Last Child:last-child
Selects the last instance of the selected element within it’s parent.
li:last-child { //styles } /* selects the last list item */
li:last-child a { //styles } /* selects all a tags inside the last list item */
Nth Child:nth-child(x)
Selects the xth instance of the selected element within it’s parent.
li:nth-child(3) { //styles } /* selects 3rd list item */
Even/Odd:nth-child(even) :nth-child(odd)
Selects either the even or odd instances of the selected element within it’s parent.
li:nth-child(even) { //styles } /* selects 2nd, 4th, 6th, etc. list item */
li:nth-child(odd) { //styles } /* selects 1st, 3rd, 5th, etc. list item */
DEMOPseudo Selectors
Open demo5.html
Highlight the even rows with #FF9 as the background color.
Nth Child +:nth-child(xn+y)
Selects every xth element + y of the selected element within it’s parent.
li:nth-child(3n) { //styles } /* selects the 3rd, 6th, 9th, etc. */
li:nth-child(3n+1) { //styles } /* selects the 1st, 4th, 7th, etc. */
DEMOZebras with Pseudo Selectors
Open demo5.html
Cycle the background colors of therows with #FF9, #CFC, and #CFF.
Empty:empty
Selects indicated elements that have no children at all.
p:empty { //styles }
<p></p>
Target:target
Selects the element indicated by the url hash.
URL: /index.html#steve
:target { //styles }
<div id="steve"> ... </div>
Filter:not(x)
Filters out elements that do not match selector x, which can be any selector except :not psudo-selectors and psudo-elements.
li:not(.active) { //styles }/* selects all list items without active class */
DEMOFiltering Selectors
Open demo5.html
Color the text of all links that arenot marked as friends with #999.
Childrendiv > p
Selects all paragraphs that are immediate children of a div.
body > div { //styles }
/* selects the top-level div, but not any nested divs */
Next Siblingh1 + p
Selects all paragraphs which are immediately preceded by an h1.
li + li { //styles }
/* second, third, fourth, etc. list items, but not the first */
After Siblingh1 ~ p
Selects all paragraphs which are preceded by an h1 at the same level.
h3 ~ ul { //styles }
<h3>Headline</h3> <p>Text</p> <ul>...</ul>
Take 5Next Up: Making things look all pretty.
Fun StuffMaking things look all pretty.
RGBAOpacity
Creates a color based on RGB color spectrum, with an additional alpha number ranging from 0 (transparent) to 1 (opaque).
color:rgba(255, 255, 255, .5); /* 50% white */
DEMOOpacity in Colors
Open demo6.html
Set the background color on the div#meta to 60% black (0 on all RGB).
DEMOOpacity on Hover
Open demo7.html
On hover, set the background color of the links to 90% of the current RGB color, and the text color #FFF.
Border Radii-x-border-radius
Creates rounded corners on the selected element(s).
-webkit-border-radius:5px; -moz-border-radius:5px;
-webkit-border-top-left-radius:3px; -moz-border-radius-topleft:3px;
DEMOAdding Border Radii
Open demo7.html
Set the border-radius on the links to 5px for both Safari/Webkit and Firefox.
Text Shadowtext-shadow
Creates a shadow of the text in the selected element(s). Values: color shift-right shift-down blur;
text-shadow:#000 0 1px 2px;
/* black shadow shifted 1px down, 2px blur */
DEMOText Shadows
Open demo7.html
Set a text shadow on the link text1px down, 1px blur of 80% black.
Box Shadow-x-box-shadow
Creates a shadow on the selected element(s). Values: color shift-right shift-down blur;
-webkit-box-shadow:#000 0 1px 2px; -moz-box-shadow:#000 0 1px 2px;
/* black shadow shifted 1px down, 2px blur */
DEMOBox Shadows
Open demo7.html
Set a box shadow on the links1px down, 1px blur of 80% black.
Transitions-webkit-transition
Create transition effects on CSS attributes at various states of elements.
div { opacity: 0.8; -webkit-transition: opacity 1s linear;}
div:hover { opacity: 1;}
DEMOCSS Animations
Open demo7.html
Add a 0.2 second animation to all css properties of the link on hover.
Columns-x-column-(count|gap|rule)
Create the specified number of columns, spacing equally both vertically and horizontally.
-webkit-column-count: 2;-webkit-column-gap: 40px;-webkit-column-rule: 1px solid #ccc;
DEMOAuto-"owing Columns
Open demo8.html
Separate the text into two columns, separated by a thin, light grey line.
Border Image-webkit-border-image
Creates a border using an image, taking advantage of 9 slice scaling.
-webkit-border-image:url(path/file.png) a b c d; border-width:apx bpx cpx dpx;
/* a, b, c, d are whole numbers, not units */
-webkit-border-image:url(path/file.png) a b c d;
DEMOAuto-"owing Columns
Open demo9.html
Add a border image to the paragraph elements using css/images/corners.png. For this excersize a, b, c, and d are 24.
Finishing UpAlmost Done
NotablesThings to Research
Multiple Backgrounds
Background Size
@font-face
eCSStender.org
Modernizr.com
Questions?On CSS3?
Thank You!I hope you enjoyed the talk.
Slides and completed demos available athttp://speaking.orderedlist.com/fowd2009/
Feedback on this talk may be given at SpeakerRate:http://speakerrate.com/talks/1836-using-html5-and-css3-today
