Progressive Enhancement with JavaScript and CSSe Enhancement With JavaScript and CSS
Advanced CSS and JavaScript
description
Transcript of Advanced CSS and JavaScript
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