Задаволены
- Макет
- Clearfix
- Памер скрынкі
- Шматкалонныя
- Разлікі
- Стыль
- Празрыстасць
- Фільтры
- Замена малюнка
- Спагадны відэаролік
- Функцыянальнасць
- Лёгкі выбар элементаў
- Стварэнне новых масіваў
- Ачыстка аб'ектаў дакумента і акна
- Спадабалася гэта? Прачытайце гэтыя!
Гэты артыкул упершыню з'явіўся ў нумары 234 часопіса .net - самага прадаванага ў свеце часопіса для вэб-дызайнераў і распрацоўшчыкаў.
Тэхніка па сваёй сутнасці - гэта спосаб выканаць задачу, і, будучы распрацоўшчыкам і дызайнерам, у нас шмат задач. Тым не менш, мы часта забываемся, наколькі змяніўся гэты пейзаж. З 2002 па 2010 год наша супольнасць была сапсавана кодам і рэсурсамі, што перашкаджала прадукцыйнасці і рамонту. Каб пераадолець гэта, мы стварылі мноства парад, хітрасцяў і хакераў, якія мы назвалі "тэхніка". Мы ўсё яшчэ выконвалі задачы, толькі не самым эфектыўным чынам.
Робячы 360, у апошнія некалькі гадоў ажываюць лепшыя стандарты і ўкараненне стандартаў, што дазваляе нам як супольнасці распрацоўваць новыя і больш дасканалыя "метады". Гэты новы ландшафт - гэта тое, што лічыцца "сучасным сецівам".
Паколькі "Web 2.0" стаў застойным і заблытаным, таксама стане і "сучасны Інтэрнэт". Дайце яму час. Тым не менш, на дадзены момант мы можам выкарыстоўваць і злоўжываць гэтым тэрмінам, пакуль існуе агульнае разуменне таго, што ён уяўляе.
У 2010 годзе з'явілася спецыфікацыя HTML5, якая забяспечвае абсалютна новае, напаў стандартызаванае вэб-асяроддзе. Такія браўзэры, як Opera, Firefox, Chrome і Safari, успрынялі гэтую новую хвалю і падштурхнулі свае распрацоўшчыкі да новых межаў укаранення стандартаў і вывучэння API. Каб даць вам уяўленне пра тое, наколькі гэтыя "браўзэры" "убудаваныя", праверце візуалізацыю змены падтрымкі HTML5 на сайце www.html5readiness.com.
Не хвалюйцеся з-за адсутнасці падтрымкі ў Internet Explorer. Мы можам змагацца з гэтым дзякуючы Google Chrome Frame. Паколькі Google прадставіў яго ў 2010 годзе, ён стаў механізмам падтрымкі Internet Explorer. Усе версіі IE могуць быць арыентаваны на Chrome Frame, што прапануе новаму карыстальніку загрузіць убудову, якая адлюстроўвае сайты з палегчанай версіяй Chrome унутры IE. Для рэалізацыі Chrome Frame мы дадаем наступны мета> тэг у тэг head> сайта.
meta http-equiv = "X-UA-Сумяшчальны" 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 ({
рэжым: "накладанне",
пункт прызначэння: "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.
Памер скрынкі
Шмат гадоў распрацоўшчыкі абмяркоўвалі, якая мадэль скрынкі мае больш сэнсу. Мудрагелісты рэжым супраць стандартаў сапраўды азначаў: "калі памеры элемента будуць зменены пасля ўсталёўкі, калі будуць прымяняцца межы і адступы".
У цяперашні час шырока пагаджаецца, што для сэнсу межаў і пракладанняў больш сэнсу адбіраць даступную прастору ўнутры элемента, а не павялічваць яго шырыню і вышыню. Дыскусія стала неактуальнай у сувязі з шырокім укараненнем памераў скрынкі. Аглядальнік будзе прымаць вашыя рэплікі замест вас, а не наадварот.
Папулярызаваны Крысам Койерам і Полам Ірландскім, усёабдымная тэхніка можа быць рэалізавана з наступным:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
памер скрынкі: мяжа;
}
Выкарыстанне селектара * у CSS абмяркоўвалася з-за патэнцыяльных хітоў прадукцыйнасці. Такія прэтэнзіі несур'ёзныя, калі вы не гіпераптымізуеце ўсе астатнія аспекты вашага веб-сайта / прыкладання. Выкарыстанне border-box прымусіць браўзэр дадаваць абіўку і межы ўнутры наяўнай прасторы. "Стандартны рэжым" можна выкарыстоўваць, усталяваўшы памер вокнаў у поле кантэнту.
Шматкалонныя
Інтэрнэт быў натхнёны пісьмовай формай і тыпам. На жаль, мы затрымаліся на фазе пергаменту. Некаторыя з гэтых праблем узнікаюць з доўгачаканымі спецыфікацыямі Paged-Media і CSS Regions. Тым не менш, першыя крокі да больш падобных на часопісы макетаў былі зроблены, калі браўзэры пачалі рэалізоўваць некалькі слупкоў CSS. Код для стварэння гэтага эфекту даволі просты:
р {
-webkit-count-count: 2;
-moz-падлік калон: 2;
колькасць калон: 2;
}
Вы можаце даведацца больш пра спецыфікацыю CSS3 для некалькіх слупкоў, а таксама пра рэзервовую копію JavaScript, якую вы можаце выкарыстоўваць для любога браўзэра без падтрымкі, з блога A List Apart.
Разлікі
Разлік памераў можа быць цяжкім. У ранейшыя часы ў нас не было магчымасці правесці любыя адзінкавыя разлікі, не кажучы ўжо пра змешаныя адзінкавыя разлікі. Гэта ўсё змянілася дзякуючы calc. Стварэнне мяккага эфекту, які не ўплывае на пачатковую шырыню элементаў і не выкарыстоўвае нешта накшталт памеру скрынкі: 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.
{
колер: rgba (0,255,0,0,5);
фон: rgba (0,0255,0.05);
мяжа: rgba (255,0,0,0,5);
}
Вы можаце выкарыстоўваць колеры RGBA або HSLA усюды, дзе вы знойдзеце шасцігранныя значэнні. Таксама ёсць пашыраны спіс вясёлых кветак з пэўнымі імёнамі, якія вы можаце праверыць прама ў спецыфікацыі. Яны спатрэбяцца, калі вы хочаце стварыць дынамічную сумесь паміж элементамі.
Фільтры
Фільтры CSS надзвычай захапляльныя. Магчымасць дынамічна змяняць знешні выгляд элементаў на старонцы без неабходнасці ўбудоўвання старонніх кампанентаў дзіўна і дапаможа значна скараціць ваш час, праведзены ў Photoshop.
img src = "market.webp">
img {
-webkit-фільтр: адценні шэрага (100%);
}
У цяперашні час фільтры CSS падтрымліваюцца толькі ў аглядальніках WebKit, таму іх выкарыстанне павінна мець аддытыўны характар, не залежыць. Больш падрабязна тут.
Замена малюнка
Замена тэксту на выявы існуе даўно. На жаль, па-ранейшаму існуюць недахопы найноўшых і самых складаных метадаў замены малюнкаў. Але нядаўна высветліліся двое - надзвычай разумныя і ўнікальныя ў сваіх правах. Першы напісаў Скот Келман:
h1 class = 'hide-text'> Лагатып майго сайта / h1>
.hide-text {
тэкст-водступ: 100%;
прабел: зараз;
перапаўненне: схаванае;
}
Другі напісаў Нікалас Галахер:
.hide-text {
шрыфт: 0/0 a;
тэкст-цень: няма;
колер: празрысты;
}
Спагадны відэаролік
Як правільна маштабаваць носьбіты інфармацыі ў адаптыўных умовах можа быць складана. З усё большай колькасцю вэб-сайтаў, якія паважаюць адаптыўны дызайн, вельмі важна правільна апрацоўваць памеры і суадносіны бакоў.
Убудаванае відэа з'яўляецца адным з самых складаных тыпаў мультымедыя, каб паспрачацца з-за таго, як незалежныя службы абслугоўваюць змест. Тыповы ўбудаваны YouTube выглядае прыблізна так:
iframe шырыня = "640" вышыня = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Затым элемент iframe змяшчае аб'ект Flash альбо ўбудаваны элемент. Выкарыстанне чагосьці накшталт iframe {maxwidth: 100%; } не будзе працаваць, бо ўкладзеныя элементы не змяняюцца належным чынам пры змене шырыні. Такім чынам, мы павінны зрабіць некаторыя хітрасці.
div>
iframe шырыня = "640" вышыня = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Ахінанне iframe у іншы элемент дасць нам кантроль, неабходны для дадання належнага спагадлівага функцыяналу да відэа.
.video {
становішча: адноснае;
пракладка дна: 56,25%;
вышыня: 0;
перапаўненне: схаванае;
}
.video iframe,
.video аб'ект,
.video embed {
пазіцыя: абсалютная;
зверху: 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 = ['Heather', 'James', 'Kari', 'Kevin'];
var вітае = people.map (функцыя (імя) {
вярнуцца ‘Прывітанне’ + імя + ’!’;
});
Пры запуску гэтага кода, калі б мы хацелі console.log (вітае), вы ўбачыце, што вітае новы масіў ["Прывітанне Хізэр!", "Прывітанне Джэймс!", "Прывітанне Кары!", "Прывітанне Кевін!" ].
Ачыстка аб'ектаў дакумента і акна
Староннія бібліятэкі 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.
Спадабалася гэта? Прачытайце гэтыя!
- Як стварыць прыкладанне
- Загрузіце лепшыя бясплатныя шрыфты
- Бясплатныя пэндзлікі для Photoshop, якія павінны быць у кожнага творцы
- Падручнікі ілюстратара: дзівосныя ідэі, якія можна паспрабаваць сёння!
- Выдатныя прыклады мастацтва каракуляў
- Бліскучы выбар падручніка па Wordpress
- Лепшыя бясплатныя вэб-шрыфты для дызайнераў
- Загрузіце бясплатныя тэкстуры: з высокім дазволам і гатовыя да выкарыстання зараз
