Category: HTML5

10
Июн
2019

Выделение текста с помощью HTML-тега mark

От автора: если вам когда-либо понадобится выделить текст внутри абзаца, лучше используйте тег mark. Это HTML-версия желтого маркера. Я всегда использовал тег span с некоторыми CSS-стилями, не понимая, что существует более семантический вариант. HTML5 полон всяких вкусностей, не правда ли? [crayon-5cfe023531dec623354030/] Стиль mark по умолчанию Цвет фона mark по умолчанию — желтый. [crayon-5cfe023531df2112049966/] Пользовательские стили […]

08
Май
2019

Валидация формы с HTML5 и регулярными выражениями

От автора: валидация ввода формы в HTML5 — это то, к чему следует относиться серьезно. Без надлежащей валидации, если повезет, вы получите только много ненужных и несоответствующих вводимых данных. Однако существует также вероятность того, что хакеры смогут заполучить личные данные пользователей, которые доверили вам свою информацию. Поскольку валидация важна, имеет смысл использовать инструменты и библиотек […]

19
Мар
2019

Извлечение текста из контента с использованием HTML Slot, HTML Template и Shadow DOM

От автора: названия глав в книгах, цитаты, ключевые слова в статье, статистика в отчете — это все типы контента, который может быть выделен и превращен в краткое изложение того, что важно. Например, вы видели, как Business Insider предоставляет ключевые моменты статьи перед тем, как перейти к содержанию? Это то, что мы собираемся сделать, но мы […]

20
Фев
2019

Как у вас обстоят дела с figure в HTML 5?

От автора: элементы figcaption и figure в HTML 5 предназначены для создания значимой структуры разметки, что обеспечивает описательную метку для части контента, которая имеет отношение к текущему документу, но не жизненно важна для его понимания. Чтобы получить более конкретную информацию, давайте рассмотрим эти элементы отдельно. Элемент figure Часто рассматриваемый как элемент для изображений или диаграмм, […]

11
Фев
2019

HTML5-формы

HTML-формы являются элементами управления, которые применяются для сбора информации от посетителей веб-сайта.

08
Фев
2019

Вёрстка страницы сайта

Вёрстка страницы представляет собой процесс разработки структуры html-документа, результатом которого является веб-страница. Структура веб-страницы определяется соответствующими html-тегами.

08
Фев
2019

Основы HTML

Основы HTML содержат основные правила языка HTML, описание структуры HTML-страницы, отношения в структуре HTML-документа между HTML-элементами.

21
Дек
2018

Разделители внутри select HTML

От автора: например, дизайн требует разделителя между параметрами в меню select HTML. Насколько трудным это может оказаться? Подход имитации option Это то, что вы обычно видите в StackOverflow: [crayon-5c56140a5e653887344029/] К сожалению, этот хак не работает, как есть: Вы не можете знать, насколько широко будет отображаться меню, особенно на мобильных ОС, так что имитированный разделитель, созданный […]

17
Окт
2018

Элемент dialog HTML

От автора: давайте поговорим о всплывающих окнах. Или модалах, оверлеях или как вам нравится их называть (не забудьте, лайтбокс). Несмотря на то, что многим пользователям это не нравится, эти элементы остаются популярными в Интернете. Но их технические реализации могут быть дико непоследовательными. Хотите больше не изобретать велосипед? Этот пост поможет вам решить задачу, как отобразить […]

11
Окт
2018

Почему мы не добавим в HTML элемент ?

Перевод статьи Why don’t we add a <lovely> element to HTML? с сайта www.brucelawson.co.uk, опубликовано на css-live.ru с разрешения автора — Брюса Лоусона Вчера был интересный разговор, который начала Сара Суайдан: твит Сары Суайдан (@SaraSoueidan), 8 октября 2018 г. в 16:36: Вот…
ДАЛЕЕ

24
Сен
2018

Почему семантический HTML важен, и как TypeScript помогает это понять

Перевод статьи Understanding why Semantic HTML is important, as told by TypeScript с сайта medium.com для css-live.ru, автор — Мэнди Майкл HTML не просто скелет наших сайтов, он также крайне важен для того, чтобы сайты вели себя как полагалось на…
ДАЛЕЕ

15
Май
2018

Удобный для пальцев ввод цифр с помощью «inputmode»

От автора: формы часто превращаются на мобильных устройствах в настоящий кошмар. Мы можем сделать процесс максимально безболезненным, подстраиваясь под контекст. Поля, в которые должен производиться ввод цифр, должны иметь числовой интерфейс. Для большинства платформ отобразить на небольших экранах цифровую клавиатуру довольно просто — используйте для этого <input type = «number»>. Эта большая кнопочная цифровая клавиатура […]

11
Май
2018

Глобальный атрибут HTML5 hidden

От автора: как вы, наверное, знаете, существует несколько атрибутов HTML, которые считаются глобальными, поскольку они могут применяться к любому элементу HTML. В качестве примеров можно привести class, id, style и tabindex. Атрибут hidden HTML5, который был добавлен несколько лет назад, и о котором вы, возможно, забыли, используется для двух элементах в следующем коде. [crayon-5c56140a5ede1886216220/] Атрибут […]

10
Май
2018

Анимирование progress HTML

От автора: элемент progress HTML уже много лет реализован в браузерах. (Лея Веру работала над полифиллом еще в 2011 году!) Можно было бы ожидать, что после всех этих лет все станет стабильным. Оказывается, за эти годы изменилось не так много. Порядка по-прежнему не наблюдается, а процесс анимирования элемента progress … не совсем гладкий. Какие браузеры […]

09
Апр
2018

Анимированный радиальный SVG прогресс-бар

От автора: для клиентского проекта нам поручили не что иное, как сделать прогресс бар, причем радиальный. Раньше мы использовали целые Canvas графические библиотеки (156k / 44k gzip), но это казалось излишним. Я посмотрел проект Lottie от Airbnb, в котором экспортируется анимация After Effects, как JSON. Это классно для сложной анимации, но зависимости для одной этой […]

29
Мар
2018

Окончательное руководство по подсказкам в браузере Preload, Prefetch и Preconnect

От автора: знаете ли вы, что есть простой способ ускорить работу вашего сайта без особых усилий? Сегодня мы рассмотрим подсказки в браузере и директивы ресурсов, которые представляют собой крошечные фрагменты html, которые мы можем использовать для повышения производительности веб-сайта или веб-приложения всего за несколько минут. По умолчанию браузеры сначала загружают ресурсы, объявленные в HTML. Однако […]

12
Мар
2018

Создание изображений с помощью canvas

От автора: как Вы знаете в данное время веб-сайты, да и, конечно же, интернет стали настолько популярны, что применяются и решают определенные поставленные задачи практически во всех сферах деятельности человека. Таких как работа, учеба, развлечения, охрана здоровья и т.д. То есть другими словами, если сейчас мы говорим сайт, то мы не предполагаем, что это будет […]

09
Фев
2018

Ссылки против кнопок в современных веб-приложениях

Перевод статьи Links vs. Buttons in Modern Web Applications с сайта marcysutton.com для CSS-live.ru, автор — Марси Саттон Github: ссылки или кнопки? Одна из вечных тем во фронтенд-доступности — неразбериха между ссылками и кнопками. Ну, HTML-элементы, которые открывают ссылки в…
ДАЛЕЕ

01
Фев
2018

Что нового в HTML 5.2?

От автора: Меньше месяца назад HTML 5.2 стал официальной рекомендацией W3C (REC). Когда спецификация доходит до этапа REC, это значит, что она получила поддержку членов W3C и директора, и W3C официально рекомендует ее реализацию в браузерах, а также внедрение в веб-страницы авторами. В HTML 5.2 был добавлен и удален ряд функций, все можно посмотреть на […]

12
Апр
2017

Как и зачем использовать пользовательские data-атрибуты в HTML5?

От автора: в этой статье я покажу вам, как использовать HTML5 data-атрибуты. Также я расскажу вам, где их можно применить в реальной работе. Почему именно пользовательские data-атрибуты? Очень часто нам приходится хранить информацию, связанную с различными DOM-элементами. Для пользователей эта информация может быть несущественной, однако простой доступ к ней сильно упростит жизнь для нас с […]

13
Мар
2017

Проблема выбора структуры документа

Перевод статьи «The Document Outline Dilemma» с сайта css-tricks.com, опубликовано на css-live.ru с разрешения автора — Амелии Беллами-Ройдз В последние несколько недель среди веб-стандартистов было много разговоров о HTML-заголовках. Возможно, вы видели какие-то записи в блогах, твиты и обсуждения разных ишью на…
ДАЛЕЕ

20
Фев
2017

Нужен ли нам новый заголовочный элемент? Мы не знаем

Перевод статьи Do we need a new heading element? We don’t know с сайта jakearchibald.com, опубликовано на css-live.ru с разрешения автора — Джейка Арчибальда. В спецификацию HTML предлагают добавить новый элемент <h>. Это решает довольно частую задачу. Возьмем такой пример HTML:…
ДАЛЕЕ

03
Июн
2016

Понимание семантики

Перевод статьи Understanding semantics с сайта tink.uk, опубликовано на css-live.ru с разрешения автора — Леони Уотсон. Слово «семантический» уже слилось с веб-разработкой. Мы произносим «семантический код» и «семантика» элемента, но что это значит на самом деле и почему так важно? Слово семантика происходит от французского…
ДАЛЕЕ

30
Май
2016

Регрессивные веб-приложения

Перевод статьи Regressive Web Apps с сайта adactio.com, опубликовано на css-live.ru с разрешения автора — Джереми Кита. На конференции Google I/O в этом году было немало докладов о разработке для веба. Приятная перемена по сравнению с прошлыми годами, когда о вебе едва вспоминали и можно…
ДАЛЕЕ

21
Май
2016

БЭМантика: пишите осмысленные стили без повторов

Перевод статьи BEMantic: DRY Like You Mean It с сайта https://medium.com, опубликовано на css-live.ru с разрешения автора — Мэтта Стоу. Недавняя статья Тима Бакстера на A List Apart, «Осмысленный CSS: описывайте стилями свою логику», подбросила дровишек в костер тому мнению, будто фронтендеры, предпочитающие объектно-ориентированный подход к…
ДАЛЕЕ

18
Янв
2016

Заблуждения разработчиков

Перевод статьи Developer Fallacies с сайта heydonworks.com, опубликовано на css-live.ru с разрешения автора — Хейдона Пикеринга. Время от времени веб-разработчики (и вообще программисты) находят неудачные аргументы в защиту своего выбора технологий, рабочих процессов или организационных схем, а также для принижения чужого выбора. Я видел такое не…
ДАЛЕЕ