Professional Css

Writing Professional CSS Manage presentation better on today’s web pages Subramanyan Murali Yahoo! Frontend Engineer, YDN Evangelist

Overview •  The Web's Fall from Grace •  CSS to the Rescue –  Rich styling •  Ease of use –  Basic Rules –  Grouping •  Class and ID Selectors •  Attribute Selectors •  Using Document Structure •  Pseudo-Classes and Pseudo-Elements Technical Presentation 2

Overview … •  Structure and the Cascade –  Inheritance –  Specificity –  Cascade •  Visual Formatting model –  Floating and Positioning •  Managing your CSS –  Markup and Page design •  References Technical Presentation 3

The web’s fall from grace Technical 4 Presentation

Some Perspective •  HTML was a fairly lean language –  It was originally intended to be a structural markup language, used to describe the various parts of a document •  Very little was said about how those parts should be displayed. –  The language wasn't concerned with appearance—it was just a clean little markup scheme. •  Gradually, presentational aspects of the web were explored in HTML

Some Perspective … •  As a result of these pressures, markup began to adapt with presentational aspects •  Elements like <FONT> and <BIG> started to creep into the language. •  Suddenly, a structural language started to become presentational •  For this reason, CSS was invented. Technical Presentation 6

CSS to the Rescue Technical 7 Presentation

Cascading style sheets •  The problem of polluting HTML with presentational markup was not lost on the World Wide Web Consortium (W3C) •  CSS was W3Cs quick solution to this growing problem –  In 1995, the consortium started publicizing a work-in- progress called CSS –  By 1996, it had become a full Recommendation, with the same weight as HTML itself

Cascading style sheets … •  CSS allows for much richer document appearances than HTML ever allowed •  CSS allows for rich styling –  Set colors –  Background colors, images and transparency –  Creation of borders, increase or decrease of the space around them –  Text decorations –  Formatting and display Technical Presentation 9

Ease of Use Technical 10 Presentation

Basic Rules •  Any HTML element on the page can be reached and styled •  Properly written style sheets can can drastically reduce a web author's workload –  centralize all of the style information for a page in one place •  CSS also makes provisions for conflicting rules; these provisions are collectively referred to as the cascade •  CSS is markup independent, element can be changed but the style applied can remain Technical Presentation 11

Basic Rules … •  Presentational attributes can be inherited from parent •  CSS made some presentational markup un-necessary –  <font>, <basefont>, <u>, <strike>, <s>, and <center> •  Separate CSS files for display and print media aid better organization and presentation •  The CSS language is human readable and writable, and expresses style in common desktop publishing terminology Technical Presentation 12

Grouping •  Each style property can be individually specified as style attributes, or multiple style attributes can be grouped •  Grouping can reduce the size of the style sheet, while making it concise and some times more readable •  Grouped styles can be individually over-ridden •  CSS selectors can be grouped as well h1, h2, h3 { color: #000;} #someid, .someclass { margin:2px 4px; } body { font: 18px Helvetica; } Technical 13 Presentation

Lets dive in to details Technical 14 Presentation

Selectors •  Primary advantages of CSS is its ability to easily apply a set of styles to all elements of the same type identified by a selector •  Document elements can be directly referenced in CSS •  Classes (.) are HTML attributes that can be used to apply styles –  Classes can be duplicated •  IDs ( # ) are unique identifiers to the HTML element –  IDs have higher specificity value

Selectors … •  Document elements, Class and ID selectors can be used together •  The period helps keep the class selector separate from anything with which it might be combined an element selector •  Classes can be nested in HTML <div class=‘item warning’>some text</div> .item { padding:5px; } .warning { color: red; } .item.warning{ font-weight:bold; } Technical 16 Presentation

Attribute Selectors •  The syntax used in the previous two sections is particular to HTML, SVG, and MathML documents –  In other markup languages, these class and ID selectors may not be available •  To address this situation, CSS2 introduced attribute selectors, which can be used to select elements based on their attributes and the values of those attributes –  Simple Attribute Selection –  Selection Based on Exact Attribute Value –  Selection Based on Partial Attribute Values –  A Particular Attribute Selection Type Technical 17 Presentation

Attribute Selectors … •  Attribute selectors are supported by –  Safari –  Opera –  Gecko-based browsers –  Not by Internet Explorer up through IE5/Mac and IE6/Win –  IE7 fully supports all CSS2.1 attribute selectors, as well as a few CSS3 attribute selectors •  YUI 3 Node utility uses selector paradigm Technical 18 Presentation

Simple Attribute Selectors •  h1[class] {color: silver;} –  will set style to all elements with a class attribute •  img[alt] { border: 3px solid red; } •  This strategy is very useful in XML documents, as XML languages tend to have element and attribute names that are very specific to their purpose •  planet[moons] {font-weight: bold;} Technical 19 Presentation

Exact Attribute Value selectors •  In addition to selecting elements with attributes, you can further narrow the selection process to encompass only those elements whose attributes are a certain value •  form [name=‘testForm’] input { border: 1px solid; } •  Useful in XML as well •  planet[type=‘barren rocky’] {font-weight: bold;} Technical 20 Presentation

Partial Attribute Values Selectors •  For any attribute that accepts a space-separated list of words, it is possible to select based on the presence of any one of those words •  The classic example in HTML is the class attribute, which can accept one or more words as its value •  div [class ~= ‘warning’ ] { font-weight: bold; } •  span[class *= ‘yahoo_’] {font-style: italic;} •  span[class ^= ‘bar’] {background: silver;} •  span[class $= ‘y’] {font-weight: bold;} Technical 21 Presentation

Particular Attribute Selection Type •  *[lang |= ‘en’] {color: white;} •  This rule will select any element whose lang attribute is equal to en or begins with en- •  In general, the form [att |= ‘val’ ] can be used for any attribute and its values. •  You can match all of these images with file name with figure using the following selector: img[src |= ‘figure’] {border: 1px solid gray;} Technical 22 Presentation

Pseudo-Classes and Pseudo-Elements •  These selectors let you assign styles to structures that don't necessarily exist in the document –  To phantom classes that are inferred by the state of certain elements, or even by the state of the document itself •  The styles are applied to pieces of a document based on something other than the structure of the document •  Applying styles based on somewhat ephemeral conditions that can't be predicted in advance Technical 23 Presentation

Pseudo-Classes •  a:visited {color: red;} •  a#footer-copyright:link {font-weight: bold;} •  a#footer-copyright:visited {font-weight: normal;} •  Dynamic pseudo-classes –  CSS2.1 defines three pseudo-classes that can change a document's appearance as a result of user behavior –  These dynamic pseudo-classes can be more widely applied •  a:hover {color: red;} •  a:active {color: yellow;} •  input:focus { font-weight: bold; } •  body *:hover {background: yellow;} Technical 24 Presentation

Pseudo-Classes … •  Dynamic pseudo-classes can cause some issues on the page •  Consider –  a:link, a:visited {font-size: 13px;} –  a:hover {font-size: 20px;} •  A user agent that supports this behavior must redraw the document while an anchor is in hover state –  This causes reflow which is not supported as per CSS specification Technical 25 Presentation

Pseudo-Classes … •  Static pseudo-class, :first-child, is used to select elements that are the first children of other elements •  p:first-child {font-weight: bold;} •  li:first-child {text-transform: uppercase;} Technical 26 Presentation

Pseudo-Elements •  Pseudo-elements insert fictional elements into a document in order to achieve certain effects •  Four pseudo-elements are defined in CSS2.1 –  styling the first letter –  styling the first line –  styling before elements –  styling after elements •  h2:first-letter {font-size: 200%;} •  p:first-line {color: purple;} Technical 27 Presentation

Pseudo-Elements … •  In CSS2, the :first-letter and :first-line pseudo-elements can be applied only to block-level elements –  In CSS2.1, :first-letter applies to all elements •  Using CSS, we can place arbitrary content before or after a given element –  h2:before {content: ”>>quot;; color: #c0c0c0;} –  body:after {content: quot; The End.quot;;} •  This forms part of what is called generated content, which adds presentation to the content in the DOM •  :after is heavily used to fix the wrapping of container boxes to 2 floated elements Technical 28 Presentation

Structure and the Cascade Technical 29 Presentation

Document Structure body div [class=‘nv’] div [class=‘bd’] div [class=‘ft’] ul p [id=‘main’] cite li li li h1 text text text text text text

Inheritance •  Inheritance is the mechanism by which styles are body applied not only to a specified element, but also to its descendants body {font-size: 13px; } div [class=‘nv’] div [class=‘bd’] div [class=‘ft’] div.bd #main h1 { font-size: 1.2em; } div.nv ul li a:hover { font-size: 1.05em; color:#efefef; } ul p [id=‘main’] cite •  Certain style attributes are not inherited like border –  Can be deduced based on common sense  li li h1 •  Somelibrowsers have inheritance bugs text text text text text text Technical 31 Presentation

Cascade •  CSS is based on a method of causing styles to cascade body together •  As a thumb rule, we can say that the CSS style that is at the closest to the HTML element will take precedence div [class=‘nv’] div [class=‘bd’] div [class=‘ft’] •  Inline styles take maximum precedence –  !important can help styles to over write inline styles, but its not recommended ul p [id=‘main’] cite •  Cascade can be decided based on Specificity and Inheritance of styles as well li li li h1 text text text text text text Technical 32 Presentation

Cascade … •  Understanding the CSS cascade along with Specificity body can be very important when code bases mix •  The style applied to a given element will be a computed based on cascade, inheritance, nesting div [class=‘ft’] div [class=‘nv’] div [class=‘bd’] and specificity –  It’s a union of various styles –  This is Style conflict resolution ul p [id=‘main’] cite li li li h1 text text text text text text Technical 33 Presentation

Specificity •  Specificity : It is a process used to determine which body rules take precedence in CSS when several rules could be applied to the same element in markup •  In simple terms means which style is more specific to div [class=‘nv’] div [class=‘bd’] div [class=‘ft’] the element under question •  Specificity calculations aid ul p [id=‘main’] cite Class, Inline Style ID Pseudo-Class, Element Selectors Selectors Attributes Selectors Selectors li li li h1 1000 100 10 1 text text text text text text Technical 34 Presentation

Specificity … •  .nv ul li { … } body •  body > div.nv ul li { … } •  div.bd p { … } •  div.bd p#main h1 { … } div [class=‘bd’] div [class=‘nv’] div [class=‘ft’] •  body div.ft cite { … } ul p [id=‘main’] cite li li li h1 text text text text text text Technical 35 Presentation

Visual Formatting model Technical 36 Presentation

Box Model •  CSS assumes that every element generates one or more rectangular boxes, called element boxes •  Element box has a content area at its core •  The content area is surrounded by optional amounts of padding, borders, and margins –  These are all considered optional as they all can be zero •  Every element is laid out with respect to its containing block –  In a very real way, the containing block is the ‘layout context’ for an element

Box Model … <body> <div> <p>This is a paragraph</p> </div> </body> Containing Block Margins Border Padding Content area •  The layout of the ‘p’ is dependent on the layout of the ‘div’, which is in turn dependent on the layout of the ‘body’ Technical 38 Presentation

Box Model … •  Normal flow –  The left-to-right, top-to-bottom rendering of text in –  The only way for an element to leave it is to be floated or positioned •  Block Level Elements •  Inline Elements •  Non-Replaced Element •  Replaced Element –  Img is a example of replaced element as the images from server replaces the HTML element Technical 39 Presentation

Box model … •  Any padding, borders, or margins you specify are added to the width value –  <p style=“width: 200px; padding: 10px; margin: 20px;”>wideness?</p> •  The total width now is 260px •  The Box model calculations across various user agents causes lot of rendering issues •  Negative Margins will force the box to creep into the neighboring box Technical 40 Presentation

Flows •  Normal Flow –  Includes normal positioning and relative positioning for block and inline boxes •  Float Model –  In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float •  Absolute Positioning –  In the absolute positioning model, a box is removed from the normal flow entirely and assigned a position with respect to a containing block. This has no impact on later siblings. Technical 41 Presentation

Positioning and Floating •  The idea behind positioning is to allows you to define exactly where element boxes will appear relative to where they would ordinarily be, or relative to a parent element, another element, or even to the browser window itself •  Positioning models will alter the normal flow of the element under question –  Absolute –  Relative –  Fixed –  Static Technical 42 Presentation

Positioning and Floating … •  A floated element is removed from the normal flow of the document, although it still affects the layout –  Other content “flows around” it •  Floating replaced elements with just margins will ensure that the space will be occupied as much as the margins/ border specified –  A image with Margin 20px will occupy 40px of space even if the image is not loaded •  Floating a nonreplaced element must have a width attribute –  Else the element's width will tend toward zero Technical 43 Presentation

Positioning and Floating … •  If there are 2 floated elements, then the containing block will assume that it does not contain any element, and hence the Height will result to Zero –  Clearing the floats will result in proper height calculation Technical 44 Presentation

Managing your CSS Separation of Markup and Presentation Technical 45 Presentation

Problems with CSS and Web 2.0 •  Layouts are very complex, hence calculating margins, padding etc need to be done correctly •  Giving length measurements in % or ems are better for changing screen and font sizes. Layouts need to change accordingly •  Strict web development standards and accessibility guidelines enforce use of complex CSS for layouts •  Browser differences in CSS implementations cause differences in presentations •  Hacks and other tricks make the code messy and difficult to understand

Problems with CSS and Web 2.0 … •  Box model differences cause change in appearance of layouts in different browsers •  During Dynamic page interactions, calculations of floats and positioning can cause presentation issues Technical 47 Presentation

Markup and CSS •  The cascade can be very powerful but sometimes there is a temptation to use the same generic class name in many places –  Put your class name on the outer-most element. The child elements can be targeted with the parent elements class name or ID   <div class=quot;headertitlequot;>...</div> <div id=quot;headerquot;> <div class=quot;headerdescriptionquot;>...</div> <h3>...</h3> <div class=quot;headerlinksquot;>...</div> <p>...</p> <ul> <li>...</li> <ul> </div> Technical 48 Presentation

Markup and CSS … •  Markup is purely to represent structure of the data. –  Never mix structural elements and presentational elements –  Good clean semantic markup is essential for good page design •  Do not use inline styles, as you are mixing presentation with markup –  Inline styles will also not allow you to over ride the styles, and will force you to use !important •  Clean markup can also mean that you have complete control over the presentation, which can be changed by just swapping the CSS include Technical 49 Presentation

Things to remember •  Using class nesting can be useful, but over using it can be confusing •  Tracking which style actually applies to the element can be tough –  Understanding of Specificity, Inheritance, cascade and visual formatting is paramount •  Don't use too many #id on the page •  Try to create classes which are generic, and that can be applied to more than one element •  Be sure of the positioning model you are using Technical 50 Presentation

Things to remember … •  Use class nesting, cascading styles and other powers of CSS •  Try not to manipulate individual CSS via Javascript, instead, couple sets of style changes into a class •  Use document structure to your advantage •  For complex column based layouts, use standard CSS preferably YUI grids Technical 51 Presentation

Things to remember … •  CSS Class names should be descriptive of the feature not what they are doing .nav { Describes feature .bluebold { Describes style border:1px solid; font-weight : bold; width : 10em; color : blue; background-color: grey; } } Technical 52 Presentation

Things to remember … •  Try to split presentational styles across different style blocks ( or class names ) so that they can be nested to make it more readable and efficient <div class=“section”> .section { <h3>Section Header</h3> padding:1px 2px; … background-color: black; </div> color: white; <div class=“section selected“> } <h3>Section Header</h3> .selected { … border:1px dashed white; </div> font-style:italic; <div class=“warning selected”> color:green; <em>Something wrong</em> } </div> .warning { background-color:red; } Technical 53 Presentation

Things to remember … •  CSS is always closer to the <head> •  Always minify your CSS and deliver it off a content delivery network –  Saves from unwanted headers sent •  When your CSS is minimal, place all your CSS part of your page in the <style> tag inside the <head> tag •  Use CSS hacks only if necessary –  Commonly for Box model differences and IE PNG transparency issues –  Try to keep all the hacks in one place for better management Technical 54 Presentation

References Technical 55 Presentation

Also look at •  CSS: The Definitive Guide, 3rd Edition –  by Eric A. Meyer –  Available on Safari Online Books •  http://developer.yahoo.com/yui/grids/ •  http://www.positioniseverything.net/articles/ onetruelayout/ •  http://www.alistapart.com/articles/negativemargins/

Q&A Technical 57 Presentation

Thank you Technical 58 Presentation

Professional Css

by Subramanyan Guhan on Jun 12, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 4

Statistics

Professional Css — Presentation Transcript