Adaptation with Style

Charles McCathieNevile

chaals@opera.com

• Liquid layout
• @media
• CSS3 MQ

Clearly Strong Stuff

Careful. Acid2 breaks when adapted with CSS

• Acid2 is mostly CSS
• These slides are made with CSS
• (so are the printed and mobile versions)

So how to use it well?

Liquid layout

Use the space you have

• Use %, em, ex
• Avoid px, mm, etc.
• Let users set window sizes
• Keep font size 1em or greater

(How big is an em?)

The biggest size a letter can be, taking the entire height of the font.

An ex is the computed height of the letter "x" in a font.

Limits of liquid layout

• Columns fail with small screens
• Screens are not like projectors nor paper
• Printing and projecting mean pages

@media

Simple CSS 2 adaptation

• Different rules for difference devices
• screen, print, handheld
• projection, tv
• tv, braille, ...
• all (the default)

Using @media (1)

@media screen {
  body { ... }
  p { ... } }
@media handheld {
  p { ... }
  li { ...} }

Using @media (2)

<link href="R/ngw.css" rel="stylesheet"
     media="projection, screen, print, tv" />

<style type="text/css" media="handheld"><[CDATA[
.print {display:none}
ul { margin: 3px;padding:3px;list-style:none}

img.r { float:right ; padding: 0px; margin:0px }
.topright, .right, #s1 {display:none} ...  ]]>
</style>

OperaShow: @media

@media projection { 
.notes, .handout, .print { display:none; }
html, body, .presentation 
    { height: 100%; margin: 0px; padding: 0px; }

div.slide { page-break-after: always; margin: 0em 3em 0em ;
     padding: 0.2em 2em; height:80%; overflow: visible; }

CSS3 Media Queries

Powerful adaptation

• Still in development (Opera 8+, KHTML testing)
• Select on properties of the device
• device-width, resolution, ...
• backwards compatible
• But handle with care

Using CSS3 MQ

px!! Handle with care!

@media projection and
  (max-device-height:480px) {body{ font-size: 12px; } }
@media projection and
  (min-device-height:480px) {body{ font-size: 16px; } }
@media projection and
  (min-device-height:600px) {body{ font-size: 20px; } }

ありがとございます

Worse than foolish questions
is the folly of not asking.