Halfmoon - интерфейсный фреймворк со встроенным темным режимом и полной настройкой с помощью переменных CSS; отлично подходит для создания информационных панелей и инструментов.

#html #css

Вкладывание тэгов

Всем знаком сайт Can I use(caniuse.com), где можно проверить какая поддержка CSS свойств браузерами.

Еще один не менее полезный ресурс Can I include, где можно проверить, можно ли вкладывать какой-то определенный тэг в другой.

Очень важно, чтобы разметка сайта была валидна!
Поэтому, если есть сомнения, проверьте на данном сайте.

Ссылка на сайт

#html

fetchpriority - HTML атрибут, который позволяет определить приоритет загрузки различных ресурсов. Его можно использовать с тэгами link, img, script и iframe. 

Данный атрибут помогает улучшить производительность сайта, а в частности показатель LCP(Largest Contenful Paint). Основным содержимым для LCP обычно является самый крупный элемент. Этим элементом может быть изображение, видео или просто большой блок текста. И как долго загружается этот контент, влияет на LCP.

Подробно об атрибуте fetchpriority и как его использовать для оптимизации читайте в статье.

Ссылка на статью

#html

<template>

Как часто вы используете тэг <template> в работе?

Элемент <template> предназначен для хранения разметки, невидимой и предназначенной для вставки куда-либо.

Его отличие от обычных тегов в том, что его содержимое обрабатывается особым образом. Оно не только скрыто, но и считается находящимся вообще «вне документа». А при вставке автоматически «оживает», выполняются из него скрипты, начинает проигрываться видео и другое.

Подробнее о его преимуществах и случаях использования читайте в статье.

Ссылка на статью

#html

HTML-элементы, которые никто не использует

В HTML существует масса полезных тэгов, но при этом редко используемых.

Например, <datalist> позволяет добавлять список предложенных вариантов для автозаполнения у элементов ввода. 

Полный список читайте в статье!

Ссылка на статью

#html

CSS Layout Generator - это инструмент для создания верстки страниц или отдельных компонентов.

С помощью него можно строить разнообразные сетки. Нужно выбрать за основу один из шаблонов и настроить его под свои нужды. На выходе готовый HTML и CSS!

Ссылка

#html #css

Meta Tags Generator - это онлайн-инструмент для создания полного списка метатегов HTML для сайта.

Результат включает общие метатеги, open graph, schema.org и метатеги социальных сетей.

Ссылка

#html

Атрибут srcset

Атрибут srcset для тэга <img> используется для подключения картинок разного размера на разных разрешениях экрана. Браузер выбирает нужный вариант и отображает его. 

Но существует проблема, что браузер иногда подключает не ту картинку, которая ожидается. В чем причина рассказывается в статье!

Ссылка

#html

htmx - это библиотека, которая предлагает свежий взгляд на создание динамичного веб-интерфейса за счет использования таких функций, как Ajax и CSS transitions прямо в HTML.

Подробнее о библиотеке и как она работает читайте в статье.

Ссылка

#html

👩‍💻Как использовать html-элемент <dialog>?

В течение долгого времени для базовых UI-компонентов, таких как диалоговые окна, использовались самописные решения, а в тяжёлых случаях и встроенные в JavaScript методы alert(), prompt() и confirm().

Отличная новость в том, что такой компонент можно реализовать с использованием нативного HTML-элемента <dialog>, который встроен в стандарт HTML5 и работает одинаково во всех современных браузерах.

Ссылка

#html

Скрытые возможности элемента <input>

Элемент <input> в HTML самый интересный.

Большинство его собратьев вне зависимости от своих атрибутов ведут себя одинаково. При этом атрибут type элемента <input> может принимать 22 разных значения, которые не только меняют его поведение, но и влияют на внешний вид (зачастую в ущерб стилистике).

Элемент <input> отвечает за всё, начиная с текстового ввода и чекбоксов, заканчивая переключателями и кнопкой для сброса всех полей в форме.

В этой статье я опишу не только различные типы <input>, но и сопутствующие атрибуты, о которых вы могли не знать, и которые делают этот элемент более удобным и применимым в различных ситуациях.

Ссылка

#html

Почему текст в нижнем регистре сжимается лучше

Буквы в нижнем и верхнем регистре содержат одинаковое количество данных — по 1 байту каждая, поэтому удивительно, что замена заглавных букв на строчные снижает объём данных.

Пример: я взял главную страницу Hacker News и переписал заголовок каждой статьи, капитализировав только первые буквы в предложениях (sentence case) вместо первых букв во всех словах (title case). Это позволило мне снизить размер на 31 байт.

Cсылка

#html