Transcript Document
CSS for Better Sites (The future’s so bright, we gotta wear shades) Sandra Clark Constella Group [email protected] Why use CSS? • Separates your content from your • • • • • design. Faster development and download times. Easy to write and maintain Improves accessibility Greater control over presentation, including placement and typography. Allows different styles to be applied for different media types (screen, printer) without changing your HTML. Overview • • • • • • Selectors Cascading, Inheritance and Specificity DocType Sniffing The Box Model Multi-column page layouts CSS Hacks Selectors • Selectors are used to select associated elements, ids and classes to apply a particular style rule to. • More than one selector may be associated with a style rule. • There are many different types of selectors Selector Types • • • • • • • • Type Selector Class Selector ID Selector Descendant Selector Universal Selector Child Selector Adjacent Sibling Selector Attribute Selector Type Selectors • A selector which selects elements in the document’s object model (DOM) h1 body td br Class Selectors • Applies a style to an element having the specified class attribute. More than one element may have the same class. Specified with ‘.’ before the class name Examples • p.quote • Applies to all paragraphs with a class of “quote” • .error • Applies to any element with a class of “error”. ID Selectors • Similar to class selectors, except that an id must be unique in a page. Use a # in the selector div#container • selects the div element with the id of “container”. #container • selects the element with the id of “container”. Class and ID Selectors – Things to know • The name of the class or id in the HTML/XHTML must match the name of the selector exactly. Wrong • <p class=“red” /> does not match p.Red{} Correct • • <p class=“red” /> matches p.red{} No spaces or underscores Wrong • <input id=“campus street” /> • <input id=“campus_street” /> Correct • • <input id=“campus-street” /> • <input id=“campusStreet” /> ID’s may start with a digit. Descendant Selector • Used to select elements which are descendants of another element in the document tree. Example: • p em {font-weight:bold;} • Any unordered list which is a descendant of p • <p><ul><li><em></em></li></ul></p> • <p><em></em></p> Child Selector • Selects an element which is a direct child of another element. li > ul > li {color: green;} Example Adjacent Sibling Selector • Selects an element which immediately follows another element in the document markup. Any text appearing between markup will not affect this selector. Not supported in IE. Example Universal Selector • Used to select any element. Acts as a wildcard symbol. • div * p • Selects paragraphs that are at least one selector removed (grandhildren) of a div Example Attribute Selector • Used to select elements based on the presence of either specific • • attributes or their values. 4 types of Attribute Selectors a[href] Selects all <a> element’s with an href attribute • a[href=“www.shayna.com”] Selects all <a> elements with an href attribute with a specified value. • img[alt~=”Figure”] Selects all images whose attribute title contains a space separated list of values. • Matches <img alt=“Figure 1” />, <img alt=“Figure 2” /> • html[lang|=“en”] Selects any element whose attribute has a value which is a hyphen separated list beginning with a specified value. • Matches en, en-us,en-uk. Cascading, Inheritance and Specificity an overview. • Inheritance Elements often inherit properties from their parent elements. • Cascading Style sheets can be linked together to create a hierarchy of related style sheets • Specificity When two properties in separate rules apply to an element and contradict each other, CSS provides a mechanism to resolve these conflicts called specificity. Inheritance • Styles may be inherited from one element to its descendant elements Body {font-size: 100%; color: blue;} • Inheritance is determined by the DOM Document Object Model Sample Cascades • With CSS more than one style sheet can be applied to a presentation. • 3 Types of Style Sheets Author: Created by the document author User: Created by the user. User Agent: Default style sheet applied by the browser. • These stylesheets overlap in scope and interact in the cascade which applies a weight to each rule The rule with the greatest weight takes precedence. Cascades • Cascading Order is calculated according to the following rules: Find all declarations that apply to the element and property in question, for the target media type. Sort the declarations by weight and origin: Cascades Sort by specificity of selector • more specific selectors will override more general ones. Sort by order specified: • If two rules have the same weight, the last item specified wins. Author style sheets are evaluated in the following order: • • • • Browser default External Style Sheet Internal Style Sheet (inside the <head> tag) Inline Style (inside HTML element) An inline style will override styles set in either an internal style sheet or an external style sheet. Specificity • Cascades are determined by the selector’s specificity (it’s weight). Each selector in CSS is assigned a specificity based on the composition of the selector based on specific rules. Specificity Rules • For a selector Count the number of ID Selectors (=a) Count the number of other selectors and pseudo class selectors. (=b) Count the number of element names (=c) Ignore pseudo-elements • The concatenation of the values yields the specificity (a-b-c) • Not base 10. Think of the number as 1 dash 1 dash 1 The higher the specificity, the higher the weight and the rule wins. What does that mean? • Element Names (=c) H1 div ul li • Selectors and pseudo selectors .term pre.example div.help h1 em.term • ID Selectors #sidenav body ul#first li ol.steps li • The higher weight wins! 0-0-1 0-0-3 0-1-0 0-1-1 0-2-3 1-0-0 1-1-5 DocType Sniffing • A DocType contains the formal delimitation of the markup grammar. • Most modern browsers use the DocType to choose what mode it will render your HTML Which Mode am I In? • To check which Rendering mode your computer is in, use the following: IE6 – Opera • javascript:alert(document.compatMode); • CSS1CompatMode – Standards Based Rendering Mozilla – Netscape • CTRL-I for page information. Forcing Browsers into Standards Mode. • HTML 4.x Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • XHTML 1.0 Strict (no xml Declaration) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • XHTML 1.0 Transitional (no xml Declaration) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • Using an xml declaration with the DocType will Force IE6 and opera into Quirks Mode Avoid using <?xml version="1.0" encoding="UTF-8"?> The Box Model • Every CSS element forms a box composed of the following components Content • The actual content of the element such as text or an image. Padding • White space set around the content. Border • Set around the padding Margin • Set around the Border. The Box Model Calculating the Box Model • Web Standards Calculation Width deals with content only. Padding and border and margin are set in addition to the width. Box of 100px set • width: 100px; padding: 10px; border: 10px • IE 5 (all modes) IE 6 quirks mode Width deals with entire box model. Padding, and border are contained within the width. Box of 100px set • width: 140px; padding: 10px; border: 10px Calculating the Box Model – IE Multi-column page layouts • The ultimate in cool • Uses divs for positioning blocks of text • Depends on CSS Positioning Floats Multi columns depend on positioning • Depends on the Positioning Model static • (default) – places elements in a continuous flow representing the HTML page • Mirrors the traditional HTML positioning model. relative • Places an element at some position relative to where it would be placed in the static model. • Only the current element is affected, other elements return back to the static absolute • Fixes an element at an absolute position within the document. • The document is not part of the flow • Doesn’t affect the positioning of other items above or below it. fixed • Similar to the absolute model • The element is positioned within the document window. • The document scrolls, but the fixed element will not move. Managing position • Use the left, right, top and bottom properties to place the element. • Right and bottom properties Specify where the edges of the element should be relative to the top and left. • Left and top properties interpreted differently based on the positioning model. Positioning Top and Left • static Top and left properties are ignored. • relative Interprets top and left as offsets to the position the element would take in a static positioning Negative values shift element to the left and up Positive values move it to the right and down. • absolute Uses top and left to determine position within the document page for the element. • fixed Acts like the absolute model, but uses the top and left as an offset of the position of the browser window The top left corner of the window has a position of (0,0) Float • Any element can be floated Any floated element becomes a block level element. • Floats are required to have a width property. • Floats are removed from the flow Positioned directly after the last flow element that precedes them. Example Float (cont). • Floats can act like inline elements Text and images can go along a float and continue below it. • Use instead of <img align=“left” > (deprecated) Text and inline images can never be covered by a float • Except if they are in separate containers. • Regular boxes would pass behind a float Example Clearing Floats • Static box elements ignore floats and display against previously placed static boxes. • If a static box uses the clear property (clear:both) it is pushed down until it clears the bottom of the float. • IE and Opera 7, automatically enclose nested floats within the block element they reside in regardless of if cleared is used. This is in violation of the spec. Example Tableless Layouts • Relies on positioning and float. • Most of us want to re-create a 2 to 3 column layout (with header and footer). • No need to recreate the wheel. • Lots of sites available with code available! •Example CSS Hacks • Techniques developed to Hide CSS from browsers that don’t support them Set different values to the same CSS property in different browsers to achieve the same appearance on all browsers. Why use CSS Hacks • User’s shouldn’t have to pay the price of bad CSS support IE 6 is over 2 years old and doesn’t support all of CSS 2. • Fixing a CSS Hack when no longer needed involves a few stylesheets, not an entire web site. • Hacks usually exploit a bug in older browsers and work well in newer, more compliant browsers. Why not to use CSS Hacks • If a site works correctly in an older, non compliant version, it gives the public no reason to upgrade. • The whole reason for standards in the first place is not to have to deal with nonstandards compliancy. • Accept the way browsers display CSS now and keep your sites simple. • It goes against good programming to use one bug in a browser to fix another bug in the same browser. XHTML Hacks • Use to hide or serve specific stylesheets from/to specific browsers. Hide stylesheets from v4 Browsers • <link rel="stylesheet" type="text/css" href="styles.css" media="all" /> • Netscape 4 only recognizes media=“screen” • @import - must be first style sheet in html document. • @import "style.css"; /* hidden from nearly all v4 browsers */ • @import url('style.css'); /* IE4 can understand, but not NN4 */ • @ import in stylesheet CSS Hacks Tantek Hack – Tricks IE 5x PC Used inline to trick older browsers into prematurely closing a rule. Commonly used to solve the IE Box Model problem. voice-family: "\"}\""; voice-family: inherit; Example More IE 6 hacks • Double Float Margin and Text Indent Bug The Problem • Float and margin are both applied the same way, IE erroneously doubles the margin. The Fix • Fix is to add display:inline • Since floats are always defined as block level elements, this works in all browsers. • Doesn’t change the float to inline in IE, just fixes the problem. Sample Other Bugs • All browsers have CSS rendering bugs. • Best place to find the bugs and the fixes is http://www.positioniseverything.net. The ultimate CSS Hack What’s wrong with Internet Explorer 6? • IE6 first released in 2001. Most updates have dealt with security not CSS or HTML rendering issues • IE 6 doesn’t support a lot of CSS 2 including: Most pseudo-elements • except a.link, a:visited, a:hover, a:activity Child Selector Adjacent Sibling Selector Attribute Selector Multiple classes in an html class • class=“blue bold” min-width, min-height, max-width, max-height Abbr element The solution is IE7 • No, Microsoft hasn’t released a new version. • Dean Edwards created a set of behaviors that add those items into IE 5.5 and IE 6. Behavior is an .htc file which combines CSS and Javascript to implement new behaviors in IE. Example Resources - Books • Eric Meyer Cascading Style Sheets 2.0 Programmer's Reference Cascading Style Sheets: The Definitive Guide, 2nd Edition Eric Meyer on CSS: Mastering the Language of Web Design • Jeffery Zeldman Designing with Web Standards • Molly Holzchlag Cascading Style Sheets: The Designer's Edge Resources (Web Sites - Design) • CSS Zen Garden http://www.csszengarden.com • University of Minnesota Duluth – Cascading Style Sheets http://www.d.umn.edu/itss/support/Training /Online/webdesign/css.html Resources Tableless Layouts • Glish http://glish.com/css/ • The Layout Reservoir http://www.bluerobot.com/web/layouts/ • Paul O’Brian http://www.pmob.co.uk/temp/3colfixedtest_4.htm • Web Dev CSS Layout Templates http://www.benmeadowcroft.com/webdev/ Resources - CSS Hacks and Fixes • CSS Hacks Position is Everything • http://www.positioniseverything.net/ CSS Discuss – Hacking • http://css-discuss.incutio.com/?page=CssHack • IE 7 http://dean.edwards.name/IE7/ Resources - General • Multiple IE’s in Windows http://www.inserttitle.com/web_design/?page=articles/dev/m ulti_IE • CFPretty ColdFusion, Fusebox, CSS and Accessibility • http://www.shayna.com/blog QA [email protected]