Основне технике ХТМЛ, ЦСС и ЈаваСцрипт

Аутор: Monica Porter

Датум Стварања: 22 Март 2021

Ажурирати Датум: 17 Може 2024

Видео: Тестировщик с нуля / Урок 15. Основы HTML и CSS для тестировщика

Садржај

Изглед
Цлеарфик
Величина кутије
Више колона
Калкулације
Стил
Транспарентност
Филтери
Замена слике
Одзивни видео
Функционалност
Лако бирање елемената
Креирање нових низова
Очистите објекте докумената и прозора
Свиђа вам се ово? Прочитајте ово!

Овај чланак се први пут појавио у броју 234 часописа .нет - најпродаванијег светског часописа за веб дизајнере и програмере.

Техника је у основи начин за извршавање задатка и, будући да смо програмери и дизајнери, имамо пуно задатака. С тим у вези, често заборављамо колико се овај пејзаж променио. Од 2002. до 2010. године наша заједница је трула од напухавања кода и ресурса, ометајући перформансе и одрживост. Да бисмо то превазишли, створили смо мноштво савета, трикова и хакова које смо назвали „техника“. Још увек смо извршавали задатке, само не на најефикаснији начин.

Радећи 360, последњих неколико година заживели су бољи стандарди и примена стандарда, омогућавајући нам као заједници да развијамо новије и напредније „технике“. Овај нови пејзаж је оно што се сматра „модерном мрежом“.

Како је „Веб 2.0“ стагнирао и збуњивао, тако ће то постати и „модерни веб“. Дајте му времена. То је рекло да за сада можемо да користимо и злоупотребљавамо тај израз све док постоји заједничко разумевање онога што он представља.

2010. године слетјела је ХТМЛ5 спецификација, пружајући потпуно ново, полу-стандардизовано веб окружење. Прегледачи попут Опера, Фирефок, Цхроме и Сафари прихватили су овај нови талас и гурнули своје развојне тимове на нове границе примене стандарда и истраживања АПИ-ја. Да бисте добили идеју о томе колико су ови прегледачи „уграђени“, погледајте ввв.хтмл5реадинесс.цом визуализације промене ХТМЛ5 подршке.

Не брините због недостатка подршке у Интернет Екплореру. Са овим се можемо борити захваљујући Гоогле Цхроме Фраме-у. Откако га је Гоогле представио 2010. године, постао је механизам за подршку за Интернет Екплорер. Све верзије ИЕ могу се циљати помоћу Цхроме Фраме-а, што подстиче новог корисника да преузме додатак који приказује укључене веб локације са лаганом верзијом Цхроме-а, унутар ИЕ-а. Да бисмо применили Цхроме Фраме, додали смо следећу мета> ознаку у ознаку хеад> наше веб локације.

мета хттп-екуив = "Кс-УА-Цомпатибле" цонтент = "цхроме = 1" />

Одавде можемо подстицати ИЕ кориснике да преузму додатак, ако већ није инсталиран, користећи ЈаваСцрипт:

типе сцрипт = "тект / јавасцрипт" срц = "хттп: // ајак.
гооглеапис.цом/ајак/либс/цхроме-фраме/1/ЦФИнсталл.
мин.јс "> / сцрипт>
скрипта>
виндов.онлоад = фунцтион () {
ЦФИнсталл.цхецк ({
режим: "прекривање",
одредиште: "хттп://ввв.иоурдомаин.цом"
});
};
/ сцрипт>

одредиште се може поставити да пошаље корисника на одређену везу након инсталирања додатка. Реч опреза: иако нам Цхроме Фраме даје метод за стриктни развој за истински модерне прегледаче, не смемо заборавити да корисник има могућност да не преузме додатак ако то не жели. Ако то не учине, а од вас се захтева да пружите подршку за једну или друге различите верзије ИЕ, мораћете да потрошите још неко време да бисте сазнали шта можете, а шта не можете да пружите међу прегледачима са својим искуствима..

Са овим кодом који пружа знатно равномерније услове за развој на савременом веб стацку, можемо мирно кренути напред. Можда се сећате да сте морали да направите низ хакова специфичних за прегледач да бисте своју веб страницу структурирали у правом унакрсном претраживачу, креирајући небројени број празних елемената који ће се користити са вашим исеченим сликама или чак писањем превише опширног или сувишног ЈаваСцрипт кода да бисте добили најједноставнија функционалност за рад. Сви ови болови су у неком смислу исти проблеми због којих се данас бринемо. Још увек се боримо за већу контролу и боље алате за борбу против изгледа, стила и функционалности, али на нивоу који је зрео.

Изглед

Цлеарфик

Плутајући елемент уведен је још у ЦСС 2.1, али се никада није показало као потпуно решење којем смо се надали. Један од највећих проблема било је одржавање димензија родитељског елемента када је подређени елемент плутао. Да би се то решило, креирана је техника цлеарфик-а.

Узмите следећи ХТМЛ:

див>
див> ... / див>
див> ... / див>
/ див>

Ову технику је написао Ницолас Галлагхер:

.цлеарфик: пре,
.цлеарфик: након {
садржај: "";
приказ: табела;
}
.цлеарфик: након {
јасно: обоје;
}
.цлеарфик {
* зум: 1;
}

Ако за покретање пројеката користите ХТМЛ5Боилерплате, тада ћете већ имати ову верзију Цлеарфик технике.

Величина кутије

Годинама су програмери расправљали о томе која примена модела кутија има више смисла. Куиркс вс Стандардс режим је заиста значио: „да ли се димензије елемента мењају након постављања, када се примењују обруби и додаци или не“.

Сада се широко слаже да има више смисла да ивице и облоге одузимају расположиви простор унутар елемента, а не додају ширину или висину елемента. Расправа је постала ирелевантна широко распрострањеном применом величине кутија. Прегледач ће узети знаке од вас уместо обрнуто.

Популаризовани од Цхрис Цоииер-а и Паул Ирисх-а, свеобухватна техника може се применити са следећим:

* {
-вебкит-бок-сизинг: бордер-бок;
-моз-бок-сизинг: бордер-бок;
величина кутије: бочна кутија;
}

Расправљало се о коришћењу селектора * у ЦСС-у због потенцијалних погодака перформанси. Овакве тврдње су неозбиљне ако не хипер-оптимизујете све остале аспекте веб локације / апликације. Коришћење оквира бордер учиниће да прегледач дода допуне и обрубе унутар расположивог простора. „Стандардни режим“ се може користити подешавањем величине оквира на бок са садржајем.

Више колона

Веб је био надахнут писаном формом и типом. На несрећу, запели смо у фази пергамента. Неки од ових проблема долазе на врх са дуго очекиваним спецификацијама Пагед-Медиа и ЦСС Регионс. Међутим, први кораци ка изгледима сличнијим часописима предузети су када су прегледачи почели да примењују ЦСС вишеколоне. Код за генерисање овог ефекта је прилично једноставан:

п {
-вебкит-цоунт-цоунт: 2;
-моз-цоунт-цоунт: 2;
број колона: 2;
}

Можете сазнати више о ЦСС3 спецификацији за више колона, као и о резервном ЈаваСцрипту који можете да користите за било који прегледач без подршке, са блога А Лист Апарт.

Калкулације

Израчунавање димензија може бити тешко. У стара времена нисмо имали начина да извршимо било какве јединичне прорачуне, а камоли мешовите прорачуне јединица. То се све променило захваљујући калку. Стварање подстављеног ефекта који не утиче на почетну ширину елемената или користи нешто попут величине оквира: бордер-бок; је донедавно било могуће само додавањем додатних елемената који садрже.

.паддед {
маржа: 0 ауто;
положај: сродник;
ширина: -вебкит-цалц (100% - (20пк * 2));
ширина: -моз-цалц (100% - (20пк * 2));
ширина: калц (100% - (20пк * 2));
}

цалц () брине о правилном израчунавању ширине на основу надређене ширине .паддед и минус дефинисано попуњавање од 20 пиксела. Помножио сам ово са 2 за било коју страну мог елемента, центрирајући елемент користећи релативно позиционирање и аутоматску леву и десну маргину.

Стил

Транспарентност

Добијање правог стила елемента увек је зависило од врсте алата које смо имали на располагању у ЦСС-у. Транспарентност је једна од првих варијанти подршке на коју бисте налетјели почетком до средине 2000-их.

Појавом ХТМЛ5 и фокусиранијих напора на стандардима, прегледачи имају стандардну примену својства опацити и изложили су подршку алфа канала према новој спецификацији модула у боји. То укључује смернице РГБА и ХСЛА.

а {
боја: ргба (0,255,0,0,5);
позадина: ргба (0,0,255,0.05);
граница: ргба (255,0,0,0.5);
}

Можете користити РГБА или ХСЛА боје свуда где бисте пронашли ХЕКС вредности. Постоји и проширена листа забавних боја са дефинисаним именима које можете погледати директно у спецификацији. Они вам добро дођу када желите да направите динамичну мешавину између елемената.

Филтери

ЦСС филтри су изузетно узбудљиви. Имати могућност динамичке промене изгледа и изгледа елемената на страници без потребе за додатним компонентама је невероватно и помоћи ће вам да знатно смањите своје време проведено у Пхотосхопу.

имг срц = "маркет.јпг">
имг {
-вебкит-филтер: сиве скале (100%);
}

ЦСС филтри су тренутно подржани само у прегледачима ВебКит, тако да њихова употреба треба да буде адитивне природе, а не зависна. Прочитајте више овде.

Замена слике

Замена текста сликама постоји већ дуже време. Нажалост, још увек постоје недостаци, што се тиче приступачности, најновијих и најсофистициранијих техника замене слика. Али недавно су изашла на видело двоје који су изузетно паметни и јединствени по својим правима. Прво је написао Сцотт Келлман:

х1 цласс = 'хиде-тект'> Логотип моје веб странице / х1>
.хиде-тект {
увлачење текста: 100%;
празан простор: новрап;
прелив: скривен;
}

Други је написао Ницолас Галлагхер:

.хиде-тект {
фонт: 0/0 а;
тект-схадов: нема;
боја: прозирна;
}

Одзивни видео

Добијање медија до правилног скалирања у прилагодљивом окружењу може бити изазов. Будући да све више веб локација поштује адаптивни дизајн, неопходно је правилно руковати димензијама и односом елемената.

Уграђени видео је једна од најизазовнијих врста медија за препирање због начина на који услуге независних произвођача опслужују садржај. Типични уграђени ИоуТубе изгледа отприлике овако:

ифраме видтх = "640" хеигхт = "390" срц = "хттп: // ввв.иоутубе.цом/ембед/оХг5СЈИРХА0" фрамебордер = "0" алловфуллсцреен = ""> / ифраме>

Елемент ифраме тада садржи Фласх објекат или уграђени елемент. Коришћење нечега попут ифраме {маквидтх: 100%; } неће радити јер угнежђени елементи неће правилно променити величину када се промени ширина. Дакле, морамо направити неке трикове.

див>
ифраме видтх = "640" хеигхт = "390" срц = "хттп://ввв.иоутубе.цом/ембед/оХг5СЈИРХА0" фрамебордер = "0" алловфуллсцреен = ""> / ифраме>
/ див>

Умотавањем ифраме-а у други елемент добићемо контролу која нам је потребна да бисмо додали одговарајућу функционалност која одговара на видео.

.видео {
положај: сродник;
доњи део: 56,25%;
висина: 0;
прелив: скривен;
}
.видео ифраме,
.видео објекат,
.видео ембед {
позиција: апсолутна;
топ: 0;
лево: 0;
ширина: 100%;
висина: 100%;
}

Подешавање доњег дела облоге омота .видео: 56,25%; је чаролија у овој методи. Коришћење облога значи да ће се проценат који се користи заснивати на ширини родитеља; ’56 .25% ’ће створити однос страница 16: 9. Рачунајте сами, ако желите. 9/16 = 0,5625. 0,5625 * 100 = 56,25 (ово је наш проценат).

Функционалност

Лако бирање елемената

С популарношћу бројних ЈаваСцрипт библиотека (на пример, јКуери), одбор ЕЦМАСцрипт и В3Ц стандарди приметили су један од основних делова програмера којима недостаје изворно - добар избор елемената. Методе као што су гетЕлементБиИД () и гетЕлементБиЦлассНаме () биле су брзе, али не тако флексибилне и робусне као покретачки механизми који долазе из заједнице програмера; куериСелецторАлл () је био начин на који тело стандардима опонаша део те флексибилности у изворном методу селектора.

вар итемс = доцумент.куериСелецторАлл (’# хеадер .итем’);

куериСелецторАлл () може се проследити вишеструким и мешовитим селекторима. Прочитајте више о овоме.

Креирање нових низова

Понављање низа је нешто што је постало заморно писати. Писање и преписивање за () петље није забавно. У ЈС верзији 1.6 метода мап () је слетела пружајући подршку за једноставан начин превођења и стварања новог низа од другог.

вар пеопле = ['Хеатхер', 'Јамес', 'Кари', 'Кевин'];
вар добродошлице = пеопле.мап (функција (име) {
врати се ‘Здраво’ + име + ’!’;
});

Покретање овог кода, ако бисмо желели цонсоле.лог (добродошлице), видели бисте добродошлицу, нови је низ [„Хи Хеатхер!“, „Здраво Јамес!“, „Здраво Кари!“, „Здраво Кевине!“ ].

Очистите објекте докумената и прозора

Независне ЈаваСцрипт библиотеке склоне су нереду са изворним објектима докумената и прозора. То може представљати проблем другим библиотекама независних произвођача и програмеру који их укључује. Као било која страна, осигурајте да радите са чистом верзијом оба објекта тако што ћете направити нову инстанцу истих. Најбољи начин да то урадите је стварање елемента ифраме, његово уметање у ДОМ и чување нових инстанци тих објеката.

вар ифраме = доцумент.цреатеЕлемент ('ифраме');
ифраме.стиле.дисплаи = "ниједан";
ифраме = доцумент.боди.аппендЦхилд (ифраме);
вар _виндов = ифраме.цонтентВиндов;
вар _доцумент = ифраме.цонтентДоцумент ||
ифраме.цонтентВиндов.доцумент;
доцумент.боди.ремовеЦхилд (ифраме);

Иако је дошло до великих побољшања у веб стеку, наставак заокруживања и усавршавања нашег технолошког пакета како би се суочили са изазовима са којима се суочавамо у оквиру изгледа, стила и функционалности нашег пројекта и даље је изузетно важан. Да бисмо одржали добар екосистем раста, морамо подстаћи тела која раде на стандардима и добављаче прегледача да наставе са новим спецификацијама и применом иновативних карактеристика, делећи сопствено знање са колегама програмерима и дизајнерима. Више увида, мање хаковања.

Дарци Цларке је награђивани програмер, суоснивач ВордПресс тематске компаније Тхемифи и сакупљача дневних трансакција ДеалПаге и члан јКуери тима. Ради у компанији Полар Мобиле као старији УКС програмер.