Teoreetiliselt on veebilehe loomine lihtne. Peamised aspektid hõlmavad HTML-koodi kirjutamist, veebibrauseris testimist ja üleslaadimist. HTML ja CSS on standardid, mis tähendab, et konkreetses brauseris hästi töötav veebileht ei pruugi teistes brauserites olla puhas.

Muidugi ei lähe asjad praktiliselt nii lihtsaks. Brausereid on palju, iga brauser kuvab HTML-i ja CSS-i erineval viisil.

Veebilehtede ühtse toimimise tagamiseks kõigis veebibrauserites peaksid veebidisainerid harjutama brauseritevahelist kodeerimist. Selles postituses käsitleme 10 proovitud ja testitud nippi, mida saate veavaba ja brauseriteülese veebisaidi saavutamiseks järgida.

Lühike sissejuhatus CSS-i

CSS ehk Cascading Style Sheets on veebivormingu juhiste komplekt, mis juhib veebilehtede välimust. Mõned CSS-iga ühilduvad brauserid on järgmised:

IE
Edge
Firefox
Chrome
Safari
Ooper
iOS Safari
Ooper
Androidi brauser
Chrome Androidile

Kuid enne kui jõuate järeldusele, et see säästab teie palju aega, peaksite mõistma, et enamik veebibrausereid ei toeta täielikult kõiki selle funktsioone.

CSS toimib kujutava komponendina, mis iseloomustab veebilehe komponente. Samal ajal juhivad kaskaadlaadilehed erinevate lehtede kujundust korraga.

Kuigi pole saladust luua täiuslik, mitme brauseriga ühilduv veebisait, mis tagab soovitud esteetika, on mõned aspektid, mille eest saate oma võimaluste parandamiseks hoolitseda. Siin on kümme hõlpsasti järgitavat, kuid tõhusat näpunäidet brauseriülese veebisaidi kodeerimiseks.

1 Mida lihtsam, seda parem

Mida keerulisemaks HTML ja CSS muutuvad, seda tõenäolisem on nendes vigu ja vigu. Proovige kujundamisetapis jätta paigutus elementaarseks, st päis, mõned veerud ja jalus. Kui teie disainil on mitu külgribakasti, muutuvad asjad protsessi edenedes kirglikuks.

Vältige paljude pesastatud elementide kasutamist ja integreerige ainult vajalikud elemendid. Menüü koostamiseks kasutage tabeli või p-elementide jada asemel ul ja li.

2 Kinnitage oma HTML-, CSS- ja RSS-kood

Miski ei häiri disainerit rohkem kui veebilehe hoolikas kujundamine ja kui saabub aeg seda testida, ilmub pidevalt tundmatu viga. Sellistes olukordades peaks disainer hoidma oma närve ja alustama märgistuse ja stiililehtede kinnitamisega.

Veebis on saadaval palju tasuta ja tasulisi tööriistu, et näha, kas teie HTML- ja CSS-märgistused on õiged. Nende tööriistade abil võite olla kindel, et märgistus on täiuslik ja veebilehtedel kuvatakse sisu nii, nagu soovite.

Firebug

Firebug on kõik ühes silur ja redaktor. See võimaldab arendajal töötada HTML-i, JavaScripti ja CSS-i märgistuste kallal. Saate märgistusi reaalajas jälgida, neid esile tõsta ja ka eemaldada.

HTML-i valideerija

Lehe allika kinnitamise ajal teatatakse vigadest ja vigadest. Ja kui te ei saa teada, mis viga on, annab tööriist teile mõned soovitused.

Validator.w3.org

Peate üles laadima faili, mida soovite kinnitada. Validaator näitab teile tulemusi erinevates vormingutes, näiteks:

soovitustega
kontuurina

pusle.w3.org

Tööriist kontrollib teie märgistusel võimalikke vigu ja vigu. Saate määrata mitu CSS-profiili, et valida stiililehe jaoks kindel meedium ja juhtida aruande teavet.

Lõdvestunud.vse.cz

See tööriist ei kasuta valideerimiseks W3C reegleid, vaid tugineb sisseehitatud kohandatud protokollidele. Saate valida kasutatava HTML-i versiooni hulgast, kas soovite näha lähtekoodi ja palju muid valikuid.

3 Ärge töötage brauseri Quirks režiimiga

Mõnel veebibrauseril on veiderrežiim. Selles võitleb brauser oma varasemate versioonidega, mis on sageli vigu täis. Kuigi see võimaldab vanemal veebisaidil ühilduda tänapäevaste veebibrauseritega, muutub see standardiseeritud veebilehtede otsimisel üsna keeruliseks. Seda seetõttu, et veidruste režiimis ei kuvata veebilehti standardiseeritud viisil, vaid oma ainulaadsel viisil.

Vaikimisi lülitub veebibrauser veidruste režiimile, kui te ei lisa dokumenditüübi deklaratsiooni ega DOCTYPE-i. Seetõttu peaksite alati meeles pidama, et veebilehe lõppu tuleb lisada kehtiv DOCTYPE.

4 Harjutage CSS-i lähtestamise reegleid

Igal veebibrauseril on teatud aspektide (nt rea kõrgus ja laius) jaoks oma vaikeväärtused. Need vaikeväärtused on sageli vastuolus kohandatud CSS-reeglitega ja moonutavad veebilehtede üldist välimust.

Iga kirjutatud CSS-reegli kohandamise dilemma vältimiseks saate kogu selle lähtestamise teha oma CSS-faili alguses. Kui olete need reeglid oma stiililehele lisanud, võite olla kindel, et töötate kõigi brauserite puhul samast punktist.

5 Kasutage Firefoxi

Üldiselt testivad arendajad veebilehti korraga ühes brauseris. Seejärel lähevad nad teistesse brauseritesse ja jätkavad ühest brauserist teise üleminekul vajalike muudatuste tegemist. See on ideaalne lähenemisviis selle asemel, et kinnitada veebisaiti kõigis brauserites ühe käivitamisega.

Veebisaidi loomiseks on Firefoxi eelistatuim brauser, kuna see hõlbustab ühilduvusprobleemide lahendamist teiste brauseritega võrreldes. Firefoxil on palju lisandmooduleid, mis muudab selle üsna arendajasõbralikuks. Kui veebilehed muutuvad Firefoxis puhtaks, võite olla kindel, et need toimivad hästi ka teistes brauserites.

6 Testimine

Tänapäeva veebibrauseritel on renderdamise veidrusi, nii et arendaja ülesandeks on testida märgistusi kõigi nende puhul. Siin on peamiste veebibrauserite loend:

Internet Explorer
Firefox
Safari
Opera (44.0.2510.1218)
Microsoft Edge
UC brauser

Kiire lähenemisviisina võite kasutada veebipõhist testimisteenust. On palju veebisaite, näiteks Browsershots, mis teevad teie saidist ekraanipilte ja näitavad, kuidas need kuvatakse erinevates operatsioonisüsteemides ja veebibrauserites. Need ekraanipildid saadetakse meiliga või tehakse lihtsalt allalaadimiseks kättesaadavaks. Mõned tööriistad on tasulised, kuid need annavad teile kindlasti eelnevalt teada ühilduvusprobleemidest, millega veebilehed võivad kokku puutuda.

CSS-i trikid ei kanna vilja, kui te ei saa neid juhtivates veebibrauserites testida. Siin on mõned kasulikud tööriistad HTML-i ja CSS-i märgiste brauseriülese ühilduvuse autentimiseks.

Quirksmode

See on lihtne, kuid tõhus viis brauseriüleste tõrgete jahtimiseks. Quirksmode tõlgendab CSS-i ja kuvab kõik võimalikud probleemid.

Brauseripildid

Tööriist Browsershots teeb veebilehtedest ekraanipilte ja näitab, kuidas teie veebisaiti erinevates veebibrauserites ja operatsioonisüsteemides kuvatakse.

IE tester

See on usaldusväärne veebirakendus, mis võimaldab analüüsida veebilehtede välimust Internet Exploreri erinevates versioonides. Tööriist testib malli erinevatel brauserite ja operatsioonisüsteemide versioonidel ning kuvab tulemused Ms Wordiga sarnases liideses.

7 Kasutage tingimuslikke kommentaare

Mõnikord proovite oma taset kõige paremini, kuid siiski ei saa te soovitud tulemusi teatud brauserites, eriti Internet Exploreris. Siin on vaja usaldusväärseid ja testitud häkkereid.

Selle jaoks on lihtne alternatiiv, võite lisada ainult IE märgistuse koos kommentaaridega. Selle lihtsa nipi abil saate kasutada täiendavat HTML-i või JavaScripti ainult IE jaoks.

8 Muutke IE6 PNG-vorminguga ühilduvaks

PNG on imeline. Pildi läbipaistvus võib olla üle 250 kraadi. Võrkkesta jaoks optimeeritud visuaalide loomiseks saate näidata oma disainioskusi, näiteks lisada sujuvaid ääriseid ja kohandatud tausta.

Kuid Internet Explorer ei suuda tõhusalt kuvada läbipaistvaid PNG-sid ega kuvada rikkumisi, kus see peaks olema läbipaistev. Väikese optimeerimisega saate PNG-d IE6-s sujuvalt tööle panna. See ei nõua teilt CSS-is suuri muudatusi.

Selleks saate kasutada IE PNG Fixi.

9 Lisa varuvariante

Enamik veebibrausereid ühildub Flashi ja JavaScriptiga. Kui külastaja veebibrauser selliseid funktsioone ei toeta, on võimalik kasutada varuvõimalusi.

Näiteks iPhone’i Safari puhul on Flashi navigeerimismenüüd kasutud, kuna brauser ei toeta Flashi.

Siin on kiire petuleht, et säästa aega erinevate meediumifailidega katsetamisel:

Pildid: lisage igale img-sildile atribuut alt, mis kirjeldab pilti.
Flash-filmid: vältige Flashi kasutamist põhifunktsioonide (nt navigeerimise) jaoks.

10 Valige käsitsi kodeerimine

See võib olla veebidisainerite arutelukoht. Paljud veebihaldurid kasutavad tänapäeval aja säästmiseks automatiseeritud tööriistu. Need on kasulikud, eriti kui te pole HTML-iga hästi kursis. Kuid on oluline märkida, et sellised tööriistad ei sobi kokku disaineri paindlikkuse ja elegantsiga, kes oskuslikult käsitsi kodeerib brauseriüleseid HTML-i märgistusi.

HTML-i, XHTML-i ja CSS-i märgiste käsitsi kodeerimine läheb kaugele. Teil on täielik kontroll selle üle, mida arendate, ja kohandate programmi alati vastavalt eelistuste vajadustele.

Kui leiate, et käsitsi kodeerimine on kirglik, võite kasutada tekstipõhist veebilehe redaktorit. Internetis on palju selliseid tööriistu. Võite proovida mõnda järgmistest:

CKE-redaktor
Kohvitass
Atom ülev tekst
Coda

Pakkimine

Siin on kiire kontroll-loend, mida saate kaaluda pärast brauseriülese veebisaidi kodeerimist:

Igal veebibrauseril on individuaalne tegevussuund. CSS-dokumentides oleva HTML-koodiga peaksite veebilehed märkima nii, et need ilmuksid igas brauseris puhtana.
Et hoida oma saiti vigade ja vigadeta, eemaldage kehtetud XHTML-, HTML- või CSS-koodid, mida saab ülalmainitud tööriistadega esile tõsta.
Kontrollige brausereid, mis toovad teie veebisaidile maksimaalse liikluse.
Tehke oma saidil põhjalik kontroll, et mõõta tõhusust brauserites.
Avastage CSS-kasti mudelit, et saada rohkem teavet brauseriüleste vormingute kohta.
Kasutage oskuslikult varjutusplaane ja tekstistiili toone.
Pidage meeles sisu täiustamist, paigutust ja ruumi.

Veebilehtede võimalikult paljudes brauserites laitmatuks töötamiseks kulutatud lisaaega tasub end alati ära. Te mitte ainult ei taga seda, et veebisait on ligipääsetav maksimaalsele vaatajaskonnale, vaid hoiate ka külastajad õnnelikuna, mis on oluline.