source

Atrybut media wykorzystany wraz z elementem source pozwala nam określić informację o tym, dla jakiego typu medium (urządzenia) powinien być przeznaczony obrazek reprezentowany przez dany element source.

Atrybut "media" ma sens tylko wtedy gdy elementem rodzicem danego elementu "source" jest element picture.

Atrybut "media" jest atrybutem wymaganym elementu "source", lecz tylko wtedy gdy dany element "source" nie posiada atrybutu type oraz gdy jednym z następnych w kolejności elementów braci danego elementu "source" jest element "source" lub element img posiadający atrybut srcset.

Wartość domyślna

all (gdy pominęliśmy atrybut)

BRAK (gdy podaliśmy wartość nieprawidłową)

@media query

Należy podać ciąg znaków w formie @media queries.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <picture>
      <source media="all and (max-width:1023px)" srcset="https://webkod.pl/files/html/image-400x300.png">
      <source media="all and (min-width:1024px)" srcset="https://webkod.pl/files/html/image-600x450.png">
      <img src="https://webkod.pl/files/html/image-600x450.png" alt="jednokolorowy obrazek">
    </picture>

  </body>
</html>

Rezultat

Zasób internetowy "image-600x450.png" reprezentowany przez drugi przykładowy element "source" przeznaczony jest dla wszystkich typów mediów (wszystkich urządzeń), w których wartość szerokości okna przeglądarki internetowej w danej chwili wynosi co najmniej "1024" pikseli, ponieważ do wspomnianego elementu "source" został dodany atrybut "media" wraz z wartością "all and (min-width:1024px)".

W sytuacji gdy atrybut "media" jest atrybutem wymaganym elementu "source", wtedy wartością danego atrybutu "media" nie może być wartość "all".

Atrybut sizes wykorzystany wraz z elementem source pozwala nam określić wartość szerokości obszaru, jaki powinien zajmować obrazek znajdujący się pod adresem, na który wskazuje wartość atrybutu srcset danego elementu source.

Atrybut "sizes" ma sens tylko wtedy gdy dany element "source" posiada atrybut srcset o wartości wzór: image-url image-width.

Atrybut "sizes" jest atrybutem wymaganym elementu "source", lecz tylko wtedy gdy dany element "source" posiada atrybut srcset o wartości wzór: image-url image-width.

Wartość domyślna

brak wartości domyślnej

wzór: media-condition area-width, default-area-width

Według zdefiniowanego wzorca wartości między innymi możemy określić wartość szerokości obszaru, jaki powinien zajmować obrazek znajdujący się pod adresem, na który wskazuje wartość atrybutu srcset danego elementu source.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <picture>
      <source srcset="https://webkod.pl/files/html/image-200x150.png 200w,
                      https://webkod.pl/files/html/image-400x300.png 400w,
                      https://webkod.pl/files/html/image-600x450.png 600w"
              sizes="(max-width:800px) 200px,
                     (max-width:1280px) 400px,
                     600px">
      <img src="https://webkod.pl/files/html/image-600x450.png" alt="jednokolorowy obrazek">
    </picture>

  </body>
</html>

Rezultat

Na podstawie wartości "(max-width:800px) 200px, (max-width:1280px) 400px, 600px" przeglądarka internetowa może zdecydować o wartości szerokości obszaru, jaki powinien zostać zajęty przez obrazek, na który wskazuje wartość atrybutu "srcset" przykładowego elementu "source", ponieważ do wspomnianego elementu "source" został dodany atrybut "sizes" wraz z wartością "(max-width:800px) 200px, (max-width:1280px) 400px, 600px".

Wyjaśnienie wzorca wartości

Informacje dodatkowe

możemy podać kilka par składników media-condition area-width, każdą kolejną parę składników należy oddzielić od poprzedniej pary dokładnie jednym znakiem przecinka

możemy podać samą wartość składnika default-area-width

Sposób działania

przeglądarka internetowa wybiera wartość jednego składnika area-width

mowa tu o tym składniku area-width, którego warunek określony za pomocą składnika media-condition został w pierwszej kolejności spełniony

w sytuacji gdy żaden warunek określony za pomocą składnika media-condition nie został spełniony, wtedy przeglądarka internetowa wybiera wartość składnika default-area-width

w sytuacji gdy wartość składnika default-area-width nie została przez nas określona, wtedy aktualna wartość szerokości okna przeglądarki internetowej staje się docelową wartością

Przykładowe zapisy

• (max-width:460px) 400px, 800px
• (max-width:460px) 400px, (max-width:660px) 600px, 800px
• (max-width:460px) 400px, (max-width:660px) 600px
• 800px

media-condition

Składnik media-condition danego wzorca wartości określa warunek, na podstawie którego wartość składnika area-width może stać się docelową wartością określającą wartość szerokości obszaru, jaki powinien zajmować obrazek znajdujący się pod adresem, na który wskazuje wartość atrybutu srcset danego elementu source.

Dostępne wartości

ciąg znaków w formie @media queries, lecz bez podawania typu medium

Wartość domyślna

brak

area-width

Składnik area-width danego wzorca wartości określa wartość szerokości obszaru, jaki powinien zajmować obrazek znajdujący się pod adresem, na który wskazuje wartość atrybutu srcset danego elementu source.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartość domyślna

brak

default-area-width

Składnik default-area-width danego wzorca wartości określa wartość domyślną szerokości obszaru, jaki powinien zajmować obrazek znajdujący się pod adresem, na który wskazuje wartość atrybutu srcset danego elementu source.

Dostępne wartości

dowolna nieujemna liczba wraz z wybraną jednostką absolutną lub jednostką relatywną

Wartość domyślna

brak

Atrybut src wykorzystany wraz z elementem source pozwala nam określić adres zasobu internetowego, który chcemy, aby był reprezentowany przez dany element source.

Atrybut "src" ma sens tylko wtedy gdy elementem rodzicem danego elementu "source" nie jest element picture.

Atrybut "src" jest atrybutem wymaganym elementu "source", lecz tylko wtedy gdy elementem rodzicem danego elementu "source" nie jest element picture.

Wartość domyślna

brak wartości domyślnej

URL

Należy podać niepusty ciąg znaków w formie adresu URL.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio controls>
      <source src="https://webkod.pl/files/html/utwor-01.wav">
      <source src="https://webkod.pl/files/html/utwor-01.mp3">
    </audio>

  </body>
</html>

Rezultat

Zasobem internetowym reprezentowanym przez drugi przykładowy element "source" jest zasób internetowy "utwor-01.mp3" znajdujący się pod adresem "https://webkod.pl/files/html/utwor-01.mp3", ponieważ do wspomnianego elementu "source" został dodany atrybut "src" wraz z wartością "https://webkod.pl/files/html/utwor-01.mp3".

Atrybut srcset wykorzystany wraz z elementem source pozwala nam określić adres obrazka, który chcemy, aby był reprezentowany przez dany element source w określonej sytuacji.

Atrybut "srcset" ma sens tylko wtedy gdy elementem rodzicem danego elementu "source" jest element picture.

Atrybut "srcset" jest atrybutem wymaganym elementu "source", lecz tylko wtedy gdy elementem rodzicem danego elementu "source" jest element picture.

Wartość domyślna

brak wartości domyślnej

wzór: image-url image-width

Według zdefiniowanego wzorca wartości między innymi możemy określić adres obrazka, który chcemy, aby był reprezentowany przez dany element source w określonej sytuacji.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <picture>
      <source srcset="https://webkod.pl/files/html/image-200x150.png 200w,
                      https://webkod.pl/files/html/image-400x300.png 400w,
                      https://webkod.pl/files/html/image-600x450.png 600w"
              sizes="(max-width:800px) 200px,
                     (max-width:1280px) 400px,
                     600px">
      <img src="https://webkod.pl/files/html/image-600x450.png" alt="jednokolorowy obrazek">
    </picture>

  </body>
</html>

Rezultat

Na podstawie wartości "https://webkod.pl/files/html/image-200x150.png 200w, https://webkod.pl/files/html/image-400x300.png 400w, https://webkod.pl/files/html/image-600x450.png 600w" oraz na podstawie wartości "(max-width:800px) 200px, (max-width:1280px) 400px, 600px" przeglądarka internetowa może zdecydować o tym, który obrazek powinien być reprezentowany przez przykładowy element "source", ponieważ do wspomnianego elementu "source" został dodany atrybut "srcset" wraz z wartością "https://webkod.pl/files/html/image-200x150.png 200w, https://webkod.pl/files/html/image-400x300.png 400w, https://webkod.pl/files/html/image-600x450.png 600w" oraz atrybut "sizes" wraz z wartością "(max-width:800px) 200px, (max-width:1280px) 400px, 600px".

Wyjaśnienie wzorca wartości

Informacje dodatkowe

możemy podać kilka par składników image-url image-width, każdą kolejną parę składników należy oddzielić od poprzedniej pary dokładnie jednym znakiem przecinka

wartości składników image-width nie mogą być takie same

Sposób działania

przeglądarka internetowa wybiera wartość jednego składnika image-url

mowa tu o tym składniku image-url, którego wartość składnika image-width jest taka sama, jak docelowa wartość atrybutu sizes wybrana przez przeglądarkę internetową dla danego elementu source

w sytuacji gdy szukana wartość składnika image-width nie istnieje, wtedy brana pod uwagę jest pierwsza w kolejności odszukana wartość składnika image-width, która jest większa od docelowej wartości atrybutu sizes

w sytuacji gdy szukana wartość składnika image-width nadal nie istnieje, wtedy brana pod uwagę jest największa wartość składnika image-width

Przykładowe zapisy

• image-200x150.png 200w
• image-200x150.png 200w, image-400x300.png 400w
• image-200x150.png 200w, image-400x300.png 400w, image-600x450.png 600w

image-url

Składnik image-url danego wzorca wartości określa adres obrazka, który chcemy, aby był reprezentowany przez dany element source w określonej sytuacji.

Dostępne wartości

ciąg znaków w formie adresu URL, który dodatkowo nie może rozpoczynać lub kończyć się znakiem przecinka

Wartość domyślna

brak

image-width

Składnik image-width danego wzorca wartości określa wartość szerokości obrazka znajdującego się pod adresem, na który wskazuje wartość składnika image-url.

Dostępne wartości

dowolna dodatnia liczba całkowita

Sposób podawania

wraz z wybraną wartością należy podać małą literę w

Wartość domyślna

brak

wzór: image-url pixel-density

Według zdefiniowanego wzorca wartości między innymi możemy określić adres obrazka, który chcemy, aby był reprezentowany przez dany element source w określonej sytuacji.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <picture>
      <source srcset="https://webkod.pl/files/html/image-200x150.png 1x,
                      https://webkod.pl/files/html/image-400x300.png 2x,
                      https://webkod.pl/files/html/image-600x450.png 3x">
      <img src="https://webkod.pl/files/html/image-600x450.png" width="200" alt="jednokolorowy obrazek">
    </picture>

  </body>
</html>

Rezultat

Na podstawie wartości "https://webkod.pl/files/html/image-200x150.png 1x, https://webkod.pl/files/html/image-400x300.png 2x, https://webkod.pl/files/html/image-600x450.png 3x" przeglądarka internetowa może zdecydować o tym, który obrazek powinien być reprezentowany przez przykładowy element "source", ponieważ do wspomnianego elementu "source" został dodany atrybut "srcset" wraz z wartością "https://webkod.pl/files/html/image-200x150.png 1x, https://webkod.pl/files/html/image-400x300.png 2x, https://webkod.pl/files/html/image-600x450.png 3x".

Wyjaśnienie wzorca wartości

Informacje dodatkowe

możemy podać kilka par składników image-url pixel-density, każdą kolejną parę składników należy oddzielić od poprzedniej pary dokładnie jednym znakiem przecinka

wartości składników pixel-density nie mogą być takie same

wartości dwóch sąsiadujących ze sobą składników image-url muszą być oddzielone od siebie znakiem przecinka oraz przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji) albo przynajmniej jednym białym znakiem (zazwyczaj znakiem spacji) oraz znakiem przecinka

Sposób działania

przeglądarka internetowa wybiera wartość jednego składnika image-url

mowa tu o tym składniku image-url, którego wartość składnika pixel-density jest taka sama, jak wartość zagęszczenia pikseli urządzenia użytkownika

w sytuacji gdy szukana wartość składnika pixel-density nie istnieje, wtedy brana pod uwagę jest pierwsza w kolejności odszukana wartość składnika pixel-density, która jest większa od docelowej wartości zagęszczenia pikseli urządzenia użytkownika

w sytuacji gdy szukana wartość składnika pixel-density nadal nie istnieje, wtedy brana pod uwagę jest największa wartość składnika pixel-density

Przykładowe zapisy

• image-200x150.png
• image-200x150.png, image-400x300.png 2x
• image-200x150.png 1x, image-400x300.png 2x, image-600x450.png 3x
• image-200x150.png 1x, image-300x225.png 1.5x, image-400x300.png 2x

image-url

Składnik image-url danego wzorca wartości określa adres obrazka, który chcemy, aby był reprezentowany przez dany element source w określonej sytuacji.

Dostępne wartości

ciąg znaków w formie adresu URL, który dodatkowo nie może rozpoczynać lub kończyć się znakiem przecinka

Wartość domyślna

brak

pixel-density

Składnik pixel-density danego wzorca wartości określa wartość zagęszczenia pikseli, na podstawie której przeglądarka internetowa może zdecydować, czy obrazek znajdujący się pod adresem, na który wskazuje wartość składnika image-url, powinien być reprezentowany przez dany element source.

Dostępne wartości

dowolna dodatnia liczba

Sposób podawania

wraz z wybraną wartością należy podać małą literę x

Sens wartości

wartość 1x oznacza zagęszczenie pikseli, w którym na jeden piksel urządzenia użytkownika przypada jeden piksel CSS, dlatego obrazek o rozmiarze 600×300 pikseli CSS po wyświetleniu na ekranie urządzenia użytkownika będzie zajmował obszar o rozmiarze 600×300 pikseli urządzenia użytkownika

wartość 1.5x oznacza zagęszczenie pikseli, w którym na półtora piksele urządzenia użytkownika przypada jeden piksel CSS, dlatego obrazek o rozmiarze 600×300 pikseli CSS po wyświetleniu na ekranie urządzenia użytkownika będzie zajmował obszar o rozmiarze 450×225 pikseli urządzenia użytkownika

wartość 2x oznacza zagęszczenie pikseli, w którym na dwa piksele urządzenia użytkownika przypada jeden piksel CSS, dlatego obrazek o rozmiarze 600×300 pikseli CSS po wyświetleniu na ekranie urządzenia użytkownika będzie zajmował obszar o rozmiarze 300×150 pikseli urządzenia użytkownika

Wartość domyślna

1x

Atrybut type wykorzystany wraz z elementem source pozwala nam określić informację o typie MIME, jaki posiada zasób internetowy reprezentowany przez dany element source.

Jeżeli typ MIME określony przez nas za pomocą wartości danego atrybutu "type" nie będzie zgadzał się z typem MIME w rzeczywistości posiadanym przez zasób internetowy reprezentowany przez dany element "source", wtedy docelowy zasób internetowy będzie traktowany przez przeglądarkę internetową jako zasób nieistniejący.

Atrybut "type" jest atrybutem wymaganym elementu "source", lecz tylko wtedy gdy dany element "source" nie posiada atrybutu media oraz gdy jednym z następnych w kolejności elementów braci danego elementu "source" jest element "source" lub element img posiadający atrybut srcset.

Wartość domyślna

brak wartości domyślnej

typ MIME

Należy podać ciąg znaków w formie typu MIME.

Przykładowy Kod HTML

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs HTML</title>
  </head>
  <body>

    <audio controls>
      <source src="https://webkod.pl/files/html/utwor-01.wav" type="audio/wav">
      <source src="https://webkod.pl/files/html/utwor-01.mp3" type="audio/mpeg">
    </audio>

  </body>
</html>

Rezultat

Ponieważ do drugiego przykładowego elementu "source" został dodany atrybut "type" wraz z wartością "audio/mpeg", przykładowy element "source" reprezentujący zasób internetowy "utwor-01.mp3" zawiera dodatkową informację dla przeglądarki internetowej o tym, że typem MIME, jaki posiada zasób internetowy "utwor-01.mp3", jest typ wskazujący na plik typu MP3.