Separation of style and content
From Biocrawler, the free encyclopedia.
Separation of style and content, also known as Separation of presentation and content, is a methodology of web design in which the markup (i.e., HTML or XHTML) of a webpage contains the page's content and structure, but does not define its visual layout (style). Instead, the style is defined in an external CSS file. This differs from the traditional web design methodology, in which a page's markup defines both style and content.
| Contents |
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.
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=import' parameters. The more tags that repeat across the pages of the site, the greater the size savings by using CSS styles.
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.
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.
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.
Disadvantages
Complex Layouts
One of the major disadvantages of separating style and content is that complex layouts can be difficult to create. Many pages include multiple columns or heading bars, which are typically created with HTML tables. (The W3C recommends that HTML tables only be used to display tabular data.) For users inexperienced in writing CSS, these layouts can be difficult to recreate. Additionally, many browsers render certain CSS rules differently than others, meaning that a layout which looks correct in one browser may be quite broken in another.
External Links
- CSS Zen Garden (http://www.csszengarden.com): 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.
