Зміст
- Макет
- Clearfix
- Розмір коробки
- Багатостовпці
- Розрахунки
- Стиль
- Прозорість
- Фільтри
- Заміна зображення
- Чуйне відео
- Функціональність
- Легкий вибір елементів
- Створення нових масивів
- Очищення документів та вікон
- Сподобалось? Прочитайте це!
Ця стаття вперше з’явилася у випуску 234 журналу .net - найпопулярнішого у світі журналу для веб-дизайнерів та розробників.
Техніка за своєю суттю є способом виконання завдання, і, будучи розробниками та дизайнерами, ми маємо багато завдань. Тим не менш, ми часто забуваємо, наскільки змінився цей ландшафт. З 2002 по 2010 рік наше співтовариство було згнило кодом та ресурсами, що перешкоджало роботі та ремонтопридатності. Щоб подолати це, ми створили безліч підказок, прийомів та хак, які ми назвали «технікою». Ми все ще виконували завдання, тільки не найефективнішим чином.
Проводячи 360, останні кілька років спостерігаються кращі стандарти та впровадження стандартів, що дозволяє нам як спільноті розробляти новіші та вдосконаленіші «методики». Цей новий ландшафт - це те, що вважається «сучасною павутиною».
Оскільки «Веб 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-Compatible" content = "chrome = 1" />
Звідси ми можемо запропонувати користувачам IE завантажити плагін, якщо він ще не встановлений, за допомогою JavaScript:
type script = "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"
});
};
/ script>
пункт призначення може бути встановлений для відправки користувача за певним посиланням після встановлення плагіна. Слово обережності: хоча Chrome Frame дає нам спосіб розробити суворо для справді сучасних браузерів, ми не повинні забувати, що користувач має можливість не завантажувати плагін, якщо він цього не хоче. Якщо вони цього не роблять, і вам потрібно надати підтримку тієї чи іншої різної версії IE, вам доведеться витратити ще деякий час, щоб з’ясувати, що ви можете, а що не можете надати, з вашим досвідом, крос-браузер..
Завдяки цьому коду, який забезпечує значно більш рівні умови для розвитку на сучасному веб-стеку, ми можемо рухатись вперед, спокійно думаючи. Можливо, ви пам’ятаєте, що вам доводилося створювати декілька хакерів для веб-переглядача, щоб правильно структурувати ваш веб-переглядач, створювати незліченну кількість порожніх елементів, які будуть використовуватися з нарізаними зображеннями, або навіть писати надто багатослівний або надлишковий код JavaScript, щоб отримати найпростіша функціональність для роботи. Усі ці болі - це в якомусь сенсі ті самі проблеми, про які ми сьогодні турбуємось. Ми все ще боремося за більший контроль та кращі інструменти для боротьби з макетом, стилем та функціональністю, але на зрілому рівні.
Макет
Clearfix
Плаваючий елемент був введений ще в CSS 2.1, але ніколи не виявився цілісним рішенням, на яке ми сподівалися. Однією з найбільших проблем було збереження розмірів батьківського елемента при плаванні дочірнього елемента. Для вирішення цього було створено техніку чіткого виправлення.
Візьміть такий HTML:
div>
div> ... / div>
div> ... / div>
/ div>
Цю техніку написав Ніколас Галлахер:
.clearfix: до,
.clearfix: після {
зміст: "";
дисплей: таблиця;
}
.clearfix: після {
ясно: обидва;
}
.clearfix {
* масштабування: 1;
}
Якщо ви використовуєте HTML5Boilerplate для запуску своїх проектів, тоді у вас вже буде запечена ця версія техніки clearfix.
Розмір коробки
Роками розробники дискутували, яка реалізація коробкової моделі має більше сенсу. Режим Quirks vs Standards насправді означав: "якщо розміри елемента змінюються після встановлення, коли застосовуються межі та відступи чи ні".
Зараз широко прийнято вважати, що має більше сенсу, щоб межі та відступи відводили вільний простір у елементі, а не додавали до ширини та висоти елемента. Дискусія стала неактуальною внаслідок широкого впровадження розмірів ящиків. Браузер братиме підказки від вас, а не навпаки.
Популяризований Крісом Койєром та Полом Ірландським, всеохоплююча техніка може бути реалізована з наступним:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
розмір коробки: бордюр;
}
Використання селектора * в CSS обговорювалось через потенційні показники ефективності. Такі претензії є легковажними, якщо ви не оптимізуєте всі інші аспекти свого веб-сайту / програми. Використання border-box змусить браузер додати відступи та межі всередині доступного набору місця. «Стандартний режим» можна використовувати, встановивши розмір вікна на поле вмісту.
Багатостовпці
Інтернет був натхненний письмовою формою та типом. На жаль, ми застрягли на пергаментній фазі. Деякі з цих питань готуються до довгоочікуваних специфікацій Paged-Media та CSS Regions. Тим не менш, перші кроки до більш схожих на журнал макетів були зроблені, коли браузери почали впроваджувати багатостолбці CSS. Код для створення цього ефекту досить простий:
p {
-webkit-count-count: 2;
-moz-count-count: 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.
a {
колір: rgba (0,255,0,0,5);
фон: rgba (0,0255,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;
переповнення: приховане;
}
Другий написав Ніколас Галлахер:
.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 в інший елемент дасть нам контроль, який нам потрібен, щоб додати належну адаптивну функціональність до відео.
.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, які повинен мати кожен креатив
- Підручники для Illustrator: дивовижні ідеї, спробувати сьогодні!
- Чудові приклади мистецтва каракулей
- Блискучий підручник з Wordpress
- Найкращі безкоштовні веб-шрифти для дизайнерів
- Завантажте безкоштовні текстури: висока роздільна здатність і готові до використання зараз
