Мета теги Apple
Они помогают улучшить отображение сайта в браузере Safari, настройку работы с веб-приложениями и взаимодействие с устройствами на iOS.
Основные мета-теги Apple
1. Добавление сайта на главный экран (Web App Mode)
Чтобы пользователи могли добавлять сайт на главный экран с интерфейсом как у приложения:
<meta name="apple-mobile-web-app-capable" content="yes">
Этот тег активирует полноэкранный режим веб-приложения, исключая элементы браузера (например, адресную строку).
2. Установка цветовой темы статус-бара
Можно задать цвет статус-бара для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Значения:
• default — стандартный вид статус-бара (белый текст на чёрном фоне).
• black — чёрный фон статус-бара.
• black-translucent — полупрозрачный чёрный статус-бар.
3. Иконка приложения для главного экрана
Чтобы настроить иконку для сайта, добавляем:
<link rel="apple-touch-icon" href="icon.png">
Можно указать несколько иконок разных размеров:
<link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon-120.png">
4. Тег для сплэш-экрана при загрузке веб-приложения
Чтобы пользователь видел загрузочный экран, пока приложение открывается:
<link rel="apple-touch-startup-image" href="splash.png">
5. Запрет автоматического масштабирования
Чтобы отключить автоматическое изменение масштаба страницы, можно использовать:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6. Оптимизация заголовков и переходов
Тег для более плавного отображения шрифтов и стиля текста:
<meta name="format-detection" content="telephone=no">
Этот тег предотвращает автоматическое преобразование телефонных номеров в ссылки.
Зачем использовать мета-теги Apple?
• Улучшение пользовательского опыта для владельцев iOS-устройств.
• Добавление сайта на главный экран с функциональностью, схожей с нативным приложением.
• Брендирование сайта с помощью иконок и кастомного интерфейса.
#html | #полезности
Они помогают улучшить отображение сайта в браузере Safari, настройку работы с веб-приложениями и взаимодействие с устройствами на iOS.
Основные мета-теги Apple
1. Добавление сайта на главный экран (Web App Mode)
Чтобы пользователи могли добавлять сайт на главный экран с интерфейсом как у приложения:
<meta name="apple-mobile-web-app-capable" content="yes">
Этот тег активирует полноэкранный режим веб-приложения, исключая элементы браузера (например, адресную строку).
2. Установка цветовой темы статус-бара
Можно задать цвет статус-бара для веб-приложения:
<meta name="apple-mobile-web-app-status-bar-style" content="default">
Значения:
• default — стандартный вид статус-бара (белый текст на чёрном фоне).
• black — чёрный фон статус-бара.
• black-translucent — полупрозрачный чёрный статус-бар.
3. Иконка приложения для главного экрана
Чтобы настроить иконку для сайта, добавляем:
<link rel="apple-touch-icon" href="icon.png">
Можно указать несколько иконок разных размеров:
<link rel="apple-touch-icon" sizes="180x180" href="icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="icon-152.png">
<link rel="apple-touch-icon" sizes="120x120" href="icon-120.png">
4. Тег для сплэш-экрана при загрузке веб-приложения
Чтобы пользователь видел загрузочный экран, пока приложение открывается:
<link rel="apple-touch-startup-image" href="splash.png">
5. Запрет автоматического масштабирования
Чтобы отключить автоматическое изменение масштаба страницы, можно использовать:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
6. Оптимизация заголовков и переходов
Тег для более плавного отображения шрифтов и стиля текста:
<meta name="format-detection" content="telephone=no">
Этот тег предотвращает автоматическое преобразование телефонных номеров в ссылки.
Зачем использовать мета-теги Apple?
• Улучшение пользовательского опыта для владельцев iOS-устройств.
• Добавление сайта на главный экран с функциональностью, схожей с нативным приложением.
• Брендирование сайта с помощью иконок и кастомного интерфейса.
#html | #полезности
Тег <time>
HTML тег <time> представляет временную метку в документе HTML. Он используется для указания даты, времени или их комбинации.
Пример использования тега <time>:
В данном примере мы указываем, что наша временная метка соответствует 1 января 2022 года. Атрибут datetime используется для указания конкретной даты и времени в формате ГГГГ-ММ-ДД.
Однако, тег <time> не ограничивается только датами. Он также может быть использован для указания времени:
В этом случае мы указываем, что временная метка соответствует 12:30 PM.
Тег <time> также поддерживает комбинированные значения, включающие и дату, и время:
Этот пример указывает, что временная метка соответствует 1 января 2022 года, 12:30 PM.
Тег <time> особенно полезен для поисковых систем и адаптивного дизайна. Поисковые системы могут использовать информацию из тега <time> для индексации дат и времени, а адаптивный дизайн может автоматически адаптировать формат и отображение временных меток в зависимости от устройства пользователя.
Тег <time> является одним из многих полезных инструментов, предоставляемых HTML для более точного и информативного описания контента.
#html | #теория
HTML тег <time> представляет временную метку в документе HTML. Он используется для указания даты, времени или их комбинации.
Пример использования тега <time>:
<time datetime="2022-01-01">1 января 2022</time>
В данном примере мы указываем, что наша временная метка соответствует 1 января 2022 года. Атрибут datetime используется для указания конкретной даты и времени в формате ГГГГ-ММ-ДД.
Однако, тег <time> не ограничивается только датами. Он также может быть использован для указания времени:
<time datetime="12:30">12:30 PM</time>
В этом случае мы указываем, что временная метка соответствует 12:30 PM.
Тег <time> также поддерживает комбинированные значения, включающие и дату, и время:
<time datetime="2022-01-01T12:30">1 января 2022 года, 12:30 PM</time>
Этот пример указывает, что временная метка соответствует 1 января 2022 года, 12:30 PM.
Тег <time> особенно полезен для поисковых систем и адаптивного дизайна. Поисковые системы могут использовать информацию из тега <time> для индексации дат и времени, а адаптивный дизайн может автоматически адаптировать формат и отображение временных меток в зависимости от устройства пользователя.
Тег <time> является одним из многих полезных инструментов, предоставляемых HTML для более точного и информативного описания контента.
#html | #теория
HTML5 Drag and Drop API — перетаскивание без библиотек
Если тебе нужно реализовать функциональность, похожую на Trello, канбан-доски, визуальные редакторы или просто перемещение блоков — тебе не нужен фреймворк. HTML5 Drag & Drop API позволяет всё это сделать на чистом JavaScript.
Базовый пример
HTML:
Атрибут draggable="true" говорит браузеру: этот элемент можно тащить.
JS:
Что ты можешь делать с Drag and Drop API:
- Перетаскивать элементы между разными контейнерами
- Сортировать блоки внутри одной области
- Строить визуальные drag’n’drop редакторы
- Загружать файлы через перетаскивание
- Работать с dataTransfer для передачи информации
Важно помнить:
- Drag & Drop работает только для элементов DOM, не для всего подряд.
- Некоторые события (dragover, drop) требуют e.preventDefault(), иначе браузер блокирует действие.
- Если хочешь поддерживать мобильные устройства — придётся использовать кастомные решения, т.к. HTML5 Drag&Drop плохо работает на touch-экранах.
Подробнее: https://developer.mozilla.org/ru/docs/Web/API/HTML_Drag_and_Drop_API
#html | #полезности
Если тебе нужно реализовать функциональность, похожую на Trello, канбан-доски, визуальные редакторы или просто перемещение блоков — тебе не нужен фреймворк. HTML5 Drag & Drop API позволяет всё это сделать на чистом JavaScript.
Базовый пример
HTML:
<div id="box" draggable="true">Перетащи меня</div>
Атрибут draggable="true" говорит браузеру: этот элемент можно тащить.
JS:
const box = document.getElementById("box");
box.addEventListener("dragstart", () => {
box.style.opacity = "0.5";
});
box.addEventListener("dragend", () => {
box.style.opacity = "1";
});Что ты можешь делать с Drag and Drop API:
- Перетаскивать элементы между разными контейнерами
- Сортировать блоки внутри одной области
- Строить визуальные drag’n’drop редакторы
- Загружать файлы через перетаскивание
- Работать с dataTransfer для передачи информации
Важно помнить:
- Drag & Drop работает только для элементов DOM, не для всего подряд.
- Некоторые события (dragover, drop) требуют e.preventDefault(), иначе браузер блокирует действие.
- Если хочешь поддерживать мобильные устройства — придётся использовать кастомные решения, т.к. HTML5 Drag&Drop плохо работает на touch-экранах.
Подробнее: https://developer.mozilla.org/ru/docs/Web/API/HTML_Drag_and_Drop_API
#html | #полезности