css for developers
DESCRIPTION
Presentation for the Burlington, VT PHP Users Group on 2009-01-22.TRANSCRIPT
CSS FOR DEVELOPERSA Designer’s Perspective
WHAT ARE WE DOING?
• Cover fundamental CSS principles and best practices
• Illustrate an effective interface between the development and design roles
• Give tips for implementing and debugging CSS
• Non-Goal: Convert developers into designers
SEPARATION OF ROLES
SEMANTIC (X)HTML
SEMANTIC (X)HTML
• Interface for developers and designers
• Common language: browsers, screen readers, bots, etc.
• For Developers: (X)HTML helps express specific content in a structure
• For Designers: (X)HTML allows the enhancement of specific content based on the structure
WHAT IS DESIGN ON THE WEB?
• Purpose: Communication (information, navigation, brand, etc.)
• Design is technical.
• Design is an enhancement.
• When implemented with CSS, design is a series of transformative statements.
RENDERING
BROWSERS, SCREEN READERS, PRINT & MOBILE DEVICES
• All use (X)HTML
• Each renders (X)HTML differently
• Each has a default rendering
• Different transformations may be implemented for different media.
DEFAULT RENDERING
RESET CSS FOR (SCREEN) MEDIA
• Normalizes rendering across browsers
• Several exist...Eric Meyer:http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
CSS
SELECTORS & ATTRIBUTES
• CSS is a series of transformations:
Select a subset of the (X)HTML (selectors)
Set qualities on those selected elements (attributes)
IDS & CLASSES
element <p>...</p>
id (must be unique in a document)
<p id=”id-name”>...</p>
class (multiple per document allowed)
<p class=”class-name”>...</p>
combination <p id=”id-name” class=”class-name”>...</p>
<p class=”class-1 class-2”>...</p>
SELECTOR COMPONENTS
element p
id p#id-name
class p.class-name
combination p#id-name.class-name
p.class-1.class-2
BUILDING SELECTORS
single p.class-name
nested (separated by a space)
p.class-name a.class-3
multiple (separated by a comma)
p#id-name.class-name,p.class-1.class-2
GOOD TO KNOW
• Don’t begin a class or id with a number
• IE6 is buggy with multiple classes in a single selectorhttp://www.ryanbrill.com/archives/multiple-classes-in-ie/
• CSS2 and CSS3 have several useful selectors (descendant, child, adjacent, attribute, pseudo-class, etc.), but IE6/7 do not support many of them.http://www.w3.org/TR/CSS2/selector.htmlhttp://www.quirksmode.org/css/contents.html
• Recommend using a naming convention(standardize on underscores (_), dashes (-) or CamelCase)
ATTRIBUTES
• Qualities to be set for a selected subset of the (X)HTML
• placement
• size
• spacing
• style (colors, fonts, borders)
http://www.w3schools.com/CSS/CSS_reference.asp
SELECTORS, MEET ATTRIBUTESrendered output
<ul class="related-info"> <li> <h3>About Classes</h3> <p>Classes are specific instances of a course.</p> <p>Classes are typically offered by district and term, and several classes for the same course can run concurrently throughout the state.</p> <p><a href="<?= $this->url(array('controller' => 'course', 'action' => 'index', 'is-active' => 'yes'), null, true) ?>/"><strong>Courses</strong></a> are the main educational units that serve as the curriculum covered by classes.</p> </li></ul>
XHTML
.related-info { position: absolute; width: 250px; float: right; top: 60px; right: 7px; padding: 0 10px 15px 10px; background-color: #FBF7F5; border: 1px solid #4D4E53; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #4D4E53;}.related-info h3 { margin-top: 15px; font-size: 1.0em;}.related-info p { margin-bottom: 7px; font-size: 0.9em; line-height: 1.1;}
CSS
HOW IS CSS RENDERED?
• Order (style sheets, CSS within style sheets)
• Specificity (inline, id, class, element)http://www.htmldog.com/guides/cssadvanced/specificity/
TOOLS & TIPS
EXAMINE, MODIFY & DEBUG CSS
• Firebug: “Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” https://addons.mozilla.org/en-US/firefox/addon/1843
DEBUGGING TIPS
• Validate (X)HTML http://validator.w3.org/
• Validate CSS http://jigsaw.w3.org/css-validator/
• Use Firebug to inspect CSS (and test some fixes on the fly).
• For placement, sizing or spacing bugs, set background-color on elements to see interaction. (create debug.css)
• Minimize use of wrapper <div> elements.
• Document bugs and fixes for future use.
FUN WITH CSS
LIVE DEMOS
• VPR Membership Drive Splash Pagehttp://studio.foundline.com/VPR/splash_page_2008-10/index.php?stage=1&time=night&weather=rain
• VPR Audio Player http://www.vpr.net/listen/stream/
• VPR Music http://www.vpr.net/music/
• Child Welfare Training Partnership• VSA Arts of Vermont http://www.vsavt.org/
• Orange Mountain, True Soap http://www.orangemtn.com/
• Northeast Pools & Spas http://www.northeastpools.net/
• Seventh Generation: Show What’s Insidehttp://show-whats-inside.seventhgeneration.com/
• Found Line http://www.foundline.com/
THINGS TO CHECK OUT
• CSS frameworkshttp://code.google.com/p/blueprintcss/http://www.yaml.de/en/http://developer.yahoo.com/yui/grids/
• CSS IDEshttp://www.panic.com/coda/http://www.aptana.com/studio/downloadhttp://www.eclipse.org/webtools/wst/main.phphttp://westciv.com/style_master/index.html
• Microformatshttp://microformats.org/
• Debug style sheethttp://meyerweb.com/eric/thoughts/2007/09/07/diagnostic-styling/http://meyerweb.com/eric/tools/css/diagnostics/demo.html