3 фишки HTML о которых вы могли не знать

Их редко используют, не все про них знают. Подробнее читайте далее.

HTML — атрибут hidden

Очень часто для скрытия контента мы пишем display: none, или opacity: 0, или overflow:hidden. А вы знали что есть стандартный атрибут который позволит скрыть блок?

div hidden="true"

Атрибут hidden скрывает содержимое элемента от просмотра но оставляет возможность получать данные с помощью сценариев. Иногда встречаются варианты hidden=»hidden». В документации встречался пример hidden=»false» — но в FireFox он всё равно скрыт, поэтому учитывайте это. Хотя, для тех кто использует jQuery, этот вариант всё таки не сильно удобный.

HTML — тег abbr

abbr — тег для текста, который является аббревиатурой.

HTML 5

Как правило в браузере он подчеркивается пунктирной линией, и курсор меняется на стрелочку с вопросом. Элемент является инлайновым, а не блочным. Добавить класс или стили, как вы понимаете, не проблема :).

HTML — тег details, который показывает скрытый блок

Работает абсолютно без скриптов. Посмотрите сами (нужно нажать на название):

Нажми на меня

В новому году у нас появится огромное количество статей

  • Понимание структуры HTML документа
  • Когда использовать hgroup
  • Машинная семантика микроданных

При помощи details и summary вы сможете создать раскрывающий виджет без использования CSS и JS! Для того, чтобы список отображался в развернутом состоянии необходимо добавить атрибут open.

автор: Dmitriy

Занимаюсь веб-разработкой с 2011 года. Посмотреть некоторые из моих работ, а также узнать чуть больше обо мне, вы можете на forwww.ru

- Создание сайта на 1С-Битрикс;
- Доработки и правки на рабочем проекте;
- Адаптивная вёрстка и натяжка на Битрикс;
- Выгрузка и Загрузка товаров на сайт;
- Парсинг;
- Интеграции со сторонними сервисами по API;
- Многоязычные версии сайтов и многое другое.

Бесплатно проведу технический аудит вашего сайта, а также дам рекомендации по продвижению проекта. Отвечу на любые вопросы. Пишите :)
E-mail: dmitriyribka@gmail.com
Skype: cinemacreaterus

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *