css1Add my vote for this tag extract_stuff1Add my vote for this tag create new tag
, view all tags

Cascading Style Sheets.

CSS is used by both the authors and readers of web pages to define colors, fonts, layout, and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentational characteristics, and reduce complexity and repetition in the structural content. CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on braille-based, tactile devices. Similarly, identical HTML or XML markup can be displayed in a variety of styles, 'brands', liveries or colour schemes by using different CSS.


Advantages of using CSS include:

  • Presentation information for an entire website or collection of pages can be held in one place, and can be updated quickly and easily.
  • Different users can have different style sheets: for example a large text alternative for visually-impaired users, or a layout optimised for small displays for mobile phones.
  • The document code is reduced in size and complexity, since it does not need to contain any presentational markup.

Three flavours:

  • CSS1 - Font properties (typeface and emphasis), Color (of text, backgrounds, and other elements), Text attributes (spacing between words, letters, and lines of text), Alignment (of text, images, tables and other elements), *Margin, border, padding, and positioning for most elements, Unique identification and generic classification of groups of attributes
  • CSS2 - A superset of CSS1, CSS2 includes a number of new capabilities, among them the absolute, relative, and fixed positioning of elements, the concept of media types, support for aural style sheets and bidirectional text, and new font properties such as shadows.
  • CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS2, removes poorly-supported features and adds already-implemented browser extensions to the specification. While it was a Candidate Recommendation for several months, on 15 June 2005 it was reverted to a working draft for further review.
  • CSS3 - Under development http://www.w3.org/Style/CSS/current-work#table

Differences in browsers

CSS1 is fairly uniformly implemented. CSS2 : "as of 2006 no browser has achieved full implementation of CSS2. ". http://en.wikipedia.org/wiki/CSS_filter are used to acheive similar renderings despite underlying differences of the browsers.

"As of 2006, Internet Explorer remains the worst at rendering CSS as judged by World Wide Web Consortium standards." "Most problems attributed to CSS are actually results of browser bugs or lack of support for CSS features. The most serious offender among current browsers is Microsoft Internet Explorer, whose version 6 lacks support for about 30 percent of CSS2 properties, and, more significantly, misinterprets a significant number of important properties, such as "width", "height", and "float"." (http://en.wikipedia.org/w/index.php?title=Cascading_Style_Sheets&section=9#CSS_limitations)

PositionalCssIsImmatureTechnology reflects on "Even when the availability of CSS capable browsers made CSS a viable technology, the adoption of CSS was still held back by designers' struggles with browsers' incorrect CSS implementation and patchy CSS support. Even today, these problems continue to make the business of CSS design more complex and costly than it should be, and cross-browser testing remains a necessity. Other reasons for continuing non-adoption of CSS are: its complexity, inertia and authors' lack of familiarity with CSS and required techniques, poor support from authoring tools, the risks posed by inconsistency between browsers and the increased costs of testing, and less frequently a requirement to deliver consistent appearance even to users of ancient non-CSS-capable browsers."

Combating differences

  • CssHacks - different browser parsing means you can target CSS to get noticed by different browsers to overcome their shortcomings
  • CssConditionals - how Microsoft would like you to handle their broken browsers

How this should be handled for TWiki

Positional CSS seems to be so inconsistently implemented in IE vs FF that you spend your life working around the idiosyncrasies of each browser. Its impressive that PatternSkin works as well as it does but trying to edit layout.css makes extending extremely painful.

Short-term, many skin-developers are going to be pushed down into a rat-hole trying to extend PatternSkin

Longer term, I had a couple of thoughts from this:

  1. could covers pattern-tablebased and pattern-cssbased work for variants?
  2. rather than have the CSS filters conditional code in the file layout.css, could these be moved to files that you include?
#patternWrapp\65   r{ /*** for Opera and Moz (and some others will see it, but NOT Safari) ***/
   height:auto; /*** For moz to stop it fixing height to 100% ***/
/* \*/
* html #patternWrapper{
i.e. into libraries like layout-safari.css, layout-ie6.css, layout-mozilla.css?

-- Contributors: WikiPedia:Cascading_Style_Sheets, MartinCleaver


-- MartinCleaver - 29 Apr 2006

RobManson contacted me. I believe he is looking into this further.

-- MartinCleaver - 27 Aug 2007

Edit | Attach | Watch | Print version | History: r8 < r7 < r6 < r5 < r4 | Backlinks | Raw View | Raw edit | More topic actions
Topic revision: r8 - 2011-12-05 - PeterThoeny
  • Learn about TWiki  
  • Download TWiki
This site is powered by the TWiki collaboration platform Powered by Perl Hosted by OICcam.com Ideas, requests, problems regarding TWiki? Send feedback. Ask community in the support forum.
Copyright © 1999-2018 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.