Opera’s CSS Pagination Build

Warning This article was written over six months ago, and may contain outdated information.

Opera recently released a Labs build of their browser with support for CSS pagination; that is, removing the scrollbar from documents and adding page controls instead (this is ideal for non-desktop devices, especially TV, where scrolling can be onerous). The syntax (as described in the Generated Content for Paged Media module) is very simple; you first use a media query with the paged media type (prefixed in Opera) like so:

@media -o-paged {}

Then use new values for the overflow property on the scrollable element to control whether the pagination moves horizontally or vertically, and whether or not on-screen controls are shown, like so:

@media -o-paged {
  html {
    height: 100%;
    overflow: -o-paged-x-controls;
  }
}

This paginates the whole document horizontally, and adds controls. To see this working, you’ll need to download a copy of the Labs build (available for Mac, Windows, Linux and Android), then you can visit this example page from Dive Into HTML5 I quickly set up. Navigate by dragging/swiping, cursor keys, or the native controls.

I really like this; it’s still early days, but the syntax seems clear and logical and works well in the demos I’ve seen, and I think it’s going to be really useful as the web migrates away from the desktop and onto other connected devices. More information and examples are in the ‘Paging the Web’ article on Håkon Wium Lie’s website, and I’ll definitely be delving further into this.

Comments are closed.