HTML <style> media egenskap

HTML <style> etikett

Definition och användning

media Egenskapen används för att specificera vilka medier/enheter CSS-stilen riktar sig till (optimeras för).

Egenskapen används för att specificera vilka enheter (t.ex. iPhone) eller medier som stilen gäller för.

Tips:Egenskapen kan acceptera flera värden.

Fall

Exempel 1

Reglering av stilar för utskrift:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

Prova själv

Exempel 2

Använd medieegenskapens breddattribut för att skilja mellan de två stilmåttena:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

Prova själv

Kommentar:Det första gruppen av stilar används när bredden på webbläsarfönstret är mindre än 500 pixlar, och det andra gruppen används när bredden är större än 500 pixlar.

Syntax

<style media="value>

Möjliga operatorer

Operatorer Beskrivning
and Reglering AND operator.
not Reglering NOT operator.
, Reglering eller operator.

Förutsättningarna för användning av stilar kan designas mycket noggrant. Det första som måste klargöras är vilken typ av enhet som riktar sig.

Enheter

Enheter Beskrivning
all Standard. Gäller alla enheter.
aural Röstgenerator.
braille Blindtextfeedbackenheter.
handheld Handholdna enheter (liten skärm, begränsad bandbredd).
projection Projektor.
print Utskriftsgranskning / utskriftssida.
screen Datorskärm.
tty Användning av fast avstånd teckenraster för teletypmaskiner och liknande medier.
tv TV-typ enheter (låg upplösning, begränsad rullningsförmåga).

Webbläsaren ansvarar för att tolka enhetstyper. Vissa enhetstyper (t.ex. screen och print) tolkas relativt enhetligt i olika webbläsare, men andra enheter (t.ex. handheld) kan tolkas mycket mer fritt. Därför är det mycket viktigt att kontrollera att tolkningen av den specifika enheten av den webbläsare du riktar dig till är densamma som din egen.

Egenskaper

Egenskaper Beskrivning
width

Definierar bredden på det målade området.

Prefixen "min-" och "max-" kan användas.

Till exempel: media="screen and (min-width:500px)"
height

Definierar höjden på det målade området.

Prefixen "min-" och "max-" kan användas.

Till exempel: media="screen and (max-height:700px)"
device-width

Definierar målvisarens/papperets bredd.

Prefixen "min-" och "max-" kan användas.

Till exempel: media="screen and (device-width:500px)"
device-height

Definierar målvisarens/papperets höjd.

Prefixen "min-" och "max-" kan användas.

Till exempel: media="screen and (device-height:500px)"
orientation

Definierar målvisarens/papperets riktning.

Supporterade värden är portrait eller landscape.

Egenskapen har inga prefix.

Till exempel: media="all and (orientation: landscape)"
aspect-ratio

Definierar målvisarens bredd/höjd-förhållande för det målade området.

Prefixen "min-" och "max-" kan användas.

Till exempel: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

Definierar målvisarens/papperets enhetsbredd/enhetshöjd-förhållande.

Prefixen "min-" och "max-" kan användas.

Till exempel: media="screen and (aspect-ratio:16/9)"
color

Definierar antalet bitar per färg på målvisaren.

Prefixen "min-" och "max-" kan användas.

Till exempel: media="screen and (color:3)"
color-index

Definierar antalet färger som målvisaren kan hantera.

Prefixen "min-" och "max-" kan användas.

Till exempel: media="screen and (min-color-index:256)"
monochrome

Definierar antalet bitar per pixel i en ensfärgad bildbuffert.

Prefixen "min-" och "max-" kan användas.

Till exempel: media="screen and (monochrome:2)"
resolution

Definierar målvisarens/papperets bildpunktsdensitet (dpi eller dpcm).

Prefixen "min-" och "max-" kan användas.

Till exempel: media="print and (resolution:300dpi)"
scan

Definierar televisionens skanningsmodus.

Supporterade värden är progressive och interlace.

Egenskapen har inga prefix.

Till exempel: media="tv and (scan:interlace)"
grid

Bestämmer om utdataenheten är ett rutnät eller en bitmapp.

Rutnätsgenomförande enheter använder en fast rutnät för att visa innehåll, till exempel terminaler baserade på tecken och enradiga visare som mobiltelefoner.

De stödda värdena är 0 och 1 (1 representerar ett rutnätsgenomförande enhet).

Egenskapen har inga prefix.

Till exempel: media="handheld and (grid:1)"

Egenskaper som width används ofta tillsammans med min och max prefix. Det är också möjligt att använda dessa prefix inte, vilket gör att användningen av stilar beror på mycket exakta fönsterstorlekar, men med prefix blir villkoren mer flexibla.

Tabellen ovan listar och beskriver de tillgängliga egenskaperna. Om inget annat anges kan dessa egenskaper användas med min- och max- prefix, vilket skapar trösklar snarare än exakta värden.

Liksom för de specifika enheterna är dessa egenskaper också ansvariga av webbläsaren för att tolka. Det finns många olika situationer om vilka egenskaper webbläsaren känner igen och när dessa egenskaper anses finnas och kan användas. Om du vill tillämpa stilar baserat på dessa egenskaper, måste du genomföra omfattande tester och vara förberedd på att använda reservstilar om förväntade egenskaper inte är tillgängliga.

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd

HTML <style> etikett