7 fontos CSS-elrendezési tipp

A CSS-ben a legnehezebb a webhely elrendezése. Íme néhány tipp, amelyek éppen ezzel foglalkoznak. A tippek némelyike ​​nem teljesen új vagy rakétatudomány, de remélhetőleg megkímélnek valakit egy kis fáradságtól valahol!

1. tipp: A munka megkezdése előtt törölje az alapértelmezett kitöltés és margóbeállításokat.
A különböző böngészőkben eltérő alapértelmezett margó és kitöltési méret van, így úgymond tiszta lappal szeretne kezdeni. Használja ezt a parancsot:

*
{
margó: 0;
párnázás: 0;
határ: 0;
}

az összes alapértelmezett margó- és kitöltési beállítás törléséhez. Vegye figyelembe a szegélyt is, amely 0-ra van állítva. Kérjük, vegye figyelembe, hogy ha ezt megteszi, akkor a bosszantó lila szegély kerek, kattintható képektől is megszabadul, bár egyesek azt állítják, hogy a lila szegély szükséges a hozzáférhetőség és a használhatóság érdekében. De sokan nem szeretik a lila szegélyes kerek képeket, és ez az egyik módja annak, hogy egy csapásra megszabaduljon tőlük anélkül, hogy be kellene állítania img border=0 minden egyes képhez (ami mindenesetre ellenkezik a szigorú jelölési szabályokkal).

2. tipp: Az elrendezés középre állításához használjon egy tároló div elemet, amely tartalmazza az összes tartalmat
Nyilatkozzon a következőképpen:

#tartály

{
margó: 0 auto;
szélesség: xxxpx;
}

Itt van néhány szempont, amit figyelembe kell venni. NE deklarálja a szélességet 100%-nak. Ez legyőzi az egész objektumot, mivel csak deklarálnia kell az alelemeket a tárolóban, majd középre kell helyeznie őket margó: 0 auto. Ez NAGYON ROSSZ, mert azt jelenti, hogy a központi elrendezés egyszeri deklarálása helyett több helyen kell deklarálnia a tároló minden eleméhez.

3. tipp: Dolgozzon felülről lefelé
Szó szerint kezdjen el dolgozni a CSS-elrendezésen, kezdve a tervezés legfelső elemeivel, valamint a HTML-kód „felső” elemeivel, például a törzstel, valamint a fő tárolókkal.

Deklarálja a CSS-parancsokat a lehető legmagasabb szinten, és próbáljon meg valamit csak egyszer deklarálni, és hagyja, hogy végig kaszkádozza. Csak akkor írja felül az alacsonyabb szintű parancsokat, ha feltétlenül szükséges. Ez megakadályozza, hogy nehezen karbantartható és érthető, bőbeszédű CSS-fájl jöjjön létre. Például ha van { margó : 0 automatikus} beállításokat a tároló minden egyes aldiv-én – bajban van.

4. tipp: Dokumentálja, amit csinál, és használja a Firebug-ot és a Firefox böngészőt a hibakereséshez
Nem csak magadnak írod a CSS-kódodat, egy nap szegénynek meg kell hibáznia. Tegyen számos megjegyzést a CSS-fájlba, hogy megmagyarázza, miért csinálja a dolgokat bizonyos módon.

Ha ehhez illeszkedik, előfordulhat, hogy gyakrabban kell kijavítania valaki más CSS-jét, mint gondolná (vagy akár a sajátját). A CSS hibakereséséhez használja a Firefoxhoz készült Firebug-bővítményt. Ez életmentő, mivel betekintést nyújt abba, hogy pontosan hol és miért sérülhet meg a terv.

Az egyetlen probléma ezzel az, hogy elképzelhető, hogy a tervezés tökéletesen működik Firefoxban, de nem IE5, IE6 vagy IE7 esetén. Ezzel el is érkeztünk a következő tipphez.

5. tipp: Döntse el, mely böngészők számára készíti a CSS-t, és tesztelje a kezdetektől fogva
Egyes puristák ragaszkodnak ahhoz, hogy megbizonyosodjanak arról, hogy webhelye az összes lehetséges böngészőben működjön, mások csak a „nagy” böngészőkben. Honnan tudod, hogy pontosan mely böngészőket használják a legtöbbször? Ismét a W3 Schools segít.

A következő oldalon láthatja, hogy mely böngészők a legnépszerűbbek: http://www.w3schools.com/browsers/browsers_stats.asp. Erről az oldalról láthatja, hogy az IE5-höz hasonlót csak a böngészők 1.1%-a használja. Rajtad múlik, hogy érdemesnek tartod-e a CSS-t ezzel a böngészővel kompatibilisnek építeni, vagy csak teszteled például az IE6, IE7 és Firefox kompatibilitást. Bármit is csinál, amikor elkezdi építeni a CSS-t, kezdje elölről, és közben tesztelje az egyes böngészők minden egyes beállítását. Nincs annál rosszabb, mint tökéletes webhelyet készíteni a Firefoxban, és egy 1000 soros css-fájl kódolása után azonnal rájönni, hogy az IE6-ban meghibásodott. A hibakeresés és a kód utólag kijavítása egy rémálom.

6. tipp: Íme egy kínos kis tipp a CSS javításához IE6-ban vagy IE7-ben
Tegyük fel, hogy a design tökéletesen működik Firefoxban, de az IE6-ban tönkrement. A Firebug segítségével nem állapíthatja meg, hol lehet a probléma, mivel MŰKÖDIK a Firefoxban. Nem élvezheti azt a luxust, hogy Firebugot használjon az IE6-ban, így hogyan lehet hibakeresni egy IE6 vagy IE7 stíluslapot? Gyakran tapasztaltam, hogy segít hozzáadni {szegély: 1 képpont tömör piros} or {szegély: 1 képpont tömör lila} a problematikus elemekhez. Így gyakran láthatja, hogy bizonyos elemek miért nem férnek el a rendelkezésre álló helyre. Kínos kis tipp, mivel annyira primitív és egyszerű, de működik!

7. tipp: Ismerje meg az úszót
Az elemek lebegtetése elengedhetetlen a megértéshez, különösen abban az összefüggésben, hogy a lebegtetett elemek működjenek a különböző böngészőkben!

Alapvetően az olyan elemek, mint a div-ek, balra vagy jobbra vannak lebegtetve (soha nem tetejére vagy lefelé, csak oldalra). Íme néhány dolog, amelyet figyelembe kell venni a lebegtetett elemekkel. Minden lebegtetett elemnek explicit szélességgel kell rendelkeznie. Ha lebegtetett diveket használ 3 oszlopos vagy 2 oszlopos elrendezés létrehozásához, a szélességet inkább százalékban adja meg a rögzített szélességek helyett, ha pedig százalékokat használ, ügyeljen arra, hogy a százalékok összege ne legyen 100 %, ez gyakran azt eredményezi, hogy a jobb szélső oszlop a többi alá süllyed, egyértelműen jelezve, hogy valamit a rendelkezésre álló helyre próbál beilleszteni, ami túl széles neki. Inkább használjon olyan százalékos értékeket, amelyek összege valamivel 100% alatt van, például 25%, 49%, 24% bal oldali, középső és jobb oldali oszlophoz.

A lebegő elemek megértése rendkívül bonyolult lehet, és érdemes eltölteni egy kis időt jó oldalakon, amelyek konkrét iránymutatásokat és tippeket tartalmaznak, mint pl. A pozíció minden weboldal.

Következtetés
Ezek a CSS-tippek az elrendezéshez remélhetőleg időt és erőfeszítést takarítanak meg Önnek, amikor legközelebb panelekkel kell legyőznie egy táblázat nélküli tervet a benyújtáshoz! Ezt Christine Anderssen vendégbejegyzése írta.