HALDESIGN

A linkleltár második részében szemezgettem az internet kincsei közül a CSS témájában, most néhány hasznos tippet szeretnék megosztani a stíluslapokkal kapcsolatban.

Gyakori hibák

Saját tapasztalatomból (is) tudom, hogy következetességgel és odafigyeléssel sok-sok munkaóra megspórolható. Én a legtöbb időt az alábbiak figyelmen kívül hagyása miatt vesztegettem el.

Pont, vessző, pontosvessző, szóköz – mindig csak a megfelelő helyre!

• .p » ponttal az elején a class="p" stílusú tag-ekre vonatkozik
  p » pont nélkül minden bekezdésre érvényes
• a, a:hover, a:visited » ez egyes stílusok felsorolásakor közéjük mindig kell vessző, az utolsó után viszont soha
• a {border: 0; background: #000; color: #fff;} » egy stílus meghatározásánál az egyes tulajdonságok után mindig legyen pontosvessző (bár az utolsó után már nem kötelező, de nem baj, ha ott van)
• a {font-size: 10px} » az érték és annak mértékegysége között soha ne legyen szóköz

Nem mindegy a sorrend!

• p a » bekezdésn belüli link
  a p » linken belüli bekezdés
• p.header » minden class="header" stílusú bekezdés
  .header p » a class="header" header stílusú tag-en belüli összes bekezdés

Egyszerűen jobb

Mint az élet sok más területén, így itt is igaz, hogy a legegyszerűbb a legjobb; mert ha kevesebb a kód, akkor először is kisebb a fájl, másodszor pedig könnyebb átlátni.

Rövidítsünk, ha lehet!

• p {font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 11px;
line-height: 15px;
font-family: helvetica, sans-serif}

  » mindezek helyett elég ennyi:
  p {font: bold italic small-caps 11px/15px helvetica, sans-serif}

• body {background-color: #000;
background-image: url(bg.gif);
background-repeat: no-repeat;
background-position: center top}

  » egyenértékű ezzel:
  body {background: #000 url(bg.gif) no-repeat center top}

• p {border-color: #000;
border-style: solid;
border-width: 10px}

  » egyszerűbben és rövidebben:
  p {border: #000 solid 10px}

Ráadásul...

• ...jó tudni, hogy egy tag-nek akárhány stílusa lehet (szóközökkel elválasztva).
  p class="txt alignright" » ebben az esetben a bekezdések a .txt és az .alignright stílusokban definiált tulajdonságokkal jelennek meg

« előzmény

folytatás »

Lehet, hogy nem tűnik túl aktuális témának, hiszen már csak hónapok kérdése, és 5 (!) év után itt lesz az új Internet Explorer, a 7-es. De az is lehet, hogy a cím továbbra is aktuális marad, hiszen sok cikk olvasható az interneten, ami a jelenlegi publikus béta verzió hibáit taglalja. Én még nem kezdtem el az ismerkedést vele, mert elismerem, nagyon elfogult vagyok az Internet Explorer-rel kapcsolatban – a címből gonolom egyértelmű, negatív irányban. Ennek két oka van: honlapokat készítek, és honlapokat böngészek.

Mikor honlapokat készítek

Az Internet Explorer 6 - már csak élemedett kora miatt is (de nem csak ezért!) – rengeteg szabványt / ajánlást nem ismer. Tragikus, hogy a munkaidőm nem elhanyagolható részét arra kell fordítanom, hogy az Explorer butaságaira gyógyszereket keresgéljek és használjak. Szerencsére az interneten majdnem minden megtalálható (a következő Linkleltár a css témájából szemezget majd – érintve ezeket az Explorer butaság-betegségekre írt orvosságokat is); de aki készített már honlapot úgy, hogy törekedett a szabványosságra, és a kitűzött céljai között szerepelt a böngészőfüggetlenség is, az tudja (maga is érzi), honnan ered ez az Explorer-utálat.

Mikor honlapokat böngészek

Szomorú, hogy még ma is átadásra kerülhetnek olyan komoly oldalak (akár portálok, nagy cégek megrendelésére), melyek csak az Exporer-en jelennek meg helyesen, vagy rosszabb esetben csak Explorer-rel használhatók. Felháborítónak tartom, hogy vannak, akik egyszerűen figyelmen kívül hagyják a felhasználóknak azt a legóvatosabb becslések szerint is több mint 10 %-át, de más statisztikák szerint akár az internetet böngészők harmadát, azokat, akik kerestek egy okosabb alternatívát, és nem az Explorer-t használják. Az ilyen oldalakon nem szoktam néhány másodpercnél többet időzni.

A megoldás

Ha honlapokat készítesz, ne csak Explorer-re optimalizálj. Rá fog menni rengeteg időd, de megéri – legalábbis, ha fontosak neked leendő weblapod látogatói.
Ha honlapokat böngészel, a legjobb, ha váltasz egy okosabb böngészőre. Ajánlom a Firefox-ot (hibáival együtt is nagyságrendekkel teszi élvezetesebbé az internet-turkászást), vagy a Netscape-et. Előbbihez rengeteg hasznos bővítmény is a rendelkezésedre áll, többek között az IE Tab, melynek segítségével egy gombnyomással Internet Explorer-nézetre válthatsz a Firefox-on belül (minderre a Netscape alapból képes – lásd a bal alsó sarkában levő kis gombot).

Miért is?

Ez a fejezet azoknak szól, akik Internet Explorer használóként nem értik, miért (lenne) jó nekik a böngésző-váltás. Egy egyszerű példán keresztül szeretnék rávilágítani arra, hogy nem csak fejlesztői, de felhasználói oldalról is buta programot használnak.

Példa: böngészel egy oldalt, melyen sok link szerepel (mint például ezen). Ezeket a linkeket mind meg szertnéd nyitni, de közben ezt az oldalt szeretnéd tovább olvasni. Explorer esetén ez úgy néz ki, hogy nyomsz egy jobb klikket a link felett, a felnyíló helyi menüből kiválasztod a „Hivatkozás megnyitása új ablakban” menüpontot. Ezt ahányszor megteszed, annyi új ablakod keletkezik, és mindannyiszor vissza kell térned az eredetihez, mindannyiszor újra kiválasztva azt. Én a Firefox-ot használva egyszerűen középső egérgombbal kattintok a linkekre és kész. A linkek tartalma az eredeti ablakon belül, új füleken kerül megjelenítésre, és közben egy pillanatra sem tűnik el az eredeti oldal. Sokkal kényelmesebb. És ez csak egy példa volt...

A 2005 november végén megjelent Firefox 1.5 másként kezeli a háttérkép középre igazítását, mint elődei, vagy a legelterjedtebb többi böngésző (Internet Explorer, Netscape, Opera).

A probléma, hogy míg a Firefox korábbi verziói a

body style="background: url(background.gif) center no-repeat;"

hatására középre igazították a hátteret, az 1.5-ös verzió a háttérkép közepét igazítja az ablak felső széléhez. A képre kattintva látható mindez a gyakorlatban (ha Firefox 1.5-öt használsz).

A megoldás: height:100% a html-nek. Itt a működő példa. Ha meg akarnám védeni a Firefox-ot, akkor azt mondanám, logikus, mert amíg nem adom meg a html-nek, hogy milyen magas legyen, addig a böngésző honnan tudja ezt? De nem akarom megvédeni, mert gyakorlati oldalról nézve logikus az is, hogy a html alapértelmezetten 100% magas, és ha már annyi mindenben különböznek, ebben legalább megegyeztek az említett böngészők – idáig.

frissítve (2006. 01. 25.): Most nézem, hogy az Opera 8.5 esetén is ugyan ez a jelenség (és a megoldása is).