Hogy tudok olyan css kódot készíteni, hogy az minden böngészőn működjön?

Igen, rutin kérdése, érdemes utánanézni a különböző CSS-parancsok támogatottságának.

Itt egy nagyon egyszerű példa:

[link]

Ha legörgetsz, látod a Browser support részben, mely böngészőverzióktól teljesen támogatott az a bizonyos property. Hozzáteszem, éppen a bordernél lehetnek így is minimális megjelenítésbeli eltérések (főleg a dotted és a dashed stílusban, de ez nem függ a támogatottságától).

Három dolgot tehetsz:

1. Figyelmen kívül hagyod a nagyon régi böngészőket. Lehetőleg viszont ne kritikus dolgok legyenek ezek, hanem mondjuk nem lekerekített sarkok jelennek meg az IE 6-ban, hanem szögletesek - na bumm.

2. Más, általánosabb vagy egyszerűbb megoldást választasz, esetleg megkerülöd a dolgot (pl. háttérképet használsz CSS-formázás helyett).

3. Lehet foglalkozni a különböző böngészőkre optimalizált stíluslapokkal is, például más böngészők esetén más css-t tölt be a rendszer.

Példa:

<!--[if IE 6]>

<link rel="stylesheet" type="text/css" media="all" href="css/ie6.css" />

<![endif]-->

Azt érd el, hogy technikailag működjön minden böngészőn. Kinézetileg, meg elég ha ott tökéletes, ahol a látogatók 95%-a megtalálható.

[link]

Ahogy látod, ha chrome-on és mozillán jól néz ki, akkor közel 90%-nál jársz. És ez nem zárja ki, hogy másol nem jó. Az pedig elvárható, hogy frissítsék a böngészőt. Őskövületekre ne tervezz látvány világot.

Ha van statisztikád, érdemes megnézni a böngészők arányait.

Nálam például az IE 9 alattiak 0,% részesedés alatt vannak, így úgy döntöttem, hogy nem foglalkozom velük a továbbiakban.

Egyes szektorokban viszont kiugróak lehetnek bizonyos típusok, erre figyelni kell. Ismertem egy céget, ahol - igaz, évekkel ezelőtt - valami idióta biztonsági megfontolás miatt csak IE 6-ot használtak.