Главная » Архив меток: HTML5

Архив меток: HTML5

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

От автора: если вам когда-либо понадобится выделить текст внутри абзаца, лучше используйте тег mark. Это HTML-версия желтого маркера. Я всегда использовал тег span с некоторыми CSS-стилями, не понимая, что существует более семантический вариант. HTML5 полон всяких вкусностей, не правда ли? <p> <mark>Highlight</mark> text with HTML &lt;mark&gt; tag </p> Стиль mark по умолчанию Цвет фона mark по умолчанию — желтый. <p> ...

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

От автора: например, дизайн требует разделителя между параметрами в меню select HTML. Насколько трудным это может оказаться? Подход имитации option Это то, что вы обычно видите в StackOverflow: <!-- This will work poorly, see below --> <select name="because-you-are" required> <option value="provocative">One great thing</option> <option value="fascinating">And another great thing</option> <option disabled value="">__________</option> <option value="robotnik">That’s two great things</option> </select> К сожалению, этот ...

Читать далее »

Элемент dialog HTML

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

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

Читать далее »

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

От автора: как вы, наверное, знаете, существует несколько атрибутов HTML, которые считаются глобальными, поскольку они могут применяться к любому элементу HTML. В качестве примеров можно привести class, id, style и tabindex. Атрибут hidden HTML5, который был добавлен несколько лет назад, и о котором вы, возможно, забыли, используется для двух элементах в следующем коде. <p hidden>Example text. Nothing to see here.</p> ...

Читать далее »