Атрибут translate тега <dialog>
Описание
Атрибут translate указывает, следует ли переводить содержимое диалогового окна при автоматическом переводе страницы. Это особенно полезно для:
- Технических терминов и названий, которые не требуют перевода
- Собственных имен и брендов
- Кодовых значений и специальных обозначений
Примеры использования
<!-- 1. Диалог с техническими терминами -->
<dialog translate="no">
<h3>API Configuration</h3>
<p>Set up your <span translate="no">RESTful</span> endpoints</p>
</dialog>
<!-- 2. Диалог с переводимым содержимым -->
<dialog translate="yes">
<h3>User Preferences</h3>
<p>Configure your account settings</p>
</dialog>
<!-- 3. Смешанный контент -->
<dialog>
<h3 translate="no">JavaScript Settings</h3>
<p translate="yes">Adjust your scripting preferences</p>
</dialog>
Значения атрибута
| Значение | Описание | Пример использования |
|---|---|---|
yes |
Разрешает автоматический перевод | Обычный текст, инструкции |
no |
Запрещает автоматический перевод | Технические термины, коды, бренды |
| Не указан | Наследует поведение родителя | По умолчанию обычно "yes" |
Лучшие практики
<!-- 1. Явное указание для важных элементов -->
<dialog translate="no">
<h3><span translate="yes">Configuration for</span> <span translate="no">MySQL</span></h3>
<p translate="yes">Set up your database connection</p>
</dialog>
<!-- 2. Динамическое управление переводом -->
<dialog id="techDialog">
<h3>Technical Details</h3>
<p>API version: <span id="apiVersion">2.4.1</span></p>
</dialog>
<script>
// Запрещаем перевод для технических деталей
document.getElementById('apiVersion').translate = 'no';
</script>
Особенности работы
- Наследование: Дочерние элементы наследуют значение
translateот родителя - Приоритет: Локальные значения переопределяют родительские
- Доступность: Не влияет на скринридеры напрямую
- SEO: Может учитываться поисковыми системами при автоматическом переводе
Совместимость и ограничения
| Браузер | Поддержка | Примечания |
|---|---|---|
| Chrome | Да | Полная поддержка |
| Firefox | Да | Полная поддержка |
| Safari | Частичная | Может игнорироваться в некоторых версиях |
| Edge | Да | Полная поддержка |
Примечание: Атрибут translate не заменяет полноценной системы локализации. Для профессиональных многоязычных приложений используйте специализированные библиотеки (i18next, react-intl), которые предоставляют более полный контроль над переводом контента.