html
(70)
Інклюзивні компоненти: картки
Деякі з компонентів, які розглядаються в блозі Хейдона Пікерінґа, мають задокументовані рекомендації для коректної роботи. Наприклад, стандарт WAI-ARIA передбачає певну структуру і поведінку для вкладок. Наскільки точно слідувати цим рекомендаціям —...
Codeguida · 26 лютого 2020 · 45
Bootstrap Grid за 15 хвилин
Bootstrap є найбільш поширеним frontend framework-ом на даний момент. Коли справа доходить до побудови адаптивних веб-сайтів і додатків, це перший вибір як професіоналів, так і любителів тому що з ним легко працювати. Той хто знає HTML, CSS і трохи...
Codeguida · 20 лютого 2020 · 95
Вступ до LESS
Ви можливо вже зустрічалися з цим CSS-препроцесором, але вирішили не починати його вивчення, тому що він виглядає складним, а ще вам знову буде потрібно запам'ятати величезну кількість нового синтаксису. Так, частково - це правда. Але базові знання L...
Codeguida · 30 січня 2020 · 7
Декілька гарних текстових ефектів з використанням CSS
У цьому уроці навчимося створювати деякі цікаві текстові ефекти за допомогою CSS3. Вони використовуються, щоб зробити сайт більш елегантним. Розглянемо 11 ефектів, які може використати кожен веб-дизайнер для свого веб-проекту. Text- shadow атрибут ви...
Codeguida · 14 січня 2020 · 47
Вертикальне і горизонтальне центрування за допомогою CSS3 transform
Центрувати елементи по горизонталі не складно, але вертикальне вирівнювання завжди було трохи заплутаним. У цій статті я покажу вам, як центрувати по вертикалі і по горизонталі за допомогою CSS3 transform. {full-post-img} Я створив для цього клас .c...
Codeguida · 13 січня 2020 · 21
Front-end воїн - “Slip Scroll” ефект
У сьогоднішньому уроці ми збираємося створити простий, гнучкий ефект паралакса, де логотип, здавалося б, змінює колір з фоном, коли користувач скролить. Ми будемо створювати елемент "за замовчуванням", який буде з цим типом розміщення ( position: fix...
Codeguida · 12 січня 2020 · 2
Способи спрощення обробників подій
Ми маємо справу з обробниками подій щоразу, коли користувач клікає на певний елемент, створює фокус клавіатурою чи вводить текст в поле форми. Дуже важливо не перевантажувати обробники зайвим кодом і, власне, не створювати зайвих обробників. Почнемо...
Codeguida · 24 червня 2019 · 34
Організації W3C та WHATWG разом працюватимуть над HTML і DOM
Організації W3C та WHATWG підписали угоду про спільний розвиток специфікацій HTML й DOM. Нагадаємо, WHATWG — це група, створена компаніями Apple, Mozilla та Opera як альтернатива організації W3C. W3C вважала, що майбутнє за XML і XHTML, тоді як WHATW...
Codeguida · 4 роки тому
Все, що ви колись хотіли знати про inputmode
Атрибут inputmode підказує браузеру, який тип екранної клавіатури показувати на мобільних пристроях, залежно від обраного input або textarea. <input type="text" inputmode="" /> <textarea inputmode="" /> На відміну від атрибута type, inputmode не втр...
Codeguida · 4 роки тому · 10
Інтро до Веб-компонентів
Фронтенд-розробка розвивається з шаленою швидкістю. Варто лише поглянути на численні статті, туторіали та треди у Twitter зі скаргами на технології, колись такі прості та зрозумілі. У цій статті ми з'ясуємо, чому для якісного користувацького досвіду...
Codeguida · 24 квітня 2019 · 28
Досить зловживати div: інтро до семантичного HTML
div проявив себе Усі ми любимо тег div. Він існує вже давно і за цей час став найпопулярнішим елементом для огортання будь-якого контенту в блок, щоб стилізувати чи структурувати його. Навіть зараз у продакшені часто можна натрапити на подібний код:...
Codeguida · 15 квітня 2019 · 61
Нативне відкладене завантаження для вебу
З новим атрибутом loading нативна підтримка відкладеного завантаження для <img> та <iframe> стане можливою. Як це виглядає: <img src="celebration.jpg" loading="lazy" alt="..." /> <iframe src="video-player.html" loading="lazy"></iframe> Сподіваємось,...
Codeguida · 10 квітня 2019 · 5