Від автора: ласкаво просимо у другу частину цієї невеликої серії статті, присвяченій «початок кінця» того, що співтовариство розробників називає oldIE (тобто IE аж до версії 10). У першій статті були представлені застарілі техніки та практики, від яких можна відмовитися для спрощення процесу front-end розробки. Стаття викликала досить цікаву дискусію в коментарях, що спонукало мене додати дисклеймер (який слід було б додати і в першу статтю заднім числом).
Відмова від підтримки oldIE не є темою цієї серії статей. Я висловлюю вам свою симпатію, якщо специфіка вашого сайту не дає вам відмовитися від підтримки. Якщо ж ви можете назавжди розпрощатися з цією главою нашого життя, то приєднуйтесь до нас.
Як сказано вище, сьогодні ми розглянемо довгий список сучасних функцій, якими можна вільно користуватися. Велике спасибі творцям сайту CanIUse.com – без їхнього чудового інструменту цю статтю було б набагато складніше складати. Всі функції ми розіб’ємо на 4 основних групи:
Сучасні CSS властивості та функції;
HTML5 функції;
JavaScript функції…
… і все те, що не підходить під категорії вище.
1. Сучасні CSS властивості і функції
Основним джерелом скарг при роботі з oldIE була погана підтримка сучасних CSS властивостей і функцій з-за нечастих оновлень. Розпочати нашу розповідь варто саме з цієї частини.
Flexbox
Flexbox – третій за рахунком важливий етап у створенні веб-макета після таблиць та обтеканий. У Foundation 6 вже зараз є сітки на основі Flexbox, і в майбутній Bootstrap 4 також буде ця функція. Є ще багато варіацій маленьких сіток на основі Flexbox, про деяких з них вже говорилося на сайті SitePoint, наприклад sGrid.
З сітками досі багато нарікань (особливо з варіантом для IE11), благо всі вони добре задокументовані, і люди можуть знайти способи їх вирішення. Тому якщо вам ще не довелося попрацювати з сітками, то пора поекспериментувати з Flexbox і почати працювати з ним в своїх проектах.
CSS градієнти
З допомогою CSS градієнтів можна створювати плавні переходи між двома і більш квітами. Трохи креативу і ви зможете створити шаблон, який можна буде повторювати, як background-image. Більше не потрібно нарізати зображення для фонів, кнопок або інших UI елементів. З цим може впоратися градієнт.
CSS-анімація
Дуже довгий час анімація в інтернеті працювала на Flash і JS. CSS3 модуль Animation Module додав ще один спосіб. Flash стоїть в сторонці. Основна перевага CSS-анімації над її JS побратимом у тому, що анімація виконується в різних потоках, не блокуючи інші скрипти на сторінці. Не всі властивості можна анімувати, а деякі сильніше впливають на продуктивність. В сучасних браузерах з анімацією трохи легше йдуть справи, в них присутня вбудована підтримка апаратного прискорення. Тобто при правильному налаштуванні властивості CSS анімація може бути дуже плавним (мінімум 60FPS) і з мінімальним навантаженням на продуктивність. Ця тема ще зовсім недавно була вкрай популярна на сайті SitePoint, було написано безліч статей по тонкій настройці CSS-анімації.
2D/3D трансформації і плавні переходи
Трансформації і плавні переходи є основними будівельними цеглинками в CSS-анімації. При належному підході і увазі до деталей можна робити те, для чого раніше потрібен був Flash. Це не єдина з технік з сучасної анімації на сьогоднішній день є також SVG, Canvas, на розум приходять ще різні JS техніки), але сама проста у вивченні, використанні і роботі в цілому.
Властивість border image
Найпростіше змінити рамку елемента з допомогою властивості border-style. У часи oldIE єдиним способом додати будь-які декоративні елементи (як власні рамки) був складна розмітка з нарізаними зображеннями. Сьогодні ж можна скористатися властивістю border-image. Властивість бере зображення, віртуально розрізає його на шматочки і з цих шматочків становить рамку. Від старої техніки майже не відрізняється, але тепер не потрібна складна розмітка, і використовується лише одне зображення.
Многоколоночный макет
Незважаючи на популярність інтернету, друковані журнали зберігають свою чарівність – причина цього добре створений макет, часто розбитий на багато колонок. У мережі довгий час намагалися імітувати фішки друкованого світу. І сьогодні ми пожинаємо перші плоди цих зусиль, тепер ми можемо переміщати вміст в кілька колонок.
Rem та одиниці виміру vw
CSS одиниці виміру це дуже велика родина, незважаючи на те, що більшість розробників знайомі тільки з пікселями і, можливо, em. Підтримка oldIE пішла в минуле, і тепер можна використовувати й інші одиниці виміру, особливо rem і vw.
Події миші
Довгий час JS крім посилань і кнопок був єдиним способом створення інтерактивності. Все змінилося з появою подій для покажчика миші. Спочатку ці події з’явилися в SVG, але з їх допомогою розробник може створювати події миші для графічних елементів (можна вказувати, коли їх виконувати, а коли немає, і виконувати взагалі). Цим подіям можна знайти досить цікаве застосування, як на сайті Mars telescope to view the London Olympics. Хлопці з Microsoft дивляться на події миші, як на спосіб уніфікації інтерактивної складової, будь-то дотик, миша, стилус або графічна ручка.
SVG фільтри
Незважаючи на весь прогрес, нові техніки і шрифти для маніпуляції зображеннями, для створення якого-небудь привабливого ефекту ми використовуємо графічні редактори. Якщо нам потрібно перемішати кольору, створити текстовий ефект або додати маску, ми біжимо до дизайнера і просимо його про це.
Тепер бідолахи дизайнери можуть відпочити. Всі сучасні браузери підтримують властивість svg filters, за допомогою якого можна створювати більшу частину ефектів, які раніше вимагали запуску графічного редактора. Поки що це не веб версія фотошоп, але вже щось близьке. Не вірите? Погляньте на демо з GitHub: FILDROP – SVG Filters.
Непогано, так?
2. HTML5 властивості
HTML5 дав нам більше, ніж просто набір нових тегів і атрибутів – з’явилася рідна підтримка деяких дій, для яких раніше був потрібний JS або інші скрипти. Подивимося, з чим ви тепер можемо погратися.
Атрибут autofocus
Атрибут робить рівно те, що закладено в його назві – він ставить инпут у фокус. Подумайте, чому ви відразу можете набирати текст при заході на сайт Google (гугл використовує різні способи). Якщо ви хочете додати фолбэк з JS, то використовуйте DOM ready події, а не window.load. Недобре, коли фокус автоматом перестрибує на инпут (в деяких випадках навіть викликає екранну клавіатуру), а користувач хоче натиснути на контент.
classList (DOMTokenList)
Зміна класів елементів DOM не нова ідея. Як доказ можна навести той факт, що в JQuery для цього використовується ціла бібліотека. Вбудована підтримка DOMTokenList дозволяє робити ті ж операції набагато швидше і ефективніше. Підтримка в IE11 не 100%, але це не повинно вас зупиняти.
Атрибути Набору & data-*
Зберігати дані в розмітці придумали дуже давно. Розробники робили це спочатку за допомогою користувальницьких класів, потім з допомогою атрибута data-*. Тут дуже знадобиться JQuery з його .data(). Хоча в нашому прикладі можна взагалі не використовувати JQuery, а працювати з вбудованою підтримкою data-*.
Email, telephone та URL типи поля input
Валідація форм завжди викликала у розробників головний біль. Скільки разів ви гуглили в мережі ідеальні регулярні вирази для перевірки email? На наше щастя HTML5 Constraint API робить цю задачу набагато простіше і майже без JS за допомогою типів email, telephone і URL.
Нові атрибути: hidden, placeholder, spellcheck, pattern
З HTML5 з’явився набір нових корисних атрибутів, які забезпечують рідну підтримку деяких технік, для яких раніше була потрібна інтеграція з JS. Більшість з них розширюють функціонал полів input, підвищуючи юзабіліті і покращуючи процес валідації. Всі властивості вже були давно відомі, тільки зараз вони отримали таку широку підтримку. Тепер їх можна використовувати без полифилов. Розглянемо наші атрибути:
Атрибут hidden – варіація CSS, працює як display: none. Даний атрибут навіть можна переписати з допомогою CSS властивості display, і його можна застосувати до будь-якого елементу HTML. Цей варіант більш семантично правильний і більше підходить для скрін рідерів.
Атрибут pattern – у деяких полів не можна стандартизувати автоматичну валідацію. Розглянемо приклад . Формат номера телефону в різних країнах різний, так що ви не зможете підібрати загальну модель валідації. Ось тут нам і допоможе атрибут pattern. Його значення можна занести регулярний вираз, який буде використовуватися браузером для валідації даних від користувача. На сайті HTML5Pattern є безліч готових шаблонів для вашої колекції.
Атрибут placeholder – Задає коротку підказку очікуваних введення даних. Деякі навіть використовують цей атрибут замість лейблів, але такий підхід загрожує проблемами з юзабіліті. Після введення даних плейсхолдер пропадає. А якщо ще відсутня лейбл, користувач може просто заплутатися. З даним атрибутом дуже легко помилитися, але все ж при належному підході плейсхолдер може сильно допомогти користувачеві.
Атрибут spellcheck – У попередніх статтях ми бачили, як поля textarea перевіряють орфографію написаного тексту. Більшість розробників не знають, але цю функцію можна контролювати: її можна включати, вимикати і навіть прикріплювати до звичайних инпутам. Ви можете запитати, а навіщо мені це робити? Дана функція може знадобитися для перевірки орфографії поля пошуку, а її можна відключати, якщо в textarea необхідно ввести код.
Нові семантичні елементи
Семантичні елементи в HTML5 тісно пов’язані з машинною обробкою контенту. Більше інших ці елементи використовуються движками індексації та пошуку та допоміжними технологіями. Підтримка все ще не 100%, то тут, то там вискакують помилки, а з початку вибір правильного елемента може викликати труднощі. Суперечки навколо цих елементів йдуть до цих пір, і тут кожен сам вирішує, як часто і де вставляти семантичні елементи.
PNG фавиконы
У далекому 1999 IE5 представив нову функцію favicon – невелике зображення поряд з URL веб-сайту в адресному рядку, у списку закладок, а віднедавна і у вкладках. Старий формат .ico все ще дуже універсальний (він може зберігати в собі кілька форматів зображення 16×16, 32×32 and 48×48 пікселів). Однак в епоху екранів з високою щільністю пікселів даний формат явно застарів. Але не хвилюйтеся, тепер в якості фавикона можна використовувати PNG зображення. Просто необхідно дивитися невеликі відмінності у всіх браузерах.
Прогрес бари
Прогрес бари були на екрані завжди, з народження самої першої графічної операційної системи. В інтернеті є кілька варіантів прогрес барів. На сьогоднішній день ми можемо використовувати вбудований тег для створення прогрес бару, потрібно лише приділяти увагу особливостям відображення в різних браузерах.
Input тип range (слайдери)
Як і прогрес бари, слайдери крутилися на екранах комп’ютерів протягом десятиліть. І через деякий час слайдери перекочували в інтернет за допомогою різних JS рішень. А тепер слайдери можна створювати за допомогою вбудованого тега. Даний елемент у багатьох випадках буде найкращим інтуїтивним рішенням.
Iframe sandbox
За останній час iframe’и стали вкрай популярними, хоча кінцевий користувач рідко звертає на них увагу. Соціал медіа плагіни, банери та інша реклама – все це в кінцевому рахунку відкриває iframe елемент для відображення контенту. Така кількість лазівок на вашому сайті грає на руку зловмисникам.
Тут нам допоможе режим sandbox для тега iframe, який говорить браузеру, що потрібно прибрати привілеї для даного елемента (такі як запуск JS або спливаючих вікон). Для зручності обидві команди Microsoft і Chromium задокументували цю функцію.
Управління історією сесії
Збереження URL в історію браузера при відкритті нової сторінки вже олд скул. Такий підхід дозволяє повернутися на попередню сторінку або навпаки перейти вперед. З зростанням популярності односторінкових додатків з’явилася велика проблема – все відбувається на одній сторінці з допомогою AJAX запитів. Отже, нам потрібні різні ДО s для різних станів програми. Дана проблема була вирішена з останнім оновленням події popstate: методи history.pushState та history.replaceState.
Висновок
Ось такий список, приблизно стільки ж я залишив для наступної статті. Всі описані в цій статті функції не є чимось новим. Велика їх частина вже була доступна в тому чи іншому вигляді пару років. Змінилася тільки вбудована підтримка в сучасних браузерах, а також частка ринку браузерів сімейства oldIE. Основний висновок у тому, що тепер нам не потрібно незліченну кількість полифилов. Перевірте аналітику свого веб-сайту, і, якщо можливо, викинете милиці, а замість них використовуйте можливості сучасних браузерів. Ваші користувачі скажуть вам спасибі за підвищену продуктивність і покращений досвід.
