FAQ
FAQ
CSS support in Opera
A Messageboard currently online for CSS help (table CSS, cell spacing, plain borders, etc...)
| Property | Opera 5 | Opera 3 | Comments |
|---|---|---|---|
| font | Yes | Yes | Has no effect on form elements |
| font-family | Yes | Yes | |
| font-size | Yes | Yes | Has no effect on the <kbd> element in Opera 3.62 |
| font-size-adjust | No | No | |
| font-stretch | No | No | |
| font-style | Yes | Yes | |
| font-variant | Yes | Yes | |
| font-weight | Yes | Yes |
| Property | Opera 5 | Opera 3 | Comments |
|---|---|---|---|
| direction | No | No | |
| letter-spacing | No | No | |
| line-height | Yes | Yes | |
| text-align | Yes | Yes | |
| text-decoration | Yes | Yes | |
| text-indent | Yes | Yes | |
| text-shadow | No | No | |
| text-transform | Yes | No | |
| unicode-bidi | No | No | |
| word-spacing | Yes | Yes |
| Property | Opera 5 | Opera 3 | Comments |
|---|---|---|---|
| background | Yes | Yes | Has no effect on form elements. |
| background-attachment | Yes | No | Fixed background images flicker as the page scrolls, especially on slower machines. |
| background-color | Yes | Yes | |
| background-image | Yes | Yes | |
| background-position | Yes | Yes | |
| background-repeat | Yes | Yes | |
| color | Yes | Yes | Has no effect on form elements |
| Property | Opera 5 | Opera 3 | Comments |
|---|---|---|---|
| border | Yes | Yes | In Opera 3.62, borders cannot be applied to table elements via CSS. To render borders around both the table and the cells, the HTML border attribute must be used in the <table> tag. Any specified border width will only affect the border drawn around the table itself, so cell borders are always 1px only. Border colour will automatically be set to a 2-tone shade (To give a 3D effect) based upon the background colour of the containing element.In Opera 5, borders applied to form elements are applied around the existing grey border of standard EPOC dialogue elements. Apart from the width/height, borders (and most other properties of form elements) of the elements themselves cannot be removed or altered. |
| border-collapse | Yes | No | |
| border-color | Yes | Yes | |
| border-spacing | Yes | No | This property is used to define vertical and horizontal cellspacing but note that it is not supported in MSIE6 (and below) for Windows. Sadly IE/Win only supports the cellspacing attribute on the <table> tag, which can lead to rendering differences from better browsers like Opera, Mozilla, Chimera, IE5 for Mac/Solaris, etc. Although border-spacing is not supported by Opera 3.62 cellspacing can be achieved by applying margin to table cells. This behaviour is incorrect and isn't present in later versions. |
| border-style | Yes | Yes | |
| border-top border-right border-bottom border-left |
Yes | Yes | |
| border-top-color border-right-color border-bottom-color border-left-color |
Yes | Yes | |
| border-top-style border-right-style border-bottom-style border-left-style |
Yes | Yes | |
| border-top-width border-right-width border-bottom-width border-left-width |
Yes | Yes | |
| border-width | Yes | Yes | |
| height | Yes | Yes | |
| margin | Yes | Yes | Does not affect table cells in the more standards compliant Opera 5, though it does create cell spacing in Opera 3.62. To create cell spacing via CSS in Opera 5, the CSS2 border-spacing property should be used with the table descriptor. |
| margin-top margin-right margin-bottom margin-left |
Yes | Yes | Top and bottom margin has no effect on inline containers such as <span>. |
| max-height | Yes | No | |
| max-width | Yes | No | |
| min-height | Yes | No | |
| min-width | Yes | No | |
| padding | Yes | Yes | Opera 3.62 does not render padding to table cells when specified via CSS. Padding can only be applied to tables through the use of the cellpadding attribute in the <table> tag.When applied to the <img> element, Opera 3.62 stretches the image to expand into the padding area. |
| padding-top padding-right padding-bottom padding-left |
Yes | Yes | |
| size | No | No | |
| width | Yes | Yes | When applied to an <img> element, Opera seems to make the image block level and the next element will always appear below it. There is no workaround. |
| Property | Opera 5 | Opera 3 | Comments |
|---|---|---|---|
| bottom | Yes | No | |
| caption-side | Yes | Yes | |
| clear | Yes | Yes | |
| display | Yes | Yes | Because the Opera browser engine is incapable of re-flowing a rendered page, an element's display properties cannot be changed vie Javascript. DHTML in Opera must therefore be based around the visibility property.Also, fixed elements flicker while the page is being scrolled, especially on slower machines. The effect becomes more profound when larger elements or multiple elements are fixed-positioned. |
| empty-cells | Yes | No | |
| float | Yes | Yes | |
| left | Yes | No | |
| position | Yes | No | |
| right | Yes | No | |
| table-layout | No | No | |
| top | Yes | No | |
| vertical-align | Yes | Yes | |
| visibility | Yes | No | |
| white-space | Yes | No | |
| z-index | Yes | No | Form elements will always appear above the page and will therefore show through the background of any element with a higher Z-index. To hide and show form elements dynamically you can use the visibility property however, either on individual fields/widgets or on the parent element of all elements. |
| Property | Opera 5 | Opera 3 | Comments |
|---|---|---|---|
| content | Yes | No | Cannot be used to include external content using url("file.name"). If used with :before or :after pseudo classes on table cells, the :before content is ignored and the :after content is repeated. There is no workaround to this bug. |
| counter-increment | Yes | Yes | |
| counter-reset | Yes | Yes | |
| cursor | No | No | |
| list-style | Yes | Yes | |
| list-style-image | Yes | Yes | |
| list-style-position | Yes | Yes | |
| list-style-type | Yes | Yes | |
| quotes | Yes | No |
| Property | Opera 5 | Opera 3 | Comments |
|---|---|---|---|
| clip | No | No | |
| marker-offset | No | No | |
| marks | No | No | |
| orphans | No | No | |
| outline | No | No | |
| outline-color | No | No | |
| outline-style | No | No | |
| outline-width | No | No | |
| overflow | Yes | No | Opera 5.x has buggy support for the hidden value. This does inhibit scrollbars but the content usually remains visible when it breaks out of the box. Functionality of the scroll value is not supported however when present in the stylesheet it will cause the hidden value to be applied instead. Opera 3.62 has no support for the overflow property however future versions of Opera are expected to. |
| page | No | No | |
| page-break-after | No | No | |
| page-break-before | No | No | |
| page-break-inside | No | No | |
| widows | No | No |
Proprietary properties
The following properties are non-standard proprietary CSS extensions implemented by other browser vendors. They are not supported by Opera but have been included in this document for reference:
Microsoft properties that work exclusively in Internet Explorer 5.5 and above
- scrollbar-3dlight-color
- scrollbar-arrow-color
- scrollbar-base-color
- scrollbar-darkshadow-color
- scrollbar-face-color
- scrollbar-highlight-color
- scrollbar-shadow-color
Mozilla properties that may potentially work in Mozilla-based browsers only (if implemented by the vendor)
- -moz-scrollbars-none
- -moz-scrollbars-horizontal
- -moz-scrollbars-vertical
- -moz-bg-inset
- -moz-bg-outset
- -moz-border-radius
- -moz-border-radius-topLeft
- -moz-border-radius-topRight
- -moz-border-radius-bottomLeft
- -moz-border-radius-bottomRight
- -moz-outline-radius
- -moz-outline-radius-topLeft
- -moz-outline-radius-topRight
- -moz-outline-radius-bottomLeft
- -moz-outline-radius-bottomRight
- -moz-center
- -moz-right
- -moz-pre-wrap
Proprietary Netscape 4 properties
- layer-background-color
@ rules
Opera 3.62 and above for Symbian supports @import rules used at the top of a stylesheet. Media types may be included with the rule (@import url(/path/to/file.css) screen,projection;).
Opera also supports @media rules however only the values screen and all are used. Unlike desktop versions of Opera there is no Presentation mode to make use of the projection media type.
Importantly, note that Opera does not support the handheld media type.
Pseudo classes
Opera 3.62 and above support the following pseudo classes on <a> anchor elements (links):
- :link
- :visited
Note that Opera 3.62 does not support the :hover pseudo class.
Opera 5 and above has additional support for the following pseudo classes on anchors:
- :hover
- :active
Opera 5 also supports the insertion of text strings into the document through the use of :before and :after pseudo classes. Including external files by using content:url(path/to/file.gif); on a pseudo class is not supported however.
All CSS properties, including display and float may be used on pseudo class content giving the author considerable control over its rendering.
CSS & XML
Note that Opera 5 ignores basic CSS selector properties when parsing XHTML documents as XML though classes and IDs are still rendered as expected.
To render XHTML documents propery Opera must parse them as normal HTML (sent with a text/html HTTP header).
Detailed documentation covering the use of CSS with Opera for Symbian may be added at a later date if work on this site is ever resumed.
