Муҳимтарин усулҳои HTML, CSS ва JavaScript

Муаллиф: Monica Porter

Санаи Таъсис: 22 Март 2021

Навсозӣ: 17 Май 2024

Муҳимтарин усулҳои HTML, CSS ва JavaScript - Эҷодӣ

Мундариҷа

Тарҳ
Clearfix
Андозагирии қуттӣ
Сутунҳои бисёрҷониба
Ҳисобҳо
Услуб
Шаффофият
Филтрҳо
Иваз кардани тасвир
Видеои ҷавобгӯ
Функсия
Интихоби элементҳо
Эҷоди массивҳои нав
Объектҳо ва равзанаҳоро тоза кунед
Ин ба шумо писанд омад? Инҳоро бихонед!

Ин мақола бори аввал дар шумораи 234 маҷаллаи .net - серхаридортарин маҷаллаи ҷаҳон барои тарроҳон ва таҳиягарони веб пайдо шуд.

Техника, дар асл, як роҳи иҷрои вазифа аст ва чун таҳиягарон ва тарроҳони пешрафта ҳастем, мо вазифаҳои зиёде дорем. Гуфтанд, ки мо аксар вақт фаромӯш мекунем, ки ин манзара чӣ қадар тағир ёфтааст. Аз соли 2002 то 2010 ҷомеаи мо бо коди ва манбаи захираҳо пӯсида буд, ки ба кор ва нигоҳдории он халал мерасонд. Барои бартараф кардани ин, мо як қатор маслиҳатҳо, ҳилаҳо ва ҳакерҳоро офаридаем, ки онҳоро "техника" ном гузоштаем. Мо ҳанӯз вазифаҳоро иҷро мекардем, на танҳо ба таври муассир.

Бо 360 кор кардан, дар чанд соли охир татбиқи стандартҳо ва стандартҳои беҳтарро мушоҳида карданд, ки ба мо ҳамчун ҷомеа имкон медиҳанд, ки ‘усулҳои’ навтар ва пешрафтаро таҳия намоем. Ин манзараи нав он чизе аст, ки "веби муосир" ҳисобида мешавад.

Азбаски ‘Web 2.0’ рукуд ва печида шуд, ‘веби муосир’ низ чунин хоҳад шуд. Он вақт диҳед. Гуфта мешавад, ки ҳоло, мо метавонем истилоҳро истифода барем ва сӯиистифода кунем, ба шарте ки фаҳмиши муштараки он чӣ ифода мекунад.

Дар соли 2010 мушаххасоти HTML5 фуруд омада, як муҳити нави веб-нимтайёрро фароҳам овард. Браузерҳо, ба монанди Opera, Firefox, Chrome ва Safari ин мавҷи навро пазируфтанд ва гурӯҳҳои худро ба сӯи меъёрҳои нави татбиқи стандартҳо ва ҷустуҷӯи API тела доданд. Барои ба шумо тасаввурот додан дар бораи он, ки ин браузерҳо чӣ гуна 'onboard' мебошанд, визуалҳои www.html5readiness.com дар бораи тағир додани дастгирии HTML5 -ро санҷед.

Аз набудани дастгирӣ дар Internet Explorer хавотир нашавед. Мо метавонем бо шарофати Google Chrome Frame мубориза барем. Аз он даме, ки Google онро дар соли 2010 ҷорӣ кард, он механизми дастгирии Internet Explorer гардид. Ҳама версияҳои IE метавонанд бо Chrome Frame равона карда шаванд, ки ин корбари навро барои зеркашии плагин, ки вебсайтҳои интихобшударо бо версияи сабуки Chrome, дар дохили IE пешниҳод мекунад, водор мекунад. Барои татбиқи Chrome Frame мо мета> теги зеринро дар дохили сарлавҳаи сайти худ илова мекунем.

meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />

Аз ин ҷо мо метавонем аз корбарони IE хоҳиш кунем, ки плагинро, агар ҳанӯз насб нашуда бошад, бо истифода аз JavaScript зеркашӣ кунанд:

навъи скрипт = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
скрипт>
window.onload = function () {
CFInstall.check ({
режим: "overlay",
таъинот: "http://www.yourdomain.com"
});
};
/ скрипт>

таъинотро барои фиристодани корбар ба пайванди муайян пас аз насби плагин таъин кардан мумкин аст. Як сухани эҳтиёт: гарчанде ки Chrome Frame ба мо усули таҳияи қатъии браузерҳои воқеан муосирро медиҳад, мо набояд фаромӯш кунем, ки корбар имкон дорад плагинро зеркашӣ кунад, агар онҳо нахоҳанд. Агар ин тавр набошад ва аз шумо талаб карда мешавад, ки барои як ё дигар версияҳои гуногуни IE дастгирӣ кунед, шумо бояд боз вақти бештареро ёбед, то бо таҷрибаҳои худ, кросс-браузер фаҳмед, ки шумо чӣ карда метавонед ва наметавонед..

Бо ин рамз, шароити мусоиди назарраси бештареро фароҳам меорад, ки дар веб-стаки муосир рушд кунад, мо метавонем бо ақли худ ба осонӣ пеш равем. Шояд шумо дар хотир дошта бошед, ки барои сохтани сайти худ якчанд крекҳои махсуси браузер эҷод кардан лозим аст, шумораи зиёди элементҳои холиро барои истифода бо тасвирҳои буридаи шумо эҷод кардан, ё ҳатто навиштани рамзи JavaScript аз ҳад зиёд ё зиёдатӣ соддатарин функсия барои кор. Ҳамаи ин дардҳо, ба баъзе маъно, ҳамон мушкилоте мебошанд, ки мо имрӯз онҳоро нигарон мекунем. Мо то ҳол барои назорати бештар ва воситаҳои беҳтарини мубориза бо тарҳ, услуб ва кор мубориза мебарем, аммо дар сатҳи пухта.

Тарҳ

Clearfix

Элемент дар шиноварӣ дар CSS 2.1 ҷорӣ карда шуда буд, аммо ҳеҷ гоҳ ҳалли пурраи мо набуд. Яке аз мушкилоти калон ин нигоҳ доштани андозаи унсури волидайн ҳангоми шино кардани унсури кӯдакон буд. Барои ҳалли ин масъала, техникаи Clearfix сохта шудааст.

HTML-и зеринро гиред:

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

Ин техникаро Николас Галлахер навиштааст:

.clearfix: пеш,
.clearfix: баъд аз {
мундариҷа: "";
намоиш: ҷадвал;
}
.clearfix: баъд аз {
равшан: ҳарду;
}
.clearfix {
* масштаб: 1;
}

Агар шумо HTML5Boilerplate -ро барои оғози лоиҳаҳои худ истифода баред, пас шумо аллакай ин версияи техникаи clearfix-ро пухтаед.

Андозагирии қуттӣ

Тӯли солҳо таҳиягарон баҳс мекарданд, ки татбиқи кадом модели қуттӣ бештар маъно дорад. Quirks ва ҳолати стандартҳо воқеан чунин маъно доштанд: ‘оё андозаи элемент пас аз гузоштан, вақте ки марзҳо ва андоваҳо татбиқ мешаванд ё тағир ёбад, тағир ёбад '.

Ҳоло ба таври васеъ мувофиқа карда шудааст, ки сарҳадҳо ва ҷойивазкунӣ аз фазои мавҷуд дар дохили як элемент дур карда, ба паҳнӣ ё баландии унсур илова накунанд, бештар маъно дорад. Мубоҳиса бо татбиқи васеи қуттичаҳо номарбуте карда шуд. Браузер нишонаҳои худро ба ҷои шумо мегирад.

Крис Койер ва Пол Ирландӣ маъмуланд, техникаи ҳамаҷонибаро бо чунин амалӣ кардан мумкин аст:

* {
-webkit-box-sizing: box-box;
-moz-box-sizeing: ҳудуди box;
андозаи қуттӣ: қуттии ҳудуд;
}

Истифодаи * селектор дар CSS бо сабаби зарбаҳои эҳтимолии иҷроиш баҳс шудааст. Ин гуна даъвоҳо сабукфикрона мебошанд, агар шумо ҳамаи ҷанбаҳои дигари вебсайт / барномаро оптимизатсия накунед. Истифодаи box-box ба браузер иловаҳо ва ҳудуди дохили маҷмӯи фазои дастрасро меорад. 'Усули стандартҳо' метавонад бо гузоштани андозаи қуттӣ ба мундариҷа истифода шавад.

Сутунҳои бисёрҷониба

Веб аз шакли хаттӣ ва навъи он илҳом гирифта буд. Мутаассифона, мо дар марҳилаи коғазӣ мондем. Баъзе аз ин масъалаҳо бо мушаххасоти деринтизор интишоршудаи Paged-Media ва CSS минтақаҳо ба анҷом мерасанд. Гуфта мешавад, ки қадамҳои аввал дар самти тарҳбандии бештар ба маҷалла, вақте браузерҳо ба татбиқи бисёрсутунҳои CSS шурӯъ карданд. Рамзи тавлиди ин таъсир хеле содда аст:

саҳ {
-webkit-сутун-ҳисоб: 2;
-moz-column-count: 2;
сутун-ҳисоб: 2;
}

Шумо метавонед дар бораи мушаххасоти сершумори CSS3 ва инчунин бозгашти JavaScript, ки шумо метавонед барои ягон браузер бе дастгирӣ аз блоги A List Apart омӯзед.

Ҳисобҳо

Андозаҳоро ҳисоб кардан душвор буда метавонад. Ҳанӯз дар замонҳои қадим, мо ҳеҷ гуна роҳи ҳисоб кардани воҳидҳоро надоштем, чӣ расад ба ҳисобу китоби омехта. Ин ҳама ба шарофати калс тағйир ёфт. Таъсиси эффектҳои паҳншуда, ки ба паҳнии унсурҳои ибтидоӣ таъсир намерасонанд ё чизе ба монанди box-sizeing истифода мебаранд: border-box; то ба наздикӣ танҳо бо роҳи илова кардани унсурҳои иловагии имконпазир буд.

.padded {
маржа: 0 худкор;
мавқеъ: нисбӣ;
паҳнои: -webkit-calc (100% - (20px * 2));
паҳнои: -moz-calc (100% - (20px * 2));
паҳнои: calc (100% - (20px * 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);
}

Шумо метавонед рангҳои RGBA ё HSLA-ро дар ҳар ҷое ки арзишҳои HEX пайдо кунед истифода баред. Инчунин рӯйхати васеъи рангҳои шавқовар бо номҳои муайян мавҷуд аст, ки шумо метавонед онҳоро дар хусусият санҷед. Вақте ки шумо мехоҳед омехтаи динамикии байни унсурҳоро эҷод кунед, инҳо муфиданд.

Филтрҳо

Филтрҳои CSS бениҳоят ҳаяҷоноваранд. Доштани қобилияти ба таври динамикӣ тағир додани намуди зоҳирӣ ва ҳисси унсурҳо дар саҳифа бидуни ниёз ба плагинҳои шахси сеюм аҷиб аст ва ба коҳиши вақти шумо дар Photoshop кумак мекунад.

img src = "market.webp">
имг {
-webkit-филтр: хокистарӣ (100%);
}

Филтрҳои CSS танҳо айни замон дар браузерҳои WebKit дастгирӣ карда мешаванд, бинобар ин истифодаи онҳо бояд хусусияти иловагӣ дошта бошад, на вобаста. Муфассалтар дар ин ҷо

Иваз кардани тасвир

Иваз кардани матн бо тасвирҳо кайҳо боз вуҷуд дорад. Мутаассифона, ҳанӯз ҳам камбудиҳо, аз ҷиҳати дастрасӣ нисбат ба навтарин ва мукаммалтарин усулҳои иваз кардани тасвир мавҷуданд. Аммо чанде пештар ду нафаре пайдо шуданд, ки бениҳоят доно ва дар ҳуқуқҳои худ беназиранд. Аввалин Скотт Келлман навишта буд:

h1 class = ’hide-text’> Логотипи вебсайти ман / h1>
.hide-text {
матн-ишора: 100%;
фазои сафед: nowrap;
лабрез шудан: пинҳон;
}

Дуввумро Николас Галлахер навиштааст:

.hide-text {
ҳуруф: 0/0 a;
сояи матн: ҳеҷ;
ранг: шаффоф;
}

Видеои ҷавобгӯ

Гирифтани васоити ахбори омма дар муҳити ҷавобгӯ метавонад душвор бошад. Бо торафт бештар вебсайтҳое, ки ба тарҳи мутобиқшавӣ эҳтиром мегузоранд, ба андозаи дуруст ва таносуби унсурҳо дуруст муносибат кардан муҳим аст.

Видеои дарунсохташуда яке аз намудҳои мушкилтарини ВАО буд, ки бо сабаби он, ки хидматҳои тарафи сеюм мундариҷаро чӣ гуна пешниҳод мекунанд. Як embed маъмулии YouTube чунин менамояд:

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

Пас унсури iframe дорои объекти Flash ё унсури embed мебошад. Истифодаи чизе монанди iframe {maxwidth: 100%; } кор нахоҳад кард, зеро унсурҳои лона ҳангоми тағир ёфтани паҳн андозаи худро дуруст тағир намедиҳанд. Ҳамин тавр, мо бояд ҳиллае анҷом диҳем.

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

Печондани iframe дар унсури дигар ба мо назоратро фароҳам меорад, ки ба видеои нав вазифаи дурусти ҷавобгӯро илова кунем.

.видео {
мавқеъ: нисбӣ;
чуқурӣ-поёни: 56,25%;
баландӣ: 0;
лабрез шудан: пинҳон;
}
.video iframe,
объекти видеоӣ,
.видео ҷойгиркунӣ {
мавқеъ: мутлақ;
боло: 0;
чап: 0;
паҳнӣ: 100%;
баландӣ: 100%;
}

Муқаррар кардани ҷойпӯшии печиши .video: 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 () -ро интихобкунандагони сершумор ва омехта додан мумкин аст. Муфассал дар бораи ин.

Эҷоди массивҳои нав

Такрор кардани массив чизест, ки барои навиштан хаста шудааст. Навиштан ва аз нав навиштан барои () ҳалқаҳо шавқовар нест. Дар версияи JS 1.6 усули map () ба дастгирии усули осон барои такроркунӣ ва сохтани массиви нав аз дигар фаромад.

var people = ['Хизер', 'Ҷеймс', 'Кари', 'Кевин'];
var welcomees = people.map (функсия (ном) {
баргаштан 'Hi' + name + '!';
});

Иҷрои ин рамз, агар мо ба console.log (истиқбол кунем) шумо мебинед, ки истиқболи ин массиви нав аст [‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Hi Kevin! ].

Объектҳо ва равзанаҳоро тоза кунед

Китобхонаҳои тарафи сеюми 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 ва узви Team jQuery мебошад. Вай дар Polar Mobile ҳамчун таҳиягари калони UX кор мекунад.