En aquest document es recull el resultat d'un estudi realitzat amb els navegadors MSIE i NS sobre quin és el suport que ofereixen de les diferents característiques dels fulls d'estil CSS2. Al final de tot hi ha una taula on es reflecteix la implementació que fan MSIE i NS de cada una de les propietats CSS2 i dels seus valors.

Per a aquest estudi s'ha utilitzat com a llit de proves la versió 4.0 del MSIE i la versió 4.03 de NS, la qual cosa implica que les versions posteriors d'aquests navegadors poden donar un més ampli suport per a CSS2.


ASPECTES GENERALS



CONSIDERACIONS SOBRE LES TAULES

En NS, cap de les inicialitzacions de les propietats presentacionals indicades en elements englobadors d'una taula (com pot ser el BODY o un element DIV que contingui una taula) no tenen efecte sobre elles. S'han d'inicialitzar individualment totes aquelles propietats per a la taula en concret. En canvi, a MSIE algunes de les inicialitzacions (família de fonts, color de la font, color de fons, etc., excepte el tamany de la font) sí que hi tenen efecte.

Per il·lustrar el problema del fons de les taules a NS posem per exemple que en un document es declara un <DIV> d'aquesta manera:
	<DIV style="background-color: red;">
i que aquest DIV conté una taula en els seus continguts. Aquesta taula no tindrà el fons de color vermell, sinó que el tindrà del valor per defecte de la propietat background-color, que és "transparent". Per a NS "transparent" significarà el color de fons de l'element BODY i així, per què la taula tingui un fons vermell, se li haurà d'assignar aquesta propietat a l'element TABLE o inidvidualment als elements TR o TD i TH. En canvi, a MSIE aquesta taula sí que tindrà el color vermell de fons.

MSIE accepta estil de vora tant a TABLE com a TD. A l'element TR només se li pot assignar el color de la vora, el qual només sortirà si TD té estil de vora però no color; només s'aplicarà el color de TR a les cel·les que el seu TD tingui un estil de vora definit però no un color. Si només se li ha assignat estil de vora a l'element TABLE només es veurà una vora en el requadre extern de la taula, sense cap divisió interior. NS, en canvi, no accepta les propietats de vora per a cap element de taula.


LES REGLES "at"

Ni NS ni MSIE suporten la regla @-media, que serveix per especificar fulls d'estil depenents de mitjà. Tampoc no suporten l'atribut "media" de l'element LINK de l'HTML.


VORES

S'ha observat que:


DIVERSES OBSERVACIONS DE NS

  • Les expressions següents no tenen efecte a NS:

  • De vegades NS requereix que les imatges inserides enmig de text es situin dins un DIV.

  • No accepta estil en els elements DT de l'HTML.


    SUPORT DE LES PROPIETATS

    En la taula de més avall, dins de cada una de les caselles pertanyents a les columnes "MSIE" o "NS" hi ha observacions sobre el tipus de suport que ofereix el navegador en qüestió de cada una de les propietats. Aquest és el conveni utilitzat:

    ---
    quan un navegador per a una certa propietat només en suporta el valor per defecte (tots els altres valors s'interpreten igual que el valor per defecte);
    ---*
    en el cas que el suport per part del navegador sigui nul, és a dir, que no implementi correctament ni tant sols el valor per defecte de la propietat;
    ok
    quan un navegador suporta totalment una propietat (suporta tots els seus valors);
    no funciona
    aquesta expressió apareix sovint en la següent taula i significa que el valor determinat està implementat com el valor per defecte;
    A més, quan un navegador no suporta algun dels valors d'una propietat determinada això està indicat en la corresponent casella; finalment, quan un navegador exhibeix alguna particularitat en la manera com assmila una determinada propietat també s'ha indicat en la casella corresponent.


    Per a les propietats drecera (background, margin, etc.), el fet que en la corresponent casella hi hagi un "ok" significa que accepta bé els valors per a les diferents subpropietats però que, donada la naturalesa d'aquest tipus de propietats, cal que es consulti el suport de cada una de les seves propietats individuals.

    Les propietats audibles (és a dir, les que s'utilitzen en fulls d'estil acústics) no són suportades per cap d'aquests dos navegadors, evidentment, en no ser navegadors orientats a la parla.

    Aclariments sobre la taula següent:
    1. El valor per defecte de cada una de les propietats apareix subratllat (excepte en les propietats drecera, on el valor per defecte no és definit).
    2. L'expressió "a les taules" o "als elements de taula" significa "als elements TABLE, TR, TD i TH".


    Propietat Valors MSIE NS
    'azimuth' <angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards | inherit --- ---
    'background' [<background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ] | inherit ok ok
    'background-attachment' scroll | fixed | inherit ok ---
    'background-color' <color> | transparent | inherit "transparent" fa que es vegi el color de fons de l'element pare immediat "transparent" fa que es vegi el color de fons de l'element BODY; si no s'especifica per al document sencer, NS requereix una forma diferent per a aquesta propietat 'layer-background-color'
    'background-image' <uri> | none | inherit ok ok, però si no s'especifica per al document sencer, NS requereix una forma diferent per a aquesta propietat: 'layer-background-image'
    'background-position' [ [<percentatge> | <longitut> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit
    Valor per defecte: 0% 0%
    ok ---
    'background-repeat' repeat | repeat-x | repeat-y | no-repeat | inherit ok ok
    'border' [ <border-width> || <border-style> || <color> ] | inherit ok ok
    'border-bottom'
    'border-left'
    'border-right'
    'border-top'
    [ <border-width> || <border-style> || <color> ] | inherit ok ---
    'border-collapse' collapse | separate | inherit ok ---
    'border-bottom-color'
    'border-left-color'
    'border-right-color'
    'border-top-color'
    <color> | transparent | inherit
    Valor per defecte: el valor de la propietat color
    ok ---
    'border-bottom-style' 'border-left-style'
    'border-right-style'
    'border-top-style'
    <estil-vora> | inherit
    Valor per defecte: none
    ok ---
    'border-bottom-width'
    'border-left-width'
    'border-right-width'
    'border-top-width'
    <amplada-vora> | inherit
    Valor per defecte: medium
    ok ok (a les taules no funciona)
    'border-color' <color>{1,4} | transparent | inherit Cal que estigui inicialitzada 'border-style' Necessita que 'border-width' estigui incialitzada perquè l'amplada per defecte en aquest navegador és '0'; per a les taules aquesta propietat no funciona
    'border-spacing' <longitut> <longitut> ? | inherit
    Valor per defecte: 0
    --- ---
    'border-style' <estil-vora>{1,4} | inherit No funciona per a l'element TR de l'HTML; per a tots els altres elements (excepte els inline) "hidden" té el mateix aspecte que "outset" i "dotted", i "dashed" el mateix que "solid" Per als elements que no són de taula, "hidden" té el mateix aspecte que "outset" i "dotted", i "dashed" el mateix que "solid"; "solid" i "dashed" no funcionen per les taules; si es dóna més d'un valor (corresponents als diferents costats de les vores) s'ignoren i totes les vores apareixen com a "outset"
    'border-width' <amplada-vora>{1,4} | inherit ok ok (a les taules no funciona)
    'bottom' <longitut> | <percentatge> | auto | inherit
    Valor per defecte: auto
    --- ---
    'caption-side' top | bottom | left | right | inherit --- ---
    'clear' none | left| right | both | inherit ok ok
    'clip' <forma> | auto | inherit ok ok, però si l'àrea de "clip" és més gran que la caixa generada pel contingut de l'element, a fi que es vegi l'àrea retallada cal inicialitzar la propietat exclusiva de Netscape 'layer-background-color' amb algun valor de <color>, o bé la propietat exclusiva de Netscape 'layer-background-image' amb alguna imatge
    'color' <color> | inherit
    Valor per defecte: depèn de l'agent d'usuari
    ok ok
    'content' [<cadena> | <uri> | <comptador> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
    Valor per defecte: cadena buida
    --- ---
    'counter-increment' [ <identificador> <enter>? ]+ | none | inherit --- ---
    'counter-reset' [ <identificador> <enter>? ]+ | none | inherit --- ---
    'cue' [ <cue-before> || <cue-after> ] | inherit --- ---
    'cue-after'
    'cue-before'
    <uri> | none | inherit --- ---
    '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 ] ] | inherit "pointer" no funciona, enlloc d'això la paraula clau de MSIE "hand" fa la funció que hauria de fer "pointer"; si el cursor es crida a través d'una url s'ignora la regla sencera de la propietat 'cursor' --- (només funciona "auto")
    'direction' ltr | rtl | inherit --- ---
    'display' 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 només funciona "none" i "block" només funciona "none"
    'elevation' <angle> | below | level | above | higher | lower | inherit --- ---
    'empty-cells' show | hide | inherit només funciona "hide" (encara que el valor per defecte hauria de ser "show") només funciona "hide" (encara que el valor per defecte hauria de ser "show")
    'float' left | right | none | inherit ok (cal inicialitzar la propietat 'width' de l'element, ja que MSIE fa que un element ocupi fins al final de la línia) ok; per a les taules no funciona
    'font' [ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit "small-caption", "status-bar", "message-box" no funciona "small-caption", "status-bar", "menu", "message-box", "caption" i "icon" no funciona; per a les taules no funciona
    'font-family' [[ <nom-de-família> | <família-genèrica> ],]* [<nom-de-família> | <família-genèrica>] | inherit
    Valor per defecte: depèn de l'agent d'usuari
    ok les famílies de fonts genèriques "fantasy" i "cursive" no existeixen
    'font-size' <mida-absoluta> | <mida-relativa> | <longitut> | <percentatge> | inherit
    Valor per defecte: medium
      en les taules, si la paraula "larger" és en referència a una font "xx-large", "x-large" o "large" no funciona i si la paraula "smaller" és en referència a una font "xx-small", "x-small" o "small" no funciona
    'font-size-adjust' <número> | none | inherit --- ---
    'font-stretch' normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit --- ---
    'font-style' normal | italic | oblique | inherit "oblique" igual que "italic" "oblique" no funciona
    'font-variant' normal | small-caps | inherit si no s'especifica la propietat 'font-size' el tamany de les majúscules aconseguides amb "small-caps" és menor que el de les majúscules normals (si s'especifica 'font-size' no hi ha diferència de tamany entre elles) ---
    'font-weight' normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit "100", "200", "300", "400", "500" no funcionen "bolder", "lighter", "100", "200", "300", "400", "500" no funcionen
    'height' <longitut> | <percentatge> | auto | inherit només funciona pels elements IMG, DIV, TABLE i TD de l'HTML ---
    'left' <longitut> | <percentatge> | auto | inherit Si es posiciona i s'aplica 'left' a BODY ( o es posicina el BODY i s'aplica 'left' a elems. indiv.) només accepten la propietat 'left' els elements TABLE Si es posiciona el BODY i s'aplica 'left' a elements indiv. no fan res; si es posiciona una taula aquesta es desmunta; no funciona per a l'element IMG de l'HTML
    'letter-spacing' normal | <longitut> | inherit ok ---
    'line-height' normal | <número> | <longitut> | <percentatge> | inherit ok En les taules, si la longitut és més petita que 19 no s'hi fa cas i si el percentatge és més petit que 100% tampoc se li fa cas
    'list-style' [<list-style-type> || <list-style-position> || <list-style-image> ] | inherit veieu les propietats indiv. veieu les propietats indiv.
    'list-style-image' <uri> | none | inherit ok ---
    'list-style-position' inside | outside | inherit ok ---
    'list-style-type' 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 "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "hebrew", "armenian", "georgian", "cjk-ideographic", "hiragana", "hiragana-iroha", "katakana" i "katakana-iroha" no funcionen NS té per defecte el valor "circle"; si els ítems es troben fora de tot element UL o OL el símbol és molt petit; "decimal-leading-zero", "lower-greek", "lower-latin", "upper-latin", "hebrew", "armenian" és igual que "lower-alpha", "georgian", "cjk-ideographic", "hiragana", "hiragana-iroha", "katakana" i "katakana-iroha" no funcionen
    'margin' <amplada-marge>{1,4} | inherit ok ok
    'margin-bottom'
    'margin-left'
    'margin-right'
    'margin-top'
    <amplada-marge> | inherit
    Valor per defecte: 0
    ok ok
    'marker-offset' <longitut> | auto | inherit --- ---
    'marks' [ crop || cross ] | none | inherit --- ---
    'max-height' <longitut> | <percentatge> | none | inherit --- ---
    'max-width' <longitut> | <percentatge> | none | inherit --- ---
    'min-height' <longitut> | <percentatge> | inherit
    Valor per defecte: 0
    --- ---
    'min-width' <longitut> | <percentatge> | inherit
    Valor per defecte: depèn de l'agent d'usuari
    --- ---
    'orphans' <enter> | inherit
    Valor per defecte: 2
    ok ---
    'outline' [ <outline-color> || <outline-style> || <outline-width> ] | inherit --- ---
    'outline-color' <color> | invert | inherit --- ---
    'outline-style' <estil-vora> | inherit
    Valor per defecte: none
    --- ---
    'outline-width' <amplada-vora> | inherit
    Valor per defecte: medium
    --- ---
    'overflow' visible | hidden | scroll | auto | inherit ok ---
    'padding' <amplada-farciment>{1,4} | inherit ok ok
    'padding-bottom'
    'padding-left'
    'padding-right'
    'padding-top'
    <amplada-farciment> | inherit
    Valor per defecte: 0
    ok ok
    'page' <identificador> | auto --- ---
    'page-break-after' auto | always | avoid | left | right | inherit --- ---
    'page-break-before' auto | always | avoid | left | right | inherit --- ---
    'page-break-inside' avoid | auto | inherit --- ---
    'pause' [[<temps> | <percentatge>]{1,2} ] | inherit
    Valor per defecte: depèn de l'agent d'usuari
    --- ---
    'pause-after'
    'pause-before'
    <temps> | <percentatge> | inherit
    Valor per defecte: depèn de l'agent d'usuari
    --- ---
    'pitch' <freqüència> | x-low | low | medium | high | x-high | inherit --- ---
    'pitch-range' <número> | inherit
    Valor per defecte: 50
    --- ---
    'play-during' mix? repeat? | auto | none | inherit --- ---
    'position' static | relative | absolute | fixed | inherit "fixed" no funciona "fixed" no funciona; no posiciona les taules
    'quotes' [<cadena> <cadena>]+ | none | inherit
    Valor per defecte: depèn de l'agent d'usuari
    --- ---
    'richness' <número> | inherit
    Valor per defecte: 50
    --- ---
    'right' <longitut> | <percentatge> | auto | inherit --- ---
    'size' <longitut>{1,2} | auto | portrait | landscape | inherit --- ---
    'speak' normal | none | spell-out | inherit --- ---
    'speak-header' once | always | inherit --- ---
    'speak-numeral' digits | continuous | inherit --- ---
    'speak-punctuation' code | none | inherit --- ---
    'speech-rate' <número> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit --- ---
    'stress' <número> | inherit
    Valor per defecte: 50
    --- ---
    'table-layout' auto | fixed | inherit --- ---
    'text-align' left | right | center | justify | <cadena> | inherit
    Valor per defecte: depèn de l'agent d'usuari i del sentit de l'escriptura
    Quan s'aplica a un DIV s'alinia el text del contingut del DIV Quan s'aplica a un DIV s'alinia el DIV com a bloc.
    'text-decoration' none | [ underline || overline || line-through || blink ] | inherit "blink" no funciona "overline" no funciona
    'text-indent' <longitut> | <percentatge> | inherit
    Valor per defecte: 0
    ok ok
    'text-shadow' none | [<color> || <longitut> <longitut> <longitut>? ,]* [<color> || <longitut> <longitut> <longitut>?] | inherit --- ---
    'text-transform' capitalize | uppercase | lowercase | none | inherit ok ok
    'top' <longitut> | <percentatge> | auto | inherit Cal que l'element estigui posicionat absolutament o relativament Cal que l'element estigui posicionat absolutament o relativament
    'unicode-bidi' normal | embed | bidi-override | inherit --- ---
    'vertical-align' baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentatge> | <longitut> | inherit no funcionen "middle", els valors percentuals, les longituts, "text-top" i "text-bottom"; no funcionen els valors "bottom" i "top" per al contingut generat ---
    'visibility' visible | hidden | collapse | inherit "collapse" no funciona en les files i columnes de les taules, i en els altres elements té el mateix efecte que "hidden" "hidden" no funciona si l'element no està posicionat; en general prefereix l'ús de "hide" enlloc de "hidden";"collapse" no funciona en les files i columnes de les taules, i en els altres elements té el mateix efecte que "hidden"
    'voice-family' [[ <veu-específica> | <veu-genèrica> ],]* [<veu-específica> | <veu-genèrica> ] | inherit
    Valor per defecte: depèn de l'agent d'usuari
    --- ---
    'volume' <número> | <percentatge> | silent | x-soft | soft | medium | loud | x-loud | inherit --- ---
    'white-space' normal | pre | nowrap | inherit "pre" i "nowrap" no funcionen "nowrap" no funciona
    'widows' <enter> | inherit
    Valor per defecte: 2
    --- ---
    'width' <longitut> | <percentatge> | auto | inherit ok A les taules no funciona; els valors percentuals no funcionen
    'word-spacing' normal | <longitut> | inherit Qualsevol valor és considerat com a "normal" Qualsevol valor és considerat com a "normal"
    'z-index' auto | <enter> | inherit ok ok
    Tancar
    Pàgina Principal