HTML atribut `media`

HTML atribut media funguje u značky <a> podobně jako Media Queries v CSS.

27. května 2014

2 minuty

<a href="odkaz" media="max-width: 480px">
  Odkaz bude vidět jen při šířce do 480 px
</a>

Hodnota HTML atributu media bude obdobná jako u CSS pravidla @media a měla by i tak fungovat.

Živá ukázka

Podpora

Bohužel zatím neznám prohlížeč, kde by atribut media fungoval.

Využití

Do jisté míry by takto šly řešit responsivní obrázky a jejich datová optimalisace. Na stránce by bylo víc obrázků s obrázky a media queries by zařídily zobrazení (načtení) jen toho, který nejlépe vyhovuje cílovému zařízení.

<a href="maly-obrazek.png" media="max-width: 480px">
  <img src="maly-obrazek.png">
</a>
<a href="velky-obrazek.png" media="min-width: 480px">
  <img src="velky-obrazek.png">
</a>

Taktéž by tento mechanismus mohl sloužit k opodmínkování odkazu na mobilní versi webu nebo naopak na velký web.