Separation of style and content
From Wikipedia, the free encyclopedia
- This article is about stylesheets applied to web pages. For more general treatment of this topic, see Separation of presentation and content.
Separation of style and content — also known as separation of presentation and content or semantic web — is a methodology of web design in which the markup (i.e., HTML or XHTML) of a webpage contains the page's semantic content and structure, but does not define its visual layout (style). Instead, the style is defined in an external stylesheet file using a language such as CSS or XSL. This differs from the traditional web design methodology, in which a page's markup defines both style and content.
The philosophy underlying this methodology is a specific case of separation of concerns.
Contents |
[edit] Benefits
Separation of style and content has many benefits, but has only become practical in recent years due to improvements in popular web browsers' CSS implementations.
[edit] Speed
One benefit is that the styles only need to be downloaded once, on the first page the user visits. The stylesheet goes into the browser's cache, and thus need not be downloaded again for all other pages that use that style sheet.
Another factor that speeds up browsing of sites with separated style and content is that shorthand is used to describe a set of styles. A page that has, say, 20 occurrences of '<font size=''2'' color=''red''> </font>' could replace those with 20 'class=important' parameters. The more tags that repeat across the pages of the site, the greater the size savings by using CSS styles.
[edit] Maintainability
A single change to the CSS stylesheet file can affect the entire site. Changes to site appearance can be cheaper, easier, faster -- thus more likely to happen. Sites are less likely to become stale. However, this also means that a single change can quickly 'break' the site's appearance, and hence designers must keep multiple backups of the CSS file.
The XHTML or HTML pages are primarily made up of content, so editing those files is less likely to 'break' the appearance of the site. Pages using CSS to store layout information are also easier to update with new content, because if the content is properly marked up, no new layout information needs to be added in order for the new content's appearance to be consistent with existing content.
[edit] Accessibility
Sites that use CSS with either XHTML or HTML are easier to tweak so that they appear extremely similar in different browsers (Internet Explorer, Mozilla Firefox, Mozilla, Opera, Safari, etc.).
Sites using CSS "degrade gracefully" in browsers unable to display graphical content, such as Lynx, or those so very old that they cannot use CSS. Browsers ignore CSS that they do not understand, such as CSS 3 statements. This enables a wide variety of user agents to be able to access the content of a site even if they cannot render the stylesheet or are not designed with graphical capability in mind. For example, a browser using a refreshable braille display for output could disregard layout information entirely, and the user would still have access to all page content.
[edit] Customization
If a page's layout information is all stored externally, a user can decide to disable the layout information entirely, leaving the site's bare content still in a readable form. Site authors may also offer multiple stylesheets, which can be used to completely change the appearance of the site without altering any of its content.
Most modern web browsers also allow the user to define their own stylesheet, which can include rules that override the author's layout rules. This allows users, for example, to bold every hyperlink on every page they visit.
[edit] Consistency
Because the semantic file contains only the meanings an author intends to convey, the styling of the various elements of the document's content is very consistent. For example, headings, emphasized text, lists and mathematical expressions all receive consistently applied style properties from the external stylesheet. Authors need not concern themselves with the style properties at the time of composition. These presentational details can be deferred until the moment of presentation.
[edit] Portability
The deferment of presentational details until the time of presentation means that a document can be easily re-purposed for an entirely different presentation medium with merely the application of a new stylesheet already prepared for the new medium and consistent with elemental or structural vocabulary of the semantic document. A carefully authored document for a web page can easily be printed to a hard-bound volume complete with headers and footers, page numbers and a generated table of contents simply by applying a new stylesheet.
[edit] Practical disadvantages today
Currently specifications (for example, XHTML, XSL, CSS) and software tools implementing these specification are only reaching the early stages of maturity. So there are some practical issues facing authors who seek to embrace this method of separating content and style.
[edit] Lack of semantic vocabulary
HTML offers a rich, but limited vocabulary of semantic elements (for example paragraph, quote, emphasis). The migration of HTML to the extensible XHTML may eventually speed the proliferation of richer semantic vocabularies to apply generalized styles to. So for example extensions such as Ruby (annotation markup), MathML, Xforms, XFrames and so forth will bring new elements for use in content documents: elements that will likely have readily available stylesheets for presentation. However, today these missing components mean content authors must create their own ad hoc elements to express themselves.
[edit] Complex layouts
One of the practical problems is the lack of proper support for style languages in major browsers.[1] Typical web page layouts call for some tabular presentation of the major parts of the page such as menu navigation columns and header bars, navigation tabs, and so on. However, deficient support for CSS and XSL in major browsers forces authors to code these tables within their content rather than applying a tabular style to the content from the accompanying stylesheet.
[edit] Narrow adoption without the parsing and generation tools
While the style specifications are quite mature and still maturing, the software tools have been slow to adapt. Most of the major web development tools still embrace a mixed presentation-content model. So authors and designers looking for GUI based tools for their work find it difficult to follow the semantic web method. In addition to GUI tools, shared repositories for generalized stylesheets would probably aid adoption of these methods.
[edit] See also
[edit] Footnotes
- ^ Primarily the browsers with deficient support all come from only one vendor. However this vendor dominates the market for web browsers and even their latest browser (as of 2006) show little inclination to embrace the semantic web methodology.
[edit] External links
- CSS Zen Garden: A site which challenges designers to create new page layouts without touching the XHTML source. Includes dozens of layouts. CSS source can be viewed for every layout.
- CSS Articles - A great selection of free articles, several of which delve into the separation of style in content when designing with CSS
