More advice for the full screen mode.
Sivut toimivat riittävän hyvin MS IE 4.0+, Opera 5.x+, Netscape 6.0+/ vast. Mozilla ja Konqueror 3.x selaimilla. Yleisesti ottaen sivut toimivat parhaiten uusimmilla Opera selaimilla. Sivujen toimivuus vanhemmissa selaimissa on heikko, erityisesti Netscape 4.x kohdalla.

I list below all topic groups, which I have done according to subjects, which they handle. You can return to this topic group by using this menu and the link Table of topic groups on the top of the each page.

Media types and groups


The media rule and media types

CSS2 gives much possibility to tailor web sites for different representation devices. Most supported are normal screen presentation and printing. It is possible to give them own CSS by using the @media at-rule.

In CSS2 it is possible to use @media to make different presentation to the screen and printing or into some other devices:

@media print {/* this works at least in MS IE 5.x, new Netscape/ Mozilla and Opera 4.x+ */
body { font-size: 10pt }
@media screen {
body { font-size: 12pt }
@media screen, print {/* other possible media types: aural, braille, embossed, handheld, projection, tty, tv - note, that the device must identify itself and certain devices need special browsers and it is impossible to test these features before there are necessary browsers! */
body { line-height: 1.2 }
} /* note, that round brackets surrounds ordinary definitions */
W3C: CSS2: 7 Media types; 7.2.1 The @media rule[Pw].

If you put the media at-rule inside a single style sheet, the following conceptual scheme describes definition levels. I have used this kind of chart already, but I have added an extra level (the media rule block can have several rules like the declaration-block can have several declarations):

media rule block
selector property value
@media print { body { font-family : Verdana, Arial, sans-serif; } }

In the previous chart print is so-called media type. The media type information can connect also to the STYLE or LINK elements (<LINK rel="stylesheet" type="text/css" media="print">) or @import at-rule like @import url(print.css) print; (this CSS should be used only when the document is intended to print).

Browser-specific notes:

  1. The most common supported value is screen, which works at least in some versions of MS IE 4.x, Netscape 4.x and Opera 3.51+. Opera 3.51-3.6x supports also all and Opera 4.x+ in addition projection. MS IE 4.x+ supports also all and print. The latter works also in Netscape 4.x browsers. Corresponding values work also in many browsers with the @media at-rule. Media types have however following problems:

  2. The attribute media works correctly with the STYLE element among those browsers, which I have tested only in Mozilla 0.7+. Most other browsers read to the normal screen presentation part of the following CSS even if they should not to do so:

    <style type="text/css" media="projection">
    @import url(../Css/CssSiteProjection.css); /* this should not be read */
    body.CssSite div.docSlide p {color:red !important} /* Opera 5.x and MS IE can ignore this, which means that the attribute media works partially */

  3. Opera has the corresponding problem also with the LINK element, if the at-rule is not specified (for example @import url(...) screen;) or used media blocks in the imported style sheets.

  1. @import url(...) screen; etc. works among those browsers, which I have tested only in Mozilla 0.7+ and Opera 5.1x+.

  2. MS IE 4.0 for Windows and Opera 3.x read properties inside @media print {...} also to the screen version (indeed MS IE skips the first rule). @media screen {...} must write last and the author must be careful and define all necessary CSS another time. The same problem might be also with media attributes.

  3. Netscape 4.x doesn't read LINK and STYLE elements, if the attribute media has several values, for example media="screen,print". Netscape has also another issue, which I refer later in this page.

  4. Mac MS IE 5.0 for Mac and Netscape 4.x don't read rules, which are inside media blocks. Because Opera have difficulties with the import rules, @media and @import at-rules should not normally be used, if the purpose is to use media types so, that they work as many browsers as possible (they allow however skipping[S] some browsers).

  1. The full screen mode is in Opera 4.x+ so-called presentation mode, where the @media screen (concerns also the @media print) or corresponding media attributes don't work, but it is possible to use @media projection for it. I have noticed also this media type in this page (I have optimized it for 800x600 screen display - some hints[S]). Test, I you have quite new Opera - press the F11 button on the keyboard!

    Opera Software: XML in Opera.
  2. Opera has problems with defining CSS for several media types (I handle them closer in an extra page[S]).

Media groups

The normal screen media like some other media types are continuous media. Media types print and projection are parts of paged media, which is one of the media groups of CSS2.

In paged media the purpose is to control page breaks.

Ordinary paper printing, normal screen media, projection media and some other media types are parts of the What is the visual formatting model of CSS2. CSS2 has also non-What is the visual formatting model of CSS2s and special medias for aural handicapped people. Those are aural rendering model (for speech synthesizer) and tactile media.

In addition is taken account, if the device can render graphics. Or can the user affect to the presentation of the media or not.

The following list presents CSS2 media groups, formatting models and associated media types, if some media group/formatting model has only one or two media types:

  • How to put CSS into Web pages
  • Aural rendering model - the media type aural
  • Tactile media - media types braille and emboss
  • Paged media - continuous media (this matter concerns if pages are broken using page brake rules or not)
  • Interactive - static (can the user change the appearance of the page or not)
  • Grid - bitmap (in the previous situation the screen use so-called fixed-pitch character grid and graphics is not supported; The latter media group can use also proportional true type fonts and render graphics)

The relationship them to media groups and illustrate this table, which I have taken from the CSS2 specification (N/A means that this possibility is not applicable in certain circumstances):

Media Types Media Groups
continuous/ paged visual/aural/ tactile grid/bitmap interactive/ static
aural continuous aural N/A both
braille continuous tactile grid both
emboss paged tactile grid both
handheld both visual both both
print paged visual bitmap static
projection paged visual bitmap static
screen continuous visual bitmap both
tty continuous visual grid both
tv both visual, aural bitmap both

Media types

Generic notes:

  1. Some groupings are rather recommendations. The media type projection can be also interactive. By adding pause properties to the media type aural it can be create one kind of paged media.

  2. The problem of this table is in the media type handheld. New WAP mobile phones can handle quite limited way graphics. So-called palm pilot and Windows CE using devices have more capabilities. Which should be the dominant device? How the WAP severs should handle information to different handheld devices? The media type tty is text-only devices and it can't be used to them. Should there be a special group mobile_phones? (Look at also an extra page about this matter[S][Pw]).

Special at-rule for font types

In order to tailor different visual medias, CSS2 gives the possibility to download fonts using @font-face rule. Below is an example from the pages of W3C:

@font-face {
src: local("Helvetica Medium"), /* the browser tries to find this font from installed fonts */
url(http://www.fonts.org/sans/Helvetica_family) format("truedoc"); /* if it can't find it, it tries to download it; If it is doesn't succeed to download it, it use alternative fonts */
font-family: "Helvetica";
font-style: normal}
h3 {font-family: "Helvetica Medium", sans-serif }

W3C: CSS2: 15 Fonts, 15.3.1 Font Descriptions and @font-face[Pw].

Because fonts, which have the same point or pixel size might look as they have different size, CSS2 has been brought font matching algorithms, which gave better result using alternative fonts (font-size-adjust).

Browser-specific notes:

  1. font-size-adjust and other special font-related features don't work in those browsers, which I have tested.

  2. According to the information Mircosoft the @font-face at rule works in MS IE browsers starting from MS IE 4.0 for Windows (I have verified this matter with the version 6.0), but the font file format must be either .eot or .ote, not an ordinary font file (for example TT028M_.TTF). Because @font-face works in MS IE browsers only with some special font file format, the implementation is a little bit proprietary.

  3. Netscape 4.x support the proprietary @fontdef at-rule, which supports .pfr-files at (for example @fontdef url("http://www.example.com/sample.pfr");). Downloadable fonts works also by using a proprietary linking relation (>LINK rel="fontdef"...). According to a very reliable e-mail (21.07.2002) from Mozilla org @font-face is not yet supported.

W3C: CSS2: 15 Fonts[Pw], 15.2.4 Font size[Pw], 15.5 Font matching algorithm[Pw].
Other sites: Microsoft: @font-face Rule; Netscape: Dynamic HTML in Netscape Communicator Part 3. Downloadable Fonts.