2016-12-29
Animeerime nuppe ja kontrollime saidi HTML- ja CSS-koodi kehtivust
Tere kallis külastaja!
Täna vaatame loodud veebilehe näitel, kuidas saate kontrollida saidi kehtivust, nimelt HTML-i ja CSS-i keelte kehtestatud spetsifikatsioonidele vastavust.
Lisaks teeme enne kontrollimist veidi CSS-i stiililehte küljeriba nuppude "animatsiooni" osas, kus teeme staatilistest nuppudest interaktiivsed nupud, mis muudavad oma välimust olenevalt olekust – passiivne, aktiivne ja vajutatud.
- Nuppude tegemine mahukaks
- Nuppude interaktiivseks muutmine
- Kas valideerimine on vajalik?
- Kuidas HTML-koodi kinnitada
- Kuidas CSS-koodi kinnitada
- Saidi lähtefailid
Nuppude tegemine mahukaks
Eelmises artiklis kujundasime põhisisuala nii, et see vastaks põhilehe paigutusele. Samas on hetkel külgribal nupud, mis on staatilised ja näevad välja nagu tavaline lame pruun ümarate nurkadega ristkülik.
Allpool on fragment selliste nuppudega külgribast.
Nuppude "animeerimiseks" anname neile esmalt CSS-stiile kasutades veidi helitugevust. Ja me teeme seda lineaarse gradiendi atribuudi abil, mida on juba kasutatud rotaatori, otsingu ja tellimisplokkide kujundamisel.
Lineaarse gradiendi väärtused määratleme järgmiselt:
1. Värvivarjundid määratakse alt üles, alustades nupu põhivärviga võrreldes tumedamast värvist. Et määrata, millist värvi gradiendi alguses kasutada, kasutame graafilise redaktori tööriista, antud juhul Photoshopi.
Selleks, kui kujunduse paigutusdokument on avatud, tuleb valida "Värvivalija", hõljutada kursorit nupu vajaliku ala kohal, määrata põhivärv ja seejärel kasutada tööriistu "Värvivalijad", et valida tumedam värv. sama pruuni tooniga. Meie puhul võtame värvi väärtusega "653939". On selge, kuidas seda teha saab alloleval ekraanipildil.
2. Järgmisena määrake gradiendi peatusasend, kus esialgne tumedam värv läheb põhivärviks. Peatusasend asetatakse ligikaudu keskele. Samal ajal, et värv oleks küllastunud, nihutame peatusasendit veidi ülespoole ja määrame selle väärtuse näiteks 70% kõrgusest.
3. Ja viimane asi, mida teha gradiendi omaduste määramiseks, on määrata heledam värv võrreldes põhivärviga, mis värvib ülaosas olevaid nuppe. Seda tehakse samamoodi nagu gradiendi esialgse värvi määramisel. Sel juhul võetakse selle värvi väärtuseks "b88686".
3. Saadud andmete põhjal lisame nuppude eelnevalt moodustatud CSS-i omadustele lineaarse gradiendi.
sisend: {
kõrgus :30 pikslit;
marginaal-alumine :10 pikslit;
piiri raadius :5px;
taustal :#a76d6d;
teksti joondamine :Keskus;
font-weight :julge;
värvi :#fff;
ujuk :õige;
taustapilt
Võib märkida, et äärmuslike värvide määramisel siin peatusasendeid ei täpsustata, kuna seda pole vaja teha väärtustega 0% ja 100%.
Nüüd värskendame brauserit ja vaatame tulemust.
Nagu näha, on nupud saanud kerge punni. Nüüd saate hakata neid "elustama".
Nuppude interaktiivseks muutmine
Nuppudega täielikuks töötamiseks muudame need interaktiivseks, mis peegeldab visuaalselt nende kolme põhiolekut: passiivne (nupp on algolekus), aktiivne (kursor liigub nupu kohal) ja vajutatud (hiir nuppu vajutatakse ja hoitakse all, kui kursor hõljub).
Ja me teeme seda varju ja piiri omaduste kombinatsiooni abil. Selle tehnika olemus seisneb selles, et muutes varju ja ääriste värvi erinevatest külgedest, saate imiteerida nuppude oleku muutumist.
Kõigepealt teeme seda passiivse oleku jaoks ja proovime seda joonistada nii, et nupp tõuseks pinnast kõrgemale.
Piiride ja varjude värvid valime samamoodi nagu eelmistel juhtudel.
CSS-kood pärast vastavaid täiendusi võtab vormi.
sisend: {
kõrgus :30 pikslit;
marginaal-alumine :10 pikslit;
piiri raadius :5px;
taustal :#a76d6d;
teksti joondamine :Keskus;
font-weight :julge;
värvi :#fff;
ujuk :õige;
taustapilt :lineaarne gradient(üles, #653939, #a76d6d 50%, #b88686);
kasti vari :2px 2px 4px 0px #422a2a;
piiri laius :2px;
ääriste stiil :tahke;
piiri värv :#ddbebe #241616 #241616 #ddbebe;
Siin on märgata, et äärised on esindatud omaduste kombinatsiooniga, mis määravad paksuse (äärise laius väärtusega 2 pikslit), stiil ( border-style ), mille väärtus määrab kindla äärise ja värvid ( border-color ) mõlemal neljal küljel.
Värskendame brauserit ja vaatame, kuidas nupud nüüd välja näevad.
Nagu näete, tunduvad selles olekus nupud olevat tõusnud.
Nüüd proovime anda nuppudele vajutatud oleku välimus. Selleks eemaldage vari ja muutke ääriste värvi. Sel juhul kasutame aktiivsele olekule vastavat spetsiaalset pseudoklassi valijat :hover.
Nuppude aktiivse oleku CSS-kood on järgmisel kujul.
sisend: hõljuma {
kasti vari :pole;
piiri värv :#a76d6d #a76d6d #a76d6d #a76d6d;
Sel juhul muudame uuesti ääriste värvi ja lisame varju, ainult sel juhul on see sisemine ja ilma nihketa. Pseudoklassi valija muutub samuti olekuks :active , mis vastab vajutatud olekule.
Pressitud oleku CSS-kood oleks järgmine.
sisend: aktiivne {
kasti vari :0px 0px 7px 2px #422a2a sisestus;
piiri värv :#777 #fff #fff #777;
Allpool on võrdluseks näidatud nupp "Otsi", kus on selgelt näha, kuidas see olenevalt olekust oma välimust muudab.
Joon.8 Passiivne olek
Siin lõpetasime avalehe küljenduse ja viisime selle kujunduslikule paigutusele vastava välimuse juurde. Ja nüüd peame nagu varem igal etapil kontrollima selle ristvastavust erinevates brauserites. Kuid enne seda kontrollime lehte kinnitamist, kuna koodi olek võib mingil määral mõjutada ka ristjärjepidevust. Seetõttu teeme nüüd selle väga vajaliku toimingu.
Kas valideerimine on vajalik?
Valideerimine on koodi kontrollimine kehtestatud standardite järgi. HTML- ja CSS-koodi õigsust kontrollitakse. On selge, et ühel juhul kontrollitakse HTML-koodi, teisel juhul CSS-koodi.
Tõenäoliselt on paljudel imelik küsida, kas valideerimist on vaja. Kuid kui vaatate Internetti, näete, et on palju neid, kes usuvad, et kehtiv kood on valikuline, et see on lisaajaraiskamine, kuna brauserid töötavad hästi ka igasuguste vigade korral.
Muidugi saavad saidid paljudel juhtudel kehtetu koodiga hästi töötada, kuid sellistel juhtudel ei saa ristvastavust tagada. Programmeerimiskeelte endi jaoks on ju standardid olemas, aga selle jaoks, et brauserid vead samamoodi parandavad, sellist standardit muidugi pole ega saagi olla. Seetõttu võivad erinevad brauserid vigu välja töötada erineval viisil, mis võib viia erinevate lehtede kuvamiseni.
Ja üldiselt jääb arusaamatuks, miks mõned inimesed oma töösse nii figistlikult suhtuvad, lähtudes põhimõttest "ja nii lähebki". Seega, kui keegi usub, et tal ei ole vaja koodi kehtivust kontrollida, siis see on tema õigus ja on ebatõenäoline, et ta saab vastupidises veenduda ja pole vaja.
Ja nüüd liigume edasi koodide kehtivuse otsese kontrollimise juurde, esmalt HTML, seejärel CSS.
Kuidas HTML-koodi kinnitada
Sisuliselt on koodi kinnitamise kontroll iseenesest üsna lihtne, nagu me nüüd näeme. Kuid siin nõuab vigade kõrvaldamine tavaliselt teatud aja. Muidugi, kui kood koosneb mitmest reast, siis siin raskusi tekkida ei saa. Aga kui neid on sadu ja tuhandeid, siis võib-olla peate siin kõvasti tööd tegema, kõik sõltub sellest, kui hästi kood koostati. Seetõttu on parem teha seda sagedamini ühise ristvastavuse kontrolliga.
Siin käsitleme kõige lihtsamat ja levinumat võimalust kehtivuse kontrollimiseks - see on saidi "W3C Consortium" kasutamine, mis brauseri arendajate toel töötab välja veebilehtede koodide spetsifikatsioonid.
HTML-koodi kinnitamiseks järgi lihtsalt linki https://validator.w3.org/ , mis avab lehe, kus on väli valideeritava lehe aadressi sisestamiseks.
ekraanipilt 51
Pärast nupu "Kontrolli" klõpsamist saame kontrolli tulemuse.
Sel juhul on HTML-kood kehtiv, kuid on soovitatav kasutada atribuuti lang koos väärtusega "ru" kuna leht kasutab vene keelt.
Atribuut lang on mõeldud selleks, et panna brauserid kuvama teatud tähemärke, näiteks jutumärke, sõltuvalt kasutatavast keelest õigesti. Seetõttu on meil kasulik see HTML-koodi lisada. Ja me teeme seda html-märgendis, et see atribuut saaks toimida kogu dokumendile.
Kuidas seda lisamist teha, on näidatud järgmises tabelis.
"ru" >
. . .
Ja nüüd, kui teeme teistkordse kontrolli, näeme, et kood on muutunud täiesti kehtivaks ilma kommentaarideta.
Sel viisil kontrollisime Internetti postitatud faili. Kuid kui leht pole veel veebi postitatud, saate selle kehtivust kontrollida muul viisil, kas laadides faili üles sirvimisnupu abil või kasutades vormi HTML-koodi otse kopeerimiseks.
Ekraanitõmmis näitab viimast võimalust, kui veebilehe kood kopeeritakse kontrollimiseks otse vormi.
Pärast kontrollimist saame sarnase tulemuse ning siin kuvatakse ka kontrollitav kood. Kui leitakse vigu, tõstetakse need otsingu lihtsustamiseks esile, mis lihtsustab oluliselt nende kõrvaldamist.
Kuidas CSS-koodi kinnitada
Oleme käsitlenud HTML-koodi valideerimist. CSS-koodi kontrollitakse täpselt samas järjekorras. Ainult sel juhul peate kasutama teist valideerimislehte, mis asub antud juhul aadressil http://jigsaw.w3.org/css-validator/ .
Avame selle ja nagu eelmiselgi korral sisestame kontrollitava lehe aadressi, misjärel vajutame nuppu "Kontrolli".
Selle kontrolli tulemus on näidatud ekraanipildil.
Nagu näete, vastab meie CSS-kood täielikult spetsifikatsioonile ilma vigadeta, mis on hea tulemus.
Selle juhtumi muude valideerimismeetodite järjekord langeb täielikult kokku sarnaste HTML-koodi kontrollidega. Seetõttu me siin end kordama ei hakka ja lõpetame valideerimiskontrollide ülevaatamise.
Pärast seda kontrollime oma lehel ristpilti ja veendume, et see kuvatakse kõigis brauserites samamoodi, see viib saidi avalehe paigutuse lõpule.
Ja me teeme seda kohe pärast uusaastapühi.
Ja kokkuvõtteks võime õnnitleda kõiki saabuva aastavahetuse puhul! Ja soovin uuel aastal tervist, armastust, rõõmu, õitsengut ja loomulikult palju edu oma veebisaidi loomisel, et saaksite Internetis edukalt töötada!
Saidi lähtefailid
Saidi lähtefailid koos selles artiklis tehtud värskendustega saab alla laadida lisatud lehelt lisamaterjalid.
Ühes oma varasemas artiklis rääkisin . Kuid mitte kõik ei tea, et lisaks HTML-i validaator, sööma validaator ja CSS-i jaoks.
Tähendus CSS-i kehtivus sama mis HTML: peaaegu ebaoluline. Sarnane HTML kui kirjutad vigane CSS, siis probleeme ei teki (muidugi kui just jämedaid vigu pole), aga kehtiv kood on alati hea. Selline kood on selge ja struktureeritud, seda on lihtne mõista, mis on samuti oluline, eriti kui seda parandatakse ja eriti teiste inimeste poolt. Samuti CSS-i kehtivus kiirendab töötlemisprotsessi ja sellest tulenevalt ka lehe laadimise kiirust.
Ja lõpuks, pidades silmas üldiselt harvaesinevat kehtivuse järgimist, tekitab kehtiv kood alati austust, mis on oluline, kui teete seda professionaalselt.
To kontrollige CSS-i kehtivust, peate seda kasutama W3 teenus: http://jigsaw.w3.org/css-validator/ .
Ütlen kohe, et erinevalt HTML, tee CSS kehtib palju lihtsam, kuna seal on enamasti ainult jämedad vead, mida on kõige parem vältida.
Lubage mul teha kokkuvõte. Koodi kehtivaks muutmine pole üldse vajalik, kuid soovitan tungivalt seda teha, kuna sellist saiti on otsingumootoritel lihtsam indekseerida ( HTML-i kehtivus), töötavad kiiremini, hõlpsamini redigeeritavad ja pälvivad professionaalide austust.
Viimasel ajal olen saanud kasutajatelt paar küsimust oma teemade kehtivuse ja üldiselt valideerimise kohta. Selles postituses tahan neile vastata.
Mis on kehtivus?
Arvatakse, et koodi kehtivus on mis tahes koodi üks universaalne tunnus.
Tegelikult on kehtivus dokumendi html-koodi vastavus teatud reeglistikule, mis on määratletud doctype'is või HTML5-s.
See tähendab, et kehtivus on suhteline mõiste, kuna reeglid on erinevad ja ka nende nõuded.
Selgemaks muutmiseks toon näite, mille leidsin saidilt css-live.ru:
Elamute ja tuumaelektrijaamade ehitamisel kehtivad erinevad SNiP-d (ehitusnormid ja -eeskirjad), mistõttu ühe reeglistiku järgi kehtiv dokument ei pruugi kehtida teise reeglistiku järgi (tuumaelektrijaam, mis on ehitatud vastavalt reeglistikule. elamu oleks hea!).
Dokutüüp osutab tavaliselt dokumendile, mille suhtes html-i valideerimist kavandatakse, kuid selle võib valida pragmaatilistel põhjustel, et valida brauserite optimaalne režiim.
XHTML5-l ei pruugi doctype üldse olla, kuid see võib olla kehtiv.
Valideerimine - mis see on?
Lihtsamalt öeldes on valideerimine koodi kontrollimise protsess ja selle vastavusse viimine valitud dokumenditüübiga (DTD).
Kuidas kehtivust kontrollitakse?
HTML-koodi kehtivust kontrollib tööriist nimega validaator.
Kõige kuulsam w3c validaator on https://www.w3.org.
W3c validaator teeb mitu koodikontrolli.
Peamised:
- Kontrollige süntaksivigu:
Näide saidilt habrahabr.ru/post/101985:on õige süntaks, kuigi on kehtetu HTML-märgend
Seega on süntaksi kontrollimine hea HTML-koodi kirjutamiseks minimaalselt kasulik. - Märgendi pesastuse kontroll:
HTML-dokumendis tuleb sildid sulgeda nende avamisele vastupidises järjekorras. See kontroll tuvastab sulgemata või valesti suletud sildid. - HTML-i valideerimine vastavalt DTD-le:
Kontrollitakse, kuidas kood vastab määratud DTD-le – Document Type Definition (doctype). See hõlmab siltide nimede, atribuutide ja märgendite manustamist (üht tüüpi sildid teist tüüpi siltide sees). - Võõrelementide kontrollimine:
See leiab kõik, mis on koodis, kuid mitte doctype'is.
Näiteks kohandatud sildid ja atribuudid.
CSS-koodi kehtivuse kontrollimiseks on olemas css-i validaator - http://jigsaw.w3.org/css-validator.
Koodi kehtivus- see on ametliku OB puudumise mehaanilise kontrolli tulemus vastavalt määratud reeglistikule.
Peate mõistma, et valideerimine on tööriist, mitte väärtus omaette.
Kogenud küljendajad teavad enamasti, kus on võimalik HTML-i või CSS-i valideerimisreegleid rikkuda ja kus mitte ning mis seda või teist valideerimisviga ohustab (või ei ohusta).
Näited juhtudest, kui sait ei koosta kehtivat koodi:
- mugavam ja kiirem – kohandatud atribuudid Javascriptile/AJAXile või
- SEO optimeeritud – ARIA märgistus.
Selge on see, et kehtivusel pole mõtet.
Kogenud küljendajad järgivad reeglina järgmisi reegleid:
- Koodis ei tohiks olla jämedaid vigu.
- Alaealisi võib taluda, kuid ainult põhjendatud põhjustel.
Seoses html/CSS-i valideerimise vigadega:
Valideerimisvead (VF-id) võib jagada rühmadesse:
- OV mallifailides:
Neid pole raske leida ja parandada.
Kui mõni väike viga aitab saiti funktsionaalsemaks või kiiremaks muuta, võib need jätta. - OV saidil ühendatud kolmanda osapoole skriptides:
Näiteks Vkontakte'i vidin, Twitteri skript või YouTube'i videofailid.
Neid ei saa kuidagi parandada, kuna need failid ja skriptid asuvad teistel saitidel ja meil pole neile juurdepääsu. - CSS-i reeglid, millest validaator aru ei saa:
Valideerija kontrollib, kas saidi kood ühtib konkreetse HTML-i või CSS-i versiooniga.
Kui kasutasite mallis CSS-i versiooni 3 reegleid ja valideerija kontrollib versiooni 2.1 vastavust, loeb ta kõik CSS3 reeglid vigadeks, kuigi need pole nii. - OV, mis tuleb soovitud tulemuse saavutamiseks tahes-tahtmata saidile jätta. Näiteks:
- noindexi sildid. Need ei kehti, aga on väga vajalikud ja me peame sellega leppima.
- khaki. Mõnes brauseris saidi õige kuva saamiseks peate mõnikord kasutama häkke - koodi, mida mõistab ainult teatud brauser.
- Validaatori vead.
Sageli ei näe ta ühtegi silti (näiteks sulgevat) ja teatab OB-st, kus seda pole.
Selgub, et töötaval saidil on peaaegu alati mingi OV.
Pealegi võib neid olla palju.
Näiteks Google'i, Yandexi ja mail.ru põhilehtedel on mitukümmend viga.
Kuid need ei riku saitide kuvamist brauserites ega sega nende tööd.
Kõik ülalkirjeldatud kehtib minu teemade kohta.
Keerukate teemade hulka kuuluvad:
- WordPressi funktsioonid (nt. the_category()), mis annavad vale koodi.
- Video väljund videomajutussaitidelt, näiteks YouTube'ist, ja YouTube'i koodis on palju OB-sid, mida ei sina ega mina ei saa mõjutada.
- Sotsiaalvõrgustike nupud, mis on ühendatud nende võrkude skriptide abil ja sisaldavad OB-d.
- CSS3 ja HTML5 reeglid peavad vanemate versioonide valideerijate poolt vigadeks.
Samas peavad CSS3 ja HTML5 versioonide valideerijad vanu reegleid vigadeks :). - Mõnikord tuleb Internet Exploreri brauseris või teiste brauserite vanemates versioonides õige kuvamise saavutamiseks kasutada nn häkke – koodi, millest saab aru ainult konkreetne brauser, et kirjutada selle konkreetse brauseri jaoks saidi kuvamise reeglid.
Tänu sellele saad täiesti kehtiva koodi ainult väga lihtsate teemade küljendamisel, st. need, mis sisaldavad minimaalselt funktsionaalsust.
Pärast mõne oma teema paigutuse lõpetamist kontrollin seda alati validaatoriga ja parandan kõik OB-d, mida saab parandada ilma teema funktsionaalsust kaotamata.
See tähendab, et kui on valida töötava funktsionaalsuse ja kehtivuse vahel, valin funktsionaalsuse.
Kui mõtlete välja oma teemad, soovitan teil sama teha.
Minu (ja ka enamiku küljendajate) seisukohalt on suhtumine html/CSS-i valideerimisse kui ülimusse tõesse vale. Kohustuslik on parandada ainult neid OB-sid, mis:
- takistada brauseril lehte õigesti kuvamast (sulgemata ja valesti pesastatud sildid).
- aeglustada lehe laadimist (valesti ühendatud skriptid).
- saab parandada ilma teema funktsionaalsust rikkumata.
Loodan, et vastasin kõigile teie küsimustele valideerimise kohta.
Olen juba maininud, mis on html-koodi kehtivuse osas. Seda tuleks teha vähemalt korra, sest kehtivus nii html kui ka css mõjutab saiti tugevalt, st teie ressursi identset kuvamist erinevates brauserites (üldine artikkel populaarsete ja parimate veebibrauserite kohta, mis loodetavasti aitab teil teha valiku ühe neist).
Lisaks mainisin juba, et vaatamata sellele, et praeguses etapis otsingumootorid ei võta saitide järjestamisel arvesse CSS-i ja HTML-koodi vigu, võib edaspidi kõik muutuda ja võib tekkida olukord, kus kaunilt kujundatud projekt mõeldud inimestele, võib kaotada osa potentsiaalsest vaatajaskonnast, kuna see ei läbinud valideerimist. Noh, see kõik on laulusõnad, siin otsustab igaüks ise, kui oluline kõik on.
Arvan, et olete nüüd minu arvamusega kursis, kuna kirjutan seda artiklit, mis tähendab, et pean seda tähelepanu väärivaks koos näiteks SEO optimeerimise sellise olulise osaga nagu Google'i ja Yandexi indekseerimise linkide ja tekstifragmentide sulgemine või asjatundlik kasutamine.
Olgu, nagu öeldakse, asjasse puutuvam. Esiteks natuke CSS-i kohta. css( Kaskaadstiililehed- Cascading Style Sheets) on stiilikeel, mis määrab HTML-dokumentide kuvamise. See tähendab, et kui HTML kirjeldab lehe sisu, siis CSS vormindab selle sisu ehk teisisõnu annab sellele tervikliku ilme. Muide, saidi kiiruse suurendamiseks on kasulik teemafaile pühkida.
W3C Validator: CSS-koodi kehtivuse kontrollimine
Liigume nüüd edasi dokumendi kehtivuse kontrollimise juurde (meie veebisaidi või WordPressi ajaveebi leheküljed). Nii nagu HTML-koodi kontrollimise puhul, kasutame ühte järgmistest . Läheme CSS-i valideerimisteenuse juurde:
Nagu näete, on CSS-i kinnitamiseks W3C validaatoriga kolm võimalust. Muide, pane tähele, et validaatori lehe allosas on märge, mis viitab vajadusele kontrollida HTML-koodi kehtivust. Ainult mõlemad õiged koodid tagavad kogu dokumendi õigsuse. Kontrollimiseks sisestage URL. Vaatame näiteks minu ajaveebi avalehte:
W3C validaatori CSS-koodi vigade kontrollimise tulemust ei saa nimetada pettumuseks, kuna leiti ainult 2 viga. Loomulikult on need vead erinevad, igal juhul põhjustavad need erinevaid tagajärgi. Vaatame, mida saame nende kõrvaldamiseks teha. Siin on kõik mugav, kuna W3C validaator ei anna mitte ainult linki vale koodi sisaldavale dokumendile, vaid ka rea numbrit, millel see asub. Muide, allpool, pärast hoiatuste ja vigade loendit, kuvatakse õige CSS-koodi variant, mida saate kasutada:
CSS-i valideerimise tulemuste lehel on link dokumendile css.ie, mis asub teemakaustas. See loodi brauseriülese ajaveebi saavutamiseks (sama kuva populaarsetes brauserites). Veelgi enam, see on mõeldud Internet Exploreri mitmesuguste modifikatsioonide jaoks, mis moonutavad saidi välimust, eriti selle vanemate versioonide (IE9 on selles osas palju parem), moonutades mitmesuguseid "jambeid". Projekti edenemiseks on brauseritevaheline ühilduvus väga oluline, kuid kontrollimisel selgus, et antud dokument sisaldab omadusi, mis ei vasta W3C standarditele.
Seega saame read 3 ja 12, mis sisaldavad vigu. Nende parandamiseks eemaldage sõelumisviga html (filter: expression(document.execCommand("BackgroundImageCache", false, true));) ja vara .suum. Nüüd ma ei lasku programmeerimise ja saitide paigutuse keerukustesse, märgin vaid, et omadus väljendus aitab vabaneda IE6-s esinevast tüütust taustapildi virvenduse efektist.
See tähendab, et brauseris, mille kasutamine on tühi, ja järgmistes versioonides seda "tõrget" enam ei täheldata. Pean kohe ütlema, et kasutan seda "ravimit" veel mõnda aega, kuni IE6 potentsiaalsete külastajate arv saavutab miinimumtaseme. Selguse huvides eemaldan selle aga, et näidata, kuidas W3C validaator sellele reageerib.
Atribuut.zoom, mis määrab elemendi skaleerimisteguri, ei ole W3C rahvusvahelise standardi osa ning seda toetavad väga vanad Opera, Safari brauserid, sealhulgas IE8(Versioon 9 on peaaegu täielikult "seaduskuulekas", nii et varsti vabanevad veebihaldurid vajadusest kasutada häkkimisi, st täiendavaid koode, et saavutada maksimaalne brauseriülene ühilduvus). Nüüd vaatame kehtetuid elemente sisaldavat dokumenti ja parandame seda:
See dokument on minu Cloudy teemakaustas, kustutan ülaltoodud üksused, mis ei läbinud valideerimiskontrolli. Lisaks oli kehtivuskontrolli tulemustes lisaks vigadele ka palju nn hoiatusi:
Näiteks püüan ma selgelt näidata, kuidas vabaneda neist kõige tavalisematest, ja selgitada nende tähendusi. Nagu näete, hoiatab W3C validaator teksti ja tausta samade värvide olemasolu eest. Pean ütlema, et see on üldiselt igal juhul ebasoovitav, kuna otsingumootorid võivad seda olukorda pidada teabe varjamiseks, mis on täis tõsiseid sanktsioone.
Muidugi pole see alati nii, kuid seda ohtu ei tasu alahinnata. Niisiis, liigume edasi olukorra parandamise poole. Parim on fail kopeerida stiil.css teie teema HTML-is ja PHP-s, notepad++ redaktor, millest ma rääkisin ja mis muudab reanumbri järgi otsimise lihtsaks:
Nüüd teame, kus need read teie teemafailis asuvad, parandame värvi, muutes veidi tooni. Kuueteistkümnendsüsteemis vastab #ffffff valgele. Muudame seda järgmiselt: viimase f asemel sisestame d, seega saame veidi teistsuguse valge tooni; nüüd ei ole muudatused kasutajatele märgatavad, kuid otsingumootorid näevad erinevust:
Nii saate parandada oma ressursilehtede CSS-koodi kehtetuid osi. Samamoodi leiame ka ülejäänud osad, mis on märgistatud hoiatustega ja mis vajavad parandamist.Mis puudutab hoiatusi seoses liiniga 483 (neid oli muide päris palju, umbes 10). Kontrollides leidsin, et nende põhjus on WP Page Numbers pistikprogramm, mis pakub lehekülgedele.
See ajendas mind selle pistikprogrammi desaktiveerima ja seetõttu asendasin selle lõpuks koodisüstiga, mis oli samm serveri koormuse vähendamise suunas. Niipea kui ma seda tegin, kadusid uuesti kontrollimisel kohe hoiatused koodi kehtivuse rikkumise kohta selle konkreetse plugina poolt. Pärast ülaltoodud žeste kontrollime W3C validaatori abil uuesti CSS-i kehtivust:
Nüüd teate, kuidas W3C validaatori abil kontrollida CSS-dokumendi (veebisaidi või ajaveebi veebilehe) kehtivust. Kokkuvõtteks tahaksin märkida, et igaüks otsustab ise CSS-koodi kehtivuse kontrollimise astme ja sageduse, kõik sõltub asjaoludest, kuid sellegipoolest tuleb minu sügava veendumuse kohaselt aeg-ajalt seda teha. Tellige ajaveebi värskendused, et saada värskeid materjale e-posti teel. Seetõttu lubage mul puhkust võtta, ma loodan, et läheme mõneks ajaks lahku.
Valideerimine viitab CSS-koodi kontrollimisele CSS2.1 või CSS3 spetsifikatsiooniga. Vastavalt sellele nimetatakse õiget koodi, mis ei sisalda vigu, kehtivaks ja seda, mis ei vasta spetsifikatsioonile, kehtetuks. Kõige mugavam on koodi kontrollida saidi kaudu http://jigsaw.w3.org/css-validator/, saate seda teenust kasutades määrata dokumendi aadressi, laadida üles faili või kontrollida trükitud teksti. Teenuse suur pluss on vene ja ukraina keele tugi.
Kontrollige URI-d
Sellel vahekaardil saate määrata Internetis hostitud lehe aadressi. http:// protokolli võib ära jätta, see lisatakse automaatselt (joonis 1.42).
Riis. 1.42. Dokumendi kontrollimine aadressi järgi
Pärast aadressi sisestamist klõpsake nuppu "Kontrolli" ja ilmub üks kahest pealdisest: "Palju õnne! Vigu ei leitud" õnnestumise korral või "Kahjuks leidsime järgmised vead" kehtetu koodi puhul. Veateated või hoiatusteated sisaldavad rea numbrit, valijat ja vea kirjeldust.
Kontrollige üleslaaditud faili
See vahekaart võimaldab laadida HTML- või CSS-faili ja kontrollida selles vigu (joonis 1.43).
Riis. 1.43. Faili kontrollimine selle üleslaadimisel
Teenus tuvastab failitüübi automaatselt ja HTML-dokumendi määramisel eraldab sellest stiili kinnitamiseks.
Kontrollige trükitud teksti
Viimane vahekaart on mõeldud HTML- või CSS-koodi otsesisestamiseks ja kontrollitakse ainult stiili (joonis 1.44).
Riis. 1.44. Sisestatud koodi kontrollimine
See valik tundub olevat kõige mugavam koodiga erinevate katsete tegemiseks või väikeste fragmentide kiireks kontrollimiseks.
CSS-i versiooni valik
CSS3-l on võrreldes eelmise versiooniga palju uusi stiiliomadusi, seega peaks koodi ülevaatus olema versioonispetsiifiline. Vaikimisi määrab teenus CSS2.1, nii et kui soovite oma koodi võrrelda CSS3-ga, peate selle selgesõnaliselt määrama. Selleks tuleb vajutada tekstile "Lisafunktsioonid" ja avanevas plokis "Profiil" loendist valida CSS3
Riis. 1.45. Kontrollitava CSS-i versiooni määramine
Identifikaatorid ja klassid
Aeg-ajalt tõstatatakse vaidlusi identifikaatorite kasutamise otstarbekuse üle paigutuses. Peamine argument on see, et identifikaatorid on mõeldud veebilehe elementidele juurdepääsuks ja nendega manipuleerimiseks skriptide abil ning elementide stiilide muutmiseks tuleks kasutada ainult klasse. Tegelikkuses pole vahet, milliseid stiile kasutatakse, kuid peaksite olema teadlik identifikaatorite ja klasside mõningatest funktsioonidest ning ka lõksudest, mida arendajad võivad oodata.
Alustuseks loetleme nende selektorite iseloomulikud omadused.
Identifikaatorid
Dokumendi koodis on iga identifikaator kordumatu ja see tuleks lisada ainult üks kord.
Identifikaatori nimi on tõstutundlik.
Meetodi getElementById kaudu pääsete elemendile juurde selle ID järgi ja saate muuta elemendi omadusi.
Identifikaatori stiil on klasside suhtes ülimuslik.
Klassid saab koodis kasutada mitu korda.
Klasside nimed on tõstutundlikud.
Klassid saab omavahel kombineerida, lisades ühele märgisele mitu klassi.
Identifikaatorid
Kui soovite mõne elemendi stiili käigupealt muuta või veebilehe töötamise ajal nende sees teksti kuvada, on see identifikaatoritega palju lihtsam. Elemendile pääseb ligi meetodi getElementById kaudu, mille parameetriks on identifikaatori nimi. Näide 1-70 lisab vormi tekstiväljale identifikaatori nimega userName, seejärel kasutab JavaScripti funktsiooni, et kontrollida, kas kasutaja on väljale teksti sisestanud. Kui teksti pole, kuid klõpsate nuppu Esita, kuvatakse sildi sees teade ID-sõnumiga . Kui kõik on õige, saadetakse vormi andmed action atribuudiga määratud aadressile.
Näide 1.70. Vormi andmete valideerimine XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
