Հիմնական HTML, CSS և JavaScript տեխնիկա

Հեղինակ: Monica Porter

Ստեղծման Ամսաթիվը: 22 Մարտ 2021

Թարմացման Ամսաթիվը: 17 Մայիս 2024

Տեսանյութ: HTML/CSS - էջի կառուցվածքը և առաջին CSS կոդը (4/6)

Բովանդակություն

Դասավորություն
Հստակ լուծում
Տուփի չափսեր
Բազմասյուններ
Հաշվարկներ
Ոճ
Թափանցիկություն
Fտիչներ
Պատկերի փոխարինում
Պատասխանատու տեսանյութ
Ֆունկցիոնալությունը
Հեշտությամբ ընտրելով տարրեր
Նոր զանգվածների ստեղծում
Մաքրել փաստաթուղթը և պատուհանի առարկաները
Դուր եկավ սա Կարդացեք սրանք:

Այս հոդվածը առաջին անգամ հայտնվեց .net ամսագրի 234 համարում ՝ աշխարհի ամենաշատ վաճառվող ամսագիրը վեբ դիզայներների և մշակողների համար:

Տեխնիկան, իր հիմքում, խնդիր կատարելու միջոց է, և լինելով առջևի մշակողներ և դիզայներներ, մենք ունենք շատ առաջադրանքներ: Ասել է թե ՝ մենք հաճախ մոռանում ենք, թե որքան է փոխվել այս բնապատկերը: 2002-ից 2010 թվականներին մեր համայնքը փտած էր ծածկագրերի և ռեսուրսների շողոքորթությունից ՝ խոչընդոտելով կատարողականությանը և պահպանելիությանը: Դա հաղթահարելու համար մենք ստեղծեցինք մի շարք խորհուրդներ, հնարքներ և հակերներ, որոնք մենք անվանեցինք «տեխնիկա»: Մենք դեռ կատարում էինք առաջադրանքներ, բայց ոչ ամենաարդյունավետ կերպով:

360-ի կատարմամբ, վերջին մի քանի տարիները տեսել են ավելի լավ չափորոշիչների և ստանդարտների ներդրումը, ինչը հնարավորություն է տալիս մեզ ՝ որպես համայնքի, զարգացնել նոր և ավելի առաջատար տեխնիկա: Այս նոր լանդշաֆտը համարվում է «ժամանակակից սարդոստայն»:

Երբ «Վեբ 2.0» –ը լճացավ և շփոթեցրեց, «դանդաղ» է լինելու նաև «ժամանակակից ոստայնը»: Giveամանակ տվեք: Ասել է թե ՝ առայժմ մենք կարող ենք օգտագործել և չարաշահել այդ տերմինը, քանի դեռ կա ընդհանուր ըմբռնում, թե ինչ է այն ներկայացնում:

2010 թ.-ին տեղ գտավ HTML5 բնութագիրը `ապահովելով բոլորովին նոր, կիսստանդարտացված վեբ միջավայր: Opera- ի, Firefox- ի, Chrome- ի և Safari- ի նման զննարկիչները ընդունեցին այս նոր ալիքը և իրենց թիմերին մղեցին ստանդարտների ներդրման և API- ի ուսումնասիրության նոր սահմաններ: Որպեսզի պատկերացում կազմեք, թե ինչպես են այս բրաուզերները «ներկառուցված», ստուգեք HTML5 աջակցությունը փոխելու www.html5readiness.com- ի պատկերացումները:

Մի անհանգստացեք Internet Explorer- ում աջակցության բացակայությունից: Մենք կարող ենք դրա դեմ պայքարել Google Chrome Frame- ի շնորհիվ: Քանի որ Google- ը այն ներմուծեց 2010 թ.-ին, այն դարձել է Internet Explorer- ի աջակցության մեխանիզմ: IE- ի բոլոր տարբերակները կարող են թիրախավորվել Chrome Frame- ի միջոցով, ինչը դրդում է նոր օգտվողին ներբեռնել plug-in, որն արտացոլված կայքեր է մատուցում Chrome- ի թեթեւ տարբերակով Chrome- ի ներսում, IE- ի ներսում: Chrome Frame- ն իրականացնելու համար մենք ավելացնում ենք հետևյալ մետա> պիտակը մեր կայքի գլխի> պիտակի մեջ:

meta http-eku = "X-UA- համատեղելի" բովանդակություն = "chrome = 1" />

Այստեղից մենք կարող ենք IE օգտվողներին հուշել ներբեռնել plug-in- ը, եթե դա արդեն տեղադրված չէ, օգտագործելով JavaScript:

սցենարի տեսակը = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFI տեղադրեք:
min.js "> / սցենար>
սցենար>
windows.onload = գործառույթ () {
CFInstall.check ({
ռեժիմ ՝ «երեսպատում»,
նպատակակետ ՝ «http://www.yourdomain.com»
});
};
/ սցենար>

նպատակակետը կարող է դրվել ՝ plug-in- ը տեղադրելուց հետո օգտագործողին որոշակի հղման ուղարկելու համար: Ofգուշացում. Չնայած Chrome Frame- ը մեզ հնարավորություն է տալիս խստորեն զարգանալ իսկապես ժամանակակից զննարկիչների համար, չպետք է մոռանանք, որ օգտվողը հնարավորություն չունի չբեռնելու plugin- ը, եթե ինքը չի ցանկանում: Եթե դրանք չեն տրամադրվում, և ձեզանից պահանջվում է աջակցություն տրամադրել IE- ի մեկ կամ այլ տարբեր տարբերակների, դուք ստիպված կլինեք ավելի շատ ժամանակ հատկացնել ՝ պարզելու, թե ինչ կարող եք և ինչ չեք կարող տրամադրել, ձեր փորձով, խաչբրաուզերով.

Այս կոդով ապահովելով զգալիորեն ավելի հավասար մրցակցային պայմաններ, որոնց վրա կարելի է զարգանալ ժամանակակից ոստայնում, մենք կարող ենք հանգիստ առաջ շարժվել: Կարող եք հիշել, որ ձեր կայքի կառուցվածքը ճիշտ խաչաձեւ զննարկիչը ստանալու համար անհրաժեշտ է ստեղծել մի շարք զննարկչի հատուկ հակերներ, ստեղծել անթիվ քանակությամբ դատարկ տարրեր, որոնք կօգտագործվեն ձեր կտրտած պատկերների հետ կամ նույնիսկ գրեք չափազանց խոսուն կամ ավելորդ JavaScript կոդ ՝ ստանալու համար աշխատելու ամենապարզ ֆունկցիոնալությունը: Այս բոլոր ցավերը, ինչ-որ իմաստով, նույն խնդիրներն են, որոնց համար այսօր անհանգստանում ենք: Մենք դեռ պայքարում ենք ավելի մեծ վերահսկողության և ավելի լավ գործիքների համար `դասավորության, ոճի և ֆունկցիոնալության դեմ պայքարում, բայց հասուն մակարդակում:

Դասավորություն

Հստակ լուծում

Լողացող տարրը ներմուծվեց CSS 2.1-ում, բայց երբեք պարզվեց, որ այն ամբողջական լուծումը, որը մենք ակնկալում էինք: Ամենամեծ խնդիրներից մեկը ծնողի տարրի չափերի պահպանումն էր, երբ երեխայի տարրը լողացվեց: Սրա լուծման համար ստեղծվել է հստակեցման տեխնիկան:

Վերցրեք հետևյալ HTML- ը.

div>
div> ... / div>
div> ... / div>
/ div>

Այս տեխնիկան գրել է Նիկոլաս Գալագերը.

. հստակ լուծում. առաջ,
. հստակ լուծում. հետո {
բովանդակություն ՝ "";
ցուցադրում `սեղան;
}
. հստակ լուծում. հետո {
պարզ: երկուսն էլ;
}
.clearfix {
* խոշորացում ՝ 1;
}

Եթե ձեր նախագծերը մեկնարկելու համար օգտագործում եք HTML5Boilerplate, ապա դուք արդեն կունենաք թաքցված հստակեցման տեխնիկայի այս տարբերակը:

Տուփի չափսեր

Տարիներ շարունակ մշակողները քննարկում էին, թե որ տուփի մոդելի ներդրումն էր ավելի իմաստալից: Quirks vs Standards ռեժիմը իսկապես նշանակում էր. ‘Սահմանելուց հետո, երբ սահմաններն ու լցոնումը կիրառվեն, տարրի չափերը պետք է փոխվեն դրվելուց հետո, թե ոչ:

Այժմ լայնորեն համաձայնել է, որ ավելի իմաստալից է, որ սահմաններն ու լցոնումները տարրի առկա տարածությունից խլեն և չլրացնեն տարրի լայնությունը կամ բարձրությունը: Բանավեճն անտեղի է դարձել ՝ տուփերի չափագրման լայն կիրառմամբ: Theննարկիչը հակառակը փոխարենը կվերցնի ձեր հուշումները ձեզանից:

Քրիս Կոյերի և Փոլ Իռլանդի կողմից հանրահռչակված, համապարփակ տեխնիկան կարող է իրականացվել հետևյալով.

* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
տուփի չափսեր. սահմանային տուփ;
}

CSS- ում * ընտրիչի օգտագործումը քննարկվել է `ելնելով հնարավոր կատարողականի հարվածներից: Այս տեսակի պնդումները անլուրջ են, եթե դուք հիպերօպտիմիզացված չեք ձեր կայքի / ծրագրի բոլոր մյուս ասպեկտները: Border-box- ի օգտագործումը զննարկիչը կստիպի լրացնել լցոնումներ և եզրագծեր առկա տարածության ներսում: ‘Ստանդարտների ռեժիմը’ կարող է օգտագործվել `տուփի չափը բովանդակության վանդակում դնելով:

Բազմասյուններ

Theանցը մեծապես ոգեշնչված էր գրավոր ձևից և տեսակից: Unfortunatelyավոք, մենք մնացինք մագաղաթի փուլում: Այս խնդիրներից մի քանիսը բախվում են երկար սպասված Paged-Media- ի և CSS Regions- ի բնութագրերի: Ասել է թե ՝ առաջին քայլերն դեպի ավելի ամսագրի նման դասավորություններ ձեռնարկվեցին, երբ զննարկիչները սկսեցին իրականացնել CSS բազմասյուններ: Այս էֆեկտն առաջացնելու ծածկագիրը բավականին պարզ է.

p {
-webkit- սյունի հաշվարկ `2;
-moz- սյունի հաշվարկ `2;
սյունների հաշվարկը `2;
}

CSS3 բազմասյունի ճշգրտման, ինչպես նաև JavaScript- ի հետադարձ կապի մասին, որը կարող եք օգտագործել ցանկացած զննարկչի համար առանց աջակցության, կարող եք ծանոթանալ A List Apart բլոգից:

Հաշվարկներ

Չափերը հաշվարկելը կարող է դժվար լինել: Դեռ հին ժամանակներում մենք ոչ մի կերպ չէինք կարող կատարել որևէ տեսակի միավորի հաշվարկներ, առավել եւս `միավորների խառը հաշվարկներ: Այդ ամենը փոխվել է շնորհիվ calc. Լցոնված էֆեկտի ստեղծում, որը չի ազդում սկզբնական տարրերի լայնության վրա կամ չի օգտագործում տուփի չափսերի նման մի բան. մինչ վերջերս հնարավոր էր միայն հավելյալ պարունակող տարրեր ավելացնելով:

.փաթեթավորված {
լուսանցք ՝ 0 ավտոմատ;
դիրքը ՝ հարաբերական;
լայնությունը `-webkit-calc (100% - (20px * 2));
լայնությունը ՝ -մոզ-հաշվ (100% - (20 հատ * 2));
լայնությունը ՝ հաշվ (100% - (20 հատ * 2));
}

calc () հոգ է տանում լայնության պատշաճ հաշվարկի վրա, որը հիմնված է .padded- ի ծնողական լայնության և մինուս սահմանված 20px լրացման վրա: Ես սա բազմապատկեցի 2-ով իմ տարրի երկու կողմերի համար `կենտրոնացնելով տարրը` օգտագործելով հարաբերական դիրքավորում և ձախ և աջ լուսանցքի ավտոմատ:

Ոճ

Թափանցիկություն

Տարրի ճիշտ ոճ ստանալը միշտ կախված է եղել CSS- ում մեզ հասանելի գործիքների տեսակից: Թափանցիկությունը աջակցության առաջին տարբերակներից մեկն է, որի հետ բախվում եք 2000-ականների սկզբին կամ կեսերին:

HTML5- ի և ավելի կենտրոնացված ստանդարտների ջանքերի շնորհիվ, զննարկիչները ունեն անթափանցիկ հատկության ստանդարտ իրականացում և բացահայտեցին ալֆա ալիքի աջակցությունը, ըստ Գույնի մոդուլի նոր բնութագրերի: Սա ներառում է RGBA և HSLA ուղեցույցները:

ա {
գույնը ՝ rgba (0,255,0,0,5);
ֆոն ՝ rgba (0,0,255,0.05);
եզրագիծ ՝ rgba (255,0,0,0,5,5);
}

Դուք կարող եք օգտագործել RGBA կամ HSLA գույները որտեղ էլ որ գտնեք HEX արժեքներ: Կա նաև զվարճալի գույների ընդլայնված ցուցակ `սահմանված անուններով, որոնք կարող եք ստուգել հենց հստակեցման մեջ: Դրանք օգտակար են, երբ ուզում եք դինամիկ խառնուրդ ստեղծել տարրերի միջև:

Fտիչներ

CSS ֆիլտրերը չափազանց հետաքրքիր են: Havingարմանալի է էջում տարրերի տեսքն ու զգացողությունը դինամիկորեն փոխելու ունակություն, առանց երրորդ կողմի լրացումների անհրաժեշտության, ինչը կօգնի զգալիորեն կրճատել Photoshop- ում անցկացրած ձեր ժամանակը:

img src = "market.webp">
img {
-webkit-filter: մոխրագույն սանդղակ (100%);
}

CSS ֆիլտրերը ներկայումս աջակցվում են միայն WebKit զննարկիչներում, ուստի դրանց օգտագործումը պետք է ունենա հավելյալ բնույթ, այլ ոչ թե կախված: Կարդալ ավելին այստեղ

Պատկերի փոխարինում

Տեքստը պատկերներով փոխարինելը վաղուց կար: Unfortunatelyավոք, պատկերի փոխարինման ամենավերջին և բարդ տեխնիկայում դեռ կան թերություններ, հասանելիության իմաստով: Բայց վերջերս լույս աշխարհ եկավ երկուսը, որոնք չափազանց խելացի են և եզակի են իրենց իսկ իրավունքներով: Առաջինը գրել է Սքոթ Քելմանը.

h1 class = 'hide-text'> Իմ կայքի պատկերանշանը / h1>
.Hide-text {
տեքստ-ցուցիչ `100%;
սպիտակ-տարածություն. այժմ
վարարում ՝ թաքնված;
}

Երկրորդը գրել է Նիկոլաս Գալագերը.

.Hide-text {
տառատեսակ ՝ 0/0 ա;
տեքստ-ստվեր `ոչ մեկը;
գույնը `թափանցիկ;
}

Պատասխանատու տեսանյութ

Արձագանքող միջավայրում լրատվամիջոցներին ճիշտ մասշտաբավորելը կարող է դժվար լինել: Ունենալով ավելի ու ավելի շատ կայքեր, որոնք հարգում են հարմարվողական դիզայնը, կարևոր է պատշաճ կերպով կարգավորել տարրերի չափերը և կողմերի հարաբերակցությունը:

Ներդրված տեսանյութը լրատվամիջոցների առավել մարտահրավեր տեսակներից մեկն է եղել, որի պատճառով երրորդ կողմի ծառայությունները մատուցում են բովանդակությունը: YouTube- ի սովորական ներկառուցվածքն այսպիսի տեսք ունի.

iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>

Եթե iframe տարրը պարունակում է Flash օբյեկտ կամ ներկառուցված տարր: Iframe- ի պես մի բան օգտագործելը {maxwidth: 100%; } - ը չի աշխատի, քանի որ տեղադրված տարրերը չեն փոխում ինչպես հարկն է, երբ լայնությունը փոխվում է: Այսպիսով, մենք պետք է ինչ-որ խորամանկություն անենք:

div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>

Iframe- ը մեկ այլ տարրի մեջ փաթաթելը մեզ կտա այն վերահսկողությունը, որը մենք պետք է տեսանյութին պատշաճ պատասխանատու գործառույթներ ավելացնելու համար:

. տեսանյութ {
դիրքը ՝ հարաբերական;
լցոնման հատակ `56,25%;
բարձրությունը ՝ 0;
վարարում ՝ թաքնված;
}
. վիդեո iframe,
. վիդեո օբյեկտ,
. վիդեո ներկառուցել {
դիրքը ՝ բացարձակ;
վերև ՝ 0;
ձախ: 0;
լայնությունը `100%;
բարձրությունը `100%;
}

.Վիդեո փաթաթվածի ներքևի ծածկույթի տեղադրում. 56.25%; մոգությունն է այս մեթոդի մեջ: Լցոնման օգտագործումը նշանակում է, որ օգտագործված տոկոսը հիմնված կլինի ծնողի լայնության վրա. ‘56 .25% -ը կստեղծի 16: 9 կողմերի հարաբերակցություն: Մաթեմատիկա ինքներդ արեք, եթե ուզում եք: 9/16 = 0,5625: 0,5625 * 100 = 56,25 (սա մեր տոկոսն է):

Ֆունկցիոնալությունը

Հեշտությամբ ընտրելով տարրեր

Մի շարք JavaScript գրադարանների ժողովրդականության շնորհիվ (օրինակ, jQuery), ECMAScript կոմիտեն և W3C ստանդարտները նկատեցին, որ գործառույթներ մշակողների հիմնական մասերից մեկը բնիկ չունի ՝ տարրերի լավ ընտրություն: GetElementByID () և getElementByClassName () օրինակների նման մեթոդներն արագ էին, բայց ոչ այնքան ճկուն և ուժեղ, որքան մշակողների համայնքից եկող ընտրիչ շարժիչները: querySelectorAll () - ը ստանդարտ մարմինների միջոցն էր `ընդօրինակելու որոշ ճկունություններ բնիկ ընտրողի մեթոդի մեջ:

var items = document.querySelectorAll ('# header .item');

querySelectorAll () -ը կարող է փոխանցվել բազմակի և խառը ընտրիչներով: Կարդալ ավելին այս մասին:

Նոր զանգվածների ստեղծում

Arանգվածի վրա կրկնելը գրելն արդեն հոգնեցուցիչ է: () Օղակների համար գրելը և վերաշարադրելը զվարճալի չէ: 1.6 տարբերակում JS քարտեզը հայտնվեց քարտեզի () մեթոդը, որը տրամադրում է աջակցություն հեշտությամբ կրկնվելու և մյուսից նոր զանգված ստեղծելու:

var people = ['Heather', 'James', 'Kari', 'Kevin'];
var ողջունում է = people.map (գործառույթը (անունը) {
վերադարձնել 'Ողջույն' + անուն + '!';
});

Այս կոդը գործարկելու դեպքում, եթե մենք console.log- ը (ողջունում է), կտեսնեք, որ ողջունում է, նոր զանգված է [‘Ողջույն Heather! ',‘ Ողջույն Jamesեյմս!', ‘Ողջույն Kari! ', ]

Մաքրել փաստաթուղթը և պատուհանի առարկաները

Երրորդ կողմի JavaScript գրադարանները հակված են խառնաշփոթության հարազատ փաստաթղթի և պատուհանի օբյեկտների հետ: Սա կարող է խնդիր հանդիսանալ երրորդ կողմի այլ գրադարանների, և դրանք ներառող ծրագրավորողի համար: Որպես կողմերից յուրաքանչյուր, համոզվեք, որ աշխատում եք երկու օբյեկտների մաքուր տարբերակի հետ `ստեղծելով դրանց նոր օրինակ: Դա անելու լավագույն միջոցը iframe տարր ստեղծելով, տեղադրելով այն DOM և պահելով այդ օբյեկտների նոր ատյանները:

var iframe = document.createElement ('iframe');
iframe.style.display = "ոչ մեկը";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);

Չնայած որ վեբ շտեմարանում մեծ բարելավումներ են տեղի ունեցել, այնուամենայնիվ, շարունակում է մեծապես մշակել և բարդացնել մեր տեխնոլոգիական փաթեթը `մեր ծրագրի դասավորության, ոճի և գործունակության առջև ծառացած մարտահրավերներին դիմակայելու համար, այնուամենայնիվ, չափազանց կարևոր է: Աճի լավ էկոհամակարգը պահպանելու համար մենք պետք է խրախուսենք ստանդարտ մարմիններին և զննարկիչների վաճառողներին շարունակել առաջընթացը նոր բնութագրերով և նորարարական հատկությունների ներդրմամբ `միևնույն ժամանակ կիսելով մեր սեփական գիտելիքները գործընկեր մշակողների և դիզայներների հետ: Ավելի շատ պատկերացում, ավելի քիչ կոտրվածքներ:

Դարսի Քլարկը մրցանակակիր մշակող է, WordPress թեմաների Themify ընկերության համահիմնադիր և DealPage- ի ամենօրյա գործարքների ագրեգատոր և jQuery թիմի անդամ: Նա աշխատում է Polar Mobile- ում ՝ որպես ավագ UX մշակող: