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

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

HTML тег details для модального окна

От автора: в одном из предыдущих уроков мы познакомились с HTML тегом details, основное предназначение которого заключается в организации спойлеров, т.е. возможности скрыть некоторый блок под спойлером и раскрывать его по клику. Однако, тег details можно использовать и для других реализаций. В данном уроке будет показана реализация модального окна через тег details. Читайте нас в Telegram, VK, Яндекс.Дзен

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

HTML-тег details

От автора: в данном уроке вы познакомитесь с тегом HTML5 – details. Используя данный тег, можно решать некоторые задачи без привлечения JavaScript или его библиотек. Например, с помощью данного тега возможно создать блок спойлера, который раскрывается и закрывается по клику мыши, или даже можно создавать более функциональные штуки, например, аккордеон без единой строчки JS и с минимумом CSS. Читайте нас ...

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

Версия для слабовидящих? А можно не надо? [расшифровка доклада]

[embedded content] Всем привет, меня зовут Лена. Сейчас я делаю фронтенд в компании AISA и борюсь за вёрстку кнопок кнопками. В сообществе могу быть известна пока что только тем, что модерирую чат Веб-стандартов в Телеграме. В свободное время катаюсь на разных досках. Ну, и погнали к докладу. Знаком ли вам такой диалог? — А вы поддерживаете доступность на своём сайте?— ...

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

Валидация форм с использованием HTML5 и Regex

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

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

Полное руководство по электронным письмам в формате HTML

От автора: в новой короткой серии публикаций мы расскажем о некоторых полезных инструментах и методах для разработчиков и дизайнеров. На этот раз мы рассмотрим шаблоны и инструменты для создания и разработки электронных писем в формате HTML. Начало работы с электронной почтой в формате HTML Если вы просто пытаетесь понять все, что происходит за кулисами причудливого мира электронной почты в формате ...

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

7 полезных атрибутов HTML, о которых вы, возможно, не знаете

От автора: HTML — это навык, которым должен обладать каждый веб-разработчик. Вы не можете называть себя веб-разработчиком, не зная этого языка разметки. Каждый веб-сайт, который вы видите в Интернете, был построен с использованием HTML, потому что он имеет множество полезных и мощных функций, которыми вы, как разработчик, можете воспользоваться для создания веб-страниц. HTML также имеет атрибуты, которые вы можете прикреплять ...

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

Почему необходимо использовать тег picture вместо тега img

От автора: использование изображений и анимации в пользовательских интерфейсах стало обычным делом в современных веб-приложениях. Хотя эти разработки ориентированы на улучшение взаимодействия с пользователем вашего приложения, все может иметь неприятные последствия, если эти изображения не реагируют на все устройства. Как разработчики, мы должны выполнять все необходимые требования. Но в большинстве случаев мы упускаем некоторые мелочи, которые могут иметь огромное значение, ...

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

Чтобы быть впереди веба, веб-стандартам нужно бежать в два раза быстрее

Не секрет, что в последние годы веб развивается крайне стремительно. Периодически выходят новые библиотеки, фреймворки и другие полезные для нас инструменты. Всё это безусловно помогает нам решать повседневные задачи. Но в погоне за популярными новинками мы совсем не обращаем внимание на истоки. Многие начинающие разработчики начинают знакомство с кодом именно с инструментов, а не с фундаментальных вещей. Обычно это связывают ...

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

Как загрузить адаптивные изображения с imagesize и imagesrcset

От автора: сегодня я прочитал статью Адди Османи «Более быстрая предварительная загрузка поздно обнаруженных Hero-изображений». Это хороший обзор способов предварительной загрузки ресурсов, если вы хотите настроить и улучшить поведение загрузки браузера. Крутая вещь в этой статье: я обнаружил недавно добавленную функцию веб-платформы, которая помогает ускорить загрузку адаптивных изображений. Предположим, у вас на странице есть следующее адаптивное изображение. <img srcset="image-400.jpg 400w, ...

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

Несбывшиеся надежды веб-компонентов

Перевод статьи The failed promise of Web Components с сайта lea.verou.me, опубликован на CSS-live.ru с разрешения автора — Лии Веру Веб-компоненты обещали так много новых возможностей для HTML, с ними веб-разработка должна была стать намного доступнее для непрограммистов и легче для программистов. Помните тот восторг от каждого новёхонького HTML-элемента, который реально что-то делал? Помните, как было здорово, когда стало можно ...

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