Hvordan holder jeg min nettside konsekvent på tvers av nettlesere?

Hvordan holder jeg min nettside konsekvent på tvers av nettlesere?


Designing for web er vanskelig nok uten å måtte bekymre deg for kryss-nettleser kompatibilitet. Men siden hver layout motoren har utviklet seg til å tolke World Wide Web Consortium (W3C) retningslinjer for Cascading Style Sheets (CSS) og Hypertext Markup Language (HTML) annerledes, nettsider viser ofte overraskende avvik fra en nettleser til den neste. For å opprette en pålitelig en konsistent nettsted på tvers av alle de store nettleserne, trenger du en systematisk, effektiv og praktisk tilnærming til feilsøking feil. Du trenger også en fungerende kunnskap om standard kompatibel CSS og HTML.

Bruksanvisning

1 Bygg din design for Firefox. Firefox har konsekvent holdt seg à jour med de siste endringene i CSS og har en tendens til å være stabil, noe som gjør det til et utgangspunkt kandidat for alle dine web design. Fullfør design først i Firefox, og deretter flytte til andre nettlesere for å se etter uoverensstemmelser.

2 Arbeid med Firefox utforming extensions. Utvidelser vil hjelpe deg å finne feil i Document Object Model (DOM), finne passende CSS velgere og skanne kode hint for CSS egenskaper.

3 Test din design i WebKit nettlesere (Chrome / Safari). Tilgang Chrome innebygde feilsøkingsverktøy ved å høyreklikke på siden og velge "Inspiser element." Siden både Chrome og Safari bruker samme WebKit-motoren, vil du normalt bare trenger å teste i en av disse to nettlesere, men det er fortsatt lurt å sjekke begge.

4 Skriv ned eventuelle uoverensstemmelser du observerer i Chrome vs Firefox. Åpne to lesere ved siden av hverandre. Hvis du ser noen uoverensstemmelser, gå direkte til testing i Internet Explorer i trinn 8. Hvis uoverensstemmelser vises i Chrome, så ta kontakt med trinn 5, 6 og 7.

5 Studier CSS teknikker. Unngå eller omgå problemer og nettleser inkonsekvens ved å bruke en rekke teknikker på problemet. Lær disse ved å studere andres arbeid, for eksempel i de mange online blogger viet til å diskutere og lære CSS teknikker. Les dem regelmessig, eller søke gjennom dem når du støter på et bestemt problem.

6 Skriv strukturelle markup og presentasjons CSS. Bruk HTML-koder for å organisere dokumentstrukturen på websiden din, men utelukkende bruke CSS til å definere sidens stil egenskaper. For eksempel, ikke bruk fet, kursiv eller sterke HTML-koder å style teksten. Bruk CSS font egenskaper i stedet.

7 Legg en Chrome-spesifikke stilark. Bare gjøre dette hvis du ikke kan korrigere uoverensstemmelser mellom Chrome og Firefox ved å forbedre på stilen koding delt mellom dem. Tekstutdrag og Javascript for Chrome-spesifikke stilark er tilgjengelig på nettet.

8 Test i de nyeste versjonene av Internet Explorer (IE). Ikke la deg skremme av problemer; ofte, en enkel stil tweak eller strukturell tilpasning til HTML er alt du trenger å gjøre. Debugging programmer, for eksempel IE Tester, forenkle prosessen med testing i ulike versjoner av IE, samt for å undersøke selve koden.

9 Lag en IE-spesifikke stilark. Ikke bruke for lang tid å prøve å manipulere CSS for å skape et helhetlig utseende i IE. Bare lage en ny stilark spesifikt for IE, og endre CSS velgere og egenskaper du trenger. Tekstutdrag for å legge til IE stilark til HTML-maler er tilgjengelige på nettet.

10 Hold en CSS referanse manuell nærheten. Kjøp en paperback manuell eller tilgang til W3C elektronisk dokumentasjon i et eget nettleservindu.

Hint

  • Regelmessig kontakt W3C leseren brukerstatistikk for å gjøre utdannet dommer om hvilke nettlesere for å teste og design for. Eldre nettlesere er ofte erstattet av nyere, mer standard-kompatible seg.
  • Hold deg oppdatert på den nyeste CSS og HTML nyheter og lære nye teknikker ved å lese W3C nettsted og designerblogger.
  • Still spørsmål i webdesign fora.
  • Nettlesere er alltid i endring. Hold deg oppdatert på de mest populære og mest stabile nettlesere, og erstatte den nyeste og beste for "Firefox" i denne artikkelen.
  • Bruk dine IE stilark til alle versjoner av IE som du tester. Du kan opprette stilark for alle versjoner av IE eller individuelle seg (f.eks IE7, IE8). Hvis du feilaktig refererer til en viss versjon av IE, vil din stil egenskaper ikke gjelder for den.
  • Unngå begynner i IE, som du skal bruke quirkiest leseren motoren som grunnlag og referansepunkt for din kode implementering.