CSS 2.1 Properties support in Opera Presto 2.8

W3C reference

W3C CSS 2.1 Properties

Opera articles

Automatic numbering with CSS Counters

CSS generated content techniques

Opera Presto offers support for CSS 2.1 properties as described in the following data table.

• CSS 1 and CSS 2 properties have been combined into the CSS 2.1 properties group.
• All deprecated (no longer supported) properties from CSS 1 and CSS 2 have been removed.
• CSS3 properties are listed in their individual Opera Presto CSS3 module support tables.

Note: The cursor property values "zoom-in" and "zoom-out" are now supported without the Opera proprietary -o- prefix.

CSS 2.1 properties

Property	Values	Description	Support
background	[<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit	The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet.	Yes
background-attachment	scroll | fixed | inherit	If a background image is specified, this property specifies whether it is fixed with regard to the viewport ('fixed') or scrolls along with the containing block ('scroll').	Yes
background-color	<color> | transparent | inherit	This property sets the background color of an element, either a <color> value or the keyword 'transparent', to make the underlying colors shine through.	Yes
background-image	<uri> | none | inherit	This property sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).	Yes
background-position	[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit	If a background image has been specified, this property specifies its initial position. If only one value is specified, the second value is assumed to be 'center'. If at least one value is not a keyword, then the first value represents the horizontal position and the second represents the vertical position. Negative <percentage> and <length> values are allowed.	Yes
background-repeat	repeat | repeat-x | repeat-y | no-repeat | inherit	If a background image is specified, this property specifies whether the image is repeated (tiled), and how. All tiling covers the content, padding and border areas of a box.	Yes
border	[ <border-width> || <border-style> || <'border-top-color'> ] | inherit	The 'border' property is a shorthand property for setting the same width, color, and style for all four borders of a box. Unlike the shorthand 'margin' and 'padding' properties, the 'border' property cannot set different values on the four borders. To do so, one or more of the other border properties must be used.	Yes
border-bottom	[ <border-width> || <border-style> || <'border-bottom-color'> ] | inherit	This is a shorthand property for setting the width, style, and color of the bottom border of a box.	Yes
border-bottom-color	<color> | transparent | inherit	The 'border-bottom-color' property sets the color of the bottom border.	Yes
border-bottom-style	<border-style> | inherit	The 'border-bottom-style' property sets the style of the border bottom.	Yes
border-bottom-width	<border-width> | inherit	This property sets the width of the bottom border of a box.	Yes
border-collapse	collapse | separate | inherit	This property selects a table's border model. The value 'separate' selects the separated borders border model. The value 'collapse' selects the collapsing borders model.	Yes
border-color	[ <color> | transparent ]{1,4} | inherit	he 'border-color' property sets the color of the four borders.	Yes
border-left	[ <border-width> || <border-style> || <'border-left-color'> ] | inherit	This is a shorthand property for setting the left border of a box.	Yes
border-left-color	<color> | transparent | inherit	This property specifies the color of a box's left border.	Yes
border-left-style	<border-style> | inherit	The 'border-left-style' property sets the style of the left border.	Yes
border-left-width	<border-width> | inherit	This property sets the width of the left border of a box.	Yes
border-right	[ <border-width> || <border-style> || <'border-right-color'> ] | inherit	This is a shorthand property for setting the width, style, and color of the right border of a box.	Yes
border-right-color	<color> | transparent | inherit	This property specifies the color of a box's right border.	Yes
border-right-style	<border-style> | inherit	The 'border-right-style' property sets the style of the right border.	Yes
border-right-width	<border-width> | inherit	This property sets the width of the right border of a box.	Yes
border-spacing	<length> <length>? | inherit	This property specifies the distance that separates adjoining cell borders.	Yes
border-style	<border-style>{1,4} | inherit	This property sets the style of the four borders. It can have from one to four values, and the values are set on the different sides.	Yes
border-top	[ <border-width> || <border-style> || <'border-top-color'> ] | inherit	This is a shorthand property for setting the width, style, and color of the top border of a box.	Yes
border-top-color	<color> | transparent | inherit	This property sets the color of the top border.	Yes
border-top-style	<border-style> | inherit	This property sets the style of the top border.	Yes
border-top-width	<border-width> | inherit	This property sets the width of the top border.	Yes
border-width	<border-width>{1,4} | inherit	This property is a shorthand property for setting 'border-top-width', 'border-right-width', 'border-bottom-width', and 'border-left-width' at the same place in the style sheet.	Yes
bottom	<length> | <percentage> | auto | inherit	This property specifies how far a box's bottom margin edge is offset above the bottom of the box's containing block.	Yes
clear	none | left | right | both | inherit	This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.	Yes
clip	<shape> | auto | inherit	This property applies only to absolutely positioned elements.	Yes
color	<color> | inherit	This property describes the foreground color of an element's text content.	Yes
content	normal | none | [ <string> | <uri> | <counter> | attr(<identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit	This property is used with the :before and :after pseudo-elements to generate content in a document.	Yes
counter-increment	[ <identifier> <integer>? ]+ | none | inherit	This property accepts one or more names of counters (identifiers), each one optionally followed by an integer. The integer indicates by how much the counter is incremented for every occurrence of the element. The default increment is 1. Zero and negative integers are allowed.	Yes
counter-reset	[ <identifier> <integer>? ]+ | none | inherit	This property contains a list of one or more names of counters, each one optionally followed by an integer. The integer gives the value that the counter is set to on each occurrence of the element. The default is 0.	Yes
cursor	[ [<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 | progress | zoom-in | zoom-out ] ] | inherit	This property specifies the type of cursor to be displayed for the pointing device. The <uri> value is not yet supported.	Partial
direction	ltr | rtl | inherit	This property specifies the base writing direction of blocks and the direction of embeddings and overrides (see 'unicode-bidi') for the Unicode bidirectional algorithm. In addition, it specifies the direction of table column layout, the direction of horizontal overflow, and the position of an incomplete last line in a block in case of 'text-align: justify'.	Yes
empty-cells	show | hide | inherit	In the separated borders model, this property controls the rendering of borders and backgrounds around cells that have no visible content. Empty cells and cells with the 'visibility' property set to 'hidden' are considered to have no visible content.	Yes
float	left | right | none | inherit	This property specifies whether a box should float to the left, right, or not at all. It may be set for any element, but only applies to elements that generate boxes that are not absolutely positioned.	Yes
font	[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit	This is a shorthand property for setting 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' and 'font-family' at the same place in the style sheet. The syntax of this property is based on a traditional typographical shorthand notation to set multiple properties related to fonts.	Yes
font-family	[[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inherit	The value is a prioritized list of font family names and/or generic family names. Unlike most other CSS properties, values are separated by a comma to indicate that they are alternatives.	Yes
font-size	<absolute-size> | <relative-size> | <length> | <percentage> | inherit	The font size corresponds to the em square, a concept used in typography.	Yes
font-style	normal | italic | oblique | inherit	This property selects between normal (sometimes referred to as "roman" or "upright"), italic and oblique faces within a font family.	Yes
font-variant	normal | small-caps | inherit	This property causes text to be transformed to uppercase.	Yes
font-weight	normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit	This property selects the weight of the font.	Yes
height	<length> | <percentage> | auto | inherit	This property specifies the content height of boxes generated by block-level, inline-block and replaced elements.	Yes
left	<length> | <percentage> | auto | inherit	This property is like 'top', but specifies how far a box's left margin edge is offset to the right of the left edge of the box's containing block. For relatively positioned boxes, the offset is with respect to the left edge of the box itself.	Yes
letter-spacing	normal | <length> | inherit	This property specifies spacing behavior between text characters.	Yes
line-height	normal | <number> | <length> | <percentage> | inherit	This property specifies the minimal height of line boxes within the element.	Yes
list-style	[ <'list-style-type'> || <'list-style-position'> || <'list-style-image'> ] | inherit	This property is a shorthand notation for setting the three properties 'list-style-type', 'list-style-image', and 'list-style-position' at the same place in the style sheet.Opera does not support the list style types cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha.	Partial
list-style-image	<uri> | none | inherit	This property sets the image that will be used as the list item marker. When the image is available, it will replace the marker set with the 'list-style-type' marker.	Yes
list-style-position	inside | outside | inherit	This property specifies the position of the marker box in the principal block box.	Yes
list-style-type	disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit	This property specifies appearance of the list item marker if 'list-style-image' has the value 'none' or if the image pointed to by the URI cannot be displayed. The value 'none' specifies no marker, otherwise there are three types of marker: glyphs, numbering systems, and alphabetic systems. Opera does not support the list style types cjk-ideographic, hebrew, hiragana, hiragana-iroha, katakana, katakana-iroha.	Partial
margin	<margin-width>{1,4} | inherit	The 'margin' property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet.	Yes
margin-bottom	<margin-width> | inherit	This property sets the bottom margin of a box.	Yes
margin-left	<margin-width> | inherit	This property sets the left margin of a box.	Yes
margin-right	<margin-width> | inherit	This property sets the right margin of a box.	Yes
margin-top		This property sets the top margin of a box.	Yes
max-height	<length> | <percentage> | none | inherit	This property allows authors to constrain box heights to a maximum height.	Yes
max-width	<length> | <percentage> | none | inherit	This property allows authors to set content widths to a maximum width.	Yes
min-height	<length> | <percentage> | inherit	This property allows authors to constrain box heights to a minimum height.	Yes
min-width	<length> | <percentage> | inherit	This property allows authors to set content widths to a minimum width.	Yes
orphans	<integer> | inherit	This property specifies the minimum number of lines in a block element that must be left at the bottom of a page.	Yes
outline	[ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit	This is a shorthand property which controls the style of dynamic outlines.	Yes
outline-color	<color> | inherit	This property controls the color of the outline.	Yes
outline-style	<border-style> | inherit	This property controls the style of the outline.	Yes
outline-width	<border-width> | inherit	This property controls the width of the outline.	Yes
overflow	visible | hidden | scroll | auto | inherit	This property specifies whether content of a block-level element is clipped when it overflows the element's box. It affects the clipping of all of the element's content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.	Yes
padding	<padding-width>{1,4} | inherit	This is a shorthand property for setting 'padding-top', 'padding-right', 'padding-bottom', and 'padding-left' at the same place in the style sheet.	Yes
padding-bottom	<padding-width> | inherit	This property sets the bottom padding of a box.	Yes
padding-left	<padding-width> | inherit	This property sets the left padding of a box.	Yes
padding-right	<padding-width> | inherit	This property sets the right padding of a box.	Yes
padding-top	<padding-width> | inherit	This property sets the top padding of a box.	Yes
page-break-after	auto | always | avoid | left | right | inherit	This property indicates where the user agent may or should break pages, and on what page (left or right) the subsequent content should resume.	Yes
page-break-before	auto | always | avoid | left | right | inherit	This property indicates where the user agent may or should break pages, and on what page (left or right) the subsequent content should resume.	Yes
page-break-inside	auto | avoid | linherit	This property indicates where the user agent may or should break pages inside an element.	Yes
position	static | relative | absolute | fixed | inherit	This property determines which of the CSS 2.1 positioning algorithms is used to calculate the position of a box.	Yes
quotes	[<string> <string>]+ | none | inherit	This property specifies quotation marks for any number of embedded quotations.	Yes
right	<length> | <percentage> | auto | inherit	This property specifies how far a box's right margin edge is offset to the left of the right edge of the box's containing block.	Yes
table-layout	auto | fixed | inherit	This property controls the algorithm used to lay out the table cells, rows, and columns.	Yes
text-align	left | right | center | justify | inherit	This property describes how inline content of a block is aligned.	Yes
text-decoration	none | [ underline || overline || line-through || blink ] | inherit	This property describes decorations that are added to the text of an element using the element's color.	Yes
text-indent	<length> | <percentage> | inherit	This property specifies the indentation of the first line of text in a block. More precisely, it specifies the indentation of the first box that flows into the block's first line box.	Yes
text-transform	capitalize | uppercase | lowercase | none | inherit	This property controls capitalization effects of an element's text.	Yes
top	<length> | <percentage> | auto | inherit	This property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's containing block.	Yes
unicode-bidi	normal | embed | bidi-override | inherit	This property allow authors to specify how the elements and attributes of a document language map to the unicode bidirectional algorithm for determining the proper directionality of text.	Yes
vertical-align	baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit	This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element.	Yes
visibility	visible | hidden | collapse | inherit	This property specifies whether the boxes generated by an element are rendered.	Yes
white-space	normal | pre | nowrap | pre-wrap | pre-line | inherit	This property declares how white space inside the element is handled.	Yes
widows	<integer> | inherit	This property specifies the minimum number of lines in a block element that must be left at the top of a page.	Yes
width	<length> | <percentage> | auto | inherit	This property specifies the content width of boxes generated by block-level and replaced elements.	Yes
word-spacing	normal | <length> | inherit	This property specifies spacing behavior between words.	Yes
z-index	auto | <integer> | inherit	For a positioned box, the 'z-index' property specifies: The stack level of the box in the current stacking context. Whether the box establishes a local stacking context.	Yes