October 2011 - Broken Links Archive

Opera’s CSS Pagination Build

Opera recent¬≠ly released a Labs build of their brows¬≠er with sup¬≠port for CSS pag¬≠i¬≠na¬≠tion; that is, remov¬≠ing the scroll¬≠bar from doc¬≠u¬≠ments and adding page con¬≠trols instead (this is ide¬≠al for non-desk¬≠top devices, espe¬≠cial¬≠ly TV, where scrolling can be oner¬≠ous). The syn¬≠tax (as described in the Gen¬≠er¬≠at¬≠ed Con¬≠tent for Paged Media mod¬≠ule) is very sim¬≠ple; you first use a media query with the paged media type (pre¬≠fixed in Opera) like so:

@media -o-paged {}

Then use new val¬≠ues for the overflow prop¬≠er¬≠ty on the scrol¬≠lable ele¬≠ment to con¬≠trol whether the pag¬≠i¬≠na¬≠tion moves hor¬≠i¬≠zon¬≠tal¬≠ly or ver¬≠ti¬≠cal¬≠ly, and whether or not on-screen con¬≠trols are shown, like so:

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

This pag­i­nates the whole doc­u­ment hor­i­zon­tal­ly, and adds con­trols. To see this work­ing, you’ll need to down­load a copy of the Labs build (avail­able for Mac, Win­dows, Lin­ux and Android), then you can vis­it this exam­ple page from Dive Into HTML5 I quick­ly set up. Nav­i­gate by dragging/swiping, cur­sor keys, or the native controls.

I real¬≠ly like this; it‚Äôs still ear¬≠ly days, but the syn¬≠tax seems clear and log¬≠i¬≠cal and works well in the demos I‚Äôve seen, and I think it‚Äôs going to be real¬≠ly use¬≠ful as the web migrates away from the desk¬≠top and onto oth¬≠er con¬≠nect¬≠ed devices. More infor¬≠ma¬≠tion and exam¬≠ples are in the ‚ÄėPag¬≠ing the Web‚Äô arti¬≠cle on H√•kon Wium Lie‚Äôs web¬≠site, and I‚Äôll def¬≠i¬≠nite¬≠ly be delv¬≠ing fur¬≠ther into this.


Aside

I‚Äôve updat¬≠ed my Speak¬≠ing page to include more con¬≠fer¬≠ences, more videos, and a lit¬≠tle on my speak¬≠ing require¬≠ments and pref¬≠er¬≠ences. I‚Äôm plan¬≠ning to cut down on the num¬≠ber of talks I give in 2014 (twelve is too many), but am always open to inter¬≠est¬≠ing offers and oppor¬≠tu¬≠ni¬≠ties, so please get in touch if you‚Äôre organ¬≠is¬≠ing an event.

[#] 1 Comment . More Asides.