Essential HTML, CSS жана JavaScript техникалары

Автор: Monica Porter

Жаратылган Күнү: 22 Март 2021

Жаңыртуу Күнү: 17 Май 2024

Видео: ? как БЫСТРО УЛУЧШИТЬ мое SEO с помощью 15 ЗОЛОТЫХ МЕТОД...

Мазмун

Макет
Clearfix
Кутунун өлчөмүн аныктоо
Көп тилке
Эсептөөлөр
Style
Ачыктык
Чыпкалар
Сүрөттү алмаштыруу
Жооптуу видео
Функционалдык
Элементтерди оңой тандоо
Жаңы массивдерди түзүү
Документ жана терезе объектилерин тазалоо
Бул жактыбы? Буларды оку!

Бул макала биринчи жолу .net журналынын 234-санында пайда болду - бул веб-дизайнерлер жана иштеп чыгуучулар үчүн дүйнөдөгү эң көп сатылган журнал.

Техника, анын өзөгүндө, тапшырманы аткаруунун жолу болуп саналат жана алдыңкы иштеп чыгуучулар жана дизайнерлер болгондуктан, биздин алдыбызда көптөгөн милдеттер турат. Айтор, биз бул пейзаж канчалык өзгөргөнүн унутуп калабыз. 2002-жылдан 2010-жылга чейин биздин коом кодекстин жана ресурстардын толуп кетишинен улам чирип, натыйжалуулукка жана тейлөөгө тоскоол болду. Муну жеңүү үчүн биз бир катар кеңештерди, фокустарды жана хактарды түздүк, аларды "техника" деп атадык. Биз дагы эле тапшырмаларды эң натыйжалуу жол менен аткарып жаткан жокпуз.

360 жасоо менен, акыркы бир нече жылда стандарттар жана стандарттар жакшыраак колдонула баштады, бул биздин коом катары жаңы жана алдыңкы ‘ыкмаларды’ өркүндөтүүгө мүмкүнчүлүк берди. Бул жаңы пейзаж "заманбап желе" деп эсептелет.

"Веб 2.0" токтоп, түшүнүксүз болуп калгандыктан, "заманбап желе" дагы ошондой болот. Ага убакыт берүү. Айтор, азырынча биз терминди эмнени билдирерин жалпы түшүнүк болгондо колдонуп, кыянаттык менен колдоно алабыз.

2010-жылы HTML5 спецификациясы конуп, жапжаңы, жарым стандартташтырылган веб-чөйрөнү камсыз кылды. Opera, Firefox, Chrome жана Safari сыяктуу браузерлер бул жаңы толкунду кучагына алышты жана өз командаларын стандарттарды ишке ашыруунун жана API чалгындоонун жаңы чектерине түртүштү. Бул браузерлердин канчалык деңгээлде "бортто" экени жөнүндө түшүнүк берүү үчүн, www.html5readiness.com HTML5 колдоосун өзгөртүү боюнча визуалдаштырууларын текшериңиз.

Internet Explorerде колдоонун жоктугу жөнүндө кабатыр болбоңуз. Google Chrome Frameнин жардамы менен буга каршы тура алабыз. Google аны 2010-жылы киргизгенден бери, Internet Explorerди колдоо механизми болуп калды. IEдин бардык версиялары Chrome Frame менен багытталышы мүмкүн, бул жаңы колдонуучуну IE ичинде Chromeдун жеңил нускасы менен иштелип чыккан веб-сайттарды сунуштаган плагинди жүктөөгө түртөт. Chrome Frameди ишке ашыруу үчүн, төмөнкү мета> тегди сайтыбыздын башына> тегине кошобуз.

мета 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 "> / скрипт>
скрипт>
window.onload = function () {
CFInstall.check ({
режими: "катмар",
көздөгөн жер: "http://www.yourdomain.com"
});
};
/ скрипт>

көздөгөн плагинди орноткондон кийин колдонуучуну белгилүү бир шилтемеге жөнөтүү үчүн коюлушу мүмкүн. Эскертүү: Chrome Frame бизге чындыгында заманбап браузерлер үчүн такай иштеп чыгуу ыкмасын берсе дагы, колдонуучу каалабаса, плагинди жүктөп албоо мүмкүнчүлүгү бар экендигин унутпашыбыз керек. Эгер андай болбосо, сизден IEдин тигил же бул башка версияларына колдоо көрсөтүү талап кылынса, анда сиз тажрыйбаңызды, кросс-браузериңиз менен эмне бере алаарыңызды жана бере албай турганыңызды билүү үчүн дагы бир аз убакыт коротушуңуз керек..

Ушул коддун жардамы менен заманбап веб стекти өнүктүрүүгө бир топ деңгээлдеги шарттар түзүлүп, биз өз акылыбыз менен алдыга жыла алабыз. Сайттын структурасын туура кросс-браузерге өткөрүү үчүн бир нече браузерге тиешелүү хакерлерди жаратуу керектигин, кесилген сүрөттөрүңүз менен сансыз көп бош элементтерди жаратып, атүгүл ашыкча же ашыкча JavaScript кодун жазып, жөнөкөй иштөө функционалы. Ушул оорулардын бардыгы, кандайдыр бир мааниде, биз бүгүн тынчсызданып жаткан көйгөйлөр. Биз макет, стиль жана функционалдуулукка каршы күрөшүү үчүн көбүрөөк көзөмөл жана мыкты шаймандар үчүн күрөшүп жатабыз, бирок жетилген деңгээлде.

Макет

Clearfix

Калкып жүрүүчү элемент CSS 2.1ге кайра киргизилген, бирок эч качан биз күткөндөй толук чечим болгон эмес. Эң чоң көйгөйлөрдүн бири, бала элементин сүзүп жатканда, ата-эненин өлчөмүн сактоо болгон. Муну чечүү үчүн clearfix техникасы түзүлгөн.

Төмөнкү HTMLди алыңыз:

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

Бул техниканы Николас Галлахер жазган:

.clearfix: мурун,
.clearfix: кийин {
мазмуну: "";
дисплей: стол;
}
.clearfix: кийин {
ачык: экөө тең;
}
.clearfix {
* чоңойтуу: 1;
}

Эгер сиз долбоорлорду баштоо үчүн HTML5Boilerplate колдонсоңуз, анда Clearfix техникасынын ушул версиясы бышып калган болот.

Кутунун өлчөмүн аныктоо

Көп жылдан бери иштеп чыгуучулар кайсы кутуча моделин ишке ашыруу көбүрөөк мааниге ээ деп талашып келишкен. Quirks жана Стандарттар режими чындыгында төмөнкүнү билдирген: 'элементтин өлчөмдөрү орнотулгандан кийин, чек аралар жана пломбалар колдонулганда өзгөрүшү керекпи же жокпу'.

Азыр элементтердин кеңдигине же бийиктигине кошпостон, элементтердин ичиндеги мейкиндиктен чек араларды жана толтурууларды алып коюу көбүрөөк мааниге ээ экендиги жалпы кабыл алынды. Дебат кутучанын өлчөмүн кеңири жайылтуу менен эч кандай мааниге ээ эмес. Браузер сизден тескерисинче, өз белгилерин алат.

Крис Койье жана Пол Ирландия популярдуулукка ээ, ар тараптуу техниканы төмөнкүлөр менен жүзөгө ашырууга болот:

* {
-webkit-box-sizeing: border-box;
-moz-box-sizeing: border-box;
кутуча өлчөө: чек ара кутусу;
}

* Селекторун CSSте колдонуу талаш-тартышка учурады, анткени потенциалга жетишти. Вебсайтыңыздын / колдонмоңуздун бардык башка аспектилерин оптималдаштырбасаңыз, мындай дооматтар жеңил-желпи мүнөзгө ээ. Чек ара кутучасын колдонуу браузерге бош мейкиндиктин ичине толтурууну жана чектерди кошууга мүмкүндүк берет. 'Стандарттар режими' кутучанын өлчөмүн мазмунуна орнотуу менен колдонсо болот.

Көп тилке

Веб жазуу түрүндө жана түрүндө чоң шыктандырган. Тилекке каршы, биз пергамент баскычында калдык. Бул көйгөйлөрдүн айрымдары көптөн бери күтүлүп жаткан Paged-Media жана CSS Regions мүнөздөмөлөрү менен чечилип жатат. Айтор, журналга окшош макеттерге биринчи кадамдар браузерлер CSS көп мамычаларын колдоно баштаганда жасалды. Бул эффектти жаратуучу код жөнөкөй:

p {
-webkit-column-count: 2;
-moz-column-count: 2;
мамыча саны: 2;
}

Сиз CSS3 көп тилкелүү спецификациясы жөнүндө, ошондой эле каалаган браузер үчүн колдоого алына турган JavaScript резервдик көчүрмөсү жөнүндө A List Apart блогунан көбүрөөк биле аласыз.

Эсептөөлөр

Өлчөмдөрдү эсептөө кыйын болушу мүмкүн. Илгери илгери бизде бирдик эсептөөнү, ал тургай аралаш бирдикти эсептөөнү жүргүзүүгө эч кандай мүмкүнчүлүк жок болчу. Бардыгы кальктын жардамы менен өзгөрдү. Баштапкы элементтердин туурасына таасир этпеген толтурулган эффектти түзүү же кутуча-өлчөмдөө сыяктуу бир нерсени колдонуу: border-box; жакынкы убакка чейин кошумча камтыган элементтерди кошуу менен гана мүмкүн болгон.

.padded {
маржа: 0 авто;
кызмат: салыштырмалуу;
туурасы: -webkit-кальц (100% - (20px * 2));
туурасы: -moz-calc (100% - (20px * 2));
туурасы: calc (100% - (20px * 2));
}

calc () .padded энесинин туурасынан жана 20px толтурулган минусунан алып, туура туураны эсептөөнү жүргүзөт. Салыштырмалуу жайгаштырууну жана сол жана оң маржа авто унааларын колдонуп, элементти борборлоштуруп, элементимдин эки тарабы үчүн муну 2ге көбөйттүм.

Style

Ачыктык

Элементтин туура стилин алуу ар дайым биздин CSS'те болгон куралдардын түрүнө байланыштуу болуп келген. Ачыктык - 2000-жылдардын башында жана орто ченинде пайда болгон алгачкы колдоо варианттарынын бири.

HTML5 пайда болуп, бир топ стандарттуу аракеттер көрүлүп, браузерлер тунуктук касиетин стандарттуу түрдө ишке ашырып, жаңы Түстөр модулунун спецификациясына ылайык альфа каналынын колдоосуна ээ болушту. Бул RGBA жана HSLA колдонмолорун камтыйт.

a {
түс: rgba (0,255,0,0.5);
background: rgba (0,0,255,0.05);
чек: rgba (255,0,0,0.5);
}

REXA же HSLA түстөрүн HEX баалуулуктарын кайда гана колдонсоңуз болот. Белгиленген аталыштагы кызыктуу түстөрдүн кеңейтилген тизмеси да бар, аларды спецификациядан көрө аласыз. Бул элементтердин ортосунда динамикалык аралашма түзгүңүз келгенде, пайдалуу болот.

Чыпкалар

CSS чыпкалары аябай кызыктуу. Үчүнчү тараптын плагиндерин колдонбостон, баракчанын элементтеринин көрүнүшүн жана сезимин динамикалык түрдө өзгөртүү мүмкүнчүлүгүнө ээ болуу таң калыштуу жана Photoshopко кетирген убактыңызды бир топ кыскартууга жардам берет.

img src = "market.webp">
img {
-webkit-чыпкасы: боз түс (100%);
}

CSS чыпкалары учурда гана WebKit браузерлеринде колдоого алынат, андыктан аларды колдонуу көз каранды эмес, кошумча мүнөздө болушу керек. Кененирээк бул жерден окуй аласыз.

Сүрөттү алмаштыруу

Текстти сүрөт менен алмаштыруу илгертен бери эле болуп келген. Тилекке каршы, сүрөттү алмаштыруунун эң акыркы жана эң татаал ыкмаларынын кемчиликтери дагы, жеткиликтүүлүгү дагы бар. Бирок экөө жакында эле өтө акылдуу жана өз укуктары боюнча уникалдуу болуп жарыкка чыгышты. Биринчисин Скотт Келлман жазган:

h1 class = ’hide-text’> Менин вебсайтымдын Логотиби / h1>
.hide-text {
тексттик чегинүү: 100%;
white-space: nowrap;
толуп кетүү: жашырылган;
}

Экинчисин Николас Галлахер жазган:

.hide-text {
арип: 0/0 a;
text-shadow: none;
түс: тунук;
}

Жооптуу видео

Жооптуу чөйрөдө туура масштабда маалымат каражаттарын алуу кыйынга турушу мүмкүн. Адаптацияланган дизайнды урматтаган веб-сайттар көбөйгөн сайын, элементтердин өлчөмдөрүн жана кадрлардын катышын туура иштетүү керек.

Камтылган видео үчүнчү жактын кызматтары камтылгандыктан, талашуу кыйын болгон медианын түрлөрүнүн бири болду. Кадимки 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'ди башка бир элементке ороп, видеого туура жооп берүүчү функцияны кошуу үчүн бизге көзөмөлдү камсыз кылабыз.

.video {
кызмат: салыштырмалуу;
толтуруу-асты: 56,25%;
бийиктиги: 0;
толуп кетүү: жашырылган;
}
.video iframe,
.video object,
.video embed {
абалы: абсолюттук;
top: 0;
left: 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 (функция (ат))
return 'Hi' + name + '!';
});

Бул кодду иштетүү, эгер биз console.log (кабыл алабыз) десеңиз, анда кабыл алгандар жаңы массив болуп саналат [‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Hi!’ ].

Документ жана терезе объектилерин тазалоо

Үчүнчү тараптын 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 иштеп чыгуучусу болуп иштейт.