Versions.
Variations.
CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically denoted as CSS 1, CSS 2, CSS 3, and CSS 4. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types, which were added in CSS 2.
CSS 1.
The first CSS specification to
become an official W3C Recommendation is CSS level 1, published on December 17,
1996. Hรฅkon
Wium Lie and Bert Bos are credited as the original developers. Among its capabilities are support for
·
Font properties
such as typeface and emphasis
·
Color of text, backgrounds, and other elements
·
Text attributes such as 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
The W3C no longer maintains the
CSS 1 Recommendation.
CSS 2.
CSS level 2 specification was
developed by the W3C and published as a recommendation in May 1998. A superset
of CSS 1, CSS 2 includes a number of new capabilities like absolute,
relative, and fixed positioning of elements and z-index, the concept of media types,
support for aural style sheets (which were later replaced by the CSS 3 speech
modules) and
bidirectional text, and new font properties such as shadows.
The W3C no longer maintains the
CSS 2 recommendation.
CSS 2.1.
CSS level 2 revision 1, often
referred to as "CSS 2.1", fixes errors in CSS 2, removes poorly
supported or not fully interoperable features and adds already-implemented
browser extensions to the specification. To comply with the W3C Process for
standardizing technical specifications, CSS 2.1 went back and forth
between Working Draft status and Candidate Recommendation status for many
years. CSS 2.1 first became a Candidate
Recommendation on
February 25, 2004, but it was reverted to a Working Draft on June 13, 2005 for
further review. It returned to Candidate Recommendation on 19 July 2007 and
then updated twice in 2009. However, since changes and clarifications were
made, it again went back to Last Call Working Draft on 7 December 2010.
CSS 2.1 went to Proposed
Recommendation on 12 April 2011 After
being reviewed by the W3C Advisory Committee, it was finally published as a W3C
Recommendation on 7 June 2011.
CSS 3.
"CSS3"
redirects here. For other uses, see CSS3
(disambiguation).
Taxonomy
and status of CSS3.
Unlike CSS 2, which is a
large single specification defining various features, CSS 3 is divided
into several separate documents called "modules". Each module adds
new capabilities or extends features defined in CSS 2, preserving backward
compatibility. Work on CSS level 3 started around the time of publication of
the original CSS 2 recommendation. The earliest CSS 3 drafts were
published in June 1999. Due to the modularization, different modules have
different stability and statuses. As
of June 2012, there are over fifty CSS modules published from the CSS Working
Group., and four of these have
been published as formal recommendations:
·
2012-06-19: Media
Queries
·
2011-09-29: Namespaces
·
2011-09-29: Selectors
Level 3
·
2011-06-07: Color
Some modules (including Backgrounds and Borders and Multi-column
Layout among
others) have Candidate
Recommendation (CR)
status and are considered moderately stable. At CR stage, implementations are advised to
drop vendor prefixes. Summary of
all module-specifications:
| Module | Specification title | Status, date |
|---|---|---|
| css3-background | CSS Backgrounds and Borders Module Level 3 | Candidate Recommendation, September 2014 |
| css3-box | CSS basic box model | Working Draft, August 2007 |
| css-cascade-3 | CSS Cascading and Inheritance Level 3 | Candidate Recommendation, October 2013 |
| css3-color | CSS Color Module Level 3 | Recommendation, June 2011 |
| css3-content | CSS3 Generated and Replaced Content Module | Working Draft, May 2003 |
| css-fonts-3 | CSS Fonts Module Level 3 | Candidate Recommendation, October 2013 |
| css3-gcpm | CSS Generated Content for Paged Media Module | Working Draft, May 2014 |
| css3-layout | CSS Template Layout Module | Working Draft, November 2011 |
| css3-mediaqueries | Media Queries | Recommendation, June 2012 |
| css3-page | CSS Paged Media Module Level 3 | Working Draft, March 2013 |
| css3-selectors | Selectors Level 3 | Recommendation, September 2011 |
| css3-ui | CSS Basic User Interface Module Level 3 (CSS3 UI) | Working Draft, January 2012 |
CSS 4.
There is no single, integrated CSS4 specification, since it is split into separate modules. However, there are "level 4" modules. Since CSS3 split the CSS language's definition into modules, the modules have been allowed to level independently. Most modules are level 3 - they build on things from CSS 2.1. A few level 4 modules exist (such as Image Values, Backgrounds & Borders, or Selectors), which build on the functionality of a preceding level 3 module. Others define entirely new functionality, such as Flexbox. So, while no monolithic CSS4 will be worked on after CSS3 is finished completely, the level 4 modules can collectively be referred to as CSS4.
Browser Support.
Because not all browsers correctly parse CSS code, developed coding techniques known as CSS hacks can either filter specific browsers or target specific browsers (generally both are known as CSS filters). The former can be defined as CSS filtering hacks and the latter can be defined as CSS targeting hacks. Both can be used to hide or show parts of the CSS to different browsers. This is achieved either by exploiting CSS-handling quirks or bugs in the browser, or by taking advantage of lack of support for parts of the CSS specifications. Using CSS filters, some designers have gone as far as delivering different CSS to certain browsers to ensure designs render as expected. Because very early web browsers were either completely incapable of handling CSS, or rendered CSS very poorly, designers today often routinely use CSS filters that completely prevent these browsers from accessing any of the CSS. Internet Explorer support for CSS began with IE 3.0 and increased progressively with each version. By 2008, the first Beta of Internet Explorer-8 offered support for CSS 2.1 in its best web standards mode.
An example of a historically well-known CSS browser bug was the Internet Explorer box model bug, where box widths are interpreted incorrectly in several versions of the browser, resulting in blocks that are too narrow when viewed in Internet Explorer, but correct in standards-compliant browsers. The bug can be avoided in Internet Explorer 6 by using the correct doctype in (X)HTML documents. CSS hacks and CSS filters are used to compensate for bugs such as this, just one of hundreds of CSS bugs that have been documented in various versions of Netscape, Mozilla Firefox, Opera, and Internet Explorer (including Internet Explorer 7). 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 was intended to be, and cross-browser testing remains a necessity. Other reasons for the continuing non-adoption of CSS are: its perceived complexity, authors' lack of familiarity with CSS syntax and required techniques, poor support from authoring tools, the risks posed by inconsistency between browsers and the increased costs of testing. Currently there is strong competition between the WebKit layout engine used in Apple Safari and Google Chrome, the similar KHTML engine used in KDE's Konqueror browser and Mozilla's Gecko layout engine used in Firefox — each of them is leading in different aspects of CSS. As of August 2009, Internet Explorer 8, Firefox 2 and 3 have reasonably complete levels of implementation of CSS 2.1
Limitations.
Some Noted Limitations Of The Current Capabilities Of CSS Include:
- Selectors Are Unable To Ascend.
- CSS currently offers no way to select a parent or ancestor of an element that satisfies certain criteria. CSS Selectors Level 4, which is still in Working Draft status, proposes such a selector, but only as part of the “complete” selector profile, not the “fast” profile used in dynamic CSS styling. A more advanced selector scheme (such as XPath) would enable more sophisticated style sheets. The major reasons for the CSS Working Group previously rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.
- Vertical Control Limitations.
- While horizontal placement of elements is generally easy to control, vertical placement is frequently unintuitive, convoluted, or outright impossible. Simple tasks, such as centering an element vertically or getting a footer to be placed no higher than bottom of view port, either require complicated and unintuitive style rules, or simple but widely unsupported rules.
- Absence Of Expressions.
- There is currently no ability to specify property values as simple expressions (such as
margin-left: 10% – 3em + 4px;). This would be useful in a variety of cases, such as calculating the size of columns subject to a constraint on the sum of all columns. However, a working draft with a calc() value to address this limitation has been published by the CSS WG. Internet Explorer versions 5 to 7 support a proprietary expression() statement, with similar functionality. This proprietary expression() statement is no longer supported from Internet Explorer 8 onwards, except in compatibility modes. This decision was taken for "standards compliance, browser performance, and security reasons". - Lack Of Column Declaration.
- While possible in current CSS 3 (using the
column-countmodule), layouts with multiple columns can be complex to implement in CSS 2.1. With CSS 2.1, the process is often done using floating elements, which are often rendered differently by different browsers, different computer screen shapes, and different screen ratios set on standard monitors. - Cannot Explicitly Declare New Scope Independently Of Position.
- Scoping rules for properties such as z-index look for the closest parent element with a position:absolute or position:relative attribute. This odd coupling has undesired effects. For example, it is impossible to avoid declaring a new scope when one is forced to adjust an element's position, preventing one from using the desired scope of a parent element.
- Pseudo-Class Dynamic Behavior Not Controllable.
- CSS implements pseudo-classes that allow a degree of user feedback by conditional application of alternate styles. One CSS pseudo-class, ":hover", is dynamic (equivalent of JavaScript "on-mouse-over") and has potential for abuse (e.g., implementing cursor-proximity popups), but CSS has no ability for a client to disable it (no "disable"-like property) or limit its effects (no "no-change"-like values for each property).
- Cannot Name Rules.
- There is no way to name a CSS rule, which would allow (for example) client-side scripts to refer to the rule even if its selector changes.
- Cannot Include Styles From A Rule Into Another Rule.
- CSS styles often must be duplicated in several rules to achieve a desired effect, causing additional maintenance and requiring more thorough testing.
- Cannot Target Specific Text Without Altering Markup.
- Besides the
:first-letterpseudo-element, one cannot target specific ranges of text without needing to utilize place-holder elements. Advantages.
- Separation Of Content From Presentation.
- CSS facilitates publication of content in multiple presentation formats based on nominal parameters. Nominal parameters include explicit user preferences, different web browsers, the type of device being used to view the content (a desktop computer or mobile Internet device), the geographic location of the user and many other variables.
class, type or relationship to others. This is much more efficient than repeating style information inline for each occurrence of the element. An external style-sheet is usually stored in the browser cache, and can therefore be used on multiple pages without being reloaded, further reducing data transfer over a network.