W3C

CSS TV Profile 1.0

W3C Working Group Note 10 October 2014

This version:
http://www.w3.org/TR/2014/NOTE-css-tv-20141010/
Latest version:
http://www.w3.org/TR/css-tv
Previous version:
http://www.w3.org/TR/2003/CR-css-tv-20030514
Authors:
Sean Hayes (Microsoft) <shayes@microsoft.com>
Glenn Adams (Cox Communications, Inc.) <glenn@skynav.com>
Tantek Çelik (Mozilla Foundation) <tantek@cs.stanford.edu>
Håkon Wium Lie (Opera Software) <howcome@opera.com>

Abstract

This specification defines a subset of Cascading Style Sheets Level 2 and CSS3 module: Color specifications tailored to the needs and constraints of TV devices.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

Publication as a Working Group Note does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

This document was produced by the CSS Working Group (part of the Style Activity).

The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this document. When sending e-mail, please put the text “css-tv” in the subject, preferably like this: “[css-tv] …summary of comment…

This document was produced by a group operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document is governed by the 1 August 2014 W3C Process Document.

At this time, the CSS Working Group does not envisage further work on this specification and does not plan to propose it as a W3C Recommendation.

Table of contents

1. Overview

This document specifies a profile of the Cascading Style Sheets level 2 (CSS2) and CSS3 module: Color specifications appropriate for TV devices such as set top boxes or integrated interactive television sets that display their output on a television screen. Conformance to this profile means that a user agent supports, at minimum, the features defined in this specification. This subject is addressed in Section 2, Conformance, below.

As defined in [CSS2]:

CSS2 is a style sheet language that allows authors and users to attach style (e.g., fonts, spacing, and aural cues) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS2 simplifies Web authoring and site maintenance. CSS2 builds on CSS1 (see [CSS1]) and, with very few exceptions, all valid CSS1 style sheets are valid CSS2 style sheets. CSS2 supports media-specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc.

In summary, CSS2 specifies how developers can author style sheets for presenting documents across multiple devices and media types. While this is very important, it is also important that authors have an understanding of what features are supported on these different devices. Likewise, it is important that similar devices operate in a similar manner. Otherwise, authors will need to develop style sheets for each version of each device -- raising the cost of content development and decreasing interoperability.

The CSS TV Profile specifies a conformance profile for TV devices, identifying a minimum set of properties, values, selectors, and cascading rules. The resulting CSS TV Profile includes the vast majority of CSS1, portions of CSS2 and CSS3 module: Color. The CSS TV Profile is a proper superset of the CSS Mobile Profile, with the use of the ‘tv’ media type instead of the ‘handheld’ media type.

2. Conformance

The primary role of a profile is to define a subset of features that provides a minimal guarantee of interoperability. In the case of the CSS TV Profile, this guarantee is that a conforming user agent will support the features defined in this specification following the CSS2 conformance clause ([CSS2] Section 3.2), recast and summarized below:

  1. A CSS TV Profile conforming user agent (TV-UA) MUST support the all and tv CSS2 media types. A TV-UA MAY support other CSS2 media types, as well.
  2. For each source document, a TV-UA MUST attempt to retrieve all associated style sheets that are appropriate for the supported media types.
  3. A TV-UA MUST parse the style sheets according to this specification. In particular, the TV-UA MUST recognize all CSS TV Profile at-rules, blocks, declarations, and selectors. If a TV-UA encounters a property that applies for a supported media type, the TV-UA MUST parse the value according to the property definition. This means that the TV-UA MUST accept all valid values and MUST ignore declarations with invalid values. TV-UA MUST ignore rules that apply to unsupported media types.
  4. For each element in a document tree, the TV-UA MUST assign a value for every applicable property according to the property's definition and the rules of cascading and inheritance.
  5. If the source document comes with alternate style sheets (such as with the "alternate" keyword in HTML 4.0 [HTML40]), the TV-UA SHOULD allow the user to select one from among these style sheets and apply the selected one.

As with CSS2, there are qualifications to this conformance clause:

  1. Values MAY be approximated when required by the TV-UA.
  2. The inability of a TV-UA to implement part of this specification due to the limitations of a particular device (e.g., a TV-UA cannot render colors on a monochrome monitor or page) SHALL NOT imply non-conformance.

It is recommended that authors use this conformance profile to take advantage of forward compatibility. Authors should be able to use style properties with an understanding that the cascading rules are processed correctly and that unknown properties and values are ignored. For example:

  h3 {
    display: inline;
    display: run-in;
  }
  

A TV-UA that can process the ‘run-in’ value for the ‘display’ property will accept the first display declaration and then "write over" that value with the second display declaration. A TV-UA that cannot process the ‘run-in’ value will process the first display specification and ignore the second display specification.

3. Selectors and at-rules

3.1. Selectors

In CSS2, pattern matching rules determine which style rules apply to elements in the document tree [CSS2].

The following table summarizes CSS TV Profile selector syntax. In addition to these selectors, the CSS TV Profile includes the CSS2 grouping mechanism (See [CSS2] Section 5.2.1).

Note. Unsupported selectors are parsed as invalid (which would affect valid selectors in the same group), the same as if a purely CSS1 UA were to encounter selectors new in CSS2. Of course a TV-UA is free to implement more selectors than required by CSS TV.

Pattern Meaning Selector type CSS TV
* Matches any element Universal selector Yes
E Matches any E element (i.e., and element of type E) Type selectors Yes
E F Matches any F element that is a descendent of an E element Descendent selectors Yes
E > F Matches any F element that is a child of an element E Child selectors Yes
E:first-child Matches element E when it is the first child of its parent The :first-child pseudo-class Yes
E:link
E:visited
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes Yes
E:active Matches E during certain user actions. The dynamic pseudo-classes Yes
E:hover Matches E during certain user actions. The dynamic pseudo-classes No
E:focus Matches E during certain user actions. The dynamic pseudo-classes Yes
E:lang(c) Matches element of type E if it is in (human) language c (the document language specifies how language is determined). The :lang() pseudo-class No
E + F Matches any F element immediately preceded by an element E. Adjacent selectors No
E[foo] Matches any E element with the "foo" attribute set (whatever the value). Attribute selectors No
E[foo="bar"] Matches any E element whose "foo" attribute value is exactly equal to "bar". Attribute selectors No
E[foo~="bar"] Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "bar". Attribute selectors No
E[foo|="bar"] Matches any E element whose "foo" attribute value has a hyphen-separated list of values beginning (from the left) with "bar". Attribute selectors No
E:first-line Matches the first formatted line of an E element. The :first-line pseudo-element Yes
E:first-letter Matches the first formatted letter of an E element. The :first-letter pseudo-element Yes
E:before Matches/creates generated content before an E element. The :before pseudo-element No
E:after Matches/creates generated content after an E element. The :after pseudo-element No
E.bar Matches any E element whose class attribute (as defined by the document language) value is a list of space-separated values, one of which is exactly equal to "bar". Class selectors Yes
E#bar Matches any E element whose ID attribute (as defined by the document language) is equal to "bar". ID selectors Yes

3.2. at-rules

The following table summarizes CSS TV Profile at-rule syntax.

at-rule Function CSS TV
@import Imports an external style sheet. Yes
@charset Defines character set for the style sheet. Yes
@media Groups a set of style rules to apply only to one or more particular media. Yes
@font-face Defines a named font-family, including for downloading. No
@page Defines a (optionally named) page formatting context. No
@color-profile Defines a named color-profile. No

4. Properties

The following table summarizes CSS TV Profile properties and property values from CSS2. Refer to [CSS2] for the definition of these properties and values.

Name CSS TV CSS Values Initial value
azimuth No <angle> | [ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit center
background [‘background-color’ || ‘background-image’ || ‘background-repeat’ || ‘background-position’] | inherit [‘background-color’ || ‘background-image’ || ‘background-repeat’ || ‘background-attachment’ || ‘background-position’] | inherit see individual properties
background-attachment No scroll | fixed | inherit scroll
background-color Yes <color> | transparent | inherit transparent
background-image Yes <uri> | none | inherit none
background-position Yes [ [ <percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit 0% 0%
background-repeat Yes repeat | repeat-x | repeat-y | no-repeat | inherit repeat
border Yes [ <border-width> || <border-style> || <border-color> ] | inherit see individual properties
border-collapse No collapse | separate | inherit separate
border-color Yes <color>{1,4} | transparent | inherit see individual properties
border-spacing No <length> <length>? | inherit 0
border-style Yes <border-style>{1,4} | inherit see individual properties
border-top’ ‘border-right’ ‘border-bottom’ ‘border-left Yes [ <border-width> || <border-style> || <border-color> ] | inherit see individual properties
border-top-color’ ‘border-right-color’ ‘border-bottom-color’ ‘border-left-color Yes <color> | transparent | inherit the value of the ‘color’ property
border-top-style’ ‘border-right-style’ ‘border-bottom-style’ ‘border-left-style Yes <border-style> | inherit none
border-top-width’ ‘border-right-width’ ‘border-bottom-width’ ‘border-left-width Yes <border-width> | inherit medium
border-width Yes <border-width>{1,4} | inherit see individual properties
bottom Yes <length> | <percentage> | auto | inherit auto
caption-side Yes top | bottom | left | right | inherit top
clear Yes none | left | right | both | inherit none
clip Yes <shape> | auto | inherit auto
color Yes <color> | inherit depends on user agent
content No [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit empty string
counter-increment No [ <identifier> <integer>? ]+ | none | inherit none
counter-reset No [ <identifier> <integer>? ]+ | none | inherit none
cue No [ ‘cue-before’ || ‘cue-after’ ] | inherit see individual properties
cue-after No <uri> | none | inherit none
cue-before No <uri> | none | inherit none
cursor No [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit auto
direction No ltr | rtl | inherit ltr
display inline | block | list-item | none | inherit inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit inline
elevation No <angle> | below | level | above | higher | lower | inherit level
empty-cells No show | hide | inherit show
float Yes left | right | none | inherit none
font Yes [ [ ‘font-style’ || ‘font-variant’ || ‘font-weight’ ]? ‘font-size’ [ / ‘line-height’ ]? ‘font-family’ ] | caption | icon | menu | message-box | small-caption | status-bar | inherit see individual properties
font-family Yes [[ <family-name> | <generic-family> ],]* [ <family-name> | <generic-family> ] | inherit depends on user agent
font-size Yes <absolute-size> | <relative-size> | <length> | <percentage> | inherit medium
font-size-adjust No <number> | none | inherit none
font-stretch No normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit normal
font-style Yes normal | italic | oblique | inherit normal
font-variant Yes normal | small-caps | inherit normal
font-weight Yes normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit normal
height Yes <length> | <percentage> | auto | inherit auto
left Yes <length> | <percentage> | auto | inherit auto
letter-spacing No normal | <length> | inherit normal
line-height Yes normal | <number> | <length> | <percentage> | inherit normal
list-style Yes [ ‘list-style-type’ || ‘list-style-position’ || ‘list-style-image’ ] | inherit see individual properties
list-style-image Yes <uri> | none | inherit none
list-style-position Yes inside | outside | inherit outside
list-style-type disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | lower-latin | upper-alpha | upper-latin | none | inherit disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit disc
margin Yes <margin-width>{1,4} | inherit see individual properties
margin-top’ ‘margin-right’ ‘margin-bottom’ ‘margin-left Yes <margin-width> | inherit 0
marker-offset No <length> | auto | inherit auto
marks No [ crop || cross ] | none | inherit none
max-height No <length> | <percentage> | none | inherit none
max-width No <length> | <percentage> | none | inherit none
min-height No <length> | <percentage> | inherit 0
min-width No <length> | <percentage> | inherit depends on user agent
orphans No <integer> | inherit 2
outline Yes [ ‘outline-color’ || ‘outline-style’ || ‘outline-width’ ] | inherit see individual properties
outline-color Yes <color> | invert | inherit invert
outline-style Yes <border-style> | inherit none
outline-width Yes <border-width> | inherit medium
overflow No visible | hidden | scroll | auto | inherit visible
padding Yes <padding-width>{1,4} | inherit see individual properties
padding-top’ ‘padding-right’ ‘padding-bottom’ ‘padding-left Yes <padding-width> | inherit 0
page No <identifier> | auto auto
page-break-after No auto | always | avoid | left | right | inherit auto
page-break-before No auto | always | avoid | left | right | inherit auto
page-break-inside No avoid | auto | inherit auto
pause No [ [<time> | <percentage>]{1,2} ] | inherit depends on user agent
pause-after No <time> | <percentage> | inherit depends on user agent
pause-before No <time> | <percentage> | inherit depends on user agent
pitch No <frequency> | x-low | low | medium | high | x-high | inherit medium
pitch-range No <number> | inherit 50
play-during No <uri> mix? repeat? | auto | none | inherit auto
position static | relative | absolute | inherit static | relative | absolute | fixed | inherit static
quotes No [ <string><string>]+ | none | inherit depends on user agent
richness No <number> | inherit 50
right Yes <length> | <percentage> | auto | inherit auto
size No <length>{1,2} | auto | portrait | landscape | inherit auto
speak No normal | none | spell-out | inherit normal
speak-header No once | always | inherit once
speak-numeral No digits | continuous | inherit continuous
speak-punctuation No code | none | inherit none
speech-rate No <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit medium
stress No <number> | inherit 50
table-layout No auto | fixed | inherit auto
text-align left | right | center | justify | inherit left | right | center | justify | <string> | inherit depends on user agent and writing direction
text-decoration none | [ underline || overline || line-through ] | inherit none | [ underline || overline || line-through || blink ] | inherit none
text-indent Yes <length> | <percentage> | inherit 0
text-shadow No none | [<color> || <length> <length> <length>? ,]* [ <color> || <length> <length> <length>?] | inherit none
text-transform Yes capitalize | uppercase | lowercase | none | inherit none
top Yes <length> | <percentage> | auto | inherit auto
unicode-bidi No normal | embed | bidi-override | inherit normal
vertical-align baseline | sub | super | top | middle | bottom | inherit baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit baseline
visibility Yes visible | hidden | collapse | inherit inherit
voice-family No [[ <specific-voice> | <generic-voice> ],]* [ <specific-voice> | <generic-voice> ] | inherit depends on user agent
volume No <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit medium
white-space Yes normal | pre | nowrap | inherit normal
widows No <integer> | inherit 2
width Yes. Note that a TV UA may implement a UA style sheet rule of *{max-width: 100%} to avoid horizontal scrolling. <length> | <percentage> | auto | inherit auto
word-spacing No normal | <length> | inherit normal
z-index Yes auto | <integer> | inherit auto

The following table summarizes CSS TV Profile properties and property values from the CSS3 module: Color. Refer to [CSS3COLOR] for the definition of these properties and values.

Name CSS TV CSS Values Initial value
color HTML4 keywords, RGB and RGBA values, transparent, orange, inherit HTML4 keywords, RGB, RGBA, HSL, and HSLA values, transparent, X11 keywords, System Colors, flavor, attr(X,color), inherit depends on user agent
color-profile No auto | sRGB | <name> | <uri> | inherit auto
opacity Yes <alphavalue> <priority-index>? | inherit 1 none
rendering-intent no auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric | inherit auto

5. CSS Syntax

The CSS TV Profile uses the same syntax as specified in [CSS2]. The CSS TV Profile uses a subset of the values used in CSS2. Specifically:

  1. The TV-UA SHALL support integer and real numbers ([CSS2] Section 4.3.1).
  2. The TV-UA SHALL support the following lengths ([CSS2] Section 4.3.2): The TV-UA MAY support other lengths.
  3. The TV-UA SHALL support percentage values ([CSS2] Section 4.3.3).
  4. The TV-UA SHALL support URI values ([CSS2] Section 4.3.4).
  5. The TV-UA MAY support counter values ([CSS2] Section 4.3.5).
  6. The TV-UA SHALL support the following color values ([CSS2] Section 4.3.6): The TV-UA MAY support other color values.

Similarly, the CSS TV Profile requires that conforming user agents support the character encoding mechanisms specified in [CSS2]. Specifically:

  1. The TV-UA SHALL support priorities specified in [CSS2] to determine a document's character encoding.
  2. The TV-UA SHALL support the CSS2 @charset rules.

6. Assigning Property Values, Cascading, and Inheritance

In general, the CSS TV Profile uses the same cascading rules as in CSS2. Specifically:

  1. The TV-UA SHALL assign values as described in CSS2 ([CSS2] Section 6.1).
  2. The TV-UA SHALL support inheritance as described in CSS2 ([CSS2] Section 6.2).
  3. The TV-UA SHALL support the CSS2 @import rules as specified in CSS2 ([CSS2] Section 6.3).
  4. The TV-UA SHALL support author originating style sheets. The TV-UA MAY support user or user-agent originating style sheets ([CSS2] Section 6.4).
  5. The TV-UA SHALL support all CSS2 cascading mechanisms ([CSS2] Sections 6.4.1-6.4.4).

7. Media Types

A CSS TV Profile conforming user agent MUST be able to process media-dependent stylesheets as specified in CSS2 ([CSS2] Section 7). Specifically:

  1. The TV-UA SHALL support the CSS2 @media rules as specified in CSS2 ([CSS2] Section 7).
  2. The TV-UA SHALL accept and process style sheets that target the tv media type.
  3. The TV-UA SHALL accept and process style sheets that target the all media type.
  4. The TV-UA SHALL accept style sheets that contain other (non-tv) media-dependent style sheets.
  5. The TV-UA MAY process other media types (such as screen or print).

The TV-UA is not required to satisfy the CSS2 conformance statement pertaining to the tv media type (see [CSS2] Section 7.3.1); the TV-UA need only satisfy the conformance statements in this specification.

8. Acknowledgements

This document derives from the CSS Level 1 and CSS level 2 Recommendations, the CSS3 module: Color and the CSS Mobile Profile 1.0. We thank all CSS1, CSS2, CSS3 module: Color and CSS Mobile Profile authors, editors and contributors.

We would like to thank the members of the CSS working group, especially Bert Bos, Chris Lilley, and Tapas Kanti Roy for their direct feedback on the draft.

We would like to thank the contributors on www-style@w3.org. We would like to especially thank ARIB, Akihiko Handa, Joel Zdepski, Etan Wexler, Kynn Bartlett, Björn Höhrmann, and fantasai for their valuable comments on the draft.

Appendix A. Normative References

[CSS1]
Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS1-20080411
[CSS2]
Ian Jacobs; et al. Cascading Style Sheets, level 2 (CSS2) Specification. 11 April 2008. W3C Recommendation. URL: http://www.w3.org/TR/2008/REC-CSS2-20080411
[CSS3COLOR]
Tantek Çelik; Chris Lilley; L. David Baron. CSS Color Module Level 3. 7 June 2011. W3C Recommendation. URL: http://www.w3.org/TR/2011/REC-css3-color-20110607
[HTML401]
Dave Raggett; Arnaud Le Hors; Ian Jacobs. HTML 4.01 Specification. 24 December 1999. W3C Recommendation. URL: http://www.w3.org/TR/1999/REC-html401-19991224
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt