2016-12-29
Mēs animējam pogas un pārbaudām vietnes HTML un CSS koda derīgumu
Sveiks dārgais apmeklētāj!
Šodien mēs, izmantojot izveidotās tīmekļa lapas piemēru, apsvērsim, kā pārbaudīt vietnes derīgumu, proti, vai tā atbilst noteiktajām HTML un CSS valodu specifikācijām.
Turklāt pirms pārbaudes veiksim nedaudz CSS stila lapas pārskatīšanu daļā, kas saistīta ar sānjoslas pogu "animāciju", kur statiskās pogas padarīsim interaktīvas, mainot to izskatu atkarībā no to stāvokļa – pasīvas, aktīvas un nospiestas.
- Padarīt pogas trīsdimensiju
- Interaktīvu pogu padarīšana
- Vai jums ir nepieciešama apstiprināšana
- Kā pārbaudīt HTML kodu
- Kā pārbaudīt CSS kodu
- Vietnes avota faili
Padarīt pogas trīsdimensiju
Iepriekšējā rakstā galvenā satura apgabala stilu veidojām tā, lai tas atbilstu sākumlapas izkārtojumam. Tajā pašā laikā sānjoslā šobrīd ir pogas, kas ir statiskas un izskatās kā parasts plakans brūns taisnstūris ar noapaļotiem stūriem.
Tālāk ir redzams sānjoslas fragments ar šīm pogām.
Lai pogas "animētu", vispirms piešķirsim tām nedaudz skaļuma ar CSS stilu palīdzību. Un mēs to darīsim, izmantojot lineārā gradienta īpašību, kas iepriekš tika izmantota rotatora, meklēšanas un abonēšanas bloku projektēšanā.
Lineārā gradienta vērtības ir definētas šādi:
1. Mēs iestatīsim krāsu toņus no apakšas uz augšu, sākot ar tumšāku krāsu nekā pogas galvenā krāsa. Lai noteiktu, kuru krāsu izmantot gradienta sākumā, mēs izmantojam grafiskā redaktora rīku, šajā gadījumā Photoshop.
Lai to izdarītu, ar atvērtu dizaina izkārtojuma dokumentu atlasiet "Krāsu atlasītājs", pārvietojiet kursoru virs nepieciešamā pogas apgabala, definējiet galveno krāsu un pēc tam izmantojiet "Krāsu atlasītāja" rīkus, lai atlasītu tumšāku krāsu tāds pats brūns tonis. Mūsu gadījumā ņemsim krāsu ar vērtību "653939". Kā to var izdarīt, ir skaidri parādīts zemāk esošajā ekrānuzņēmumā.
2. Pēc tam definējiet gradienta pieturas pozīciju, kurā sākotnējā, tumšākā krāsa pāriet uz galveno. Novietojiet pieturas pozīciju aptuveni vidū. Tajā pašā laikā, lai iegūtu piesātinātu krāsu, mēs nedaudz pacelsim pieturas pozīciju un definēsim tās vērtību, piemēram, 70% no augstuma.
3. Pēdējā lieta, kas jādara, lai gradientam piešķirtu rekvizītus, ir definēt gaišāku krāsu nekā pamatkrāsa, kas krāsos pogas augšpusē. Tas tiek darīts tāpat kā gradienta sākotnējās krāsas noteikšanai. Šajā gadījumā mēs ņemsim šīs krāsas vērtību kā "b88686".
3. Pamatojoties uz saņemtajiem datiem, pievienojiet lineāro gradientu iepriekš ģenerētajām pogu CSS īpašībām.
ievade: {
augstums : 30 pikseļi;
piemale-apakšā : 10 pikseļi;
robeža-rādiuss : 5 pikseļi;
fons : # a76d6d;
teksta līdzināšana : centrs;
fonta svars : treknrakstā;
krāsa : #fff;
peldēt : taisnība;
fona attēls
Var atzīmēt, ka, nosakot galējās krāsas, pieturas pozīcijas šeit netiek norādītas, jo pie vērtībām 0% un 100% tas nav nepieciešams.
Tagad atsvaidzināsim pārlūkprogrammu un redzēsim rezultātu.
Kā redzat, pogas ir ieguvušas nelielu izliekumu. Tagad jūs varat sākt tos "atdzīvināt".
Interaktīvu pogu padarīšana
Lai pilnvērtīgi strādātu ar pogām, tās padarīsim interaktīvas, kas vizuāli atspoguļos to trīs galvenos stāvokļus: pasīvo (poga atrodas sākotnējā stāvoklī), aktīvu (kursors virzās virs pogas) un nospiestu (kad kursors atrodas, peles poga ir nospiesta un turēta).
Un mēs to darīsim, izmantojot ēnu un apmales īpašību kombināciju. Šīs tehnikas būtība ir tāda, ka, mainot ēnas krāsu un apmales no dažādām pusēm, var panākt pogu stāvokļa izmaiņu imitāciju.
Vispirms darīsim to pasīvajam stāvoklim un mēģināsim to attēlot tā, lai pogas paceltos virs virsmas.
Apmaļu un ēnu krāsas izvēlēsimies tāpat kā iepriekšējos gadījumos.
CSS kods pēc atbilstošajiem papildinājumiem iegūs formu.
ievade: {
augstums : 30 pikseļi;
piemale-apakšā : 10 pikseļi;
robeža-rādiuss : 5 pikseļi;
fons : # a76d6d;
teksta līdzināšana : centrs;
fonta svars : treknrakstā;
krāsa : #fff;
peldēt : taisnība;
fona attēls : lineārs gradients (uz augšu, # 653939, # a76d6d 50%, # b88686);
kaste-ēna : 2px 2px 4px 0px # 422a2a;
apmales platums : 2 pikseļi;
apmales stilā : ciets;
apmales krāsa : #ddbebe # 241616 # 241616 #ddbebe;
Šeit var atzīmēt, ka apmales attēlo īpašību kombinācija, kas nosaka biezumu (apmales platums ar vērtību 2 pikseļi), stils (border-style) ar vērtību, kas norāda viengabalainu apmali un krāsas (apmales krāsa) katrā no četrām pusēm.
Atjaunināsim pārlūkprogrammu un redzēsim, kā tagad izskatīsies pogas.
Kā redzat, šajā stāvoklī pogas, šķiet, ir paceltas.
Tagad mēģināsim padarīt pogas izskatīties kā nospiests stāvoklis. Lai to izdarītu, mēs noņemsim ēnu un mainīsim apmaļu krāsu. Šajā gadījumā mēs izmantosim īpašu atlasītāju: hover pseidoklase, kas atbilst aktīvajam stāvoklim.
CSS pogu aktīvajam stāvoklim izskatīsies šādi.
ievade: novietojiet kursoru {
kaste-ēna : nav;
apmales krāsa : # a76d6d # a76d6d # a76d6d # a76d6d;
Šajā gadījumā mēs atkal mainīsim apmaļu krāsu un pievienosim ēnu, tikai šajā gadījumā tā būs iekšēja un bez nobīdes. Pseidoklases atlasītājs arī mainīsies uz: aktīvs, kas atbilst nospiestajam stāvoklim.
Nospiestā stāvokļa CSS kods būs šāds.
ievade: aktīvs {
kaste-ēna : 0px 0px 7px 2px # 422a2a ielaidums;
apmales krāsa : # 777 #fff #fff # 777;
Salīdzinājumam zemāk ir parādīta poga "Meklēt", kur var skaidri redzēt, kā tā maina savu izskatu atkarībā no stāvokļa.
8. att. Pasīvais stāvoklis
Šeit mēs pabeidzām galvenās lapas izkārtojumu un izveidojām to tādā formā, kas atbilst dizaina izkārtojumam. Un tagad mums, tāpat kā iepriekš katrā posmā, ir jāpārbauda tā savstarpēja saderība dažādās pārlūkprogrammās. Bet pirms tam pārbaudīsim lapu, vai tā ir apstiprināta, jo koda stāvoklis zināmā mērā var ietekmēt savstarpējo konsekvenci. Tāpēc tagad mēs veiksim šo ļoti nepieciešamo operāciju.
Vai jums ir nepieciešama apstiprināšana
Validācija ir koda pārbaude saskaņā ar noteiktajiem standartiem. Atšķiriet HTML un CSS koda pareizības pārbaudi. Tajā pašā laikā ir skaidrs, ka vienā gadījumā tiek pārbaudīts HTML kods, otrā - CSS kods.
Iespējams, daudziem šķitīs dīvains jautājums par to, vai ir nepieciešama apstiprināšana. Bet, ja paskatās internetā, jūs varat redzēt, ka daudzi uzskata, ka derīgs kods nav obligāts, ka tā ir laika izšķiešana, jo pārlūkprogrammas darbojas labi pat visu veidu kļūdu klātbūtnē.
Protams, daudzos gadījumos vietnes var labi darboties ar nederīgu kodu, taču šādos gadījumos nevar garantēt savstarpēju konsekvenci. Galu galā pašām programmēšanas valodām ir standarti, bet tam, ka pārlūkprogrammas kļūdas labo vienādi, šāds standarts, protams, neeksistē un nevar būt. Tāpēc dažādas pārlūkprogrammas var dažādos veidos apstrādāt kļūdas, kas var izraisīt dažādu lapu rādīšanu.
Un vispār nav skaidrs, kāpēc daļai cilvēku veidojas tik tēlaina attieksme pret savu darbu, pēc principa "tā darīs". Tāpēc, ja kāds uzskata, ka viņam nav jāpārbauda koda derīgums, tad tās ir viņa tiesības, un diez vai viņu var pārliecināt par pretējo, un nav vajadzības.
Tagad pāriesim uz tiešu kodu derīguma pārbaudi, vispirms HTML, pēc tam CSS.
Kā pārbaudīt HTML kodu
Būtībā pati koda validācijas pārbaude ir diezgan vienkārša, kā tagad redzams. Taču kļūdu novēršana parasti aizņem noteiktu laiku. Protams, ja kods sastāv no vairākām rindām, tad šeit nevar rasties grūtības. Bet, ja tādu ir simtiem un tūkstošiem, tad var nākties smagi strādāt, viss ir atkarīgs no tā, cik labi kods ir sastādīts. Tāpēc labāk to darīt biežāk, veicot kopīgu savstarpējās konsekvences pārbaudi.
Šeit mēs apskatīsim vienkāršāko un visizplatītāko derīguma pārbaudes variantu - tas ir vietnes "W3C Consortium" izmantošana, kas ar pārlūkprogrammas izstrādātāju atbalstu izstrādā tīmekļa lapu kodu specifikācijas.
Lai pārbaudītu HTML kodu, vienkārši sekojiet saitei https://validator.w3.org/, kur tiks atvērta lapa ar lauku, kurā jāievada pārbaudāmās lapas adrese.
ekrānuzņēmums 51
Pēc pogas "Pārbaudīt" nospiešanas saņemsim pārbaudes rezultātu.
Šajā gadījumā HTML kods ir derīgs, taču ir ieteikums ar vērtību izmantot atribūtu lang "ru", jo lapa izmanto krievu valodu.
Atribūts lang ir paredzēts pārlūkprogrammām, lai atkarībā no izmantotās valodas pareizi parādītu noteiktas rakstzīmes, piemēram, pēdiņas. Tāpēc mums nebūs lieki to iekļaut HTML kodā. Un mēs to darīsim html tagā, lai šis atribūts varētu ietekmēt visu dokumentu.
Kā izveidot šo papildinājumu, ir parādīts nākamajā tabulā.
"ru" >
. . .
Un tagad, veicot otro pārbaudi, mēs varam redzēt, ka kods ir kļuvis pilnīgi derīgs bez komentāriem.
Tādā veidā mēs pārbaudījām internetā ievietotu failu. Bet, ja lapa vēl nav publicēta tīmeklī, varat pārbaudīt tās derīgumu citos veidos, piemēram, augšupielādējiet failu, izmantojot pārlūkošanas pogu, vai izmantojiet veidlapu, lai tieši kopētu HTML kodu.
Ekrānuzņēmumā ir redzama pēdējā opcija, kad tīmekļa lapas kods tiek iekopēts tieši veidlapā apstiprināšanai.
Pēc pārbaudes veikšanas mēs iegūstam līdzīgu rezultātu, un šeit tiks parādīts arī pārbaudītais kods. Gadījumā, ja tiek atrastas kļūdas, tās tiks izceltas, lai vienkāršotu meklēšanu, kas ievērojami vienkāršo darbu, lai tās novērstu.
Kā pārbaudīt CSS kodu
Mēs esam apskatījuši HTML validācijas pārbaudi. CSS koda validācija notiek tieši tādā pašā secībā. Tikai šajā gadījumā jums ir jāizmanto cita validatora lapa, kas šādā gadījumā atrodas vietnē http://jigsaw.w3.org/css-validator/.
Atveram to un tāpat kā iepriekšējā reizē ievadām pārbaudāmās lapas adresi, pēc kā nospiežam pogu "Pārbaudīt".
Šīs pārbaudes rezultāts ir parādīts ekrānuzņēmumā.
Kā redzat, mūsu CSS kods pilnībā atbilst specifikācijai bez kļūdām, kas ir labs rezultāts.
Citu verifikācijas metožu secība šajā gadījumā pilnībā sakrīt ar līdzīgām HTML koda pārbaudēm. Tāpēc mēs šeit neatkārtosimies, un šeit mēs beigsim validācijas pārbaužu izskatīšanu.
Pēc tam mēs pārbaudīsim mūsu lapas savstarpējo atbilstību un pārliecināsimies, ka tā tiek rādīta vienādi visās pārlūkprogrammās, tad mēs pabeigsim vietnes galvenās lapas izkārtojumu.
Un mēs ar to nodarbosimies tūlīt pēc Jaungada brīvdienām.
Un nobeigumā var novēlēt visiem laimīgu Jauno gadu! Un novēlu jums veselību, mīlestību, prieku, labklājību un, protams, lielus panākumus savas mājas lapas izveidē, lai Jaunajā gadā varētu veiksmīgi strādāt internetā!
Vietnes avota faili
Vietnes avota failus ar šajā rakstā veiktajiem atjauninājumiem var lejupielādēt no pievienotā papildu materiāli.
Vienā no saviem iepriekšējiem rakstiem es runāju par. Tomēr ne visi to zina HTML pārbaudītājs, tur ir validators arī CSS.
Nozīme CSS derīgums tāds pats kā HTML: gandrīz nav nozīmes. Līdzīgi ar HTML ja tu raksti nederīgs CSS, tad problēmu nebūs (ja vien, protams, nav rupju kļūdu), tomēr derīgs kods vienmēr ir labs. Šāds kods ir skaidrs un strukturēts, tas ir viegli saprotams, kas arī ir svarīgi, it īpaši labojot, un jo īpaši citiem cilvēkiem. Arī CSS derīgums paātrina apstrādes procesu un līdz ar to arī lapu ielādes ātrumu.
Un, visbeidzot, ņemot vērā parasti reti sastopamo derīguma ievērošanu, derīgs kods vienmēr rada cieņu, kas ir svarīgi, ja to darāt profesionāli.
Uz pārbaudiet CSS derīgumu, jums tas ir jāizmanto W3-pakalpojums: http://jigsaw.w3.org/css-validator/.
Es tev uzreiz pateikšu, ka atšķirībā HTML, dari CSS derīgs daudz vienkāršāk, jo pārsvarā ir tikai kļūdas, izņemot no kurām vislabāk izvairīties.
Ļaujiet man apkopot. Nav nepieciešams kods padarīt derīgu, taču es ļoti iesaku to darīt, jo meklētājprogrammas šādu vietni būs vieglāk indeksēt ( HTML derīgums), ātrāk strādāt, vieglāk rediģēt un profesionāļu cieņu.
Pēdējā laikā no lietotājiem esmu saņēmis vairākus jautājumus par manu motīvu derīgumu un validāciju kopumā. Šajā ierakstā es vēlos uz tiem atbildēt.
Kas ir derīgums?
Tiek uzskatīts, ka koda derīgums ir viena, universāla jebkura koda īpašība.
Faktiski derīgums ir dokumenta html koda atbilstība noteiktam noteikumu kopumam, kas norādīts doctype vai netieši norādīts HTML5.
Tas ir, derīgums ir relatīvs jēdziens, jo noteikumi ir atšķirīgi, un tiem ir arī prasības.
Lai padarītu to skaidrāku, es sniegšu piemēru, ko atradu vietnē css-live.ru:
Dzīvojamo ēku un atomelektrostaciju celtniecībai tiek piemēroti dažādi SNiP (būvnormatīvi un noteikumi), tāpēc dokuments, kas derīgs pēc viena noteikumu kopuma, var nebūt derīgs citādi (atomelektrostacija, kas būvēta pēc dzīvojamās ēkas standartiem būtu labi!).
Doctype parasti norāda uz dokumentu, kuram ir plānota html validācija, taču to var izvēlēties pragmatisku apsvērumu dēļ, lai izvēlētos optimālo pārlūkprogrammas režīmu.
XHTML5 var nebūt dokumenta tipa, taču tas ir derīgs.
Kas ir validācija?
Vienkārši izsakoties, validācija ir koda pārbaudes process un tā saskaņošana ar izvēlēto dokumenta tipu (DTD).
Kā tiek pārbaudīts derīgums?
HTML koda derīgumu pārbauda rīks, ko sauc par validatoru.
Slavenākais w3c validators ir https://www.w3.org.
W3c validators veic vairākas koda pārbaudes.
Galvenie:
- Sintakses kļūdu pārbaude:
Piemērs no habrahabr.ru/post/101985:tomēr ir pareizā sintakse ir nederīgs HTML tags
Tātad sintakses pārbaude ir minimāla noderīga laba HTML rakstīšanai. - Tagu ligzdošanas pārbaude:
HTML dokumentā tagi ir jāaizver apgrieztā atvēršanas secībā. Šī pārbaude identificē neaizvērtus vai nepareizi aizvērtus tagus. - HTML validācija saskaņā ar DTD:
Pārbauda, kā kods atbilst norādītajam DTD — dokumenta tipa definīcija (doctype). Tas ietver tagu nosaukumu, atribūtu un tagu "iegulšanas" pārbaudi (viena veida tagi cita veida tagos). - Pārbaudiet, vai nav svešķermeņu:
Tas atklās visu, kas atrodas kodā, bet neatrodas doctype.
Piemēram, pielāgoti tagi un atribūti.
Lai pārbaudītu CSS koda derīgumu, ir pieejams css validators - http://jigsaw.w3.org/css-validator.
Koda derīgums- tas ir mehāniskas pārbaudes rezultāts formālu OB neesamībai saskaņā ar norādīto noteikumu kopumu.
Jums jāsaprot, ka apstiprināšana ir instruments, nevis vērtība pati par sevi.
Pieredzējuši maketētāji parasti zina, kur pārkāpt HTML vai CSS validācijas noteikumus un kur nē, un kas apdraud (vai neapdraud) vienu vai otru validācijas kļūdu.
Piemēri gadījumiem, kad vietne izveido nederīgu kodu:
- ērtāk un ātrāk - pielāgoti atribūti Javascrip / AJAX vai
- SEO optimizēts - ARIA marķējums.
Ir skaidrs, ka derīguma labad nav jēgas.
Parasti pieredzējuši maketētāji ievēro šādus noteikumus:
- Kodā nedrīkst būt rupju kļūdu.
- Nelielu var pieļaut, bet tikai pamatotu iemeslu dēļ.
Par html/CSS validācijas kļūdu derīgumu:
Validācijas kļūdas (OB) var iedalīt grupās:
- OB veidņu failos:
Tos nav grūti atrast un salabot.
Ja kāda no mazajām kļūdām palīdz padarīt vietni funkcionālāku vai ātrāku, varat tās atstāt. - OB vietnei pievienotajos trešo pušu skriptos:
Piemēram, Vkontakte logrīks, Twitter skripts vai video faili no YouTube.
Tos nekādā veidā nevarēs izlabot, jo šie faili un skripti atrodas citās vietnēs, un mums tiem nav piekļuves. - CSS noteikumi, ko pārbaudītājs nesaprot:
Validators pārbauda, vai vietnes kods atbilst noteiktai HTML vai CSS versijai.
Ja savā veidnē izmantojāt CSS 3. versijas noteikumus un pārbaudītājs pārbauda atbilstību versijai 2.1, tas visus CSS3 kārtulas uzskatīs par kļūdām, lai gan tās nav. - OV, kas neizbēgami ir jāatstāj vietnē, lai iegūtu vēlamo rezultātu. Piemēram:
- noindex tagus. Tie nav derīgi, bet ir ļoti nepieciešami un ar to ir jāsamierinās.
- haki. Lai dažās pārlūkprogrammās iegūtu pareizu vietnes attēlojumu, dažreiz ir jāizmanto uzlauzumi - kods, ko saprot tikai noteikta pārlūkprogramma.
- Paša validatora kļūdas.
Bieži vien viņš neredz nevienu tagu (piemēram, aizvēršanas tagus) un ziņo par OB, kur tā nav.
Izrādās, ka darba vietā gandrīz vienmēr būs kāda veida OB.
Turklāt to var būt daudz.
Piemēram, Google, Yandex un mail.ru galvenajās lapās ir vairāki desmiti kļūdu.
Taču tie nepārkāpj vietņu rādīšanu pārlūkprogrammās un netraucē viņu darbam.
Viss augstāk rakstītais attiecas arī uz manām tēmām.
Sarežģītām tēmām ir:
- WordPress funkcijas (piemēram the_category ()) kas dod nederīgu kodu.
- Video izvade no video mitināšanas vietnēm, piemēram, no YouTube, un YouTube kodā ir daudz OV, kurus nevar ietekmēt ne jūs, ne es.
- Sociālo tīklu pogas, kas ir savienotas, izmantojot šo tīklu skriptus un satur OB.
- CSS3 un HTML5 noteikumi, kurus mantotie pārbaudītāji uzskata par kļūdām.
Tajā pašā laikā CSS3 un HTML5 versiju pārbaudītāji vecos noteikumus uzskata par kļūdām :). - Dažkārt, lai panāktu pareizu attēlojumu pārlūkprogrammā Internet Explorer vai citu pārlūkprogrammu vecākās versijās, ir jāizmanto tā saucamie hacki – kods, ko saprot tikai konkrēta pārlūkprogramma, lai uzrakstītu vietnes attēlošanas noteikumus tieši šai pārlūkprogrammai.
Rezultātā pilnīgi derīgu kodu var iegūt tikai tad, kad ierakstāt ļoti vienkāršas tēmas, t.i. tie, kas satur minimālo funkcionalitātes daudzumu.
Pēc jebkuras motīva izkārtojuma pabeigšanas es vienmēr to pārbaudu ar pārbaudītāju un izlaboju visus OB, kurus var labot, nezaudējot motīva funkcionalitāti.
Tas ir, ja ir izvēle starp darba funkcionalitāti un derīgumu, es izvēlos funkcionalitāti.
Ja rakstāt tēmas, iesaku jums rīkoties tāpat.
No mana viedokļa (un arī no vairuma maketētāju viedokļa) attieksme pret html/CSS validāciju kā galīgo patiesību ir nepareiza. Obligāti jālabo tikai tie OV, kas:
- neļaut pārlūkprogrammai pareizi parādīt lapu (neaizvērti un nepareizi ligzdoti tagi).
- palēnināt lapas ielādi (nepareizi savienoti skripti).
- var labot, nepārkāpjot tēmu.
Es ceru, ka esmu atbildējis uz visiem apstiprināšanas jautājumiem.
Es jau minēju, kas pastāv attiecībā uz html koda derīgumu. Tas būtu jādara vismaz laiku pa laikam, jo derīgums gan html, gan css spēcīgi ietekmē vietni, tas ir, jūsu resursa identisku attēlojumu dažādās pārlūkprogrammās (vispārīgs raksts par populārajām un labākajām tīmekļa pārlūkprogrammām, kas, es ceru, palīdzēs jums izdarīt izvēli par labu kādai no tām).
Turklāt jau minēju, neskatoties uz to, ka meklētāji šajā posmā neņem vērā CSS un HTML koda kļūdas, ranžējot vietnes, nākotnē viss var mainīties un var rasties situācija, kad skaisti noformēts, radīts cilvēku projekts var zaudēt daļu no potenciālās auditorijas, jo tas nav izturējis apstiprinājumu. Nu, labi, tas viss ir lirika, šeit katrs pats izlemj, cik viss ir svarīgi.
Es domāju, ka jūs tagad esat iepazinies ar manu viedokli, jo es rakstu šo rakstu, kas nozīmē, ka uzskatu to par uzmanības vērtu kopā ar, piemēram, tik svarīgu SEO optimizācijas daļu kā saišu aizvēršana un teksta fragmenti no Google indeksēšanas un Yandex vai kompetenta lietošana.
Labi, kā saka, precīzāk. Pirmkārt, nedaudz par CSS. CSS ( Kaskādes stila lapas- Cascading Style Sheets) ir stila valoda, kas nosaka HTML dokumentu attēlošanu. Tas ir, ja HTML apraksta lapas saturu, tad CSS formatē šo saturu, citiem vārdiem sakot, piešķir tai pilnīgu izskatu. Starp citu, lai uzlabotu vietnes ātrumu, būs noderīgi mitināt motīvu failus.
W3C validators: apstiprina CSS kodu
Tagad pāriesim pie dokumenta derīguma pārbaudes (mūsu vietnes vai WordPress emuāra lapas). Tāpat, tāpat kā HTML koda pārbaudes gadījumā, mēs izmantosim vienu no rīkiem. Pāriesim pie CSS validācijas pakalpojuma:
Kā redzat, ir trīs veidi, kā pārbaudīt CSS derīgumu, izmantojot W3C validatoru. Starp citu, ņemiet vērā, ka validatora lapas apakšā ir piezīme, kas norāda, ka ir jāpārbauda HTML koda derīgums. Tikai abi pareizie kodi garantē visa dokumenta pareizību. Lai pārbaudītu, ievadiet URL. Piemēram, apskatīsim mana emuāra sākumlapu:
W3C validatora veiktās CSS koda kļūdu pārbaudes rezultātu nevar saukt par neapmierinošu, jo tika atrastas tikai 2 kļūdas. Protams, šīs kļūdas ir dažādas, katrā gadījumā tās rada dažādas sekas. Apskatīsim, ko mēs varam darīt, lai tos novērstu. Šeit viss ir ērti, jo W3C validators sniedz ne tikai saiti uz dokumentu, kurā ir nepareizs kods, bet arī rindas numuru, kurā tas atrodas. Starp citu, zemāk, pēc brīdinājumu un kļūdu saraksta, tiks parādīts pareizā CSS koda variants, ko var izmantot:
CSS validācijas rezultātu lapā ir saite uz dokumentu css.ie kas atrodas motīva mapē. Tas tika izveidots, lai izveidotu vairāku pārlūkprogrammu emuāru (konsekvents attēlojums populārās pārlūkprogrammās). Turklāt tas ir paredzēts dažādām Internet Explorer modifikācijām, kas cieš no dažādām "jambām" vietnes izskata kropļošanas ziņā, īpaši tās vecākajām versijām (IE9 šajā ziņā ir daudz labāks). Saderība starp pārlūkprogrammām ir ļoti svarīga projekta virzībai, taču, pārbaudot, izrādījās, ka šajā dokumentā ir rekvizīti, kas neatbilst W3C standartiem.
Tātad, mēs iegūstam 3. un 12. rindu, kurās ir kļūdas. Lai tos labotu, noņemiet parsēšanas kļūdu html (filtrs: izteiksme (document.execCommand ("BackgroundImageCache", false, true));) un īpašums .tuvināt... Tagad es neiedziļināšos programmēšanas un vietņu izkārtojuma sarežģījumos, tikai atzīmēšu, ka īpašums izteiksme palīdz atbrīvoties no kaitinošā fona attēlu mirgošanas efekta, kas rodas IE6.
Tas ir, pārlūkprogrammā, kuras izmantošana ir veltīga, un nākamajās versijās šī "kļūme" vairs netiek novērota. Uzreiz jāsaka, ka lietošu šīs "zāles" kādu laiku, līdz IE6 potenciālo apmeklētāju skaits sasniegs minimālo līmeni. Tomēr skaidrības labad es to noņemšu, lai parādītu, kā W3C validators uz to reaģēs.
Rekvizītu .zoom, kas nosaka elementa tālummaiņas koeficientu, kas neietilpst W3C starptautiskajā standartā, atbalsta ļoti vecās Opera, Safari pārlūkprogrammu versijas, tostarp IE8(9. versija ir gandrīz pilnībā "likumpaklausīga", tāpēc drīzumā, es ceru, tīmekļa pārziņi tiks atbrīvoti no nepieciešamības izmantot hackus, tas ir, papildu kodus, lai panāktu maksimālu saderību starp pārlūkprogrammām). Tagad apskatīsim dokumentu, kurā ir nederīgi elementi, un labosim to:
Šis dokuments atrodas manā Cloudy tēmas mapē, es dzēšu iepriekš minētos vienumus, kas neizturēja validācijas pārbaudi. Turklāt validācijas pārbaudes rezultātos papildus kļūdām bija arī daudz tā saukto brīdinājumu:
Kā piemēru es mēģināšu skaidri parādīt, kā atbrīvoties no visbiežāk sastopamajiem, un pa ceļam izskaidrot to nozīmi. Kā redzat, W3C validators brīdina par vienādu teksta un fona krāsu klātbūtni. Man jāsaka, ka tas jebkurā gadījumā kopumā nav vēlams, jo meklētājprogrammas var uzskatīt šo situāciju par informācijas slēpšanu, kas ir pilns ar nopietnām sankcijām.
Protams, ne vienmēr tas tā ir, taču šo bīstamību nevar novērtēt par zemu. Tātad, pāriesim tieši uz situācijas labošanu. Vislabāk ir kopēt failu stils.css jūsu tēma HTML un PHP redaktorā notepad ++, par kuru es runāju un kas atvieglo meklēšanu pēc rindas numura:
Tagad mēs zinām, kur šīs līnijas atrodas jūsu motīva failā, pielāgojiet krāsu, nedaudz mainot toni. Heksadecimālajā krāsā #ffffff apzīmē baltu. Mēs to mainām šādi: pēdējā f vietā ievadām d, tādējādi iegūstam nedaudz atšķirīgu balto nokrāsu; Tagad izmaiņas lietotājiem nebūs pamanāmas, taču meklētājprogrammas redzēs atšķirību:
Šādi varat labot nederīgās resursu lapu CSS koda daļas. Tādā pašā veidā atrodam arī pārējās sadaļas, kas apzīmētas ar brīdinājumiem un kuras ir jālabo.Kas attiecas uz brīdinājumiem par 483.rindu (to, starp citu, bija diezgan daudz, ap 10). Pārbaudot, es atklāju, ka iemesls bija spraudnis WP Page Numbers, kas nodrošina lapas navigāciju.
Tas lika man deaktivizēt šo spraudni, un tas bija iemesls, kāpēc es beidzot to aizstāju ar koda ievadīšanu, kas bija solis servera slodzes samazināšanas virzienā. Tiklīdz es to izdarīju, brīdinājumi par koda derīguma pārkāpumu ar šo konkrēto spraudni uzreiz pazuda pēc otrreizējas pārbaudes. Pēc iepriekšminētajiem žestiem mēs atkārtoti pārbaudām CSS derīgumu, izmantojot W3C validatoru:
Tagad jūs zināt, kā pārbaudīt CSS dokumenta (vietnes vai emuāra tīmekļa lapas) derīgumu, izmantojot W3C pārbaudītāju. Visbeidzot, es vēlos atzīmēt, ka katrs pats izlemj par CSS koda derīguma pārbaudes pakāpi un biežumu, tas viss ir atkarīgs no apstākļiem, taču, neskatoties uz to, laiku pa laikam tas ir jādara bez problēmām, manā dziļumā. pārliecība. Abonējiet emuāra atjauninājumus, lai saņemtu jaunus materiālus pa e-pastu. Ļaujiet man paņemt atvaļinājumu, es ceru, ka mēs uz īsu brīdi šķirsimies.
Validācija ir CSS koda pārbaude saskaņā ar CSS2.1 vai CSS3 specifikāciju. Attiecīgi pareizs kods, kas nesatur kļūdas, tiek saukts par derīgu, un, kas neatbilst specifikācijai, tiek saukts par nederīgu. Ērtākais veids, kā pārbaudīt kodu, ir tīmekļa vietne. http://jigsaw.w3.org/css-validator/, izmantojot šo pakalpojumu, varat norādīt dokumenta adresi, augšupielādēt failu vai pārbaudīt drukāto tekstu. Liels pakalpojuma pluss ir krievu un ukraiņu valodu atbalsts.
Pārbaudiet URI
Šī cilne ļauj norādīt internetā mitinātas lapas adresi. Jums nav jāraksta http: // protokols, tas tiks pievienots automātiski (1.42. att.).
Rīsi. 1.42. Dokumenta pārbaude plkst
Pēc adreses ievadīšanas noklikšķiniet uz pogas "Pārbaudīt" un parādīsies viens no diviem uzrakstiem: "Apsveicam! Netika atrasta neviena kļūda "ja izdodas, vai" Atvainojiet, mēs atradām šādas kļūdas "ja kods ir nederīgs. Kļūdu vai brīdinājuma ziņojumos ir iekļauts rindas numurs, atlasītājs un kļūdas apraksts.
Pārbaudiet augšupielādēto failu
Šī cilne ļauj ielādēt HTML vai CSS failu un pārbaudīt, vai tajā nav kļūdu (1.43. attēls).
Rīsi. 1.43. Faila pārbaude ielādes laikā
Pakalpojums automātiski atpazīst faila tipu un, ja ir norādīts HTML dokuments, izņem no tā stilu apstiprināšanai.
Pārbaudiet drukāto tekstu
Pēdējā cilne paredzēta tiešai HTML vai CSS koda ievadīšanai, kamēr tiks pārbaudīts tikai stils (1.44. att.).
Rīsi. 1.44. Pārbauda ievadīto kodu
Šī opcija šķiet visērtākā dažādu eksperimentu veikšanai ar kodu vai mazu fragmentu ātrai pārbaudei.
CSS versijas izvēle
Salīdzinot ar iepriekšējo versiju, CSS3 pievieno daudz jaunu stila rekvizītu, tāpēc koda validācijai ir jābūt versijai specifiskai. Pēc noklusējuma pakalpojums norāda CSS2.1, tādēļ, ja vēlaties pārbaudīt savu kodu pret CSS3, jums tas ir skaidri jānorāda. Lai to izdarītu, noklikšķiniet uz teksta "Papildfunkcijas" un atvērtajā blokā no saraksta "Profils" atlasiet CSS3
Rīsi. 1.45. Pārbaudāmās CSS versijas norādīšana
Identifikatori un klases
Ik pa laikam notiek diskusijas par to, vai izkārtojumā ir ieteicams izmantot identifikatorus. Galvenais iemesls ir tas, ka identifikatori ir paredzēti skriptēšanai, lai piekļūtu elementiem un manipulētu ar tiem tīmekļa lapā, un klases jāizmanto tikai, lai mainītu elementu stilus. Tiešām nav atšķirības, kādi stili tiek izmantoti, taču ir dažas lietas, kas jāpatur prātā saistībā ar identifikatoriem un klasēm, kā arī nepilnībām, kas var sagaidīt izstrādātājus.
Vispirms uzskaitīsim šo selektoru raksturīgās iezīmes.
Identifikatori
Dokumenta kodā katrs identifikators ir unikāls un jāiekļauj tikai vienu reizi.
Identifikatora nosaukums ir reģistrjutīgs.
Izmantojot metodi getElementById, varat piekļūt elementam pēc tā identifikatora un mainīt elementa rekvizītus.
Identifikatora stilam ir prioritāte pār klasēm.
Klases savā kodā var izmantot vairākas reizes.
Klases nosaukumos ir reģistrjutīgi.
Klases var apvienot viena ar otru, pievienojot vienai atzīmei vairākas klases.
Identifikatori
Ja tīmekļa lapas darbības laikā jums ir jāmaina dažu elementu stils vai tajos jāparāda teksts, tas ir daudz vienkāršāk ar identifikatoriem. Elements tiek izsaukts, izmantojot metodi getElementById, kuras parametrs ir identifikatora nosaukums. 1.70. piemērā veidlapas teksta laukam tiek pievienots identifikators ar nosaukumu userName, pēc tam, izmantojot JavaScript funkciju, tiek pārbaudīts, vai lietotājs šajā laukā ir ievadījis tekstu. Ja teksta nav, bet ir nospiesta poga Iesniegt, tagā tiek parādīts ziņojums ar ziņojuma identifikatoru. Ja viss ir pareizi, veidlapas dati tiek nosūtīti uz darbības atribūtā norādīto adresi.
Piemērs 1.70. Veidlapas datu validācija XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
