controlling html and css · leverage css inheritance avoid inline styles organize & comment....
TRANSCRIPT
![Page 1: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/1.jpg)
Controlling HTML and CSS
Diona Kidd
![Page 2: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/2.jpg)
Introduction
Challenge & Solutions
Best practices
WebGUI specifics
Resources & Tools
![Page 3: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/3.jpg)
ChallengesSite growth
Unintended CSS inheritance
Browser bugs & hacks
Multiple developers
Deprecated styles
![Page 4: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/4.jpg)
Without careful thought,you have a...
![Page 5: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/5.jpg)
Spaghetti SiteDevelopers dread working
Fixing one thing breaks more things
Technical debt
Redesign is imminent
![Page 6: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/6.jpg)
How do we gain control?
![Page 7: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/7.jpg)
Thoughtful Design
Design for reuse (template design)
Follow design patterns (consistancy)
Implement using best practices
![Page 8: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/8.jpg)
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>
![Page 9: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/9.jpg)
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; }
![Page 10: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/10.jpg)
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”>
![Page 11: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/11.jpg)
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]-->
![Page 12: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/12.jpg)
Best Practices
![Page 13: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/13.jpg)
Implement Web StandardsImplement for Standards first, hack later
Use semantic markup
Extend your markup vocabulary
Validate your markup and CSS
![Page 14: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/14.jpg)
Validate HTML & CSS
Catches errors
Helpful in debugging
Available @ W3C.org
![Page 15: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/15.jpg)
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.
![Page 16: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/16.jpg)
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
![Page 17: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/17.jpg)
Useful XHTML Tags
fieldset, legend, label
th
dd, dl, dt (definition lists)
code, abbr, address, q, cite, em
Many others...
![Page 18: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/18.jpg)
Avoid inline stylesDifficult to debug
Overrides stylesheets
Bad practice
![Page 19: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/19.jpg)
Organize StylesheetsGeneral Layout specific stylesheet
Browser specific stylesheets
Site section stylesheets
Browser hacks
![Page 20: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/20.jpg)
Organize Styles
Group general, global styles (h1, h2, p)
Group related styles (header and header elements)
Comment Style sections
![Page 21: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/21.jpg)
Use Code CommentsWhat div is being closed?
What is the style used for?
What problem is being addressed?
![Page 22: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/22.jpg)
Best Practices Summary
Semantics
Web Standards & Validation
Leverage CSS Inheritance
Avoid inline styles
Organize & Comment
![Page 23: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/23.jpg)
Real-World Example
![Page 24: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/24.jpg)
Markup
![Page 25: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/25.jpg)
CSS (layout.css)
![Page 26: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/26.jpg)
WebGUI Specifics
![Page 27: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/27.jpg)
Prototype
Prototype static HTML/CSS
Browser debugging
Use ‘media’ folder for images in markup
![Page 28: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/28.jpg)
Style & Page Layout
Style Template contains global elements (header, footer)
Page Layout is specific to layout (1 column, 2 over 1, etc.)
Clarify separation
![Page 29: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/29.jpg)
Copy Default Templates
Upgrades can overwrite default templates
Protect customizations
Great ‘starting place’ for customization
![Page 30: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/30.jpg)
Real-World Example #1
![Page 31: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/31.jpg)
Organize TemplatesCreate a template folder
Copy default templates to template folder
Organize by asset type
![Page 32: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/32.jpg)
Real-World Example #2
![Page 33: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/33.jpg)
Themes
Style that can be applied site-wide
Imported as a package
![Page 34: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/34.jpg)
Theme Folder
Contains CSS, JS, Templates, navigation objects
![Page 35: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/35.jpg)
Templates Folder
Organized by asset type
Copy default templates
![Page 36: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/36.jpg)
Avoid Extra Header TagsOr use sparingly.
Assets are combined to render page
Hard to locate items placed in extra headers without comments
![Page 37: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/37.jpg)
Tools & Resources
![Page 38: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/38.jpg)
Style Guides
Great communication tool
Great deliverable to both managers and clients
Useful planning tool
![Page 39: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/39.jpg)
W3C Validators
![Page 40: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/40.jpg)
Firebug
Inspect elements & edit HTML, CSS and JavaScript
Box Model view
Rulers and guides
Debug and profile JavaScript
Explore the DOM
And more...
![Page 41: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/41.jpg)
Measure-It
Draw ruler to measure width, height and alignment
![Page 42: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/42.jpg)
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
![Page 43: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/43.jpg)
YSlow
Analyzes load time
Grades site performance
Grade based on Yahoo’s standards
![Page 44: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/44.jpg)
Dust-me Selectors
Finds unused CSS on a page
Spider sitemaps (HTML or XML)
Save as CSV
![Page 45: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/45.jpg)
CSS Frameworks
BluePrint
Elements
YUI Grid
and others...
![Page 47: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/47.jpg)
Bonus Slides
![Page 48: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/48.jpg)
CSS Compressors
Optimizes load time
Removes line breaks
Combines stylesheets
![Page 49: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/49.jpg)
Grid-based Layout
Predefined grid used for layout
Applied as background-image on body
Credit: Khoi Vinh
![Page 50: Controlling HTML and CSS · Leverage CSS Inheritance Avoid inline styles Organize & Comment. Real-World Example. Markup. CSS (layout.css) WebGUI Specifics. Prototype Prototype static](https://reader036.vdocuments.us/reader036/viewer/2022063011/5fc69454c6f88b2a6a641746/html5/thumbnails/50.jpg)
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