Съдържание
- Оформление
- Clearfix
- Оразмеряване на кутията
- Многоколонни
- Изчисления
- Стил
- Прозрачност
- Филтри
- Замяна на изображението
- Отзивчиво видео
- Функционалност
- Лесен избор на елементи
- Създаване на нови масиви
- Почистете обекти на документи и прозорци
- Хареса ли ви това? Прочетете тези!
Тази статия се появи за първи път в брой 234 на списание .net - най-продаваното списание в света за уеб дизайнери и разработчици.
Техниката в основата си е начин за изпълнение на задача и, като разработчици и дизайнери на фронта, имаме много задачи. Въпреки това често забравяме колко се е променил този пейзаж. От 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, което подканва нов потребител да изтегли приставка, която прави включени уебсайтове с олекотена версия на Chrome, в IE. За да приложим Chrome Frame, добавяме следния meta> tag в head> tag на нашия сайт.
meta http-equiv = "X-UA-Compatible" content = "chrome = 1" />
Оттук можем да подканим потребителите на IE да изтеглят приставката, ако вече не е инсталирана, използвайки JavaScript:
script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
скрипт>
window.onload = функция () {
CFInstall.check ({
режим: "наслагване",
местоназначение: „http://www.yourdomain.com“
});
};
/ script>
местоназначение може да се настрои да изпраща потребителя до определена връзка след инсталиране на приставката. Дума на предпазливост: въпреки че Chrome Frame ни дава метод за строго разработване за наистина модерни браузъри, не трябва да забравяме, че потребителят има възможност да не изтегля приставката, ако не иска. Ако те не го направят и от вас се изисква да предоставите поддръжка за една или други различни версии на IE, ще трябва да отделите още малко време, за да разберете какво можете и какво не можете да предоставите с вашия опит, кръстосан браузър.
С този код, който осигурява значително по-равнопоставени условия, върху които да се развиваме в модерния уеб стек, ние можем да продължим напред с умовете си спокойни. Може би си спомняте, че трябваше да създадете няколко специфични за браузъра хакове, за да получите сайта си структуриран вдясно в различни браузъри, да създадете безброй празни елементи, които да се използват с нарязаните ви изображения, или дори да напишете прекалено многословен или излишен JavaScript код, за да получите най-проста функционалност за работа. Всички тези болки в известен смисъл са същите проблеми, за които се тревожим днес. Все още се борим за повече контрол и по-добри инструменти за борба с оформлението, стила и функционалността, но на ниво, което е зряло.
Оформление
Clearfix
Плаващ елемент беше въведен обратно в CSS 2.1, но никога не се оказа напълно решението, което се надявахме. Един от най-големите проблеми беше поддържането на размерите на родителски елемент при плаване на дъщерния елемент. За да се справи с това, е създадена техниката на clearfix.
Вземете следния HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Тази техника е написана от Николас Галахър:
.clearfix: преди,
.clearfix: след {
съдържание: "";
дисплей: таблица;
}
.clearfix: след {
ясно: и двете;
}
.clearfix {
* увеличение: 1;
}
Ако използвате HTML5Boilerplate, за да започнете вашите проекти, тогава вече ще имате тази версия на техниката на Clearfix.
Оразмеряване на кутията
Години наред разработчиците обсъждаха кой модел на кутия има по-голям смисъл. Quirks vs Standards режим всъщност означаваше: „трябва ли размерите на елементите да се променят, след като бъдат зададени, когато се прилагат граници и подложки или не“.
Сега е широко прието, че има по-голям смисъл границите и подложките да отнемат от наличното пространство в даден елемент, а не да добавят към ширината или височината на елемента. Дебатът е направен без значение с широкото прилагане на размера на кутията. Браузърът ще вземе сигналите от вас, вместо обратното.
Популяризирана от Chris Coyier и Paul Irish, всеобхватна техника може да бъде приложена със следното:
* {
-webkit-box-sizing: border-box;
-moz-box-оразмеряване: 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 и по-фокусирани усилия за стандарти, браузърите имат стандартна реализация на свойството opacity и са изложили поддръжка на алфа канали според новата спецификация на Цветен модул. Това включва насоки 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">
img {
-webkit-филтър: сива скала (100%);
}
CSS филтрите се поддържат само в момента в браузърите WebKit, така че тяхното използване трябва да бъде адитивно, а не зависимо. Прочетете повече тук.
Замяна на изображението
Заместването на текст с изображения съществува отдавна. За съжаление все още има недостатъци от гледна точка на достъпността на най-новите и сложни техники за подмяна на изображения. Но наскоро се появиха двама, които са изключително умни и уникални в собствените си права. Първият е написан от Скот Келман:
h1 class = ’hide-text’> Логото на моя уебсайт / h1>
.hide-text {
отстъп на текст: 100%;
бяло пространство: сега
преливане: скрито;
}
Вторият е написан от Николас Галахър:
.hide-text {
шрифт: 0/0 a;
text-shadow: няма;
цвят: прозрачен;
}
Отзивчиво видео
Постигането на правилен мащаб на медиите в отзивчива среда може да бъде предизвикателство. С все повече и повече уебсайтове, които зачитат адаптивния дизайн, е от съществено значение да се справят правилно с размерите и пропорциите на елементите.
Вграденото видео е един от най-предизвикателните медийни типове за спорове поради начина, по който услугите на трети страни обслужват съдържанието. Типично вграждане в 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 в друг елемент ще ни даде контрола, от който се нуждаем, за да добавим правилна отзивчива функционалност към видеото.
.видео {
позиция: относителна;
подложка отдолу: 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 = [’Хедър’, ‘Джеймс’, ‘Кари’, ‘Кевин’];
var приветства = people.map (функция (име) {
връщане ‘Здравей’ + име + ’!’;
});
Изпълнявайки този код, ако щяхме да console.log (приветства), ще видите, че приветства е нов масив [„Здравей, Хедър!“, „Здравей, Джеймс!“, „Здравей, Кари!“, „Здравей, Кевин!“ ].
Почистете обекти на документи и прозорци
JavaScript библиотеките на трети страни са склонни да се забъркват с обектите на собствения документ и прозорец. Това може да е проблем за други библиотеки на трети страни и за разработчика, включително тях. Като всяка страна се уверете, че работите с чиста версия на двата обекта, като създадете нов екземпляр от тях. Най-добрият начин да направите това е чрез създаване на елемент в рамка, вмъкване в 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, които всеки креатив трябва да има
- Уроци за Illustrator: невероятни идеи, които да опитате днес!
- Страхотни примери за рисуване на драскулки
- Блестящ избор на уроци за Wordpress
- Най-добрите безплатни уеб шрифтове за дизайнери
- Изтеглете безплатни текстури: висока разделителна способност и готов за използване сега
