CSS for Developers

CSS for Developers A Designer’s Perspective

Me = designer(print) + designer(web)

Implementing design should not be your job.

But, you’re here.

HTML: The Design and Development Interface The roles of designer and developer overlap with HTML.

POSH Create views with Plain Old Semantic HTML: • Minimize the use of <div> wrappers. • Use the appropriate HTML element. • Use ids and classes that are semantic.

Microformats Encode your data in HTML using existing patterns. <div id="hcard-Jason-Pelletier" class="vcard"> <p><a class="url fn" href="http://foundline.com">Jason Pelletier</a></p> <p class="org">Found Line</p> ... </div> http://microformats.org/

POSH + Spice For visually complex designs or applications, you may have to bend the rules and use <div> wrappers or non-semantic ids or classes. Layer this on top of POSH.

HTML Validation Do it. http://validator.w3.org/

Debug Style Sheet Use a debug style sheet to clean-up and complete your HTML. http://meyerweb.com/eric/tools/css/diagnostics/demo.html

Browser Compatibility http://www.quirksmode.org/compatibility.html

Specify Your Supported Browsers Base your list of supported browser oﬀ of your project’s (actual or anticipated) visitor statistics.

Progressive Enhancement “A strategy for web design that...uses web technologies in a layered fashion that allows everyone to access the basic content and functionality of a web page...while also providing those with...more advanced browser software an enhanced version of the page.” http://en.wikipedia.org/wiki/Progressive_enhancement

Reset the CSS Use a reset style sheet loaded as your rst style sheet. Like frameworks, don’t invent your own. Normalizes rendering across browsers by resetting sizing and spacing attributes. Several exist...one is Eric Meyer’s http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Set font-size to 62.5% on <body> Sets 1em = 10px Nested font-size declarations are multiplied. <div style=”font-size: 1.2em”><div style=”font-size: 1.2em”>Text</div></div> “Text” renders at 14.4px (1.2*1.2*10).

Use ems to Set Font Sizes Using ems as the measurement to specify the font-size attribute allows for greater accessibility. font-size: 1.6em;

Start from the Inside First, stylize the 1 interior content . (h1, h2, ..., p, li, etc.) 2 Then, stylize the 2 layout . (overall page, header, footer) 1

Set margin-top on Typography The pattern tends to be that the amount of space between two elements is determined by the element that follows that space.

Apply CSS CSS is a series of transformations. Select Set a subset of the HTML. qualities on selected elements. (selectors) (attributes)

Components of Selectors Use elements, ids and classes to select from the HTML. element HTML: <p>This is a paragraph.</p> Selector: p id HTML: <p id=”id-name”>This is a paragraph.</p> Selector: #id-name class HTML: <p class=”class-name”>This is a paragraph.</p> Selector: .class-name combination HTML: <p class=”class-name-1 class-name-2”>This is a paragraph.</p> Selector: .class-name-1.class-name-2

Building Selectors Build a selector by combining elements, ids and/or classes. single HTML: <p class=”class-name”>This is a paragraph.</p> Selector: p.class-name nested (separated by a space) HTML: <p id=”id-name”>This is a <a href=”http://example.com”>link</a>.</p> Selector: p a or p#id-name a or #id-name a multiple (separated by a comma) HTML: <p><em>This</em> is a <strong>paragraph</strong>.</p> Selector: em, strong or p em, p strong

Good to Know • Don’t begin an id or a class with a number. • An id must be unique within a document. • IE6 is buggy with multiple classes in a single selector. http://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/8 do not support many of them. http://www.w3.org/TR/CSS2/selector.html http://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 HTML: • placement • size • spacing • style (colors, fonts, borders) http://www.w3schools.com/CSS/CSS_reference.asp

What CSS Wins? When there are con icting transformations in CSS, order and speci city are used to determine which transformation wins. Order Speci city inline id order of CSS within style sheets class order of style sheets element http://www.htmldog.com/guides/cssadvanced/speci city/

Use <body> for Design Speci c to a Page or Section. Set an id or class on <body> to change attributes for elements on a speci c page(s). Use the cascading nature of CSS to minimize unnecessary HTML.

What Not to Do • Tables are for tabular data. Don’t use tables for layout. • Use an external style sheet(s). Don’t put CSS inline or in the document <head>. • Use ids and classes based on semantic or functional meaning. Don’t use ids or classes that are based on visual presentation (except for POSH + spice). • Think through the patterns of the design so that you leverage the cascading nature of CSS. Don’t use !important to x speci city issues.

Debugging

Browser Testing Test your implementation in the browsers in your speci cation. Tools: • http://www.browsercam.com/ • http://browserlab.adobe.com/

Did You...? • Validate your HTML. http://validator.w3.org/ • Validate your CSS. http://jigsaw.w3.org/css-validator/

Eliminate Extraneous HTML Bugs are typically caused by the interaction of elements. Removing unnecessary HTML reduces the number of elements that can interact, and thus simpli es debugging.

Firebug “Edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.” https://addons.mozilla.org/en-US/ refox/addon/1843

Troubleshoot Using background-color For placement, sizing or spacing bugs, set background-color on elements to see their interaction.

Hacks Hacks can be used to resolve bugs in speci c browsers, but may result in CSS that is invalid. In-CSS Hack Conditional Statement Just in the style sheet: First, in the <head> of the HTML: * html #nav {  Then, in the browser-speci c style sheet: #nav { ... } http://www.webdevout.net/css-hacks, http://www.quirksmode.org/css/condcom.html

Thank You Jason Pelletier Found Line jason.pelletier@foundline.com @jason_pelletier Presentation Links: http://www.delicious.com/jason_pelletier/cssfordevelopers The content of this presentation (except screenshots and quotes) is licensed under Creative Commons -- Attribution 3.0 United States License.

CSS for Developers

by jason.pelletier on Sep 13, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

CSS for Developers — Presentation Transcript