9 полезных трюков HTML
Приветствую, Хабр! Представляю вашему вниманию перевод статьи «9 Extremely Useful HTML Tricks» автора Klaus.
У HTML есть много практических секретов, которые могут вам пригодиться.
Но я хочу убедиться, что сайт работает в Internet Explorer и других браузерах.
Я использую Endtest для создания автоматизированных тестов и выполнения их в кросс-браузерном облаке.
Netflix использует ту же платформу для тестирования своих веб-приложений.
Умение обращаться с Endtest даже входит в список необходимых навыков для некоторых их рабочих вакансий.
У Endtest есть несколько действительно полезных функций, таких как:
• Кросс-браузерная сетка, работающая на компьютерах с Windows и MacOS
• Редактор без кода для автоматических тестов
• Поддержка веб-приложений
• Поддержка как собственных, так и гибридных приложений для Android и iOS
• Неограниченное количество видеозаписей для выполнения ваших тестов
• Сравнение
скриншотов
• Геолокация
• Оператор if
• Циклы
• Загрузка файлов в ваши тесты
• API Endtest, для легкой интеграции с вашей системой CI / CD
• Расширенные утверждения
• Мобильные тесты на мобильных устройствах
• Тестирование электронной почты с помощью Endtest Mailbox
Вы можете просмотреть документы.
Ниже приведены 9 чрезвычайно полезных трюков HTML.
1. Тег «figure»
Его можно использовать для разметки фотографии.
Элемент «figure» также может содержать «figcaption» :
И вот как это будет выглядеть:
Fig.1 — SWAT Kats
2. Тег «video»
Он позволяет встроить медиаплеер для воспроизведения видео.
Например, вы можете загрузить свое видео на AWS S3 и использовать тег «video», чтобы вставить его на свой веб-сайт.
Использование YouTube для этого может показаться непрофессиональным.
И Vimeo не позволяет вам вставлять свои видео без оплаты.
Вы можете указать определенные характеристики, как ширина, высота, автозапуск, цикл, элементы управления и т. д.
И вот как это будет выглядеть:
Вы также можете встроить прямой эфир, используя getUserMedia() или WebRTC
3. Тег «picture»
Этот тег помогает отображать изображения в общедоступном виде, показывая альтернативную версию изображения для небольших окон просмотра.
Он должен содержать один или несколько тегов «source» и один тег «img» .
Тег «img» будет использоваться только в случае, если окно просмотра не соответствует ни одному из тегов «source» или если не поддерживается браузером.
4. Тег «progress»
Тег «progress» отображает ход выполнения задачи.
Этот тег не следует путать с тегом «meter» (который представляет собой датчик).
Вот как это выглядит:
5. Тег «meter»
Вы можете использовать тег «meter» для измерения данных в заданном диапазоне (датчик).
Результат может быть установлен через минимальные и максимальные значения или в процентах.
И вот они: 
6. Тег «map»
Тег «map» используется для определения клиентской карты изображений.
Карта изображения — это изображение с интерактивными областями.
Все, что вам нужно сделать, это ввести координаты X и Y в элементах из «map» .
Это означает, что вы создаете карту нашей Солнечной системы, определяете область для каждой планеты и перенаправляете посетителей на отдельную страницу для каждой планеты, которую они выбрали кликом.
7. Атрибут contenteditable
Этот атрибут указывает, является ли содержимое элемента доступным для редактирования.
8. Предложения по вводу
Надеюсь, вы не возражаете, что я не добавил разнообразные стили.
Я предпочитаю оформлять примеры по своему вкусу, как можно красивее.
9. Тег «noscript»
Содержимое внутри элемента «noscript» отображается браузером, только если отключён JavaScript.
Это обеспечивает запасной механизм для компонентов, которые перестанут работать без JavaScript.
Я думаю, это действительно круто, что вы ищете трюки HTML, но уверены ли вы, что ваше веб-приложение работает правильно на всех браузерах и устройствах?
Вы можете использовать Endtest для быстрого создания автоматических тестов и их выполнения в кросс-браузерном облаке.
Работа с HTML и CSS: 10 полезных приемов для дизайнеров
Многие современные работодатели требуют от кандидатов знаний не только веб-дизайна, но и веб-разработки. Поэтому дизайнерам UX/UI важно обладать хотя бы базовыми навыками написания фронтенда.
Эти советы помогут вам подтянуть знания в разработке сайтов.
10) Магическая настройка
С ней вы сможете избежать многих ошибок разметки в HTML.
Нам не понадобятся горизонтальные слайдеры, элементы с absolute-позиционированием, поля и случайные отступы — все они работают слишком непредсказуемо.
Чтобы изменить параметры, нужно отредактировать только один элемент.
В некоторых случаях display:block может помешать, но в большинстве случаев вы будете использовать <a> и <span> как обычные блоки.
9) Анимированные линии и подчеркивание
Чтобы создать интересные эффекты, например анимированное подчеркивание, появление и исчезновение заднего фона и прочие, не нужно внедрять новые компоненты. Просто воспользуйтесь псевдоселекторами ::after и ::before .
Не забудьте настроить свойство content , иначе псевдоселекторы не будут отображаться.
8) Viewport height как размер шрифта
Чтобы написать гибкие тексты, которые будут адаптироваться под ПК, лучше всего воспользоваться viewport height (vh). Почему не viewport width (vw)? Если выстроить небольшие шрифты через vw , то на мобильном устройстве они уменьшатся до “none”.
3vw on a 1920×1080 desktop = 60px. Слишком большой.
3vw on a 320x*** mobile = 9px. Слишком маленький.
vh , в свою очередь, работает гораздо стабильнее с мобильными устройствами и ПК.
7) Фоновое изображение в HTML
Часто в веб-дизайне нужно создать контейнер, содержащий фоновое изображение. Для этого обычно используется CSS-свойство background-image . Однако это крайне неэффективный способ, при котором:
2. необходимо постоянно редактировать CSS;
3. нельзя повторно воспользоваться кодом.
Попробуем превратить обычную картинку внутри HTML в динамический фон.
Как видите, relative-позиционирование, которые мы установили в начале, оказалось очень полезным.
6) Эффект всплывающего текста
На современных сайтах часто можно встретить анимацию всплывающего текста из нижней части страницы.
Рассмотрим минимально необходимый для этого код.
Разумеется, вы также можете задействовать переходы.
5) Логика гамбургер-меню
Можно легко создать гамбургер-меню для мобильного устройства, не используя при этом фреймворки со встроенной навигацией, такие как Bootstrap. Нужно лишь написать несколько строчек JS-кода.
И добавить в него немного CSS.
Здесь также можно поэкспериментировать, например применить absolute-позиционирование вместо display , а навигацию выстроить с боку.
4) Разделение HTML и CSS
Этот совет больше касается оптимизации рабочего процесса. Во время разработки лучше создавать разные CSS-файлы (например, для ПК и для мобильных устройств) и объединяйте их в конце.
Не забывайте объединять файлы, чтобы минимизировать количество HTTP-запросов с сайта.
Тот же принцип действует и в HTML. Если вы не работаете в среде SPA, например Gatsby, то вы можете воспользоваться PHP для внедрения и обработки фрагментов HTML-кода.
Допустим, у нас есть папка “/modules”, которая содержит панель навигации, футер и прочее в отдельных файлах. Если понадобится внести одно изменение, вам не придется редактировать каждую страницу.
Чем больше модулей, тем лучше результат.
3) Эффект плавной прокрутки
В настольные версии современных сайтов часто добавляют плавную прокрутку, свойственную мобильным.
Однако поиск сценария, подходящего под конкретную технику разработки и работающего с, как правило, уже готовыми сайтами, часто вызывает трудности.
Использование HTML для решения общих задач
Следующие ссылки указывают на решения общих повседневных проблем, которые вам нужно решить с помощью HTML.
Основы структурирования
Основное применение HTML — это структура документа. Если вы новичок в HTML, вы должны начать с этого.
Основы организации гипертекста
HTML специализируется на предоставлении семантической информации для документа, поэтому HTML отвечает на многие вопросы, которые могут у вас возникнуть о том, как лучше донести ваше сообщение в документе.
Гиперссылки
Одной из главных причин по которым навигация в HTML страницах столь проста являются гиперссылки, которые могут которые возможно использоваться различными способами:
Изображения и мультимедиа
Сценарии и стили
HTML определяет лишь структуру документа. Для улучшения внешнего вида документа обычно используется CSS. Чтобы добавить странице интерактивности вы также можете написать сценарий на одном из скриптовых языков (например JavaScript).
Встраиваемый контент
Необычные или продвинутые проблемы
Помимо основ, HTML очень богат и предлагает расширенные возможности для решения сложных проблем. Эти статьи помогут вам разобраться с менее распространёнными случаями использования, с которыми вы можете столкнуться:
Формы
Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвящённое руководство. Вот где вы должны начать:
Таблицы
Некоторая информация удобнее всего представима в виде таблиц состоящих из строк и столбцов. Это одна из самых сложных структур в HTML, управлять которой не так просто как кажется:
Работа с HTML и CSS: 10 полезных приемов для дизайнеров
Многие современные работодатели требуют от кандидатов знаний не только веб-дизайна, но и веб-разработки. Поэтому дизайнерам UX/UI важно обладать хотя бы базовыми навыками написания фронтенда.
Эти советы помогут вам подтянуть знания в разработке сайтов.
10) Магическая настройка
С ней вы сможете избежать многих ошибок разметки в HTML.
Нам не понадобятся горизонтальные слайдеры, элементы с absolute-позиционированием, поля и случайные отступы — все они работают слишком непредсказуемо.
Чтобы изменить параметры, нужно отредактировать только один элемент.
В некоторых случаях display:block может помешать, но в большинстве случаев вы будете использовать <a> и <span> как обычные блоки.
9) Анимированные линии и подчеркивание
Чтобы создать интересные эффекты, например анимированное подчеркивание, появление и исчезновение заднего фона и прочие, не нужно внедрять новые компоненты. Просто воспользуйтесь псевдоселекторами ::after и ::before .
Не забудьте настроить свойство content , иначе псевдоселекторы не будут отображаться.
8) Viewport height как размер шрифта
Чтобы написать гибкие тексты, которые будут адаптироваться под ПК, лучше всего воспользоваться viewport height (vh). Почему не viewport width (vw)? Если выстроить небольшие шрифты через vw , то на мобильном устройстве они уменьшатся до “none”.
vh , в свою очередь, работает гораздо стабильнее с мобильными устройствами и ПК.
7) Фоновое изображение в HTML
Изображение, которое часто используется для фона.
Часто в веб-дизайне нужно создать контейнер, содержащий фоновое изображение. Для этого обычно используется CSS-свойство background-image . Однако это крайне неэффективный способ, при котором:
2. необходимо постоянно редактировать CSS;
3. нельзя повторно воспользоваться кодом.
Попробуем превратить обычную картинку внутри HTML в динамический фон.
Как видите, relative-позиционирование, которые мы установили в начале, оказалось очень полезным.
6) Эффект всплывающего текста
На современных сайтах часто можно встретить анимацию всплывающего текста из нижней части страницы.
Рассмотрим минимально необходимый для этого код.
Разумеется, вы также можете задействовать переходы.
5) Логика гамбургер-меню
Можно легко создать гамбургер-меню для мобильного устройства, не используя при этом фреймворки со встроенной навигацией, такие как Bootstrap. Нужно лишь написать несколько строчек JS-кода.
И добавить в него немного CSS.
Здесь также можно поэкспериментировать, например применить absolute-позиционирование вместо display , а навигацию выстроить с боку.
4) Разделение HTML и CSS
Этот совет больше касается оптимизации рабочего процесса. Во время разработки лучше создавать разные CSS-файлы (например, для ПК и для мобильных устройств) и объединяйте их в конце.
Не забывайте объединять файлы, чтобы минимизировать количество HTTP-запросов с сайта.
Тот же принцип действует и в HTML. Если вы не работаете в среде SPA, например Gatsby, то вы можете воспользоваться PHP для внедрения и обработки фрагментов HTML-кода.
Допустим, у нас есть папка “/modules”, которая содержит панель навигации, футер и прочее в отдельных файлах. Если понадобится внести одно изменение, вам не придется редактировать каждую страницу.
Чем больше модулей, тем лучше результат.
3) Эффект плавной прокрутки
В настольные версии современных сайтов часто добавляют плавную прокрутку, свойственную мобильным.
Однако поиск сценария, подходящего под конкретную технику разработки и работающего с, как правило, уже готовыми сайтами, часто вызывает трудности.
Облегчить процесс поиска помогут следующие скрипты.
- easy-scroll.js — скрипт под лицензией MIT. Он хорошо справляется со своей задачей и подходит практически для каждого случая.
- luxy.js — это золотой стандарт для momentum-прокрутки и параллакс-эффекта. Однако этот сценарий тяжелее и иногда работает медленно.
- Также стоит обратить внимание на Locomotive.
2) CSS-препроцессор
Выберите любой понравившийся вам препроцессор: Less, Sass или SCSS. Многие опытные разработчики не любят Less, но умения использовать его бывает достаточно. Главное — изучить все это как можно скорее.
Препроцессор позволяет единожды объявлять цвет, размер и т. д., а также создавать CSS с циклом for и другими подобными операторами. Каждому разработчику нужно научиться с ним работать.
1) Gatsby.js
Чтобы ускорить обучение, лучше начать с профессионально-ориентированных фреймворков, таких как Gatsby. В любом случае вы будете работать с HTML и CSS, а благодаря нему также сможете охватить основы React.
Gatsby позволяет больше экспериментировать и получать доступ к сложным библиотекам анимации, например Framer-Motion. Поскольку Framer-Motion в Gatsby имеет некоторые различия, воспользуйтесь этим руководством.
Дополнительно
Однако Gatsby ограничен и не раскрывает весь потенциал библиотек. Для углубленного изучения рассмотрите React или Vue SSR (Server-Side-Rendering — серверный рендеринг).