< WebKészítés /> interaktív webszerkesztő tananyagok

Hibakezelés

Általános szabály a CSS nyelvben, ha egy olyan tulajdonság vagy érték kerül megadásra, mit nem értelmez a böngésző, azt figyelmen kívül fogja hagyni. Valójában ez a hibához való hozzáállás eredményezi az előre-hátra kompatibilitást a nyelv egyes verziói közt. Például a CSS 3-ban lévő új tulajdonságok értelmezve lesznek az újabb böngészőkben, a régiekben pedig mintha ott sem lenne. Szigoríthatjuk ezt a szabályt, ha vesszőt (,) teszünk a kijelölők közé. Ilyenkor kijelölési hiba esetén a teljes meghatározásblokk kihagyásra kerül, hiába van benne értelmezhető rész is. Találkozhatunk még úgynevezett kísérleti tulajdonságokkal, mik kötőjellel (-) vagy alulvonással (_) kezdődnek. Ezek egyes böngészőkben értelmezettek lehetnek, ám sosem lesznek a hivatalos CSS szabvány részei. A megkülönböztető jelölés azért szükséges, hogy egyes későbbi verziókban biztosan ne legyen definiálva más tulajdonság ugyanazzal a névvel. Meg kell említeni még itt az "at" (@) szabályt. Ennek lényege, hogy a kukac jel után a következő ;-ig tartó szakasznak nem kell követnie a szintaktikát, és ha nem felismerhető, akkor figyelmen kívül marad. Emlékezzünk az @charset "utf-8";-ra. Fontos, hogy ezek csak a .css fájl elején foglalhatnak helyet. Ebből adódóan mindegyikből csak a legelső kerül értelmezésre.

Sehol sem tisztázott, hogy mikor is szükséges az idézőjelek ("") használata. Az általános szabály az, hogy CSAK akkor tegyük ki, ha olyan értéket definiálunk, ami nincs az alapértelmezett, adható értékek listáján.

Médiatípusok

Az @import url() MÉDIATÍPUSOK; is at-szabály, mely külső stíluslap behívására alkalmas. Az url() és a médiatípusok listája akár el is hagyható, elég csak az URL cím leírása. A következő médiatípusokat különböztetjük meg: all (általános) vagy braille (tapintásos eszközök vakoknak), embossed (dombornyomásos nyomtatók), handheld (kézi eszközök pl. telefon), print (lapozós formátum), projection (kivetítők), screen (PC-khez), speech (felolvasókhoz), tty (terminálokhoz, fix karakterszélesség), tv (alcsony felbontás, rossz görgethetőség). Ezeket behíváskor adhatjuk meg vesszőkkel összefűzve, vagy HTML-ben a media attribútummal a <style> </style> és a <link /> esetén. Ha egy stíluslapon belül ugyanarra a kijelölőre kívánunk médiatípusok szerint más-más tulajdonságot meghatározni, akkor a következő formátum használható: @media screen { body { color: black; } }.

KódTesztelő a gyakorláshoz

Lapozós médiatípus esetén a @page szabállyal úgynevezett oldaldobozt készíthetünk. Erre, és ennek lapszelektoros változataira :left, :right, :first margót állíthatunk cm-ben, vagy lapméret %-ában. Célszerű elrejteni ilyenkor a fölösleges grafikai elemeket és jól olvasható színűre állítani a szöveget és hátteret. Oldaltöréseket a megjelenítő is és a mi is definiálhatunk. A page-break-before: (oldaltörés előtte) és page-break-after: (oldaltörés utána) értékei lehetnek: always (mindíg), left (balra töri), right (jobbra töri), avoid (sose) vagy auto. A page-break-inside: (oldaltörés benne) pedig avoid / auto. Ezek mind blokk-szerű elemekre vonatkoznak. Elemeken belüli töréseket az orphans: (bekezdés minimális sorszáma az oldal tetjén) és windows: (bekezdés minimális sorszáma az oldal alján) generálnak. Az ő értékük tetszőleges egész szám lehet. Alapértékük 2.

KódJegyzék a tulajdonságokhoz

Az XML és a CSS kapcsolata

A CSS minden strukturált dokumentum-formátummal alkalmazható, így az XML-lel is. Az XML jobban függ a stíluslapoktól, mint a HTML, mert itt a fejlesztő saját elemeket hozhat létre, melyről a böngésző nem fogja tudni, hogy jelenítse meg. Lássunk egy példát az XML-es oldalfelépítésre:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="cikkek.css"?>
<cikk>
   <cim> példa </cim>
   <szerzo> én </szerzo>
   <tartalom> blabla </tartalom>
</cikk>

KódTesztelő a gyakorláshoz

Az XML fájlok stíluslapjai (XSL) eltérhetnek a HTML kapcsán megismert CSS-től. Bővebben nem tárgyalom a témát, csak szemléltetésnek szántam. Az érdeklődőknek a W3C honlapot ajánlom.

A CSS lehetőségei

Modern CSS

A jelen tartalom írásakor a CSS 3 még nem vált ajánlássá, mert munkafázis alatt áll. Egyes böngészők ugyan már támogatják bizonyos részeit, mégsem fogom részletesen bemutatni, csak egy általános koncepciót vázolok hozzá. A CSS 3 rengeteg grafikai újítást fog tartalmazni, mint átlátszóság, lekerekített szegélyek, átmenetek, árnyékok, tükröződés, és több 2D-s transzformáció támogatása. Ezeken kívül fontos újítás, hogy a betűtípus problémákra és gyakran használt szövegrendezésre (pl.: több hasábos szöveg) is megoldást fog nyújtani. Az alábbi oldalakon lévő újdonságokat alkalmazd bátran, de mindig csak úgy, hogy ezzel ne szenvedjenek hátrányt a régebbi böngészőkkel rendelkezők...

http://www.webragacs.hu/2010/05/modern-css3-1-resz-alapveto-jellemzok/
http://www.webragacs.hu/2010/06/modern-css3-2-resz-alapveto-technikak/
http://www.css3.info/preview/
http://www.w3.org/TR/css3-roadmap/

Hiteles CSS

Ismét a végére értél egy fejezetnek. Gratulálok! Azonban CSS fájljaidat se felejtsd el mentesíteni a hibáktól! A HTML-hez hasonlóan erre is találsz eszközt a weben: http://jigsaw.w3.org/css-validator !

Hitelesség ellenőrző!

Ugrás az oldal tetejére!

Ugrás a következő fejezetre!

0 hozzászólás