ADVANCED CSS AND JAVASCRIPT

Techniques for Better Web Development

Ben Scheirmanben.scheirman@gmail.comBlog: http://www.flux88.com

Show of Hands

Favorite Browser?

Internet ExplorerFirefoxSafariOpera

Browser Stats

HTML RecapCommon Tags:

<div> <span>

Lesser-known Tags: <label> <blockquote>

<fieldset> <legend><address> < abbr>

Evil Tags: <font> <strike><center> <u>

Do I need a Doctype Header?

What is CSS?

Purpose

Benefits

Why?

But I’m a Developer!

Best Practices

No inline styles

Minimal page style blocks

Reference external CSS file

Use a DOCTYPE

Validate!

Styling Text

Use Font fall-backsfont-family: Calibri, Lucida,

Verdana, Arial

em, not px

Line-height, not height

Text Decoration

Styling Links

:<state> selector

LoVe-Hate a:link a:visited a:hover a:active

Rollover graphics

Styling Forms

No tables!

Use <fieldset>

Use <label>

CSS for Layout

What is page flow?

Understand float

Understand the box model

The Box Model

Padding

Margin

Content

CSS Demos

Box Model

CSS Page Layout

Prop-Clear Trick

Pure CSS Tabs

Tips for success

Develop in Firefox, not IE

Validate!

Switch browsers frequently

Possibilities

CSS Zen Gardenhttp://www.csszengarden.com

CSS Layout Templateshttp://www.intensivstation.com

JavaScript

Why?

Why Not?

DOM Manipulation

What is the DOM?

What can JavaScript do with the DOM?

document.getElementById(id);document.getElementsByTagName(tag);document.createElement(tag);element.setAttribute(attr, value)document.removeChildren();document.appendChild(node);

Avoid browser specific syntax such as document.all

There’s Help

Firefox ToolsFirebugWeb Developer Toolbar

JavaScript FrameworksMochiKitYUIPrototypescrip.taculo.us…more…

Meet MochiKit

“Makes JavaScript SUCK LESS”

What if…

JavaScript is disabled?

Browser doesn’t support ______ ?

Progressive Enhancement

ASP.NET Application

When JavaScript is Disabledstill functions

When JavaScript is available, but limitedexperience improves

When XMLHttpRequest is supportedAjax is used

Demo:

Forum Registration Page

CSS to style forms Ajax to enhance the site

Questions?

References

CSS Mastery by Andy Budd

DOM Scripting by Jeremy Keith

www.csszengarden.comwww.exploding-boy.comhttp://www.greywyvern.com/code/min-height-hack.html