Highlight your website in Speed Dial
The desktop version of Opera browser, starting with version 11.10, allows site owners to determine how their site will be displayed in thumbnails of the Express panel. By default, a screenshot of the entire web page is used for display. Now it is possible to specify the icon through CSS or in the body of the web page.
This section is about how to use your own logo or icon in the Express panel.
You may be familiar with bookmark icons. They were first introduced in version 5 of Internet Explorer in 1999. Although they were not included in the HTML4 specification, browser manufacturers eventually agreed to include support for icons as the value of the rel attribute of the link. Apple later expanded the support for icons in their touch devices via apple-touch-icon . According to the HTML5 specification, the icon is currently a valid , standardized element value for the rel attribute.
The announcement of the icon for the express panel is in many ways similar to the announcement of the site icon. It is only necessary to add a tag to the head section of the web page:
The icon for the express panel should be:
Also Opera 11.10 supports apple-touch-icon, apple-touch-icon-precomposed and image_src.
')
You can also specify multiple icons. This is very convenient if you want the user to use one icon when adding a page to bookmarks, and another when adding a site to the Express panel.
If you declare several icons, the Express panel will display a larger one ( demo ). If the icons are the same size, the one that is first declared ( demo ) will be used.
This section describes several new ways to get content for the Speed Dial:
The view-mode parameter determines how styles will be specified depending on the view mode. Using the view-mode: minimized, you can define alternative styles for displaying content intended for the Express panel. View-mode works like device-width. Styles must contain media .
You can also include a CSS file and set the value of the media attribute like this:
An example using view-mode: minimized here .
Remember that view-mode: minimized switches the viewport in the Express panel to 260 x 195 pixels.
It is also possible to use different URLs for Express panels, each request of which contains an additional HTTP header X-Purpose: preview.
When this HTTP header is detected, you can choose which URL to use, determine the files that will be sent to the Express panel, or display the content specially prepared for the Express panel. Note that the same effect will not be when the user navigates to the site from the Express panel.
In the example below, we use the Apache server's mod_rewrite directive to redirect all Express Panel requests to the address /preview.html (you may want to specify the requests in a specific situation):
Or perhaps you would prefer to use server-based request processing in any language. Below is an example in PHP:
To make the content of the Express panel more dynamic, you can set the interval for the update, which will be used after adding the site to the Express panel. This can be done in two ways:
The procedure for obtaining content for the Express panel is as follows:
The priority is primarily given to view-mode: minimized in CSS and styles. If styles are not available, the browser will search for an ad icon for the page. If nothing is declared or the file is unavailable or damaged, the standard method will be used, namely adding a snapshot of the whole page.
While these improvements are available only to users of the desktop version of the browser Opera.
Links from the HTML5 WHATWG specification
Specification view-mode
Logo
This section is about how to use your own logo or icon in the Express panel.
HTML5 Badges
You may be familiar with bookmark icons. They were first introduced in version 5 of Internet Explorer in 1999. Although they were not included in the HTML4 specification, browser manufacturers eventually agreed to include support for icons as the value of the rel attribute of the link. Apple later expanded the support for icons in their touch devices via apple-touch-icon . According to the HTML5 specification, the icon is currently a valid , standardized element value for the rel attribute.
Ad icon for express panel
The announcement of the icon for the express panel is in many ways similar to the announcement of the site icon. It is only necessary to add a tag to the head section of the web page:
<head> <title>My Opera</title> <link rel="icon" type="image/png" href="http://path/to/logo.png"> </head> The icon for the express panel should be:
- minimum 114 x 114 pixels. Smaller icons will be ignored;
- The file must be in PNG, JPG or GIF format. SVG files are not supported yet. In case of using animated images, only the first frame will be displayed.
Also Opera 11.10 supports apple-touch-icon, apple-touch-icon-precomposed and image_src.
')
Using multiple icons
You can also specify multiple icons. This is very convenient if you want the user to use one icon when adding a page to bookmarks, and another when adding a site to the Express panel.
<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> If you declare several icons, the Express panel will display a larger one ( demo ). If the icons are the same size, the one that is first declared ( demo ) will be used.
Express panel considering the content
This section describes several new ways to get content for the Speed Dial:
- using view-mode: minimized in CSS;
- use of the HTTP header X-Purpose;
- automatic reboot.
Using view-mode: minimized
Figure 1: The express panel in Opera 11.10
The view-mode parameter determines how styles will be specified depending on the view mode. Using the view-mode: minimized, you can define alternative styles for displaying content intended for the Express panel. View-mode works like device-width. Styles must contain media .
@media screen and (view-mode: minimized) { body { color: #fff; background: #b20000; } } You can also include a CSS file and set the value of the media attribute like this:
<link rel=stylesheet type="text/css" href="minimizedstyles.css" media="(view-mode:minimized)"> An example using view-mode: minimized here .
Remember that view-mode: minimized switches the viewport in the Express panel to 260 x 195 pixels.
Using HTTP header
It is also possible to use different URLs for Express panels, each request of which contains an additional HTTP header X-Purpose: preview.
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 When this HTTP header is detected, you can choose which URL to use, determine the files that will be sent to the Express panel, or display the content specially prepared for the Express panel. Note that the same effect will not be when the user navigates to the site from the Express panel.
In the example below, we use the Apache server's mod_rewrite directive to redirect all Express Panel requests to the address /preview.html (you may want to specify the requests in a specific situation):
RewriteEngine On RewriteCond %{HTTP:X-Purpose} ^preview$ RewriteRule ^(.*) /preview.html Or perhaps you would prefer to use server-based request processing in any language. Below is an example in PHP:
<?php if ($_SERVER['HTTP_X_PURPOSE'] == 'preview') { // Send Speed Dial content } else { // Send regular content } ?> Auto-refresh at a certain interval
To make the content of the Express panel more dynamic, you can set the interval for the update, which will be used after adding the site to the Express panel. This can be done in two ways:
- using meta tag:
<meta http-equiv="preview-refresh" content="3600"> - returning an HTTP response of the form:
Preview-Refresh: 3600
A priority
The procedure for obtaining content for the Express panel is as follows:
The priority is primarily given to view-mode: minimized in CSS and styles. If styles are not available, the browser will search for an ad icon for the page. If nothing is declared or the file is unavailable or damaged, the standard method will be used, namely adding a snapshot of the whole page.
Products supporting this functionality
While these improvements are available only to users of the desktop version of the browser Opera.
For reference
Links from the HTML5 WHATWG specification
Specification view-mode
ps I will accept all amendments and inaccuracies in the translation. Better in a personal;)
Source: https://habr.com/ru/post/115705/
All Articles