Charles McCathieNevile

CSS Nite 10月 2006
chaals @ opera.com
View with Opera anywhere!

Adaptation with Style

Charles McCathieNevile


Clearly Strong Stuff

Acid2 screenshot

Careful. Acid2 breaks when adapted with CSS

So how to use it well?

Liquid layout

Use the space you have

Cool! So Simple!

The three column trick

<div class="colr">
   <div class="bl">

[The content of the middle column]


[The content of the right-hand column]


[The content of the left-hand column]

.colr { float: right;
    width: 66% }
.bl { float: left; 
    width: 50% } 
Source order
Comfortable reading order
3-column layout

W3.org uses this without fixing source order

(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


Simple CSS 2 adaptation

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} ...  ]]>

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

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.