World Wide Web är idag tillgänglig inte endast via datorer, men också på mobiltelefober,
digitala handassistenter och TV. Alla dessa apparater representerar ett helt annorlunda medium
än datorn, vilket kräver anpassning av det vissade innhållet till den använda apparaten.
Detta kan göras genom att skriva om innhållet så att det passar på alla olika enheter. Med
hjälp av Cascading Style Sheets (CSS) och mediatyper kan man skräddarsy dokument för olika
enheter.
CSS används för att separera presentationen (hur webbsidan ser ut) från innehållet
(ämnet på sidan). Detta innebär att man kan ha olika presentationsformat för olika enheter,
utan att påverka innehållet på webbsidan.
Klicka på länkarna nedan för att komma till respektive sektion:
Enheter som används för presentation av dokument tillhör olika mediatyper. CSS 2 identifierar en handfull mediatyper, vilka presenteras i nedanstående tabell.
| Mediatyp | Beskrivning |
|---|---|
| all | Formatet passa alla enheter |
| aural | Formatet är till för talsynthesizers |
| braille | Formatet är avsett för känselåtergivande enheter |
| embossed | Formatet är avsett för paginerade braille-skrivare |
| handheld | Formatet är avsett för handdatorer |
| Formatet är avsett för paginerad media (som den utskrivna sidan) eller när en utskriven sida visas på skärmen (som vid förhandsgranskning) | |
| projection | Formatet är avsett för projektorer och utskrift för OH-presentationer |
| screen | Formatet är avsett för färgdatorskärmar |
| tty | Formatet är avsett för apparater som använder ett bestämt teckenrutnät, som teletypes |
| tv | Formatet är avsett för TV-apparater |
Mediatyper kallas för "mediatypbeskrivare" och används som värden för flera
skiftlägeskänsliga attribut, varför gemener måste användas.
Alla formatmalsegenskaper är inte lämpliga för alla målenheter.
"volume"-egenskapen, till exempel, hör ihop med hörselmediatyper
(d.v.s. ljud) och inte visuellt inriktade mediatyper.
De olika mediatyperna står i relation till varandra. Dessa relationer kallas mediagrupper. Idag kan man identifiera fyra mediagrupper:
Varje mediatyp kan vara medlem av en eller flera mediagrupper. Varje CSS-egenskap är
giltig för en eller flera mediagrupper. När man skräddarsyr en presentation för en särskild
mediatyp, måste man identifiera den lämpliga mediagruppen och bestämma om man kan kontrollera
den önskade egenskapen för den mediagruppen.
Tabellen nedan sammanfattar relationerna mellan mediatyper och mediagrupper.
| Mediatyper | Mediagrupper | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| Kontinuerlig | Paginerad | Visuell | Hörbar | Taktil | Rutnät | Bitmappad | Interaktiv | Statisk | |
| Aural | Ja | - | - | Ja | - | - | - | Ja | Ja |
| Braille | Ja | - | - | - | Ja | Ja | - | Ja | Ja |
| Embossed | - | Ja | - | - | Ja | Ja | - | Ja | Ja |
| Handheld | Ja | Ja | Ja | - | - | Ja | Ja | Ja | Ja |
| - | Ja | Ja | - | - | - | Ja | - | Ja | |
| Projection | - | Ja | Ja | - | - | - | Ja | - | Ja |
| Screen | Ja | - | Ja | - | - | Ja | - | Ja | Ja |
| Tty | Ja | - | Ja | - | - | Ja | - | Ja | Ja |
| Tv | Ja | Ja | Ja | Ja | - | - | Ja | Ja | Ja |
Det finns fyra olika mekanismer som kan användas för att koppla formatmallar till olika apparater och mediatyper:
Ett sätt att koppla formatmallar till mediatyper är att används sig av style-elementets
media-attribut. Detta attribut specificerar det avsedda mediet för formatinformationen,
vilket innebär att formatet bara kommer att användas om enheten matchar formatets mediatyp
och ignoreras annars.
style-elementet placeras i dokumenthuvudet och media-attributets värde
är någon av mediatyperna. Vill man använda formatmall för mer än en mediatyp, kan man separera
mediatyperna med ett kommatecken.
På detta sätt kan man alltså koppla formatmallar till olika enheter. Om ingen formatmall anges eller är kopplad till den mediatyp som används, kommer ett standardformat att användas. En nackdel med denna typ av koppling av formatmallar till mediatyper, är att filerna blir mycket stora när man lägger till stöd för fler och fler enheter.
Ett annat sätt att koppla formatmallar till mediatyper är att används sig av link-elementets
media-attribut, som specificerar det avsedda mediet för den externa formatinformationen.
Detta gör att användaragenter kan ladda och använda externa formatmallar baserade på de
egenskaper som mediet har där dokumentet återges.
link-elementet placeras i dokumenthuvudet och media-attributets värde
är någon av mediatyperna. Formatmall för olika mediatyp kan skapas och enkelt kopplas till
samma dokumentinnehåll.
Olika formatmallar kommer att öppnas och användas beroende på om man tittar på dokumentet i en webbläsare eller skriver ut det.
Man kan även koppla formatmallar till media typer genom att använda @media-reglerna. Detta anger mediatyperna för en uppsättning formatmallsregler. @media-regeln kan användas för fler än en mediatyp. I så fall separeras mediatyperna med ett kommatecken. @media-regler används i den ordning de behandlas, dvs. om två tillämpliga @media-regler definerar olika format för samma element, gäller den senare @media-regeln.
@media print {
h1 { font-size: 10 pt; }
}
@media screen, print {
h1 { font-size: 18 pt; text-align: center;}
}
Med @media-regelerna kan man specificera mediaberoenden inom en intern formatmall eller med
en extern formatmall.
För att kunna ange mediaberoenden i en intern formatmall inkluderar man informationen i
dokumentet med hjälp av <style>-elementet.
För att specificera mediaberoenden i en extern formatmall, skriver man reglerna i en
separat fil. Man refererar till formatmallen inifrån XHTML-dokumentet med hjälp av
link-elementets href-attribut.
Med @import-reglerna kan man automatiskt koppla formatregler från en formatmall till formatavsnittet i XHTML-dokumentet. Vill man att importen ska vara mediaberoende, då ska man lägga till mediatypen efter URL:en.
@import url ("mittformat.css") screen;
/* resten av formatavsnittet */
Fördelen med att importera en formatmall är att den gör att man kan skapa en enkel mall för sina webbsidor, från vilken enskilda dokument kan "skilja sig" med egna dominerande format.
Med hjälp av sidegenskaperna kan man styra hur innehållet visas och var sidbrytningar
inträffar när dokumentet skrivs ut, t.ex. undvika sidbrytningar före visa element eller
tvinga en bild att visas på högersidan istället för vänster etc.
Det finns flera sidbrytningsegenskaper:
Alla dessa egenskaper kan ha olika värden som påverkar om sidbrytningen förekommer under alla villkor eller under speciella villkor.
Kontrollerar om en sidbrytning förekomer före ett element.
Kontrollerar om en sidbrytning förekomer efter ett element.
Kontrollerar om en sida kan brytas i ett element.
Anger det minimala antalet rader i ett stycke som måste finnas längst ner på sidan när sidan bryts. Om färre antal rader kan skrivas ut längst ner på sidan, bryts sidan före stycket.
Anger det minimala antalet rader i ett stycke som kan skrivas ut överst på sidan när sidan bryts mitt i ett stycke. Om färre antal rader kan skrivas ut överst på sidan, bryts sidan före stycket.
Definierar utskriftsrelaterade egenskaper, t.ex. papprets storlek, dess marginaler etc. Dessutom kan man namge @page-regler och använda dem med större exakthet. Den namngivna @page-regeln kan sedan tillämpas på ett element med hjälp av page-egenskapen.
Anger storleken och orienteringen för den utskrivna sidan. En sidas storlek kan antingen
vara en bestämd storlek eller skalbar.
När sidans storlek skall vara absolut (en bestämd storlek), anger man bredden och höjden
med hjälp av följande enheter:
Används för att visa beskärningsmärken och kryssmärken på den utskrivna sidan. Beskärningsmärken indikerar var sidan skall beskäras, och anges med värdet crop. Kryssmärken används så att flera sidor kan justeras, och anges med värdet cross. Standardvärdet är none.