ADVANCED CSS AND JAVASCRIPT
Techniques for Better Web Development
Ben [email protected]: 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