10 tips å legge merke til når du oppretter et nettsted på tvers av nettlesere

4

Teoretisk sett er det enkelt å lage en nettside. De viktigste aspektene inkluderer å skrive en HTML-kode, teste den i en nettleser og laste den opp. HTML og CSS er standarder, noe som betyr at en nettside som fungerer bra i en bestemt nettleser kanskje ikke kommer opp rent i andre nettlesere.

Selvfølgelig er ting ikke så enkelt i praksis. Det finnes en rekke nettlesere, der hver nettleser viser HTML og CSS på en annen måte.

For å sikre at nettsidene fungerer jevnt på tvers av alle nettlesere, bør kodeing på tvers av nettlesere praktiseres av nettdesignerne. I dette innlegget vil vi diskutere 10 av de velprøvde triksene du kan følge for å oppnå en feilfri og nettleserklar nettside.

En kort introduksjon til CSS

CSS eller Cascading Style Sheets er et sett med webformateringsinstruksjoner som kontrollerer utseendet på nettsidene. Noen nettlesere som er kompatible med CSS er:

  • DVS
  • Kant
  • Firefox
  • Chrome
  • Safari
  • Opera
  • iOS Safari
  • Opera
  • Android-nettleser
  • Chrome for Android

Men før du kommer til en konklusjon om at det vil spare deg for mye tid, bør du forstå at de fleste nettlesere ikke fullt ut støtter alle funksjonene.

CSS fungerer som en portretterende komponent som karakteriserer komponentene på en nettside. Samtidig styrer de gjennomgripende stilarkene utformingen av forskjellige sider samtidig.

Selv om det ikke er noen hemmelighet å kurere et perfekt kryss-nettleserkompatibelt nettsted som sikrer den estetikken du ønsker deg, er det noen aspekter som kan tas vare på for å forbedre sjansene dine. Her er ti enkle å følge, men effektive tips for koding av et nettsted på tvers av nettlesere.

1 Jo enklere, jo bedre

Jo mer kompleks HTML og CSS blir, jo mer sannsynlig er det at de er utsatt for feil og feil. Prøv å holde layouten elementær på designstadiet, det vil si: en topptekst, noen kolonner og en bunntekst. Hvis designet ditt har flere sidefeltbokser, vil ting vise seg å være hektisk etter hvert som prosessen skrider frem.

Unngå å bruke mange nestede elementer og integrer bare de nødvendige elementene. For å lage en meny, bruk ul og li i stedet for en tabell eller en serie med p-elementer.

2 Valider HTML-, CSS- og RSS-koden din

Ingenting irriterer en designer mer enn å nøye style en nettside, og når tiden er inne for å teste den, dukker det stadig opp en ukjent feil. I slike situasjoner bør en designer holde på nervene og begynne med valideringen av markeringen og stilarkene.

Det er mange gratis så vel som betalte verktøy tilgjengelig på nettet for å se om HTML- og CSS-markeringene dine er lovlige. Ved hjelp av disse verktøyene kan du være trygg på at markeringene er perfekte og nettsidene viser innholdet slik du vil ha det.

Firebug

Firebug er en alt-i-ett debugger og editor. Det lar en utvikler jobbe med HTML-, JavaScript- og CSS-markeringene. Du kan overvåke markeringene i sanntid, markere dem og fjerne dem også.

HTML-validator

Mens du validerer sidekilden, rapporteres feilene og feilene. Og hvis du ikke finner ut hva som er galt, gir verktøyet deg noen forslag.

Validator.w3.org

Du må laste opp filen du vil validere. Validatoren vil vise deg resultatene i forskjellige formater, for eksempel:

  • med anbefalinger
  • som en disposisjon
jigsaw.w3.org

Verktøyet sjekker markeringen din for potensielle feil og feil. Du kan angi flere CSS-profiler for å velge et bestemt medium for stilarket og kontrollere informasjonen i rapporten.

Relaxed.vse.cz

Dette verktøyet bruker ikke W3C-reglene for validering, men er avhengig av de innebygde tilpassede protokollene. Du kan velge fra hvilken HTML-versjon du ønsker å bruke, om du vil se kildekoden og mange andre alternativer.

3 Ikke arbeid med nettleserquirks-modus

Noen nettlesere har en quirks-modus. I dette kjemper nettleseren med sine tidligere versjoner som ofte er fulle av feil. Selv om det gjør det mulig for et eldre nettsted å være kompatibelt med dagens nettlesere, blir det litt av en oppgave hvis du leter etter standardiserte nettsider. Dette er fordi i en quirks-modus, vises nettsidene ikke på en standardisert måte, men på sin egen unike måte.

Som standard bytter en nettleser til quirks-modus hvis du ikke inkluderer dokumenttypeerklæringen, eller DOCTYPE. Derfor bør du alltid huske å legge til en gyldig DOCTYPE på slutten av nettsiden.

4 Øv på tilbakestillingsregler for CSS

Hver nettleser har sine egne standardverdier for visse aspekter som linjehøyde og -bredde. Disse standardverdiene er ofte i konflikt med de tilpassede CSS-reglene og forvrenger det generelle utseendet til nettsidene.

For å unngå dilemmaet med å tilpasse hver CSS-regel du skriver, kan du utføre all denne tilbakestillingen i begynnelsen av CSS-filen. Når du legger til disse reglene i stilarket ditt, kan du være trygg på at du jobber fra samme punkt for alle nettleserne.

5 Bruk Firefox

Vanligvis tester utviklere nettsidene på en enkelt nettleser samtidig. Deretter går de til andre nettlesere og fortsetter å gjøre nødvendige endringer mens de går fra en nettleser til en annen. Dette er en ideell tilnærming i stedet for å validere et nettsted på alle nettlesere i en enkelt kjøring.

For å lage nettstedet ditt er Firefox den mest foretrukne nettleseren, da den gjør det enklere å fikse kompatibilitetsproblemer i forhold til andre nettlesere. Firefox kommer med en mengde tilleggsprogrammer, noe som gjør den ganske utviklervennlig. Hvis nettsidene kommer rene på Firefox, kan du være trygg på at de vil fungere bra i andre nettlesere.

6 Testing

Dagens nettlesere har gjengivelsesegenskaper, så det blir utviklerens ansvar å teste markeringene på hver av dem. Her er en liste over de primære nettleserne:

  • Internet Explorer
  • Firefox
  • Safari
  • Opera (44.0.2510.1218)
  • Microsoft Edge
  • UC nettleser

Som en rask tilnærming kan du gå for en online testtjeneste. Det er mange nettsteder som Browsershots som tar skjermbilder av nettstedet ditt og viser deg hvordan de vil vises på forskjellige operativsystemer og nettlesere. Disse skjermbildene sendes på e-post eller bare gjøres tilgjengelige for nedlasting. Noen av verktøyene er betalt, men de gir deg sikkert beskjed på forhånd om kompatibilitetsproblemene nettsidene kan møte.

CSS-triks bærer ingen frukter hvis du ikke er i stand til å teste dem på de ledende nettleserne. Her er noen nyttige verktøy for å autentisere kryssleserkompatibiliteten til HTML- og CSS-markeringene:

Quirksmode

Dette er en enkel, men effektiv måte å finne feil på flere nettlesere. Quirksmode tolker CSS og viser alle mulige bekymringer.

Nettleserbilder

Browsershots-verktøyet tar skjermbilder av nettsidene og viser deg hvordan nettstedet ditt vil bli vist i forskjellige nettlesere og operativsystemer.

IE-tester

Dette er en pålitelig nettapp som lar deg analysere utseendet til nettsidene på forskjellige versjoner av Internet Explorer. Verktøyet tester malen på forskjellige versjoner av nettlesere og operativsystemer og viser resultatene i et grensesnitt som ligner på Ms Word.

7 Bruk betingede kommentarer

Det er tider når du prøver ditt nivå best, men likevel klarer du ikke å få de ønskede resultatene på visse nettlesere, spesielt internett explorer. Her trenger du noen pålitelige og testede for å være ekte hacks.

Et enkelt alternativ for dette, du kan inkludere bare IE-markeringen med kommentarer. Med dette enkle trikset kan du bruke ekstra HTML eller JavaScript bare for IE.

8 Gjør IE6 kompatibel med PNG-format

PNG er fantastisk. Du kan ha 250+ grader av gjennomsiktighet i et bilde. For å lage netthinneoptimaliserte bilder kan du vise frem designferdighetene dine som å legge til jevne kanter og tilpassede bakgrunner.

Men Internet Explorer er ikke i stand til effektivt å vise gjennomsiktige PNG-er og vise stygge bokser der den skal være gjennomsiktig. Med litt optimalisering kan du få PNG-er til å fungere sømløst i IE6. Dette vil ikke kreve at du gjør store justeringer i CSS.

Du kan bruke IE PNG Fix for det samme.

9 Legg til fallbacks

De fleste nettlesere er kompatible med Flash og JavaScript. Det er mulig å benytte fallbacks i tilfelle nettleseren til en besøkende ikke støtter slike funksjoner.

For eksempel, i tilfelle av Safari på iPhone, blir Flash-navigasjonsmenyene ubrukelige siden nettleseren ikke støtter Flash.

Her er et raskt jukseark for å spare tid på å eksperimentere med forskjellige mediefiler:

  • Bilder: Med hver img-tag legger du til et alt-attributt som beskriver bildet.
  • Flash-filmer: Unngå å bruke Flash for primære funksjoner, for eksempel navigasjon.

10 Velg håndkoding

Dette kan være et diskusjonspunkt blant webdesignerne. Mange webansvarlige bruker i dag automatiserte verktøy for å spare tid. De er nyttige spesielt hvis du ikke er godt kjent med HTML. Men det er viktig å merke seg at slike verktøy ikke samsvarer med fleksibiliteten og elegansen til en designer som dyktig håndkoder HTML-markeringene på tvers av nettlesere.

Koding av HTML-, XHTML- og CSS-markeringene for hånd går langt. Du har total kontroll over hva du utvikler og tilpasser alltid programmet i henhold til behovene til preferanser.

Hvis du synes det er hektisk med håndkoding, kan du bruke en tekstbasert websideredigerer. Det er mange slike verktøy tilgjengelig på internett. Du kan prøve noe av følgende:

  • CKEditor
  • Kaffe kopp
  • Atom sublim tekst
  • Coda

Innpakning

Her er en rask sjekkliste du kan vurdere etter at du har fullført kodingen av et nettsted på tvers av nettlesere:

  • Hver nettleser har et individuelt handlingsforløp. Med HTML-kodingen i CSS-dokumenter bør du merke nettsidene på en slik måte at de kommer rene i hver nettleser.
  • For å holde nettstedet ditt fritt for feil og feil, kvitt deg med de ugyldige XHTML-, HTML- eller CSS-kodene som kan fremheves av verktøyene nevnt ovenfor.
  • Hold en sjekk på nettleserne som bringer inn maksimal trafikk til nettstedet ditt.
  • Utfør en grunnleggende sjekk på nettstedet ditt for å måle effektiviteten på nettlesere.
  • Utforsk CSS-boksmodellen for å vite mer om formatene på tvers av nettlesere.
  • Bruk skyggeplanene og tekststilfargene på en dyktig måte.
  • Husk å etablere innholdsforbedring, arrangement og plass.

Det lønner seg alltid å bruke litt ekstra tid på å få nettsidene til å fungere feilfritt på så mange nettlesere som mulig. Du vil ikke bare sørge for at nettstedet er tilgjengelig for det maksimale publikummet, men du vil også holde de besøkende fornøyde, noe som er viktig.

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon