Teoriassa web-sivun luominen on helppoa. Tärkeimpiä asioita ovat HTML-koodin kirjoittaminen, sen testaus verkkoselaimella ja sen lataaminen. HTML ja CSS ovat standardeja, mikä tarkoittaa, että tietyllä selaimella hyvin toimiva verkkosivu ei välttämättä toimi puhtaana muilla selaimilla.

Asiat eivät tietenkään ole käytännössä niin yksinkertaisia. Selaimia on useita, ja jokainen selain näyttää HTML- ja CSS-koodit eri tavalla.

Jotta varmistetaan, että verkkosivut toimivat tasaisesti kaikilla selaimilla, web-suunnittelijoiden tulisi harjoitella selaimen välistä koodausta. Tässä viestissä käsittelemme 10 testattua temppua, joita voit noudattaa saadaksesi virheetön ja selainvalmis verkkosivusto.

Lyhyt johdatus CSS:ään

CSS tai Cascading Style Sheets on joukko web-muotoiluohjeita, jotka ohjaavat verkkosivujen ulkoasua. Jotkut CSS:n kanssa yhteensopivista selaimista ovat:

IE
Reuna
Firefox
Kromi
Safari
Ooppera
iOS Safari
Ooppera
Android-selain
Chrome Androidille

Mutta ennen kuin päädyt siihen johtopäätökseen, että se säästää paljon aikaa, sinun tulee ymmärtää, että useimmat selaimet eivät tue täysin kaikkia sen ominaisuuksia.

CSS toimii esittävänä komponenttina, joka luonnehtii verkkosivun komponentteja. Samaan aikaan peräkkäiset tyylisivut ohjaavat eri sivujen suunnittelua samanaikaisesti.

Vaikka ei ole mikään salaisuus luoda täydellinen selainyhteensopiva verkkosivusto, joka varmistaa haluamasi esteettisen ilmeen, on joitakin näkökohtia, jotka voidaan ottaa huomioon parantaaksesi mahdollisuuksiasi. Tässä on kymmenen helppokäyttöistä mutta tehokasta vinkkiä selaimen välisen verkkosivuston koodaamiseen.

1 Mitä yksinkertaisempi, sitä parempi

Mitä monimutkaisempi HTML ja CSS ovat, sitä todennäköisemmin ne ovat alttiita virheille ja virheille. Yritä pitää asettelu elementtinä suunnitteluvaiheessa, joka on: otsikko, jotkin sarakkeet ja alatunniste. Jos suunnittelussasi on useita sivupalkkilaatikoita, asiat muuttuvat hektisiksi prosessin edetessä.

Vältä käyttämästä paljon sisäkkäisiä elementtejä ja integroi vain vaaditut elementit. Käytä valikon luomiseen ul ja li taulukon tai p-elementtien sarjan sijaan.

2 Vahvista HTML-, CSS- ja RSS-koodisi

Mikään ei ärsytä suunnittelijaa enemmän kuin web-sivun huolellinen muotoilu, ja kun on aika testata sitä, tuntematon virhe ilmaantuu jatkuvasti. Tällaisissa tilanteissa suunnittelijan tulee pitää hermonsa ja aloittaa merkintöjen ja tyylisivujen validoinnista.

Verkossa on saatavilla monia ilmaisia ja maksullisia työkaluja, joiden avulla voit tarkistaa, ovatko HTML- ja CSS-merkinnäsi laillisia. Näiden työkalujen avulla voit olla varma, että merkinnät ovat täydellisiä ja verkkosivut näyttävät sisällön haluamallasi tavalla.

Firebug

Firebug on kaikki yhdessä debuggeri ja editori. Sen avulla kehittäjä voi työskennellä HTML-, JavaScript- ja CSS-merkintöjen parissa. Voit seurata merkintöjä reaaliajassa, korostaa niitä ja myös poistaa ne.

Html-tarkistus

Kun vahvistat sivun lähteen, bugeista ja virheistä raportoidaan. Ja jos et saa selville, mikä on vialla, työkalu tarjoaa sinulle joitain ehdotuksia.

Validator.w3.org

Sinun on ladattava tiedosto, jonka haluat vahvistaa. Validaattori näyttää tulokset eri muodoissa, kuten:

suositusten kanssa
ääriviivana

jigsaw.w3.org

Työkalu tarkistaa merkintäsi mahdollisten virheiden ja vikojen varalta. Voit asettaa useita CSS-profiileja, valita tietyn välineen tyylisivulle ja hallita raportin tietoja.

Rento.vse.cz

Tämä työkalu ei käytä W3C-sääntöjä validointiin, vaan luottaa sisäänrakennettuihin mukautettuihin protokolliin. Voit valita käytettävästä HTML-versiosta, haluatko nähdä lähdekoodin ja monia muita vaihtoehtoja.

3 Älä käytä Browser Quirks -tilaa

Joissakin selaimissa on omituinen tila. Tässä selain taistelee aikaisempien versioidensa kanssa, jotka ovat usein täynnä bugeja. Vaikka se mahdollistaa vanhemman verkkosivuston olevan yhteensopiva nykypäivän verkkoselaimien kanssa, siitä tulee melkoinen tehtävä, jos etsit standardoituja verkkosivuja. Tämä johtuu siitä, että quirks-tilassa verkkosivuja ei näytetä standardoidulla tavalla, vaan omalla ainutlaatuisella tavallaan.

Oletusarvoisesti verkkoselain siirtyy omituiseen tilaan, jos et sisällytä asiakirjatyypin ilmoitusta tai DOCTYPE-tunnusta. Siksi sinun tulee aina muistaa lisätä kelvollinen DOCTYPE verkkosivun loppuun.

4 Harjoittele CSS-nollaussääntöjä

Jokaisella selaimella on omat oletusarvonsa tietyille osille, kuten viivan korkeudelle ja leveydelle. Nämä oletusarvot ovat usein ristiriidassa mukautettujen CSS-sääntöjen kanssa ja vääristävät verkkosivujen ulkonäköä.

Voit välttää jokaisen kirjoittamasi CSS-säännön mukauttamisen dilemman suorittamalla tämän nollauksen CSS-tiedoston alussa. Kun olet lisännyt nämä säännöt tyylisivullesi, voit olla varma, että työskentelet samasta kohdasta kaikilla selaimilla.

5 Käytä Firefoxia

Yleensä kehittäjät testaavat verkkosivuja yhdellä selaimella kerralla. Sitten he siirtyvät muihin selaimiin ja jatkavat tarvittavien muutosten tekemistä siirtyessään selaimesta toiseen. Tämä on ihanteellinen lähestymistapa sen sijaan, että verkkosivusto validoitaisiin kaikilla selaimilla yhdellä kertaa.

Firefox on suosituin selain verkkosivuston luomiseen, koska se helpottaa yhteensopivuusongelmien korjaamista muihin selaimiin verrattuna. Firefoxin mukana tulee lukuisia lisäosia, mikä tekee siitä varsin kehittäjäystävällisen. Jos verkkosivut ovat tulossa puhtaiksi Firefoxissa, voit olla varma, että ne toimivat hyvin muilla selaimilla.

6 Testaus

Nykypäivän verkkoselaimissa on renderöintiominaisuuksia, joten on kehittäjän vastuulla testata jokaisen sellaisen merkinnät. Tässä on luettelo tärkeimmistä verkkoselaimista:

Internet Explorer
Firefox
Safari
Opera (44.0.2510.1218)
Microsoft Edge
UC-selain

Nopeana lähestymistapana voit hankkia online-testauspalvelun. On monia verkkosivustoja, kuten Browsershots, jotka ottavat kuvakaappauksia sivustostasi ja näyttävät sinulle, kuinka ne näkyvät eri käyttöjärjestelmissä ja verkkoselaimissa. Nämä kuvakaappaukset lähetetään sähköpostitse tai ne ovat yksinkertaisesti ladattavissa. Osa työkaluista on maksullisia, mutta ne varmasti kertovat sinulle etukäteen yhteensopivuusongelmista, joita verkkosivut saattavat kohdata.

CSS-temput eivät tuota tulosta, jos et pysty testaamaan niitä johtavilla verkkoselaimilla. Tässä on joitain hyödyllisiä työkaluja HTML- ja CSS-merkintöjen selainyhteensopivuuden todentamiseksi:

Quirksmode

Tämä on helppo mutta tehokas tapa etsiä selainten välisiä vikoja. Quirksmode tulkitsee CSS:n ja näyttää kaikki mahdolliset huolenaiheet.

Selainkuvat

Browsershots-työkalu ottaa kuvakaappauksia verkkosivuista ja näyttää, kuinka verkkosivustosi näytetään eri selaimissa ja käyttöjärjestelmissä.

IE testaaja

Tämä on luotettava verkkosovellus, jonka avulla voit analysoida verkkosivujen ulkoasua Internet Explorerin eri versioissa. Työkalu testaa mallia eri selaimissa ja käyttöjärjestelmissä ja näyttää tulokset Ms Wordin kaltaisessa käyttöliittymässä.

7 Käytä ehdollisia kommentteja

Joskus yrität tasosi parhaiten, mutta silti et voi saada haluttuja tuloksia tietyillä selaimilla, etenkään Internet Explorerilla. Täällä tarvitset luotettavia ja testattuja olla todellisia hakkereita.

Helppo vaihtoehto tähän, voit sisällyttää vain IE:n merkinnän kommentteihin. Tämän yksinkertaisen tempun avulla voit käyttää ylimääräistä HTML- tai JavaScript-koodia vain IE:lle.

8 Tee IE6:sta yhteensopiva PNG-muodon kanssa

PNG ovat mahtavia. Kuvan läpinäkyvyys voi olla yli 250 astetta. Luodaksesi verkkokalvolle optimoituja visuaaleja voit esitellä suunnittelutaitojasi, kuten lisäämällä sileitä reunuksia ja mukautettuja taustoja.

Mutta Internet Explorer ei pysty näyttämään tehokkaasti läpinäkyviä PNG-tiedostoja ja näyttämään likaisia laatikoita siellä, missä sen pitäisi olla läpinäkyvää. Pienellä optimoinnilla voit saada PNG:t toimimaan saumattomasti IE6:ssa. Tämä ei vaadi suuria muutoksia CSS:ään.

Voit käyttää IE PNG Fixiä samaan.

9 Lisää varaosia

Useimmat selaimet ovat yhteensopivia Flashin ja JavaScriptin kanssa. Varavaihtoehtoja on mahdollista käyttää, jos vierailijan verkkoselain ei tue tällaisia ominaisuuksia.

Esimerkiksi iPhonen Safarin tapauksessa Flash-navigointivalikot ovat hyödyttömiä, koska selain ei tue Flashia.

Tässä on nopea huijauslehti, joka säästää aikaa erilaisten mediatiedostojen kokeilussa:

Kuvat: Lisää jokaiseen img-tunnisteeseen alt-attribuutti, joka kuvaa kuvaa.
Flash-elokuvat: Vältä Flashin käyttöä ensisijaisiin toimintoihin, kuten navigointiin.

10 Valitse käsikoodaus

Tämä voi olla keskustelunaihe web-suunnittelijoiden kesken. Monet verkkovastaavat käyttävät nykyään automaattisia työkaluja säästääkseen aikaa. Ne ovat käteviä varsinkin, jos et ole perehtynyt HTML:ään. Mutta on tärkeää huomata, että tällaiset työkalut eivät vastaa suunnittelijan joustavuutta ja tyylikkyyttä, joka koodaa taitavasti käsin selaimen väliset HTML-merkinnät.

HTML-, XHTML- ja CSS-merkintöjen koodaaminen käsin onnistuu pitkälle. Hallitset täysin kehittämääsi ja muokkaat ohjelmaa aina mieltymystesi mukaan.

Jos käsin koodaaminen on hektistä, voit käyttää tekstipohjaista Web-sivueditoria. Internetissä on monia tällaisia työkaluja. Voit kokeilla mitä tahansa seuraavista:

CKE-editori
Kahvikuppi
Atom Sublime -teksti
Coda

Käärimistä

Tässä on nopea tarkistuslista, jota voit harkita sen jälkeen, kun olet koodannut selaimen välisen verkkosivuston:

Jokaisella selaimella on yksilöllinen toimintatapa. CSS-dokumenttien HTML-koodauksella sinun tulee merkitä verkkosivut siten, että ne tulevat puhtaiksi jokaisessa selaimessa.
Pitääksesi sivustosi puhtaana vioista ja virheistä poistamalla virheelliset XHTML-, HTML- tai CSS-koodit, jotka voidaan korostaa yllä mainituilla työkaluilla.
Tarkista selaimet, jotka tuovat eniten liikennettä verkkosivustollesi.
Suorita sivustosi perustarkastus mitataksesi tehokkuutta selaimissa.
Tutustu CSS-laatikkomalliin saadaksesi lisätietoja useista selainmuodoista.
Käytä varjostussuunnitelmia ja tekstityylisävyjä taitavasti.
Muista luoda sisällön parantaminen, järjestely ja tila.

Ylimääräisen ajan käyttäminen verkkosivujen moitteettoman toiminnan saamiseen mahdollisimman monella selaimella kannattaa aina. Et vain varmista, että verkkosivusto on saavutettavissa suurimmalle yleisölle, vaan pidät myös vierailijat tyytyväisinä, mikä on tärkeää.