Links ::  | DEV web management system | Katalóg | Webhosting | Recepty
  
 Index | Registrácia | Hľadať | Galéria | BoardNeprihlásený užívateľ  //Piatok, 24. Novembra 2017 
Navigation
Index
Top 10 autorov
Top 20 článkov
Hľadať
Galéria

Zones
Asp.(NET)
C/C++
Flash
Grafika+Design
Hardware
Hry
Html/Css/Xml
Java
Linux
Networks
Operačný systém
Pascal/Delphi
PHP
Security
Software
SQL
Visual Basic
Wap/Wml
Windows
Zóna iné

Links
Script index Interval.cz Pc.sk Regedit.sk TipyaTriky.sk Builder.cz Asp.cz Živě.sk Zoznam.sk Code.box.sk Root.cz Quant&Financial

Odkazy

Sessions
Stránky Developer.sk si práve číta 332 čitateľov, z toho je 0 zaregistrovaných

BackEnd
Odkazy na nové články je možné preberať pomocou backend.php

kuk

    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



Autor : Developer, čítané 9559x, komentárov: 0
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
Hodnotenie :    |  Sobota, 3. Mája 2003

Pridať nový komentár/Komentáre
Vaše hodnotenie :   horšie  lepšie
Login
Login:
Heslo:

Hľadať
 
v článkoch
v diskusiach
v komentároch

Top read
PHP Coder

Priklady v C. 1.čast.

DEV web management system

Php a bezpečnosť skriptov

Autorun CD

Top discuss
Jednoduchý web formulár (ASP.NET)

Delphi seriál: (1.časť)

Velmi rychla grafika v Pascale

DEV web management system

Naša ikona
Páčia sa Vám naše stránky ? Ak áno, podporte nás prosím a umiestnite si na svoju stránku našu ikonku:





Copyright (c) Developer.sk, All rights reserved.
Powered by DEV web management system