Wybór medium @media

Jak określić specjalny wygląd strony w wersji do wydruku czy na urządzenia przenośne?

Istnieją dwie drogi do określenia niezależności arkuszy stylów, a przez to przypisania różnym mediom odmiennych cech:

Podanie medium docelowego w arkuszu stylów, korzystając z polecenia @media lub @import:
```
@import url(glos.css) aural;
@media print {
	/* Arkusz dla wydruku */
}
```

Podanie medium docelowego wewnątrz języka dokumentu (atrybut "media" elementu LINK precyzujący włączenie zewnętrznego arkusza stylów):

<!doctype html>
<html lang="pl">
	<head>
		<title>Odnośnik do medium docelowego</title>
		<link rel="stylesheet" media="print, handheld" href="arkusz.css">
	</head>
	<body>
		<p>Ciało dokumentu...</p>
	</body>
</html>

Podanie medium docelowego wewnątrz języka dokumentu (atrybut "media" elementu STYLE precyzujący włączenie wewnętrznego arkusza stylów):

<!doctype html>
<html lang="pl">
	<head>
		<title>Arkusz z medium docelowym</title>
		<style media="print">
		/* Arkusz dla wydruku */
		</style>
	</head>
	<body>
		<p>Ciało dokumentu...</p>
	</body>
</html>

Komenda @media podaje listę docelowych typów nazw mediów, rozdzielonych przecinkami. Pozwala to autorowi zdefiniować różne typy w jednym arkuszu stylów, np.:

@media print {
	body { font-size: 10pt }
}

@media screen {
	body { font-size: 12pt }
}

@media screen, print {
	body { line-height: 1.2 }
}

Powyższe polecenia, wpisane w arkuszu stylów, definiują rozmiar czcionki 10pt dla wydruku, 12pt dla ekranu komputerowego oraz wysokość linii 1.2 jednocześnie dla ekranu i wydruku.

Przeglądarki

	Chrome	Firefox	Edge	Opera	Safari
`media`	1 2008-12-11	1 2004-11-09	12 2015-07-29	9.2 2007-04-11	3 2007-10-26

Komentarze

Zobacz więcej komentarzy