Mediafrågor
Mediefrågor är en funktion i CSS 3 som gör att innehållsrendering kan anpassas till olika förhållanden som skärmupplösning (t.ex. mobil- och datorskärmstorlek). Det blev en W3C-rekommenderad standard i juni 2012 och är en hörnstensteknik för responsiv webbdesign ( RWD).
Historia
Mediefrågor skissades först i Håkon Wium Lies första CSS-förslag 1994, men de blev inte en del av CSS 1 . HTML4 - rekommendationen från 1997 visar ett exempel på hur mediafrågor kan läggas till i framtiden. År 2000 började W3C arbeta med mediafrågor och även på ett annat system för att stödja olika enheter: CC/PP . De två löser samma problem, men CC/PP är servercentrerad, medan mediafrågor är webbläsarcentrerade. Det första offentliga arbetsutkastet för mediefrågor publicerades 2001, och specifikationen blev en W3C-rekommendation 2012 efter att webbläsare lagt till stöd.
Användande
En mediefråga består av en medietyp och ett eller flera uttryck, som involverar mediefunktioner , som löser sig till antingen sant eller falskt. Resultatet av frågan är sant om medietypen som anges i mediefrågan matchar den typ av enhet som dokumentet visas på och alla uttryck i mediefrågan är sanna. När en mediefråga är sann, tillämpas motsvarande stilmall eller stilregler, enligt de normala överlappande reglerna. Mediefrågor använder @ media CSS "at-rule".
Exempel
Följande är exempel på CSS-mediefrågor:
@ mediaskärm och ( visningsläge : helskärm ) { /* Koden här gäller endast skärmar i helskärm * / }
@ media all and ( orientation : landscape ) { /* Koden här gäller endast i liggande orientering */ }
@ mediaskärm och ( min-enhetsbredd : 500px ) { /* Koden här gäller endast skärmar som är lika med eller större än 500 pixlar breda * / }
Medietyper
En mediatyp kan deklareras i huvudet på ett HTML- dokument med hjälp av "media"-attributet inuti ett < länk > -element. Värdet på "media"-attributet anger på vilken enhet det länkade dokumentet kommer att visas. Medietyper kan också deklareras i XML- bearbetningsinstruktioner, @ import at-rule och @ media at-rule. CSS 2 definierar följande som mediatyper:
- alla (passar alla enheter)
- blindskrift
- präglade
- handhållen
- skriva ut
- utsprång
- skärm
- Tal
- tty
- TV
Medietypen "alla" kan också användas för att indikera att en stilmall gäller alla mediatyper.
Mediefunktioner
Följande tabell innehåller mediefunktionerna som anges i den senaste W3C-rekommendationen för mediefrågor, daterad 6 juni 2007.
| Funktion | Värde | Min Max | Beskrivning |
|---|---|---|---|
Färg |
heltal | Ja | Antal bitar per färgkomponent |
färgindex |
heltal | Ja | Antal poster i färguppslagstabellen |
enhet-aspekt-förhållande |
heltal/heltal | Ja | Bildförhållande |
enhetshöjd |
längd | Ja | Utmatningsenhetens höjd |
enhetsbredd |
längd | Ja | Utmatningsenhetens bredd |
rutnät |
heltal | Nej | Sant för en rutnätsbaserad enhet |
höjd |
längd | Ja | Höjd på renderingsytan |
svartvit |
heltal | Ja | Antal bitar per pixel i en monokrom rambuffert |
orientering |
"porträtt" eller "landskap" | Nej | Orientering av skärmen |
upplösning |
upplösning ("dpi", "dpcm" eller "dppx") | Ja | Upplösning |
skanna |
"progressiv" eller "interlaced" | Nej | Skanningsprocess för "tv" mediatyper |
bredd |
längd | Ja | Bredd på renderingsytan |