Appendix B. CSS 2.1 Properties and Proprietary Extensions


This appendix contains a table of CSS properties from W3C's CSS 2.1 specification (see http://www.w3.org/TR/CSS21), a table of Microsoft proprietary extensions to CSS and a table of some of Mozilla's proprietary extensions. Table B-1 provides a listing of the property's values, initial value, what the property applies to, if the values in the property are inherited, if the property accepts percentages, and the property's media group.

Table B-2 presents a listing of Microsoft's proprietary extensions to the specifications. These properties will not validate if you run them through a validator and they will only appear successfully in a browser built by Microsoft. Your mileage may vary with the use of these extensions.

As of this writing, Mozilla's proprietary extensions that are available in Mozilla, Firefox, and Netscape Navigator 6+ browsers, are not fully documented. Table B-3 lists a portion of extensions that are documented from Mozilla's developer's web site. Check their site for a complete listing of the extensions, at http://developer.mozilla.org/en/docs/CSS_Reference:Mozilla_Extensions.

Table B-1. CSS 2.1 properties
NameValuesInitial valueApplies to(Default: all)Inherited?Percentages(Default: N/A)Media groups
'background-attachment'scroll | fixed | inheritscroll no visual
'background-color'<color> | transparent | inherittransparent no visual
'background-image'<uri> | none | inheritnone no visual
'background-position'[ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit0% 0% norefer to the size of the box itselfvisual
'background-repeat'repeat | repeat-x | repeat-y | no-repeat | inheritrepeat no visual
'background'[ 'background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-position'] | inheritsee individual properties noallowed on 'background-position'visual
'border-collapse'collapse | separate | inheritseparate'table' and 'inline-table' elementsyes visual
'border-color'[ <color> | transparent ]{1,4} | inheritsee individual properties no visual
'border-spacing'<length> <length>? | inherit0'table' and 'inline-table' elements yes visual
'border-style'<border-style>{1,4} | inheritsee individual properties no visual
'border-top' 'border-right' 'border-bottom' 'border-left'[ <border-width> || <border-style> || >'border-top-color' ] | inheritsee individual properties no visual
'border-top-color' 'border-right-color' 'border-bottom-color' 'border-left-color'<color> | transparent | inheritthe value of the 'color' property no visual
'border-top-style' 'border-right-style' 'border-bottom-style' 'border-left-style'<border-style> | inheritnone no visual
'border-top-width' 'border-right-width' 'border-bottom-width' 'border-left-width'<border-width> | inheritmedium no visual
'border-width'<border-width>{1,4} | inheritsee individual properties no visual
'border'[ <border-width> || <border-style> || >'border-top-color' ] | inheritsee individual properties no visual
'bottom'<length> | <percentage> | auto | inheritautopositioned elementsnorefer to height of containing blockvisual
'caption-side'top | bottom | inherittop'table-caption' elementsyes visual
'clear'none | left | right | both | inheritnoneblock-level elementsno visual
'clip'<shape> | auto | inheritautoabsolutely positioned elementsno visual
'color'<color> | inheritdepends on user agent yes visual
'content'normal | none | [ <string> | <uri> | <counter> | attr( <identifier>) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inheritnormal:before and :after pseudo-elementsno all
'counter-increment'[ <identifier> <integer>? ]+ | none | inheritnone no all
'counter-reset'[ <identifier> <integer>? ]+ | none | inheritnone no all
'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 ] ] | inheritauto yes visual, interactive
'direction'ltr | rtl | inheritltrall elements, but see proseyes visual
'display'inline | block | list-item | run-in | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inheritinline no all
'empty-cells'show | hide | inheritshow'table-cell' elementsyes visual
'float'left | right | none | inheritnoneall, but see 9.7no visual
'font-family'[[ <family-name> | <generic-family> ] [, <family-name>| <generic-family>]* ] | inheritdepends on user agent yes visual
'font-size'<absolute-size> | <relative-size> | <length> | <percentage> | inheritmedium yesrefer to parent element's font sizevisual
'font-style'normal | italic | oblique | inheritnormal yes visual
'font-variant'normal | small-caps | inheritnormal yes visual
'font-weight'normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inheritnormal yes visual
'font'[ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu | message-box | small-caption | status-bar | inheritsee individual properties yessee individual propertiesvisual
'height'<length> | <percentage> | auto | inheritautoall elements but non-replaced inline elements, table columns, and column groupsnoAllowed; percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on the content height), the value is interpreted like "auto."visual
'left'<length> | <percentage> | auto | inheritautopositioned elementsnorefer to width of containing blockvisual
'letter-spacing'normal | <length> | inheritnormal yes visual
'line-height'normal | <number> | <length> | <percentage> | inheritnormal yesrefer to the font size of the element itselfvisual
'list-style-image'<uri> | none | inheritnoneelements with 'display: list-item'yes visual
'list-style-position'inside | outside | inheritoutsideelements with 'display: list-item'yes visual
'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 | inheritdiscelements with 'display: list-item'yes visual
'list-style'[ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inheritsee individual propertieselements with 'display: list-item'yes visual
'margin-right' 'margin-left'<margin-width> | inherit0all elements except elements with table display types other than table and inline-tablenorefer to width of containing blockvisual
'margin-top' 'margin-bottom'<margin-width> | inherit0all elements except elements with table display types other than table and inline-tablenorefer to width of containing blockvisual
'margin'<margin-width>{1,4} | inheritsee individual propertiesall elements except elements with table display types other than table and inline-tablenorefer to width of containing blockvisual
'max-height'<length> | <percentage> | none | inheritnoneall elements but non-replaced inline elements, table columns, and column groupsnoAllowed; percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on the content height), the value is interpreted like "auto."visual
'max-width'<length> | <percentage> | none | inheritnoneall elements but non-replaced inline elements, table rows, and row groupsnorefer to width of containing blockvisual
'min-height'<length> | <percentage> | inherit0all elements but non-replaced inline elements, table columns, and column groupsnoAllowed; percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on the content height), the value is interpreted like "auto." Allowed; percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on the content height), the value is interpreted like "auto."visual
'min-width'<length> | <percentage> | inherit0all elements but non-replaced inline elements, table rows, and row groupsnorefer to width of containing blockvisual
'orphans'<integer> | inherit2block-level elementsyes visual, paged
'outline-color'<color> | invert | inheritinvert no visual, interactive
'outline-style'<border-style> | inheritnone no visual, interactive
'outline-width'<border-width> | inheritmedium no visual, interactive
'outline'[ 'outline-color' || 'outline-style' || 'outline-width' ] | inheritsee individual properties no visual, interactive
'overflow'visible | hidden | scroll | auto | inheritvisiblenon-replaced block-level elements, table cells, and inline-block elementsno visual
'padding-top' 'padding-right' 'padding-bottom' 'padding-left'<padding-width> | inherit0all elements except elements with table display types other than table, inline-table, and table-cellnorefer to width of containing blockvisual
'padding'<padding-width>{1,4} | inheritsee individual propertiesall elements except elements with table display types other than table, inline-table, and table-cellnorefer to width of containing blockvisual
'page-break-after'auto | always | avoid | left | right | inheritautoblock-level elementsno visual, paged
'page-break-before'auto | always | avoid | left | right | inheritautoblock-level elementsno visual, paged
'page-break-inside'avoid | auto | inheritautoblock-level elementsyes visual, paged
'position'static | relative | absolute | fixed | inheritstatic no visual
'quotes'[ <string> <string>]+ | none | inheritdepends on user agent yes visual
'right'<length> | <percentage> | auto | inheritautopositioned elementsnorefer to width of containing blockvisual
'table-layout'auto | fixed | inheritauto'table' and 'inline-table' elementsno visual
'text-align'left | right | center | justify | inherit'left' if 'direction' is 'ltr'; 'right' if 'direction' is 'rtl'block-level elements, table cells and inline blocksyes visual
'text-decoration'none | [ underline || overline || line-through || blink ] | inheritnone Allowed; percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on the content height), the value is interpreted like "auto." visual
'text-indent'<length> | <percentage> | inherit0block-level elements, table cells and inline blocksyesrefer to width of containing blockvisual
'text-transform'capitalize | uppercase | lowercase | none | inheritnone yes visual
'top'<length> | <percentage> | auto | inheritautopositioned elementsnorefer to height of containing blockvisual
'unicode-bidi'normal | embed | bidi-override | inheritnormalall elements, but see proseno visual
'vertical-align'baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inheritbaselineinline-level and 'table-cell' elementsnorefer to the 'line-height' of the element itselfvisual
'visibility'visible | hidden | collapse | inheritvisible yes visual
'white-space'normal | pre | nowrap | pre-wrap | pre-line | inheritnormal yes visual
'widows'<integer> | inherit2block-level elementsyes visual, paged
'width'<length> | <percentage> | auto | inheritautoall elements but non-replaced inline elements, table rows, and row groupsnorefer to width of containing blockvisual
'word-spacing'normal | <length> | inheritnormal yes visual
'z-index'auto | <integer> | inheritautopositioned elementsno Visual


The CSS 2.1 Property Table is © 2005, World Wide Web Consortium (Massachusetts Institute of Technology, European Research Consortium for Informatics and Mathematics, Keio University). All Rights Reserved. http://www.w3.org/Consortium/Legal/2002/copyright-documents-20021231.

Table B-2. Microsoft proprietary extensions to CSS
NameValuesInitial valueApplies to (Default: all)Inherited?Percentages (Default: N/A)Media groups
'background-position-x'<length> | <percentage> | left | center | right 0% noyesvisual
'background-position-y'<length> | <percentage> | top | center | bottom0% noyesvisual
'filter'See http://tinyurl.com/c8vpf n/a no filter properties
'ime-mode'auto | active | inactive | disabledauto yes visual
'layout-grid'mode | type | line | charboth loose none none yes visual
'layout-grid-char'<length> | <percentage> | none | auto none noyesvisual
'layout-grid-line'<length> | <percentage> | none | auto none noyesvisual
'layout-grid-mode'both | none | line | charboth yes visual
'layout-grid-type'loose | strict | fixedloose yes visual
'line-break'normal | strictnormal yes visual
'overflow-x'visible | scroll | hidden | autovisible (except for textarea, then initial value is hidden)  no visual
'overflow-y'visible | scroll | hidden | autovisible (except for textarea, then initial value is auto)    visual
'scrollbar-3dlight-color'<color>default colorelement with scroll baryes visual
'scrollbar-arrow-color'<color>default colorelement with scroll baryes visual
'scrollbar-base-color'<color>default colorelement with scroll baryes visual
'scrollbar-darkshadow-color'<color>default colorelement with scroll baryes visual
'scrollbar-face-color'<color>default colorelement with scroll baryes visual
'scrollbar-highlight-color'<color>default colorelement with scroll baryes visual
'scrollbar-shadow-color'<color>default colorelement with scroll baryes visual
'text-autospace'none | ideograph-alpha | ideograph-numeric | ideograph-parenthesis | ideograph-spacenone no visual
'text-justify'auto | distribute | distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper auto yes visual
'text-kashida-space'<percentage> | inherit0% yes visual
'text-underline-position'above | below | auto | auto-posauto yes visual
'word-break'normal | break-all | keep-allnormal yes visual
'word-wrap'normal | break-wordnormal yes visual
'writing-mode'lr-tb | tb-rllr-tb no visual
'zoom'normal | <number> | <percentage>normal noyesvisual


Table B-3. Mozilla CSS property extensions
NameValuesInitial valueApplies to (Default: all)Inherited?
'-moz-appearance'none | button | button-small | checkbox | checkbox-container | checkbox-small | dialog | listbox | menu | menuitem | menulist | menulist-button | menulist-textfield| progressbar | radio | radio-container | radio-small | resizer| scrollbar | scrollbarbutton-down | scrollbarbutton-left | scrollbarbutton-right | scrollbarbutton-up | scrollbartrack-horizontal | scrollbartrack-vertical | separator | statusbar | tab | tab-left-edge | tabpanels | textfield | toolbar | toolbarbutton | toolbox | tooltip | treeheadercell | treeheadersortarrow | treeitem | treetwisty | treetwistyopen | treeview | window none no
'-moz-binding'uri | nonenone no
'-moz-background-clip'border | paddingborder no
'-moz-background-inline-policy'bounding-box | continuous | each-boxcontinuousinline elementsno
'-moz-background-origin'border | padding | contentpadding no
'-moz-border-bottom-colors' '-moz-border-left-colors' '-moz-border-right-colors' '-moz-border-top-colors' <color> | transparentn/a no
'-moz-border-radius'<length> | <percentage>0 no
'-moz-border-radius-bottomleft' '-moz-border-radius-bottomright' '-moz-border-radius-topleft' '-moz-border-radius-topright'<length> | <percentage>0 no
'-moz-box-align'start | center | end | baseline | stretchstretchelements with a CSS display value of -moz-box or -moz-inline-boxno
'-moz-box-direction'normal | reversenormalelements with a CSS display value of -moz-box or -moz-inline-boxno
'-moz-box-flex'0 | >00elements with a CSS display value of -moz-box or -moz-inline-boxno
'-moz-box-orient'horizontal | verticalhorizontal elements with a CSS display value of -moz-box or -moz-inline-boxno
'-moz-box-pack'start | center | end | justifystartelements with a CSS display value of -moz-box or -moz-inline-boxno
'-moz-box-sizing'content-box | border-box | padding boxcontent-box no
'-moz-image-region'for rect( ) values, a rect consisting of four computed lengthsautoXUL image elements and :-moz-tree-image, :-moz-tree-twisty, and :-moz-tree-checkbox pseudo-elementsyes
'-moz-opacity'0 (or less) | 0 < number < 1 | 1 (or more)1 no
'-moz-outline' -moz-outline-color | -moz-outline-style | -moz-outline-widthsee individual properties no
'-moz-outline-color'<color> | invertinvert no
'-moz-outline-offset'<number>0 no
'-moz-outline-radius'<length> | <percentage>0 no
'-moz-outline-radius-bottomleft' '-moz-outline-radius-bottomright' '-moz-outline-radius-topleft' '-moz-outline-radius-topright'<length> | <percentage>0 no
'-moz-outline-style'none | dotted | dashed | solid | double | groove | ridge | inset | outsetnone no
'-moz-outline-style'<width>medium no





CSS Cookbook
CSS Cookbook, 2nd Edition
ISBN: 0596527411
EAN: 2147483647
Year: 2006
Pages: 235

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net