diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-26 13:11:47 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-26 13:11:47 +0200 |
commit | 6772831200d14c2436aea2d0c837f40dbf12156f (patch) | |
tree | e41b587ce1834baf8c737454c0ae110ebc8208ca /files/fr/web/api/fullscreen_api | |
parent | 707941dbecfb0cc1e75dd32d2dacac4d1845bf2c (diff) | |
download | translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.gz translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.tar.bz2 translated-content-6772831200d14c2436aea2d0c837f40dbf12156f.zip |
Prepare Web API section for Markdown conversion (#2464)
* Remove summary classes and ids
* Remove unecessary hidden
* Remove useless span filled with useless attributes / ids
* Remove useless font
* Remove notranslate
* Remove id in other elements than headings
* Remove name attributes
* Remove <pre><code> for JS w/ language-js class
* Remove <pre><code> for HTML w/ language-html class
* Remove <pre><code> for other lang w/ language-* class
* Rm highlighted line in code samples
* fix links, internal, external, absolute URLs
* missing file from last commit
* Fix styles errors apart from table + some classes
* Fix notes and warnings (+ some other :x)
* fix typo during merge which broke a doc
* aand forgot a conflict
* fix remaining classes of errors except dls and images
* Fix dls
* Fix images (deki/mozillademos) and remaining style issues
* Remove script tag from svg file
* Remove script tag from svg fileS
* Compress SVG files for CI
Diffstat (limited to 'files/fr/web/api/fullscreen_api')
-rw-r--r-- | files/fr/web/api/fullscreen_api/index.html | 48 |
1 files changed, 25 insertions, 23 deletions
diff --git a/files/fr/web/api/fullscreen_api/index.html b/files/fr/web/api/fullscreen_api/index.html index 04c11bf3e3..8b0a59233a 100644 --- a/files/fr/web/api/fullscreen_api/index.html +++ b/files/fr/web/api/fullscreen_api/index.html @@ -11,11 +11,13 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode --- <p>{{DefaultAPISidebar("Fullscreen API")}}</p> -<p class="summary">L'<strong>API Fullscreen</strong> <em>(plein écran)</em> fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. <span id="result_box" lang="fr"><span>L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.</span></span></p> +<p>L'<strong>API Fullscreen</strong> <em>(plein écran)</em> fournit un moyen simple de présenter du contenu web en utilisant l'ensemble de l'écran de l'utilisateur. L'API vous permet de diriger facilement le navigateur pour faire en sorte qu'un élément et ses enfants, le cas échéant, occupent entièrement l'écran, éliminant toute l'interface utilisateur du navigateur et les autres applications de l'écran pendant ce temps.</p> -<div class="note"><strong>Note :</strong> Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. <span id="result_box" lang="fr"><span>Consultez le tableau récapitulant les <a href="#Préfixes">préfixes</a> et les différences de noms entre eux (vous pouvez également utiliser </span></span> <a href="https://github.com/rafrex/fscreen">Fscreen</a> <span lang="fr"><span> pour l'accès du fournisseur à l'API).</span></span></div> +<div class="note"> + <p><strong>Note :</strong> Pour le moment, tous les navigateurs n'utilisent pas la version non préfixée de cet API. Consultez le tableau récapitulant les <a href="#Préfixes">préfixes</a> et les différences de noms entre eux (vous pouvez également utiliser <a href="https://github.com/rafrex/fscreen">Fscreen</a> pour l'accès du fournisseur à l'API).</p> +</div> -<h2 id="Specification" name="Specification">Activation du mode plein écran</h2> +<h2 id="Specification">Activation du mode plein écran</h2> <p>En partant d'un élément que vous aimeriez afficher en plein écran ({{ HTMLElement("video") }}, par exemple), vous pouvez le passer en mode plein écran simplement en appelant sa méthode {{ domxref("Element.requestFullscreen()") }} .</p> @@ -29,10 +31,10 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode <p>Nous pouvons mettre cet élément video en plein écran avec un script de cette façon :</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> elem <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"myvideo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">if</span> <span class="punctuation token">(</span>elem<span class="punctuation token">.</span>requestFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span> - elem<span class="punctuation token">.</span><span class="function token">requestFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">var elem = document.getElementById("myvideo"); +if (elem.requestFullscreen) { + elem.requestFullscreen(); +}</pre> <h3 id="Différences_de_présentation">Différences de présentation</h3> @@ -52,7 +54,7 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode <h3 id="Lorsqu'une_demande_de_plein_écran_échoue">Lorsqu'une demande de plein écran échoue</h3> -<p>Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement <code>mozfullscreenerror</code> . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. <span id="result_box" lang="fr"><span>Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.</span></span></p> +<p>Il n'est pas garanti que vous soyez capable de passer en mode plein écran. Par exemple, les élements {{ HTMLElement("iframe") }} possèdent l'attribut {{ HTMLAttrXRef("allowfullscreen", "iframe") }} pour permettre à leur contenu d'être affiché en mode plein écran. Certains contenus comme les greffons fenêtrés ne peuvent être représentés en plein écran. Essayer de placer un élément qui ne peut être affiché en mode plein écran (ou le parent ou le descendant d'un tel élément) ne marchera pas. A la place, l'élément qui a demandé le mode plein écran recevra un événement <code>mozfullscreenerror</code> . Quand une demande de plein écran échoue, Firefox écrit un message d'erreur dans la console Web expliquant pourquoi la demande n'a pas pu aboutir. Dans Chrome et les versions plus récentes d'Opera, aucun avertissement de ce type n'est généré.</p> <div class="note"> <p><strong>Note :</strong> Les requêtes de Fullscreen doivent être appelées depuis un gestionnaire d'évènements ou sinon, elles seront refusées.</p> @@ -73,13 +75,13 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode <dd>L'attribut <code>fullscreenEnabled</code> vous indique si le document est actuellement dans un état qui permettrait d'activer le mode plein écran ou non.</dd> </dl> -<h2 id="Things_your_users_want_to_know" name="Things_your_users_want_to_know">Choses que vos utilisateurs doivent savoir</h2> +<h2 id="Things_your_users_want_to_know">Choses que vos utilisateurs doivent savoir</h2> <p>Vous voulez faire savoir à vos utilisateurs qu'il peuvent utiliser la touche <kbd>ECHAP</kbd> (ou <kbd>F11</kbd>) pour sortir du mode plein écran.</p> <p>En même temps, naviguer sur une autre page, changer d'onglet, ou changer d'application (en utilisant, par exemple, <kbd>Alt</kbd>-<kbd>Tab</kbd> ) pendant le mode plein écran, implique la sortie du mode plein écran de toute façon.</p> -<h2 id="Specification" name="Specification">Exemple</h2> +<h2 id="Specification">Exemple</h2> <p>Dans cet exemple, une vidéo est affichée dans une page web. Taper sur l'une des touches <kbd>Retour</kbd> ou <kbd>Entrée</kbd>, permet à l'utilisateur de passer d'une présentation dans une fenêtre à une présentation en mode plein écran de la vidéo.</p> @@ -100,23 +102,23 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode <p>Ce code est appelé lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd>, comme vu plus haut.</p> -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">function</span> <span class="function token">toggleFullScreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span><span class="operator token">!</span>document<span class="punctuation token">.</span>fullscreenElement<span class="punctuation token">)</span> <span class="punctuation token">{</span> - document<span class="punctuation token">.</span>documentElement<span class="punctuation token">.</span><span class="function token">requestFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>document<span class="punctuation token">.</span>exitFullscreen<span class="punctuation token">)</span> <span class="punctuation token">{</span> - document<span class="punctuation token">.</span><span class="function token">exitFullscreen</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span></code></pre> +<pre class="brush: js">function toggleFullScreen() { + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen(); + } else { + if (document.exitFullscreen) { + document.exitFullscreen(); + } + } +}</pre> <p> Dans un premier temps, la valeur de l'attribut <code>fullscreenElement</code> est analysée dans le {{ domxref("document") }} (en contrôlant s'il est préfixé par <code>moz-, ms-</code> ou <code>webkit-</code>). Si la valeur est nulle, le document est actuellement en mode normal, donc nous devons passer en mode plein écran. Le passage en mode plein écran est assuré en appelant {{ domxref("element.requestFullscreen()") }}.</p> <p>Si le mode plein écran est déjà activé (<code>fullscreenElement</code> est non nul), nous appelons {{ domxref("document.exitFullscreen()") }}.</p> -<h2 id="Préfixes_2"><a name="Préfixes">Préfixes</a></h2> +<h2 id="Préfixes_2">Préfixes</h2> -<p>Pour le moment, tous les navigateurs n'ont pas implémenté la version sans préfixe de l'API (pour l'accès du fournisseur de l'API, vous pouvez utiliser <a href="https://github.com/rafrex/fscreen">Fscreen</a>) . <span id="result_box" lang="fr"><span>Voici le tableau résumant les préfixes et les différences de noms entre eux </span></span><span lang="fr"><span>:</span></span></p> +<p>Pour le moment, tous les navigateurs n'ont pas implémenté la version sans préfixe de l'API (pour l'accès du fournisseur de l'API, vous pouvez utiliser <a href="https://github.com/rafrex/fscreen">Fscreen</a>) . Voici le tableau résumant les préfixes et les différences de noms entre eux :</p> <table class="standard-table"> <thead> @@ -187,7 +189,7 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode </thead> </table> -<h2 id="Specification" name="Specification">Spécifications</h2> +<h2 id="Specification">Spécifications</h2> <table class="standard-table"> <thead> @@ -231,7 +233,7 @@ original_slug: Web/Guide/DOM/Using_full_screen_mode <h2 id="Voir_aussi">Voir aussi</h2> <ul> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a></li> + <li><a href="/fr/docs/Web/Guide/DOM/Using_full_screen_mode">Utiliser le mode plein écran</a></li> <li>{{ domxref("Element.requestFullscreen()") }}</li> <li>{{ domxref("Document.exitFullscreen()") }}</li> <li>{{ domxref("Document.fullscreen") }}</li> |