CSS a kompatibilita browserov [2.časť - CSS]

V minulej časti nášho seriálu o Cascading Style Sheets som sa zmienil aj o značne odlišnej podpore CSS jednotlivými browsermi, teda havne Netscape a MS Explorera. Dnes by som vám chcel ukázať ako to v skutočnosti vlastne je.


Problém kompatibility jednotlivých browserov je značne komplikovaný a samozrejme najhoršie je na tom tvorca samotnej stránky. Keď chce urobiť svoje stránky skutočne na úrovni a prístupné čo najväčšiemu okruhu návštevníkov, je potrebné aby v súčasnej situácii vlastne pracoval na dvoch verziách súčastne, pretože interpretácia CSS v Netscape je odlišná od chápania MS Explorera. Okrem toho spomínané browsery majú ešte niekoľko verzií, takže jedná sa o hotový prales. Navyše v poslednej dobe sa začína do povedomia surferom na internete dostávať Opera, t.j. úspešný browser, ktorý postupne začína konkurovať obom spomínaným rivalom. Keby sme to chceli zhrnúť, asi by sme konštatovali že použitie CSS na stránkach je absolútny nezmysel aich použitie sa rovná pre samotného web designéra samovražde. Ale myslím si že aj napriek spomínaným problémom s kompatibilitou sú CSS fenoménom, ktorého použitie je pre samotné stránky veľkým prínosom a značným oživením.

Na to aby sme mohli použiť napríklad 2 verzie css pre Netscape a pre Explorer, použijeme jednoduchý JavaScript, ktorý nám otestuje pri nahrávaní stránky o aký druh browsera ide a podľa toho použije pripravený súbor *.css. Za tento tip ďakujem môjmu priateľovi Davidovi Beranovi (inak šéfovi projektu [gamesLine] ).

<script language="JavaScript">
<!--
if ( navigator.appName == "Netscape" )
document.write('<link rel=\"stylesheet\"
href=\"/css/games_nc.css\" type=\"text/css\">');
else
document.write('<link rel=\"stylesheet\"
href=\"/css/games_ie.css\" type=\"text/css\">');
// -->
</script>

Nasledovná tabuľka podrobne opisuje jednotlivé vlastnosti CSS a kompatibilitu jednotlivých browserov. Pri komponovaní stránok sa vám určite bude hodiť.

 Y  Yes - [Áno]
 N  No - [Nie]
 P  Partial - [Čiastočne]
 B  Buggy
 Q  Quirky
 
Win95  Nav4  Netscape Navigator 4.5  
 IE3  Internet Explorer 3.02
 IE4  Internet Explorer 4.01
 IE5  Internet Explorer 5.0
 Opr3  Opera 3.6
 
Mac  Nav4  Netscape Navigator 4.5
 IE3  Internet Explorer 3.01
 IE4  Internet Explorer 4.5


Developer,
Stiahnuté z Developer.sk
Basic Concepts
Property
or Value
  Windows95/NT   Macintosh  
   Nav4   IE3   IE4   IE5   Opr3     Nav4   IE3   IE4   
1.1  Containment in HTML   P P P P Y   P B Y  
LINK   Y Y Y Y Y   Y B Y  
<STYLE>...</STYLE>   Y Y Y Y Y   Y Y Y  
@import   N N Q Q Y   N N Y  
<x STYLE="dec;">   B Y Y Y Y   B Y Y  
1.2  Grouping   Y N Y Y Y   Y Y Y  
x, y, z {dec;}   Y N Y Y Y   Y Y Y  
1.3  Inheritance   B P Y Y Y   B B Y  
(inherited values)   B P Y Y Y   B B Y  
1.4  Class selector   Y B Q Q Y   Y B Y  
.class   Y B Q Q Y   Y B Y  
1.5  ID selector   B B B B B   B B B  
#ID   B B B B B   B B B  
1.6  Contextual selectors   Y Y Y Y Y   B P Y  
x y z {dec;}   Y Y Y Y Y   B P Y  
1.7  Comments   Y B Y Y Y   Y Y Y  
/* comment */   Y B Y Y Y   Y Y Y  
 
Pseudo-Classes and Pseudo-Elements
Property
or Value
  Windows95/NT   Macintosh  
   Nav4   IE3   IE4   IE5   Opr3     Nav4   IE3   IE4   
2.1  anchor   P N Y Y P   P B Y  
A:link   Y N Y Y Y   Y B Y  
A:active   N N Y Y N   N N Y  
A:visited   N N Y Y Y   N B Y  
2.3  first-line   N N N N Y   N B N  
:first-line   N N N N Y   N B N  
2.4  first-letter   N N N N Y   N B N  
:first-letter   N N N N Y   N B N  
 
The Cascade
Property
or Value
  Windows95/NT   Macintosh  
   Nav4   IE3   IE4   IE5   Opr3     Nav4   IE3   IE4   
3.1  important   N N Y Y Y   N N N  
!important   N N Y Y Y   N N N  
3.2  Cascading Order   B P Y Y Y   B P Y  
Weight sorting   B Y Y Y Y   B Y Y  
Origin sorting   B Y Y Y Y   B B Y  
Specificity sorting   B P Y Y Y   B B Y  
Order sorting   B N Y Y Y   B N Y  
 
Font Properties
Property
or Value
  Windows95/NT   Macintosh  
   Nav4   IE3   IE4   IE5   Opr3     Nav4   IE3   IE4   
5.2.2  font-family   Y P Y Y Y   Y P Y  
<family-name>   Y Y Y Y Y   Y P Y  
<generic-family>   P P Y Y P   Y P Y  
... serif   Y Y Y Y Y   Y Y Y  
... sans-serif   Y Y Y Y Y   Y N Y  
... cursive   N B Y Y N   Y N Y  
... fantasy   N B Y Y Y   Y N Y  
... monospace   Y Y Y Y Y   Y Y Y  
5.2.3  font-style   P P Y Y Y   P P Y  
normal   Y Y Y Y Y   Y N Y  
italic   Y N Y Y Y   Y Y Y  
oblique   N N Y Y Y   N N Y  
5.2.4  font-variant   N N P P Y   N N Q  
normal   N N Y Y Y   N N Y  
small-caps   N N Q Q Y   N N Q  
5.2.5  font-weight   P P Y Y Y   P P Y  
normal   Y N Y Y Y   Y N Y  
bold   Y Y Y Y Y   Y Y Y  
bolder   Y Y Y Y Y   N N Y  
lighter   N Y Y Y Y   N N Y  
100 - 900   Y N Y Y Y   Y N Y  
5.2.6  font-size   Y P P P Y   Y P Q  
<absolute-size>   Y Y Q Q Y   Y B Q  
... xx-small - xx-large   Y Y Q Q Y   Y B Q  
<relative-size>   Y Y Y Y Y   Y N Y  
... larger   Y Y Y Y Y   Y N Y  
... smaller   Y Y Y Y Y   Y N Y  
<length>   Y P Y Y Y   Y B Y  
<percentage>   Y Y Y Y Y   Y P Y  
5.2.7  font   P P P P Y   P P Q  
<font-family>   P Y Y Y Y   Y P Y  
<font-style>   P P Y Y Y   Y P Y  
<font-variant>   N N P P Y   N N Q  
<font-weight>   P Y Y Y Y   Y N Y  
<font-size>   Y B Q Q Y   Y B Y  
<line-height>   B Y Y Y Y   B B Y  
 
Color and Background Properties
Property
or Value
  Windows95/NT   Macintosh  
   Nav4   IE3   IE4   IE5   Opr3     Nav4   IE3   IE4   
5.3.1  color   Y Y Y Y Y   Y Y Y  
<color>   Y Y Y Y Y   Y Y Y  
5.3.2  background-color   B P Y Y Y   B N Y  
<color>   B B Y Y Y   B N Y  
transparent   B N Y Y Y   B N Y  
5.3.3  background-image   Y N Y Y Y   Y N Y  
<url>   Y N Y Y Y   Y N Y  
none   Y N Y Y Y   Y N Y  
5.3.4  background-repeat   P N P Y Y   B N Y  
repeat   Y N B Y Y   Y N Y  
repeat-x   P N B Y Y   P N Y  
repeat-y   P N B Y Y   P N Y  
no-repeat   Y N Y Y Y   Y N Y  
5.3.5  background-attachment   N N Y Y N   N N Y  
scroll   N N Y Y N   N N Y  
fixed   N N Y Y N   N N Y  
5.3.6  background-position   N N Y Y Y   N N Y  
<percentage>   N N Y Y Y   N N Y  
<length>   N N Y Y Y   N N Y  
top   N N Y Y Y   N N Y  
center   N N Y Y Y   N N Y  
bottom   N N Y Y Y   N N Y  
left   N N Y Y Y   N N Y  
right   N N Y Y Y   N N Y  
5.3.7  background   P P P Y P   P P Y  
<background-color>   B P Y Y Y   P P Y  
<background-image>   P Y Y Y Y   P Y Y  
<background-repeat>   P B B Y Y   P B Y  
<background-attachment>   N N Y Y N   N Y Y  
<background-position>   N N Y Y Y   N P Y  
 
Text Properties
Property
or Value
  Windows95/NT   Macintosh  
   Nav4   IE3   IE4   IE5   Opr3     Nav4   IE3   IE4   
5.4.1  word-spacing   N N N N Y   N N Y  
normal   N N N N Y   N N Y  
<length>   N N N N Y   N N Y  
5.4.2  letter-spacing   N N Y Y Y   N N Y  
normal   N N Y Y Y   N N Y  
<length>   N N Y Y Y   N N Y  
5.4.3  text-decoration   Q P P P P   Q P P  
none   Q N Q Q Y   Q Y Q  
underline   Q B Q Q Y   Q B Q  
overline   N N Y Y Y   N N Y  
line-through   Y Y Y Y Y   Y Y Y  
blink   Y N N N N   Y N N  
5.4.4  vertical-align   N N P P P   N N P  
baseline   N N Y Y Y   N N Y  
sub   N N Y Y Y   N N Y  
super   N N Y Y Y   N N Y  
top   N N N N B   N N Y  
text-top   N N N N N   N N Y  
middle   N N B N B   N N Y  
bottom   N N N N B   N N B  
text-bottom   N N N N N   N N B  
<percentage>   N N N N Y   N N B  
5.4.5  text-transform   Y N Y Y P   Y N Y  
capitalize   Y N Y Y Y   Y N Y  
uppercase   Y N Y Y B   Y N Y  
lowercase   Y N Y Y Y   Y N Y  
none   Y N Y Y Y   Y N Y  
5.4.6  text-align   Y P Y Y Y   P P P  
left   Y Y Y Y Y   Y Y Y  
right   Y Y Y Y Y   Y Y Y  
center   Y Y Y