What are the modules of CSS3

Web competence

CSS 3 modules

The modules of CSS 3 are the actual further development of the language scope of CSS. The modules adopt the CSS 2.1 standard and expand it. The division into modules has the advantage that each of these modules is its own W3 specification. Each of these modules therefore also has its own dynamic in the development and review process.

Module: Animations

This module contains a new rule named as well as a few new CSS properties such as,, etc., with the help of which any other CSS properties of elements can be changed dynamically on a timeline. This enables simple animations without JavaScript. Nevertheless, the module also defines a DOM interface to enable extended event handling. The animation module enables time-controlled states. Such animations can be refined with the possibilities of the transition module described below.

Module: Backgrounds and Borders

This module extends the set of CSS properties that begin with and, so it is responsible for background colors and borders. The following innovations compared to CSS 2.1 should be emphasized:

  • The property for scaling a background image in the extension space of an element,
  • The property for defining rounded corners
  • The new set of properties, starting with, that allows the definition of graphic decorative frames.

CSS Backgrounds and Borders Module Level 3
http://www.w3.org/TR/css3-background/
Status at the time of writing: Working Draft, soon to be a candidate for official recommendation
Priority according to the W3 consortium: medium

Module: Basic User Interface

This module deals with style components that are important in connection with interactive elements such as form elements, hyperlinks or other elements used interactively. The design of the cursor (the already known property) also belongs in this module. One of the novelties to highlight is a new set of important properties that start with. These are frames around elements which, unlike frames with properties, do not take up any additional space, but only serve to highlight the element interactively in certain contexts. Furthermore, the module contains a whole series of new pseudo-classes, for example and to visually distinguish valid and invalid content (such as a form element), or and to visually identify values ​​in the valid range and values ​​outside the valid range.
An inconspicuous new property called, which is at home in this module, has caused quite a stir in the scene. This property quickly undermines the previously valid box model of the W3 consortium and replaces it with the earlier Internet Explorer versions, which from the point of view of layout designers definitely has its advantages.

CSS3 Basic User Interface Module
http://www.w3.org/TR/css3-ui
Status at the time of writing: Candidate for official recommendation
Priority according to the W3 consortium: medium

Module: Basic Box Model

This module brings together numerous properties known from CSS 2.1, such as, and,,,, and properties. Important innovations here are the properties that enable text to be tilted, placed at an angle or vertically.

CSS basic box model
http://www.w3.org/TR/css3-box
Status at the time of writing: Working Draft
Priority according to the W3 consortium: medium

Module: Behavioral Extensions to CSS

This module defines a CSS interface for style references of HTML elements that have nothing to do with CSS. There is, for example, the XML language developed by the Mozilla project XBL (XML binding language), which can be used to describe the appearance and behavior of HTML elements. The CSS module defines a CSS property that can be used to refer to URLs with such descriptions.

Behavioral Extensions to CSS
http://www.w3.org/TR/becss
Status at the time of writing: Working Draft
Priority according to the W3 consortium: low

Module: Cascading and Inheritance

This module describes the principles of cascading and inheriting CSS properties to child elements. The module does not contain any major innovations compared to CSS 2.0 / 2.1.

CSS3 module: Cascading and inheritance
http://www.w3.org/TR/css3-cascade
Status at the time of writing: Working Draft
Priority according to the W3 consortium: medium

Module: Color

This module describes the well-known color property, but also the new, important property for semitransparent elements (elements positioned below shine through more or less depending on the degree of coverage - effects from computer games, but also from newer operating system interfaces such as MacOS or the Aero theme from Windows and are in great demand in web design. There are also new options for defining colors. For example, the well-known method is supplemented by an method that uses HSL (H = hue = Hue, S = saturation = Saturation, L = lightness = Luminosity) using percentage values. Furthermore, RGBA colors can be defined. The A stands for the alpha channel and describes the transparency or opacity of a color.

CSS3 module: Cascading and inheritance
http://www.w3.org/TR/css3-color
Status at the time of writing: Proposed Recommendation
Priority according to the W3 consortium: medium

Module: Flexible Box Layout

This module offers new options for arranging elements. In CSS 2.0 / 2.1, some arrangements, such as two buttons arranged next to each other in one area, with one aligned to the left and the other to the right, can only be achieved with trickery. Some designers also use the traditional blind table to solve such tasks. The Flexbox module from CSS 3 creates new arrangement possibilities with, and other properties beginning with.

Module: Fonts

This module brings together the properties that are already known from earlier CSS versions and that begin with.

Module: Generated Content for Paged Media

This module extends the possibilities introduced with CSS 2.0 to use CSS for print layouts or page-oriented editions. In CSS 3, the possibilities are greatly expanded, for example with running headers and footers with automated headings, with page and chapter numbering, automatic footnotes, etc.

CSS Generated Content for Paged Media Module
http://www.w3.org/TR/css3-gcpm
Status at the time of writing: Working Draft
Priority according to the W3 consortium: medium

Module: Generated and Replaced Content

This module already includes pseudo-classes known from CSS 2.0, such as: before and: after, as well as the option of automatically numbering elements with CSS. In CSS 3, there are additional options, such as the move-to property to move elements within the HTML document, or the property that allows, for example, language-dependent quotation marks to be defined.

CSS3 Generated and Replaced Content Module
http://www.w3.org/TR/css3-content
Status at the time of writing: Working Draft
Priority according to the W3 consortium: low

Module: Grid Positioning

Grid means something like grid. The grid module brings new properties and even a new unit of measurement called (1 grid) into play to support web design concepts that think in terms of tables. Several columns (property), several rows (property), recognizable imaginary lines both vertically and horizontally, which should provide more clarity and calm on pages that are crammed with content. In some circles of the web design scene, grid-based layout is favored, which is why this module has already received a lot of attention. However, its development is only progressing slowly.

CSS Grid Positioning Module Level 3
http://www.w3.org/TR/css3-grid
Status at the time of writing: Working Draft
Priority according to the W3 consortium: medium

Module: Hyperlink Presentation

This module moves the attribute from HTML to CSS and adds a set of new properties such as,, and. This makes perfect sense, because this way, for example, links can be opened in new windows / tabs depending on the class, i.e. only links to external destinations.

Module: Image Values ​​and Replaced Content

This module describes a new format called. In contrast to this, it is possible to note down optional information. This can be image resolution information, alternative colors if the image cannot be displayed, or - and this is particularly interesting - information to only display a certain section of the image. The latter possibility is the basis of the so-called CSS sprites. Smaller graphic resources of a website are all arranged in one graphic. So you don't have to transfer dozens of graphic files via HTTP, just one. And only a certain section of the image is displayed, which shows a graphic that is required in each case.

CSS Image Values ​​Module Level 3
http://www.w3.org/TR/css3-images
Status at the time of writing: Working Draft
Priority according to the W3 consortium: medium

Module: Line Box

In CSS 2.0 / 2.1 the possibility of controlling elements within a line is essentially limited to the properties and. These properties can also be found in the line grid module, but are almost lost there in an abundance of other new properties. For example the -properties, which regulate the filling of block elements with content, or the -properties, which mainly take into account various types of typographical baselines. Some of these properties are mainly important for Far Eastern syllable languages.

Module: Lists and Counters

This module essentially takes up the list properties of CSS 2.0 / 2.1 (etc.). The pseudo-element is new, which allows bullets or numbering numbers to be precisely formatted.

Module: Marquee

This module revives the microsoft proprietary HTML element. With the help of a set of properties called,,, and each HTML element can be turned into an animated scrolling text.

CSS Marquee Module Level 3
http://www.w3.org/TR/css3-marquee
Status at the time of writing: Candidate Recommendation (candidate for official recommendation)
Priority according to the W3 consortium: high

Module: Multi-column layout

This module takes up an old Netscape HTML approach, namely multi-column text flow with automatic column breaks. A set of new properties, namely,,,,,,, and allows you to define columns, column widths, spacing, behaviors, etc.

CSS multi-column layout module
http://www.w3.org/TR/css3-multicol
Status at the time of writing: Candidate Recommendation (candidate for official recommendation)
Priority according to the W3 consortium: medium

Module: Namespaces

This module is particularly important in connection with XML processing of XHTML or other XML-based languages. With the help of a new rule called, it allows the definition of namespaces analogous to XML. This means that namespace-dependent elements can be specifically addressed using selectors.

CSS Namespaces Module
http://www.w3.org/TR/css3-namespace
Status at the time of writing: Candidate Recommendation (candidate for official recommendation)
Priority according to the W3 consortium: medium

Module: Paged Media

This module is based on the CSS concepts for print layouts and page-oriented editions that were already introduced in CSS 2.0. For example, the page size can be defined, left and right pages can be differentiated, page margins can be determined, and information on page break control can be noted. New are the designations for the exact, layout-dependent addressing of certain head, foot and edge areas, as well as information on the display of images that are larger than the page.

CSS3 Module: Paged Media
http://www.w3.org/TR/css3-page
Status at the time of writing: Working Draft
Priority according to the W3 consortium: medium

Module: Presentation Levels

This module offers the possibility to provide the elements of an HTML document internally with numbers for hierarchy levels or with sequential numbers. The elements thus receive DOM information that can be used by scripts to display the content of such an HTML element in a special form, e.g. as an outlining (outline view) or as a slideshow (slide show).

CSS3 module: Presentation Levels
http://www.w3.org/TR/css3-preslev
Status at the time of writing: Working Draft
Priority according to the W3 consortium: low

Module: Ruby

Even at the logical markup level, HTML5 offers the option of noting Ruby text - a way that occurs in Far Eastern languages ​​to provide characters with additional information in order to specify the meaning of the characters in the context. The CSS Ruby module supplements this approach with a number of new CSS properties, namely,, and, with the help of which Ruby annotations can be positioned more precisely.

CSS3 Ruby Module
http://www.w3.org/TR/css3-ruby
Status at the time of writing: Candidate Recommendation (candidate for official recommendation)
Priority according to the W3 consortium: medium

Module: Speech

In this module, the aural stylesheet properties that were already introduced with CSS 2.0, but have been removed in the 2.1 standard due to a lack of practical relevance, are further developed. These are properties for controlling speech synthesizers.

Module: syntax

Within CSS 3, this module describes the general syntax, grammar and specialist vocabulary of CSS.

Module: Text

This module brings together properties related to text control. These include properties known from earlier CSS versions such as,, or. However, new properties are also being added, for example for text break control, as well as the two already very popular new properties and for graphic font effects.

Module: Template Layout

This module specifies a new way of defining complex website layouts. For this purpose, the display area is divided into regions, which can be arranged with the help of appropriate information. The whole thing is reminiscent of the old, obsolete HTML technology of framesets and is probably also an attempt to implement framesets based on CSS.

Modules: 2D Transforms, 3D Transforms

These modules provide new properties for rotating or stretching HTML text two-dimensionally or three-dimensionally.

Module: Transitions

This module introduces a set of new properties:,,, and. With the help of these properties, smooth transitions between different values ​​for a visual CSS property can be defined.

Module: Values ​​and Units

The module describes the value types used in CSS 3 for properties and the units of measurement used. Various new units of measurement have been added, namely:

  • for the number of columns or rows in a grid layout,
  • for the font size of the root element,
  • for the width of the viewport, i.e. the area available for the website in the browser's display window,
  • for the height of the viewport,
  • for the smaller side of the viewport (width or height, depending on how the viewport is designed or how the associated device is kept up to date).
  • for the width of the glyph 0 in the currently used font
  • for degree (1/360 of a circle)
  • for gon (geodetic angle measure)
  • for radians
  • for turn (400 gon)
  • for milliseconds
  • for seconds
  • for Hertz
  • for kilohertz

Module: Writing Modes

This module is still in its early stages. It transfers the HTML concepts for bidirectional text (element) into CSS and provides properties for controlling changes in the direction of text within a document.

CSS 3 profiles

In the future, CSS will not only consist of versions, but also so-called Profiles. CSS profiles are CSS subsets for certain output media. At the time of writing, the first three of these profiles existed: the mobile profile for cell phones and PDAs, the print profile for print media, and the TV profile for televisions.

Mobile profile

The mobile profile describes a subset of CSS rules, selectors and properties for high-quality mobile radio devices and handhelds. The property set consists of most of the visual properties of CSS 2.1, supplemented by the marquee properties of CSS 3, presumably on the assumption that scrolling text could be a design alternative for small displays.

CSS Mobile Profile 2.0
http://www.w3.org/TR/css-mobile
Status at the time of writing: Version 2.0, Candidate Recommendation (candidate for official recommendation)

Print profile

This profile defines which rules, selectors and properties printers should be able to interpret and implement from CSS if no special printer driver can or should not be installed. This includes, of course, the rules and properties for paged media, including the newer rules for addressing certain margin areas.

TV profile

This profile describes the CSS capabilities that a web browser integrated in TV sets should have. This essentially corresponds to the language scope of CSS 2.1, supplemented by some important newer CSS3 properties.

CSS TV Profile 1.0
http://www.w3.org/TR/css-tv
Status at the time of writing: Candidate Recommendation (candidate for official recommendation)

 


Corrections, notes and additions
Please do not be shy and report what is factually incorrect or misleading on this page, what should be added, what is missing, etc. Please use the menu above page the entry To discuss choose. No registration is required to post comments. Inappropriate postings, spam, etc. will be removed without comment.