CSS referencia => Összhang

CSS, 7. fejezet - Összhang

Egy böngésző, amely egy dokumentum megjelenítéséhez CSS-t használ, akkor felel meg a CSS specifikáció által támasztott követelményeknek, ha:

  • Elér el minden hivatkozott stíluslapot és specifikációjuk szerint értelmezi őket;
  • A deklarációkat a 3.2 Fejezetben leírt rangsor szerint rendezi;
  • A CSS funkcionalitását a megjelenítő eszköz korlátai közé tudja illeszteni.

Egy böngésző akkor felel meg a CSS specifikációban megfogalmazott stíluslap-követelményeknek, ha:

  • kimenete érvényes CSS stíluslap.

Egy böngésző, amely egy dokumentum megjelenítéséhez CSS-t használ, és kimenete stíluslap, akkor felel meg a CSS specifikációnak ha a fentiekben említett mindkét követelménycsoportot kielégíti.

Egy böngésző sem tudja teljesíteni a CSS valamennyi lehetséges funkcióját: a böngészők akkor felelnek meg a CSS támasztotta követelményeknek, ha az alapvető funkciókat képesek teljesíteni. Az alapvető funkciók a teljes CSS specifikációból állnak, kivéve azokat a részeket, amelyek kifejezetten kivételként szerepelnek. Azokat a funkciókat, amelyek nem tartoznak a CSS alapvető funkciói közé, továbbfejlesztett (advanced) funkcióknak nevezzük.

Példák a megjelenítő eszköz korlátaira: Korlátozott erőforrások (fontok, színek), korlátozott felbontás (a margók nem jelennek meg helyesen). Ezekben az esetekben a böngésző csak megközelíti a stíluslap előírásait.
Vannak böngészők, amelyek lehetővé teszik a felhasználó számára a megjelenítés megválasztását.

Vissza a hivatkozó oldalra

7.1 Előre-kompatbilis elemzés

Ez a leírás a CSS 1-et mutatja be. Előre láthatóan a későbbi verziók több új tulajdonságot vezetnek be. Ez a fejezet azt mutatja be, hogy mit tesznek a böngészők, ha olyan deklarációval találkoznak, amelyek a CSS jelen kiadásában nem érvényesek.

  • Az ismeretlen tulajdonságot tartalmazó deklarációkat figyelmen kívül hagyják. Például; ha a stíluslap a
    H1 { color: red; rotation: 70deg }
    deklarációt tartalmazza, a böngésző úgy veszi figyelembe, mintha csak a
    H1 { color: red }
    deklarációt tartalmazta volna.
  • Az érvénytelen értékeket, vagy érvénytelen részeket tartalmazó értékeket a böngésző szintén figyelmen kívül hagyja, a következők szerint:
    IMG { float: left} /* CSS-nek megfelelő */
    IMG { float: left top } /* a 'top' nem értéke a 'float'-nak */
    IMG { background: "red" } /* a kulcsszavak nem kerülhetnek idézőjelbe */
    IMG { border-width: 3 } /* hiányzik a mértékegység */
    Fenti példában a böngésző csak az első deklarációt értelmezi, így a stíluslap tényleges tartalma:
    IMG { float: left}
    IMG { }
    IMG { }
    IMG { }
  • Figyelmen kívül hagyja a böngésző az érvénytelen at (@) kulcsszavakat is, minden egyébbel, ami követi, egészen a következő pontosvesszőig (;), vagy kapcsos zárójel-párig ({ }). Példaképp tételezzük fel, hogy a stíluslap a következőket tartalmazza: 
    	@three-dee
              {
               @background-lightning: 
                                     { 
                                      azimuth: 30deg;
                                      elevation: 190deg
                                     }
               H1 { color: red }
              }
    H1 { color: blue }
    Mivel a @three-dee a CSS szerint érvénytelen, így az egész deklaráció a harmadik jobb kapcsos zárójelig (}) bezárólag érvénytelen. A böngésző egyszerűen kihagyja, a stíluslap értelmezhető része a következő lesz:
    H1 { color: blue }

Részletesebben:

Egy CSS stíluslap, bármely verziójában készült is, utasítások sorozatát tartalmazza. Az utasításoknak két fajtája van: az at előírások és az előíráskészletek. Az utasítások körül lehetnek közök (whitespace) is (tabulátor-, szóköz-, újsor-karakterek).

A CSS utasítások gyakran a HTML dokumentumba vannak beágyazva; megvan a lehetőség arra, hogy ezeket az utasításokat elrejtsük a régebbi böngészők elől. Erre a célra a HTML szabvány 'megjegyzés' (comment) jele szolgál:
<-- Megjegyzés --> - a két jel közé írandó a CSS utasítássor.

Az at-előírások egy azonosítóként szereplő at-kulcsszóval kezdődnek, amely előtt közvetlenül egy at, vagyis @ karakter áll (pl.:@import, @page). Az azonosító tartalmazhat betűket, számjegyeket és más karaktereket (lásd alább).

Egy at-előírás tartalma az első pontosvesszőig (;), vagy a következő blokkig tart. Ha egy böngésző olyan at-előírással találkozik, amely nem az @import kulcsszóval kezdődik, figyelmen kívül hagyja az egész at-előírást és az elemzést a következő utasítással folytatja. Szintén figyelmen kívül hagyja az @import kulcsszót is, ha az nem a stíluslap legelején található. 

@import "stilus.css"

H1 { color: blue }

@import "masikstilus.css"

Fenti példában a második @import utasítás a CSS1 szerint érvénytelen. A CSS értelmező kihagyja az egész at-előírást, a stíluslapot a következőképpen értelmezi: 

@import "stilus.css"

H1 { color: blue }

Egy blokk nyitó kapcsos zárójellel ({) kezdődik és a neki megfelelő záró kapcsos zárójelig (}) tart. Köztük bármely egyedi karakter előfordulhat, a zárójelek (( )), kapcsos zárójelek ({ }) és szögletes zárójelek ([ ]) kivételével, amelyek a blokkon belül csak párban fordulhatnak elő. A fent említett karakterek közé zárt utasítások egymásba ágyazhatók. Az egyszeres (') és dupla (") idézőjelek szintén párban fordulhatnak elő; a közéjük zárt karakterlánc szövegként lesz értelmezve. A következőkben bemutatunk egy példát a blokk értelmezésére. Figyeljük meg, hogy az idézőjelek között szereplő záró kapcsos zárójel nem párja a nyitó kapcsos zárójelnek, valamint a második egyszeres idézőjel (') egy 'függő' karakter, nem párja a nyitó idézőjelnek: 

{ causta: "}" + ({7} * '\'') }

Egy előíráskészlet egy szelektorból és a hozzá tartozó deklarációkból áll. A szelektorként értelmezendő karakterlánc az első nyitó kapcsos zárójelig ({) tart (de azt nem foglalja magába). Azt az előíráskészletet, amely nem érvényes CSS szelektorral kezdődik, a böngészők figyelmen kívül hagyják.
Tételezzük fel, hogy egy stíluslap a következőképp néz ki: 

H1 { color: blue }

P[align], UL { color: red; font-size: large }

P EM { font-weight: bold }

Fenti példa második sora érvénytelen CSS szelektort tartalmaz, a böngésző a következőképp fogja értelmezni: 

H1 { color: blue }
P EM { font-weight: bold }

Egy deklarációs blokk egy nyitó kapcsos zárójellel ({) kezdődik és a hozzá tartozó záró kapcsos zárójelig (}) tart. Köztük 0 (nulla), vagy több, pontosvesszővel (;) elválasztott deklaráció állhat.

Egy deklaráció egy tulajdonságnévből, kettőspontból (:) és egy tulajdonság-értékből áll. Mindegyik körül lehet köz (whitespace). A tulajdonságnév egy (a korábban leírtaknak megfelelő) azonosító. A tulajdonság-érékben bármely karakter szerepelhet, de a zárójelek (( )), kapcsos zárójelek ({ }), szögletes zárójelek ([ ]), egyszeres (') és dupla (") idézőjelek csak párban fordulhatnak elő. A zárójelek, szögletes zárójelek és kapcsos zárójelek egymásba ágyazhatók. Az idézőjelek között található karakterek szövegként lesznek értelmezve.

Annak érdekében, hogy a jövőben meglevő tulajdonságokhoz új tulajdonságokat és értékeket lehessen hozzáadni, a böngészőknek figyelmen kívül kell hagyniuk bármely érvénytelen tulajdonságnevet, vagy tulajdonság-értéket. Valamennyi CSS1 tulajdonság csak akkor fogadható el érvényesnek, ha megfelel a nyelvtani és szemantikai előírásoknak. Példaként lássuk a következő stíluslap előírást: 

H1 { color: red; font-style: 12pt }

P { color: blue; font-vendor: any; font-variant: small-caps }

EM EM { font-style: normal }

Az első sor második deklarációjában a '12pt' érvénytelen érték. A második sor második deklarációjában a 'font-vendor' definiálatlan tulajdonság. A CSS értelmező ezeket a deklarációkat kihagyja, így a stíluslapot a következőképp fogja értelmezni: 

H1 { color: red }

P { color: blue; font-variant: small-caps }

EM EM { font-style: normal }

Megjegyzések bárhova beilleszthetők, ahol közök (whitespace) előfordulhatnak. A CSS definiál ezenkívül még helyeket, ahol közök előfordulhatnak és megjegyzések beírhatók.

A következő szabályok mindig betartandók:

  • Minden CSS stíluslap kis-nagybetű érzéketlen, kivéve a stíluslap azon részeit, amelyeket nem a CSS vezérel (pl.: a fontcsalád nevek és az url-ek kis-, és nagybetű érzékenyek. A CLASS és ID attribútumok a HTML felügyelete alatt állnak.)
  • A CSS1-ben a szelektorok (elemnevek, osztályok és ID-k) csak a következő karaktereket tartalmazhatják: a-z, A-Z, 0-9, az Unicode karaktereket 161-255 -ig, valamint a kötőjelet (-); nem kezdődhetnek kötőjellel, vagy számjeggyel; tartalmazhatnak 'függő' karaktereket, és bármely numerikus kóddal jelölt Unicode karaktert (lásd a következő pontot).
  • A 'bal per' jel (\) után következő legfeljebb négy hexadecimális számjegy (0..9A..F) egy Unicode karaktert jelent.
  • Bármely karakter - hexadecimális számot kivéve - megfosztható speciális jelentésétől, ha elé egy 'balper' jelet helyezünk. Példa: "\"" - szöveg, amely egy dupla idézőjelet tartalmaz.
  • A két megelőző bekezdés definiálta a 'balper-függést'
    (saját szóalkotmány - a ford.). A balper-függés mindig az azonosító részének tekintendő, kivéve a belső szövegeket.

A HTML CLASS attribútuma több karakter (nem hosszban, fajtában!) használatát engedélyezi egy osztály (CLASS) nevében, mint amit a fenti előírások a szelektoroknak engedélyeznek. A CSS1 -ben ezek a karakterek 'függő' karakterek, vagy hexadecimális Unicode formában írandók: A "B&W?" kombinációt B\&W\?, vagy B\26W\3F módon kell leírni.

A CSS nyelvtanával a B Függelék foglalkozik.

előző  tetejére  következő