Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment....
Transcript of Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment....
Controlling HTML and CSS
Diona Kidd
Introduction
Challenge & Solutions
Best practices
WebGUI specifics
Resources & Tools
ChallengesSite growth
Unintended CSS inheritance
Browser bugs & hacks
Multiple developers
Deprecated styles
Without careful thought,you have a...
Spaghetti SiteDevelopers dread working
Fixing one thing breaks more things
Technical debt
Redesign is imminent
How do we gain control?
Thoughtful Design
Design for reuse (template design)
Follow design patterns (consistancy)
Implement using best practices
HTML Semantics
Semantics - the study of meaning
Communicate structure & purpose
Used with tags, ids and classes
Will extend markup vocabulary
<p class=”header”>some title</p>
<h1>some title</h1>
Optimization
Remove unused styles
Leverage CSS inheritance
Minimize http requests
<div id="stuff"><h1 class="red">Big Title<h1></div>
<div id="stuff"><h1>Big Title<h1><div>
#stuff h1 { color: red; }
Leverage CSS Inheritance
Make reusable general Classes
Use multiple classes
Combined ID’s and classes
<div class=”column first”><div class=”column”><div class=”column last” id=”sidebar”>
Design for Standards
Design for standards first
Target IE browsers by version using Conditional Comments
<!--[if IE 6]><link rel=”stylesheet” href=”ie6.css” /><![endif]-->
Best Practices
Implement Web StandardsImplement for Standards first, hack later
Use semantic markup
Extend your markup vocabulary
Validate your markup and CSS
Validate HTML & CSS
Catches errors
Helpful in debugging
Available @ W3C.org
Avoid “Tag-Soup”
Malformed HTML tags
Improperly-nested HTML elements
Unescaped character entities
Disregard for semantics
1. <div style="background: transparent; border: 1px #000000 none; float: none; margin: 0px; vertical-align: top; height: 41px; left: 40px; position: absolute; top: 61px; width: 620px; z-index: 1; " id="id3"><div><div><div style="margin: 4px; "><div class="paragraph Date" style="line-height: 34px; padding-bottom: 0pt; padding-top: 0pt; ">Wednesday, January 11, 2006</div> 2. </div> 3. </div> 4. </div> 5. </div>
Wow! Impressive.
Most Abused XHTML
divs, span, table
1. <div style="background: transparent; border: 1px #000000 none; float: none; margin: 0px; vertical-align: top; height: 41px; left: 40px; position: absolute; top: 61px; width: 620px; z-index: 1; " id="id3"><div><div><div style="margin: 4px; "><div class="paragraph Date" style="line-height: 34px; padding-bottom: 0pt; padding-top: 0pt; ">Wednesday, January 11, 2006</div> 2. </div> 3. </div> 4. </div> 5. </div>
1. <span id=”date”><p>Wednesday, January 11, 2006</p></span>
Tag Soup
Useful XHTML Tags
fieldset, legend, label
th
dd, dl, dt (definition lists)
code, abbr, address, q, cite, em
Many others...
Avoid inline stylesDifficult to debug
Overrides stylesheets
Bad practice
Organize StylesheetsGeneral Layout specific stylesheet
Browser specific stylesheets
Site section stylesheets
Browser hacks
Organize Styles
Group general, global styles (h1, h2, p)
Group related styles (header and header elements)
Comment Style sections
Use Code CommentsWhat div is being closed?
What is the style used for?
What problem is being addressed?
Best Practices Summary
Semantics
Web Standards & Validation
Leverage CSS Inheritance
Avoid inline styles
Organize & Comment
Real-World Example
Markup
CSS (layout.css)
WebGUI Specifics
Prototype
Prototype static HTML/CSS
Browser debugging
Use ‘media’ folder for images in markup
Style & Page Layout
Style Template contains global elements (header, footer)
Page Layout is specific to layout (1 column, 2 over 1, etc.)
Clarify separation
Copy Default Templates
Upgrades can overwrite default templates
Protect customizations
Great ‘starting place’ for customization
Real-World Example #1
Organize TemplatesCreate a template folder
Copy default templates to template folder
Organize by asset type
Real-World Example #2
Themes
Style that can be applied site-wide
Imported as a package
Theme Folder
Contains CSS, JS, Templates, navigation objects
Templates Folder
Organized by asset type
Copy default templates
Avoid Extra Header TagsOr use sparingly.
Assets are combined to render page
Hard to locate items placed in extra headers without comments
Tools & Resources
Style Guides
Great communication tool
Great deliverable to both managers and clients
Useful planning tool
W3C Validators
Firebug
Inspect elements & edit HTML, CSS and JavaScript
Box Model view
Rulers and guides
Debug and profile JavaScript
Explore the DOM
And more...
Measure-It
Draw ruler to measure width, height and alignment
Color-Zilla
Eye dropper and color picker
Webpage DOM Color Analyzer
Online Palette Viewer
Full Page Zoom
Firebug support - allows opening the selected element in Firebug
YSlow
Analyzes load time
Grades site performance
Grade based on Yahoo’s standards
Dust-me Selectors
Finds unused CSS on a page
Spider sitemaps (HTML or XML)
Save as CSV
CSS Frameworks
BluePrint
Elements
YUI Grid
and others...
Bonus Slides
CSS Compressors
Optimizes load time
Removes line breaks
Combines stylesheets
Grid-based Layout
Predefined grid used for layout
Applied as background-image on body
Credit: Khoi Vinh
Layout Engines
Trident Internet Explorer 4 - 8
Tasman Internet Explorer 5 for Mac
Gecko Firefox, Galeon, Flock, Epiphany
WebKit Safari, Shiira, iCab 4, Epiphany, Adobe Air
KHTML Konqueror
Presto Opera, Nintendo DS, Internet Channel