Десктопная версия браузера Opera, начиная с версии 11.10, позволяет владельцам сайтов определять, как их сайт будет отображаться в миниатюрах экспресс-панели.
По умолчанию для отображения используется снимок всей веб-страницы.
Теперь можно указать значок с помощью CSS или в теле веб-страницы.
Логотип
В этом разделе рассказывается, как использовать собственный логотип или значок на панели «Экспресс».
Иконки в HTML5
Возможно, вам знакомы значки закладок.Впервые они были представлены в версии 5 Internet Explorer в 1999 году.
Хотя они не были включены в спецификацию HTML4, производители браузеров со временем согласился включить поддержку значки в качестве значения атрибута rel ссылки.
Позже Apple расширила поддержку значков на своих сенсорных устройствах посредством значок яблока .
Согласно спецификации HTML5, значок в настоящее время действительный , стандартизированное значение элемент для атрибута rel.
Объявление значка для панели Эexpress
Объявление значка для панели Эexpress во многом похоже на объявление значка сайта.Вам просто нужно добавить тег в заголовок веб-страницы:
Значок панели Эexpress должен иметь следующий вид:<head> <title>My Opera</title> <link rel="icon" type="image/png" href=" http://path/to/logo.png "> </head>
- минимум 114 х 114 пикселей.
Меньшие значки будут игнорироваться;
- Файл должен быть в формате PNG, JPG или GIF. Файлы SVG пока не поддерживаются.
Если вы используете анимированные изображения, будет отображаться только первый кадр.
Значки большего размера будут уменьшены до соответствующих размеров ( демо ).
Вы можете изменить значения по умолчанию минимального и максимального размера значков в меню настроек браузера в Opera:config.
Opera 11.10 также поддерживает apple-touch-icon, apple-touch-icon-precompose и image_src.
Использование нескольких значков
Вы также можете указать несколько значков.Это очень удобно, если вы хотите, чтобы пользователь использовал один значок при добавлении страницы в закладки, а другой при добавлении сайта в Экспресс-панель.
<head>
<title>My Opera</title>
<link rel="icon" type="image/png" href=" http://path/to/128x128image.png ">
<!-- This will be the speed dial icon -->
<link rel="icon" type="image/png" href=" http://path/to/200x200image.png ">
</head>
Если вы объявите несколько значков, на панели Эexpress отобразится больший из них ( демо ).
Если значки имеют одинаковый размер, будет использоваться тот, который объявлен первым ( демо ).
?Экспресс-панель с учетом содержимого
В этом разделе описывается несколько новых способов получения контента для панели Эexpress:- использование режима просмотра: свернуто в CSS;
- использование HTTP-заголовка X-Purpose;
- автоматическая перезагрузка.
Использование режима просмотра: свернуто
Рисунок 1: Экспресс-панель в Opera 11.10. Параметр режим просмотра определяет, как будут указаны стили в зависимости от режима просмотра.
Используя режим просмотра: свернуто, вы можете определить альтернативные стили для отображения содержимого, предназначенного для панели «Экспресс».
Режим просмотра работает аналогично ширине устройства.
Стили должны содержать СМИ .
@media screen and (view-mode: minimized) {
body {
color: #fff;
background: #b20000;
}
}
Вы также можете включить файл CSS и установить значение атрибута мультимедиа следующим образом: <link rel=stylesheet type="text/css" href="minimizedstyles.css" media="(view-mode:minimized)">
Пример использования режима просмотра: свернуто Здесь .
Помните, что режим просмотра: минимизирован переключает область просмотра на экспресс-панели на 260 x 195 пикселей.
Использование HTTP-заголовка
Также возможно использовать разные URL-адреса для экспресс-панели, каждый запрос которой содержит дополнительный HTTP-заголовок X-Purpose:view. GET / HTTP/1.1
Host: www.bbc.co.uk/news
X-Purpose: preview
User-agent: Opera/9.80 (Macintosh; Intel Mac OS X 10.6.6; U; en) Presto/2.8.99 Version/11.10
При обнаружении этого HTTP-заголовка вы можете выбрать, какой URL-адрес будет использоваться, определить файлы, которые будут отправлены на экспресс-панель, или отобразить контент, специально подготовленный для экспресс-панели.
Обратите внимание, что тот же эффект не произойдет, когда пользователь перейдет на сайт из экспресс-панели.
В приведенном ниже примере мы используем директиву mod_rewrite Apache для перенаправления всех запросов панели Эexpress на /preview.html (возможно, вам захочется указать более конкретно в вашей конкретной ситуации): RewriteEngine On
RewriteCond %{HTTP:X-Purpose} ^preview$
RewriteRule ^(.
*) /preview.html
Или, может быть, вы предпочитаете использовать обработку запросов на стороне сервера на каком-либо языке.
Ниже приведен пример на PHP: <Эphp
if ($_SERVER['HTTP_X_PURPOSE'] == 'preview') {
// Send Speed Dial content
} else {
// Send regular content
}
?>
Автообновление через определенный интервал
Чтобы сделать содержимое Экспресс-панели более динамичным, вы можете установить интервал обновления, который будет использоваться после добавления сайта в Экспресс-панель.Это можно сделать двумя способами:
- используя метатег:
<meta http-equiv="preview-refresh" content="3600">
- возврат HTTP-ответа, например:
Preview-Refresh: 3600
значение 3600 будет равно 1 часу.
Приоритет
Порядок получения контента для панели «Экспресс» следующий: Приоритет в первую очередь отдается режиму просмотра: сведен к минимуму в CSS и стилях.Если стили недоступны, браузер будет искать объявление значка для страницы.
Если ничего не объявлено или файл недоступен или поврежден, будет использован стандартный метод, а именно добавление снимка всей страницы.
Продукты, поддерживающие эту функцию
Пока эти улучшения доступны только пользователям десктопной версии браузера Opera.Для справки
Ссылки из спецификации HTML5 WHATWG Спецификация режима просмотра п.с.
Я приму все исправления и неточности в переводе.
Лучше в личку ;) Теги: #opera #быстрый набор #opera
-
Flussonic Agent - Прошивки Для Камер
19 Oct, 24 -
Нет, Ты Не Можешь Сделать Это Как Apple.
19 Oct, 24 -
Нормальные Значения Title На Хабрахабре
19 Oct, 24 -
Миранда Заработала
19 Oct, 24 -
Internet Explorer 8 – Невозможное Возможно?
19 Oct, 24
