aboutsummaryrefslogtreecommitdiff
path: root/files/ca/web/html/element/picture/index.html
blob: 540ee5bb7b301faefa35d0bbcfdf1ffc2e0829ad (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
---
title: <picture>
slug: Web/HTML/Element/picture
tags:
  - Element
  - Experimental
  - HTML
  - Reference
  - Web
  - picture
translation_of: Web/HTML/Element/picture
---
<div>{{HTMLRef}}{{SeeCompatTable}}</div>

<p>L'<strong>element HTML <code>&lt;picture&gt;</code></strong> és un contenidor utilitzat per especificar diversos elements {{HTMLElement("source")}} per a una determinada {{HTMLElement("img")}} continguda en el mateix. El navegador triarà la font més adequada d'acord amb el disseny actual de la pàgina (les restriccions del quadre en el qual apareixerà la imatge) i el dispositiu en el qual es mostrarà (per exemple, un dispositiu normal o HiDPI).</p>

<h2 id="Context_d'ús">Context <span class="short_text" id="result_box" lang="ca"><span>d'ús</span></span></h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/en-US/docs/Web/HTML/Content_categories">Categories de contingut</a></th>
   <td><a href="/en-US/docs/Web/HTML/Content_categories#Flow_content">Contingut dinàmic</a>, phrasing content, contingut incrustat</td>
  </tr>
  <tr>
   <th scope="row">Contingut permès</th>
   <td>Zero or més elements {{HTMLElement("source")}}, seguits per un element {{HTMLElement("img")}}, <span id="result_box" lang="ca"><span>opcionalment</span> <span>barrejats</span> <span>amb</span> <span>elements</span> <span>amb </span><span>suport script</span></span></td>
  </tr>
  <tr>
   <th scope="row">Omissió de l'etiqueta</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Elements pares permesos</th>
   <td>Qualsevol element que accepti contingut incrustat.</td>
  </tr>
  <tr>
   <th scope="row">Interfície DOM</th>
   <td>{{domxref("HTMLPictureElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Atributs">Atributs</h2>

<p>Aquest element només inclou els <a href="/en-US/docs/Web/HTML/Global_attributes">atributs globals</a>.</p>

<h2 id="Exemple_1_Usant_l'atribut_media">Exemple 1: <span class="short_text" id="result_box" lang="ca"><span>Usant</span> <span>l'atribut</span> </span> <code>media</code></h2>

<p>L'atribut <code>media</code> li permet especificar una consulta de medis que l'agent d'usuari avaluarà per a seleccionar un element {{HTMLElement("source")}}. Si la consulta de medis s'avalua com a <code>false</code> , l'element {{HTMLElement("source")}} s'omet.</p>

<pre class="brush: html">&lt;picture&gt;
 &lt;source srcset="mdn-logo-wide.png" media="(min-width: 600px)"&gt;
 &lt;img src="mdn-logo-narrow.png" alt="MDN"&gt;
&lt;/picture&gt;
</pre>

<h2 id="Exemple_2_Usant_l'atribut_type">Exemple 2: <span class="short_text" id="result_box" lang="ca"><span>Usant</span> <span>l'atribut</span></span> <code>type</code></h2>

<p>L'atribut <code>type</code> li permet especificar un tipus MIME per als recursos que es proporcionen en l'atribut <code>srcset</code> de l'element {{HTMLElement ( "source")}}. Si l'agent d'usuari no admet el tipus donat, l'element {{HTMLElement("source")}} s'omet.</p>

<pre class="brush: html">&lt;picture&gt;
 &lt;source srcset="mdn-logo.svg" type="image/svg+xml"&gt;
 &lt;img src="mdn-logo.png" alt="MDN"&gt;
&lt;/picture&gt;
</pre>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'embedded-content.html#the-picture-element', '&lt;picture&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Definició incial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>38</td>
   <td>{{CompatGeckoDesktop("38")}}</td>
   <td>Edge 13</td>
   <td>25</td>
   <td>9.1</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Característica</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>38</td>
   <td>{{CompatGeckoMobile("38")}}</td>
   <td>{{CompatNo}}</td>
   <td>25</td>
   <td>iOS 9.3</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Veure">Veure</h2>

<ul>
 <li>L'element {{HTMLElement("img")}}</li>
</ul>