Негізгі HTML, CSS және JavaScript техникасы

Автор: Monica Porter

Жасалған Күн: 22 Сапта Жүру 2021

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

Мазмұны

Орналасу
Clearfix
Қораптың өлшемі
Көп баған
Есептеулер
Стиль
Мөлдірлік
Сүзгілер
Кескінді ауыстыру
Жауапты видео
Функционалдылық
Элементтерді оңай таңдау
Жаңа массивтер құру
Құжат пен терезе нысандарын тазалаңыз
Ұнады ма? Оларды оқыңыз!

Бұл мақала веб-дизайнерлер мен әзірлеушілерге арналған әлемдегі ең көп сатылатын журнал .net журналының 234 санында алғаш пайда болды.

Техника, негізінде, бұл тапсырманы орындау тәсілі болып табылады, және біз дамытушылар мен дизайнерлер бола отырып, көптеген міндеттер қоямыз. Біз бұл пейзаждың қаншалықты өзгергенін жиі ұмытып кетеміз. 2002 жылдан 2010 жылға дейін біздің қоғамдастық код пен ресурстардың толып кетуіне байланысты шіріді, бұл жұмыс пен қызмет ету қабілетіне кедергі болды. Мұны жеңу үшін біз «техника» деп атаған кеңестер, трюктер мен хакерлерді жасадық. Біз әлі де тапсырмаларды тиімді түрде орындап жатқан жоқпыз.

360 жасасаңыз, соңғы бірнеше жыл стандарттар мен стандарттардың жақсырақ енгізілуін байқады, бұл біздің қоғамдастыққа жаңа және жетілдірілген «техниканы» дамытуға мүмкіндік берді. Бұл жаңа пейзаж «заманауи желі» болып саналады.

‘Web 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-ді енгізу үшін сайттың бас> тегіне келесі мета> тегті қосамыз.

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 «> / скрипт>
сценарий>
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 Аймақтарының техникалық сипаттамаларына сәйкес келеді. Журналға ұқсас макеттерге алғашқы қадамдар браузерлер CSS көп бағаналарын енгізе бастаған кезде басталды. Бұл эффектті тудыратын код өте қарапайым:

p {
-webkit-баған-санау: 2;
-moz-column-count: 2;
баған саны: 2;
}

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

Есептеулер

Өлшемдерді есептеу қиын болуы мүмкін. Бұрынғы кездерде бізде бірліктерді есептеудің бір түрі де, аралас бірліктерді есептеу де мүмкін емес еді. Мұның бәрі кальцийдің арқасында өзгерді. Бастапқы элементтердің еніне әсер етпейтін толтырылған эффект құру немесе қораптың өлшемі сияқты нәрсені қолдану: border-box; жақында ғана қосымша элементтерді қосу арқылы мүмкін болды.

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

calc () .padded-дің ендік ені мен анықталған 20px толтырғышын алып тастап, енін дұрыс есептеуді қадағалайды. Салыстырмалы орналастыруды қолданатын және солға және оңға шетін автоматты түрде қолдана отырып, элементті центрлеп, элементімнің екі жағына да 2-ге көбейттім.

Стиль

Мөлдірлік

Элементтің дұрыс стилін алу әрдайым біздің CSS-тегі қол жетімді құралдар түріне байланысты болды. Мөлдірлік - бұл сіз 2000-шы жылдардың басында және ортасында кездесетін алғашқы қолдау нұсқаларының бірі.

HTML5 пайда болған кезде және одан да көп бағытталған стандартты күштермен браузерлерде мөлдірлік қасиеті стандартты түрде енгізіліп, жаңа түсті модуль спецификациясына сәйкес альфа-каналды қолдауға ие болды. Бұл RGBA және HSLA нұсқауларын қамтиды.

a {
түсі: 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»>
img {
-webkit-сүзгі: сұр түсті (100%);
}

CSS сүзгілеріне WebKit браузерлерінде ғана қолдау көрсетіледі, сондықтан оларды қолдану тәуелді емес, аддитивті сипатта болуы керек. Толығырақ мына жерден оқыңыз.

Кескінді ауыстыру

Мәтінді суреттермен ауыстыру бұрыннан бар. Өкінішке орай, кескінді ауыстырудың ең жаңа және күрделі әдістеріне қатысты қол жетімділікке байланысты кемшіліктер әлі де бар. Бірақ екеуі жақында өте ақылды және өз құқықтарымен ерекше жарыққа шықты. Біріншісін Скотт Келлман жазды:

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

Екіншісін Николас Галлахер жазды:

.hid-text {
қаріп: 0/0 a;
мәтін көлеңкесі: жоқ;
түс: мөлдір;
}

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

Бұқаралық ақпарат құралдарын жауап беру ортасында дұрыс масштабтау қиын болуы мүмкін. Адаптивті дизайнды құрметтейтін веб-сайттардың саны артқан сайын элементтердің өлшемдері мен арақатынасын дұрыс өңдеу қажет.

Кірістірілген бейне үшінші тарап қызметтері мазмұнды қалай ұсынатындығына байланысты бұқаралық ақпарат құралдарының ең күрделі түрлерінің бірі болды. Әдеттегі 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,
. бейне нысаны,
.видео ендіру {
позиция: абсолютті;
жоғарғы: 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 (функция (аты) {
return ‘Hi’ + name + ’!’;
});

Бұл кодты іске қосу, егер біз console.log (қоштасады) болсақ, қош келдіңіз деген жаңа массив болады [‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Hello 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);

Веб-стекте үлкен жақсартулар болғанымен, жобаның макеті, стилі мен функционалдығы шеңберінде кездесетін мәселелерді шешуге арналған технологиялық жиынтығымызды әрі қарай жетілдіру және жетілдіру әлі де өте маңызды. Жақсы өсу экожүйесін қолдау үшін біз стандарттар мен браузерлерді сатушыларды прогресстің жаңа сипаттамалармен және инновациялық мүмкіндіктермен ілгерілеуін жалғастыруымыз керек, сонымен бірге өз білімімізді әзірлеушілер мен дизайнерлермен бөлісуіміз керек. Түсініктер көп, хактар аз.

Дарси Кларк - марапатты әзірлеуші, Themify және DealPage күнделікті келісім агрегаторы WordPress тақырыптық компаниясының негізін қалаушы және jQuery тобының мүшесі. Ол Polar Mobile-да UX аға әзірлеушісі ретінде жұмыс істейді.