HTML трюки +20


AliExpress RU&CIS

image

1. Атрибут `loading=lazy`


Совет по производительности. Вы можете использовать атрибут loading = lazy, чтобы отложить загрузку изображения до тех пор, пока пользователь не домотает до них.

<img src='image.jpg' loading='lazy' alt='Alternative Text'>  

2. Email, звонки и SMS


<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a>   

3. Упорядоченные списки с атрибутом `start`


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

image

4. Элемент`meter`


Вы можете использовать элемент <meter> для отображения количеств. Не требуется JavaScript / CSS.


5. HTML Native Search



6. Элемент Fieldset


Вы можете использовать элемент fieldset, чтобы сгруппировать несколько элементов управления, а также метки ( label ) в веб-форме.


7. Window.opener


Страницы, открытые с target = "_ blank", позволяют новой странице получить доступ к window.opener оригинала. Это может иметь последствия для безопасности и производительности. Включите rel = "noopener" или rel = "noreferrer", чтобы предотвратить это.

<a href="https://markodenic.com/" target="_blank" rel="noopener">
	Marko's website
</a>  

8. Элемент Base


Если вы хотите открыть все ссылки в документе на новой вкладке, вы можете использовать элемент base


9. Очистка кэша Favicon


Чтобы обновить значок вашего веб-сайта, вы можете заставить браузеры загружать новую версию, добавив ?v=2 к имени файла.

Это особенно полезно в производственной среде, чтобы пользователи получали новую версию.

<link rel="icon" href="/favicon.ico?v=2" />   

10. Атрибут `spellcheck`


Используйте атрибут spellcheck, чтобы определить, можно ли проверять элемент на наличие орфографических ошибок.


11. Нативные слайдеры HTML


Вы можете использовать input type = "range" для создания ползунков.


12. HTML Accordion


Вы можете использовать элемент details для создания native HTML accordion


13. Тег `mark`


Вы можете использовать тег mark для выделения текста.
image

14. Атрибут `download`


Вы можете использовать атрибут download в своих ссылках, чтобы загрузить файл вместо перехода к нему.

<a href='path/to/file' download>
  Download
</a>           

15. Трюк для производительности


Используйте формат изображения .webp, чтобы уменьшить размер изображения и повысить производительность вашего веб-сайта.

<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  
  <!-- 
	Fallback if `.webp` images or <picture> tag 
	not supported by the browser.
  -->
  <img src="logo.png" alt="logo">
</picture> 

16. Миниизображение для видео


Используйте атрибут poster, чтобы указать изображение, которое будет отображаться во время загрузки видео или пока пользователь не нажмет кнопку воспроизведения.

<video poster="path/to/image"> 

Продолжение следует...

Теги:




Комментарии (16):

  1. jaiprakash
    /#23011882

    Н

    • jaiprakash
      /#23011888

      Не хватает caniuse для каждого пункта.

      • dimmdell
        /#23012698

        У меня желание туда запрыгнуть только на &ltmeter&gt появилось, и он на удивление неплохо поддерживатся, а в остальном согласен, с такими вещами надо осторожно. Порой даже вещи, которые кажутся очень простыми в каком-нибудь сафари могут вот уже много лет как толком не поддерживаться и развлекать пользователей, которых разработчики просто не учли.

  2. TheSprightlyDuke
    /#23011980 / +1

    Лично я открыл статью, чтобы увидеть обещанные трюки. Трюков не увидел. Некрасиво так делать — врать в заголовке. Хабр, это не мэйлвру.

    П.С.
    ru.wikipedia.org/wiki/%D0%A2%D1%80%D1%8E%D0%BA

    • E_STRICT
      /#23012978

      В оригинале это были HTML Tips.

      • TheSprightlyDuke
        /#23013832

        Напиши они «HTML советы», вопросов бы не было.

        Трюк, это трюк:
        Ловкий, эффективный прием
        искусный маневр или технический приём, как правило, опасный или невыполнимый для неподготовленного человека
        Ловкая проделка, затея, неожиданный поступок, производящий большое впечатление

        В статье трюков нет. А советы есть.

        • cbelkin
          /#23014168

          Мне кажется вариации толкований слова «трюк» не является темой обсуждения этой статьи.

          • TheSprightlyDuke
            /#23014192

            Тема обсуждения, которую я поднял — обман в заголовке

            Лично я открыл статью, чтобы увидеть обещанные трюки. Трюков не увидел.
            Где, как прямо на месте происшествие это обсуждать следует, по Вашему?

    • Jagga-Jagga
      /#23013276

      Все заключается в уровне профессионализма - для кого-то это повседневность, для кого-то - трюк.

      • TheSprightlyDuke
        /#23013836

        Согласен с тезисом в целом. Но тут частный случай. Разве Вы в статье видите что-то, что требует профессионализма, хоть в какой-то мере, а не просто обычного знания обычных тегов и свойств? Я не вижу. Могу быть не прав, в теории, но не думаю, что не прав.

        • cbelkin
          /#23014158 / -1

          Насколько я могу судить, на хабре присутствует аудитория с разным уровнем технических знаний в разных областях. Кто-то знает спецификацию наизусть (и для него это кажется обычным дело), а кто-то представляет себе HTML лишь в общих чертах. И для последних, предлагаемые в этой статье тэги и атрибуты, не являются обычными, поскольку редко встречаются. На школьных курсах по информатике об этом не все говорят. На университетских курсах по веб-программированию тоже (даже на ФКН). Просто времени нет на то, чтобы обозревать всю спецификацию.

          Поэтому я бы не стал приобщать представленные примеры к «Обычным знаниям тэгов и свойств».

  3. cbelkin
    /#23013278

    Не вижу ничего криминального в заголовке. Мне статья показалась интересной и полезной. Хорошее напоминание о тэгах и атрибутах, которые на практике используют очень редко. На мой взгляд незаслуженно. Кроме того, ещё очень много элементов, не упомянутых в этом посте, имеют такую же участь.
    Проблемы с совместимостью, из представленных примеров, я увидел только у первого пункта. Атрибут loading не поддерживается браузерами Safari и Firefox. В остальном всё должно работать. Конечно, при условии, что вы не ориентируетесь на версии браузеров десятилетней давности. Но, как по мне, это уже неприлично.

    • TheSprightlyDuke
      /#23013840

      А смысл в этом напоминании, если можно зайти на спеку и там всё это увидеть?

      • cbelkin
        /#23014090

        Не вижу ничего плохо в том, что пишут статьи или книги, которые аккумулируют информацию по какой-то теме и представляют её в кратком и удобном виде. Например у меня на книжной полке стоит книга «Руководство системного администратора». Аж на 1000 страниц. 90% этой книги в том или ином виде присутствует в спецификациях. В силу того, что системное администрирование не является моей повседневной задачей, многие вещи забываются. Поэтому иногда я беру и листаю эту книгу, чтобы освежить знания. Бывает даже нахожу что-то новое для себя, чего не замечал раньше. И это удобнее, чем бессистемно рыться в мануалах. На это уйдёт гораздо больше времени. Меня заинтересует какая-то команда — вот я и пойду читать о ней подробнее в мануале.

        Такой же смысл я вижу и в этой статье. У меня нет особой потребности часто заходить на спецификацию по HTML. А тем более читать её вдоль и поперёк — всё равно забудется. Когда мне доводится смотреть исходники чужих HTML страниц, то я редко вижу подобные решения. Поэтому скорее всего забывается даже у фронтенд разработчиков. Но я пишу в первую очередь о своих ощущениях. Что-то я видел раньше, что-то нет. Но вот наткнулся на статью, освежил информацию и взял на заметку. И вот как раз зашёл и почитал в спецификации по интересующим меня пунктам.

  4. nikolau
    /#23013942

    Атрибут `loading=lazy`можно вообще во все картинки вставлять, получается? Или есть нюансы?