Noen her med erfaring fra HTML5 og CSS ifm @media print

25. mars 2011

Noen her med erfaring fra HTML5 og CSS ifm @media print

Jeg er her: http://www.w3.org/TR/CSS2/media.html

Men skulle gjerne hatt noen eksempler på sider som bruker @media print på en god måte, gjerne tilbakespill.

Det jeg ønsker å gjøre er å skrive ut en tabell uten at div elementene skal ha noen betydning, mens div elementene skal styre visning @media screen

z0p

uʍop ǝpısdn

3.814 906

25. mars 2011

Jeg er litt usikker på akkurat hva du vil tror jeg.

Kode

div.table-controls 
{
  /* screen styles */
}
@media print 
{
  div.table-controls 
  {
    display: none;
  }
}

fxxked

Trådstarter

3.214 254

25. mars 2011

Her er et eksempel på HTML 4.01 Transitional: http://code.google.com/p/restauranta...ndex.html?r=17

Jeg ønsker å gjøre det samme( inkludere css til forskjellige media) riktig i html5,
det funker å gjøre det likt som i eksemplet, men jeg mistenker at jeg da blander HTML 4.01 Transitional og html5

z0p

uʍop ǝpısdn

3.814 906

25. mars 2011

Såvidt meg bekjent er det små forskjeller på link-elementet fra html 4.01 til html 5. media-attributtet er støttet og oppdatert med flere verdier. Hva som er best praksis kommer vel litt ann på, men ved å bruke @media print eller @import url('print-styles.css') print; vil du i større grad kunne skille CSS og HTML

fxxked

Trådstarter

3.214 254

26. mars 2011

Så noe slik

Kode

@import url('common-styles.css');
@import url('print-styles.css') print;
@import url('screen-styles.css') screen;

vil der ikke være noe feil ved?

og vil være den korrekte etterfølgeren til HTML4 sin

Kode

<link rel="stylesheet" type="text/css" id="layout" href="media/layout.css" media="screen">
<link rel="stylesheet" type="text/css" href="media/style.css" media="all">
<link rel="stylesheet" type="text/css" href="media/print.css" media="print">

Forstod jeg deg rett da?

z0p

uʍop ǝpısdn

3.814 906

26. mars 2011

Som sagt er link-elementet fra HTML 4.01 i all hovedsak kompatibel med HTML 5, og da her korrekt HTML 5
@import er korrekt CSS versjon 2 og 3 (i henhold til draft)

vennlig hilsen teskje-kjerringa

Sist endret av z0p; 26. mars 2011 kl. 17:41.