7 tärkeää CSS-asetteluvinkkiä

Vaikein asia CSS:ssä on sivustosi ulkoasu. Tässä on pari vinkkiä, jotka käsittelevät juuri sitä. Jotkut näistä vinkeistä eivät ole aivan uusia tai rakettitiedettä, mutta toivottavasti ne säästävät jonkun vaivautumisesta jonnekin!

Vinkki 1: Tyhjennä oletuspehmuste- ja marginaaliasetukset ennen kuin aloitat työskentelyn.
Eri selaimilla on erilaiset oletusmarginaalit ja täytekoot, joten haluat aloittaa niin sanotusti puhtaalta pöydältä. Käytä tätä komentoa:

*
{
marginaali: 0;
pehmuste: 0;
reuna: 0;
}

tyhjentääksesi kaikki oletusmarginaali- ja täyteasetukset. Huomaa myös reunus, jonka arvo on 0. Huomaa, että jos teet tämän, pääset eroon myös ärsyttävistä purppuranpunaisista pyöreistä napsautuskuvista, vaikka jotkut väittävätkin, että violetti reunus on välttämätön saavutettavuuden ja käytettävyyden kannalta. Mutta monet ihmiset eivät pidä violeteista reunuskuvista, ja tämä on yksi tapa päästä eroon siitä yhdellä iskulla ilman, että sinun tarvitsee asettaa img border=0 jokaiselle kuvalle (mikä on tiukkojen merkintäsääntöjen vastaista joka tapauksessa).

Vinkki 2 : Jos haluat keskittää asettelusi, käytä säilödiv-elementtiä, joka sisältää kaiken sisältösi
Ilmoita se seuraavasti:

#kontti

{
marginaali: 0 auto;
leveys: xxxpx;
}

Tässä on muutama huomioitava seikka. ÄLÄ ilmoita leveydeksi 100 %. Tämä kumoaa koko objektin, koska sinun on vain ilmoitettava alielementit säiliössä ja keskitettävä NE käyttämällä marginaali: 0 auto. Tämä on ERITTÄIN HUONO, koska se tarkoittaa, että sen sijaan, että ilmoittaisit keskeisen asettelun kerran, sinun on ilmoitettava se useissa paikoissa jokaiselle säilön elementille.

Vinkki 3: Työskentele ylhäältä alas
Aloita kirjaimellisesti CSS-asettelun työstäminen aloittamalla suunnittelusi ylemmistä elementeistä sekä HTML-koodisi "ylimmistä" elementeistä, kuten rungosta, sekä pääsäiliöistä.

Ilmoita CSS-komennot korkeimmalla mahdollisella tasolla ja yritä ilmoittaa jotain vain kerran ja anna sen kaskadoida koko ajan. Ohita alemman tason komennot vain, kun se on ehdottoman välttämätöntä. Tämä estää monisanaisen CSS-tiedoston, jota on vaikea ylläpitää ja ymmärtää. Esimerkiksi jos sinulla on { marginaali : 0 auto} Säilön jokaisen subdiv-asetukset – olet pulassa.

Vinkki 4 : Dokumentoi mitä olet tekemässä ja käytä Firebugia ja Firefox-selainta virheenkorjaukseen
Et kirjoita CSS-koodiasi vain itseäsi varten, jonain päivänä jonkun köyhän sängyn täytyy korjata se. Kirjoita CSS-tiedostoosi useita kommentteja selittääksesi, miksi teet asioita tietyllä tavalla.

Sovittuasi tähän saatat huomata, että joudut korjaamaan jonkun toisen CSS:n useammin kuin luulet (tai jopa omasi). Käytä Firefoxin Firebug-lisäosaa CSS-virheenkorjaukseen. Tämä on hengenpelastaja, joka antaa sinulle käsityksen siitä, missä suunnittelusi saattaa olla rikki ja miksi.

Ainoa ongelma tässä on, että suunnittelusi saattaa toimia täydellisesti Firefoxissa, mutta ei IE5:ssä, IE6:ssa tai IE7:ssä. Tämä vie meidät seuraavaan vihjeeseen.

Vinkki 5 : Päätä, mille selaimille aiot rakentaa CSS:n, ja testaa alusta alkaen
Jotkut puristit vaativat varmistamaan, että verkkosivustosi toimii kaikilla mahdollisilla selaimilla, toiset saavat sen toimimaan vain "tärkeimmillä" selaimilla. Mistä tiedät tarkalleen, mitä selaimia käytetään eniten? Jälleen kerran W3-koulut tulevat apuun.

Seuraavalla sivulla voit nähdä, mitkä selaimet ovat suosituimpia: http://www.w3schools.com/browsers/browsers_stats.asp. Tältä sivulta näet, että jotain IE5:n kaltaista käyttää vain noin 1.1 % selaimista. On sinun päätettävissäsi, kannattaako CSS:n rakentaminen yhteensopivaksi tämän selaimen kanssa vai aiotko vain testata yhteensopivuuttasi esimerkiksi IE6:n, IE7:n ja Firefoxin kanssa. Mitä tahansa teetkin, kun aloitat CSS:n rakentamisen, aloita ylhäältä ja testaa jokaista asetusta jokaisessa selaimessa edetessäsi. Mikään ei ole pahempaa kuin täydellisen verkkosivuston rakentaminen Firefoxilla ja heti 1000 rivin css-tiedoston koodauksen jälkeen, että se on rikki IE6:ssa. Sen jälkeen virheenkorjaus ja koodin korjaaminen on painajaista.

Vinkki 6: Tässä on kiusallinen pieni vinkki CSS:n korjaamiseen IE6:ssa tai IE7:ssä
Oletetaan, että suunnittelusi toimii täydellisesti Firefoxissa, mutta on rikki IE6:ssa. Et voi käyttää Firebugia ongelman paikan määrittämiseen, koska se TOIMII Firefoxissa. Sinulla ei ole ylellisyyttä käyttää Firebugia IE6:ssa, joten miten voit korjata IE6- tai IE7-tyylitaulukon? Olen usein huomannut, että lisääminen auttaa {reuna : 1 px kiinteä punainen} or {reuna : 1 px kiinteä violetti} ongelmallisiin elementteihin. Näin näet usein, miksi tietyt elementit eivät mahdu käytettävissä olevaan tilaan. Se on kiusallinen pieni vinkki, koska se on niin alkeellinen ja yksinkertainen, mutta se toimii!

Vinkki 7: Ymmärrä kellukkeet
Elementtien kelluminen on välttämätöntä ymmärtää, varsinkin kun haluat saada kelluvat elementit toimimaan eri selaimissa!

Pohjimmiltaan elementit, kuten divs, kellutetaan vasemmalle tai oikealle (ei koskaan ylös tai alas, vain sivuttain). Tässä on pari asiaa, jotka on otettava huomioon kelluvien elementtien kanssa. Jokaisella kelluvalla elementillä on oltava selkeä leveys. Jos käytät kellutettuja divejä luodaksesi 3 sarakkeen tai 2 sarakkeen asettelun, määritä leveydet mieluummin prosentteina kiinteiden leveuksien sijaan, ja jos käytät prosenttiosuuksia, varmista, että prosenttiosuudet eivät ole 100. %, tämä saa usein oikeanpuoleisen sarakkeen putoamaan muiden alapuolelle, mikä osoittaa selvästi, että yrität sovittaa jotakin sille liian leveää vapaata tilaa. Käytä mieluummin prosenttiosuuksia, joiden summa on hieman alle 100 %, kuten 25 %, 49 %, 24 % vasemmalle, keskimmäiselle ja oikealle sarakkeelle.

Kelluvat elementit voivat olla erittäin monimutkaisia ​​ymmärtää, ja kannattaa viettää aikaa hyvillä sivustoilla, jotka tarjoavat erityisiä ohjeita ja vinkkejä, kuten Asema on kaikki -sivustolta.

Yhteenveto
Näiden asettelua koskevien CSS-vinkkien pitäisi toivottavasti säästää aikaa ja vaivaa, kun seuraavaksi joudut päihittämään pöydättömän suunnittelun! Tämä oli Christine Anderssenin kirjoittama vieraspostaus.