Ease into HTML5 and CSS3

Easing Into
HTML5 and CSS3
Brian Moon
dealnews.com
Who attended the
HTML5 and Javascript
@brianlmoon
tutorial yesterday? http://brian.moonspot.net/

What is in HTML5?
• New Semantic Tags
• <article>, <header>, <footer>, etc.
• New Multimedia Tags
• <canvas>, <video>, <audio>, etc.
• New Javascript APIs
• data- attributes
• HTML5 Forms

What is in CSS3?

• New Properties
• New Selectors
• Device dependent Media Queries

What is not
HTML5 nor CSS3?

• SVG - been around, browsers just got
better
• Geo-Location - Separate W3C spec from
HTML5

Who uses your site?

• Are the tech savvy?
• Are they sensitive to change?
• Are they in China? (Lots of IE6 still)
• All Mobile?

dealnews browsers
IE6 0.30%
IE7 4.19%
IE8 11.91%
22%
IE9+
FF3.5+
Chrome
Safari
78%
3.1+

Modern Browsers
Other

Our design goals

• Identical UI and UX on modern browsers
• Fully functional and usable on IE8, IE7 and
Opera
• Page should render and users should be
able to click things in IE6

First Step

All browsers process pages with
this doctype in standards mode.

http://blogs.msdn.com/b/jennifer/archive/2011/08/01/html5-part-1-semantic-markup-and-page-layout.aspx

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
Semantic Tags
</head>
<body>
<header>
<hgroup>
<h1>Header in h1</h1>
<h2>Subheader in h2</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">Menu Option 1</a></li>
</ul>
</nav>
<section>
<article>
<header>
<h1>Article #1</h1>
</header>
<section>
This is the first article. This is <mark>highlighted</mark>.
</section>
</article>
<article>
<header>
<h1>Article #2</h1>
</header>
<section>
This is the second article. These articles could be blog posts, etc.
</section>
</article>
</section>

Semantic Tags
• Older browsers don’t treat these as block
elements
• CSS can ﬁx it in some browsers
• Javascript (HTML Shiv) required in older IE
versions
• Good semantic HTML4 markup and
Microformats already recognized by scrapers
• Would use in new projects.YMMV on ROI for
converting well done HTML

data attributes problem

• Unknown attributes are ignored by
browsers, but the pages don’t validate.
• Hacks exist where classes are used
(e.g. class=”artid-574244”)

data- attributes
<div class="art body" data-artid="574244">

• Allows you to store data as an attribute
that is ignored by the browser
• Any attribute preﬁxed with data- is ignored
by the browser (as all unknown attributes
are) and are treated as valid HTML5.
• Use element.getAttribute(“data-artid”); to
get the data
• Use it now. Works in all browsers.

Video & Audio
• Well documented licensing war
• Great idea, caught up in licensing issues
• May have to store your media in more than
one format
• Javascript libraries exist to help with
fallback
• Have used it via JS libs. Eases the pain. Falls
back to Flash.

Canvas
• Graphics via markup/JS
• Not generally lighter weight than images, so
not a replacement for static images
• Great for graphs and such
• Many, many javascript libraries to help build
graphs via Canvas.
• Used for internal reporting where we
dictate browser versions. Publicly,YMMV.
Wanna waste time? http://canvasrider.com/

New JS APIs

• Web Performance - neat
• Local Storage - requires user prompt
• Web Workers (IE10)
• Web Sockets - very new, has issues
• You really need a good use case for these

HTML5 Forms
<input name=”email” type=”email”>

<input name=”url” type=”url”>

<input name=”name” type=”text” required>

<input name=”search” type=”text”
placeholder=”Search”>

HTML5 Forms
• Reduce custom validation Javascript
• You can query if a ﬁeld is valid with
checkValidity().
• Custom validation possible via event
handlers
• Requires IE10 =(
• Some javascript libs can close the gap.

Eye Candy
• border-radius (i.e. rounded corners)
• box-shadow
• gradient backgrounds
• multiple backgrounds
• transforms
• transitions

Use with fallback
• border-radius
• box-shadow
• gradient backgrounds
• multiple backgrounds
• Make sure the design holds up to your
standard on browsers that don’t support
these

Example 2

IE9 FF12

IE7 IE8

Gnarly CSS
.cta {
display: inline-block;
vertical-align: bottom;
-webkit-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
-moz-box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.5);
border-width: 0px;
border-style: none;
border-color: rgba(0,0,0,0);
cursor: pointer;
font-weight: bold;
text-align: center;
text-decoration: none;

/* The is for the most commonly used design */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 12px;
font: bold 12px arial,helvetica,clean,sans-serif;
line-height: 20px;
color: white;
background: #6ecb12; /* Old browsers */
background: -moz-linear-gradient(top, rgba(118,215,24,1) 19%, rgba(88,168,11,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,rgba(118,215,24,1)),
color-stop(100%,rgba(88,168,11,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(118,215,24,1) 19%,
rgba(88,168,11,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(118,215,24,1) 19%,rgba(88,168,11,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#76d718',
endColorstr='#58a80b',GradientType=0 ); /* IE6-9 */
}

CSS3 Tools

• http://css3generator.com/
• http://border-radius.com/
• http://www.colorzilla.com/gradient-editor/

Transitions
• Replaces javascript for some types of
animations
• CSS language to deﬁne how an element
changes from one state to another
• Should be treated as optional and have a fall
back or the page should work without
them
• Can be taxing on the browser

Transitions
#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}

Transforms
• CSS language for scaling and rotating
elements
• Mixed with transistions, animation can be
achieved.
• May require browser speciﬁc tweaking or
even non-standard CSS for IE.
• Can confuse the box model and page ﬂow

Example
The labels are
rotated 90
degrees, but as
you can see,
Firebug things
the element is in
a different place
than where it
appears when
drawn.

Transforms
.accordion .panel-label {
-moz-transform-origin: 100% 0;
-moz-transform: rotate(-90deg);
-webkit-transform-origin: 100% 0;
-webkit-transform: rotate(-90deg);
-o-transform-origin: 100% 0;
-o-transform: rotate(-90deg);
transform-origin: 100% 0;
transform: rotate(-90deg);
position: absolute;
top: 0;
white-space:nowrap;
text-align: right;

/* MSIE < 10 */
filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=3)9;
left: 0px9;

}

Eye Candy Issues

• All of these techniques can be taxing on the
browser and or device.
• Excessive use of gradients and transforms
can cause major browser lag
• Many require browser prefixes (-moz or
-webkit) or IE specific syntax (filter)

Selectors
tr:nth-child(2n+1) /* every odd row of an table */
tr:nth-child(odd) /* same */
tr:nth-child(2n+0) /* every even row of an table */
tr:nth-child(even) /* same */

tr:nth-last-child(-n+2) /* the two last rows of an table */

a:first-child /* a is first child of any element */

Also:
:first-of-type
:only-child
:only-of-type
:empty
Browser performance may suffer using these
on large, complex documents. Only use
these when you can’t control the markup.

How Selectors Work
This is not CSS3, but just general knowledge you need

• CSS is parsed and ALL rules are evaluated.
More rules, more work for the browser
• Rules are evaluated right to left
• “.foo a” matches ALL a tags in the document
and walks up the DOM to decide if they
have a .foo parent.

Media Queries
@media all and (max-width: 699px) and (min-width: 520px),
(min-width: 1151px) {
body {
background: #ccc;
}
}

• Allow you to specify different CSS for
different device speciﬁcations
• You can use these now to help with mobile
design and usability. Those devices support
it, older browsers ignore it.

Experiment
Firefox

IE6

http://brian.moonspot.net/experimenting-with-html5

Conclusion
• Understand your audience
• HTML5 Doctype works for HTML4, try it
• Use HTML5 semantic tags to ﬁx bad HTML
or on new projects
• Video is not the Flash killer we all hoped
for. But, it does have its uses.
• HTML5 Forms have great potential, but still
a nice to have for now.

Conclusion
• CSS3 eye candy is a great extra bit for
users that can see it. Be sure you are happy
with the fallback for others.
• New CSS3 selectors are powerful, but
good markup with classes is still better
• CSS media queries are very helpful for
formatting your pages on smaller screens
and are supported on those platforms

Ease into HTML5 and CSS3

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (8)

Similaire à Ease into HTML5 and CSS3

Similaire à Ease into HTML5 and CSS3 (20)

Dernier

Dernier (20)

Ease into HTML5 and CSS3

Notes de l'éditeur