diff options
Diffstat (limited to 'files/fr/conflicting')
189 files changed, 23267 insertions, 0 deletions
diff --git a/files/fr/conflicting/glossary/chrome/index.html b/files/fr/conflicting/glossary/chrome/index.html new file mode 100644 index 0000000000..4c11e52a8c --- /dev/null +++ b/files/fr/conflicting/glossary/chrome/index.html @@ -0,0 +1,70 @@ +--- +title: Chrome +slug: Chrome +tags: + - API_du_toolkit +translation_of: Glossary/Chrome +translation_of_original: Chrome +--- +<p>Le terme <b>Chrome</b> a historiquement plusieurs significations dans le cadre de Mozilla.</p> +<dl> + <dt> + Browser chrome / Chrome</dt> + <dd> + Le « chrome du navigateur » est l'interface utilisateur autour de la page Web, par opposition à la zone de contenu.</dd> + <dd> + D'une manière plus générale, le chrome est l'ensemble des entités formant l'interface utilisateur d'une application ou d'une <a href="/fr/docs/Extensions">extension</a> donnée.</dd> + <dt> + Une URL <code>chrome://</code></dt> + <dd> + Une URL utilisant le protocole chrome://. Le code chargé depuis une URL chrome a des privilèges étendus, ou privilèges + <i> + chrome</i> + .</dd> + <dd> + Les applications basées sur XUL chargent le code de leurs interfaces depuis des URL <code>chrome://</code>.</dd> + <dt> + Privilèges chrome</dt> + <dd> + Le code s'exécutant avec des privilèges chrome a la permission de tout faire, contrairement au contenu Web, qui est limité de plusieurs manières.</dd> + <dt> + Le paramètre <code>chrome</code> de la méthode <code>window.open</code></dt> + <dd> + Passer le paramètre <a href="/fr/docs/DOM/window.open#Fonctionnalit.C3.A9s_n.C3.A9cessitant_des_privil.C3.A8ges"><code>chrome</code> à <code>window.open</code></a> ouvre une nouvelle fenêtre sans aucun élément de l'interface utilisateur du navigateur.</dd> + <dt> + Dossier chrome</dt> + <dd> + Ce dossier fait habituellement partie de l'installation d'une application basée sur XUL. Les application chargent généralement leurs fichiers d'interface utilisateur depuis les fichiers de ce dossier.</dd> + <dt> + Paramètre de ligne de commande <code>-chrome</code></dt> + <dd> + Lance l'application et ouvre le fichier XUL spécifié dans une fenêtre de premier plan. Par exemple <code>mozilla -chrome chrome://inspector/content</code> démarre l'Inspecteur DOM.</dd> + <dt> + Paquetage chrome</dt> + <dd> + Un + <i> + paquetage chrome</i> + est composé d'un ensemble de + <i> + <a href="/fr/docs/Enregistrement_chrome">fournisseurs chrome</a></i> + . Il existe trois types basiques de fournisseurs chrome : + <ul> + <li><b>Content</b>. il peut s'agir de n'importe quel fichier que Mozilla sait afficher. En général, le fournisseur content consiste le plus souvent en un ensemble de fichiers de liaison <a href="/fr/docs/XUL">XUL</a>, <a href="/fr/docs/JavaScript">JavaScript</a> et <a href="/fr/docs/XBL">XBL</a>.</li> + <li><b>Locale</b>. Il s'agit des traductions pour le support de multiples langues. Les deux principaux types de fichiers sont les fichiers <a href="/fr/docs/Tutoriel_XUL/Localisation">DTD</a> et <a href="/fr/docs/Tutoriel_XUL/Les_fichiers_de_propri%c3%a9t%c3%a9s">les fichiers de propriétés</a> à la manière de Java.</li> + <li><b>Skin</b>. Le fournisseur skin est responsable de la fourniture des données définissant l'apparence visuelle de l'interface utilisateur. Il est constitué de fichiers <a href="/fr/docs/CSS">CSS</a> et d'images.</li> + </ul> + </dd> +</dl> +<dl> + <dt> + <code>chrome.rdf</code></dt> + <dd> + Le registre chrome conserve la liste des paquetages chrome enregistrés et d'autres informations. Il se situait dans le répertoire d'installation et dans le profil. Il n'est plus utilisé depuis Gecko 1.8 (Firefox 1.5).</dd> +</dl> +<h3 id="Voir_.C3.A9galement" name="Voir_.C3.A9galement">Voir également</h3> +<p>(Note : bien que les deux documents ci-dessous mentionnent les fichiers contents.rdf, il existe un moyen plus simple de déclarer vos fournisseurs chrome depuis <a href="/fr/docs/Firefox_1.5_pour_les_d%c3%a9veloppeurs">Firefox 1.5</a> / Toolkit 1.8 — l'utilisation des <a href="/fr/docs/Enregistrement_chrome">manifestes chrome</a>)</p> +<ul> + <li><a href="/fr/docs/Tutoriel_XUL/La_structure_XUL">Tutoriel XUL:La structure XUL</a></li> + <li><a class="external" href="http://xulfr.org/xulplanet/xultu/chromeurl.html">L'URL chrome</a> (en)</li> +</ul> diff --git a/files/fr/conflicting/glossary/doctype/index.html b/files/fr/conflicting/glossary/doctype/index.html new file mode 100644 index 0000000000..803f8cc228 --- /dev/null +++ b/files/fr/conflicting/glossary/doctype/index.html @@ -0,0 +1,10 @@ +--- +title: DTD +slug: Glossaire/DTD +tags: + - Encodage + - Glossaire +translation_of: Glossary/Doctype +translation_of_original: Glossary/DTD +--- +<p>{{page("/fr/docs/Glossaire/Doctype")}}</p> diff --git a/files/fr/conflicting/glossary/dom/index.html b/files/fr/conflicting/glossary/dom/index.html new file mode 100644 index 0000000000..196eda1157 --- /dev/null +++ b/files/fr/conflicting/glossary/dom/index.html @@ -0,0 +1,25 @@ +--- +title: Référence DOM Gecko +slug: Référence_DOM_Gecko +translation_of: Glossary/DOM +translation_of_original: Document_Object_Model_(DOM) +--- +<div> + Table des matières du DOM Gecko</div> +<h2 id="Préface">Préface</h2> +<ul> + <li><a href="/en/Gecko_DOM_Reference/Preface#About_This_Reference" title="en/Gecko_DOM_Reference/Preface#About_This_Reference">À propos de ce document</a></li> + <li><a href="/en/Gecko_DOM_Reference/Preface#Who_Should_Read_This_Guide" title="en/Gecko_DOM_Reference/Preface#Who_Should_Read_This_Guide">À qui s'adresse ce guide</a></li> + <li><a href="/en/Gecko_DOM_Reference/Preface#What_is_Gecko.3F" title="en/Gecko_DOM_Reference/Preface#What_is_Gecko.3F">À propos de Gecko</a></li> + <li><a href="/en/Gecko_DOM_Reference/Preface#API_Syntax" title="en/Gecko_DOM_Reference/Preface#API_Syntax">Référence de l'API</a></li> + <li><a href="/en/Gecko_DOM_Reference/Preface#Using_the_Examples" title="en/Gecko_DOM_Reference/Preface#Using_the_Examples">Comment utiliser les exemples</a></li> +</ul> +<h2 id="Introduction">Introduction</h2> +<ul> + <li><a href="../en/Gecko_DOM_Reference/Introduction#What_is_the_DOM.3F" rel="internal" title="en/Gecko_DOM_Reference/Introduction#What_is_the_DOM.3F">Qu'est que le DOM?</a></li> + <li><a href="../en/Gecko_DOM_Reference/Introduction#DOM_and_JavaScript" rel="internal" title="en/Gecko_DOM_Reference/Introduction#DOM_and_JavaScript">DOM et JavaScript</a></li> + <li><a href="../en/Gecko_DOM_Reference/Introduction#How_Do_I_Access_the_DOM.3F" rel="internal" title="en/Gecko_DOM_Reference/Introduction#How_Do_I_Access_the_DOM.3F">Comment accéder au DOM?</a></li> + <li><a href="../en/Gecko_DOM_Reference/Introduction#Important_Data_Types" rel="internal" title="en/Gecko_DOM_Reference/Introduction#Important_Data_Types">Types de données importants</a></li> + <li><a href="../en/Gecko_DOM_Reference/Introduction#DOM_Interfaces" rel="internal" title="en/Gecko_DOM_Reference/Introduction#DOM_Interfaces">L'interface DOM</a></li> + <li><a href="../en/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API" rel="internal" title="en/Gecko_DOM_Reference/Introduction#Testing_the_DOM_API">Tester l'API DOM</a></li> +</ul> diff --git a/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html b/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html new file mode 100644 index 0000000000..d688fcce92 --- /dev/null +++ b/files/fr/conflicting/learn/common_questions/set_up_a_local_testing_server/index.html @@ -0,0 +1,244 @@ +--- +title: Mettre en place un environnement de travail +slug: Apprendre/Mettre_en_place_un_environnement_de_travail +tags: + - Beginner + - CodingScripting + - Guide + - Learn +translation_of: Learn/Common_questions/set_up_a_local_testing_server +translation_of_original: Learn/Common_questions/Set_up_a_basic_working_environment +--- +<div class="summary"> +<p>Cet article indique comment mettre en place un environnement de travail et de test afin d'organiser vos pages web.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devez au préalable savoir <a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">ce qu'est un serveur web</a>, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">comment installer les outils de base</a> et <a href="/fr/Apprendre/Comprendre_noms_de_domaine">comment fonctionnent les noms de domaine</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Savoir comment installer un serveur local et mettre en place une hiérarchie de fichiers pour développer un site web.</td> + </tr> + </tbody> +</table> + +<p>En développement web, mieux vaut tester son site localement avant de le publier aux yeux du monde entier. Pour effectuer des tests sur votre ordinateur, vous pouvez installer un serveur local. Dans cet article nous verrons comment faire et comment organiser une hiérarchie de fichiers afin que ceux-ci soit organisés, même si le projet devient plus volumineux.</p> + +<h2 id="Pédagogie_active">Pédagogie active</h2> + +<p><em>Il n'existe pas encore de matériau interactif pour cet article. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p> + +<h2 id="Aller_plus_loin">Aller plus loin</h2> + +<h3 id="Installer_et_paramétrer_un_éditeur_de_texte">Installer et paramétrer un éditeur de texte</h3> + +<p>Ce point était l'objet d'un article précédent. Si ce n'est pas déjà fait, <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">voici quelques indications</a> sur comment procéder.</p> + +<h3 id="Installer_un_serveur_web_local">Installer un serveur web local</h3> + +<div class="note"> +<p><strong>Note :</strong> Il existe différents<a href="http://en.wikipedia.org/wiki/Comparison_of_web_server_software"> logiciels de serveurs web</a> qui sont disponibles (<a href="https://httpd.apache.org/" rel="external">Apache</a>, <a href="http://tomcat.apache.org/">Tomcat</a>, <a href="http://www.iis.net/" rel="external">IIS</a>, <a href="http://nginx.org/" rel="external">nginx</a>). Apache est libre et gratuit, disponible sur plusieurs plateformes et est simple à installer. Nous illustrerons donc les exemples de cet article avec Apache.</p> +</div> + +<h4 id="Comprendre_le_fonctionnement_de_localhost">Comprendre le fonctionnement de <em>localhost</em></h4> + +<p>Dans le monde du {{Glossary("DNS")}}, il existe une adresse spéciale connue par chaque ordinateur : <code>localhost</code>. Celle-ci fait référence au serveur situé sur l'ordinateur en question. Ainsi, il est possible d'accéder à un site situé sur <code>localhost</code> avec votre navigateur, même sans connexion à Internet.</p> + +<div class="note"> +<p><strong>Note : </strong>Pour être plus précis, <code>localhost</code> pointe vers une {{Glossary("adresse IP")}} dirigeant vers votre propre machine : <code>127.0.0.1</code> ({{Glossary("IPv4")}}) ou <code>::1</code> ({{Glossary("IPv6")}}).</p> +</div> + +<p>Essayez d'accéder à votre hôte local : <code><a href="http://localhost/">http://localhost</a></code>. Si vous obtenez un résultat semblable à l'image ci-après : félicitations ! Cela signifie que vous disposez déjà d'un serveur web installé sur votre ordinateur (par exemple Mac OS X inclut Apache préinstallé).</p> + +<p><img alt="Basic index from the Apache HTTP server" src="https://mdn.mozillademos.org/files/9275/index.jpg" style="height: 152px; width: 480px;"></p> + +<p>Si vous n'obtenez pas ce résultat, il faut installer Apache.</p> + +<p>Dans les deux cas, il faudra configurer Apache afin que celui-ci pointe vers votre répertoire de travail. Nous verrons comment faire dans la suite de cet article. Selon le système d'exploitation les opérations à effectuer varient légèrement. Nous commencerons par expliquer le mode opératoire à suivre pour Windows. Si vous n'utilisez pas Windows, vous pouvez directement aller aux sections pour <a href="#Ubuntu_Linux">Ubuntu/Linux</a> ou pour <a href="#Mac_OS_X">Mac OS X</a>.</p> + +<h4 id="Installer_et_lancer_son_serveur_local_sur_Windows">Installer et lancer son serveur local sur Windows</h4> + +<h5 id="Installer_Apache">Installer Apache</h5> + +<p>Sous Windows, installer Apache est légèrement compliqué. <a href="http://httpd.apache.org/docs/2.2/platform/windows.html">Cette page explique</a> comment installer un binaire Apache étape par étape.</p> + +<p>Après l'installation, allez à l'URL <a href="http://localhost/">http://localhost/</a> avec votre ordinateur afin de vérifier que votre serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.</p> + +<h5 id="Déplacer_la_racine_de_l'hôte_local_vers_votre_répertoire_de_travail">Déplacer la racine de l'hôte local vers votre répertoire de travail</h5> + +<p>Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé <code>index.html</code> qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.</p> + +<p>Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :</p> + +<ol> + <li>Créez un dossier appelé <code>htdocs</code> dans votre répertoire utilisateur : <code>C:\Users\<strong>NomUtilisateur</strong>\htdocs</code>, où <em>NomUtilisateur </em>correspond à votre nom d'utilisateur. Si vous utilisez une version de Winows plus récente, ce dossier pourra être situé à l'emplacement suivant <code>C:\Documents and Settings\<strong>NomUtilisateur</strong>\htdocs</code>.</li> + <li>Modifiez le fichier de configuration Apache situé à l'emplacement suivant : <code>C:\Program Files\Apache Software Foundation\conf\httpd.conf</code>. Si nécessaire, fournissez les informations d'authentification pour l'administrateur.</li> + <li>Dans ce fichier, allez jusqu'à la ligne qui contient le texte suivant : <code><span style="background-color: #e6e6fa;">DocumentRoot "C:\</span><code><span style="background-color: #e6e6fa;">Users</span></code><span style="background-color: #e6e6fa;">\Apache Software Foundation\htdocs"</span></code>. Éditez cette ligne afin qu'elle pointe vers votre répertoire <code>htdocs</code> : <code><span style="background-color: #e6e6fa;">DocumentRoot "C:\</span><code><span style="background-color: #e6e6fa;">Documents and Settings\</span><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">\htdocs</span></code><span style="background-color: #e6e6fa;">"</span></code></li> + <li>Dans le même fichier, repérez l'instruction <code><Directory></code> : <code><span style="background-color: #e6e6fa;"><Directory "</span><code><span style="background-color: #e6e6fa;">C:\</span><code><span style="background-color: #e6e6fa;">Users</span></code><span style="background-color: #e6e6fa;">\Apache Software Foundation\htdocs</span></code><span style="background-color: #e6e6fa;">"></span></code>. Là aussi, modifiez le répertoire pour qu'il pointe vers le dossier de travail : <code><span style="background-color: #e6e6fa;"><Directory "C:\</span><code><span style="background-color: #e6e6fa;">Documents and Settings\</span><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">\htdocs</span></code><span style="background-color: #e6e6fa;">"></span></code></li> + <li>Sauvegardez le fichier.</li> + <li>Redémarrez Apache : <strong>Démarrer ➤ Apache ➤ Redémarrer Apache.</strong></li> + <li>Rechargez la page <code>localhost</code> dans votre navigateur. Si tout s'est passé comme prévu, vous devriez voir l'index du répertoire. Par défaut, l'index correspond à la liste des fichiers du répertoire. Nous verrons par la suite comment personnaliser cette page d'index. Vous pouvez passer <a href="#Page_index">les instructions pour Ubuntu et Mac</a>.</li> +</ol> + +<h4 id="Installer_et_lancer_son_serveur_local_sur_Ubuntu_(ou_plus_généralement_sur_Linux)"><a id="Ubuntu_Linux" name="Ubuntu_Linux">Installer et lancer son serveur local sur Ubuntu (ou plus généralement sur Linux)</a></h4> + +<h5 id="Installer_Apache_2">Installer Apache</h5> + +<p>Sous Ubuntu, lancez un terminal (vous pouvez utiliser le raccourci <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>T</kbd>) puis lancez ces commandes (saisissez votre mot de passe si besoin) :</p> + +<pre class="brush: bash">sudo apt-get update +sudo apt-get install apache2</pre> + +<div class="note"> +<p><strong>Note : </strong>Si vous n'utilisez pas Ubuntu ou une distribution basée sur Debian, suivez <a href="http://httpd.apache.org/docs/2.2/install.html">ces sept étapes</a> pour compiler et installer Apache. Vous aurez peut-être à saisir votre mot de passe. Vous pouvez utiliser un éditeur graphique plutôt que <code>vi</code> pour éditer les fichiers de configuration.</p> +</div> + +<p>Après l'installation, accédez à <a href="http://localhost/">http://localhost/</a> avec votre navigateur afin de vérifier que le serveur fonctionne. Sinon, n'hésitez pas à utiliser un moteur de recherche ou un forum d'aide. Si vous vous posez une question, il y a de grande chance que celle-ci ait déjà été posée et qu'une réponse y ait été apportée.</p> + +<h5 id="Déplacer_la_racine_de_l'hôte_local_vers_votre_répertoire_de_travail_2">Déplacer la racine de l'hôte local vers votre répertoire de travail</h5> + +<p>Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé <code>index.html</code> qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.</p> + +<p>Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :</p> + +<ul> + <li>Créez un dossier appelé <code>htdocs</code> dans votre répertoire utilisateur : <code>/home/<strong>NomUtilisateur</strong>/htdocs</code>, où <em>NomUtilisateur </em>correspond à votre nom d'utilisateur.</li> + <li>Ouvrez le fichier de configuration Apache situé à cet emplacement : <code><code>/etc/apache2/sites-available/000-default.conf.</code></code> Si besoin, ouvrez ce fichier en tant qu'administrateur. Selon la version d'Ubuntu ou de Debian, le fichier peut se situer à l'un de ces deux emplacements <code>/etc/apache2/httpd.conf</code> or <code>/etc/httpd/conf/httpd.conf</code>.</li> + <li>Dans ce fichier et à la ligne suivante : <code><span style="background-color: #e6e6fa;">DocumentRoot /var/www/html</span></code>. Modifiez cette line afin que le répertoire corresponde au répertoire de travail <code>htdocs</code> : <code><span style="background-color: #e6e6fa;">DocumentRoot /home/</span><code><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">/htdocs</span></code></code></li> + <li>Vous devriez également ajouter des restrictions d'accès aux fichiers. Pour cela, ajoutez les lignes suivantes sous la ligne avec <code>DocumentRoot</code> (n'oubliez pas de changer <code>USERNAME</code> avec votre nom d'utilisateur).</li> +</ul> + +<pre> <Directory /> + Options FollowSymLinks + AllowOverride None + Require all denied + </Directory> + <Directory /home/USERNAME/htdocs/> + Options Indexes FollowSymLinks MultiViews + AllowOverride None + Require all granted + </Directory></pre> + +<ul> + <li>Sauvegardez le fichier.</li> + <li>Redémarrez Apache avec la commande suivante <code><span style="background-color: #e6e6fa;">sudo apachectl restart</span></code>. Si nécessaire, saisissez votre mot de passe.</li> + <li>Rechargez la page <code>localhost</code> dans votre navigteur. Si tout s'est déroulé comme prévu, vous devriez pouvoir voir l'index du répertoire (cf. la capture d'écran ci-après). Par défaut, l'index sera la liste des fichiers du répertoire courant. Nous allons voir par la suite comment personnaliser cette page. Vous pouvez <a href="#Page_index">passer les instructions pour Mac</a>.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9343/Screenshot%20from%202014-11-13%2015:13:33.png" style="height: 292px; width: 584px;"></p> + +<h4 id="Installer_et_lancer_son_serveur_local_sur_Mac_OS_X"><a id="Mac_OS_X" name="Mac_OS_X">Installer et lancer son serveur local sur Mac OS X</a></h4> + +<p>Apache est préinstallé avec Mac OS X. Mais il est toujours nécessaire de déplacer la racine <code>localhost</code> vers le répertoire de travail.</p> + +<p>Sous le capôt, votre serveur web utilise {{Glossary("HTTP")}} pour afficher les fichiers situés sur votre ordinateur. Dans notre exemple, Apache affiche un fichier appelé <code>index.html</code> qui est situé dans un sous-répertoire des dossiers Apache. Cela serait plus utile si on pourrait utiliser un répertoire au choix.</p> + +<p>Tout d'abord, créons un dossier puis faisons pointer le serveur web vers ce répertoire :</p> + +<ol> + <li>Créez un dossier appelé <code>htdocs</code> dans votre répertoire utilisateur : <code>/Users/<strong>NomUtilisateur</strong>/htdocs</code>, où <em>NomUtilisateur </em>correspond à votre nom d'utilisateur.</li> + <li>Ouvrez le fichier de configuration Apache situé à cet emplacement : <code>/etc/apache2/httpd.conf.</code></li> + <li>Dans ce fichier, trouvez la ligne <code><span style="background-color: #e6e6fa;">DocumentRoot "/Library/WebServer/Documents</span><span style="background-color: #e6e6fa;">"</span></code>. puis modifiez la afin qu'elle pointe vers votre répertoire <code>htdocs</code> : <code><span style="background-color: #e6e6fa;">DocumentRoot "/Users/</span><code><strong><span style="background-color: #e6e6fa;">NomUtilisateur</span></strong><span style="background-color: #e6e6fa;">/htdocs</span></code><span style="background-color: #e6e6fa;">"</span></code></li> + <li>Dans ce même fichier, trouvez l'instruction <code><Directory></code> : <code><span style="background-color: #e6e6fa;"><Directory "</span><code><span style="background-color: #e6e6fa;">/Library/WebServer/Documents</span></code><span style="background-color: #e6e6fa;">"></span></code> et modifiez cette ligne avec : <code><span style="background-color: #e6e6fa;"><Directory "/Users/<strong>NomUtilisateur</strong></span><code><span style="background-color: #e6e6fa;">/htdocs</span></code><span style="background-color: #e6e6fa;">"></span></code></li> + <li>Sauvegardez le fichier.</li> + <li>Redémarrez Apache avec la commande suivante <code><span style="background-color: #e6e6fa;">sudo apachectl restart</span></code>. Si nécessaire, saisissez votre mot de passe.</li> + <li>Rechargez la page <code>localhost</code> dans votre navigteur. Si tout s'est déroulé comme prévu, vous devriez pouvoir voir l'index du répertoire (cf. la capture d'écran ci-après).</li> +</ol> + +<p><img alt="Example of Apache serving a folder autoindexing" src="https://mdn.mozillademos.org/files/9277/projet.jpg" style="height: 183px; width: 480px;"></p> + +<h3 id="Ajouter_une_page_d'index"><a id="Page_index" name="Page_index">Ajouter une page d'index</a></h3> + +<p>Lorsque vous visitez un site web, vous vous attendez à y trouver plus qu'une simple liste de fichiers. Il est possible d'ajouter une page d'index personnalisée pour votre site web local. Ce fichier d'index est un fichier {{Glossary("HTML")}}, il doit être intitulé <code>index.html</code> et il doit être placé dans le répertoire <code>htdocs</code>.</p> + +<p>Pour cela, ouvrez votre éditeur de texte puis copiez le code HTML qui suit dans un nouveau fichier :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Voici une page d'index</title> +</head> + +<body> + <p>Ma propre page d'index</p> +</body> +</html></pre> + +<p>Enregistrez ce fichier dans votre répertoire <code>htdocs</code> avec le nom <code>index.html</code> :</p> + +<p><img alt="Example of a custom index.html file" src="https://mdn.mozillademos.org/files/11721/Capture%20du%202015-10-11%2021-58-32.png" style="height: 453px; width: 632px;"></p> + +<p>Vous pouvez ouvrir la page <a href="http://localhost/" rel="external">http://localhost</a> dans votre navigateur, vous aurez alors :</p> + +<p><img alt="A custom index without any style" src="https://mdn.mozillademos.org/files/11723/Capture%20du%202015-10-11%2022-00-05.png" style="height: 178px; width: 381px;"></p> + +<h3 id="Organiser_ses_fichiers">Organiser ses fichiers</h3> + +<p>La structure et l'organisation des fichiers est critique pour n'importe quel site web. Il est très rare qu'un site web se compose uniquement de fichiers HTML. Vous aurez vraisemblablement à intégrer des images, à mettre en forme des pages avec des fichiers {{Glossary("CSS")}} ou d'ajouter des fonctionnalités avec des fichiers {{Glossary("JavaScript")}}. <em>Dès le début</em>, il est nécessaire d'organiser clairement ces fichiers pour ne pas s'y perdre par la suite.</p> + +<p>Bien entendu, vous pouvez suivre votre propre organisation mais la plus communément utilisée contient trois répertoires : <code>images</code> pour les images, <code>styles</code> pour les fichiers CSS et <code>scripts</code> pour les scripts. Simple et efficace.</p> + +<h4 id="Fichiers_d'exemples">Fichiers d'exemples</h4> + +<p>Dans les prochains articles, nous verrons <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">comment créer une page web</a>, <a href="/en-US/Learn/CSS/Using_CSS_in_a_web_page">comment utiliser CSS</a> puis <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/JavaScript_basics">comment utiliser JavaScript</a>. Nul besoin de connaître ces langages pour placer quelques fichiers d'exemples qu'on modifiera par la suite. Cela vous permettra de mieux percevoir la structure qu'on souhaite mettre en place.</p> + +<p>Créons un nouveau fichier qui correspondra à votre feuille de style principale (là où vous écrirez toutes les règles CSS). Pour le moment, copiez-collez ce fragment de code dans un nouveau fichier dans votre éditeur de texte :</p> + +<pre class="brush: css">body { + font-family: sans-serif; +}</pre> + +<p>Puis enregistrez le fichier dans le répertoire <code>styles</code> sous le nom <code>basic.css</code> :</p> + +<p><img alt="Example of a custom basic.css file" src="https://mdn.mozillademos.org/files/11727/Capture%20du%202015-10-12%2008-42-36.png" style="height: 182px; width: 528px;"></p> + +<p>Ensuite, revenez à (ou réouvrez) votre page d'index pour y insérer une référence à la feuille de styles. Pour cela, on utilisera la balise {{HTMLElement("link")}} (qu'on reverra dans les prochains articles) :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Voici une page d'index</title> + +<strong> <link rel="stylesheet" href="./styles/basic.css"></strong> +</head> + +<body> + <p>Ma propre page d'index</p> +</body> +</html></pre> + +<p>Maintenant, si vous réouvrez votre site local (vous pouvez simplement rafraîchir la page si vous avez laissé votre navigateur ouvert), vous verrez que la police a changé à cause de la feuille de style :</p> + +<p><img alt="A custom index with style applied" src="https://mdn.mozillademos.org/files/11725/Capture%20du%202015-10-12%2008-54-01.png" style="height: 146px; width: 285px;"></p> + +<h4 id="Structure_finale_pour_le_projet">Structure finale pour le projet</h4> + +<p>Reprenons. Votre structure de répertoires et de fichiers pour votre site devrait désormais ressembler à :</p> + +<ul> + <li><code>htdocs</code> (le dossier racine pour le projet) + + <ul> + <li><code>images</code> (le répertoire pour les images)</li> + <li><code>scripts</code> (le répertoire pour les différents scripts JavaScript)</li> + <li><code>styles</code> (le répertoire pour les feuilles de styles CSS) + <ul> + <li><code>basic.css</code> (la feuille de style principale)</li> + </ul> + </li> + <li><code>index.html</code> (la page d'index pour le site web local)</li> + </ul> + </li> +</ul> + +<p>Voici la structure minimale que vous devriez avoir et qui pourra s'adapter lorsque votre projet grandira. Au fur et à mesure des développements de votre projet, n'hésitez pas à adapter et à améliorer cette structure afin qu'elle soit optimale pour votre site.</p> + +<h2 id="Prochaines_étapes">Prochaines étapes</h2> + +<p>Maintenant que nous avons vu comment organiser les fichiers et que nous avons créé quelques uns, il est temps d'<a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">écrire sa premère page web</a>.</p> diff --git a/files/fr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/fr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..d5c4ea0ea9 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,110 @@ +--- +title: Cascade et héritage +slug: CSS/Premiers_pas/Cascade_et_héritage +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of_original: Web/Guide/CSS/Getting_started/Cascading_and_inheritance +--- +<p> </p> +<p>Cette page met en évidence la façon dont les feuilles de style interagissent dans une cascade et comment les éléments héritent leur style de leurs parents.</p> +<p>Vous améliorerez votre feuille de style d'exemple en utilisant l'héritage pour changer le style de nombreuses parties de votre document à la fois.</p> +<h3 id="Information_:_cascade_et_h.C3.A9ritage" name="Information_:_cascade_et_h.C3.A9ritage">Information : cascade et héritage</h3> +<p>Le style final d'un élément peut être spécifié à de nombreux endroits, qui peuvent interagir de manière complexe. C'est ce qui rend CSS puissant, mais peut aussi le rendre déroutant et difficile à déboguer.</p> +<p>Trois sources principales d'information de style forment une cascade.</p> +<p>Celles-ci sont :</p> +<ul> + <li>Le style par défaut du navigateur pour le langage de balisage</li> + <li>Le style spécifié par l'utilisateur lisant le document</li> + <li>Le style lié au document par son auteur</li> +</ul> +<p>Le style de l'utilisateur modifie le style par défaut du navigateur. Le style de l'auteur du document modifie ensuite le style plus avant. Dans ce tutoriel, vous êtes l'auteur de votre document, et vous travaillez uniquement avec des feuilles de style d'auteur.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Lorsque vous lisez ce document dans votre navigateur, une partie du style visible vient des réglages par défaut de votre navigateur pour HTML. + <p>Une partie du style peut venir de vos paramètres utilisateur dans les Options, ou d'un fichier <code>userContent.css</code> dans le profil de votre navigateur Mozilla.</p> + <p>Enfin, une partie du style provient de feuilles de style liées au document par le serveur wiki.</p> + </td> + </tr> + </tbody> +</table> +<p><br> + Lorsque vous ouvrez votre document d'exemple dans le navigateur, les éléments STRONG sont en gras par rapport au reste du texte. Cela provient du style par défaut du navigateur pour HTML.</p> +<p>Les éléments STRONG sont rouges. Cela provient de votre propre feuille de style.</p> +<p>Les éléments STRONG héritent aussi en grande partie du style de l'élément P, étant ses enfants. De même, l'élément P hérite en grande partie du style de l'élément BODY.</p> +<p>Pour les styles dans la cascade, les feuilles de style de l'auteur ont priorité, ensuite ceux de l'utilisateur et enfin les réglages par défaut du navigateur.</p> +<p>Pour les styles hérités, le style propre d'un nœud enfant a priorité sur le style hérité de son parent.</p> +<p>Ce ne sont pas les seules priorités qui s'appliquent. Une prochaine page du tutoriel expliquera cela plus en détail.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>CSS fournit également une manière pour l'utilisateur de passer outre le style de l'auteur du document, en utilisant le mot-clé <code>!important</code>. + <p>Cela signifie qu'en tant qu'auteur du document, vous ne pouvez pas toujours prédire exactement ce que vos lecteurs verront.</p> + <p>Si vous voulez connaître tous les détails de la cascade et de l'héritage, consultez <a class="external" href="http://www.w3.org/TR/CSS21/cascade.html">Assigning property values, Cascading, and Inheritance</a> <span class="comment">note : ce lien existe(ra) peut-être quelque part en français</span> dans la spécification CSS.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Action_:_utilisation_de_l.27h.C3.A9ritage" name="Action_:_utilisation_de_l.27h.C3.A9ritage">Action : utilisation de l'héritage</h3> +<p>Éditez votre exemple de fichier CSS.</p> +<p>Ajoutez cette ligne à l'aide d'un copier-coller. Que vous la mettiez au dessus ou en dessous de la ligne déjà existante n'a pas grande importance. Cependant, l'ajouter en haut est plus logique étant donné que dans votre document l'élément P est le parent de l'élément STRONG :</p> +<pre>p {color: blue; text-decoration: underline;} +</pre> +<p>Maintenant, actualisez dans votre navigateur pour voir l'effet sur votre document. Le soulignement affecte tout le texte du paragraphe, y compris les lettres initiales. Les éléments STRONG ont hérité du style souligné depuis leur élément parent P.</p> +<p>Mais les éléments STRONG sont toujours rouges. La couleur rouge est leur propre style, il a donc priorité sur la couleur bleue de leur élément parent P.</p> +<table> + <tbody> + <tr> + <td> + <table style="border: 2px outset #36b; padding: 1em; margin-right: 2em;"> + <caption> + Avant</caption> + <tbody> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 1em;"> + <caption> + Après</caption> + <tbody> + <tr> + <td style="color: blue; text-decoration: underline;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>Modifiez votre feuille de style afin que seules les lettres rouges soient soulignées : + <table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="color: blue;"><strong style="color: red; text-decoration: underline;">C</strong>ascading <strong style="color: red; text-decoration: underline;">S</strong>tyle <strong style="color: red; text-decoration: underline;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Si vous avez eu des difficultés à comprendre cette page, ou avez des commentaires à son sujet, n'hésitez pas à contribuer à sa <a>page de discussion</a>.</p> +<p>Votre feuille de style d'exemple spécifie des styles pour les balises <code>P</code> et <code>STRONG</code>, qui changent le style des éléments correspondants au sein de votre document. La page suivante explique comment spécifier des styles de manière plus sélective : <b><a href="/fr/docs/CSS/Premiers_pas/Les_s%c3%a9lecteurs">Les sélecteurs</a></b>.</p> diff --git a/files/fr/conflicting/learn/css/building_blocks/index.html b/files/fr/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..fd147c876d --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,74 @@ +--- +title: Boîtes +slug: CSS/Premiers_pas/Boîtes +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +<p> </p> +<p>Cette page explique comment utiliser CSS pour contrôler l'espace occupé par un élément lorsqu'il est affiché.</p> +<p>Dans votre document d'exemple, vous changerez l'espacement et ajouterez des règles décoratives.</p> +<h3 id="Information_:_les_bo.C3.AEtes" name="Information_:_les_bo.C3.AEtes">Information : les boîtes</h3> +<p>Lorsque votre navigateur affiche un élément, celui-ci prend une certaine place. L'espace occupé est divisé en quatre parties.</p> +<p>Au centre, l'espace dont l'élément a besoin pour afficher son contenu. Autour du contenu, il y a des marges internes (padding). Autour des marges internes, il y a une bordure (border). Autour des bordures, il y a des marges extérieures (margin).</p> +<table> <tbody> <tr> <td style="width: 26em;"> <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 20em;"> <p style="text-align: center; margin: 0px;">margin</p> <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;">padding</p> <div style="background-color: #eee;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">élément</p> </div> </div> </div> <p><em>Une partie de la mise en page est visible en gris.</em></p> </td> <td> <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 20em;"> <p style="text-align: center; margin: 0px;"> </p> <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;"> </p> <div style="background-color: #fff;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">élément</p> </div> </div> </div> <p><em>Ce qui apparait dans le navigateur.</em></p> </td> </tr> </tbody> +</table> +<p>Les marges intérieures, les bordures et les marges extérieures peuvent avoir des tailles différentes en haut, à droite, en bas et à gauche de l'élément. Chacune de ces tailles peut être zéro.</p> +<p>Les marges intérieures sont toujours de la même couleur que le fond de l'élément. Lorsque vous choisissez la couleur de fond, vous appliquez donc la couleur à l'élément lui-même et à ses marges intérieures. Celles-ci sont toujours transparentes.</p> +<table> <tbody> <tr> <td style="width: 22em;"> <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> <p style="text-align: center; margin: 0px;">margin</p> <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;">padding</p> <div style="background-color: #ded;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">élément</p> </div> </div> </div> <p><em>L'élément a un fond vert.</em></p> </td> <td> <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> <p style="text-align: center; margin: 0px;"> </p> <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> <p style="text-align: center;"> </p> <div style="background-color: #efe;"> <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">élément</p> </div> </div> </div> <p><em>Ce qui apparaît dans le navigateur.</em></p> </td> </tr> </tbody> +</table> +<h4 id="Bordures" name="Bordures">Bordures</h4> +<p>Vous pouvez utiliser des bordures pour décorer des éléments avec des lignes ou des encadrements.</p> +<p>Pour spécifier la même bordure tout autour d'un élément, utilisez la propriété <code>border</code>. Spécifiez l'épaisseur (habituellement en pixels pour l'affichage à l'écran), le style et la couleur.</p> +<p>Les styles sont :</p> +<table style="margin-left: 2em;"> <tbody> <tr> <td style="width: 6em;"> <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>solid</code> (trait plein)</div> </td> <td style="width: 6em;"> <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>dotted</code> (pointillés)</div> </td> <td style="width: 6em;"> <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>dashed</code> (trait interrompu)</div> </td> <td style="width: 6em;"> <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>double</code> (trait double)</div> </td> </tr> <tr> <td style="width: 6em;"> <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>inset</code> (creux)</div> </td> <td style="width: 6em;"> <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>outset</code> (en relief)</div> </td> <td style="width: 6em;"> <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>ridge</code> (bordure en relief)</div> </td> <td style="width: 6em;"> <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 6em; text-align: center;"><code>groove</code> (bordure en creux)</div> </td> </tr> </tbody> +</table> +<p>Vous pouvez également définir le style à <code>none</code> ou <code>hidden</code> pour enlever explicitement la bordure, ou mettre sa couleur à <code>transparent</code> pour rendre celle-ci invisible sans changer la mise en page.</p> +<p>Pour spécifier les bordures un côté à la fois, utilisez les propriétés : <code>border-top</code>, <code>border-right</code>, <code>border-bottom</code>, <code>border-left</code>. Vous pouvez utiliser celles-ci pour spéficier une bordure d'un seul côté, ou différentes bordures sur différents côtés.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Exemples</caption> <tbody> <tr> <td>Cette règle change la couleur de fond et la bordure supérieure des éléments de titre : <div style="width: 40em;"> <pre class="eval">h3 { + border-top: 4px solid #7c7; /* vert moyen */ + background-color: #efe; /* vert pâle */ + color: #050; /* vert foncé */ + } +</pre> </div> <p>Le résultat ressemble à ceci :</p> <table> <tbody> <tr> <td> <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Un titre avec du style</p> </td> </tr> </tbody> </table> <p><br> Cette règle rend les images plus faciles à voir en leur donnant une bordure grisée tout autour :</p> <div style="width: 30em;"> <pre class="eval">img {border: 2px solid #ccc;} +</pre> </div> <p>Le résultat ressemble à ceci :</p> <table> <tbody> <tr> <td>Image :</td> <td style="border: 2px solid #ccc;"><img alt="Image:ligne-bleue.png" class="internal" src="/@api/deki/files/1398/=Ligne-bleue.png"></td> </tr> </tbody> </table> </td> </tr> </tbody> +</table> +<h4 id="Marges_int.C3.A9rieures_et_ext.C3.A9rieures" name="Marges_int.C3.A9rieures_et_ext.C3.A9rieures">Marges intérieures et extérieures</h4> +<p>Utilisez les marges pour ajuster les positions des éléments et pour créer de l'espace autour d'eux.</p> +<p>Utilisez les propriétés <code>margin</code> et <code>padding</code> pour changer respectivement la largeur des marges extérieures et intérieures.</p> +<p>Si vous spécifiez une seule largeur, elle s'applique tout autour de l'élément (en haut, à droite, en bas et à gauche).</p> +<p>Si vous spécifiez deux largeurs, la première s'applique en haut et en bas, la seconde sur les côtés droits et gauches.</p> +<p>Vous pouvez spécifier les quatres largeurs dans cet ordre : haut, droite, bas, gauche.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Exemple</caption> <tbody> <tr> <td>Cette règle marque les paragraphes de la classe <code>remarque</code> en leur donnant une bordure rouge tout autour. <p>Une marge intérieure (padding) sépare légèrement cette bordure du texte.</p> <p>Une marge extérieure (margin) à gauche met le paragraphe en retrait par rapport au reste du texte :</p> <div style="width: 30em;"> <pre class="eval">p.remarque { + border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> </div> <p>Le résultat ressemble à ceci :</p> <table> <tbody> <tr> <td> <p>Ceci est un paragraphe normal.</p> <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Ceci est une remarque.</p> </td> </tr> </tbody> </table> </td> </tr> </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> <caption>Plus de détails</caption> <tbody> <tr> <td>Lorsque vous utilisez des marges pour ajuster la façon dont les éléments sont placés, vos règles de style interagissent avec les réglages par défaut du navigateur de différentes manières, qui sont parfois complexes. <p>Différents navigateurs peuvent placer les éléments différemment. Le résultat peut sembler similaire jusqu'à ce que votre feuille de style change des choses, et celle-ci peut parfois donner des résultats surprenants.</p> <p>Pour obtenir le résultat voulu, il se peut que vous ayez à changer le balisage de votre document. La page suivante de ce tutoriel donne plus d'informations à ce sujet.</p> <p>Pour des informations détaillées à propos des marges et des bordures, consultez <a class="external" href="http://www.w3.org/TR/CSS21/box.html">Box model</a> dans la spécification CSS.</p> </td> </tr> </tbody> +</table> +<h3 id="Action_:_ajout_de_bordures" name="Action_:_ajout_de_bordures">Action : ajout de bordures</h3> +<p>Éditez votre fichier CSS. Ajoutez cette règle pour dessigner une ligne en travers de la page au dessus de chaque titre :</p> +<div style="width: 30em;"> <pre class="eval">h3 {border-top: 1px solid gray;} +</pre> +</div> +<p>Si vous avez tenté le challenge sur la page précédente, modifiez la règle que vous aviez créée, sinon ajoutez cette nouvelle règle pour ajouter de l'espace sous chaque élément de liste :</p> +<div style="width: 30em;"> <pre class="eval">li { + list-style: lower-roman; + margin-bottom: 8px; + } +</pre> +</div> +<p>Actualisez dans votre navigateur pour voir le résultat :</p> +<table style="border: 2px outset #36b; padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> <ul style=""> <li style="margin-bottom: 8px;">Arctique</li> <li style="margin-bottom: 8px;">Atlantique</li> <li style="margin-bottom: 8px;">Pacifique</li> <li style="margin-bottom: 8px;">Indien</li> <li style="margin-bottom: 8px;">Antarctique</li> </ul> <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Paragraphes numérotés</p> <p><strong>1: </strong>Lorem ipsum</p> <p><strong>2: </strong>Dolor sit</p> <p><strong>3: </strong>Amet consectetuer</p> <p><strong>4: </strong>Magna aliquam</p> <p><strong>5: </strong>Autem veleum</p> </td> </tr> </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Challenge</caption> <tbody> <tr> <td>Ajoutez une règle à votre feuille de style pour entourer les océans d'une bordure épaisse dans une couleur rapellant celle de la mer — quelque chose comme ceci : <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> <tbody> <tr> <td> <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> <div style="border: 12px solid #69b; padding-left: 1em;"> <ul style=""> <li style="margin-bottom: 8px;">Arctique</li> <li style="margin-bottom: 8px;">Atlantique</li> <li style="margin-bottom: 8px;">Pacifique</li> <li style="margin-bottom: 8px;">Indien</li> <li style="margin-bottom: 8px;">Antarctique</li> </ul> </div> <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B)Paragraphes numérotés</p> <p><strong>. . .</strong></p> </td> </tr> </tbody> </table> <p>(Il n'est pas nécessaire de retrouver exactement la même épaisseur et la même couleur qu'ici.)</p> </td> </tr> </tbody> +</table> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a href="/Talk:fr/CSS/Premiers_pas/Boîtes" title="Talk:fr/CSS/Premiers_pas/Boîtes">page de discussion</a>.</p> +<p>En spécifiant des marges, vous avez modifié la mise en page de votre document. À la page suivante, vous apprendrez d'autres manières de changer celle-ci : <strong><a href="/fr/CSS/Premiers_pas/Mise_en_page" title="fr/CSS/Premiers_pas/Mise_en_page">Mise en page</a></strong>.</p> +<p>{{ languages( { "en": "en/CSS/Getting_Started/Boxes", "pl": "pl/CSS/Na_pocz\u0105tek/Bloki", "pt": "pt/CSS/Como_come\u00e7ar/Caixas" } ) }}</p> diff --git a/files/fr/conflicting/learn/css/building_blocks/selectors/index.html b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..d3ab8e9794 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,137 @@ +--- +title: Les propriétés CSS et comment s'en servir +slug: Apprendre/CSS/Les_propriétés_CSS +tags: + - Beginner + - CSS + - CodingScripting + - NeedsActiveLearning +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Learn/CSS/CSS_properties +--- +<div>{{IncludeSubnav("/fr/Apprendre")}}</div> +<div class="summary"> +<p>{{Glossary("CSS")}} définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Comprendre les bases de {{Glossary("HTML")}}, <a href="/fr/Apprendre/HTML/Balises_HTML">des éléments HTML</a>, et <a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web#La_balise_link">comment lier des documents HTML aux feuilles de style CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Connaître différents sélecteurs et propriétés CSS afin d'appliquer une mise en forme simple sur une page web.</td> + </tr> + </tbody> +</table> + +<p>Séparer le contenu de la mise en forme rend le développement web plus rapide et facile. En définissant la structure du document uniquement dans votre fichier HTML, tandis que les informations de mise en forme sont indiquées pour leur part dans un fichier séparé (appelé feuille de style), vous pouvez mettre à jour la mise en forme de nombreux documents en une seule fois (et en profiter pour économiser des ressources ordinateur en même temps).</p> + +<p>La syntaxe CSS fait appel à des mots-clés intuitifs et faciles à utiliser.</p> + +<pre class="brush: css">p { + font-family: "Times New Roman", georgia, sans-serif; + font-size: 24px; +}</pre> + +<p>Dans l'exemple précédent, <code>p</code> est un sélecteur qui applique un style à tous les éléments <code>{{HTMLElement("p")}}</code> en même temps. Les propriétés CSS <code>font-family</code> et <code>font-size</code> sont incluses dans des accolades et les valeurs correspondantes, juste après les deux-points, déterminent le style à appliquer.</p> + +<p>Il existe plus de <a href="/fr/docs/Web/CSS/Reference">250 propriétés</a> pour mettre en forme votre document. Du texte à la mise en page complexe, (presque) tout est possible.</p> + +<h2 id="Pédagogie_active">Pédagogie active</h2> + +<p><em>Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p> + +<h2 id="Aller_plus_loin">Aller plus loin</h2> + +<p>Si les propriétés sont plutôt simples à utiliser, il en va parfois autrement des sélecteurs. Ne vous inquiétez pas, ce n'est pas si ardu et les maitriser permet de tirer parti du grand potentiel du CSS. Dans les exemples qui suivent, nous allons faire connaissance avec les sélecteurs les plus courants.</p> + +<p>Pour définir une règle CSS, on utilise des sélecteurs qu'on associe à des propriétés. Ces sélecteurs déterminent quels élements vont recevoir les propriétés précisées dans la règle. Notez que plusieurs règles peuvent s'appliquer à un même élément. La cascade CSS (dont on reparlera plus tard) définit alors quelle règle s'appliquera en cas de conflit. Pour l'instant, retenez simplement que la règle contenant les <a href="/fr/docs/Web/CSS/Spécificité">sélecteurs les plus précis</a> prend le dessus sur les règles avec les sélecteurs plus basiques.</p> + +<h3 id="Le_sélecteur_d'élément">Le sélecteur d'élément</h3> + +<p>Les sélecteurs d'éléments désignent des éléments HTML uniquement par leur nom. De plus, comme tous les sélecteurs CSS, vous pouvez appliquer un ensemble de propriétés communes à plusieurs élements à la fois.</p> + +<p>Pour notre premier exemple, intéressons nous au fragment de code HTML suivant :</p> + +<pre class="brush: html"><h1>Je suis un exemple.</h1> +<p>Dans cet exemple, je suis un paragraphe.</p> +<p>Et je suis un second paragraphe.</p> +</pre> + +<p>Dans la règle CSS qui suit, le sélecteur d'élement <code>p</code> applique les styles définis à tous les éléments <code>{{HTMLElement("p")}}</code> de notre document HTML simultanément, évitant ainsi d'inutiles répétitions. On utilise la propriété {{cssxref("font-family")}} (qui définit la police avec laquelle le texte apparait) et {{cssxref("font-size")}} (qui définit pour sa part la taille du texte).</p> + +<pre class="brush: css">p { + font-family: "Helvetica", Arial, sans-serif; + font-size : 12px; +}</pre> + +<p>La prochaine règle CSS s'applique uniquement à l'élément<code> {{HTMLElement("h1")}}</code>. On fait appel à la propriété {{cssxref("font-size")}} pour que la taille du titre soit deux fois plus grande que celle du texte et à la propriété {{cssxref("font-weight")}} pour qu'il soit également en gras.</p> + +<pre class="brush: css">h1 { + font-size : 24px; + font-weight: bold; +}</pre> + +<p>La règle CSS suivante applique les styles demandés à la fois aux éléments <code>{{HTMLElement("h1")}}</code> et aux éléments <code>{{HTMLElement("p")}}</code>, cela permet potentiellement d'éviter des redondances inutiles dans le code. Cette façon de procéder est appelée « groupe de sélecteurs » ou « chaîne de sélecteurs ». Notez qu'un point virgule est nécessaire pour séparer les sélecteurs. Ici nous utilisons la propriété {{cssxref("color")}} pour appliquer la même couleur au texte des <code>h1</code> et à celui des paragraphes.</p> + +<pre class="brush: css">h1, p { + color: darkmagenta; +}</pre> + +<p>Voici le résultat obtenu avec ce code :</p> + +<p>{{EmbedLiveSample('Le_sélecteur_d\'élément')}}</p> + +<h3 id="Le_sélecteur_id">Le sélecteur <code>id</code></h3> + +<p>L'attribut <code>id</code><strong> </strong>d'un élément HTML donné permet d'identifier de façon unique cet élément. Par conséquent, un sélecteur <code>id</code> est utilisé uniquement lorsqu'un ensemble de règles de style s'applique à un seul élement.</p> + +<p>Pour notre prochain exemple, prenons le fragment de code HTML suivant :</p> + +<pre class="brush: html"><p id="coucou">Coucou monde !</p> </pre> + +<p>La règle CSS suivante s'applique exclusivement à cet élément, identifié et unique. Pour transformer un sélecteur ordinaire en sélecteur <code>id</code>, il suffit de placer un signe dièse (#) devant le nom de l'identifiant (<em>id</em>). Nous faisons appel à trois propriétés : {{cssxref("text-align")}} pour centrer le texte dans le paragraphe, {{cssxref("border")}} pour encadrer le paragraphe d'un cadre fin, et {{cssxref("padding")}} afin d'ajouter une marge intérieure supplémentaire entre le texte et le cadre.</p> + +<pre class="brush: css">#coucou { + text-align: center; + border : 1px solid black; + padding : 8px; +}</pre> + +<p>Voici le résultat final obtenu:</p> + +<p>{{EmbedLiveSample('Le_sélecteur_id')}}</p> + +<h3 id="Le_sélecteur_class">Le sélecteur <code>class</code></h3> + +<p>À l'intérieur du code HTML, l'attribut <code>class</code><strong> </strong>permet de donner des identifiants multiples aux élements HTML. Ces identifiants peuvent ainsi être combinés avec le CSS pour regrouper des élements en fonction de leur nom.</p> + +<p>Pour notre prochain exemple, analysez le fragment de code HTML suivant :</p> + +<pre class="brush: html"><h1 class="coucou">Coucou !</h1> +<p class="coucou salut">Retrouvons-nous !</p> +<p class="salut">Et déplaçons des montagnes.</p> +</pre> + +<p>Nous allons appliquer une règle CSS à tous les éléments contenant la classe <code>coucou</code>. Pour transformer un sélecteur en sélecteur class, placez simplement un point devant le nom de la classe (de la même manière que nous avions mis un signe dièse dans le cas précédent). Nous utilisons ici la propriété {{cssxref("font-style")}} pour mettre le texte en italique.</p> + +<pre class="brush: css">.coucou { + font-style: italic; +}</pre> + +<p>En voici une autre pour tous les éléments avec la classe <code>salut</code>. Ici, nous utilisons la propriété {{cssxref("text-decoration")}} pour barrer le texte d'une ligne.</p> + +<pre class="brush: css">.salut { + text-decoration: line-through; +}</pre> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample('Le_sélecteur_class')}}</p> + +<h2 id="Prochaines_étapes">Prochaines étapes</h2> + +<p>Nous venons de voir les bases pour commencer en CSS. Vous pouvez maintenant en <a href="/fr/Apprendre/CSS/formatage_texte_CSS">apprendre davantage sur le formatage du texte</a> ou commencer à explorer <a href="/fr/docs/Web/CSS/Tutorials">nos tutoriels CSS</a> dès maintenant.</p> diff --git a/files/fr/conflicting/learn/css/building_blocks/selectors_9bc80fea302c91cd60fb72c4e83c83e9/index.html b/files/fr/conflicting/learn/css/building_blocks/selectors_9bc80fea302c91cd60fb72c4e83c83e9/index.html new file mode 100644 index 0000000000..9371d826b3 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/selectors_9bc80fea302c91cd60fb72c4e83c83e9/index.html @@ -0,0 +1,207 @@ +--- +title: Les sélecteurs +slug: CSS/Premiers_pas/Les_sélecteurs +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Building_blocks/Selectors +translation_of_original: Web/Guide/CSS/Getting_started/Selectors +--- +<p> </p> + +<p>Cette page explique comment appliquer des styles de manière sélective, et les priorités des différents types de sélecteurs.</p> + +<p>Vous ajouterez quelques attributs aux balises de votre document exemple, et vous utiliserez ces attributs dans votre feuille de style.</p> + +<h3 id="Information_:_les_s.C3.A9lecteurs" name="Information_:_les_s.C3.A9lecteurs">Information : les sélecteurs</h3> + +<p>CSS a sa propre terminologie pour décrire le langage CSS. Précédemment dans ce tutoriel, vous avez créé une ligne dans votre feuille de style comme ceci :</p> + +<div style="width: 30em;"> +<pre>strong {color: red;} +</pre> +</div> + +<p>Dans la terminologie CSS, toute cette ligne est une <em>règle</em>. Cette règle commence avec <code>strong</code>, qui est un <em>sélecteur</em>. Celui-ci sélectionne les éléments dans le DOM sur lesquels la règle va s'appliquer.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> + <caption>Plus de détails</caption> + <tbody> + <tr> + <td>La partie à l'intérieur des crochets courbes est la <em>déclaration</em>. + <p>Le mot-clé <code>color</code> est une <em>propriété</em>, et <code>red</code> est une <em>valeur</em>.</p> + + <p>Le point virgule après la valeur de propriété sépare celle-ci d'autres paires de propriétés/valeurs pour le même sélecteur.</p> + + <p>Ce tutoriel se réfère à un sélecteur comme <code>strong</code> comme à un sélecteur de <em>balise</em>. La spécification CSS s'y réfère comme à un sélecteur de <em>type</em>.</p> + </td> + </tr> + </tbody> +</table> + +<p><br> + Cette page du tutoriel donne plus de détails sur les sélecteurs utilisables dans les règles CSS. Outre les noms de balise, il est possible d'utiliser des valeurs d'attribut dans les sélecteurs. Cela permet au règles d'être plus spécifiques.</p> + +<p>Deux attributs ont un statut spécial pour CSS. Ce sont les attributs <code>class</code> et <code>id</code>.</p> + +<p>Utilisez l'attribut <code>class</code> dans une balise pour lui assigner une classe nommée. Vous pouvez choisir le nom qui vous convient pour cette classe.</p> + +<p>Dans votre feuille de style, entrez un point avant le nom de la classe lorsque vous l'utilisez dans un sélecteur.</p> + +<p>Utilisez l'attribut <code>id</code> dans une balise pour lui assigner un identifiant unique. Vous pouvez choisir le nom qui vous convient pour l'identifiant. Celui-ci doit cependant être unique au sein du document.</p> + +<p>Dans votre feuille de style, entrez un signe dièse (carré) avant l'identifiant lorsque vous l'utilisez dans un sélecteur.</p> + +<table style="background-color: #ffffee; border: 1px solid #3366bb; padding: 1em;"> + <caption>Exemples</caption> + <tbody> + <tr> + <td>Cette balise HTML a à la fois un attribut <code>class</code> et un attribut <code>id</code> : + <div style="width: 30em;"> + <pre> +<P class="clef" id="principale"> +</pre> + </div> + + <p>L'identifiant, <code>principale</code>, doit être unique dans le document, mais d'autres balises dans le document peuvent avoir le même nom de classe, <code>clef</code>.</p> + + <p>Dans une feuille de style CSS, cette règle rend tous les éléments de la classe <code>clef</code> verts. (Ils peuvent ne pas tous être des éléments <small>P</small> .)</p> + + <div style="width: 30em;"> + <pre> +.clef {color: green;} +</pre> + </div> + + <p>Cette règle rend l'élément avec l'identifiant <code>principale</code> gras :</p> + + <div style="width: 30em;"> + <pre> +#principale {font-weight: bolder;} +</pre> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Si plus d'une règle s'applique à un élément et spécifie la même propriété, CSS donne la priorité à la règle ayant le sélecteur le plus spécifique. Un sélecteur id est plus spécifique qu'un sélecteur de classe, qui lui-même est plus spécifique qu'un sélecteur de balise.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #3366bb; padding: 1em;"> + <caption>Plus de détails</caption> + <tbody> + <tr> + <td>Vous pouvez également combiner le sélecteurs, afin de créer un sélecteur plus spécifique. + <p>Par exemple, le sélecteur <code>.clef</code> sélectionne tous les éléments qui ont le nom de classe <code>clef</code>. Le sélecteur <code>p.clef</code> sélectionne seulement les éléments P qui ont le nom de classe <code>clef</code>.</p> + + <p>Vous n'êtes pas limité aux deux attributs spéciaux <code>class</code> et <code>id</code>. Vous pouvez spécifier d'autres attributs en utilisant des crochets droits. Par exemple, le sélecteur <code>{{ mediawiki.external('type=button') }}</code> sélectionne tous les éléments qui ont un attribut <code>type</code> avec la valeur <code>button</code>.</p> + + <p>Une prochaine page de ce tutoriel, (<a href="/fr/CSS/Premiers_pas/Tableaux" title="fr/CSS/Premiers_pas/Tableaux">Tableaux</a>) a des informations sur les sélecteurs complexes basés sur les relations.</p> + + <p>Pour une information complète sur les sélecteurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> dans la spécification CSS.</p> + </td> + </tr> + </tbody> +</table> + +<p><br> + Si la feuille de style a des règles conflictuelles et qui sont également spécifiques, alors CSS donne la priorité à la règle qui est définie plus tard dans la feuille de style.</p> + +<p>Lorsque vous avez un problème de conflit de règles, essayez de le résoudre en rendant une des règles plus spécifique, afin qu'elle aie la priorité. Si vous ne pouvez pas faire cela, essayez de déplacer l'une des règles plus près de la fin de la feuille de style pour lui donner la priorité.</p> + +<h3 id="Action_:_utilisation_des_s.C3.A9lecteurs_class_et_id" name="Action_:_utilisation_des_s.C3.A9lecteurs_class_et_id">Action : utilisation des sélecteurs class et id</h3> + +<p>Éditez votre fichier HTML, et dupliquez le paragraphe par copier-coller. Ajoutez ensuite des attributs id et class à la première copie, et un autre id à la seconde copie comme montré ci-dessous. Sinon, copiez et collez à nouveau l'entièreté du fichier :</p> + +<div style="width: 48em; color: gray;"> +<pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + <HEAD> + <TITLE>Document exemple</TITLE> + <LINK rel="stylesheet" type="text/css" href="style1.css"> + </HEAD> + <BODY> + <P <strong style="color: black;">id="premier"</strong>> + <STRONG <strong style="color: black;">class="carotte"</strong>>C</STRONG>ascading + <STRONG <strong style="color: black;">class="epinard"</strong>>S</STRONG>tyle + <STRONG <strong style="color: black;">class="epinard"</strong>>S</STRONG>heets + </P> + <strong style="color: black;"><P id="second"> + <STRONG>C</STRONG>ascading + <STRONG>S</STRONG>tyle + <STRONG>S</STRONG>heets + </P></strong> + </BODY> +</HTML> +</pre> +</div> + +<p>Éditez à présent votre fichier CSS. Remplacez l'entièreté de son contenu par :</p> + +<div style="width: 40em;"> +<pre>strong {color: red;} +.carotte {color: orange;} +.epinard {color: green;} +#premier {font-style: italic;} +</pre> +</div> + +<p>Actualisez dans votre navigateur et voyez le résultat :</p> + +<table style="border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> + +<p>Vous pouvez essayer d'ordonner différemment les lignes dans votre fichier CSS pour constater que leur ordre n'a aucune importance.</p> + +<p>Les sélecteurs de classe <code>.carotte</code> et <code>.epinard</code> ont priorité sur le sélecteur de balise <code>strong</code>.</p> + +<p>Le sélecteur d'id <code>#premier</code> a priorité sur les sélecteurs de classe et de balise.</p> + +<table style="background-color: #fffff4; border: 1px solid #3366bb; padding: 1em;"> + <caption>Challenges</caption> + <tbody> + <tr> + <td>Sans modifier votre fichier HTML, ajoutez une seule règle à votre fichier CSS qui garde la même couleur pour toutes les lettres initiales que précédemment, mais rend le reste du texte du second paragraphe bleu : + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + + <p>À présent, changez la règle que vous venez d'ajouter (sans rien changer d'autre), pour rendre le premier paragraphe bleu également :</p> + + <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> + +<p>Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a href="/Talk:fr/CSS/Premiers_pas/Les_sélecteurs" title="Talk:fr/CSS/Premiers_pas/Les_sélecteurs">page de discussion</a>.</p> + +<p>Votre feuille de style d'exemple commence à avoir l'air dense et compliquée. La page suivante décrit des façons de rendre CSS plus facile à lire : <strong><a href="/fr/docs/CSS/Premiers_pas/Des_CSS_lisibles" title="fr/CSS/Premiers_pas/Des_CSS_lisibles">Des CSS lisibles</a></strong></p> diff --git a/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html b/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..9fcc9dbd2d --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,602 @@ +--- +title: Tableaux +slug: CSS/Premiers_pas/Tableaux +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Building_blocks/Styling_tables +translation_of_original: Web/Guide/CSS/Getting_started/Tables +--- +<p> </p> +<p>Cette page présente des sélecteurs plus avancés, et certaines manières spécifiques de styler les tableaux.</p> +<p>Vous créerez un nouveau document contenant un tableau, et une feuille de style pour celui-ci.</p> +<h3 id="Information_:_d.27autres_s.C3.A9lecteurs" name="Information_:_d.27autres_s.C3.A9lecteurs">Information : d'autres sélecteurs</h3> +<p>CSS propose plusieurs manières de sélectionner des éléments sur base de leur relation avec d'autres éléments. Vous pouvez utiliser celles-ci pour créer des sélecteurs plus spécifiques.</p> +<p>Voici un résumé des sélecteurs basés sur les relations :</p> +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 10em;"><strong>Sélecteur</strong></td> + <td><strong>Sélectionne</strong></td> + </tr> + <tr> + <td><code>A E</code></td> + <td>Tout élément E qui est un <em>descendant</em> d'un élément A (c'est-à-dire un enfant, ou l'enfant d'un enfant, <em>etc</em>.)</td> + </tr> + <tr> + <td><code>A > E</code></td> + <td>Tout élément E qui est un enfant direct d'un élément A</td> + </tr> + <tr> + <td><code>E:first-child</code></td> + <td>Tout élément E qui est le premier enfant de son parent</td> + </tr> + <tr> + <td><code>B + E</code></td> + <td>Tout élément E qui est le <em>frère</em> d'un élément B (c'est-à-dire l'enfant suivant du même parent)</td> + </tr> + </tbody> +</table> +<p>Vous pouvez combiner ceux-ci pour exprimer des relations complexes.</p> +<p>Vous pouvez également utiliser le symbole <code>*</code> (astérisque) pour désigner « n'importe quel élément. »</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Un tableau HTML a un attribut <code>id</code>, mais ses lignes et cellules n'ont pas d'identifiants individuels : + <div style="width: 30em;"> + <pre class="eval"> +<TABLE id="data-table-1"> +... +<TR> +<TD>Préfixe</TD> +<TD>0001</TD> +<TD>par défaut</TD> +</TR> +... +</pre> + </div> + <p>Ces règles rendent la première cellule de chaque ligne en gras, et la seconde cellule de chaque ligne en largeur fixe. Elles affectent un tableau spécifique dans le document :</p> + <div style="width: 45em;"> + <p><code>#data-table-1 td:first-child {font-weight: bolder;}</code> <code>#data-table-1 td:first-child + td {font-family: monospace;}</code></p> + </div> + <p>Le résultat ressemble à ceci :</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table style="width: 18em; margin-right: 2em;"> + <tbody> + <tr> + <td><strong>Préfixe</strong></td> + <td><code>0001</code></td> + <td>par défaut</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Comme d'habitude, si vous rendez un sélecteur plus spécifique, vous augmentez sa priorité. + <p>Si vous utilisez ces techniques, vous évitez le besoin de spécifier des attributs <code>class</code> ou <code>id</code> sur une énorme quantité de balises dans votre document. Au lieu de cela, c'est CSS qui fait tout le travail.</p> + <p>Dans de grosses mises en pages où la vitesse est importante, vous pouvez rendre vos feuilles de style plus performantes en évitant les règles complexes qui dépendent des relations entre éléments.</p> + <p>Pour plus de détails sur les sélecteurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/selector.html">Selectors</a> dans la spécification CSS.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Information_:_les_tableaux" name="Information_:_les_tableaux">Information : les tableaux</h3> +<p>Un tableau est un arrangement d'informations dans une grille rectangulaire. Certains tableaux peuvent être complexes, et pour des tableaux complexes les résultats peuvent être différents selon le navigateur.</p> +<p>Lorsque vous concevez votre document, utilisez un tableau pour exprimer les relations entre les pièces d'information. Dans ce cas, cela n'a pas d'importance si différents navigateurs présentent les informations de manière légèrement différente, puisque leur signification reste claire.</p> +<p>N'utilisez pas les tableaux de manière inhabituelle pour produire des mises en page visuelles particulières. Les techniques présentées sur la page précédente (<a href="/fr/CSS/Premiers_pas/Mise_en_page" title="fr/CSS/Premiers_pas/Mise_en_page">Mise en page</a>) sont plus appropriées pour cela.</p> +<h4 id="Structure_d.27un_tableau" name="Structure_d.27un_tableau">Structure d'un tableau</h4> +<p>Dans un tableau, chaque élément d'information est affiché dans une <em>cellule</em>.</p> +<p>Une rangée horizontale de cellules forme une <em>ligne</em>.</p> +<p>Dans certains tableaux, les lignes peuvent être groupées. Un groupe spécial de lignes au début du tableau est un <em>en-tête</em> (header) de tableau. Un groupe spécial de lignes en fin de tableau est un <em>pied</em> (footer) de tableau. Les lignes principales sont le <em>corps</em> (body) du tableau, et peuvent également former des groupes.</p> +<p>Les cellules alignées verticalement forment une <em>colonne</em>, mais les colonnes ont une utilisation limitée en CSS.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Le tableau des sélecteurs en début de page contient dix cellules réparties en cinq lignes. + <p>La première ligne est l'en-tête. Les quatre autres lignes sont le corps du tableau. Il n'y a pas de pied de tableau.</p> + <p>Il y a deux colonnes.</p> + </td> + </tr> + </tbody> +</table> +<p><br> + Ce tutoriel couvre uniquement les tableaux simples, où les résultats sont relativement prévisibles. Dans un tableau simple, chaque cellule occupe uniquement une ligne et une colonne. Vous pouvez utiliser CSS pour des tableaux complexes ou les cellules s'étendent au travers de plus d'une ligne ou colonne, mais de telles tables dépassent le sujet de ce tutoriel basique.</p> +<h4 id="Bordures" name="Bordures">Bordures</h4> +<p>Les cellules n'ont pas de marge extérieure (margin).</p> +<p>Les cellules ont des bordures et des marges intérieures (padding). Par défaut, les bordures sont séparées par la valeur de la propriété <code>border-spacing</code> du tableau. Vous pouvez également supprimer tout à fait cet espace en définissant la propriété <code>border-collapse</code> du tableau à <code>collapse</code>.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Voici trois tableaux. + <p>Le tableau de gauche a un espacement entre les bordures de 0.5 em. Le tableau central a un espacement nul entre ses bordures. Dans le tableau de droite, cet espacement a été supprimé avec <code>collapse</code> :</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Trèfle</td> + <td style="border: 1px solid #c00; text-align: center;">Cœur</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Carreau</td> + <td style="border: 1px solid #c00; text-align: center;">Pique</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 2em;"> + <table style=""> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Trèfle</td> + <td style="border: 1px solid #c00; text-align: center;">Cœur</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Carreau</td> + <td style="border: 1px solid #c00; text-align: center;">Pique</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Trèfle</td> + <td style="border: 1px solid #c00; text-align: center;">Cœur</td> + </tr> + <tr> + <td style="border: 1px solid #c00; text-align: center;">Carreau</td> + <td style="border: 1px solid #c00; text-align: center;">Pique</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<h4 id="L.C3.A9gendes" name="L.C3.A9gendes">Légendes</h4> +<p>Une <em>légende</em> (caption) est un label qui s'applique à l'entièreté du tableau. Par défaut, elle est affichée en haut du tableau.</p> +<p>Pour la déplacer en bas, définissez sa propriété <code>caption-side</code> à <code>bottom</code> (en bas). La propriété est héritée, vous pouvez donc aussi la définir sur le tableau complet, ou un autre ancêtre de l'élément.</p> +<p>Pour styler le texte de la légende, utilisez n'importe laquelle des propriétés habituelles du texte.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Ce tableau a une légende placée en dessous : + <div style="width: 30em;"> + <pre class="eval"> +#demo-table > caption { + caption-side: bottom; + font-style: italic; + text-align: right; + } +</pre> + </div> + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <table> + <caption> + Suites</caption> + <tbody> + <tr> + <td> + <table style="border-collapse: collapse;"> + <tbody> + <tr> + <td style="border: 1px solid gray; text-align: center;">Trèfle</td> + <td style="border: 1px solid gray; text-align: center;">Cœur</td> + </tr> + <tr> + <td style="border: 1px solid gray; text-align: center;">Carreau</td> + <td style="border: 1px solid gray; text-align: center;">Pique</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<h4 id="Cellules_vides" name="Cellules_vides">Cellules vides</h4> +<p>Il est possible d'afficher des cellules vides (c'est-à-dire leurs bordures et fonds) en spéficiant <code>empty-cells: show;</code> pour l'élément <code>table</code>.</p> +<p>Vous pouvez les masquer en spécifiant <code>empty-cells: hide;</code>. Dans ce cas, si un élément parent a un fond, il sera visible à travers la cellule vide.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Ces tableaux ont un fond vert pâle. Leurs cellules ont un fond gris pâle et des bords gris foncé. + <p>Dans le tableau de gauche, la cellule vide est affichée. Dans celui de droite, celle-ci est masquée :</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td style="border: 1px solid #555; background-color: #eee;"> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Cœur</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Carreau</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Pique</td> + </tr> + </tbody> + </table> + </td> + <td style="padding-right: 6em;"> + <table style="background-color: #dfd;"> + <tbody> + <tr> + <td> </td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Cœur</td> + </tr> + <tr> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Carreau</td> + <td style="border: 1px solid #555; background-color: #eee; text-align: center;">Pique</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Pour des informations détaillées concernant les tableaux, consultez <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> dans la spécification CSS. + <p>Les informations qui s'y trouvent vont plus loin que ce tutoriel, mais elles ne couvrent pas les différences entre navigateurs qui peuvent affecter les tableaux complexes.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Action_:_habillage_d.27un_tableau" name="Action_:_habillage_d.27un_tableau">Action : habillage d'un tableau</h3> +<p>Créez un nouveau document HTML, <code>doc3.html</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Document exemple 3</TITLE> +<LINK rel="stylesheet" type="text/css" href="style3.css"> +</HEAD> +<BODY> + +<TABLE id="demo-table"> +<CAPTION>Les océans</CAPTION> + +<THEAD> +<TR> +<TH></TH> +<TH>Surface</TH> +<TH>Profondeur moyenne</TH> +</TR> +<TR> +<TH></TH> +<TH>millions de km<SUP>2</SUP></TH> +<TH>m</TH> +</TR> +</THEAD> + +<TBODY> +<TR> +<TH>Arctique</TH> +<TD>13 000</TD> +<TD>1 200</TD> +</TR> +<TR> +<TH>Atlantique</TH> +<TD>87 000</TD> +<TD>3 900</TD> +</TR> +<TR> +<TH>Pacifique</TH> +<TD>180 000</TD> +<TD>4 000</TD> +</TR> +<TR> +<TH>Indien</TH> +<TD>75 000</TD> +<TD>3 900</TD> +</TR> +<TR> +<TH>Antarctique</TH> +<TD>20 000</TD> +<TD>4 500</TD> +</TR> +</TBODY> + +<TFOOT> +<TR> +<TH>Total</TH> +<TD>361 000</TD> +<TD></TD> +</TR> +<TR> +<TH>Moyenne</TH> +<TD>72 000</TD> +<TD>3 800</TD> +</TR> +</TFOOT> + +</TABLE> + +</BODY> +</HTML> +</pre> +</div> +<p>Créez une nouvelle feuille de style, <code>style3.css</code>. Copiez et collez-y le code ci-dessous, en vous assurant de le faire défiler jusqu'en bas pour en obtenir la totalité :</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre>/*** Style pour doc3.html (Tables) ***/ + +#demo-table { + font: 100% sans-serif; + background-color: #efe; + border-collapse: collapse; + empty-cells: show; + border: 1px solid #7a7; + } + +#demo-table > caption { + text-align: left; + font-weight: bold; + font-size: 200%; + border-bottom: .2em solid #4ca; + margin-bottom: .5em; + } + + +/* règles de base partagées */ +#demo-table th, +#demo-table td { + text-align: right; + padding-right: .5em; + } + +#demo-table th { + font-weight: bold; + padding-left: .5em; + } + + +/* en-tête */ +#demo-table > thead > tr:first-child > th { + text-align: center; + color: blue; + } + +#demo-table > thead > tr + tr > th { + font-style: italic; + color: gray; + } + +/* taille des valeurs en exposant */ +#demo-table sup { + font-size: 75%; + } + +/* corps du tableau */ +#demo-table td { + background-color: #cef; + padding:.5em .5em .5em 3em; + } + +#demo-table tbody th:after { + content: " :"; + } + + +/* pied du tableau */ +#demo-table tfoot { + font-weight: bold; + } + +#demo-table tfoot th { + color: blue; + } + +#demo-table tfoot th:after { + content: " :"; + } + +#demo-table > tfoot td { + background-color: #cee; + } + +#demo-table > tfoot > tr:first-child td { + border-top: .2em solid #7a7; + } +</pre> +</div> +<p>Ouvrez le document dans votre navigateur. Il devrait être très semblable à ceci :</p> +<table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <p style="font: bold 200% sans-serif; text-align: left; border-bottom: .2em solid #4ca; margin: 0px 0px .5em 0px;">Les océans</p> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Surface</th> + <th style="padding-left: .5em; padding-right: .5em;">Profondeur moyenne</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">millions de km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctique :</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">13 000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">1 200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantique :</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">87 000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3 900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacifique :</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">180 000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4 000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indien :</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">75 000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">3 900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Antarctique :</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">20 000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em;">4 500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total :</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361 000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Moyenne :</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72 000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3 800</td> + </tr> + </tbody> + </table> + </div> + </div> + </td> + </tr> + </tbody> +</table> +<p>Comparez les règles dans la feuille de style avec le tableau tel qu'il est affiché pour vous assurer que vous comprenez les effets de chaque règle. Si vous en trouvez une où ce n'est pas clair, mettez-la en commentaire et actualisez dans votre navigateur pour voir ce qui se produit.</p> +<p>Voici quelques notes à propos de ce tableau :</p> +<ul> + <li>La légende (caption) se trouve à l'extérieur de la bordure du tableau.</li> + <li>Si une taille minimale de police est définie dans les options, elle peut affecter l'exposant dans km<sup>2</sup>.</li> + <li>Trois cellules sont vides. Deux d'entre-elles laissent le fond du tableau visible. La troisème a un fond et une bordure supérieure.</li> + <li>Les deux points sont ajoutés par la feuille de style.</li> +</ul> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; width: 100%;"> + <caption> + Challenges</caption> + <tbody> + <tr> + <td>Modifiez la feuille de style afin que le tableau ressemble à ceci : + <table style="border: 2px outset #36b; padding: 1em 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div> + <div style="border: 1px solid #7a7; background-color: #efe;"> + <table style="font: 100% sens-serif; background-color: #efe; border-collapse: collapse; text-align: right; padding-right: .5em;"> + <tbody> + <tr style="text-align: center; color: blue;"> + <th> </th> + <th>Surface</th> + <th style="padding-left: .5em; padding-right: .5em;">Profondeur moyenne</th> + </tr> + <tr style="font-style: italic; color: gray;"> + <th> </th> + <th style="padding-left: .5em; padding-right: .5em;">millions de km<sup>2</sup></th> + <th style="padding-left: .5em; padding-right: .5em;">m</th> + </tr> + <tr> + <th style="padding-right: .5em;">Arctique :</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">13 000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">1 200</td> + </tr> + <tr> + <th style="padding-right: .5em;">Atlantique :</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">87 000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3 900</td> + </tr> + <tr> + <th style="padding-right: .5em;">Pacifique :</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">180 000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4 000</td> + </tr> + <tr> + <th style="padding-right: .5em;">Indien :</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">75 000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">3 900</td> + </tr> + <tr> + <th style="padding-left: .5em; padding-right: .5em;">Antarctique :</th> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7;">20 000</td> + <td style="background-color: #cef; padding: .5em .5em .5em 3em; border: 1px solid #7a7; border-right: 0px;">4 500</td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Total :</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;">361 000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em; border-top: .2em solid #7a7;"> </td> + </tr> + <tr> + <th style="padding-right: .5em; color: blue;">Moyenne :</th> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">72 000</td> + <td style="background-color: #cee; padding: .5em .5em .5em 3em;">3 800</td> + </tr> + </tbody> + </table> + </div> + <p style="font: italic 100% sans-serif; text-align: right; border-top: .4em solid #4ca; margin: 1em 0px 0px 0px;">Les océans</p> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a href="/Talk:fr/CSS/Premiers_pas/Tableaux" title="Talk:fr/CSS/Premiers_pas/Tableaux">page de discussion</a>.</p> +<p>Ceci est la dernière page de ce tutoriel qui concerne les propriétés CSS et leurs valeurs. Pour un résumé complet des propriétés et valeurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/propidx.html">Full property table</a> dans la spécification CSS.</p> +<p>La page suivante revient sur le but et la structure des feuilles de style CSS : <strong><a href="/fr/docs/CSS/Premiers_pas/Médias" title="fr/CSS/Premiers_pas/Médias">Médias</a></strong>.</p> diff --git a/files/fr/conflicting/learn/css/building_blocks/values_and_units/index.html b/files/fr/conflicting/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..24952f7505 --- /dev/null +++ b/files/fr/conflicting/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,314 @@ +--- +title: Couleurs +slug: CSS/Premiers_pas/Couleurs +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors +translation_of_original: Web/Guide/CSS/Getting_started/Color +--- +<p> </p> +<p>Cette page donne plus de détails sur la manière de spécifier les couleurs en CSS.</p> +<p>Dans votre exemple de feuille de style, vous ajouterez des couleurs de fond.</p> +<h3 id="Information_:_les_couleurs" name="Information_:_les_couleurs">Information : les couleurs</h3> +<p>Dans ce tutoriel, jusqu'à présent, vous avez utilisé un nombre limité de couleurs nommées. CSS 2 définit 17 couleurs nommées en tout. Certains des noms peuvent ne pas êtres ce à quoi vous vous attendez :</p> +<table style="border: 0px; margin-left: 2em; text-align: right;"> + <tbody> + <tr> + <td> </td> + <td>black</td> + <td style="width: 2em; height: 2em; background-color: black;"> </td> + <td>gray</td> + <td style="width: 2em; height: 2em; background-color: gray;"> </td> + <td>silver</td> + <td style="width: 2em; height: 2em; background-color: silver;"> </td> + <td>white</td> + <td style="width: 2em; height: 2em; background-color: white; border: 1px dotted gray;"> </td> + </tr> + <tr> + <td>primaires</td> + <td>red</td> + <td style="width: 2em; height: 2em; background-color: red;"> </td> + <td>lime</td> + <td style="width: 2em; height: 2em; background-color: lime;"> </td> + <td>blue</td> + <td style="width: 2em; height: 2em; background-color: blue;"> </td> + </tr> + <tr> + <td>secondaires</td> + <td>yellow</td> + <td style="width: 2em; height: 2em; background-color: yellow;"> </td> + <td>aqua</td> + <td style="width: 2em; height: 2em; background-color: aqua;"> </td> + <td>fuchsia</td> + <td style="width: 2em; height: 2em; background-color: fuchsia;"> </td> + </tr> + <tr> + <td> </td> + <td>maroon</td> + <td style="width: 2em; height: 2em; background-color: maroon;"> </td> + <td>orange</td> + <td style="width: 2em; height: 2em; background-color: orange;"> </td> + <td>olive</td> + <td style="width: 2em; height: 2em; background-color: olive;"> </td> + <td>purple</td> + <td style="width: 2em; height: 2em; background-color: purple;"> </td> + <td>green</td> + <td style="width: 2em; height: 2em; background-color: green;"> </td> + <td>navy</td> + <td style="width: 2em; height: 2em; background-color: navy;"> </td> + <td>teal</td> + <td style="width: 2em; height: 2em; background-color: teal;"> </td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Votre navigateur peut supporter de nombreux autres noms de couleurs, comme : + <table style="border: 0px; margin: .5em 0px .5em 2em; text-align: right; background-color: inherit;"> + <tbody> + <tr> + <td>dodgerblue</td> + <td style="width: 2em; height: 2em; background-color: dodgerblue;"> </td> + <td>peachpuff</td> + <td style="width: 2em; height: 2em; background-color: peachpuff;"> </td> + <td>tan</td> + <td style="width: 2em; height: 2em; background-color: tan;"> </td> + <td>firebrick</td> + <td style="width: 2em; height: 2em; background-color: firebrick;"> </td> + <td>aquamarine</td> + <td style="width: 2em; height: 2em; background-color: aquamarine;"> </td> + </tr> + </tbody> + </table> + <p>Pour plus de détails et la liste complète, consultez : <a class="external" href="http://www.w3.org/TR/2003/CR-css3-color-20030514/#svg-color">SVG color keywords</a> dans le module CSS 3 Color. Faites attention à ne pas utiliser de noms de couleurs que le navigateur de vos lecteurs peut ne pas comprendre.</p> + </td> + </tr> + </tbody> +</table> +<p>Pour une palette plus étendue, vous pouvez spécifier les composantes rouges, vertes et bleues de la couleur désirée en utilisant un signe dièse (carré) suivi de trois chiffres + <i> + hexadécimaux</i> + dans l'intervalle 0 – 9, a – f. Les lettres a – f représentent les valeurs 10 – 15:</p> +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>noir</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000</code></td> + </tr> + <tr> + <td>rouge pur</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>vert pur</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#0f0</code></td> + </tr> + <tr> + <td>bleu pur</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#00f</code></td> + </tr> + <tr> + <td>blanc</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + </tbody> +</table> +<p>Pour la palette complète, spécifiez deux chiffres hexadécimaux pour chaque composante :</p> +<table style="border: 0px; margin-left: 2em;"> + <tbody> + <tr> + <td>noir</td> + <td style="width: 2em; height: 2em; background-color: #000;"> </td> + <td><code>#000000</code></td> + </tr> + <tr> + <td>rouge pur</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#ff0000</code></td> + </tr> + <tr> + <td>vert pur</td> + <td style="width: 2em; height: 2em; background-color: #0f0;"> </td> + <td><code>#00ff00</code></td> + </tr> + <tr> + <td>bleu pur</td> + <td style="width: 2em; height: 2em; background-color: #00f;"> </td> + <td><code>#0000ff</code></td> + </tr> + <tr> + <td>blanc</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#ffffff</code></td> + </tr> + </tbody> +</table> +<p>Il est généralement possible d'obtenir ces codes hexadécimaux à six chiffres dans les logiciels de dessin ou d'autres outils.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption> + Exemples</caption> + <tbody> + <tr> + <td>Avec un peu de pratique, vous pouvez ajuster les couleurs à trois chiffres à la main dans la plupart des cas : + <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> + <tbody> + <tr> + <td>Commencez avec du rouge pur :</td> + <td style="width: 2em; height: 2em; background-color: #f00;"> </td> + <td><code>#f00</code></td> + </tr> + <tr> + <td>Pour le rendre plus pâle, ajoutez un peu de vert et de bleu :</td> + <td style="width: 2em; height: 2em; background-color: #f77;"> </td> + <td><code>#f77</code></td> + </tr> + <tr> + <td>Pour qu'il soit plus orange, ajoutez un peu de vert supplémentaire :</td> + <td style="width: 2em; height: 2em; background-color: #fa7;"> </td> + <td><code>#fa7</code></td> + </tr> + <tr> + <td>Pour le rendre plus sombre, réduisez chacune des composantes :</td> + <td style="width: 2em; height: 2em; background-color: #c74;"> </td> + <td><code>#c74</code></td> + </tr> + <tr> + <td>Pour réduire la saturation, égalisez un peu les composantes :</td> + <td style="width: 2em; height: 2em; background-color: #c98;"> </td> + <td><code>#c98</code></td> + </tr> + <tr> + <td>Si vous les rendez exactement égales, vous obtenez du gris :</td> + <td style="width: 2em; height: 2em; background-color: #ccc;"> </td> + <td><code>#ccc</code></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <td>Pour un ton pastel comme du bleu pâle : + <table style="border: 0px; margin-left: 2em; background-color: #fffff4;"> + <tbody> + <tr> + <td>Commencez avec du blanc pur :</td> + <td style="width: 2em; height: 2em; background-color: #fff; border: 1px dotted gray;"> </td> + <td><code>#fff</code></td> + </tr> + <tr> + <td>Réduisez légèrement les autres composantes :</td> + <td style="width: 2em; height: 2em; background-color: #eef; border: 1px dotted gray;"> </td> + <td><code>#eef</code></td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Vous pouvez également spécifier une couleur à l'aide de valeurs RGB décimales dans l'intervalle 0 – 255, ou des pourcentages. + <p>Par exemple, ceci est marron (rouge sombre) :</p> + <div style="width: 24em;"> + <pre> +rgb(128, 0, 0) +</pre> + </div> + <p><br> + Pour plus de détails sur la manière de spécifier des couleurs, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#color-units">Colors</a> dans la spécification CSS.</p> + <p>Pour des informations sur l'utilisation des couleurs système comme celle des menus ou des bordures 3D, consultez <a class="external" href="http://www.w3.org/TR/CSS21/ui.html#system-colors">CSS2 System Colors</a> dans la spécification CSS.</p> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Propri.C3.A9t.C3.A9s_de_couleur" name="Propri.C3.A9t.C3.A9s_de_couleur">Propriétés de couleur</h4> +<p>Vous avez déjà utilisé la propriété <code>color</code> pour le texte.</p> +<p>Vous pouvez également utiliser <code>background-color</code> pour changer la couleur de fond de certains éléments.</p> +<p>Les fonds peuvent êtres définis à <code>transparent</code> pour enlever explicitement toute couleur, permettant de voir le fond de l'élément parent.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Les boîtes <b>Exemple</b> dans ce tutoriel utilisent cette couleur de fond jaune pâle : + <div style="width: 24em;"> + <pre> +background-color: #fffff4; +</pre> + </div> + <p>Les boîtes <b>Plus de détails</b> utilisent ce gris pâle :</p> + <div style="width: 24em;"> + <pre> +background-color: #f4f4f4; +</pre> + </div> + </td> + </tr> + </tbody> +</table> +<h3 id="Action_:_utilisation_des_codes_de_couleur" name="Action_:_utilisation_des_codes_de_couleur">Action : utilisation des codes de couleur</h3> +<p>Éditez votre fichier CSS. Effectuez le changement montré ici en gras pour donner aux lettres initiales un fond bleu pâle. (La mise en page et les commentaires dans votre fichier seront probablement différents du fichier montré ici. Conservez la mise en page et les commentaires de la manière qui vous convient.)</p> +<div style="width: 32em;"> + <pre class="eval">/*** Tutoriel CSS : page des couleurs ***/ + +/* police de la page */ +body {font: 16px "Comic Sans MS", cursive;} + +/* paragraphes */ +p {color: blue;} +#premier {font-style: italic;} + +/* lettres initiales */ +strong { + color: red; + <strong>background-color: #ddf;</strong> + font: 200% serif; + } + +.carotte {color: red;} +.epinard {color: green;} +</pre> +</div> +<p>Actualisez dans votre navigateur pour voir le résultat :</p> +<table> + <tbody> + <tr> + <td style="font: italic 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</td> + </tr> + <tr> + <td style="font: 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 100%;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>Dans votre fichier CSS, changez tous les noms de couleur en codes hexadécimaux à trois chiffres sans affecter le résultat. + <p>(Ceci ne peut pas être fait exactement, mais vous pouvez arriver tout près. Pour que ce soit exact, vous aurez besoin des codes à six chiffres et de regarder dans la spécification CSS ou utiliser un outil graphique pour obtenir les valeurs précises.)</p> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Votre document d'exemple et votre feuille de style séparent strictement le contenu du style.</p> +<p>La page suivante explique comment vous pouvez faire des exceptions à cette séparation stricte : <b><a href="/fr/docs/CSS/Premiers_pas/Contenu">Contenu</a></b>.</p> diff --git a/files/fr/conflicting/learn/css/css_layout/index.html b/files/fr/conflicting/learn/css/css_layout/index.html new file mode 100644 index 0000000000..f8d9872975 --- /dev/null +++ b/files/fr/conflicting/learn/css/css_layout/index.html @@ -0,0 +1,373 @@ +--- +title: Mise en page +slug: CSS/Premiers_pas/Mise_en_page +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/CSS_layout +translation_of_original: Web/Guide/CSS/Getting_started/Layout +--- +<p> </p> +<p>Cette page présente plusieurs manières d'ajuster la mise en page de votre document.</p> +<p>Vous modifierez la mise en page de votre document exemple...</p> +<h3 id="Information_:_mise_en_page" name="Information_:_mise_en_page">Information : mise en page</h3> +<p>Vous pouvez utiliser CSS pour spécifier de nombreux effets visuels changeant la mise en page de votre document. Certaines de ces techniques sont très avancées et dépassent de loin le niveau de tutoriel basique.</p> +<p>Lorsque vous réalisez une mise en page qui doit apparaître d'une manière similaire dans de nombreux navigateurs, votre feuille de style interagit avec le style par défaut du navigateur et le moteur de rendu de manières qui peuvent s'avérer complexes. Ce sujet n'est pas non plus couvert par ce tutoriel.</p> +<p>Cette page décrit certaines techniques simples que vous pouvez essayer.</p> +<h4 id="Structure_du_document" name="Structure_du_document">Structure du document</h4> +<p>Si vous voulez contrôler la mise en page de votre document, il peut être nécessaire de changer sa structure.</p> +<p>Le langage de balisage de votre document peut disposer de balises générales créant une certaine structure. Par exemple, dans HTML vous pouvez utiliser la balise <code>DIV</code> pour créer une telle structure.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Dans votre document d'exemple, les paragraphes numérotés sous le second titre n'ont aucun conteneur propre. + <p>Votre feuille de style ne peut pas dessiner une bordure autour de ces paragraphes, puisqu'il n'y a pas d'élément qui peut être spécifié dans le sélecteur.</p> + <p>Pour régler ce problème structurel, vous pouvez ajouter une balise <code>DIV</code> autour des paragraphes. Cette balise sera rendue unique en étant identifiée par un attribut <code>id</code> :</p> + <div style="width: 40em; color: gray;"> + <pre class="eval"> +<H3 class="numerote">Paragraphes numérotés</H3> +<strong style="color: black;"><DIV id="numerote"></strong> +<P class="numerote">Lorem ipsum</P> +<P class="numerote">Dolor sit</P> +<P class="numerote">Amet consectetuer</P> +<P class="numerote">Magna aliquam</P> +<P class="numerote">Autem veleum</P> +<strong style="color: black;"></DIV></strong> +</pre> + </div> + <p>À présent, votre feuille de style peut utiliser une règle pour ajouter des bordures autour des deux listes.</p> + <div style="width: 30em;"> + <pre class="eval"> +ul, #numerote { + border: 1em solid #69b; + padding-right:1em; + } +</pre> + </div> + <p>Le résultat devrait ressembler à ceci :</p> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> + <div style="border: 12px solid #69b; margin-bottom: 16px; padding: 1em;"> + <ul style=""> + <li>Arctique</li> + <li>Atlantique</li> + <li>Pacifique</li> + <li>Indien</li> + <li>Antarctique</li> + </ul> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Paragraphes numérotés</p> + <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;"> + <p><b>1 : </b>Lorem ipsum</p> + <p><b>2 : </b>Dolor sit</p> + <p><b>3 : </b>Amet consectetuer</p> + <p><b>4 : </b>Magna aliquam</p> + <p><b>5 : </b>Autem veleum</p> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<h4 id="Unit.C3.A9s_de_mesure" name="Unit.C3.A9s_de_mesure">Unités de mesure</h4> +<p>Jusqu'à présent, dans ce tutoriel, nous avont spécifié les tailles en pixels (<code>px</code>). Ceux-ci sont appropriés pour certains usages sur un dispositif d'affichage comme un écran d'ordinateur, mais dès que l'utilisateur change la taille de police, votre mise en page peut être affectée négativement.</p> +<p>Dans de nombreux cas il est préférable de spécifier les tailles en pourcentages ou en ems (<code>em</code>). Un em est défini comme la taille de police actuelle (théoriquement la largeur d'une lettre m). Lorsque l'utilisateur change la taille de police, votre mise en page s'ajustera donc automatiquement.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>La bordure à gauche de ce texte a son épaisseur spécifiée en pixels. La bordure de droite a son épaisseur spécifiée en ems. + <p>Dans votre navigateur, changez la taille de police pour observer la façon dont la bordure de droite s'ajuste, mais pas celle de gauche :</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <div style=""> + Veuillez me redimensionner</div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Pour d'autres périphériques, d'autres unités de longueur seront plus appropriées. + <p>Plus d'informations à ce sujet sont disponibles dans une prochaine page de ce tutoriel.</p> + <p>Pour plus de détails sur les valeurs et les unités que vous pouvez utiliser, consultez <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> dans la spécification CSS.</p> + </td> + </tr> + </tbody> +</table> +<h4 id="Alignement_du_texte" name="Alignement_du_texte">Alignement du texte</h4> +<p>Deux propriétés spécifient la manière dont le contenu d'un élement est aligné. Vous pouvez les utiliser pour des ajustements simples de la mise en page :</p> +<ul> + <li><code>text-align</code></li> +</ul> +<dl> + <dd> + Aligne le contenu. Utiilisez une de ces valeurs : <code>left</code> (à gauche), <code>right</code> (à droite), <code>center</code> (centré), <code>justify</code> (justifié)</dd> +</dl> +<ul> + <li><code>text-indent</code></li> +</ul> +<dl> + <dd> + Donne une certaine retrait (indentation) au contenu, de la largeur spécifiée.</dd> +</dl> +<p>Ces propriétés s'appliquent à tout contenu semblable à du texte dans l'élément, pas uniquement au texte proprement dit. N'oubliez pas qu'elles sont héritées par les enfants de l'élément, ce qui peut vous obliger à les désactiver explicitement dans les éléments enfants pour éviter certains résultats surprenants.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Pour centrer les titres : + <div style="width: 30em;"> + <pre class="eval"> +h3 { + border-top: 1px solid gray; + text-align: center; + } +</pre> + </div> + <p>Ce qui donne :</p> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray; text-align: center;">(A) Les océans</p> + </td> + </tr> + </tbody> + </table> + <p>Dans un document HTML, le contenu que vous voyez sous un titre n'est pas structurellement contenu par ce titre. Par conséquent, lorsque vous alignez un titre de cette manière, les balises situées en dessous n'héritent pas du style.</p> + </td> + </tr> + </tbody> +</table> +<h4 id="Les_.C3.A9l.C3.A9ments_flottants" name="Les_.C3.A9l.C3.A9ments_flottants">Les éléments flottants</h4> +<p>La propriété <code>float</code> force un élément à se placer à gauche ou à droite. C'est une manière simple de contrôler sa position et sa taille.</p> +<p>Le reste du contenu du document s'écoule normalement autour de l'élément flottant. Vous pouvez contrôler ceci à l'aide de la propriété <code>clear</code> sur d'autres éléments pour les désolidariser des éléments flottants et les ramener en dessous.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Dans votre document d'exemple, les listes s'étalent sur toute la largeur de la fenêtre. Vous pouvez les en empêcher en les faisant flotter à gauche. + <p>Pour que les titres restent en place, vous devez également spécifier qu'ils resteront à l'écart des éléments flottants à leur gauche :</p> + <div style="width: 30em;"> + <pre class="eval"> +ul, #numerote {float: left;} +h3 {clear: left;} +</pre> + </div> + <p>Le résultat devrait ressembler à ceci :</p> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;"> + <ul style=""> + <li style="">Arctique</li> + <li style="">Atlantique</li> + <li style="">Pacifique</li> + <li style="">Indien</li> + <li style="">Antarctique</li> + </ul> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Paragraphes numérotés</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;"> + <p><b>1 : </b>Lorem ipsum</p> + <p><b>2 : </b>Dolor sit</p> + <p><b>3 : </b>Amet consectetuer</p> + <p><b>4 : </b>Magna aliquam</p> + <p><b>5 : </b>Autem veleum</p> + </div> + </td> + </tr> + </tbody> + </table> + <p>(Une petite marge intérieure est nécessaire à droite des boîtes, là où la bordure est trop proche du texte.)</p> + </td> + </tr> + </tbody> +</table> +<h4 id="Positionnement" name="Positionnement">Positionnement</h4> +<p>Vous pouvez spécifier la position d'un élément de quatre manières différentes à l'aide de la propriété <code>position</code> et de l'une des valeurs suivantes.</p> +<p>L'utilisation de ces propriétés peut être très avancée. Il est cependant possible de les utiliser de manière simple — c'est pourquoi elles sont mentionnées dans ce tutoriel basique. Mais leur utilisation dans des mises en page complexes peut s'avérer difficile.</p> +<ul> + <li><code>relative</code></li> +</ul> +<dl> + <dd> + La position de l'élément est déplacée relativement à sa position normale.</dd> + <dd> + Utilisez ceci pour déplacer un élément d'une certaine distance spécifiée. Dans certains cas, vous pouvez aussi utiliser les marges de l'élément pour obtenir le même effet.</dd> +</dl> +<ul> + <li><code>fixed</code></li> +</ul> +<dl> + <dd> + La position de l'élément est fixée.</dd> + <dd> + Spécifie la position de l'élément relativement à la fenêtre du document. Même si le reste du document défile, l'élément reste en place.</dd> +</dl> +<ul> + <li><code>absolute</code></li> +</ul> +<dl> + <dd> + La position de l'élément est fixée relativement à un élément parent.</dd> + <dd> + Cela fonctionnera uniquement lorsque l'élément parent est lui-même positionné avec <code>relative</code>, <code>fixed</code> ou <code>absolute</code>.</dd> +</dl> +<dl> + <dd> + Vous pouvez rendre n'importe quel élément parent utilisable pour ceci en lui spécifiant une <code>position: relative;</code> sans par ailleurs lui spécifier aucun déplacement.</dd> +</dl> +<ul> + <li><code>static</code></li> +</ul> +<dl> + <dd> + La valeur par défaut. Utilisez cette valeur pour désactiver explicitement les autres sortes de positionnement.</dd> +</dl> +<p>En complément de ces valeurs de la propriété <code>position</code> (à l'exception de <code>static</code>), spécifiez une ou plusieurs de ces propriétés : <code>top</code> (haut), <code>right</code> (droite), <code>bottom</code> (bas), <code>left</code> (gauche), <code>width</code> (largeur), <code>height</code> (hauteur) pour identifier où l'élément doit se positionner, et éventuellement sa taille.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Pour positionner deux éléments l'un au dessus de l'autre, créez un élément parent conteneur avec les deux éléments à l'intérieur de celui-ci : + <div style="width: 30em;"> + <pre class="eval"> +<DIV id="parent-div"> +<P id="forward">/</P> +<P id="back">\</P> +</DIV> +</pre> + </div> + <p>Dans votre feuille de style, rendez la position de l'élément parent <code>relative</code>. Il n'est pas nécessaire de spécifier un déplacement. Rendez ensuite la position des enfants <code>absolute</code> :</p> + <div style="width: 30em;"> + <pre> +#parent-div { + position: relative; + font: bold 200% sans-serif; + } + +#forward, #back { + position: absolute; + margin:0px; + top: 0px; + left: 0px; + } + +#forward { + color: blue; + } + +#back { + color: red; + } +</pre> + </div> + <p>Le résultat ressemble à ceci, avec la barre oblique inversée par dessus l'autre barre oblique :</p> + <div style="position: relative; left: .33em; font: bold 300% sans-serif;"> + <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p> + <p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p> + </div> + <table style="border: 2px outset #36b; padding: 1em; width: 30em; height: 5em; background-color: white;"> + <tbody> + <tr> + <td> </td> + </tr> + </tbody> + </table> + <p> </p> + </td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>L'ensemble des informations sur le positionnement prend deux chapitres entiers et assez complexes dans la spécification CSS : <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a> et <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>. + <p>Si vous réalisez des feuilles de style devant fonctionner dans de nombreux navigateurs, vous devrez aussi prendre en compte les différences dans la manière dont ceux-ci interprètent le standard, voire les erreurs présentes dans certaines versions particulières de certains d'entre-eux.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Action_:_sp.C3.A9cification_d.27une_mise_en_page" name="Action_:_sp.C3.A9cification_d.27une_mise_en_page">Action : spécification d'une mise en page</h3> +<p>Modifiez vos exemples de document et de feuille de style à l'aide des exemples ci-dessus dans les sections <b>Structure du document</b> et <b>Éléments flottants</b>.</p> +<p>Dans l'exemple des éléments flottants, ajoutez une marge intérieure (padding) pour séparer le texte de la bordure de droite de 0.5 em.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>Modifiez votre document en ajoutant cette balise près de la fin, juste avant <code></BODY></code> + <pre> +<IMG id="fixed-pin" src="punaise-jaune.png" alt="Punaise jaune"> +</pre> + <p>Si vous n'avez pas téléchargé l'image plus tôt dans ce tutoriel, téléchargez-la maintenant :</p> + <table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:punaise-jaune.png"></td> + </tr> + </tbody> + </table> + <p>Essayez de deviner où l'image apparaîtra dans votre document. Actualisez dans votre navigateur pour voir si vous aviez raison.</p> + <p>Ajoutez une règle à votre feuile de style qui fixe l'image en haut à droite de votre document.</p> + <p>Actualisez dans votre navigateur et réduisez la taille de la fenêtre. Vérifiez que l'image reste en haut à droite même lorsque vous faites défiler votre document :</p> + <div style="position: relative; width: 29.5em; height: 18em;"> + <div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;"> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) Les océans</p> + <div style="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;"> + <ul style=""> + <li style="">Arctique</li> + <li style="">Atlantique</li> + <li style="">Pacifique</li> + <li style="">Indien</li> + <li style="">Antarctique</li> + </ul> + </div> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Paragraphes numérotés</p> + <div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;"> + <p><b>1 : </b>Lorem ipsum</p> + <p><b>2 : </b>Dolor sit</p> + <p><b>3 : </b>Amet consectetuer</p> + <p><b>4 : </b>Magna aliquam</p> + <p><b>5 : </b>Autem veleum</p> + </div> + <p style=""> </p> + <div style="position: absolute; top: 2px; right: 0px;"> + <img alt="Punaise jaune"></div> + </div> + </div> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Si vous avez eu des difficultés à comprendre cette page, ou avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a>page de discussion</a>.</p> +<p>Vous avez presque couvert tous les sujets de ce tutoriel CSS basique. La page suivante décrit des sélecteurs plus avancés pour les règles CSS, et certaines manières spécifiques de styler des tableaux : <b><a href="/fr/docs/CSS/Premiers_pas/Tableaux">Tableaux</a></b>.</p> diff --git a/files/fr/conflicting/learn/css/css_layout/introduction/index.html b/files/fr/conflicting/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..526af5a0b0 --- /dev/null +++ b/files/fr/conflicting/learn/css/css_layout/introduction/index.html @@ -0,0 +1,404 @@ +--- +title: La disposition en CSS +slug: Apprendre/CSS/Introduction_à_CSS/La_disposition +tags: + - Apprendre + - CSS +translation_of: Learn/CSS/CSS_layout/Introduction +translation_of_original: Learn/CSS/Basics/Layout +--- +<p>{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}</p> + +<p class="summary"><span class="seoSummary">Pour organiser un document en positionnant ses éléments pour que la forme corresponde aux spécifications, on utilisera différentes propriétés CSS afin d'organiser la disposition des élément.</span> CSS fournit de nombreux mécanismes pour organiser la disposition du contenu d'un document et les techniques modernes sont suffisamment complexes pour être décrites dans des articles séparés. Dans cet article, nous verrons les techniques de base, utilisées depuis plusieurs années.</p> + +<p>Pour organiser correctement la disposition d'un document avec CSS, il y a quelques notions qu'il est préférable de connaître. Le concept le plus important est le flux du texte {{Glossary("HTML")}} et les façons dont on peut le modifier. Ces concepts clés sont essentiels et tous les mécanismes liés à la disposition feront référence à ce qui est expliqué ici..</p> + +<h2 id="Le_flux">Le flux</h2> + +<p>Simplifié à l'extrême, un document HTML est un document texte organisé avec des {{Glossary("balise","balises")}}. Dans un tel document, le texte « coule » sur les différentes lignes. Autrement dit, le texte est affiché dans le sens de lecture (de gauche à droite pour les langages latins comme le français ou l'italien) et est fragmenté automatiquement pour passer à la ligne à chaque fois que le texte atteint le bord du document.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg" style="height: auto; max-width: 450px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg#large" style="height: auto; max-width: 450px;"></p> + +<p>Chaque {{Glossary("élément")}} du document pourra modifier ce flux de texte :</p> + +<ul> + <li>Certains éléments suivront simplement le flux, comme s'ils n'existaient pas</li> + <li>Certains éléments pourront forcer le passage à la ligne, que le texte ait atteint la limite du document ou non</li> + <li>Certains éléments pourront créer un nouveau flux de texte pour leur contenu, flux indépendant du flux de texte « extérieur ».</li> +</ul> + +<h3 id="Les_catégories_d'affichage_des_éléments">Les catégories d'affichage des éléments</h3> + +<p>CSS est utilisé pour définir la façon dont un élément HTML se comporte dans ce flux et comment il s'y inscrit. Le comportement d'un élément est défini avec la propriété {{cssxref('display')}}. Cette propriété peut prendre plusieurs valeurs mais voyons ici les quatre valeurs les plus importantes :</p> + +<dl> + <dt><code>none</code></dt> + <dd>Cette valeur retire l'élément du flux, comme si l'élément et son contenu n'existaient pas.</dd> + <dt><code>inline</code></dt> + <dd>Cette valeur rend l'élément transparent au sens où il s'inscrit dans le flux de texte global, il est donc associé au texte l'environnant.</dd> + <dt><code>block</code></dt> + <dd>Cette valeur cassera le flux de texte pour insérer l'élément. Cela provoquera donc un saut de ligne avant et après. Le contenu de cet élément ne fait donc pas partie du flux global et suit donc les contraintes de l'élément définies par <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîte</a>.</dd> + <dt><code>inline-block</code></dt> + <dd>Cette valeur est en quelque sorte un intermédiaire entre <code>inline</code> et <code>block</code>. Comme avec <code>inline</code>, les boîtes seront placées dans le flux global mais , comme avec <code>block</code>, le contenu ne fera pas partie du texte environnant..</dd> +</dl> + +<p>Prenons un exemple.</p> + +<p>Voici le code HTML qui sera utilisé :</p> + +<pre class="brush: html"><p class="none"> + 1. Je suis un chat noir, + <span>qui marche sous l'échelle </span> + et qui casse des miroirs. +</p> + +<p class="inline"> + 2. Je suis un chat noir, + <span>qui marche sous l'échelle </span> + et qui casse des miroirs. +</p> + +<p class="block"> + 3. Je suis un chat noir, + <span>wqui marche sous l'échelle </span> + et qui casse des miroirs. +</p> + +<p class="inline-block"> + 4. Je suis un chat noir, + <span>qui marche sous l'échelle </span> + et qui casse des miroirs. +</p> +</pre> + +<p>On appliquera la feuille de style CSS suivante :</p> + +<pre class="brush: css">span { + width: 5em; + background: yellow; +} + +.none span { display: none; } +.inline span { display: inline; } +.block span { display: block; } +.inline-block span { display: inline-block; }</pre> + +<p>Cela fournira le résultat suivant :</p> + +<p>{{EmbedLiveSample("Les_catégories_d'affichage_des_éléments", '100%', '300px')}}</p> + +<h2 id="Modifier_le_flux">Modifier le flux</h2> + +<p>En utilisant la propriété <code>display</code>, vous pouvez déjà modifier le flux. Il est toutefois possible d'aller plus loin.</p> + +<h3 id="La_disposition_du_texte">La disposition du texte</h3> + +<p>En fin de compte, un document n'est qu'un long flux de texte et CSS fournit de nombreuses propriétés pour gérer la disposition du texte. La disposition du texte regroupe tout ce qui touche aux règles des sauts de ligne et à la façon dont le texte est positionné par rapport à la ligne de base naturelle.</p> + +<p>Ces propriétés sont : {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}} et {{cssxref("word-wrap")}}.</p> + +<p>À l'exception de <code>text-align</code> et de <code>text-indent</code>, les autres propriétés ont des effets plutôt subtils sur le texte. Quant à <code>vertical-align</code>, il est souvent utilisé avec des boîtes en mode <code>inline-block</code>.</p> + +<p>Là encore, un exemple vaut mieux qu'un long discours.</p> + +<p>HTML :</p> + +<pre class="brush: html"><p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p> +<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p> +</pre> + +<p>CSS :</p> + +<pre class="brush: css">.format { + /* On « tire » la première ligne sur + une distance de 2em */ + text-indent: -2em; + + /* Il faut compenser l'indentation négative + si on veut éviter que du texte saute et + pour garder l'ensemble du texte dans la + boîte de l'élément */ + padding-left: 2em; + + /* Le texte est aligné par rapport aux deux + bords et l'espace entre les mots est ajusté + pour le remplissage de la ligne */ + text-align: justify; + + /* La dernière ligne de texte du bloc est + centrée*/ + -moz-text-align-last: center; + text-align-last: center; + + /* Plutôt que le saut de ligne se fasse entre deux mots, + il peut être fait en découpant un mot, selon les règles + de la langue utilisée. Cela permet de découper le texte + clairement avec un trait d'union. Si cela ne vous + importe pas, vous pouvez utiliser word-break ou + word-wrap à la place */ + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +}</pre> + +<div class="note"> +<p><strong>Note :</strong> Comme vous avez pu le voir, certaines propriétés sont écrites plusieurs fois avec un préfixe. Certaines propriétés sont expérimentales pour certains navigateurs et doivent donc être préfixées, c'est une bonne pratique que de les utiliser préfixées tant qu'elles sont expérimentales, tout en fournissant le nom de la propriété standard à la fin afin d'avoir la meilleure rétrocompatibilité possible.</p> +</div> + +<p>Le résultat obtenu sera :</p> + +<p>{{EmbedLiveSample('La_disposition_du_texte', '100%', '350')}}</p> + +<div class="note"> +<p><strong>Note :</strong> L'astuce utilisée pour compenser l'indentation négative est une astuce assez courante. Tout propriété qui accepte une longueur peut accepter une valeur négative. En jouant avec les valeurs négatives et en les compensant avec d'autres propriétés, il est possible de produire des effets visuels très intéressants, notamment quand on manipule les propriétés liées au modèle de boîte.</p> +</div> + +<h3 id="Le_flottement">Le flottement</h3> + +<p>C'est une chose que de gérer du texte mais on va également vouloir positionner une boîte dans le document. Pour commencer, il faut gérer les boîtes flottantes. Les boîtes flottantes sont toujours attachées au flux global de texte mais le texte « coulera » autour. Si cela vous paraît, prenons un exemple.</p> + +<h4 id="Le_flottement_simple">Le flottement simple</h4> + +<p>HTML :</p> + +<pre class="brush: html"><div> + <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p> + <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p> +</div></pre> + +<p>CSS :</p> + +<pre class="brush: css">.excerpt { + /* Une boîte flottante agira comme un bloc + quelle que soit la valeur de display */ + display: block; + + /* La boîte flottera à gauche ce qui signifie + qu'elle sera sur la partie gauche du bloc + englobant et que le texte « coulera » sur sa + droite. */ + float: left; + + /* Il est nécessaire de déclarer une largeur pour + une boîte flottante. Si on ne le fait pas, la + largeur sera calculée automatiquement et occupera + autant d'espace que possible. Cela aurait eu le + même effet qu'un bloc ordinaire. */ + width: 40%; + + /* On définit une marge à droite et en bas pour éviter + que le texte qui flotte autour soit collé à celui de + la boîte */ + margin: 0 1em 1em 0; + + /* On rend la boîte flottante plus visible avec une + oucleur d'arrière-plan */ + background: lightgrey; + + /* Puisque l'arrière-plan est opaque, on ajoute un écart + entre le contenu et les bords de la boîte */ + padding: 1em; +}</pre> + +<p>Ces éléments permettront d'avoir :</p> + +<p>{{ EmbedLiveSample('Le_flottement_simple', '100%', '280') }}</p> + +<h4 id="Organiser_une_disposition_avec_le_flottement">Organiser une disposition avec le flottement</h4> + +<p>La méthode précédente est simple et illustre comment manipuler le flux. Il est possible d'aller plus loin et d'organiser l'ensemble de la disposition du document avec. Les boîtes flottantes dans une direction donnée s'empilent horizontalement, cela permet de créer très facilement des lignes de boîtes. Les boîtes qui sont des blocs forment s'empilent elles sous forme de colonnes.</p> + +<p>Là encore, illustrons le point avec un exemple.</p> + +<p>HTML :</p> + +<pre class="brush: html"><div class="layout"> + <div class="row"> + <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p> + <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p> + </div> + <div class="row"> + <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p> + </div> + <div class="row"> + <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p> + <p class="cell size33"> + "Ding, dong!"<br> + "A quarter past," said Scrooge, counting.<br> + "Ding, dong!"<br> + "Half-past!" said Scrooge.<br> + "Ding, dong!"<br> + "A quarter to it," said Scrooge. + </p> + <p class="cell size33"> + "Ding, dong!"<br> + "The hour itself," said Scrooge, triumphantly, "and nothing else!"<br> + He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn. + </p> + </div> +</div></pre> + +<p>CSS :</p> + +<pre class="brush: css">/* Le conteneur principal pour la disposition */ +.layout { + /* On ajoute un arrière-plan pour le rendre + visible */ + background: lightgrey; + + /* On ajoute un léger interstice pour harmoniser + la distance entre le contenu des cellules et + la bordure du conteneur principal */ + padding : 0.5em; +} + +/* Ici, on empêche les boîtes flottantes de + dépasser d'un conteneur (ce qui peut arriver + si le conteneur est vide car il aura alors + une hauteur nulle). Avec overflow + hidden, la boîte flottante ne passera pas à + travers et la boîte parente sera agrandie + pour éviter un dépassement de la boîte. */ +.row { + overflow: hidden; +} + +/* Chaque cellule sera une boîte flottante à gauche */ +.cell { + float : left; + + /* On ajoute du padding pour créer un écart visuel + entre les cellules */ + padding : 0.5em; + + /* Étant donné qu'on ajoute du padding, il faut + s'assurer que cela ne touchera pas la largeur + de la boîte. */ + box-sizing: border-box; + + /* Comme la marge ne peut pas être contrôlée par + la propriété box-sizing, on s'assure d'en + avoir aucune appliquée ici. */ + margin : 0; +} + +/* Voici les tailles appliquées aux boîtes */ +.size33 { width: 33%; } /* Pas un tiers mais presque */ +.size50 { width: 50%; } /* Une moitié */ +.size100 { width: 100%; } /* Une ligne */</pre> + +<p>Cela donnera le résultat suivant :</p> + +<p>{{EmbedLiveSample('Organiser_une_disposition_avec_le_flottement', '100%', '520')}}</p> + +<p>De nombreux <em>frameworks</em> CSS utilisent ces méthodes de boîtes flottantes. C'est une technique robuste et connue mais qui a ses limites : tout doit être géré avec le flux, il n'est pas possible de gérer un ordre arbitraire pour les boîtes, de gérer des dimensionnements variables et il est impossible de centrer verticalement des éléments. Nous vous encourageons à poursuivre la réflexion, <a href="http://www.positioniseverything.net/articles/onetruelayout/">les boîtes flottantes sont étudiées depuis longtemps (article en anglais)</a> et constituent une des solutions les plus robustes pour gérer une disposition simple, compatible avec les navigateurs historiques.</p> + +<p>Si vous souhaitez en savoir plus sur les subtilités des boîtes flottantes, nous vous invitons à lire <em><a href="https://css-tricks.com/all-about-floats/">All about float</a></em> (en anglais) par Chris Coyer.</p> + +<h3 id="Le_positionnement">Le positionnement</h3> + +<p>Si les boîtes flottantes font partie du flux, il existe un autre mécanisme qui permet d'organiser une disposition en extrayant les boîtes du flux : le positionnement CSS. Le positionnement fonctionne en définissant un contexte de positionnement grâce à la propriété {{cssxref("position")}} puis en permettant aux boites de se positionner en utilisant les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}.</p> + +<p>La propriété {{cssxref("position")}} peut prendre quatre valeurs différentes :</p> + +<dl> + <dt><code>static</code></dt> + <dd>La valeur par défaut pour tous les éléments : ils font partie du flux et on ne définit pas un contexte de positionnement spécifique.</dd> + <dt><code>relative</code></dt> + <dd>Avec cette valeur, les éléments font toujours partie du flux mais peuvent être déplacés visuellement avec les valeurs des propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Ces propriétés définissent le contexte de positionnement des éléments fils.</dd> + <dt><code>absolute</code></dt> + <dd>Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}} et {{cssxref("bottom")}}. Le point de position 0,0 représente le coin en haut à gauche de l'élément parent le plus proche qui définit un contexte de positionnement autre que <code>static</code>. S'il n'y a pas de tel parent, la position 0,0 représente le coin en haut à gauche du document.</dd> + <dt><code>fixed</code></dt> + <dd>Avec cette valeur, les éléments ne sont plus placés dans le flux et ne l'influencent plus. La position du bloc est définie avec les propriétés {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. La position 0,0 représente le coin en haut à gauche de fenêtre du navigateur ({{Glossary("viewport")}}).</dd> +</dl> + +<p>Les boîtes positionnées de cette façon peuvent s'empiler les unes sur les autres. Dans ce cas, il est possible de changer l'ordre d'empilement grâce à la propriété {{cssxref("z-index")}}.</p> + +<p>Une dernière fois, prenons un exemple pour illustrer le concept.</p> + +<p>Le code HTML pour le document sera :</p> + +<pre class="brush: html"><p> + The curtains of his bed were drawn aside, I tell you, by a hand. Not the curtains at his feet, nor the curtains at his back, but those to which his face was addressed. The curtains of his bed were drawn aside; and Scrooge, starting up into a half-recumbent attitude, found himself face to face with the unearthly visitor who drew them: as close to it as I am now to you, and I am standing in the spirit at your elbow. + <span class="topleft">1</span> +</p> +<p class="relative"> + It was a strange figure--like a child: yet not so like a child as like an old man, viewed through some supernatural medium, which gave him the appearance of having receded from the view, and being diminished to a child's proportion. Its hair, which hung about its neck and down its back, was white as if with age; and yet the face had not a wrinkle in it, and the tenderest bloom was on the skin. The arms were very long and muscular; the hands the same, as if its hold were of uncommon strength. Its legs and feet, most delicately formed, were, like those upper members, bare. It wore a tunic of the purest white; and round its waist was bound a lustrous belt, the sheen of which was beautiful. It held a branch of fresh green holly in its hand; and, in singular contradiction of that wintry emblem, had its dress trimmed with summer flowers. But the strangest thing about it was, that from the crown of its head there sprung a bright clear jet of light, by which all this was visible; and which was doubtless the occasion of its using, in its duller moments, a great extinguisher for a cap, which it now held under its arm. + <span class="topleft">2</span> + <span class="stackdown">3</span> + <span class="stackup">4</span> +</p></pre> + +<p>La feuille de style CSS sera :</p> + +<pre class="brush: css">p { + margin: 1em +} + +span { + font : 2em sans-serif; + width : 6rem; + + /* Avoir la hauteur de l'élément et la hauteur + de la ligne avec la même valeur permet de + centrer verticalement une ligne de texte. */ + height : 6rem; + line-height: 6rem; + + text-align : center; + background : rgba(0, 255, 255, 0.8); +} + +.relative { + position: relative; +} + +/* Tous les éléments de la classe "topleft" + sont positionnés dans le coin en haut à + gauche de leur parent dans le contexte + de positionnement */ +.topleft { + position: absolute; + top : 0; + left : 0; +} + +.stackup { + position: absolute; + top : 37%; + left : 62%; + + /* Tous les éléments de la classe "stackup" + sont placés au-dessus des éléments dont + le z-index est inférieur à 2 dans le même + contexte de positionnement. */ + z-index : 2; +} + +.stackdown { + position: absolute; + top : 50%; + left : 66%; + + /* Tous les éléments de la classe "stackdown" + sont placés sous les éléments dont le + z-index est supérieur à 1 dans le même + contexte de positionnement. */ + z-index : 1; +} +</pre> + +<p>La combinaison de ces deux éléments donnera le résultat suivant :</p> + +<p>{{EmbedLiveSample('Le_positionnement', '100%', '400')}}</p> + +<p>Bien que le positionnement CSS ne soit pas réellement utile pour complètement organiser une disposition, il est généralement judicieux pour obtenir certains effets liés à la navigation, aux bulles d'informations, etc. C'est un mécanisme que vous rencontrerez fréquemment et nous vous encourageons donc à vous familiariser avec. Parmi les ressources qui existent par ailleurs, nous vous conseillons particulièrement de lire l'article <em><a href="http://alistapart.com/article/css-positioning-101">CSS positioning 101</a></em> (en anglais), de Noah Stokes.</p> + +<h2 id="La_suite">La suite</h2> + +<p>Le flux, les boîtes flottantes et le positionnement CSS sont les bases qui vous permettront d'approfondir la création d'une disposition en CSS. Suite à cette série d'articles sur les concepts théoriques de CSS, vous connaissez tout ce qu'il faut pour exploiter au mieux CSS. Après ce vernis théorique, vous pouvez aborder <a href="/fr/docs/Apprendre/CSS/Comment">les aspects pratiques de CSS</a>. Si vous souhaitez approfondir les concepts sur la disposition et découvrir les autres mécanismes à ce sujet, vous pouvez consulter les articles sur : les tableaux, <a href="/fr/docs/Web/CSS/Colonnes_CSS3">l'organisation à plusieurs colonnes</a> et <a href="/fr/docs/Web/CSS/CSS_Flexible_Box_Layout/Utilisation_des_flexbox_en_CSS">la disposition avec les boîtes flexibles (<em>flexbox</em>)</a>.</p> + +<p>{{PreviousNext("Apprendre/CSS/Les_bases/Le_modèle_de_boîte","Apprendre/CSS/Comment/Mettre_en_forme_du_texte")}}</p> diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_is_structured/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..57da469f28 --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,155 @@ +--- +title: Des CSS lisibles +slug: CSS/Premiers_pas/Des_CSS_lisibles +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable +translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS +--- +<p> </p> +<p>Cette page aborde le style et la grammaire du langage CSS lui-même.</p> +<p>Vous modifierez l'aspect de votre fichier CSS pour le rendre plus lisible.</p> +<h3 id="Information_:_des_CSS__lisibles" name="Information_:_des_CSS__lisibles">Information : des CSS lisibles</h3> +<p>Vous pouvez ajouter des blancs et des commentaires à vos feuilles de style pour les rendre plus lisibles. Vous pouvez également grouper des sélecteurs ensemble, lorsque les même règles s'appliquent à des éléments sélectionnés de manière différente.</p> +<h4 id="Insertion_de_blancs" name="Insertion_de_blancs">Insertion de blancs</h4> +<p>Les feuilles de style peuvent être aérées à l'aide d'espaces, de tabulations et de retours à la ligne. Elles deviendront ainsi plus lisibles.</p> +<p>Votre fichier CSS d'exemple a actuellement une règle par ligne, et à peu près le minimum possible d'espaces blancs. Dans une feuille de style complexe, ce type de mise en page devient rapidement difficile à lire, et rend la feuille difficile à maintenir.</p> +<p>La mise en page à utiliser est généralement une question de préférence personnelle, mais si vos feuilles de style font partie de projets partagés, ceux-ci peuvent avoir leurs propres conventions.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemples</caption> + <tbody> + <tr> + <td>Certaines personnes aiment la mise en page compacte que nous avons utilisée jusqu'à présent, ne coupant une ligne que lorsqu'elle devient très longue : + <pre> +.carotte {color: orange; text-decoration: underline; font-style: italic;} +</pre> + <p>D'autres préfèrent un couple propriété-valeur par ligne :</p> + <div style="width: 45em;"> + <pre class="eval"> +.carotte +{ +color: orange; +text-decoration: underline; +font-style: italic; +} +</pre> + </div> + <p>Certains utilisent une indentation — deux espaces, quatre espaces, ou encore une tabulation :</p> + <div style="width: 45em;"> + <pre class="eval"> +.carotte { + color: orange; + text-decoration: underline; + font-style: italic; +} +</pre> + </div> + <p>D'autres apprécient que tout soit aligné verticalement (mais ce type de mise en page est difficile à maintenir) :</p> + <div style="width: 45em;"> + <pre class="eval"> +.carotte + { + color : orange; + text-decoration : underline; + font-style : italic; + } +</pre> + </div> + <p>Par ailleurs, si certains utilisent des tabulations, d'autres utiliseront uniquement des espaces.</p> + </td> + </tr> + </tbody> +</table> +<h4 id="Commentaires" name="Commentaires">Commentaires</h4> +<p>Les commentaires en CSS commencent avec <code>/*</code> et se terminent par <code>*/</code>.</p> +<p>Vous pouvez utiliser les commentaires pour ajouter vos remarques dans la feuille de style, mais aussi pour <em>mettre en commentaire</em> temporairement certaines parties à des fins de tests.</p> +<p>Pour mettre en commentaire une partie de feuille de style, placez les marques de commentaire de part et d'autre de celle-ci afin que le navigateur l'ignore. Veillez à commencer et à terminer le commentaire à des endroits appropriés, le reste de la feuille de style doit conserver une syntaxe correcte.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td> + <div style="width: 45em;"> + <pre class="eval"> +/* style pour la lettre C initiale dans le premier paragraphe */ +.carotte { + color: orange; + text-decoration: underline; + font-style: italic; + } +</pre> + </div> + </td> + </tr> + </tbody> +</table> +<h4 id="S.C3.A9lecteurs_group.C3.A9s" name="S.C3.A9lecteurs_group.C3.A9s">Sélecteurs groupés</h4> +<p>Lorsque beaucoup d'éléments ont le même style, vous pouvez spécifier un groupe de sélecteurs en les séparant par des virgules. La déclaration s'applique à chacun des éléments sélectionnés.</p> +<p>Ailleurs dans votre feuille de style, vous pouvez spécifier à nouveau les mêmes sélecteurs individuellement, pour leur appliquer des règles de style uniques.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Cette règle rend les éléments <small>H1</small>, <small>H2</small> et <small>H3</small> de la même couleur. + <p>Il est pratique de spécifier la couleur en un seul endroit, au cas où celle-ci doit être changée par la suite.</p> + <div style="width: 30em;"> + <pre class="eval"> +/* couleur pour les titres */ +h1, h2, h3 {color: navy;} +</pre> + </div> + </td> + </tr> + </tbody> +</table> +<h3 id="Action_:_ajout_de_commentaires_et_am.C3.A9lioration_de_la_mise_en_page" name="Action_:_ajout_de_commentaires_et_am.C3.A9lioration_de_la_mise_en_page">Action : ajout de commentaires et amélioration de la mise en page</h3> +<p>Éditez votre fichier CSS, et assurez-vous qu'il comporte les règles suivantes (dans n'importe quel ordre) :</p> +<div style="width: 30em;"> + <pre class="eval">strong {color: red;} +.carotte {color: orange;} +.epinard {color: green;} +#premier {font-style: italic;} +p {color: blue;} +</pre> +</div> +<p>Rendez-le plus lisible en le réarrangeant d'une manière que vous trouvez logique, et en ajoutant des blancs et des commentaires où vous les trouvez appropriés.</p> +<p>Enregistrez le fichier et actualisez l'affichage de votre navigateur pour vérifier que vos changements n'ont pas affecté le fonctionnement de la feuille de style :</p> +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>Mettez en commentaire une partie de votre feuille de style, sans rien changer d'autre, afin de rendre la toute première lettre de votre document rouge : + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> + </tr> + <tr> + <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> + </table> + <p>(Il existe plusieurs manières de faire.)</p> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Votre feuille de style d'exemple mettait du texte en italique et souligné. La page suivante détaillera d'autres manières de spécifier l'apparence du texte dans votre document : <strong><a href="/fr/docs/CSS/Premiers_pas/Styles_de_texte" title="fr/CSS/Premiers_pas/Styles_de_texte">Styles de texte</a></strong></p> diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_works/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..ace461991e --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,163 @@ +--- +title: Utiliser le CSS dans une page web +slug: Apprendre/CSS/Utiliser_CSS_dans_une_page_web +tags: + - Beginner + - CSS + - CodingScripting + - HTML + - NeedsActiveLearning +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Learn/CSS/Using_CSS_in_a_web_page +--- +<div>{{IncludeSubnav("/fr/Apprendre")}}</div> + +<div class="summary"> +<p>Cet article explique comment appliquer des styles {{glossary("CSS")}} à vos documents HTML.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Il peut être utile de savoir comment <a href="/fr/Learn/HTML/Write_a_simple_page_in_HTML">écrire une page HTML simple</a> et comment <a href="/fr/Learn/Set_up_a_basic_working_environment">configurer les éléments de base d'un site web</a>.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Apprendre trois méthodes différentes pour ajouter des éléments de style à votre page web.</td> + </tr> + </tbody> +</table> + +<p>Il existe deux méthodes permettant d'appliquer du code CSS à vos documents HTML : écrire du CSS directement dans le document HTML ou bien appeler un fichier CSS externe à partir du document HTML.</p> + +<p>Voyons comment appeler des informations CSS en utilisant les balises {{htmlelement("style")}} et {{htmlelement("link")}} et analysons ce qui se passe quand les deux balises sont utilisées conjointement.</p> + +<h2 id="Pédagogie_active">Pédagogie active</h2> + +<p><em>Il n'y a, pour le moment, pas d'apprentissage actif pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p> + +<h2 id="Aller_plus_loin">Aller plus loin</h2> + +<h3 id="La_balise_<style>">La balise <code><style></code></h3> + +<p>Lorsque vous souhaitez mettre en forme une page, vous avez la possibilité d'inclure tout le formatage directement dans le document HTML à l'aide de la balise {{htmlelement("style")}} :</p> + +<pre><!DOCTYPE html> +<html> +<head> + <title>La fameuse page « Hello World »</title> + + <style> + body { + background:white; + color:blue; + } + </style> + +</head> + <body> + <p>Hello world!</p> + </body> +</html></pre> + +<p>Comme nous l'avons <a href="/en-US/Learn/Set_up_a_basic_working_environment">déjà souligné</a>, ce n'est pas la meilleure méthode pour mettre en forme une page web puisque, dans ce cas, il sera nécessaire de répéter cette portion de code dans toutes les autres pages de votre site. Cela sollicitera de la bande passante supplémentaire et vous fera également perdre du temps puisqu'il faudra recopier les styles à chaque fois pour mettre à jour chaque page.</p> + +<p>Néanmoins, comme nous le verrons à la fin, cette façon de procéder peut s'avérer utile lorsque l'objectif est d'appliquer un style à une seule page de votre site.</p> + +<h3 id="La_balise_<link>">La balise <code><link></code></h3> + +<p>La balise <code>{{htmlelement("link")}}</code> permet, entre autres choses, d'appliquer un formatage au document donné à partir d'une feuille de style externe. Lorsqu'un certain nombre de documents HTML utilisent cette même feuille de style, vous pouvez simplement modifier la mise en page de l'ensemble des documents grâce à un seul fichier.</p> + +<p>Prenons l'exemple de ce code CSS et plaçons le dans un fichier <code>demo.css</code> :</p> + +<pre>/* demo.css */ + body { + background:white; + color:blue; + }</pre> + +<p>Chaque fois qu'on a besoin d'appliquer ce style à un document, il suffit alors d'appeler le fichier <code>demo.css</code> grâce à la balise <code>link</code> :</p> + +<pre><!DOCTYPE html> +<html> +<head> + <title>La fameuse page « Hello World »</title> + + <link rel="stylesheet" href="demo.css"> + +</head> + <body> + <p>Hello world!</p> + </body> +</html></pre> + +<div class="note"> +<p>Pour en savoir plus sur la configuration des fichiers sur un serveur, vous pouvez vous reférer à la section <a href="/fr/Learn/Set_up_a_basic_working_environment">Comment configurer les éléments de base d'un site web</a>.</p> +</div> + +<p>Chaque page qui appellera le fichier <code>demo.css</code> via la balise <code>link</code> bénéficiera alors des styles contenus dans le fichier CSS. Cela permet non seulement de réduire la taille des fichiers HTML, de plus le système de cache (du serveur web, des serveurs de proxies et du navigateur) sera capable de lire le fichier <code>demo.css</code> autant de fois que nécessaire alors qu'il ne sera chargé en mémoire qu'une seule fois. Les performances en seront très largement améliorées.</p> + +<div class="note"> +<p id="Inferior_alternative.3A_<style>_.2B_.40import"><strong>Alternative imparfaite : <code><style></code> + <code>@import</code></strong></p> + +<p>A la place de la balise <code><link></code>, vous trouverez peut-être parfois cette syntaxe :</p> + +<pre><style type="text/css"> + @import url(demo.css); + </style></pre> + +<p>C'est une autre façon d'arriver au même résultat, mais nous recommandons d'utiliser <code><link></code> pour des raisons de performance (à l'inverse d' <code>@import</code>, la balise <code><link></code> permet en effet le téléchargement en parallèle de plusieurs ressources CSS). Il y a quelques années il était courant d'utiliser <code>@import</code> dans certains cas spécifiques de manière à ce que les anciens navigateurs ne lisent pas les instructions de formatage qu'ils ne supportaient pas correctement.</p> +</div> + +<h3 id="Utiliser_<style>_et_<link>_ensemble">Utiliser <code><style></code> et <code><link></code> ensemble</h3> + +<p>Les possibilités deviennent encore plus intéressantes lorsqu'on mélange les deux méthodes. Dans les paragraphes précédents, nous avons mentionné le fait que la balise <code>style</code> pouvait être utile si la mise en forme s'applique à un seul document du site.</p> + +<p>Dans un premier temps on appelle donc toujours le fichier <code>demo.css</code>, ainsi la page affiche un texte bleu sur un fond blanc. Mais pour des raisons spécifiques, il se trouve que pour cette page on préfère un texte rouge. On va alors coupler ces deux méthodes :</p> + +<ol> + <li>Comme d'habitude on lie en premier notre feuille de style grâce à la balise <code>link</code>.</li> + <li>Grâce à la cascade, chaque style s'applique l'un après l'autre.</li> + <li>Puis avec une balise <code>style,</code> on annule le texte bleu défini par <code>color</code> sur une seule page du site.</li> +</ol> + +<p>Voici le code du fichier <code>demo.css</code> :</p> + +<pre>/* demo.css */ +body { + background:white; + color:blue; +} +</pre> + +<p>On comprend que tout le texte de la page doit être en bleu sur un fond blanc. Voici maintenant le document HTML :</p> + +<pre><!DOCTYPE html> +<html> +<head> + <title>La fameuse page « Hello World »</title> + <link rel="stylesheet" href="demo.css"> + + <style type="text/css"> + body { + color:red; + } + </style> + +</head> + <body> + <p>Hello world!</p> + </body> +</html></pre> + +<p>On appelle d'abord la feuille de style de façon à obtenir le fond blanc et un texte bleu. Ensuite, pour cette page seulement, on ignore le formatage du texte en bleu pour le remplacer par la couleur rouge à l'aide de la balise <code><style></code> (<code>demo.css</code> continue néanmoins de gérer tous les autres styles).</p> + +<h2 id="Prochaines_étapes">Prochaines étapes</h2> + +<p>Maintenant que vous savez comment appliquer des styles CSS à un document HTML, deux options s'offrent à vous :</p> + +<ul> + <li>Revoir <a href="/fr/Apprendre/CSS/Les_propriétés_CSS">les propriétés CSS et comment s'en servir</a>.</li> + <li>Perfectionner vos connaissances en design, en commençant par l'<a href="/fr/docs/Learn/What_is_accessibility">accessibilité</a>.</li> +</ul> diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_works_cdccf923f6bd040e8d243ee03d223ddc/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_works_cdccf923f6bd040e8d243ee03d223ddc/index.html new file mode 100644 index 0000000000..aa08f6ffea --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_works_cdccf923f6bd040e8d243ee03d223ddc/index.html @@ -0,0 +1,122 @@ +--- +title: Fonctionnement de CSS +slug: CSS/Premiers_pas/Fonctionnement_de_CSS +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works +--- +<p> </p> + +<p>Cette page explique comment CSS fonctionne dans votre navigateur. Vous analyserez votre document de démonstration, révélant les détails de son style.</p> + +<h3 id="Information_:_fonctionnement_de_CSS" name="Information_:_fonctionnement_de_CSS">Information : fonctionnement de CSS</h3> + +<p>Lorsque Mozilla affiche un document, il doit combiner le contenu du document avec ses informations de style. Ainsi, il traite le document en deux étapes :</p> + +<ul> + <li>Au premier stade, Mozilla convertit le langage de balisage et le CSS dans un<em>DOM</em> (modèle objet de document). Le DOM représente le document dans la mémoire de l'ordinateur. Il combine le contenu du document et son style.</li> +</ul> + +<ul> + <li>Au second stade, Mozilla affiche le DOM.</li> +</ul> + +<p>Un langage de balisage utilise des balises pour définir la structure du document. Un élément peut en contenir d'autres, entre sa balise de début et sa balise de fin.</p> + +<p>Un DOM a une structure sous forme d'arbre. Chaque balise et morceau de texte figurant dans le langage de balisage devient un<em>nœud</em> dans la structure arborescente. Les nœuds DOM n'en contiennent pas d'autres, au lieu de cela ils peuvent être<em>parents</em> de nœuds<em>enfants</em> .</p> + +<p>Les nœuds correspondant à des balises sont aussi appelés<em>éléments</em> .</p> + +<table style="background-color: #fffff4; border: 1px solid #36b; margin-bottom: 1em; padding: 1em;"> + <caption>Exemple</caption> + <tbody> + <tr> + <td>Dans votre document exemple, la balise <code><P></code> et sa balise de fermeture <code></P></code> forment un conteneur : + <div style="width: 24em;"> + <pre class="eval"> +<P> + <STRONG>C</STRONG>ascading + <STRONG>S</STRONG>tyle + <STRONG>S</STRONG>heets +</P> +</pre> + </div> + + <p>Dans le DOM, le nœud P correspondant est un parent. Ses enfants sont les nœuds <small>STRONG</small> et les nœuds de texte. Les nœuds <small>STRONG</small> sont eux-mêmes parents, avec des nœuds de texte comme enfants :</p> + + <div style="width: 24em; color: #47c; white-space: pre; padding: 0 0 0 2em;"> + <p><span style="color: black;">P</span> ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">C</span>" │ ├─"<span style="color: black;">ascading</span>" │ ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>" │ ├─"<span style="color: black;">tyle</span>" │ ├─<span style="color: black;">STRONG</span> │ │ │ └─"<span style="color: black;">S</span>" │ └─"<span style="color: black;">heets</span>"</p> + </div> + </td> + </tr> + </tbody> +</table> + +<p>La compréhension du DOM aide à créer, déboguer et maintenir votre CSS, car le DOM est l'endroit où CSS et le document se rencontrent.</p> + +<h3 id="Action_:_Analyse_d.27un_DOM" name="Action_:_Analyse_d.27un_DOM">Action : Analyse d'un DOM</h3> + +<p>Pour analyser un DOM, il est nécessaire d'utiliser un logiciel spécial. Ici, nous utiliserons l'<a href="/fr/docs/Inspecteur_DOM">Inspecteur DOM</a> (DOMi) de Mozilla pour analyser un DOM.</p> + +<p>Utilisez votre navigateur Mozilla pour ouvrir votre document exemple.</p> + +<p>Depuis la barre de menu de votre navigateur, choisissez Outils – Inspecteur DOM, ou éventuellement Outils – Développement Web – Inspecteur DOM.</p> + +<table style="background-color: #f4f4f4; border: 1px solid #36b; padding: 1em;"> + <caption>Plus de détails</caption> + <tbody> + <tr> + <td>Si votre navigateur Mozilla n'a pas de DOMi, vous pouvez réinstaller votre navigateur en vérifiant que vous installez le composant Outils de développement. Revenez ensuite à ce tutoriel. + <p>Si vous ne désirez pas installer le DOMi, vous pouvez passer cette section et vous rendre directement à la page suivante. Cette section peut être passée sans problème pour comprendre le reste du tutoriel.</p> + </td> + </tr> + </tbody> +</table> + +<p><br> + Dans le DOMi, dépliez les nœuds de votre document en cliquant sur leurs flèches.</p> + +<p><strong>Note : </strong> Les espaces dans votre fichier HTML font que le DOMi affichera certains nœuds de texte vides, que vous pouvez ignorer.</p> + +<p>Le résultat peut ressembler à ceci, selon les nœuds que vous avez dépliés :</p> + +<table style="border: 2px outset #36b; padding: 0 0 0 2em;"> + <tbody> + <tr> + <td> + <div style="width: 30em; background-color: transparent; margin: 0px; border: 0px; padding: 0px; color: gray; white-space: pre;"> + <p>│ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">P</span> │ │ │ <span style="font-size: 133%;">▼</span>╴<span style="color: black;">STRONG</span> │ │ └<span style="color: darkblue;">#text</span> │ ├╴<span style="color: darkblue;">#text</span> │ <span style="font-size: 133%;">▶</span>╴<span style="color: black;">STRONG</span> │ │</p> + </div> + </td> + </tr> + </tbody> +</table> + +<p>Lorsque vous sélectionnez un nœud, vous pouvez utiliser le panneau de droite du DOMi pour en savoir plus sur celui-ci. Par exemple, lorsque vous sélectionnez un nœud de texte, DOMi affichera son texte dans le panneau de droite.</p> + +<p>Lorsque vous sélectionnez un nœud d'élément, DOMi l'analyse et fournit une grande quantité d'informations dans le panneau de droite. Les informations de style sont juste une petite partie de ce qui peut y être affiché.</p> + +<p> </p> + +<table style="background-color: #ffe; border: 1px solid #36b; padding: 1em;"> + <caption>Challenge</caption> + <tbody> + <tr> + <td>Dans le DOMi, cliquez sur un nœud <small>STRONG</small>. + <p>Utilisez le panneau de droite pour découvrir à quel endroit la couleur du nœud est mise en rouge, et à quel endroit son apparence est rendue plus grasse que le texte normal.</p> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> + +<p>Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa <a>page de discussion</a>.</p> + +<p>Si vous avez relevé le challenge, vous avez vu que les informations de style venant de plusieurs endroits interagissent pour créer le style final d'un élément.</p> + +<p>La page suivante explique plus en détails ces interactions : <strong><a href="/fr/docs/CSS/Premiers_pas/Cascade_et_h%c3%a9ritage">Cascade et héritage</a></strong>.</p> diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_works_cf31463f874ecd8e10e648dacde4a995/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_works_cf31463f874ecd8e10e648dacde4a995/index.html new file mode 100644 index 0000000000..e0b9c64a2e --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_works_cf31463f874ecd8e10e648dacde4a995/index.html @@ -0,0 +1,75 @@ +--- +title: Appliquer du CSS à une page web +slug: Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web +tags: + - Beginner + - CSS + - Guide + - HTML +translation_of: Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML +translation_of_original: Learn/HTML/Howto/Use_CSS_within_a_webpage +--- +<div class="summary"> +<p>Le code HTML d'une page web définit sa signification et sa structure. Le code CSS, quant à lui, permet de définir la mise en forme d'une page. Dans cet article, nous verrons comment appliquer du code CSS à un document HTML.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment appliquer une mise en forme CSS à un document HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="À_propos_de_CSS">À propos de CSS</h2> + +<p>Un document HTML bien écrit peut être utilisé quel que soit le contexte de présentation. Il est possible de le consulter visuellement (avec un navigateur), auditivement (avec un lecteur d'écran) ou tactilement (avec un affichage Braille). {{glossary("CSS")}} permet de contrôler l'aspect <em>visuel</em> d'un site web. Le navigateur pourra utiliser une feuille de style CSS par défaut, qui se traduira par une mise en forme générique (voire un peu austère) et il est donc préférable de déclarer une mise en forme propre à votre site web afin que celui-ci soit plus agréable à consulter.</p> + +<p>Dans cet article, nous verrons comment appliquer du CSS depuis le code HTML. Pour apprendre le fonctionnement du langage CSS, nous vous conseillons de démarrer avec <a href="/fr/docs/CSS/Premiers_pas">notre guide CSS</a>.</p> + +<p>Nous présenterons comment faire référence à une feuille de style CSS externe depuis le document HTML. Cette méthode est généralement la meilleure qui permette d'appliquer du CSS. En effet, une feuille de style centralisée permet d'avoir une mise en forme cohérente sur l'ensemble du site, de faciliter la maintenance du code et d'éviter de télécharger plusieurs ressources. Ceci étant dit, nous présenterons également deux autres méthodes ainsi que leurs avantages et inconvénients.</p> + +<h2 id="Référencer_une_feuille_de_style_externe">Référencer une feuille de style externe</h2> + +<p><a href="/fr/Apprendre/Commencer_avec_le_web/Les_bases_CSS">Une feuille de style</a> est un simple fichier texte contenant les règles CSS. Vous pouvez donc écrire une feuille de style avec votre éditeur de texte (de la même façon que vous pouvez rédiger un document HTML ou du code JavaScript). Une fois que vous avez écrit votre feuille de style, vous pouvez y faire référence depuis vos pages web grâce à un élément {{HTMLElement('link')}} :</p> + +<pre class="brush: html"><link href="styles/style.css" rel="stylesheet"></pre> + +<p>Il vous suffit de modifier l'URL de l'attribut <code>href</code> pour que celui-ci pointe vers votre feuille de style. L'attribut <code>rel="stylesheet"</code> et sa valeur sont nécessaires car l'élément {{HTMLElement('link')}} peut être utilisé dans d'autres cas. Tous les éléments {{htmlelement("link")}} doivent être placés au sein de l'élément {{HTMLElement('head')}} du document.</p> + +<h2 id="Intégrer_du_CSS_avec_<style>">Intégrer du CSS avec <code><style></code></h2> + +<p>L'élément {{htmlelement("style")}} permet d'écrire du CSS directement au sein du document HTML :</p> + +<pre class="brush: html"><style> +body { + background-color: pink; +} +</style></pre> + +<div class="note"> +<p><strong>Note :</strong> N'utilisez cette méthode que lorsqu'une page web doit être mise en forme de façon unique. Sinon, il est préférable d'utiliser une feuille de style unique pour économiser de la bande passante et avoir une mise en forme cohérente sur l'ensemble du site.</p> +</div> + +<h2 id="Écrire_du_CSS_inline_avec_l'attribut_style">Écrire du CSS <em>inline</em> avec l'attribut <code>style</code></h2> + +<p>Enfin, vous pouvez utiliser l'attribut <code>style</code> dans n'importe quel élément HTML. Le style ne s'appliquera qu'à l'élément courant :</p> + +<pre class="brush: html"><span style="color: red;">Non, tout mais pas ça !</span></pre> + +<div class="note"> +<p><strong>Attention :</strong> Cette méthode est un cauchemar de maintenance et peut grandement influencer la cascade CSS. Elle ne doit donc pas être utilisée, sauf pour tester rapidement quelques scénarios extrêmes (par exemple, lors de la conception d'e-mails en HTML à destination de clients e-mail qui s'avèreraient récalcitrants).</p> +</div> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("link")}}</li> + <li>{{htmlelement("style")}}</li> + <li><a href="/fr/docs/Web/HTML/Attributs_globaux/style">L'attribut <code>style</code></a></li> +</ul> diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_works_dba75d8c56ccc773f03d946ce2dbb25c/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_works_dba75d8c56ccc773f03d946ce2dbb25c/index.html new file mode 100644 index 0000000000..1782164624 --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_works_dba75d8c56ccc773f03d946ce2dbb25c/index.html @@ -0,0 +1,126 @@ +--- +title: Présentation des CSS +slug: CSS/Premiers_pas/Présentation_des_CSS +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/What_is_CSS +--- +<p> +{{previousPage("/fr/docs/CSS/Premiers_pas", "Premiers pas")}} +Cette page explique ce que sont les CSS. Vous y créerez un document simple avec lequel vous travaillerez au fil des pages suivantes.</p> +<h3 id="Information_:_CSS.2C_ce_dont_il_s.27agit" name="Information_:_CSS.2C_ce_dont_il_s.27agit">Information : CSS, ce dont il s'agit</h3> +<p>CSS est un langage permettant de spécifier comment les documents sont présentés à l'utilisateur.</p> +<p>Un + <i> + document</i> + est une collection d'informations structurées à l'aide d'un + <i> + langage de balisage</i> + (markup language).</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemples</caption> + <tbody> + <tr> + <td> + <ul> + <li>Une page Web comme celle-ci est un document.<br> + Les informations que vous voyez dans une page Web sont généralement structurées à l'aide du langage HTML (HyperText Markup Language).</li> + </ul> + <ul> + <li>Un dialogue dans une application Mozilla est un document.<br> + Les contrôles de l'interface utilisateur visibles dans un dialogue de Mozilla sont structurés à l'aide du langage de balisage XUL (XML User-interface Language).</li> + </ul> + </td> + </tr> + </tbody> +</table> +<p>Dans ce tutoriel, des boîtes nommées <b>Détails supplémentaires</b> comme celle ci-dessous contiennent des informations optionnelles. Si vous êtes pressé(e) d'avancer dans le tutoriel, vous pouvez passer ces boîtes, pour éventuellement revenir les lire plus tard. Sinon, lisez-les au fil de votre parcours, et suivez les liens pour en savoir plus.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Détails supplémentaires</caption> + <tbody> + <tr> + <td> + <p>Un document n'est pas la même chose qu'un fichier. Il peut ou non être stocké dans un fichier.</p> + <p>Par exemple, le document que vous êtes en train de lire n'est pas stocké dans un fichier. Lorsque votre navigateur Web demande cette page, le serveur interroge une base de données et génère le document, assemblant les différentes parties depuis de nombreux fichiers. Cependant, dans ce tutoriel, vous travaillerez avec des documents stockés dans des fichiers.</p> + <p>Pour plus d'informations à propos des documents et des langages de balisage, consultez les autres parties de ce site, par exemple :</p> + <table style="background-color: inherit; margin-left: 2em;"> + <tbody> + <tr> + <td><a href="fr/HTML">HTML</a></td> + <td>pour les pages Web</td> + </tr> + <tr> + <td><a href="fr/XML">XML</a></td> + <td>pour les documents structurés en général</td> + </tr> + <tr> + <td><a href="fr/SVG">SVG</a></td> + <td>pour les documents graphiques</td> + </tr> + <tr> + <td><a href="fr/XUL">XUL</a></td> + <td>pour les interfaces utilisateur dans Mozilla</td> + </tr> + </tbody> + </table> + <p>Dans la partie II de ce tutoriel, vous verrez des exemples de ces langages de balisage.</p> + </td> + </tr> + </tbody> +</table> +<p> + <i> + Présenter</i> + un document à l'utilisateur signifie le convertir dans une forme utilisable par un être humain. Mozilla est conçu pour présenter des documents visuellement, par exemple sur un écran d'ordinateur, un projecteur ou une imprimante.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Détails supplémentaires</caption> + <tbody> + <tr> + <td>CSS ne sert pas uniquement aux navigateurs, ni pour des présentations visuelles. Dans la terminologie formelle CSS, le programme présentant un document à l'utilisateur est appelé + <i> + agent utilisateur</i> + (user agent ou UA). Un navigateur est simplement une sorte d'UA. Cependant, dans la partie I de ce tutoriel, vous travaillerez uniquement avec CSS dans un navigateur. + <p>Pour les définitions formelles de la terminologie liée à CSS, voir <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Définitions</a> dans la spécification CSS.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Action_:_cr.C3.A9ation_d.27un_document" name="Action_:_cr.C3.A9ation_d.27un_document">Action : création d'un document</h3> +<p>Utilisez votre ordinateur pour créer un nouveau dossier et un nouveau fichier texte à l'intérieur de celui-ci. Ce fichier contiendra votre document.</p> +<p>Copiez et collez le HTML affiché ci-dessous. Enregistrez le fichier sous le nom <code>doc1.html</code></p> +<pre class="eval"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" +"<a class="external" href="http://www.w3.org/TR/html4/strict.dtd" rel="freelink">http://www.w3.org/TR/html4/strict.dtd</a>"> +<html> + <head> + <title>Document de démonstration</title> + <meta http-equiv="Content-Type" content="text/html; + charset=iso-8859-1"> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> +<p>Dans votre navigateur, ouvrez un nouvel onglet ou une nouvelle fenêtre, et ouvrez-y le fichier.</p> +<p>Vous devriez voir le texte avec les lettres initales en gras, comme ceci :</p> +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td> + </tr> + </tbody> +</table> +<p>Ce que vous voyez dans votre navigateur peut ne pas apparaître exactement comme cela, suivant les paramètres de votre navigateur et de ce wiki. S'il y a certaines différences dans la police, l'espacement et les couleurs, elles ne sont pas importantes.</p> +<h3 id="Pour_continuer" name="Pour_continuer">Pour continuer</h3> +<p> +{{nextPage("/fr/docs/CSS/Premiers_pas/Pourquoi_utiliser_CSS", "Pourquoi utiliser CSS")}} +Votre document n'utilise pas encore CSS. Sur la page suivante, vous utiliserez CSS pour spécifier son propre style : <a href="/fr/docs/CSS/Premiers_pas/Pourquoi_utiliser_CSS">Pourquoi utiliser CSS</a>.</p> diff --git a/files/fr/conflicting/learn/css/first_steps/how_css_works_ecbda2160290b96c02dcfa8276c0333a/index.html b/files/fr/conflicting/learn/css/first_steps/how_css_works_ecbda2160290b96c02dcfa8276c0333a/index.html new file mode 100644 index 0000000000..682482eefb --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/how_css_works_ecbda2160290b96c02dcfa8276c0333a/index.html @@ -0,0 +1,98 @@ +--- +title: Pourquoi utiliser CSS +slug: CSS/Premiers_pas/Pourquoi_utiliser_CSS +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/First_steps/How_CSS_works +translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS +--- +<p> </p> +<p>Cette page explique pourquoi les documents utilisent CSS. Vous utiliserez CSS pour ajouter une feuille de style à votre document de démonstration.</p> +<h3 id="Information_:_utilit.C3.A9_de_CSS" name="Information_:_utilit.C3.A9_de_CSS">Information : utilité de CSS</h3> +<p>CSS vous aide à garder l'information contenue dans votre document séparée des détails de sa présentation. Ces détails de présentation d'un document sont appelés son + <i> + style</i> + . La séparation du style et du contenu permet :</p> +<ul> + <li>D'éviter des duplications</li> + <li>Une maintenance plus facile</li> + <li>D'utiliser le même contenu avec différents styles pour différents usages</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Votre site Web peut avoir des milliers de pages qui ont un aspect similaire. Avec CSS, vous conservez les informations de style dans des fichiers communs partagés par toutes les pages. + <p>Lorsqu'un visiteur affiche une page, son navigateur charge les informations de style en même temps que le contenu de la page.</p> + <p>Lorsqu'il imprime une page, vous fournissez des informations de style différentes qui rendent la page imprimée facile à lire.</p> + </td> + </tr> + </tbody> +</table> +<p>En général, avec, CSS, vous utilisez le langage de balisage pour décrire les informations contenues dans le document, et non son style. CSS est utilisé pour spécifier son style et non son contenu. (Plus loin dans ce tutoriel, vous verrez qu'il peut y avoir certaines exceptions à cet arrangement.)</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Un langage de balisage comme HTML fournit également certaines manières de préciser un style. + <p>Par exemple, en HTML, il est possible d'utiliser une balise <code><B></code> pour rendre du texte gras, ou de spécifier la couleur de fond d'une page dans sa balise <code><BODY></code>.</p> + <p>Lorsqu'on utilise CSS, on évite généralement d'utiliser ces possibilités du langage de balisage afin que toutes les informations de style du document se retrouvent à la même place.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Action_:_cr.C3.A9ation_d.27une_feuille_de_style" name="Action_:_cr.C3.A9ation_d.27une_feuille_de_style">Action : création d'une feuille de style</h3> +<p>Créez un autre fichier texte dans le même dossier que précédemment. Ce fichier sera votre feuille de style. Appelez-le : <code>style1.css</code></p> +<p>Dans votre fichier CSS, copiez et collez cette simple ligne, puis enregistrez le fichier :</p> +<div style="width: 40em;"> + <pre class="eval">strong {color: red;} +</pre> +</div> +<h4 id="Lier_votre_document_.C3.A0_votre_feuille_de_style" name="Lier_votre_document_.C3.A0_votre_feuille_de_style">Lier votre document à votre feuille de style</h4> +<p>Pour lier votre document à votre feuille de style, éditez votre fichier HTML. Ajoutez la ligne montrée ici en gras :</p> +<div style="width: 50em; color: gray;"> + <pre class="eval"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" +"<span class="nowiki">http://www.w3.org/TR/html4/strict.dtd</span>"> +<html> + <head> + <meta http-equiv="Content-Type" content="text/html; + charset=iso-8859-1"> + <title>Sample document</title> + <strong style="color: black;"><link rel="stylesheet" type="text/css" href="style1.css"></strong> + </head> + <body> + <p> + <strong>C</strong>ascading + <strong>S</strong>tyle + <strong>S</strong>heets + </p> + </body> +</html> +</pre> +</div> +<p>Enregistrez le fichier et actualisez l'affichage de votre navigateur. La feuille de style rend les lettres initiales rouges, comme ceci :</p> +<table style="border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>En plus du rouge (red), CSS permet d'utiliser d'autres noms de couleurs. + <p>Sans regarder dans une référence, trouvez cinq autres noms de couleurs qui fonctionnent dans votre feuille de style.</p> + </td> + </tr> + </tbody> +</table> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Si vous avez des difficultés à comprendre cette page, ou si vous avez des commentaires, contribuez à sa <a>page de discussion</a>.</p> +<p>Maintenant que vous avez un document lié à une feuille de style séparée, vous pouvez en apprendre plus sur la manière dont votre navigateur les combine lors de l'affichage du document : <b><a href="/fr/docs/CSS/Premiers_pas/Fonctionnement_de_CSS">Fonctionnement de CSS</a></b>.</p> +<p> </p> diff --git a/files/fr/conflicting/learn/css/first_steps/index.html b/files/fr/conflicting/learn/css/first_steps/index.html new file mode 100644 index 0000000000..5a802a6899 --- /dev/null +++ b/files/fr/conflicting/learn/css/first_steps/index.html @@ -0,0 +1,60 @@ +--- +title: Premiers pas +slug: CSS/Premiers_pas +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/First_steps +translation_of_original: Web/Guide/CSS/Getting_started +--- +<h3 id="Introduction" name="Introduction">Introduction</h3> + +<p>Ce tutoriel est une introduction basique aux <a href="/fr/docs/CSS" title="/fr/docs/CSS">feuilles de styles en cascades (CSS)</a>.</p> + +<p>Il vous guidera à travers les fonctions de base des CSS grâce à des exemples pratiques que vous pourrez tester par vous-même sur votre ordinateur. Il est divisé en deux parties :</p> + +<ul> + <li>La partie I présente les propriétés standard des CSS qui fonctionnent dans les navigateurs basés sur Mozilla et aussi dans la plupart des autres navigateurs modernes.</li> +</ul> + +<ul> + <li>La partie II contient quelques exemples des propriétés spéciales qui fonctionnent sous Mozilla mais pas forcément sur les autres navigateurs.</li> +</ul> + +<p>Ce tutoriel est basé sur les <a class="external" href="http://www.w3.org/TR/CSS21/">spécifications CSS 2.1</a>.</p> + +<h4 id=".C3.80_qui_est_destin.C3.A9_ce_tutoriel_.3F" name=".C3.80_qui_est_destin.C3.A9_ce_tutoriel_.3F">À qui est destiné ce tutoriel ?</h4> + +<p>Ce tutoriel est surtout destiné à ceux qui débutent en CSS, mais vous pouvez aussi vous en servir si vous avez déjà quelques notions.</p> + +<p>Si vous êtes un débutant, lisez d'abord la partie I pour comprendre les CSS et apprendre comment les utiliser. Puis lisez la partie II pour comprendre la « portée » des CSS dans Mozilla.</p> + +<p>Si vous avez déjà quelques notions, vous pouvez sauter les parties de ce tutoriel que vous connaissez déjà, et lire seulement celles qui vous intéressent.</p> + +<p>Si vous maîtrisez déjà les CSS hormis les propriétés particulières à Mozilla, passez directement à la partie II.</p> + +<h4 id="Avant_de_commencer" name="Avant_de_commencer">Avant de commencer</h4> + +<p>Pour que ce tutoriel soit vraiment bénéfique, vous avez besoin d'un éditeur de fichier texte et un navigateur Mozilla (Firefox ou la suite Mozilla). Vous devez aussi savoir un minimum comment les utiliser.</p> + +<p>Si vous ne souhaitez pas éditer de fichier, vous pouvez simplement lire le tutoriel et regarder les images, mais votre apprentissage sera moins performant.</p> + +<p>Quelques passages de ce tutoriel peuvent exiger l'utilisation d'un autre logiciel de la fondation Mozilla. Ces passages sont optionnels. Si vous ne souhaitez pas télécharger d'autres logiciels, sautez ces passages.</p> + +<h3 id="Tutoriel_partie_I" name="Tutoriel_partie_I">Tutoriel partie I</h3> + +<p>Un guide de base, étape par étape pour CSS.</p> + +<nav class="fancyTOC"><a class="button" href="/fr/docs/CSS/Premiers_pas/Pr%c3%a9sentation_des_CSS" rel="next">Présentation des CSS</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Pourquoi_utiliser_CSS">Pourquoi utiliser CSS</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Fonctionnement_de_CSS">Fonctionnement de CSS</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Cascade_et_h%c3%a9ritage">Cascade et héritage</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Les_s%c3%a9lecteurs">Les sélecteurs</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Des_CSS_lisibles">Des CSS lisibles</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Styles_de_texte">Styles de texte</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Couleurs">Couleurs</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Contenu">Contenu</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Listes">Listes</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Bo%c3%aetes">Boîtes</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Mise_en_page">Mise en page</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/Tableaux">Tableaux</a> <a class="button" href="/fr/docs/CSS/Premiers_pas/M%c3%a9dias">Médias</a></nav> + +<h3 id="Tutoriel_partie_II" name="Tutoriel_partie_II">Tutoriel partie II</h3> + +<p>Exemples montrant la portée des CSS dans Mozilla.</p> + +<ol> + <li><strong><a href="/fr/docs/CSS/Premiers_pas/JavaScript">JavaScript</a></strong></li> + <li><strong><a href="/fr/docs/CSS/Premiers_pas/Liaisons_XBL">Liaisons XBL</a></strong></li> + <li><strong><a href="/fr/docs/CSS/Premiers_pas/Interfaces_utilisateur_XUL">Interfaces utilisateur XUL</a></strong></li> + <li><strong><a href="/fr/docs/CSS/Premiers_pas/Graphiques_SVG">Graphiques SVG</a></strong></li> + <li><strong><a href="/fr/docs/CSS/Premiers_pas/Donn%c3%a9es_XML">Données XML</a></strong></li> +</ol> diff --git a/files/fr/conflicting/learn/css/styling_text/fundamentals/index.html b/files/fr/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..67864f3b97 --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,330 @@ +--- +title: Mettre en forme du texte +slug: Apprendre/CSS/Comment/Mettre_en_forme_du_texte +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Learn/CSS/Howto/style_text +--- +<p class="summary">La mise en forme du texte est au cœur de CSS. Celui-ci fournit de nombreuses propriétés permettant de modifier l'apparence du texte. En quelque sorte, CSS est le prolongement, sur le Web, de la typographie qui existe depuis plusieurs siècles.</p> + +<p>La mise en forme du texte se décline sur deux composantes : la police et la disposition du texte. Ces deux éléments sont des bases, abordées parmi les premiers concepts qu'on voit en CSS. Toutefois, la mise en forme du texte est plus subtile qu'il n'y paraît. Dans cet article, nous détaillerons les différentes possibilités offertes par CSS. Libre à vous de choisir ce dont vous avez besoin ou ce sur quoi vous souhaitez expérimenter.</p> + +<h2 id="La_mise_en_forme_simple">La mise en forme simple</h2> + +<p>Les polices de texte peuvent être modifiées et adaptées grâce à ces propriétés CSS :</p> + +<ul> + <li>{{cssxref("color")}} : modifie la couleur de la police.</li> + <li>{{cssxref("font-family")}} : modifie la police utilisée.</li> + <li>{{cssxref("font-size")}} : modifie la taille de la fonte.</li> + <li>{{cssxref("font-style")}} : permet de passer d'une police italique à une police normale.</li> + <li>{{cssxref("font-weight")}} : permet de gérer la graisse d'une police.</li> + <li>{{cssxref("font-variant")}} : permet de choisir des variantes de police.</li> + <li>{{cssxref("letter-spacing")}} : permet d'ajuster l'interlettrage, quelles que soient les options de crénage (<em>kerning</em>) de la police originale.</li> + <li>{{cssxref("text-decoration")}} : permet d'afficher une ligne décorative, au-dessus, en-dessous ou au milieu du texte.</li> + <li>{{cssxref("text-shadow")}} : permet de définir une ou plusieurs ombres portées depuis le texte.</li> + <li>{{cssxref("text-transform")}} : permet de choisir la capitalisation du texte.</li> +</ul> + +<p>CSS fournit également des unités dédiées aux polices et des outils pour le texte sélectionné :</p> + +<ul> + <li>{{cssxref("length#em","em")}} : la taille calculée pour la police de l'élément, relative par rapport à la taille de la police de l'élément parent.</li> + <li>{{cssxref("length#rem","rem")}} : analogue à <code>em</code> mais toujours relative à la taille de la police pour l'élément racine.</li> + <li>{{cssxref("::first-letter")}} : permet de sélectionner la première lettre d'un élément de bloc.</li> + <li>{{cssxref("::first-line")}} : permet de sélectionner la première ligne d'un élément de bloc.</li> + <li>{{cssxref("::selection")}} : correspond au texte actuellement sélectionné par l'utilisateur.</li> +</ul> + +<p>Les propriétés les plus fréquemment utilisées peuvent être manipulées grâce à la propriété raccourcie {{cssxref("font")}}. Celle-ci se décompose (dans l'ordre) en : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}}. Parmi toutes ces propriétés, seules <code>font-size</code> et <code>font-family</code> sont obligatoires pour cette notation raccourcie.</p> + +<p>Prenons un exemple pour illustrer ce point.</p> + +<p>Voici le fragment de code HTML qu'on utilisera :</p> + +<pre class="brush: html"><p> + He dressed himself "all in his best," and at last got out into the streets. + The people were by this time pouring forth, as he had seen them with the + Ghost of Christmas Present; and walking with his hands behind him, Scrooge + regarded every one with a delighted smile. He looked so irresistibly pleasant, + in a word, that three or four good-humoured fellows said, "Good morning, sir! + A merry Christmas to you!" And Scrooge said often afterwards, that of all the + blithe sounds he had ever heard, those were the blithest in his ears. +</p> +<p class="fancy"> + He dressed himself "all in his best," and at last got out into the streets. + The people were by this time pouring forth, as he had seen them with the + Ghost of Christmas Present; and walking with his hands behind him, Scrooge + regarded every one with a delighted smile. He looked so irresistibly pleasant, + in a word, that three or four good-humoured fellows said, "Good morning, sir! + A merry Christmas to you!" And Scrooge said often afterwards, that of all the + blithe sounds he had ever heard, those were the blithest in his ears. +</p></pre> + +<p>Et voilà la feuille de style CSS qu'on appliquera :</p> + +<pre class="brush: css">/* Voici un disposition simple pour que + les paragraphes soient côte à côte. */ +p { + box-sizing: border-box; + width : 50%; + padding : 1em; + float : left; +} + +.fancy { + font: 0.85rem/150% Helvetica, Arial, sans-serif; +} + +.fancy::first-line { + font-variant: small-caps; +} + +.fancy::first-letter { + font-family: serif; + font-size : 3rem; + + float : left; + background : blanchedalmond; + color : goldenrod; + border : 0.5rem solid gold; + padding : 1rem; + margin : 0 0.5rem 0 0; +}</pre> + +<p>Ces deux éléments permettront d'aboutir au résultat suivant :</p> + +<p>{{EmbedLiveSample('La_mise_en_forme_simple', '100%', '320')}}</p> + +<div class="note"> +<p><strong>Note :</strong> Les styles de police vous permettent de faire de nombreuses choses. Toutefois, le Web reste un média principalement basé sur le texte et les polices ont donc leur importance. Nous vous encourageons donc à utiliser les mécanismes offerts par CSS pour améliorer la lisibilité du texte. Pour cela, vous pouvez consulter <a href="http://www.pompage.net/traduction/8-facons-simples-d-ameliorer-la-typographie-dans-vos">les différentes règles typographiques recommandées pour le Web</a>.</p> +</div> + +<h2 id="Paramètres_avancées_des_polices_d'écriture">Paramètres avancées des polices d'écriture</h2> + +<p>CSS fournit des propriétés, encore plus avancées, dédiées aux polices d'écriture. Cependant, ces propriétés sont toujours expérimentales et parfois mal supportées par certains navigateurs ou spécifiques à certaines langues (généralement les langues non latines) :</p> + +<ul> + <li>{{cssxref("font-kerning")}} : active ou désactive les options de crénage.</li> + <li>{{cssxref("font-feature-settings")}} : active ou désactive les différentes fonctionnalités des polices <a href="https://fr.wikipedia.org/wiki/OpenType">OpenType</a>.</li> + <li>{{cssxref("font-variant-alternates")}} : permet de contrôler l'utilisation de glyphes alternatifs pour une fonte donnée.</li> + <li>{{cssxref("font-variant-caps")}} : permet de contrôler l'utilisation de glyphes capitaux alternatifs.</li> + <li>{{cssxref("font-variant-east-asian")}} : permet de contrôler l'utilisation de glyphes alternatifs pour les scripts d'Asie orientale comme le japonais ou le chinois.</li> + <li>{{cssxref("font-variant-ligatures")}} : permet de contrôler les ligatures et formes contextuelles qui sont utilisées dans le texte.</li> + <li>{{cssxref("font-variant-numeric")}} : permet de contrôler l'utilisation de glyphes alternatifs pour les nombres, les fractions et les marqueurs ordinaux.</li> + <li>{{cssxref("font-variant-position")}} : permet de contrôler l'utilisation de glyphes alternatifs de moindre taille pour les textes positionnés en indice ou en exposant par rapport à la ligne de base.</li> + <li>{{cssxref("font-size-adjust")}} : permet d'ajuster la taille visuelle de la fonte sans modifier la taille intrinsèque de la fonte.</li> + <li>{{cssxref("font-stretch")}} : permet de choisir des formes alternatives, plus ou moins étirées, d'une police donnée.</li> + <li>{{cssxref("text-decoration-color")}} : définit la couleur utilisée lorsqu'une ligne est dessinée sur, sous ou à travers le texte.</li> + <li>{{cssxref("text-decoration-line")}} : définit le type de ligne décorative qui peut être ajoutée à un élément.</li> + <li>{{cssxref("text-decoration-style")}} : définit le style des lignes dessinées sur le texte.</li> + <li>{{cssxref("text-underline-position")}} : définit la position du soulignement mis en place lorsque la propriété <code>text-decoration-line</code> vaut <code>underline</code>.</li> + <li>{{cssxref("text-rendering")}} : essaie d'optimiser le rendu du texte.</li> +</ul> + +<h2 id="Appliquer_des_fontes">Appliquer des fontes</h2> + +<p>Il existe des milliers de polices, quelques unes sont très connues mais on peut s'y perdre rapidement. La typographie, l'art des polices ne sont pas nouveaux, cela dit, le Web apporte son lot de contraintes spécifiques et les fontes ne sont parfois pas aussi adaptées que sur le papier. Voyons ici comment gérer cela.</p> + +<p>La propriété {{cssxref("font-family")}} vous permet de choisir la police de caractères que vous souhaitez appliquer à votre texte. Cette propriété fonctionne avec une valeur qui s'écrit sous la forme d'une liste de noms de polices, chacun séparé par des virgules. Le navigateur parcourera les polices de gauche à droite afin d'utiliser celle qui est disponible sur la machine.</p> + +<pre class="brush: css">body { + /* Si la police "Open Sans" est disponible, c'est + celle-ci qui serait utilisée pour mettre en forme + le texte. Sinon, ce sera la police Arial qui sera + utilisée et enfin, si Arial n'est pas disponible, + ce sera la police sans-serif disponible, par défaut + sur le système, qui sera utilisée. */ + font-family: "Open Sans", Arial, sans-serif; +}</pre> + +<h3 id="Les_polices_par_défaut">Les polices par défaut</h3> + +<p>Tout d'abord, CSS définit cinq noms de polices génériques : <code>serif</code>, <code>sans-serif</code>, <code>monospace</code>, <code>cursive</code>, et <code>fantasy</code>. Celles-ci sont choisies par le navigateur selon le système d'exploitation utilisé (il est possible que les différents navigateurs choisissent des polices différentes). C'est en quelque sorte les polices de dernier recours à utiliser. Les polices désignées par <code>serif</code>, <code>sans-serif</code> et <code>monospace</code> devraient être assez prévisibles. En revanche, celles désignées par <code>cursive</code> et <code>fantasy</code> sont moins prévisibles et nous vous conseillons donc de les utiliser avec précaution.</p> + +<div class="note"> +<p><strong>Note :</strong> On ne peut jamais être sûr à 100% des polices disponibles sur un ordinateur, aussi, c'est une bonne pratique que de toujours ajouter une police générique en dernier dans la liste des valeurs pour la propriété <code>font-family</code>.</p> +</div> + +<h3 id="Les_polices_adaptées_au_Web">Les polices adaptées au Web</h3> + +<p>Les polices génériques sont convenables mais imprévisibles. La plupart du temps, on souhaite mieux contrôler la police qui sera utilisée pour afficher le contenu textuel. On a vu juste avant qu'il était impossible de déterminer à coup sûr les polices disponibles sur un système. Toutefois, on peut s'aider de statistiques pour parier sur différentes polices fréquemment utilisées. Parmi les différents systèmes d'exploitation courants (Windows, Mac, certaines distribution Linux grand public, Android, et iOS), il existe un ensemble de polices largement répandues. Ces polices sont parfois appelées « <em>web fonts</em> » car elles peuvent être utilisées sans trop de risque sur le Web.</p> + +<p>Bien entendu, les systèmes d'exploitation évoluent et la liste des <em>web</em><em> fonts</em> peut évoluer au cour du temps. Cependant, à l'heure où nous écrivons ces lignes, on peut considérer que les polices suivantes sont largement répandues (notamment grâce à l'initiative <em><a href="https://fr.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the Web</a></em> de Microsoft à la fin des années 90) :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col" style="white-space: nowrap;">Type générique</th> + <th scope="col">Notes</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td>On considère généralement qu'il est préférable d'ajouter également <em>Helvetica</em> devant <em>Arial</em>. En effet, les polices sont presque identiques et bien qu'Arial soit plus répandue, <em>Helvetica</em> est plus appréciée (en termes de forme).</td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td>Certains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée <em>Courier</em>. C'est une bonne pratique d'utiliser les deux tout en favorisant <em>Courier New</em> dans l'ordre des priorités.</td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td> </td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td>Certains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée <em>Times</em>. C'est une bonne pratique d'utiliser les deux tout en favorisant <em>Times New Roman</em> dans l'ordre des priorités.</td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>serif</td> + <td>Attention, celle-ci n'est pas fortement répandue sur les systèmes d'exploitation mobiles.</td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td> </td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note :</strong> Parmi les différentes ressources disponibles sur le sujet, <a href="http://www.cssfontstack.com/">cssfontstack.com</a> maintient une liste des <em>web fonts</em> disponibles sur Windows et Mac OS. Cela peut vous aider à décider les polices à utiliser pour votre site.</p> +</div> + +<h3 id="Les_polices_personnalisées">Les polices personnalisées</h3> + +<p>Enfin, si vous souhaitez utiliser votre propre police sur votre site web, la meilleur façon reste d'intégrer cette police dans votre site web.</p> + +<div class="warning"> +<p><strong>Attention :</strong> les polices sont sujettes au droit d'auteur (<em>copyright</em>) et vous devez donc vérifier, avant de les utiliser, que vous pouvez les intégrer sur votre site. Certains sites vous permettent d'en utiliser certaines gratuitement, comme <a href="https://www.google.com/fonts">Google Fonts</a>. D'autres, vous permettent d'acheter le droit d'utiliser certaines polices comme, par exemple, <a href="http://www.fonts.com/">fonts.com</a>.</p> +</div> + +<p>L'intégration d'une police personnalisée se fait en trois étapes :</p> + +<ol> + <li>Assurez-vous que la police soit disponible sur votre serveur web. Pour assurer une meilleure rétro-compatibilité, la police doit idéalement être disponible sous quatre format : + <ul> + <li><a href="https://fr.wikipedia.org/wiki/Web_Open_Font_Format">WOFF et WOFF2</a>, supportés par les navigateurs modernes (WOFF2 remplacera WOFF)</li> + <li><a href="https://fr.wikipedia.org/wiki/Embedded_OpenType">EOT</a>, supporté par {{Glossary("Microsoft Internet Explorer","Internet Explorer")}} avant sa version 9</li> + <li>SVG, supporté par l'ancienne version de Safari pour iOS (il est peu probable que celle-ci soit encore utilisée)</li> + <li><a href="https://fr.wikipedia.org/wiki/OpenType">OTF</a>, supporté par les anciennes versions des navigateurs par défaut Android.</li> + </ul> + </li> + <li>Utilisez la déclaration {{cssxref("@font-face")}} en utilisant les adresses des fichiers et les autres caractéristiques (comme le nom)</li> + <li>Utilisez le nom déclaré pour la police personnalisée dans la liste des valeurs fournies à la propriété {{cssxref("font-family")}}.</li> +</ol> + +<p>Voici un exemple d'un telle mise en œuvre.</p> + +<p>On utilisera ce fragment de code HTML :</p> + +<pre class="brush: html"><p> + He dressed himself "all in his best," and at last + got out into the streets. The people were by this + time pouring forth, as he had seen them with the + Ghost of Christmas Present; and walking with his + hands behind him, Scrooge regarded every one with + a delighted smile. He looked so irresistibly + pleasant, in a word, that three or four good-humoured + fellows said, "Good morning, sir! A merry Christmas + to you!" And Scrooge said often afterwards, that of + all the blithe sounds he had ever heard, those were + the blithest in his ears. +</p> +<p class="fancy"> + He dressed himself "all in his best," and at last + got out into the streets. The people were by this + time pouring forth, as he had seen them with the + Ghost of Christmas Present; and walking with his + hands behind him, Scrooge regarded every one with + a delighted smile. He looked so irresistibly + pleasant, in a word, that three or four good-humoured + fellows said, "Good morning, sir! A merry Christmas + to you!" And Scrooge said often afterwards, that of + all the blithe sounds he had ever heard, those were + the blithest in his ears. +</p></pre> + +<p>Et on appliquera cette feuille de style CSS :</p> + +<pre class="brush: css">/* Une disposition simple pour voir + les paragraphes côte à côte. */ +p { + box-sizing: border-box; + width : 50%; + padding : 1em; + float : left; +} + +@font-face { + /* Là on définit le nom pour la police + personnalisé, on l'utilisera dans la + liste */ + font-family:"Open Sans"; + + /* Ici, on liste les fichiers de police, + la syntaxe est détaillée ici : + http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/ */ + src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot"); + src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot?#iefix") format('embedded-opentype'), + url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.3f642fa3ea74.woff2") format('woff2'), + url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.ac327c4db628.woff") format('woff'), + url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.cd7296352d15.ttf") format('truetype'), + url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.f641a7d4e80f.svg#OpenSansRegular") format('svg'); + + /* Ici, on définit la graisse et le style de la police */ + font-weight:normal; + font-style:normal; +} + +/* Enfin, il suffit simplement d'ajouter la + police personnalisée dans la liste des valeurs + pour font. */ +.fancy { + font: 0.85rem/150% "Open Sans", Helvetica, Arial, sans-serif; +} +</pre> + +<p>Le résultat obtenu sera :</p> + +<p>{{EmbedLiveSample('Les_polices_personnalisées', '100%', '320')}}</p> + +<h2 id="La_disposition_du_texte">La disposition du texte</h2> + +<p>La disposition du teexte concerne les aspects liés aux sauts de ligne et à la position du texte par rapport à la ligne de base ou par rapport à son contenant.</p> + +<ul> + <li>{{cssxref("line-height")}} : définit la hauteur d'une ligne de texte, quelle que soit la taille actuelle de la police utilisée.</li> + <li>{{cssxref("text-align")}} : décrit la façon dont le texte est aligné par rapport à son bloc.</li> + <li>{{cssxref("text-indent")}} : définit l'espace qu'on ajoute à gauche du texte avant de commencer la première ligne du texte.</li> + <li>{{cssxref("text-overflow")}} : définit la façon dont le contenu qui « déborde » est affiché (ou non).</li> + <li>{{cssxref("white-space")}} : définit la façon dont les blancs et les sauts de ligne sont gérés au sein de l'élément.</li> + <li>{{cssxref("word-break")}} : définit si on ajoute ou non des césures au sein des mots pour passer à la ligne.</li> + <li>{{cssxref("word-spacing")}} : ajuste la distance entre les mots (inter mot).</li> +</ul> + +<p>De la même façon qu'avec la mise en forme du texte, la disposition du texte est concernée par quelques propriétés expérimentales, assez peu supportées par certains navigateurs ou dédiées aux langues non latines. Celles-ci permettent de résoudre plusieurs problèmes d'ordre typographique et il est donc intéressant de les connaître (sans que cela doive devenir une source de préoccupation majeure).</p> + +<ul> + <li>{{cssxref("direction")}} : définit la direction du texte (cela dépend de la langue utilisée et généralement, on laissera cette tâche à HTML car cet aspect est fortement lié au contenu même).</li> + <li>{{cssxref("hyphens")}} : active ou désactive l'ajout de trait d'union pour former les césures en fin de ligne.</li> + <li>{{cssxref("line-break")}} : active ou désactive les sauts de lignes pour les langues asiatiques.</li> + <li>{{cssxref("text-align-last")}} : définit la façon dont la dernière ligne d'un bloc (ou une ligne avant un saut à la ligne explicite) est alignée.</li> + <li>{{cssxref("text-orientation")}} : définit l'orientation du texte sur une ligne.</li> + <li>{{cssxref("word-wrap")}} : définit si le navigateur ajoute ou non des retours à la ligne automatiques pour éviter un débordement du texte.</li> + <li>{{cssxref("writing-mode")}} : définit si les lignes du texte sont disposées horizontalement ou verticalement et la direction selon laquelle le bloc s'étend.</li> +</ul> + +<h2 id="La_suite">La suite</h2> + +<p>Avec tous ces éléments, vous devriez avoir un bon aperçu des outils CSS qui vous permettent de mettre en forme du texte. Nous vous encourageons à tester ces différentes propriétés et à bidouiller avec ces différents concepts pour concrétiser ces notions. Une fois à l'aise avec ces notions, n'hésitez pas à continuer avec un autre sujet : <a href="/fr/docs/Learn/CSS/Howto/create_fancy_boxes">créer de belles boîtes</a> contenant du texte.</p> diff --git a/files/fr/conflicting/learn/css/styling_text/fundamentals_8249b1bf53d09b06ed51f43697880b5b/index.html b/files/fr/conflicting/learn/css/styling_text/fundamentals_8249b1bf53d09b06ed51f43697880b5b/index.html new file mode 100644 index 0000000000..61bccf32f1 --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/fundamentals_8249b1bf53d09b06ed51f43697880b5b/index.html @@ -0,0 +1,63 @@ +--- +title: Styles de texte +slug: CSS/Premiers_pas/Styles_de_texte +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Web/Guide/CSS/Getting_started/Text_styles +--- +<p> </p> +<p>Cette page vous donne plus d'exemples de styles de texte.</p> +<p>Vous modifierez votre feuille de style pour utiliser différentes polices.</p> +<h3 id="Information_:_les_styles_de_texte" name="Information_:_les_styles_de_texte">Information : les styles de texte</h3> +<p>CSS dispose de plusieurs propriétés pour les styles de texte.</p> +<p>Il existe une propriété raccourcie pratique, <code>font</code>, que vous pouvez utiliser pour spécifier plusieurs choses à la fois — par exemple :</p> +<ul> <li>Les styles gras, italique et petites majuscules (petites capitales)</li> <li>La taille du texte</li> <li>La hauteur de ligne</li> <li>La police utilisée</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> <caption>Exemple </caption> <tbody> <tr> <td> <div style="width: 40em;"> <pre class="eval"> +p {font: italic 75%/125% "Comic Sans MS", cursive;} +</pre> </div> <p>Cette règle change plusieurs propriétés de la police, et rend tous les paragraphes en italique.</p> <p>La taille du texte est définie aux trois quarts de la taille dans l'élément parent de chaque paragraphe, et la hauteur de ligne à 125% (un petit peu plus espacé qu'habituellement).</p> <p>La police choisie est Comic Sans MS, mais si celle-ci n'est pas disponible le navigateur utilisera sa police cursive (écriture à la main) par défaut.</p> <p>La règle a un effet de bord qui est de désactiver le gras et les petites majuscules (en les définissant à <code>normal</code>).</p> </td> </tr> </tbody> +</table> +<h4 id="Polices" name="Polices">Polices</h4> +<p>Il n'est pas possible de prédire les polices que les lecteurs de votre document auront. C'est pourquoi, lorsque vous spécifiez une police, il est utile de donner une liste d'alternatives, dans l'ordre de préférence.</p> +<p>À la fin de la liste, indiquez l'un des types de polices génériques par défaut : <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> ou <code>monospace</code>. (Celles-ci correspondent souvent à des paramètres définis dans les options de votre navigateur.)</p> +<p>Si la police ne permet pas d'afficher certaines parties du document, le navigateur peut lui substituer une autre police. Par exemple, le document peut contenir des caractères spéciaux qui ne sont pas définis dans la police. Si le navigateur arrive à trouver une autre police qui dispose de ces caractères, il utilisera celle-ci.</p> +<p>Pour spécifier une police particulière, utilisez la propriété <code>font-face</code>.</p> +<h4 id="Taille_de_police" name="Taille_de_police">Taille de police</h4> +<p>Les lecteurs utilisant des navigateurs Mozilla peuvent choisir la taille de police par défaut dans les options et changer la taille du texte pendant la lecture d'une page, il est donc recommandé d'utiliser des tailles de police relatives où c'est possible.</p> +<p>Vous pouvez utiliser certaines valeurs prédéfinies pour la taille, comme <code>small</code>, <code>medium</code> et <code>large</code>. Vous pouvez également utiliser des valeurs relatives à la taille de police de l'élément parent, comme ceci : <code>smaller</code>, <code>larger</code>, <code>150%</code> ou <code>1.5</code>.</p> +<p>Si nécessaire, vous pouvez spécifier une taille précise, comme : <code>12px</code> (12 pixels) pour un dispositif d'affichage ou <code>12pt</code> (12 points) pour une imprimante. Cette taille est théoriquement la largeur d'une lettre m, mais la manière dont la taille visible est liée à la taille spécifiée dépend d'une police à l'autre.</p> +<p>Pour spécifier une taille de police particulière, utilisez la propriété <code>font-size</code>.</p> +<h4 id="Hauteur_de_ligne" name="Hauteur_de_ligne">Hauteur de ligne</h4> +<p>La hauteur de ligne spécifie l'espacement entre les lignes. Si votre document dispose de longs paragraphes s'étalant sur de nombreuses lignes, un espacement plus grand que d'habitude peut le rendre plus facile à lire, particulièrement si la taille de police est petite.</p> +<p>Pour spécifier une hauteur de ligne particulière, utilisez la propriété <code>line-height</code>.</p> +<h4 id="D.C3.A9coration" name="D.C3.A9coration">Décoration</h4> +<p>La propriété séparée <code>text-decoration</code> permet de spécifier d'autres styles, comme <code>underline</code> (souligné), ou <code>line-through</code> (barré). Vous pouvez la définir à <code>normal</code> pour enlever explicitement toute décoration.</p> +<h4 id="Autres_propri.C3.A9t.C3.A9s" name="Autres_propri.C3.A9t.C3.A9s">Autres propriétés</h4> +<p>Pour spécifier l'italique, utilisez <code>font-style: italic;</code><br> +Pour spécifier le gras, utilisez <code>font-weight: bold;</code><br> +Pour spécifier de petites majuscules, utilisez <code>font-variant: small-caps;</code></p> +<p>Pour désactiver individuellement chacune de ces propriétés, vous pouvez spécifier la valeur <code>normal</code> ou <code>inherit</code>.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> <caption>Plus de détails </caption> <tbody> <tr> <td>Vous pouvez spécifier des styles de texte de bien d'autres manières. <p>Par exemple, certaines des propriétés mentionnées ici disposent d'autres valeurs possibles.</p> <p>Dans une feuille de style complexe, évitez d'utiliser la propriété raccourcie <code>font</code>, à cause de ses effets de bord (mise à zéro des autres propriétés).</p> <p>Pour plus de détails sur l'ensemble des propriétés liées aux polices, consultez <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> dans la spécification CSS. Pour plus de détails sur la décoration du texte, consultez-y la section <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p> </td> </tr> </tbody> +</table> +<h3 id="Action_:_sp.C3.A9cification_de_polices" name="Action_:_sp.C3.A9cification_de_polices">Action : spécification de polices</h3> +<p>Pour un document simple, vous pouvez définir la police sur l'élément <small>BODY</small>, et tout le reste du document en héritera.</p> +<p>Éditez votre fichier CSS. Ajoutez cette règle pour changer la police globale. Le haut du fichier CSS est un endroit logique pour ce faire, mais la règle a le même effet où qu'elle soit placée :</p> +<div style="width: 40em;"> +<pre class="eval">body {font: 16px "Comic Sans MS", cursive;} +</pre> +</div> +<p>Ajoutez un commentaire expliquant la règle, et des espaces pour respecter la mise en page choisie.</p> +<p>Actualisez dans votre navigateur pour en voir l'effet. Si votre système dispose de Comic Sans MS, ou d'une autre police cursive qui ne supporte pas l'italique, votre navigateur choisira une police différente pour le texte en italique à la première ligne :</p> +<table style="border: 2px outset #36b; padding: 1em;"> <tbody> <tr> <td style="font: italic 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td> </tr> <tr> <td style="font: 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td> </tr> </tbody> +</table> +<p>Depuis la barre de menus, choisissez Affichage – Taille du texte – Plus grande. Bien que vous ayez spécifié précisément 16 pixels dans le style, un utilisateur lisant le document peut en changer la taille.</p> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe;"> <caption>Challenge </caption> <tbody> <tr> <td>Sans rien changer d'autre, rendez les six lettres initiales deux fois plus grandes que la taille normale dans la police serif par défaut du navigateur : <table> <tbody> <tr> <td style="font: italic 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td> </tr> <tr> <td style="font: 16px 'Comic Sams MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td> </tr> </tbody> </table> </td> </tr> </tbody> +</table> +<p> </p> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Votre document d'exemple utilise déjà plusieurs noms de couleurs. La page suivante liste les noms des couleurs standard et explique comment en spécifier d'autres : <strong><a href="/fr/CSS/Premiers_pas/Couleurs" title="fr/CSS/Premiers_pas/Couleurs">Couleurs</a></strong></p> + +<p>{{ languages( { "en": "en/CSS/Getting_Started/Text_styles", "it": "it/Conoscere_i_CSS/Stili_del_testo", "ja": "ja/CSS/Getting_Started/Text_styles", "pl": "pl/CSS/Na_pocz\u0105tek/Style_tekstowe", "pt": "pt/CSS/Como_come\u00e7ar/Estilos_de_texto" } ) }}</p> diff --git a/files/fr/conflicting/learn/css/styling_text/fundamentals_9e7ba587262abbb02304cbc099c1f0d8/index.html b/files/fr/conflicting/learn/css/styling_text/fundamentals_9e7ba587262abbb02304cbc099c1f0d8/index.html new file mode 100644 index 0000000000..5a9fcb6c63 --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/fundamentals_9e7ba587262abbb02304cbc099c1f0d8/index.html @@ -0,0 +1,270 @@ +--- +title: Mise en forme basique du texte avec CSS +slug: Apprendre/CSS/formatage_texte_CSS +tags: + - Beginner + - CSS + - CodingScripting + - Example + - Guide + - Learn + - NeedsActiveLearning +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Learn/CSS/Basic_text_styling_in_CSS +--- +<div>{{IncludeSubnav("/fr/Apprendre")}}</div> + +<div class="summary"> +<p>Cet article explique comment mettre en forme le texte de documents {{Glossary("HTML")}} en utilisant les propriétés {{Glossary("CSS")}} les plus communes.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devez être familier avec <a href="/fr/Apprendre/CSS/CSS_properties">les propriétés CSS et comment les utiliser</a>.</td> + </tr> + <tr> + <th scope="row">Objectif :</th> + <td>Vous allez apprendre comment mettre en forme du texte en utilisant les propriétés CSS adéquates.</td> + </tr> + </tbody> +</table> + +<p>Depuis sa première mouture, CSS s'est spécialisé dans la mise en forme (autrement dit l'apparence) des sites web, permettant au HTML de se concentrer uniquement sur la structure du document.</p> + +<p>Avec plus de 250 propriétés, CSS est très riche. Dans cet article, nous n'en aborderons que certaines, utilisées pour le formatage du texte :</p> + +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("font-family")}} (pour utiliser différentes polices)</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("font-style")}} (pour, par exemple, mettre en italique)</li> + <li>{{cssxref("line-height")}}</li> + <li>{{cssxref("text-align")}}</li> + <li>{{cssxref("text-decoration")}} (pour ajouter des lignes dessous, dessus et en travers du texte)</li> + <li>{{cssxref("text-transform")}} (pour modifier la casse du texte)</li> + <li>{{cssxref("text-shadow")}}</li> +</ul> + +<p>Une fois que vous vous serez familiarisé avec ces propriétés, nous vous encourageons à explorer d'autres propriétés de formatage du texte telles que {{cssxref("hyphens")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-indent")}}, {{cssxref("text-overflow")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-spacing")}}), les sélecteurs spécifiques ({{cssxref("::first-letter")}} ou {{cssxref("::first-line")}}), ou les unités CSS utilisées pour la taille du texte ({{cssxref("length","em","#em")}} et {{cssxref("length","rem","#rem")}}). Pour personnaliser totalement votre texte, vous pouvez également utiliser vos propres polices de caractère grâce à {{cssxref("@font-face")}}.</p> + +<h2 id="Pédagogie_active">Pédagogie active</h2> + +<p><em>Il n'y a actuellement pas de contenu pour cette section. <a href="/fr/docs/MDN/D%C3%A9buter_sur_MDN">Vous pouvez néanmoins contribuer</a>.</em></p> + +<h2 id="Aller_plus_loin">Aller plus loin</h2> + +<h3 id="color"><code>color</code></h3> + +<p>La propriété {{cssxref("color")}} modifie la couleur du texte en faisant appel à divers {{cssxref("color_value","systèmes de notation","#rgb()")}} : hexadécimal, rouge-vert-bleu (aussi appelé RGB pour <em>red-green-blue</em>), teinte-saturation-lumière (ou HSL pour <em>hue-saturation-lightness</em>). Vous pouvez aussi utiliser un {{cssxref("color_value","mot-clé désignant une couleur","#Mots-cl.C3.A9s")}}. Voici un exemple illustrant comment colorer le texte en vert.</p> + +<p>Pour commencer, intéressons nous au fragment de code HTML suivant :</p> + +<pre class="brush: html"><p>Je suis un paragraphe vert.</p></pre> + +<p>Maintenant appliquons le style ci-dessous :</p> + +<pre class="brush: css">p { + color: green; /* C'est vert avec le mot clé "green" */ + color: <code>#008000; /* C'est vert avec la notation hexadecimale */</code> + color: rgb(0,128,0); /* <code>C'est vert avec la notation RGB</code> */ + color: hsl(120, 100%, 25%);/* C'est vert avec la notation HSL */ +}</pre> + +<div class="note"> +<p><strong>Astuce de pro :</strong> le code précédent peut-être très utile en CSS. En effet, les navigateurs qui supportent mal la gestion de couleurs HSL, se rabattent sur le modèle RGB, puis hexadécimal, et en dernier recours aux mots-clés s'ils ne supportent aucune autre syntaxe.</p> +</div> + +<p>Voici le résultat :</p> + +<p>{{EmbedLiveSample('color','100%')}}</p> + +<h3 id="font-family"><code>font-family</code></h3> + +<p>La propriété {{cssxref("font-family")}} est très utile pour ajouter une touche personnelle à votre site, <code>font-family</code> définit en effet une liste de polices dans lesquelles votre texte peut apparaître.</p> + +<p>La valeur de cette propriété est une liste de polices séparées par des virgules. Si le navigateur ne peut pas trouver la première police de la liste, il passe alors à la suivante et l'applique au texte concerné. Si aucune police de la liste ne fonctionne, alors le navigateur utilise sa propre police par défaut. Ce peut-être <code>serif</code>, <code>sans-serif</code> ou <code>monospace</code>. Voici un exemple :</p> + +<p>Pour notre prochain exemple, prenons le fragment de code HTML suivant :</p> + +<pre class="brush: html"><p class="serif">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> +<p class="sansserif">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></pre> + +<p>Appliquons lui le style suivant :</p> + +<pre class="brush: css" style="font-size: 14px;">.sansserif { + font-family: Helvetica, Arial, sans-serif; +} + +.serif { + font-family: "Times New Roman", Times, serif; +} +</pre> + +<p>Voici le résultat :</p> + +<p>{{EmbedLiveSample('font-family','100%')}}</p> + +<h3 id="font-size"><code>font-size</code></h3> + +<p>La propriété {{cssxref("font-size")}} ajuste la taille du texte, en utilisant une de ces unités :</p> + +<dl> + <dt>{{cssxref("length","px","#px")}}</dt> + <dd>L'unité <code><strong>px</strong></code> détermine la hauteur en pixels de votre texte.</dd> + <dt>{{cssxref("length","em","#em")}}</dt> + <dd><code><strong>em</strong></code> spécifie la largeur de la lettre "M" avec la police utilisée. Les <em>ems</em> sont des unités de typographie communes, parce qu'elles permettent de définir facilement des tailles relatives par rapport à la police et taille actuelle. Ainsi, en indiquant une taille de police de <code>1.5em,</code> on précise que la taille du texte devrait faire 1,5 fois la taille de la lettre "M" de l'élément parent. Si l'élément parent n'a pas de taille absolue, <code>1em</code> vaut par défaut <code>16px</code>.</dd> + <dt>{{cssxref("length","rem","#rem")}}</dt> + <dd><code><strong>rem</strong></code> est beaucoup plus facile à utiliser comme unité qu'<em>em</em> car la taille du texte dépend de la taille initiale du texte, au lieu de dépendre de l'héritage d'un quelconque élement parent.</dd> + <dt>{{cssxref("length","pt","#pt")}}</dt> + <dd><code><strong>pt</strong></code> est l'abréviation de <strong>point</strong>, une unité typographique très courante dans le monde de l'impression. Les navigateurs transposent les points en pixels, mais avec une certaine irrégularité, il est donc préférable d'éviter cette unité.</dd> +</dl> + +<p>Voici une illustration de la différence entre <code>em</code> et <code>rem</code>, grâce à ce fragment de code HTML :</p> + +<pre class="brush: html"><div>Je mesure 1rem (par défaut) + <div class="rem">Je mesure 0.8rem. + <div class="rem">Je mesure aussi 0.8rem. + <div class="rem">Ici, je mesure également 0.8rem.</div> + </div> + </div> +</div> + +<hr> + +<div>Je mesure 1em (par défaut) + <div class="em">Je mesure 0.8em. + <div class="em">Je mesure aussi 0.8em. + <div class="em">Ici, je mesure également 0.8em.</div> + </div> + </div> +</div></pre> + +<p>En utilisant le style suivant :</p> + +<pre class="brush: css">.rem { + font-size: 0.8rem; +} + +.em { + font-size: 0.8em +} +</pre> + +<p>Le résultat obtenu est le suivant :</p> + +<p>{{EmbedLiveSample('font-size','100%')}}</p> + +<h3 id="font-weight"><code>font-weight</code></h3> + +<p>La propriété {{cssxref("font-weight")}} définit l'épaisseur des caractères, généralement à l'aide des valeurs <code>normal</code> ou <code>bold</code>. Voici un exemple :</p> + +<pre class="brush: css">.bold { + font-weight: bold; +}</pre> + +<h3 id="font-style"><code>font-style</code></h3> + +<p>La propriété {{cssxref("font-style")}} détermine si le texte doit être affiché normalement, en italique ou en oblique respectivement grâce à <code>normal</code>, <code>italic</code>, et <code>oblique</code> :</p> + +<pre class="brush: css">.italic { + font-style: italic; +}</pre> + +<h3 id="line-height"><code>line-height</code></h3> + +<p>La propriété {{cssxref("line-height")}} définit la hauteur de la ligne en utilisant les mêmes unités que la propriété <code>font-size</code>.</p> + +<pre class="brush: css">.line { + line-height: 80%; +}</pre> + +<div class="note"> +<p><strong>Astuce de pro :</strong> Vous pouvez appliquer les propriétés {{cssxref("font-style")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}} à l'aide d'une seule propriété « parente » : {{cssxref("font")}}</p> + +<p>Les deux exemples suivants afficheront donc exactement la même chose :</p> + +<pre class="brush: css">body { + font: bold 1em/150% Helvetica, Arial, sans-serif; +}</pre> + +<pre class="brush: css">body { + font-weight: bold; + font-size : 1em; + line-height: 150%; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<h3 id="text-transform"><code>text-transform</code></h3> + +<p>La propriété {{cssxref("text-transform")}} modifie la casse du texte (autrement dit, elle permet d'afficher du texte en MAJUSCULES, minuscules ou en Capitales), comme le montre cet exemple :</p> + +<pre class="brush: css">.transform { + text-transform: uppercase; +}</pre> + +<h3 id="text-align"><code>text-align</code></h3> + +<p>La propriété {{cssxref("text-align")}} contrôle l'alignement du texte, en définissant l'alignement à gauche, à droite, ou centré ou justifié (<code>left</code>, <code>right</code>, <code>center</code>, ou <code>justified)</code> : </p> + +<pre class="brush: css">.center { + text-align: center; +}</pre> + +<h3 id="text-decoration"><code>text-decoration</code></h3> + +<p>La propriété {{cssxref("text-decoration")}} permet de faire apparaitre une ligne <u>en dessous</u>, <span style="text-decoration: overline;">au dessus</span>, ou <s>à travers de votre texte</s>. La valeur par défaut <code>none</code> supprime tout formatage. Voici, par exemple, comment barrer un texte en CSS :</p> + +<pre class="brush: css">.strike { + text-decoration: line-through; +}</pre> + +<h3 id="text-shadow"><code>text-shadow</code></h3> + +<p>La propriété {{cssxref("text-shadow")}} fait apparaître une ou plusieurs ombres derrière le texte à l'aide de quatre paramètres : le décalage horizontal, le décalage vertical, la taille du rayon et la couleur de l'ombre portée. On peut appliquer plusieurs ombres en définissant une liste d'ombres séparées par des virgules et obtenir ainsi à des effets visuels étonnants. Voici trois exemples qui utilisent le code HTML ci-après :</p> + +<pre class="brush: html"><p class="simple">COUCOU</p> +<p class="double">COUCOU</p> +<p class="feu">COUCOU</p> +</pre> + +<p>Si on applique maintenant ces différents styles :</p> + +<pre class="brush: css">p { + /* basic font setting */ + font: bold 3em Impact, sans-serif; + text-align: center; + letter-spacing: 2px +} + +.simple { + text-shadow: 2px 3px 5px rgba(0,0,0,0.3); +} + +.double { + text-shadow: 2px 2px 0 white, + 4px 4px 0 black; +} + +.feu { + color: white; + text-shadow: 0 0 2px #fefcc9, + 1px -1px 3px #feec85, + -2px -2px 4px #ffae34, + 2px -4px 5px #ec760c, + -2px -6px 6px #cd4606, + 0 -8px 7px #973716, + 1px -9px 8px #451b0e; +} +</pre> + +<p>Voici le résultat final :</p> + +<p>{{EmbedLiveSample('text-shadow','100%', 400)}}</p> + +<h2 id="Prochaines_étapes">Prochaines étapes</h2> + +<p id="CSS_text_styling">Vous pouvez bien sûr utiliser différentes combinaisons de ces propriétés pour parvenir au résultat visuel souhaité. Pour poursuivre votre apprentissage, vous pouvez jeter un œil à la façon d'<a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web">utiliser le CSS dans une page web</a> ou à notre <a href="/fr/docs/Web/CSS/Tutorials">tutoriel CSS</a>.</p> diff --git a/files/fr/conflicting/learn/css/styling_text/styling_lists/index.html b/files/fr/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..3b25f0218c --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,47 @@ +--- +title: personnaliser une liste +slug: Apprendre/CSS/Comment/personnaliser_une_liste +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Learn/CSS/Howto/customize_a_list +--- +<p>{{draft}}</p> + +<p class="summary">Les listes sont des structures très répandues en HTML et les CSS apportent un ensemble complet de propriétés pour leur donner l'apparence que vous voulez. Comprendre comment utiliser et modifier les styles par défaut est une compétence ordinaire dont vous aurez besoin dès que vous utiliserez les listes.</p> + +<p>Les listes {{Glossary("HTML")}} sont des structures très simples et se trouvent sous deux formes différentes : ordonnée ou non. Elles utilisent les balises {{HTMLElement('ul')}}, {{HTMLElement('ol')}}, et {{HTMLElement('li')}}. Vous trouverez tous les détails dans <a href="/fr/Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML">notre article dédié</a>, mais pour le reste de cet article, nous utiliserons le code HTML suivant pour appliquer les styles :</p> + +<pre class="brush: html"><ul> + <li>Je suis un élément de liste</li> + <li>Je suis un autre élément de liste</li> + <li> + <ul> + <li>Je suis un élément de liste imbriqué</li> + <li>Je suis un autre élément de liste imbriqué</li> + </ul> + </li> +</ul></pre> + +<h2 id="Styles_dédiés">Styles dédiés</h2> + +<p>Les CSS fournissent un jeu complet de propriétés pour gérer les puces :</p> + +<ul> + <li>{{cssxref('list-style')}}<br> + Une propriété qui regroupe la gestion de toutes les propriétés suivantes</li> + <li>{{cssxref('list-style-type')}}<br> + Le type de puce à afficher au début de chaque élément de liste</li> + <li>{{cssxref('list-style-position')}}<br> + Indique si la puce doit être affichée à l'intérieur ou à l'extérieur de la boîte encadrant l'élement de liste.</li> + <li>{{cssxref('list-style-image')}}<br> + Permet d'utiliser une image personnalisée au lieu d'un type de puce prédéfini.</li> +</ul> + +<p>En complément, les CSS permettent également d'avoir des <a href="/en-US/docs/Web/CSS/CSS_Lists_and_Counters">styles de compteurs personnalisés</a> qui vont très bien avec les listes.</p> + +<div class="note"> +<p>Les styles de compteurs ne seront pas abordés dans cet article. Si vous souhaitez approfondir ce sujet, nous avons à votre disposition <a href="/fr/docs/Web/CSS/Compteurs_CSS">un article dédié</a>.</p> +</div> + +<h2 id="Indentation_de_liste">Indentation de liste</h2> + +<h2 id="Puces_personnalisées">Puces personnalisées</h2> diff --git a/files/fr/conflicting/learn/css/styling_text/styling_lists_06e9538892250c13976a84639f0dadd2/index.html b/files/fr/conflicting/learn/css/styling_text/styling_lists_06e9538892250c13976a84639f0dadd2/index.html new file mode 100644 index 0000000000..fd091907fe --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/styling_lists_06e9538892250c13976a84639f0dadd2/index.html @@ -0,0 +1,305 @@ +--- +title: Listes +slug: CSS/Premiers_pas/Listes +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +<p> </p> +<p>Cette page explique comment utiliser CSS pour spécifier l'apparence des listes.</p> +<p>Vous créerez un nouveau document d'exemple contenant des listes, et une nouvelle feuille de style habillant celles-ci.</p> +<h3 id="Information_:_les_listes" name="Information_:_les_listes">Information : les listes</h3> +<p>Si vous avez relevé le challenge sur la page précédente (<b><a href="fr/CSS/Premiers_pas/Contenu">Contenu</a></b>), vous avez vu comment on ajoutait du contenu devant un élément pour l'afficher comme un élément de liste.</p> +<p>Mais CSS fournit des propriétés spécialement conçues pour les listes. Il est généralement plus aisé d'utiliser ces propriétés lorsque c'est possible.</p> +<p>Pour spécifier le style d'une liste, utilisez la propriété <code>list-style</code> pour changer le type de marque.</p> +<p>Le sélecteur dans votre règle CSS peut soit sélectionner les éléments de la liste (par exemple example, <code>LI</code>), ou il peut sélectionner l'élément de liste parent (par exemple, <code>UL</code>) afin que les éléments héritent du style.</p> +<h4 id="Listes_non_ordonn.C3.A9es" name="Listes_non_ordonn.C3.A9es">Listes non ordonnées</h4> +<p>Dans une liste + <i> + non ordonnée</i> + , chaque élément de la liste est marqué de la même façon.</p> +<p>CSS propose trois types de marques. Voici comment votre navigateur les affiche :</p> +<ul style="padding-left: 2em;"> + <li style=""><code>disc</code> (rond plein)</li> + <li style=""><code>circle</code> (cercle)</li> + <li style=""><code>square</code> (carré)</li> +</ul> +<p>Vous pouvez également spécifier l'URL d'une image.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Ces règles spécifient différentes marques pour différentes classes d'éléments de liste : + <div style="width: 30em;"> + <pre class="eval"> +li.ouvert {list-style: circle;} +li.ferme {list-style: disc;} +</pre> + </div> + <p>Lorsque ces classes sont utilisées dans une liste, elle différencient les éléments ouverts et ceux qui sont fermés :</p> + <div style="width: 30em;"> + <pre class="eval"> +<UL> + <LI class="ouvert">Lorem ipsum</LI> + <LI class="ferme">Dolor sit</LI> + <LI class="ferme">Amet consectetuer</LI> + <LI class="ouvert">Magna aliquam</LI> + <LI class="ferme">Autem veleum</LI> +</UL> +</pre> + </div> + <p>Le résultat peut ressembler à ceci :</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul style="padding-right: 6em;"> + <li style="">Lorem ipsum</li> + <li style="">Dolor sit</li> + <li style="">Amet consectetuer</li> + <li style="">Magna aliquam</li> + <li style="">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<h4 id="Listes_ordonn.C3.A9es" name="Listes_ordonn.C3.A9es">Listes ordonnées</h4> +<p>Dans une liste + <i> + ordonnée</i> + , chaque élément de la liste est marqué différemment afin de montrer sa position dans la séquence.</p> +<p>Utilisez la propriété <code>list-style</code> pour spécifier le type de marque :</p> +<ul style="padding-left: 2em;"> + <li style=""><code>decimal</code> (chiffres décimaux)</li> + <li style=""><code>lower-roman</code> (chiffres romains minuscules)</li> + <li style=""><code>upper-roman</code> (chiffres romains majuscules)</li> + <li style=""><code>lower-latin</code> (lettres minuscules)</li> + <li style=""><code>upper-latin</code> (lettres majuscules)</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Cette règle spécifie que les éléments <small>OL</small> de la classe <code>info</code> sont identifiés par des lettres majuscules. + <div style="width: 30em;"> + <pre class="eval"> +ol.info {list-style: upper-latin;} +</pre> + </div> + <p>Les éléments <small>LI</small> de la liste héritent de ce style :</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ol style="padding-right: 6em;"> + <li style="list-style-type: upper-latin;">Lorem ipsum</li> + <li style="list-style-type: upper-latin;">Dolor sit</li> + <li style="list-style-type: upper-latin;">Amet consectetuer</li> + <li style="list-style-type: upper-latin;">Magna aliquam</li> + <li style="list-style-type: upper-latin;">Autem veleum</li> + </ol> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>La propriété <code>list-style</code> est un raccourci. Dans des feuilles de style complexes, il peut être préférable d'utiliser des propriétés séparées pour régler les différentes valeurs. Pour des détails sur ces propriétés séparées, consultez <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#q10">Lists</a> dans la spécification CSS. + <p>Si vous utilisez un langage de balisage comme HTML qui fournit des balises conventionnelles pour les listes ordonnées (<small>OL</small>) et non ordonnées (<small>UL</small>), il est préférable d'utiliser les balises de la manière prévue. Cependant, il est possible d'utiliser CSS pour que des listes <small>UL</small> s'affichent ordonnées et que des listes <small>OL</small> s'affichent non ordonnées si vous le désirez.</p> + <p>Les navigateurs n'implémentent pas tous de la même façon les styles de liste. Ne vous attendez pas à obtenir un résultat identique pour une même feuille de style dans tous les navigateurs.</p> + </td> + </tr> + </tbody> +</table> +<h4 id="Compteurs" name="Compteurs">Compteurs</h4> +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> + <p><strong>Note : </strong> Certains navigateurs ne gèrent pas les compteurs.</p> +</div> +<p>Vous pouvez utiliser les compteurs pour numéroter toutes sortes d'éléments, pas seulement des éléments de liste. Par exemple, dans certains documents, vous pouvez avoir besoin de numéroter les titres ou les paragraphes.</p> +<p>Pour spécifier la numérotation, vous avez besoin d'un + <i> + compteur</i> + (counter) auquel vous devrez donner un nom.</p> +<p>Dans un élément placé avant l'endroit où le comptage doit commencer, remettez le compteur à zéro à l'aide de la propriété <code>counter-reset</code> et le nom de votre compteur. Le parent des éléments à compter est un bon endroit pour faire cela, mais vous pouvez utiliser n'importe quel élément qui précède votre liste.</p> +<p>Dans chaque élément où le compteur doit augmenter, utilisez la propriété <code>counter-increment</code> et le nom de votre compteur.</p> +<p>Pour afficher votre compteur, ajoutez <code>:before</code> ou <code>:after</code> au sélecteur et utilisez la propriété <code>content</code> (comme vous avez fait à la page précédente, <b><a href="fr/CSS/Premiers_pas/Contenu">Contenu</a></b>).</p> +<p>Dans la valeur de la propriété <code>content</code>, spécifiez <code>counter()</code> avec le nom de votre compteur. Optionellement, spécifiez aussi un type. Ceux-ci sont les mêmes que dans la section <b>Listes ordonnées</b> ci-dessus.</p> +<p>Normalement, l'élément qui affiche le compteur l'incrémente également.</p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: 1em;"> + <caption> + Exemple</caption> + <tbody> + <tr> + <td>Cette règle initialise un compteur pour chaque élément <small>H3</small> de la classe <code>numerote</code> : + <div style="width: 30em;"> + <pre class="eval"> +h3.numerote {counter-reset: mynum;} +</pre> + </div> + <p>Cette règle affiche et incrémente le compteur pour chaque élément <small>P</small> de la classe <code>numerote</code> :</p> + <div style="width: 30em;"> + <pre class="eval"> +p.numerote:before { + content: counter(mynum) " : "; + counter-increment: mynum; + font-weight: bold;} +</pre> + </div> + <p>Le résultat ressemble à ceci :</p> + <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> + <tbody> + <tr> + <td><b>Titre</b><br> + <p><b>1 : </b>Lorem ipsum</p> + <p><b>2 : </b>Dolor sit</p> + <p><b>3 : </b>Amet consectetuer</p> + <p><b>4 : </b>Magna aliquam</p> + <p><b>5 : </b>Autem veleum</p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Vous ne pouvez pas utiliser les compteurs s'il n'est pas certain que tous les lecteurs de votre document ont un navigateur qui permet de les afficher. + <p>Si cela s'avère possible, un de leurs avantages est que vous pouvez styler les compteurs d'une façon différente des éléments de liste. Dans l'exemple ci-dessus, les compteurs sont en gras mais les éléments de liste ne le sont pas.</p> + <p>Vous pouvez également utiliser les compteurs de façon plus complexe — par exemple, pour numéroter des, titres, sous-titres et paragraphes dans des documents formels. Pour plus de détails, consultez <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> dans la spécification CSS.</p> + </td> + </tr> + </tbody> +</table> +<h3 id="Action_:_listes_styl.C3.A9es" name="Action_:_listes_styl.C3.A9es">Action : listes stylées</h3> +<p>Créez un nouveau document HTML, <code>doc2.html</code>. Copiez et collez le contenu ci-dessous, en faisant défiler pour vous assurer de l'obtenir en entier :</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre class="eval"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> +<HEAD> +<TITLE>Document exemple 2</TITLE> +<LINK rel="stylesheet" type="text/css" href="style2.css"> +</HEAD> +<BODY> + +<H3 id="oceans">Les océans</H3> +<UL> +<LI>Arctique</LI> +<LI>Atlantique</LI> +<LI>Pacifique</LI> +<LI>Indien</LI> +<LI>Antarctique</LI> +</UL> + +<H3 class="numerote">Paragraphes numérotés</H3> +<P class="numerote">Lorem ipsum</P> +<P class="numerote">Dolor sit</P> +<P class="numerote">Amet consectetuer</P> +<P class="numerote">Magna aliquam</P> +<P class="numerote">Autem veleum</P> + +</BODY> +</HTML> +</pre> +</div> +<p>Créez une nouvelle feuille de style, <code>style2.css</code>. Copiez et collez le contenu ci-dessous :</p> +<div style="width: 48em;"> + <pre class="eval">/* paragraphes numérotés */ +h3.numerote {counter-reset: mynum;} + +p.numerote:before { + content: counter(mynum) " : "; + counter-increment: mynum; + font-weight: bold;} +</pre> +</div> +<p>Si la mise en page et les commentaires ne sont pas à votre goût, modifiez-les.</p> +<p>Ouvrez le document dans votre navigateur. Si votre navigateur gère les compteurs, vous verrez quelque chose comme ci-dessous. Sinon, vous ne verrez pas les nombres (et probablement même pas les deux points) :</p> +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Les océans</p> + <ul style=""> + <li style="">Arctique</li> + <li style="">Atlantique</li> + <li style="">Pacifique</li> + <li style="">Indien</li> + <li style="">Antarctique</li> + </ul> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Paragraphes numérotés</p> + <p><b>1 : </b>Lorem ipsum</p> + <p><b>2 : </b>Dolor sit</p> + <p><b>3 : </b>Amet consectetuer</p> + <p><b>4 : </b>Magna aliquam</p> + <p><b>5 : </b>Autem veleum</p> + </td> + </tr> + </tbody> +</table> +<p> </p> +<table style="border: 1px solid #36b; padding: 1em; background-color: #ffe; width: 60%;"> + <caption> + Challenges</caption> + <tbody> + <tr> + <td>Ajoutez une règle à votre feuille de style pour numéroter les océans en chiffres romains de i à v : + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Les océans</p> + <ul style=""> + <li style="">Arctique</li> + <li style="">Atlantique</li> + <li style="">Pacifique</li> + <li style="">Indien</li> + <li style="">Antarctique</li> + </ul> + </td> + </tr> + </tbody> + </table> + <p><br> + Si votre navigateur gère les compteurs, modifiez votre feuille de style pour identifier les titres avec des lettres majuscules entre parenthèses comme ceci :</p> + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) Les océans</p> + <p><b>. . .</b></p> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Paragraphes numérotés</p> + <p><b>. . .</b></p> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p> </p> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Si vous avez eu des difficultés à comprendre cette page, ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a>page de discussion</a>.</p> +<p>Lorsque votre navigateur affiche votre document, il crée de l'espace autour des éléments lorsqu'il les dispose sur la page.</p> +<p>La page suivante explique comment utiliser CSS pour travailler sur les formes sous-jacentes aux éléments : <b><a href="/fr/docs/CSS/Premiers_pas/Bo%c3%aetes">Boîtes</a></b>.</p> diff --git a/files/fr/conflicting/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/fr/conflicting/learn/getting_started_with_the_web/dealing_with_files/index.html new file mode 100644 index 0000000000..48f1d4cd14 --- /dev/null +++ b/files/fr/conflicting/learn/getting_started_with_the_web/dealing_with_files/index.html @@ -0,0 +1,130 @@ +--- +title: Ouvrir un fichier dans un navigateur web +slug: Apprendre/Ouvrir_un_fichier_dans_un_navigateur_web +tags: + - Beginner + - CodingScripting + - NeedsActiveLearning + - WebMechanics +translation_of: Learn/Getting_started_with_the_web/Dealing_with_files +translation_of_original: Learn/Open_a_file_in_a_browser +--- +<div class="summary"> +<p>Dans article, nous verrons comment ouvrir un fichier avec un navigateur web.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devez au préalable <a href="/fr/Apprendre/Mettre_en_place_un_environnement_de_travail">avoir mis en place un environnement de travail</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre les différentes façons d'ouvrir un fichier, ce qu'est un protocole et comment un protocole peut affecter le résultat obtenu.</td> + </tr> + </tbody> +</table> + +<p>Pour ouvrir un fichier dans votre navigateur web, il existe deux méthode :</p> + +<ol> + <li><strong>Le {{Glossary("protocol")}} {{Glossary("HTTP")}} :</strong> c'est-à-dire utiliser le navigateur pour accéder au fichier de votre serveur web local.</li> + <li><strong>Le protocole <code>file</code> : </strong>celui-ci permet d'accéder directement aux fichiers de votre ordinateur via le système de fichiers (pour cela, on passe par le menu <code>Fichier</code> > <code>Ouvrir un fichier…</code>).</li> +</ol> + +<p>Dans cet article, nous verrons les différences entre ces deux approches et pourquoi celles-ci sont importantes.</p> + +<h2 id="Pédagogie_active">Pédagogie active</h2> + +<p><em>Il n'existe pas encore de matériau interactif pour cet article</em><em>. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p> + +<h2 id="Aller_plus_loin">Aller plus loin</h2> + +<h3 id="Un_fichier_d'exemple">Un fichier d'exemple</h3> + +<p>Prenons un fichier <code>index.html</code> très simple qui utilise une image (nous verrons plus en détails comment utiliser des images dans les articles suivants) :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <title>Coucou</title> +</head> +<body> + <h1>Bonjour !</h1> + <p>Je suis une page web toute simple avec :</p> + <img src="/images/licorne.png" alt="une licorne !"/> +</body> +</html></pre> + +<h3 id="Ouvrir_un_fichier_depuis_le_serveur_local">Ouvrir un fichier depuis le serveur local</h3> + +<p>Si vous placez ce fichier HTML et l'image associée sous la racine du répertoire du serveur web puis que vous ouvrez le site à l'adresse <a href="http://localhost">http://localhost</a> dans votre navigateur, vous devriez obtenir un résultat semblable à celui-ci :</p> + +<p><img alt="Example of a page load through a local web server" src="https://mdn.mozillademos.org/files/11753/Capture%20du%202015-10-12%2011-36-20.png" style="height: 508px; width: 404px;"></p> + +<p>Maintenant, que se passe-t-il si <code>index.html</code> est déplacé autre part sur le serveur (ce qui arrive plus souvent qu'on le croit à première vue) mais que nos autres ressources (par exemple <code>images</code>) sont toujours sitées à la racine ?</p> + +<p>Lorsqu'on fait référence au fichier image, cette référence commence par une barre oblique (<code>/</code>) ce qui signifie que l'URL est <strong>relative au nom de domaine</strong>. Autrement dit, pour accéder à l'image, on remonte à la racine du domaine (en l'occurence <code>localhost</code>) puis à partir de ce point, on suit le chemin spécifié peu importe où est située la ressource à partir de laquelle on souhaite accéder à l'image (le fichier <code>index.html</code> de cet exemple pourrait être placé n'importe où sur le serveur <code>localhost</code>).</p> + +<p><em>Quel que soit le nouvel emplacement de </em><code>index.html</code>, tant que le chemin utilisé pour l'image est <code>/images/licorne.png</code>, le navigateur servira <a href="http://localhost/images/licorne.png">http://localhost/images/licorn.png</a>.</p> + +<p>Par exemple, si le fichier est déplacé sous <code>http://localhost/toto</code>, on pourra toujours voir la licorne :</p> + +<p><img alt="Example of a page not at the root of a local web server" src="https://mdn.mozillademos.org/files/11755/Capture%20du%202015-10-12%2012-11-08.png" style="height: 260px; width: 380px;"></p> + +<h3 id="Ouvrir_un_fichier_local">Ouvrir un fichier local</h3> + +<p>Maintenant, ouvrons un fichier présent sur l'ordinateur. Il existe trois méthodes :</p> + +<ul> + <li>Dans le navigateur, cliquer sur <code>Fichier</code> ⯈ <code>Ouvrir un fichier…</code></li> + <li>Glisser-déposer un fichier dans le navigateur</li> + <li>Sélectionner un fichier HTML en double-cliquant dessus (sous réserve que le logiciel associé aux fichiers <code>.html</code> soit bien votre navigateur)</li> +</ul> + +<p>Le navigateur interprètera toujours le fichier HTML mais n'affichera pas l'image :</p> + +<p><img alt="Example of a page open through the file protocol" src="https://mdn.mozillademos.org/files/11757/Capture%20du%202015-10-12%2012-18-34.png" style="height: 246px; width: 467px;"></p> + +<h4 id="Les_liens_absolus_relatifs_à_un_nom_de_domaine">Les liens absolus relatifs à un nom de domaine</h4> + +<p>Nous ne voyons plus l'image car nous avons utilisé un chemin <em>relatif à un nom de domaine.</em> En effet, nous avons indiqué au navigateur d'afficher une image situé au chemin suivant <code>/images/licorne.png</code>. Le navigateur va donc à la racine du système de fichiers de votre ordinateur et se déplace dans le répertoire <code>images</code> qui n'existe probablement pas. Le navigateur ne parvient pas à trouver l'image, il se résigne à utiliser l'attribut <code>alt</code> (et affiche donc "<code>une licorne !</code>").</p> + +<h4 id="Glossary(AJAX)_et_JavaScript">{{Glossary("AJAX")}} et JavaScript</h4> + +<p>Attention, JavaScript ne fonctionne pas bien avec le protocole <code>file</code>. Ainsi, lorsque vous voudrez lancer une requête {{Glossary("AJAX")}}, cela déclenchera cette procédure :</p> + +<ol> + <li>Chargement du code JavaScript qui remplacera une partie de la page web avec une autre partie.</li> + <li>Récupération de cette « autre partie » à l'adresse <code>http://localhost/ajax/remplacement.html</code>.</li> + <li>Remplacement de la première partie avec la seconde.</li> +</ol> + +<p>Pour que la deuxième étapes fonctionne, {{Glossary("AJAX")}} a besoin d'utiliser le protocole {{Glossary("HTTP")}}. Or, le protocole pour accéder à un fichier local n'est pas <code>http://</code> mais <code>file://</code>. CQFD : on ne peut pas accéder à un fichier local avec une requête AJAX. Cette restriction s'applique également à de nombreuses autres API JavaScript qui ne fonctionnent qu'avec le protocole HTTP. Cela est dû au modèle de sécurité utilisé pour le Web, que nous aborderons dans un autre article.</p> + +<h3 id="Ce_que_nous_avons_appris">Ce que nous avons appris</h3> + +<p>Pour résumer, il est utile de repérer comment un fichier est ouvert dans un navigateur afin de déterminer le contexte dans lequel on se place et pour comprendre les restrictions qui s'appliquent (notamment pour un fichier ouvert en local avec <code>file://</code>). Cela permet parfois d'éviter de penser que le site ne fonctionne pas correctement alors qu'il s'agit uniquement d'une ouverture de fichier malencontreuse.</p> + +<ul> + <li>Lorsqu'on utilise le protocole <code>file</code> pour visualiser une page web, il est nécessaire d'utiliser des URL absolues avec des noms de domaine.</li> + <li>Le protocole <code>file</code> est restreint quant à l'utilisation de JavaScript.</li> +</ul> + +<p>À l'opposé, le protocole <code>file</code> protocol est une méthode simple et efficace pour :</p> + +<ul> + <li>Vérifier l'allure d'un document sans sa mise en forme.</li> + <li>Vérifier l'accessibilité du site lorsque les images ne sont pas disponibles (les images sont alors remplacées par le texte contenu dans l'attribut <code>alt</code>).</li> +</ul> + +<h2 id="Prochaines_étapes">Prochaines étapes</h2> + +<p>Maintenant que nous avons vu les différences entre le protocole <code>http</code> et le protcole <code>file</code>, vous pouvez continuer :</p> + +<ul> + <li><a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML">en créant votre première page web</a> ou</li> + <li><a href="/fr/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">en transférant votre page actuelle vers un serveur distant</a>.</li> +</ul> diff --git a/files/fr/conflicting/learn/getting_started_with_the_web/index.html b/files/fr/conflicting/learn/getting_started_with_the_web/index.html new file mode 100644 index 0000000000..978bfc7c17 --- /dev/null +++ b/files/fr/conflicting/learn/getting_started_with_the_web/index.html @@ -0,0 +1,273 @@ +--- +title: Écrire une simple page HTML +slug: Apprendre/HTML/Écrire_une_simple_page_HTML +tags: + - Beginner + - CodingScripting + - Guide + - HTML + - Learn + - Web Development +translation_of: Learn/Getting_started_with_the_web +translation_of_original: Learn/HTML/Write_a_simple_page_in_HTML +--- +<div class="summary"> +<p>Dans ceta rticle, vous apprendrez à créer une page web simple grâce à {{Glossary("HTML")}}.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devez au préalable avoir <a href="/fr/Apprendre/Commencer_avec_le_web/Installation_outils_de_base">un éditeur de texte</a> et savoir <a href="/en-US/docs/Learn/Open_a_file_in_a_browser">comment ouvrir un fichier dans un navigateur</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Créer une page web que vous pourrez visualiser dans votre navigateur.</td> + </tr> + </tbody> +</table> + +<p>La plus simple des pages web est simplement un fichier {{Glossary("HTML")}} valide. Il suffit donc d'un fichier HTML valide, d'un éditeur de texte et d'un navigateur web. Dans cet article, nous verrons comment utiliser {{Glossary("Balise","quelques balises")}} HTML et comment voir la page dans un navigateur.</p> + +<h2 id="Pédagogie_active">Pédagogie active</h2> + +<p>Tout d'abord, assurez-vous d'avoir un navigateur web et un éditeur de texte avec lequel vous êtes à l'aise. Pour cet article, n'importe quel éditeur de texte conviendra (que ce soit Bloc-notes pour Windows, TextEdit pour Mac ou gedit pour GNU/Linux voire un autre). Une seule remarque : assurez-vous de bien créer des fichiers textes simples, sous TextEdit notamment, vous pouvez choisir l'option « Texte simple » dans le menu « Format ».</p> + +<h3 id="Première_étape_un_fichier">Première étape : un fichier</h3> + +<p>Une page web est, au strict minimum, un fichier HTML. Nous commencerons donc par en créer un. Lancez votre éditeur de texte puis saisissez le texte suivant :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Coucou</title> + </head> + <body> + Cette page est une + page toute simple + </body> +</html></pre> + +<p>Vous pouvez éditer ce fichier comme vous le souhaitez en modifiant par exemple le texte dans les balises <code>title</code> ou <code>body</code>. Lorsque vous enregistrez le fichier, assurez-vous de l'enregister avec l'extension « .html ». Par exemple, le fichier peut être intitulé « ma_page.html ».</p> + +<p>Une fois que vous avez enregistré ce fichier sur votre ordinateur, vous devriez obtenir quelque chose qui ressemble à cette capture (bien entendu, l'allure dépendra de votre système d'exploitation et de votre configuration) :</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11729/Capture%20du%202015-10-12%2009-32-59.png" style="height: 127px; width: 273px;"></p> + +<p>Si vous double-cliquez sur le fichier, celui-ci s'ouvrira dans votre navigateur. Pour ouvrir le fichier dans votre éditeur de texte afin de le modifier, vous pouvez cliquez-droit et choisir le logiciel avec lequel ouvrir le fichier (ici l'éditeur de texte) (sinon, vous pouvez glisser-déposer le fichier dans votre éditeur ou encore choisir de l'ouvrir depuis l'éditeur grâce à l'option « Ouvrir » qui se situe généralement dans le menu « Fichier »). Selon l'éditeur que vous utilisez, vous devriez avoir quelque chose qui ressemble à :</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11731/Capture%20du%202015-10-12%2009-37-47.png" style="height: 241px; width: 517px;"></p> + +<h3 id="Deuxième_étape_un_navigateur_web">Deuxième étape : un navigateur web</h3> + +<p>Dans votre explorateur de fichiers (Windows Explorer sur Windows, Finder sur Mac ou Fichiers sur Ubuntu), repérez le fichier que vous avez créé et ouvrez-le dans votre navigateur web (en double-cliquant dessus ou en glissant-déposant le fichier sur l'icône du navigateur). Le navigateur affiche alors le texte du fichier HTML que vous avez créé et l'onglet affiche le titre de la page. Selon le navigateur et la plateforme que vous utilisez, cela devrait ressembler à :</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11733/Capture%20du%202015-10-12%2009-41-27.png" style="border-style: solid; border-width: 1px; height: 111px; width: 462px;"></p> + +<p>Vous pouvez voir le contenu de la page et le titre dans l'onglet. Toutefois, on voit qu'il n'y a pas de saut de ligne… intéressant.</p> + +<h3 id="Troisième_étape_à_vous_de_jouer_!">Troisième étape : à vous de jouer !</h3> + +<p>Essayez de manipuler le fichier HTML dans tous les sens en ajoutant du texte, en retirant des morceaux pour voir ce que ça donne. Certaines modifications n'empêcheront pas la page de s'afficher dans le navigateur, d'autres en revanche casseront la page et causeront des problèmes d'affichage. Vous verrez alors que le navigateur essaie de corriger certains problèmes.</p> + +<p>La première chose que vous devriez avoir remarqué est que le texte qui est affiché à l'écran est uniquement le texte qui n'est pas contenu entre des chevrons ouvrants et fermants (« < » et « > »). Tout le texte contenu entre ces chevrons forme des {{Glossary("balises")}} qui représentent la structure (ou le squelette) de la page. Tout le contenu affiché est situé à l'intérieur de ces balises.</p> + +<p>Dans notre page d'exemple, on a deux sections : un en-tête contenu dans le bloc {{HTMLElement("head")}} et un « corps » contenu dans le bloc {{HTMLElement("body")}}. Le corps contient le texte qui est affiché sur la page.</p> + +<p>Chaque balise possède une signification particulière et doit être utilisée à bon escient. Par exemple, {{HTMLElement("title")}} est utilisé afin d'indiquer le titre d'une page (qui peut être différent du nom utilisé pour le fichier). On remarque aussi que des balises sont imbriquées dans d'autres balises : {{HTMLElement("title")}} est par exemple contenue dans {{HTMLElement("head")}}.</p> + +<p>Si vous souhaitez ajouter quelque chose à votre page, une image par exemple, vous devrez ajouter une balise pour l'image :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Coucou</title> + </head> + <body> + Cette page est une + page toute simple + <img src="licorne.png" alt="Une image de licorne :)" /> + avec une licorne + </body> +</html></pre> + +<p>Pour obtenir ce résultat, il suffit d'éditer le fichier HTML vu précédemment et d'y ajouter la ligne suivante avec {{HTMLelement("img")}} :</p> + +<pre class="brush: html"><img src="licorne.png" alt="Une image de licorne :)" /></pre> + +<p>Cet élément peut être placé n'importe où dans l'élément {{HTMLElement("body")}}. N'oubliez pas de sauvegarder la page que vous avez modifiée !</p> + +<p>Ensuite, vous devrez ajouter un fichier intitulé "licorne.png" dans le même répertoire que votre fichier HTML. Une fois que c'est fait, rafraîchissez la page dans votre navigateur web (ou réouvrez le fichier dans le navigateur. Vous devriez alors voir la page qui a changé et qui contient une image (n'oubliez pas de sauvegarder votre fichier HTML).</p> + +<p><img alt="Original file for the unicorn image" src="https://mdn.mozillademos.org/files/8495/unicorn_pic.png" style="height: 300px; width: 242px;"></p> + +<div class="note"> +<p><strong>Note :</strong> Vous pouvez télécharger cette image depuis cette page en cliquant-droit sur l'image et en choisissant l'option « Enregistrer l'image sous » du menu contextuel.</p> +</div> + +<p>Pour que cet exemple fonctionne, vous aurez besoin d'avoir les fichier organisés de cette façon sur votre ordinateur :</p> + +<p><img alt="Screenshot of the explorer with 2 files : a html file and a picture file" src="https://mdn.mozillademos.org/files/11735/Capture%20du%202015-10-12%2009-56-10.png" style="height: 167px; width: 289px;"></p> + +<p>La page obtenue devrait alors ressembler à :</p> + +<p><img alt="Screenshot for the example with a picture" src="https://mdn.mozillademos.org/files/11737/Capture%20du%202015-10-12%2009-57-54.png" style="border-style: solid; border-width: 1px; height: 410px; width: 740px;"></p> + +<p>Vous avez pu voir que l'élément{{HTMLElement("img")}} avait des <strong>{{Glossary("attribut","attributs")}}</strong> : ceux-ci permettent de fournir des informations supplémentaires afin de construire l'objet à afficher (dans ce cas, un attribut permet de connaître le nom du fichier à utiliser pour l'image et un autre permet de fournir un texte alternatif qui peut être affiché lorsque l'image ne peut être chargée).</p> + +<p>Cet exemple illustre comment ajouter une image ) votre page web mais vous pouvez utiliser des techniques semblables pour ajouter des musiques, des vidéos et d'autres éléments, rien qu'en utilisant HTML.</p> + +<h2 id="Aller_plus_loin">Aller plus loin</h2> + +<h3 id="Ce_n'est_pas_la_plus_jolie_des_pages_web…">Ce n'est pas la plus jolie des pages web…</h3> + +<p>Comme vous avez pu le voir, cette page web n'est pas non plus un canon de beauté. Cela s'explique car HTML gère uniquement le contenu et sa signification (aussi appelée « sémantique »), il ne gère pas la mise en forme (le « <em>design</em> ») de la page.</p> + +<p>{{Glossary("CSS")}} permet d'enjoliver le contenu en ajoutant des couleurs, en gérant des polices, la mise en page, etc. HTML serea suffisant pour créer des pages web simples. En revanche, pour créer des pages plus complexes ou plus attractives, il faudra appeler CSS voire {{Glossary("JavaScript")}} à la rescousse. HTML permet de construire le contenu, CSS permet de le mettre en forme et JavaScript permet de le rendre dynamique.</p> + +<p>Utilisons CSS pour que le texte de la page soit affiché en bleu :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Coucou</title> + <style> + body { + color: blue; + } + </style> + </head> + <body> + <p>Voici du texte bleu</p> + <img alt="Une image de licorne :)" src="licorne.png"/> + </body> +</html></pre> + +<p>Ici, on a ajouté l'élément {{HTMLElement("style")}} à l'élément {{HTMLElement("head")}}. Celui-ci permettra de définir le CSS à appliquer au texte présent dans le corps de la page.</p> + +<p>Vous aimeriez que votre texte soit souligné ? Vous pouvez ajouter la règle <code>text-decoration: underline;</code> :</p> + +<pre class="brush: css">body { + color: blue; + text-decoration: underline; +}</pre> + +<p>Si vous souhaitez que votre texte ait une taille donnée, vous pouvez ajouter <code>font-size: 42px;</code> comme ceci :</p> + +<pre class="brush: css">body { + color: blue; + text-decoration: underline; + font-size: 42px; +}</pre> + +<p>Au final, le code obtenu ressemblera à :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Coucou</title> + <style> + body { + color: blue; + text-decoration: underline; + font-size: 42px; + } + </style> + </head> + <body> + <p>Voici du texte bleu</p> + <img alt="Une image de licorne :)" src="licorne.png"/> + </body> +</html></pre> + +<p>Si vous sauvegardez la page dans votre éditeur puis que vous rafraîchissez la page dans le navigateur, vous devriez pouvoir voir quelque chose comme :</p> + +<p><img alt="Screenshot of the browser with the page with some CSS" src="https://mdn.mozillademos.org/files/11739/Capture%20du%202015-10-12%2010-16-45.png" style="border-style: solid; border-width: 1px; height: 514px; width: 446px;"></p> + +<h3 id="Avoir_deux_pages_web">Avoir deux pages web</h3> + +<p>Lorsque vous naviguez sur le Web, vous rencontrez souvent des {{Glossary("hyperliens","liens")}}. Ceux-ci permettent de naviguer de page en page. Comme nous l'avons vu avant, HTML s'occupe principalement du contenu d'une page. Or, les liens sont une forme de contenu. Autrement dit : il est possible de créer des liens en utilisant uniquement HTML.</p> + +<h4 id="Créer_un_lien_entre_deux_pages_locales">Créer un lien entre deux pages locales</h4> + +<p>Dans cet exercice, nous aurons besoin de deux fichiers HTML. Nous ajouterons un lien dans chacune de ces pages afin de pouvoir passer de l'une à l'autre.</p> + +<p>Dans le premier fichier, vous pouvez conserver la même structure que précédemment. Le plus important est d'ajouter une nouvelle balise {{HTMLElement("a")}} de cette façon:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Page 1</title> + </head> + <body>Ici la page 1. + <a href="page2.html" title="Vers la page 2">Que se passe-t-il page 2 ?</a></body> +</html></pre> + +<p>La deuxième page, quant à elle, contient un lien vers la première :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Page 2 :)</title> + </head> + <body>Ici la page 2. + <a href="page1.html" title="Vers la page 1">Souhaitez-vous revenir vers la page 1 ? Cliquez-ici</a></body> +</html></pre> + +<div class="note"> +<p><strong>Note :</strong> Assurez-vous que les noms de fichiers définis dans les balises {{HTMLElement("a")}} avec les attributs <code>href</code> correspondent bien aux noms des fichiers que vous avez sur votre ordinateur.</p> +</div> + +<p>Dans votre navigateur, vous pouvez alors naviguer entre les deux documents HTML. Ouvrez la première page dans le navigateur puis cliquez sur le lien pour accéder à la deuxième page et <em>vice versa</em>. Vous pouvez également utiliser le bouton « Précédent » de votre navigateur pour revenir à la page que vous consultiez précédemment.</p> + +<p>Pour cet exercice, votre gestionnaire de fichiers devrait avoir deux fichiers HTML placés dans le même répertoire :</p> + +<p><img alt="Screenshot of the file explorer with two HTML documents in one directory/folder" src="https://mdn.mozillademos.org/files/11741/Capture%20du%202015-10-12%2010-33-15.png" style="height: 211px; width: 288px;"></p> + +<p>Dans le navigateur web, la page 1 ressemblera à :</p> + +<p><img alt="Screenshot of a file explorer with a html file for local test" src="https://mdn.mozillademos.org/files/11743/Capture%20du%202015-10-12%2010-34-56.png" style="border-style: solid; border-width: 1px; height: 112px; width: 455px;"></p> + +<p>Après avoir cliqué sur le lien, on arrive sur la page 2 :</p> + +<p><img alt="Screenshot of the 2nd page of the 2 pages example in the browser" src="https://mdn.mozillademos.org/files/11747/Capture%20du%202015-10-12%2010-38-17.png" style="border-style: solid; border-width: 1px; height: 152px; width: 559px;"></p> + +<div class="note"> +<p><strong>Note :</strong> On remarque que le lien sur la page 2 est violet. De cette façon, le navigateur montre que vous avez déjà visité la page 1 (en quelque sorte, le navigateur garde en mémoire les pages et l'affiche de cette façon).</p> +</div> + +<p>Si vous voulez, vous pouvez très bien continuer cet exercice avec plus de deux pages. Vous pouvez également poursuivre la lecture de cet article pour compléter ce que nous avons vu jusqu'à présent.</p> + +<h4 id="Ajouter_un_lien_vers_un_autre_site_web">Ajouter un lien vers un autre site web</h4> + +<p>Dans cet exercice, nous ajouterons un lien dans le fichier HTML afin que le visiteur du site puisse se rendre facilement sur une autre page web complémentaire. Il est possible d'ajouter un lien vers n'importe quelle page publique sur le Web. Pour cet exemple, nous ajouterons un lien vers Wikipédia :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"/> + <title>Ma page</title> + </head> + <body>Il était une fois,...Les licornes sont superbes... La fin. + <a href="https://fr.wikipedia.org/wiki/Licorne" title="Page Wikipédia sur les licornes">Vous voulez en savoir plus sur les licornes ? Wikipédia est à portée de clic.</a></body> +</html></pre> + +<p>Dans le navigateur, cela devrait ressembler à :</p> + +<p><img alt="Screenshot of the example page with a link to Wikipedia in the browser" src="https://mdn.mozillademos.org/files/11751/Capture%20du%202015-10-12%2010-53-24.png" style="height: 196px; width: 1103px;"></p> + +<p>Lorsque vous passez votre souris sur le lient, vous verrez que le texte contenu dans l'attribut {{htmlattrxref("title")}} est affiché dans une <strong>bulle d'informations</strong>. Ce texte peut être utilisé afin de fournir plus d'informations sur le lien pour aider l'utilisateur à déterminer s'il est utile de cliquer sur le lien ou non.</p> + +<div class="note"> +<p><strong>Rappel :</strong> À chaque fois que vous modifiez la page, n'oubliez pas de sauvegarder le fichier dans votre éditeur et de rafraîchir la page dans votre navigateur afin de visualiser vos modifications.</p> +</div> + +<h2 id="Prochaines_étapes">Prochaines étapes</h2> + +<ul> + <li><a href="/fr/Apprendre/HTML/Balises_HTML">Comment utiliser les balises HTML</a> : Il existe plus d'une centaine de balises HTML et nous n'en avons vu qu'une infime partie. Dans ce nouvel article vous trouverez de nouvelles ressources sur ce qu'il est possible de faire avec HTML.</li> + <li><a href="/fr/Apprendre/Concevoir_page_web">L'anatomie d'une page web</a> : HTML doit respecter certaines règles qui permettent d'organiser une page avec beaucoup de contenu. Cet article vous aidera à déchiffrer les pages les plus complexes comme celles qui sont utilisées sur des sites connus !</li> + <li><a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">Comprendre le fonctionnement des liens</a> : Ici, nous avons utiliser des liens très simples, dans cet article, vous pourrez comprendre pourquoi les liens sont à l'origine de la Toile (<em>Web</em>).</li> + <li><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_%C3%A0_une_page_web">Utiliser des images</a> et <a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_contenu_audio_vid%C3%A9o_page_web">ajouter des fichiers audio et vidéo</a> permettent qu'une page web ne contienne pas que du texte mais aussi des éléments multimédia grâce à HTML.</li> +</ul> diff --git a/files/fr/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html b/files/fr/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html new file mode 100644 index 0000000000..c95ba3d3a2 --- /dev/null +++ b/files/fr/conflicting/learn/getting_started_with_the_web/javascript_basics/index.html @@ -0,0 +1,338 @@ +--- +title: Tutoriel pour débuter en JavaScript +slug: Web/JavaScript/guide_de_demarrage +tags: + - Beginner + - JavaScript + - NeedsBeginnerUpdate + - Tutorial +translation_of: Learn/Getting_started_with_the_web/JavaScript_basics +translation_of_original: Web/JavaScript/Getting_Started +--- +<h2 id="Why_JavaScript.3F" name="Why_JavaScript.3F">Pourquoi JavaScript ?</h2> +<p>JavaScript est un langage de programmation puissant, complexe et trop souvent mal compris. Il permet le développement rapide d'applications avec lesquelles l'utilisateur va pouvoir intéragir pour saisir des données et observer le résultat de leur traitement.</p> +<p>L'avantage premier de JavaScript, dont le standard correspondant est connu sous l'appellation ECMAScript, est qu'il est centré sur le navigateur web, aussi il produira un résultat similaire sur toutes les plateformes supportées par le navigateur. Les exemples sur cette page, tout comme Google Maps, fonctionnent sur Linux, OS X and Windows. Avec le nombre toujours grandissant de bibliothèques JavaScript, il est de plus en plus facile de naviguer dans le document, sélectionner des éléments du DOM, créer des animations, gérer les évènements, et développer des applications AJAX. Contrairement à l'hyper médiatisation d'autres technologies promues par divers intérêts propriétaires, JavaScript est réellement le seul langage multi-plateformes côté client qui est à la fois gratuit et universellement adopté.</p> +<h2 id="What_you_should_already_know" name="What_you_should_already_know">Ce que vous devriez déjà savoir</h2> +<p>JavaScript est un langage très facile d'accès. Tout ce dont vous avez besoin pour commencer est d'un éditeur de texte et d'un navigateur web.</p> +<p>Bon nombre d'autres technologies allant au delà de la portée de ce document peuvent êtres intégrées et développées dans la continuité de JavaScript.<br> + Ne vous attendez pas à réaliser une application comme Google Maps dès vos premières lignes en JavaScript.</p> +<h2 id="Getting_Started" name="Getting_Started">Pour commencer</h2> +<p>Il est très facile de débuter en JavaScript. Vous n'avez pas besoin d'avoir des outils de développement installés. Vous n'avez pas besoin de savoir utiliser une console, Make, ou d'utiliser un compilateur. JavaScript est interprété par votre navigateur web. Tout ce dont vous avez besoin est d'enregistrer votre programme dans un fichier texte puis de l'ouvrir dans votre navigateur. C'est tout.</p> +<p>JavaScript est un excellent langage de programmation pour débuter l'apprentissage de langages informatiques. Il permet des retours instantanés pour le nouvel étudiant, et lui fera découvrir des outils dont il ne manquera pas d'apprécier l'utilité dans la vie réelle. C'est un contraste saisissant en comparaison des langages C, C++ et Java qui peuvent être utiles pour certaines applications particulières.</p> +<h2 id="Browser_Compatibility_Issues" name="Browser_Compatibility_Issues">Les problèmes de compatibilité entre les navigateurs</h2> +<p>Il existe certaines variations concernant la disponibilité des fonctionnalités entre les différents navigateurs. Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Apple Safari et Opera se comportent différement. <span style="line-height: 1.5;">Vous pouvez atténuer ces fluctuations en utilisants les diverses API JavaScript multi-plateformes disponibles. Ces API fournissent des fonctionnalités communes et masquent certaines des variations entre les navigateurs.</span></p> +<h2 id="How_to_try_the_Examples" name="How_to_try_the_Examples">Comment essayer les exemples</h2> +<p>Les exemples qui suivent possédent des échantillons de code. Il y a de multiples façons d'essayer ces exemples. Si vous posséder votre propre site, vous pouvez les sauvegarder comme nouvelles pages de celui-ci.</p> +<p>Si vous ne possédez pas de site personnel, vous pouvez sauvegarder ces exemples sous forme de fichiers sur votre ordinateur et les ouvrir dans le navigateur que vous utilisez en ce moment.<br> + JavaScript est un langage très simple à utiliser pour commencer la programmation pour cette raison. Vous n'avez pas besoin de compilateur, ou d'un environnement de développement ; votre navigateur est le seul outil dont vous avez besoin pour démarrer.</p> +<p>Vour pouvez également utiliser certains site comme <a href="http://jsfiddle.net/">jsfiddle.net</a> pour tester du code JavaScript.</p> +<h2 id="Example:_Catching_a_mouse_click" name="Example:_Catching_a_mouse_click">Exemple : Capturer le clic de la souris</h2> +<p>Les spécificités de la gestion d'événements (types d'événements, enregistrement des gestionnaires, propagation, etc.) sont trop vastes pour être totalement couverte par ce simple exemple. De plus, celui-ci ne peut présenter la capture du clic souris sans approfondir un minimum le système d'événements JavaScript. Garder à l'esprit que cet exemple va seulement éfleurer l'exhaustivité des événements JavaScript et que si vous souhaitez aller au delà des fonctionnalités basiques qui y sont décrites, lisez en plus à propos du système d'<a href="/fr/docs/Web/JavaScript/Guide/Boucle%C3%89v%C3%A9nements">événements JavaScript</a>.</p> +<p>Les événements « souris » sont un sous-ensemble de la pléthore d'événements déclenchés par le navigateur Web en réponse aux actions de l'utilisateur. Ce qui suit est une liste des événements émis en réponse aux actions d'un utilisateur sur la souris <span style="line-height: 1.5;">:</span></p> +<ul> + <li><code>click</code> - transmis quand un utilisateur clic avec la souris</li> + <li><code>dblclick</code> - transmis quand un utilisateur double-clic avec la souris</li> + <li><code>mousedown</code> - transmis lorsqu'un utilisateur presse un bouton de la souris (la première moitié d'un clic)</li> + <li><code>mouseup</code> - transmis lorsqu'un utilisateur relâche un bouton de la souris (la seconde moitié d'un clic)</li> + <li><code>mouseout</code> - transmis lorsque le pointeur de la souris quitte les limites graphiques d'un objet</li> + <li><code>mouseover</code> - transmis lorsque le pointeur de la souris entre dans les limites graphiques d'un objet</li> + <li><code>mousemove</code> - transmis lorsque le pointeur de la souris bouge à l'intérieur des limites graphiques d'un objet</li> + <li><code>contextmenu</code> - transmis lorsqu'un utilisateur effectue un clic-droit.</li> +</ul> +<p>Noter que dans les versions d'HTML, les événements <em>inline</em> (ceux ajoutés en tant qu'attribut de balise), doivent être écris en minuscule et que les gestionnaires d'événements dans les scripts sont aussi en minuscule.</p> +<p>La méthode la plus simple pour capturer ces événements et enregistrer les gestionnaires - en utilisant le HTML - est de spécificer chaque événement en tant qu'attribut de l'élément désiré.</p> +<pre class="brush:js"> <span onclick="alert('Hello World!');">Cliquer ici</span></pre> +<p>Le code JavaScript que vous souhaitez exécuter peut être disposé en ligne dans l'élément ou bien être placé dans un éléménet <script> au sein de votre page HTML :</p> +<pre class="brush: js"><script> + function clickHandler() { + alert("Hello, World!"); + } +</script> +<span onclick="clickHandler();">Cliquer ici</span></pre> +<p>Il est possible de capturer et d'utiliser l'événement qui se produit. Cela permet au développeur d'accéder à plus d'informations (par exemple : l'objet qui a reçu l'événement, le type de l'événement et le bouton de la souris utilisé). Par exemple :</p> +<pre class="brush: js"><script> + function clickHandler(événement) { + var eType = événement.type; + /* l'instruction suivante est utilisée à des fins de compatibilité */ + /* Firefox renseignera la propriété target de l'événement */ + /* IE renseignera la propriété srcElement */ + var eTarget = événement.target || événement.srcElement; + + alert( "événement capturé (type = " + eType + ", cible = " + eTarget + ")" ); + } +</script> +<span onclick="clickHandler(event);">Cliquer ici</span></pre> +<p>En plus de pouvoir recevoir des événements dans le HTML, il est possible de définir de nouveaux éléments HTML en JavaScript et de définir leurs attributs. L'exemple ci-après permet d'ajouter un élément {{HTMLElement("span")}} au corps de la page et de définir les attributs nécessaires pour qu'il reçoive les événements liés à la souris.</p> +<pre class="brush: js"><body></body> +<script> + function mouseeventHandler(event) { + /* La ligne qui suit est utilisée à des fins de compatibilité */ + /* IE ne fournit pas directement l'événement */ + /* il faut obtenir une référence vers l'événement si nécessaire */ + if (!event) event = window.event; + + /* on récupère le type de l'événement et la cible */ + var eType = event.type; + var eTarget = event.target || event.srcElement; + alert(eType +' événement sur l'élément avec l'identifiant '+ eTarget.id); + } + + function onloadHandler() { + /* on récupère une référence à l'élément 'body' de la page */ + var body = document.body; + /* on crée un élément span sur lequel on pourra cliquer */ + var span = document.createElement('span'); + span.id = 'SpanExemple'; + span.appendChild(document.createTextNode ('Cliquer ici !')); + + /* on inscrit l'objet span aux différents événements liés à la souris + les événements sont écrits en minuscules, le nom du gestionnaire d'événement + peut avoir n'importe quelle casse. + */ + span.onmousedown = mouseeventHandler; + span.onmouseup = mouseeventHandler; + span.onmouseover = mouseeventHandler; + span.onmouseout = mouseeventHandler; + + /* on affiche l'élément span sur la page */ + body.appendChild(span); +} + +window.onload = onloadHandler; // on remplace la fonction (on ne l'appelle pas) et donc on ne met pas de parenthèses +</script></pre> +<h2 id="Example:_Catching_a_keyboard_event" name="Example:_Catching_a_keyboard_event">Exemple : Intercepter un événement clavier</h2> +<p>De la même façon que pour les événements liés à la souris, il est possible d'utiliser les événements JavaScript pour capturer les interactions liées au clavier. Un événement est déclenché à chaque fois qu'une touche du clavier est utilisée.</p> +<p>La liste des événéments disponibles pour le clavier est plus restreinte que celle des événements pour la souris :</p> +<ul> + <li><code>keypress</code> : se produit quand on appuie sur une touche et qu'on la relâche</li> + <li><code>keydown</code> : se produit quand on appuie sur une touche et que celle-ci n'a toujours pas été relâchée</li> + <li><code>keyup</code> : se produit quand la touche du clavier est relâchée</li> + <li>TextInput (disponible pour les navigateurs Webkit au moment de l'écriture) : se produit quand du texte est saisi, que ce soit via un coller du presse-papier, une commande vocale ou une saisie clavier. Cet événement ne sera pas traité dans cet article.</li> +</ul> +<p>Lors d'un événement <code><a class="new " href="/fr/docs/Web/Events/keypress" rel="internal">keypress</a></code>, la valeur Unicode de la touche pressée est enregistrée grâce à la propriété <code>keyCode</code> ou <code><a href="/fr/docs/DOM/event.charCode" rel="internal">charCode</a></code> (mais jamais dans les deux). Si la touche pressée génère un caractère (par exemple 'a'), <code>charCode</code> représentera la valeur du caractère en tenant compte de la casse (<code>charCode</code> gère l'appui simultané avec la touche shift pour écrire en majuscules). Dans les autres cas, le code de la touche est enregistré dans <code>keyCode</code>.</p> +<p>La façon la plus simple d'intercepter les événements clavier est ici aussi d'enregistrer des gestionnaires d'événements (<em>handlers</em>) dans le HTML et de spécifier quels événements doivent être gérés. Par exemple :</p> +<pre class="brush: js"><input type="text" onkeypress="alert ('Coucou monde !');"></pre> +<p>De la même façon qu'avec les événements liés à la souris, le code JavaScript peut être présenté dans la définition de l'attribut ou bien au sein d'un bloc {{HTMLElement("script")}} de la page HTML utilisée :</p> +<pre class="brush: js"><script> + function keypressHandler() { + alert ("Coucou monde !"); + } +</script> + +<input onkeypress="keypressHandler();" /></pre> +<p>De la même façon que pour les événements liés à la souris, on peut enregistrer les détails de l'événement et de la cible de cet événement :</p> +<pre class="brush: js"><script type="text/javascript"> + function keypressHandler(evt) { + var eType = evt.type; // Renverra "keypress" comme type d'événement + /* ici aussi on utilise une instruction pour que le code fonctionne + sur les différents navigateurs (mozilla utilise which et les autre + navigateurs utilisent keyCode. + On peut ici utiliser l'opérateur ternaire pour obtenir le résultat */ + var keyCode = evt.which?evt.which:evt.keyCode; + var eCode = 'keyCode est ' + keyCode; + var eChar = 'charCode est ' + String.fromCharCode(keyCode); // ou evt.charCode + alert ("Événement capturé (type = " + eType + ", valeur Unicode pour la touche = " + eCode + ", valeur ASCII = " + eChar + ")"); + } +</script> +<input onkeypress="keypressHandler(event);" /></pre> +<p>Il est possible de capturer n'importe quel élément clavier en associant un gestionnaire d'événement avec ceux du document grâce à une fonction :</p> +<pre class="brush: js"><script> + document.onkeypress = keypressHandler; + document.onkeydown = keypressHandler; + document.onkeyup = keypressHandler; +</script></pre> +<p>Voici un exemple complet qui illustre comment gérer les événements du clavier :</p> +<pre class="brush: js"><!DOCTYPE html> +<html> +<head> + <script> + var metaChar = false; + var toucheExemple = 16; + function keyEvent(event) { + var key = event.keyCode || event.which; // une autre syntaxe que l'opérateur ternaire s'il n'y a pas de keyCode + var keychar = String.fromCharCode(key); + if (key == toucheExemple) { + metaChar = true; + } + if (key != toucheExemple) { + if (metaChar) { + alert("Combinaison de la touche meta et de " + keychar) + metaChar = false; + } else { + alert("Touche utilisée : " + key); + } + } + } + function metaKeyUp(event) { + var key = event.keyCode || event.which; + if (key == toucheExemple) { metaChar = false; } + } + </script> +</head> +<body onkeydown="keyEvent(event)" onkeyup="metaKeyUp(event)"> + Essayez de presser une touche ! +</body> +</html></pre> +<h3 id="Bugs_et_spécificités_des_navigateurs">Bugs et spécificités des navigateurs</h3> +<p>Les deux propriétés des différents événements clavier sont <code>keyCode</code> et <code>charCode</code>. Pour faire simple, <code>keyCode</code> fait référence à la touche du clavier qui a été utilisée alors que <code>charCode</code> représente la valeur ASCII du caractère de la touche. Ces deux valeurs peuvent ne pas être les mêmes. Par exemple un 'a' (minuscule) et un 'A' (majuscule) auront le même <code>keyCode</code> car l'utilisateur appuiera sur la même touche du clavier. En revanche, la propriété<code> charCode</code> sera différente car le caractère sera différent.</p> +<p>La navigateurs interprètent <code>charCode</code> de façons différentes. Ainsi, Internet Explorer et Opera ne supportent pas <code>charCode</code>. Cependant, l'information du caractère est bien fourni avec <code>keyCode</code> , mais uniquement lors de l'événement <code>keypress</code>. Lors de <code>keydown</code> et de <code>keyup</code> <code>keyCode</code> contient les informations liées à la touche utilisée. Firefox utilise un terme différent : <code>which</code> pour distinguer le caractère.</p> +<p>Pour plus de précisions sur le fonctionnement des événements liés au clavier, voir la page sur l'API <a href="/fr/docs/Web/API/KeyboardEvent" title="https://developer.mozilla.org/en-US/docs/DOM/Event/UIEvent/KeyEvent">KeyboardEvent</a>.</p> +<p>{{ draft() }}</p> +<h2 id="Example:_Dragging_images_around" name="Example:_Dragging_images_around">Exemple : Déplacer des images</h2> +<p>L'exemple qui suit permet de déplacer une image de Firefox sur la page :</p> +<pre class="brush: js"><!DOCTYPE html> +<html> +<head> +<style> +img { position: absolute; } +</style> + +<script> +window.onload = function() { + + movMeId = document.getElementById("ImgMov"); + movMeId.style.top = "80px"; + movMeId.style.left = "80px"; + + document.onmousedown = coordinates; + document.onmouseup = mouseup; + + function coordinates(e) { + if (e == null) { e = window.event;} + + // sous IE e.srcElement définira l'élément cible alors que pour Firefox ce sera e.target + // Ces deux propriétés renvoient l'élément HTML pour lequel s'est produit l'événement. + + var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target; + + if (sender.id=="ImgMov") { + mouseover = true; + pleft = parseInt(movMeId.style.left); + ptop = parseInt(movMeId.style.top); + xcoor = e.clientX; + ycoor = e.clientY; + document.onmousemove = moveImage; + return false; + } + return false; + } + + function moveImage(e) { + if (e == null) { e = window.event; } + movMeId.style.left = pleft+e.clientX-xcoor+"px"; + movMeId.style.top = ptop+e.clientY-ycoor+"px"; + return false; + } + + function mouseup(e) { + document.onmousemove = null; + } +} +</script> +</head> + +<body> + <img id="ImgMov" src="http://placehold.it/100x100&text=JS" width="64" height="64"> + <p>Vous pouvez déplacer l'image sur cette page.</p> +</body> + +</html></pre> +<h2 id="Example:_Resizing_things" name="Example:_Resizing_things">Exemple : Redimensionner des éléments</h2> +<div> + Voici un exemple de code qui permet de redimensionner une image (note : seul le rendu final est redimensionné, l'image de base ne sera pas redimensionnée).</div> +<pre class="brush: js"><!DOCTYPE html> + <html> + <head> + <style> + #resizeImage { + margin-left: 100px; + } + </style> + <script> + window.onload = function() { + + var resizeId = document.getElementById("resizeImage"); + var resizeStartCoordsX, + resizeStartCoordsY, + resizeEndCoordsX, + resizeEndCoordsY; + + var resizeEndCoords; + var resizing = false; + + document.onmousedown = coordinatesMousedown; + document.onmouseup = coordinatesMouseup; + + function coordinatesMousedown(e) { + if (e == null) { + e = window.event; + } + + var element = (typeof( window.event ) != 'undefined' ) ? e.srcElement : e.target; + + if (element.id == "resizeImage") { + resizing = true; + resizeStartCoordsX = e.clientX; + resizeStartCoordsY = e.clientY; + } + return false; + } + + function coordinatesMouseup(e) { + if (e == null) { + e = window.event; + } + + if (resizing === true) { + var currentImageWidth = parseInt(resizeId.width); + var currentImageHeight = parseInt(resizeId.height); + + resizeEndCoordsX = e.clientX; + resizeEndCoordsY = e.clientY; + + resizeId.style.height = currentImageHeight - (resizeStartCoordsY - resizeEndCoordsY) + 'px'; + resizeId.style.width = currentImageWidth - (resizeStartCoordsX - resizeEndCoordsX) + 'px'; + + resizing = false; + } + return false; + } + } + </script> + </head> + + <body> + <img id="resizeImage" src="http://upload.wikimedia.org/wikipedia/commons/e/e7/Mozilla_Firefox_3.5_logo_256.png" +width="64" height="64"> + <p>Cliquer sur l'image et étirer pour la redimensionner.</p> + </body> + + </html></pre> +<div> + </div> +<h2 id="Example:_Drawing_Lines" name="Example:_Drawing_Lines">Exemple : Tracer des lignes</h2> +<pre class="brush: js"><!DOCTYPE html> +<html> +<head> +<script> +function dessinerLigne(ax, ay, bx, by) +{ + if(ay > by) + { + bx = ax+bx; + ax = bx-ax; + bx = bx-ax; + by = ay+by; + ay = by-ay; + by = by-ay; + } + var calc = Math.atan((ay-by)/(bx-ax)); + calc = (calc*180)/Math.PI; + var length = Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by)); + document.body.innerHTML += "<div id='ligne' style='height:" + length + "px;width:1px;background-color:black;position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>" +} +</script> +</head> +<body onload="dessinerLigne(200,400,500,900);"> <!-- Remplacez les coordonnées que vous souhaitez utiliser --> +</body> +</html></pre> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..db22bdd6f4 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,143 @@ +--- +title: Afficher du code informatique avec HTML +slug: Apprendre/HTML/Comment/Afficher_du_code_informatique_avec_HTML +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: >- + Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code +translation_of_original: Learn/HTML/Howto/Display_computer_code_with_HTML +--- +<div class="summary"> +<p>HTML offre différents éléments pour écrire de la documentation technique. Dans cet article, nous aborderons les éléments HTML qui portent sur la représentation de code informatique.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">comment créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment utiliser HTML afin de représenter des entrées saisies par un utilisateur, des sorties produites par un système, du code, du texte simple et des variables.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_et_l'informatique">HTML et l'informatique</h2> + +<p>{{glossary("HTML")}} a été conçu par des informaticiens et il sert donc particulièrement bien ce domaine. De nombreux éléments HTML sont apparus et/ou ont disparu au cours des années. Ici, nous n'aborderons que ceux qui sont en vigueur actuellement :</p> + +<ul> + <li>{{HTMLElement('code')}}</li> + <li>{{HTMLElement('kbd')}}</li> + <li>{{HTMLElement('pre')}}</li> + <li>{{HTMLElement('samp')}}</li> + <li>{{HTMLElement('var')}}.</li> +</ul> + +<h2 id="Le_texte_préformaté">Le texte préformaté</h2> + +<p>Dans un éditeur de texte, la mise en forme s'applique simplement. Il suffit d'utiliser les caractères du clavier, d'appuyer sur la barre d'espace pour indiquer un espace, d'utiliser la touche Entrée pour passer à la ligne, etc. Normalement, chaque lettre a la même largeur et tout est donc bien aligné. Étant donné que ce qui est écrit est écrit avec du texte <em>simple</em> (<em>plain text</em> en anglais), nul besoin de se préoccuper de la couleur du texte, de sa taille de police, de l'italique, etc.</p> + +<p>Un navigateur graphique formate le texte en fonction du code HTML et CSS. Cela fait que beaucoup de blancs (les espaces, les tabulations, les sauts de lignes) sont ignorés. Si vous appuyez sur Entrée lorsque vous tapez du code HTML, le navigateur déduira que vous souhaitez bien aligner votre code HTML. En revanche, pour indiquer clairement qu'on souhaite avoir un nouveau paragraphe, il faudra utiliser le bon élément HTML (en l'occurence {{htmlelement("p")}}).</p> + +<p>Généralement lorsqu'on écrit un article qui porte sur l'informatique, on veut afficher, dans le navigateur, du texte, tel qu'il serait lorsqu'on le saisit dans un éditeur de texte. Pour ce faire, on utilisera l'élément {{htmlelement("pre")}}. Par défaut, un navigateur graphique affichera le texte contenu dans cet élément avec une police dont tous les caractères ont la même largeur (<em>monospace</em>). Toutefois, vous pourrez adapter la mise en forme à votre gré grâce à {{glossary("CSS")}}. Par exemple, lorsque vous lisez des exemples de code sur MDN, nous utilisons l'élément {{htmlelement("pre")}} (auquel on ajoute quelques couleurs CSS pour améliorer la lisibilité).</p> + +<p>On notera qu'on ne peut toujours pas utiliser les caractères réservés (<code><>&</code>), par exemple :</p> + +<pre class="brush: html"><pre> +Un éditeur de texte est pratique car il suffit +d'appuyer sur Entrée pour commencer un nouveau +paragraphe, plutôt que d'avoir à utiliser ces +grossières balises &lt;p&gt; et &lt;/p&gt;. +</pre></pre> + +<p>Cela donnera le résultat suivant :</p> + +<p>{{EmbedLiveSample('Le_texte_préformaté','100%',90)}}</p> + +<div class="note"> +<p>Par défaut, votre éditeur de texte laissera les lignes s'allonger jusqu'à éventuellement dépasser de l'écran. Le retour à la ligne automatique peut toutefois être activé dans la plupart des éditeurs pour garder un œil sur tout le contenu.</p> + +<p>On aura la même chose avec <code><pre></code>. Il existe une propriété CSS intitulée {{cssxref("white-space")}} dont la valeur par défaut est <code>nowrap</code>. Si on veut que le retour à la ligne soit automatique, on utilisera la valeur <code>pre-wrap</code>.</p> +</div> + +<h2 id="Retranscrire_du_code">Retranscrire du code</h2> + +<p>Naturellement, tout le texte préformaté n'est pass du code informatique. Lorsque vous mentionnez du code informatique dans votre document, vous devriez utiliser l'élément {{HTMLElement('code')}} :</p> + +<pre class="brush: html">Un des mots-clés les plus importants est <code>this</code>. +</pre> + +<p>Pour indiquer un bloc de code qui s'étend sur plusieurs lignes, vous pouvez imbriquer un élément {{HTMLElement('code')}} dans un élément {{HTMLElement('pre')}}. Certains script tiers tels que la bibliothèque <a href="https://highlightjs.org">highlight.js</a> utiliseront ces balises pour ajouter de la coloration syntaxique à vos exemples de code :</p> + +<pre class="brush: html"><pre><code class="js"> +function coucou() { + console.log('coucou monde !'); +} +</code></pre></pre> + +<h2 id="Retranscrire_des_entréessorties_(IO)">Retranscrire des entrées/sorties (I/O)</h2> + +<p><em>Les entrées </em>sont les informations qui sont saisies, généralement par les utilisateurs, dans un ordinateur. L'ordinateur traite ces données et renvoie une <em>sortie.</em> On utilise parfois les termes anglais respectifs <em>input</em> et <em>output</em>, voire un acronyme pour désigner l'ensemble : I/O.</p> + +<h3 id="Comment_retranscrire_une_sortie_informatique">Comment retranscrire une sortie informatique</h3> + +<p>L'élément {{HTMLElement('samp')}} indique que l'ordinateur produit un texte :</p> + +<pre class="brush: html">Ensuite, vous verrez affiché <samp>thomas@mon-ordinateur:~$</samp>. +</pre> + +<h3 id="Comment_retranscrire_une_entrée_informatique">Comment retranscrire une entrée informatique</h3> + +<p>L'élément {{htmlelement('kbd')}} était initialement utilisé pour représenter une entrée saisie au clavier (<code>kbd</code> étant pour <em>keyboard</em> qui signifie clavier en anglais). Cependant, aujourd'hui, cet élément peut être utilisé pour représenter d'autres types d'entrées (comme les commandes vocales).</p> + +<p>L'élément {{htmlelement("kbd")}} permet de marquer l'entrée attendue :</p> + +<pre class="brush: html">Saisissez <kbd>ls --color</kbd> sur l'invite du terminal. +</pre> + +<p>Pour indiquer une touche donnée ou une sous-commande particulière, vous pouvez imbriquer {{htmlelement("kbd")}} avec lui-même :</p> + +<pre class="brush: html">Appuyez sur <kbd><kbd>Ctrl</kbd> + <kbd>C</kbd></kbd> pour arrêter le processus. +</pre> + +<p>Dans cet exemple, le premier élément <code><kbd></code> indique la commande entière alors que les éléments imbriqués indiquent les touches à utiliser.</p> + +<h3 id="Assembler_le_tout">Assembler le tout</h3> + +<p>Il arrive souvent de combiner <code><samp></code> et <code><kbd></code>. Par exemple, lorsque l'ordinateur indique des options à l'utilisateur, on pourra imbriquer des éléments <code><samp></code> dans des éléments <code><kbd></code> :</p> + +<pre class="brush: html"><code>Ensuite, choisissez <kbd><samp>Oui</samp></kbd> ou <kbd><samp>Non</samp></kbd></code></pre> + +<p>Inversement, quand l'ordinateur indique quoi faire, on pourra imbrique des éléments <code><kbd></code> dans des éléments <code><samp></code>:</p> + +<pre class="brush: html"><code>Attendez que l'invite indique, <samp>Appuyez sur <kbd>Entrée</kbd> pour continuer.</samp></code></pre> + +<p>Selon <a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-kbd-element">la spécification HTML</a>, il n'est pas nécessaire de jouer profondément sur l'imbrication de ces éléments. L'aspect le plus important de transmettre les informations avec leur sens.</p> + +<h2 id="Les_variables_de_programmes_ou_les_variables_mathématiques">Les variables de programmes ou les variables mathématiques</h2> + +<p>Dans ce cas, on utilisera l'élément {{htmlelement("var")}}. Les variables peuvent être annotées dans le texte principal mais pas dans les fragments de code.</p> + +<pre class="brush: html">Cette fonction utilisera deux paramètres, +<var>x</var> et <var>y</var>. +</pre> + +<div class="note"> +<p>L'élément {{htmlelement("var")}} permet d'écrire des variables pour des formules simples. En revanche, pour les formules complexes, <a href="/fr/docs/Web/MathML">MathML</a> sera beaucoup plus riche et adapté.</p> +</div> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("code")}}</li> + <li>{{htmlelement("kbd")}}</li> + <li>{{htmlelement("pre")}}</li> + <li>{{htmlelement("samp")}}</li> + <li>{{htmlelement("var")}}</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html new file mode 100644 index 0000000000..99ad7a8733 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_b235e00aa38ee1d4b535fc921395f446/index.html @@ -0,0 +1,270 @@ +--- +title: Identifier et expliquer des abréviations avec HTML +slug: Apprendre/HTML/Comment/Identifier_et_expliquer_des_abréviations +tags: + - Beginner + - HTML + - Learn + - OpenPractices +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations +translation_of_original: Learn/HTML/Howto/Mark_abbreviations_and_make_them_understandable +--- +<div class="summary"> +<p>HTML fournit une méthode simple et rapide pour indiquer la présence d'abrévations et pour fournir leur signification au lecteur.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Comment/Créer_un_document_HTML_simple">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre à indiquer des abréviations et des acronymes avec HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="À_propos_des_abréviations">À propos des abréviations</h2> + +<p>Lorsqu'on écrit, on utilise fréquemment des abréviations et des acronymes. Une abréviation est une notation raccourcie : par exemple, on écrit parfois « dev » à la place de « développeur ». Un acronyme est une combinaison, lisible, des initiales d'un groupe de termes, par exemple « NASA » signifie « <em>National Aeronautics and Space Administration</em> ».</p> + +<p>Il est nécessaire de s'assurer que l'abréviation puisse être comprise par les visiteurs de la page. Sur le papier, on explicite généralement la première occurence de l'abréviation en utilisant la forme complète et abrégée avant d'utiliser la forme abrégée pour les occurences suivantes :</p> + +<blockquote>L'Union Européenne (UE) est composée de 28 états et les États-Unis d'Amérique (USA) contient 50 états. Les USA sont une république fédérale et l'UE est une association politique et économique de plusieurs états indépendants.</blockquote> + +<div> +<p>Cette méthode peut parfaitement s'appliquer aux pages web mais HTML fournit un outil supplémentaire pour expliquer une abréviation aux lecteurs d'une page web.</p> +</div> + +<h2 id="L'élément_<abbr>">L'élément <code><abbr></code></h2> + +<p>L'élément HTML<em> abbreviation</em> (pour abréviation en anglais) ({{HTMLElement("abbr")}}) est utilisé pour identifier les abrévations et les acronymes et permettre aux lecteurs qui ne connaitraient pas le terme de lire et comprendre le texte correctement (éventuellement grâce à un lecteur d'écran). Cet élément doit être utilisé dès que possible.</p> + +<div class="note"> +<p><strong>Note :</strong> Si vous entendez parler de l'élément <code><acronym></code>, sachez qu'il est désormais déprécié et qu'il ne devrait donc plus être utilisé car les {{Glossary("navigateur","navigateurs")}} pourraient arrêter de le supporter à tout moment.</p> +</div> + +<pre class="brush: html"><p>Pouvez-vous m'envoyer les documents <abbr>SVP</abbr> ?</p></pre> + +<p>Il est possible d'épeler les abréviations grâce à l'attribut <code>title</code> de l'élément :</p> + +<pre class="brush: html"><p>Pouvez-vous m'envoyer les documents <abbr title="s'il vous plaît">SVP</abbr> ?</p></pre> + +<p>Quand faut-il renseigner l'attribut <code>title</code> ? Ça dépend. Il n'est peut-être pas nécessaire de définir une abrévation comme « SVP » ou lorsqu'une abréviation est utilisée à de nombreuses reprises dans le document. Dans le doute, ajoutez la description complète.</p> + +<div class="note"> +<p><strong>Note :</strong> Pour les langues qui possèdent un « nombre » grammatical et notamment celles qui possèdent plus de deux nombres grammaticaux comme l'Arabe, il faudra utiliser le même nombre grammatical dans l'attribut <code>title</code> que celui de l'élément <code><abbr></code>.</p> +</div> + +<p>Grâce à {{glossary("CSS")}}, vous pouvez ajouter, modifier ou retirer les indications visuelles autour de l'abréviation. Généralement, pour une abréviation, le navigateur affichera le contenu de l'attribut <code>title</code> dans une bulle lors du passage de la souris sur le texte de l'abrévation. Pour l'exemple précédent, on aura ce résultat :</p> + +<p>{{EmbedLiveSample("L'élément_<abbr>",'100%',90)}}</p> + +<div class="note"> +<p><strong>Important : </strong>Si vous souhaitez que vos lecteurs/visiteurs comprennent l'abréviation à coup sûr, ne comptez pas seulement sur l'attribut <code>title</code>. Épelez l'abréviation dans le texte du document lors de la première occurence. En effet, il faut une souris pour pouvoir activer la bulle d'information qui utilisera le texte de <code>title</code>. Dès lors, les personnes qui utilisent un téléphone, un clavier ou un lecteur d'écran pourront plus difficilement (voire pas du tout) accéder à l'explication si celle-ci n'est présente qu'avec <code>title</code>.</p> +</div> + +<h2 id="Exercice">Exercice</h2> + +<p>Afin de mieux connaître l'élément {{HTMLElement('abbr')}}, faisons un léger exercice. Dans le texte qui suit, identifiez les abréviations avec <code><abbr></code> et épelez les avec l'attribut <code>title</code>. Une fois que vous avez fini, cliquez sur « Afficher les résultats » pour voir si vous avez tout trouvé. Ces abréviations peuvent être trouvées dans <a href="/fr/docs/Glossaire">le glossaire</a>.</p> + +<div class="hidden"> +<pre class="brush: html"><div class="exercise"> + <main> + <div class="instruction">Identifiez toutes les abréviations avec l'élément <code>&lt;abbr&gt;</code></div> + <div class="playground"><textarea spellcheck="false"></textarea></div> + <div class="checking"> + <button>Afficher les résultats</button><span class="count"></span> + </div> + <div class="result">Les <abbr title="développeurs">dev</abbr> Web utilisent <abbr title="Hypertext Markup Language">HTML</abbr> pour structurer des documents, <abbr title="Cascading StyleSheet">CSS</abbr> pour les mettre en forme et JavaScript pour ajouter des effets spéciaux grâce à certaines <abbr title="Application Programming Interface">API</abbr> dédiées.</div> + </main> +</div></pre> + +<pre class="brush: css">body { + font: 1em/100% sans-serif; + padding: 0; + margin: 0; +} + +.exercise { + background: #F9FAFB; + border-radius: 5px; + height: 13em; + overflow: hidden; +} + +.instruction, .count { + padding: .5em; + font-style: italic; + font-size: .95em; +} + +.playground { + padding: 0 .5em; +} + +.playground textarea { + display: block; + font-size : 1em; + line-height: 1.5em; + font-family: monospace; + box-sizing: border-box; + width : 100%; + padding : .5em; + height : 9.7em; +} + +.checking { + padding: .5em; +} + +.checking button { + box-sizing: border-box; + box-shadow:inset 0 1px 0 0 #bcd9a3; + background:linear-gradient(to bottom, #b4d665 5%, #89a646 100%); + background-color:#b4d665; + border-radius:5px; + border:1px solid #8aa164; + cursor:pointer; + font-size:1em; + padding:.5em; + text-decoration:none; +} +.checking button:hover { + background:linear-gradient(to bottom, #89a646 5%, #b4d665 100%); + background-color:#89a646; +} +.checking button:active { + transform: translate(0, 1px); +} + +.result { + height: 10em; + line-height: 1.4em; + padding: .5em; + box-sizing: border-box; +} + +main { + transform: translate(0,0); + transition: transform 300ms; +} + +.next main { + transform: translate(0, -10em); +} + +abbr { + display: inline-block; + white-space: nowrap; +} + +abbr.ok { + color: green; +} + +abbr.ok:after { + content: ' ✔︎'; +} + +abbr.fail { + color: red; +} + +abbr.fail:after { + content: ' ✘'; +} + +abbr.warning { + color: orange; +} + +abbr.warning:after { + content: ' !'; + font-weight: bold; +} +</pre> + +<pre class="brush: js">window.addEventListener('load', function () { + var content = document.querySelector('.exercise'); + var input = document.querySelector('.playground textarea'); + var button = document.querySelector('.checking button'); + var message = document.querySelector('.checking .count'); + var abbr = Array.prototype.slice.call(document.querySelectorAll('.result abbr')); + var data = { + pass : 0, fail : 0, warning : 0 + }; + + input.value = document.querySelector('.result').textContent; + + function toggleResult(e) { + e.preventDefault(); + var classList = content.className.split(' '); + + if (classList.length === 1 && checkResult()) { + content.className = 'exercise next'; + message.innerHTML = data.pass + ' correctement identifiée(s), ' + + data.warning + ' sans description complète, ' + + data.fail + ' manquée(s).'; + button.innerHTML = 'Essayez à nouveau'; + } else { + content.className = 'exercise'; + message.innerHTML = ''; + button.innerHTML = 'Afficher les résultats'; + } + } + + function checkResult() { + var i, j, node = document.createElement('div'); + node.innerHTML = input.value; + data = { pass : 0, fail : 0, warning : 0 }; + + var userAbbr = Array.prototype.slice.call(node.querySelectorAll('abbr')); + + if (userAbbr.length === 0) { + alert("Vous n'avez marqué aucune abréviation (il y en a " + abbr.length + " à trouver)."); + return false; + } + + for (i in abbr) { + var txt = abbr[i].textContent; + var fail = true; + + for (j in userAbbr) { + var userText = userAbbr[j].textContent; + + if (userText.match(new RegExp('^\\s*' + txt.replace('.','') + '\\s*$'))) { + fail = false; + if (userAbbr[j].title) { + data.pass += 1; + abbr[i].className = 'ok'; + } else { + data.warning += 1; + abbr[i].className = 'warning'; + } + } + } + + if (fail) { + data.fail += 1; + abbr[i].className = 'fail'; + } + } + + return true; + } + + button.addEventListener('click', toggleResult); +}); +</pre> +</div> + +<p>{{EmbedLiveSample('Exercice','100%',220)}}</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>La documentation de la référence sur {{HTMLElement("abbr")}}.</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682/index.html b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682/index.html new file mode 100644 index 0000000000..99e17662ab --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/advanced_text_formatting_c8b0b9eb353375fb9a4679f68164e682/index.html @@ -0,0 +1,134 @@ +--- +title: Ajouter des citations sur une page web +slug: Apprendre/HTML/Comment/Ajouter_citations_sur_page_web +tags: + - Beginner + - Guide + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations +translation_of_original: Learn/HTML/Howto/Add_citations_to_webpages +--- +<div class="summary"> +<p>Cet article illustre comment citer quelqu'un de façon précise et en fournissant la source de la citation.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment intégrer des citations et leurs sources.</td> + </tr> + </tbody> +</table> + +<p>Très souvent, nous évoquons ce qui a été dit ou écrit par d'autres. Nous construisons des arguments logiques à partir de ces textes, notamment en littérature technique, en journalisme ou en philosophie. Étant donné que ce sont les scientifiques qui ont conçu {{Glossary('HTML')}}, il existe les mécanismes nécessaires pour faire des citations dans un document HTML.</p> + +<p>HTML permet de gérer trois scénarios liés aux citations :</p> + +<ul> + <li>fournir un extrait complet d'un document tiers</li> + <li>citer une seule phrase ou un seul terme</li> + <li>faire référence à un document tiers</li> +</ul> + +<h2 id="Comment_rapporter_exactement_les_mots_d'une_personne">Comment rapporter exactement les mots d'une personne</h2> + +<h3 id="Citation_en_ligne">Citation en ligne</h3> + +<p>HTML fournit l'élément {{htmlelement("q")}} qui permet de créer des citations en ligne. Cela signifie qu'il s'agit de citations suffisamment courtes pour qu'elles puissent être placées dans le cours du texte.</p> + +<pre class="brush: html"><p> + Si vous lisez Cicéron dans la version latine, vous trouverez + un passage connu&nbsp;: <q lang="la">qui dolorem ipsum quia + dolor sit amet consectetur adipisci velit.</q> +</p></pre> + +<p>Voilà le résultat qu'on obtient avec un tel code :</p> + +<p>{{EmbedLiveSample('Citation_en_ligne','100%')}}</p> + +<div class="note"> +<p><code><q></code> ne doit pas être utilisé pour écrire des titres d'articles ou de chapitres ou pour mettre un terme en exergue. Si vous avez besoin d'utiliser des guillemets à cet effet, il faudra les écrire manuellement :</p> + +<pre><code>C'est</code> « Wingardium Leviôsa » et non « Wingardium Leviosâ »<code>.</code></pre> + +<p>Les entités HTML <code>&laquo;</code> et <code>&raquo;</code> permettent de représenter les guillemets. Il faudra utiliser <code>&ldquo;</code> et <code>&rdquo;</code> pour les doubles quotes et <code>&lsquo;</code> et <code>&rsquo;</code> pour les simples quotes.</p> +</div> + +<p>Par défaut, {{glossary("navigateurs",'les navigateurs web')}} utilisent le symbole de citation approprié pour la langue utilisée. Si vous souhaitez surcharger la mise en forme par défaut, vous pouvez utiliser la propriété CSS {{cssxref('quotes')}}. Par exemple, la règle CSS qui suit imposera les guillemets français :</p> + +<pre class="brush: css">:lang(fr) > q { + quotes: '« ' ' »'; +}</pre> + +<h3 id="Extrait_complet">Extrait complet</h3> + +<p>HTML fournit également l'élément {{htmlelement("blockquote")}} pour les citations en bloc (c'est-à-dire les citations suffisamment longues pour qu'elles méritent leurs propres paragraphes). Dans l'exemple suivant, on voit qu'on a plusieurs paragraphes au sein d'une même <code><blockquote></code> :</p> + +<pre class="brush: html"><p>Les mots employés par Cicéron sont devenus un +charabia pour simuler du texte mais à l'origine, ils +n'étaient pas dénués de sens, loin de là&nbsp;:</p> + +<blockquote> + <p> + Il n'y personne qui recherche ou désire obtenir la + douleur en tant que telle car il s'agit de la douleur. + Toutefois, occasionnellement, il exist des circonstances + selon lesquelles la peine et la douleur peuvent fournir + un grand plaisir. + </p> + + <p> + Le sage s'en tient donc, sur ces sujets, au principe + de sélection : il rejette le plaisir afin de s'assurer de + de plus grands plaisir ou alors, il endure certaines + douleurs pour s'en prémunir de plus grandes. + </p> +</blockquote> +</pre> + +<p>Dans ce cas, la mise en forme appliquée par défaut par le navigateur web est une marge plus large à gauche. Là encore, vous pouvez ajuster la mise en forme à votre convenance en utilisant la propriété CSS {{cssxref('margin')}}.</p> + +<h2 id="Comment_fournir_la_source_d'une_citation">Comment fournir la source d'une citation</h2> + +<h3 id="Source_implicite">Source implicite</h3> + +<p>Citer c'est bien, indiquer les sources c'est encore mieux. De cette façon, une source indépendante peut vérifier que la citation est correcte, voire fournir un contexte plus large pour la citation. À cet effet, l'attribut {{htmlattrxref('cite','q')}} permet d'indiquer l'URL de la source, que ce soit pour un élément {{htmlelement("q")}} ou pour un élément {{htmlelement("blockquote")}} :</p> + +<pre class="brush: html"><q cite="https://fr.wikiquote.org/wiki/Hom%C3%A8re"><span class="citation">Patience, mon cœur !</span></q></pre> + +<p>En pratique, les personnes ne trouvent que très rarement cette information de source (sauf s'ils lisent le code source HTML). On peut donc préférer un lien direct dans la citation :</p> + +<pre class="brush: html"><q><a href="https://fr.wikiquote.org/wiki/Hom%C3%A8re"><span class="citation">Patience, mon cœur !</span></a></q></pre> + +<h3 id="Source_explicite">Source explicite</h3> + +<p>Pour indiquer de façon explicite l'origine de la citation, il est possible d'utiliser l'élément {{htmlelement("cite")}}. Cet élément peut <a href="http://www.w3.org/TR/html5/text-level-semantics.html#the-cite-element">indiquer l'auteur de la citation ou l'œuvre créative de laquelle elle provient</a>.</p> + +<pre class="brush: html"><p> + <q>La pensée est libre</q>, + <cite id="author">Cicéron</cite> dans + <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>. +</p> +</pre> + +<p>Pour accentuer le caractère explicite de la relation entre la citation et sa source, il est également possible d'ajouter l'attribut <code><a href="/fr/docs/Accessibilité/ARIA/Techniques_ARIA/Utiliser_l_attribut_aria-labelledby">aria-labelledby</a></code> :</p> + +<pre class="brush: html"><p> + <q aria-labelledby="author work">La pensée est libre</q>, + <cite id="author">Cicéron</cite> dans + <cite id="work" lang="la">De Finibus Bonorum et Malorum</cite>. +</p> +</pre> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("q")}}</li> + <li>{{htmlelement("blockquote")}}</li> + <li>{{htmlelement("cite")}}</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..3f2f001f9c --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,192 @@ +--- +title: Créer un hyperlien +slug: Apprendre/HTML/Comment/Créer_un_hyperlien +tags: + - Beginner + - HTML + - Learn + - Navigation +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +translation_of_original: Learn/HTML/Howto/Create_a_hyperlink +--- +<p class="summary">Dans cet article, nous verrons comment créer des liens {{glossary('accessibilité','accessibles')}} et utiles au {{glossary("référencement")}}.</p> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez, au préalable, savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>. Il peut également être judicieux de se familiariser avec les <a href="/fr/Apprendre/Understanding_URLs">URL</a> et la notion d'<a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">hyperliens</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Savoir comment mettre en place des liens accessibles et utiles au référencement.</td> + </tr> + </tbody> +</table> + +<p>La création de liens est une compétence clé sur le web. Dans cet article, nous verrons en détails l'élément {{htmlelement("a")}} et comment l'utiliser pour créer des liens forts.</p> + +<h2 id="Comment_créer_un_lien">Comment créer un lien</h2> + +<p>Pour fabriquer un lien, vous aurez <em>a minima</em> besoin d'une cible et d'un texte :</p> + +<dl> + <dt>cible</dt> + <dd>L'{{glossary("URL")}} de la destination du lien (par exemple, <code>"https://www.mozilla.org/firefox/products/</code>")</dd> + <dt>texte</dt> + <dd>Le texte qui décrit la destination offerte par le lien (dans le cas de l'exemple précédent, on pourrait écrire « Cette page présente les différents produits Firefox !")</dd> +</dl> + +<p>Le <em>texte</em> sera placé entre les balises {{htmlelement('a')}} et la <em>cible </em>sera la valeur de l'attribut {{htmlattrxref('href','a')}}. Mis bout à bout, on obtient ce code :</p> + +<pre class="brush: html"><a href="https://www.mozilla.org/firefox/products/"> + Cette page présente les différents produits Firefox ! +</a></pre> + +<p>Cela affichera, sur la page web, le lien suivant :</p> + +<p><a href="https://www.mozilla.org/firefox/products/">Cette page présente les différents produits Firefox !</a></p> + +<div class="note"> +<p><strong>Astuce :</strong> Pour transformer une image en un lien, il suffit de placer l'élément de l'image entre les balises <code><a></code>.</p> + +<p>L'attribut <code>alt</code> de l'image ne doit pas seulement <strong>décrire</strong> l'image (« c'est une flèche vers la droite »), mais doit également <strong>indiquer aux visiteurs ce qui se produit en suivant le lien</strong> (« lire le prochain billet »). <a href="/fr/Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web">Ce tutoriel explique comment insérer des images dans une page web.</a></p> +</div> + +<h3 id="Les_ancres_d'une_page">Les ancres d'une page</h3> + +<p>Il est également possible de créer un lien qui pointe vers un endroit spécifique d'un document. Cet endroit est appelé une ancre.</p> + +<ol> + <li>Ajoutez un attribut {{htmlattrxref("id")}} à l'élément cible. Par exemple, changez <code><h2></code> en <code><h2 id="les-ancres"></code>.</li> + <li>Dans l'URL du lien, placée dans l'attribut {{htmlattrxref("href","a")}}, ajoutez l'identifiant précédé d'un dièse (#) : <code><a href="http://www.exemple.com/index.html#les-ancres"></code></li> +</ol> + +<div class="note"> +<p><strong>Astuce :</strong> La plupart du temps, les visiteurs d'un site s'attendent à ce qu'un lien ouvre une<strong> nouvelle</strong> page au début de celle-ci (plutôt qu'à un endroit donné, au sein de la page). Certains visiteurs peuvent donc être désorientés lorsqu'ils suivent un lien avec une ancre.</p> + +<p>Si vous utilisez des liens avec des ancres, essayez de les mettre en forme afin que les visiteurs du site puissent les reconnaître. Si vous utilisez des ancres entre les pages d'un de vos sites, vous pouvez utiliser {{glossary("JavaScript")}} pour créer un effet de défilement doux.</p> +</div> + +<h3 id="Créer_un_lien_vers_une_ressource_à_télécharger">Créer un lien vers une ressource à télécharger</h3> + +<p>Il peut arriver qu'un lien soit utilisé pour télécharger un fichier plutôt que d'ouvrir une nouvelle page. L'attribut <code>download</code> peut être utilisé pour fournir un nom par défaut, à donner au fichier. Voici un exemple de lien de téléchargement pour télécharger Firefox 39 pour Windows :</p> + +<pre class="brush: html"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=fr" + download="installateur-firefox-39.exe"> + Téléchargez Firefox +</a></pre> + +<h2 id="Écrire_des_liens_accessibles">Écrire des liens accessibles</h2> + +<p>Ajouter des liens à une page est plutôt facile mais ce n'est pas tout. Les liens de vos pages doivent être <em>accessibles </em>à tous vos lecteurs, quel que soit le contexte de lecture et les outils qu'ils utilisent. Les visiteurs qui utilisent des lecteurs d'écran peuvent vouloir sauter de lien en lien, le texte d'un lien doit donc être compréhensible. Voici quelques règles et bonnes pratiques à mettre en œuvre.</p> + +<dl> + <dt>Le texte d'un lien doit être compréhensible seul</dt> + <dd> + <p>Les visiteurs qui utilisent des lecteurs d'écran passent de lien en lien. Les moteurs de recherche utilisent le texte des liens pour indexer les pages ciblées. Certains visiteurs regardent les liens plutôt que les autres textes. Pour ces raisons, le texte d'un lien doit avoir un sens sans aucun autre contexte.</p> + + <div class="note"> + <p><strong>Note :</strong> Dans notre exemple, le texte du lien commence par un verbe d'action. Cela permet au lecteur de sentir une progression dans ces actions et plus généralement de préciser le rôle du lien.</p> + </div> + + <p><em><strong>Texte compréhensible </strong>:</em> <a href="https://firefox.com">Télécharger Firefox</a></p> + + <pre class="brush: html"><a href="https://firefox.com/"> + Télécharger Firefox +</a></pre> + + <p><em><strong>Mauvais exemple </strong>:</em> <a href="https://firefox.com/">Cliquez ici</a> pour télécharger Firefox</p> + + <pre class="brush: html"><a href="https://firefox.com/"> + Cliquez ici +</a> +pour télécharger Firefox +</pre> + </dd> + <dt>N'ajoutez pas « lien vers » dans le texte du lien</dt> + <dd> + <p>Cela n'apporte aucune plus-value. Les lecteurs d'écran indiquent que l'élément est un lien. Les visiteurs qui utilisent directement un navigateur voient que c'est un lien grâce au soulignement et à sa couleur distinctive (et c'est également pour cette raison qu'il ne faut pas retirer la mise en forme d'un lien).</p> + + <p><em><strong>Bon exemple </strong>:</em> <a href="https://developer.mozilla.org/Firefox_OS">En savoir plus sur Firefox OS</a></p> + + <pre class="brush: html"><a href="https://developer.mozilla.org/Firefox_OS"> + En savoir plus sur Firefox OS +</a></pre> + + <p><em><strong>Mauvais exemple </strong>:</em> Voici un <a href="https://developer.mozilla.org/Firefox_OS">lien sur Firefox OS</a></p> + + <pre class="brush: html">Voici un +<a href="https://developer.mozilla.org/Firefox_OS"> + lien sur Firefox OS +</a></pre> + </dd> + <dt>Indiquez la cible du lien plutôt que de copier-coller une URL</dt> + <dd> + <p>Les URL sont illisibles, encore plus lorsqu'elles sont lues par un lecteur d'écran, lettre par lettre.</p> + + <p><em><strong>Bon exemple </strong>:</em> <a href="https://careers.mozilla.org/university/">Candidatez pour un stage chez Mozilla</a></p> + + <pre class="brush: html"><a href="https://careers.mozilla.org/university/"> + Candidatez pour un stage chez Mozilla +</a></pre> + + <p><em><strong>Mauvais exemple :</strong></em> <a href="https://careers.mozilla.org/university/">https://careers.mozilla.org/university/</a></p> + + <pre class="brush: html"><a href="https://careers.mozilla.org/university/"> + https://careers.mozilla.org/university/ +</a></pre> + </dd> + <dt>Le texte d'un lien doit être concis</dt> + <dd> + <p>Les longs textes de lien font perdre en lisibilité et ralentissent la navigation avec les lecteurs d'écrans.</p> + <strong><em>Bon exemple </em></strong><em>:</em> Voici une page où vous pouvez <a href="https://www.mozilla.org/firefox/all/" title="Firefox can be download in 90 different languages for 4 different operating systems.">télécharger Firefox</a> + + <pre class="brush: html">Voici une page où vous pouvez +<a href="https://www.mozilla.org/firefox/all/"> + télécharger Firefox +</a> +</pre> + + <p><em><strong>Mauvais exemple </strong>:</em> Voici une page où <a href="https://www.mozilla.org/firefox/all/">vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents</a></p> + + <pre class="brush: html">Voici une page où +<a href="https://www.mozilla.org/firefox/all/"> + vous pouvez télécharger Firefox en 90 langues différentes, pour quatre systèmes d'exploitation différents +</a> +</pre> + </dd> + <dt>Indiquez à quoi correspond la cible du lien</dt> + <dd> + <p>Cela peut paraître évident mais on rencontre parfois des liens dont les textes n'ont rien à voir avec la destination. Soyez explicite, cela simplifiera la navigation pour vos lecteurs et améliorera votre référencement.</p> + + <p><em><strong>Bon exemple :</strong></em><a href="http://getfirefox.org/"> Téléchargez Firefox</a>, le navigateur développé par Mozilla : stable, sûr et rapide.</p> + + <p><em><strong>Mauvais exemple</strong> :</em> <a href="http://getfirefox.org/">Voici une autre application</a> qui améliorera votre navigation sur le Web.</p> + </dd> +</dl> + +<h2 id="Perfectionner_ses_liens">Perfectionner ses liens</h2> + +<dl> + <dt>Faites attention à l'ordre de navigation grâce aux tabulations</dt> + <dd>De nombreuses personnes utilisent le clavier pour naviguer sur une page web. La touche de tabulation est une des seules méthodes permettant de passer d'un lien à un autre. Par défaut, l'ordre de cette navigation correspondra à celui du document HTML. Toutefois, il est possible de surcharger cet ordre grâce à l'attribut {{htmlattrxref("tabindex")}}. Attention toutefois à bien utiliser CSS pour que l'ordre visuel (ou celui déterminé par un lecteur d'écran) soit logique pour le lecteur.</dd> + <dt>Gardez des liens suffisamment grands</dt> + <dd> + <p>Assurez-vous que vos liens puissent être déclenchés facilement, à la souris ou au toucher. CSS peut être utilisé pour cela. <a href="http://www.smashingmagazine.com/2012/02/21/finger-friendly-design-ideal-mobile-touchscreen-target-sizes/">Une recherche basée sur l'expérience des utilisateurs</a> indique que les liens devraient mesurer 72 pixels (45px étant la taille minimale). Attention à ne pas oublier ce point, notamment si vous utilisez une souris ou un pad sur votre poste de travail.</p> + </dd> + <dt>Soulignez les liens et uniquement les liens</dt> + <dd>Lorsque les visiteurs d'un site voient un texte souligné, ils s'attendent à ce que ce texte soit un lien. Pour cette raison, ne soulignez que les liens. Il n'est pas strictement nécessaire de souligner les liens mais <a href="http://www.w3.org/TR/2015/NOTE-WCAG20-TECHS-20150226/F73">la couleur ne suffira pas</a> pour indiquer qu'un texte est un lien.</dd> + <dt>Utilisez une couleur distincte et identifiable pour vos liens</dt> + <dd>Le bleu est utilisé par défaut pour les liens. Vous pouvez utiliser une autre couleur mais celle-ci doit <a href="http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/working-examples/G183/link-contrast.html">former un contraste suffisant avec l'arrière-plan.</a></dd> + <dt>Utilisez une mise en forme distincte pour les liens inhabituels</dt> + <dd>Utilisez CSS pour indiquer aux visiteurs que le lien a un comportement spécifique (un lien externe, un lien qui ouvre une page dans un nouvel onglet, un lien qui ouvre une page dans une autre langue). Voir également {{htmlattrxref("hreflang","a")}}). Sur MDN, par exemple, on ajoute un symbole devant les liens externes (par exemple <a href="https://en.m.wikipedia.org/wiki/Firefox_OS">l'article de Wikipédia sur Firefox OS</a>).</dd> + <dt>Fournissez des cibles et des textes pour tous les liens</dt> + <dd>S'il n'y a pas de texte, il ne sera pas possible de voir le lien et les lecteurs d'écran diront juste « lien fin lien ». S'il n'y a pas de cible (pas de {{htmlattrxref("href")}} ou un <code>href</code> vide ou <code>href="#"</code>), le lien ne mènera nulle part.</dd> +</dl> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>La documentation sur l'élément {{HTMLElement("a")}} dans la référence HTML.</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85/index.html b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85/index.html new file mode 100644 index 0000000000..77e52eafb4 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/creating_hyperlinks_10fd94f15ce1a469a3483e0478cb5d85/index.html @@ -0,0 +1,64 @@ +--- +title: Liens email +slug: Web/Guide/HTML/Liens_email +tags: + - Beginner + - Exemple + - Guide + - HTML + - Web +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#E-mail_links +translation_of_original: Web/Guide/HTML/Email_links +--- +<p><span class="seoSummary">Il est parfois utile de créer des liens ou des boutons qui nous permettent d'écrire un nouvel e-mail. Par exemple, on peut les utiliser pour créer un bouton « contactez-nous ». Ceci est possible grâce à l'élement HTML {{HTMLElement("a")}} et au format d'URL <code>mailto</code>.</span></p> + +<h2 id="Bases_de_mailto">Bases de <code>mailto</code></h2> + +<p>Dans sa forme la plus basique et la plus utilisée, un lien <code>mailto</code> indique simplement l'adresse e-mail du destinataire. Par exemple :</p> + +<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org">Envoyer l'email nulle part</a></pre> + +<p>Le résultat s'affiche comme ceci : <a href="mailto:nullepart@mozilla.org">Envoyer l'email nulle part</a>.</p> + +<p>En réalité, l'adresse e-mail est optionelle. Si on ne l'ajoute pas (le {{htmlattrxref("href", "a")}} contiendra simplement « mailto: »), une nouvelle fenêtre du client de messagerie de l'utilisateur s'ouvrira, sans destinataire spécifié. Cela peut être utile dans le cas d'un bouton « Partager » où l'utilisateur sélectionnera les personnes auxquelles il veut envoyer un e-mail.</p> + +<h2 id="Précisions">Précisions</h2> + +<p>En plus de l'adresse e-mail, on peut fournir d'autres informations. En effet, n'importe quel champ d'en-tête d'un e-mail standard peut être ajoutée à l'URL <code>mailto</code>. Les plus communément utilisés sont « <code>subject</code> », « <code>cc</code> » et « <code>body</code> » (qui n'est pas réellement un champ d'entête mais qui permet de spécifier un message court pour le nouvel email). Chaque champ et sa valeur sont indiqués comme un terme de requête.</p> + +<div class="note"> +<p><strong>Note :</strong> Les valeurs de chaque champ doivent être codées au <a href="https://en.wikipedia.org/wiki/Percent-encoding">format URL</a>.</p> +</div> + +<h3 id="Échantillons_dURL_mailto">Échantillons d'URL <code>mailto</code></h3> + +<p>Voici quelques échantillons d'URL <code>mailto</code>:</p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nullepart@mozilla.org">mailto:nullepart@mozilla.org</a></li> + <li><a href="mailto:nullepart@mozilla.org,personne@mozilla.org">mailto:nullepart@mozilla.org,personne@mozilla.org</a></li> + <li><a href="mailto:nullepart@mozilla.org?cc=personne@mozilla.org">mailto:nullepart@mozilla.org?cc=personne@mozilla.org</a></li> + <li><a href="mailto:nullepart@mozilla.org?cc=personne@mozilla.org&subject=Ceci%20est%20le%20sujet">mailto:nullepart@mozilla.org?cc=personne@mozilla.org&subject=Ceci%20est%20le%20sujet</a></li> +</ul> + +<p>Notez l'utilisation de l'esperluette (&) pour séparer les champs de l'URL <code>mailto</code>. C'est le format standard d'écriture des URL.</p> + +<h3 id="Exemple">Exemple</h3> + +<p>Si vous voulez créer un lien qui permettrait de s'inscrire à une newsletter, vous pouvez utiliser un lien <code>mailto</code> comme ceci :</p> + +<pre class="brush: html notranslate"><a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F"> +Inscrivez-vous à notre newsletter +</a></pre> + +<p>Le résultat s'affiche comme ceci : <a href="mailto:nullepart@mozilla.org?subject=Demande%20inscription%20newsletter&body=Inscrivez-moi%20%C3%A0%20votre%20newsletter%20%21%0D%0A%0D%0ANom%20complet%20%3A%0D%0A%0D%0AO%C3%B9%20avez-vous%20entendu%20parler%20de%20nous%20%3F">Inscrivez-vous à notre newsletter</a>.</p> + +<section id="Quick_Links"> +<ol> + <li>{{HTMLElement("a")}}</li> + <li>{{RFC(6068, "The 'mailto' URI Scheme")}}</li> + <li>{{RFC(5322, "Internet Message Format")}}</li> + <li><a href="http://www.url-encode-decode.com/">Encodage/décodage d'URL en ligne</a></li> +</ol> +</section> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/fr/conflicting/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..170ad81290 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,229 @@ +--- +title: Découper une page web en sections logiques +slug: Apprendre/HTML/Comment/Découper_une_page_web_en_sections_logiques +tags: + - Beginner + - DesignAccessibility + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +translation_of_original: Learn/HTML/Howto/Divide_a_webpage_into_logical_sections +--- +<div class="summary"> +<p>Dans cet article, nous verrons comment structurer un document afin que son plan soit logique pour vous, vos visiteurs dont ceux qui utilisent des technologies d'aide à la navigation.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment structurer un document web grâce aux balises sémantiques.</td> + </tr> + </tbody> +</table> + +<h2 id="Les_sections_de_base">Les sections de base</h2> + +<p>Les sites web ont chacun leur style mais tous ont tendance à partager des composants communs :</p> + +<dl> + <dt>l'en-tête (<em>header</em>)</dt> + <dd>Il s'agit généralement d'un grande bande horizontale, située en haut du site avec un grand titre et/ou un logo. C'est à cet endroit qu'on a toujours la même information sur le site, quelle que soit la page du site sur laquelle on est.</dd> + <dt>la barre de navigation</dt> + <dd>Celle-ci permet de faire référence aux différentes sections du site via des menus ou des onglets. Comme pour l'en-tête, la barre de navigation sera généralmeent présente sur l'ensemble du site. De nombreux concepteurs web considèrent que la barre de navigation fait partie intégrale de l'en-tête mais ce n'est pas strictement nécessaire.</dd> + <dt>le contenu principal</dt> + <dd>Une zone importante, située au centre dont le contenu est spécifique selon la page visitée.</dd> + <dt>le panneau ou la barre latéral-e (<em>sidebar</em>)</dt> + <dd>Il contient des informations périphériques, des liens, des citations, des publicités. Généralement, ce panneau dépend du contenu principal de la page mais on trouve également des panneaux latéraux qui agissent comme des menus de navigation secondaires.</dd> + <dt>le pied de page (<em>footer</em>)</dt> + <dd>C'est ici qu'on trouvera les informations de contact, de copyright… C'est un endroit où on place des informations communes à l'ensemble du site mais qui ne sont pas primordiales pour le site en tant que tel. Le pied de page est parfois utilisé par les outils de référencement afin de fournir un accès rapide à certaines parties du site.</dd> +</dl> + +<p>Lorsqu'on assemble ces éléments, on arrive à quelque chose qui ressemble <em>grosso modo</em> à :</p> + +<p><img alt="[Diagram indicating the divisions with visual cues]" src="https://mdn.mozillademos.org/files/10679/Screenshot%20from%202015-04-29%2016:21:23.png" style="height: 462px; width: 821px;"></p> + +<h2 id="HTML_à_la_rescousse">HTML à la rescousse</h2> + +<p>Dans le dessin précédent, des indications visuelles permettent d'identifier rapidement l'en-tête, la barre de navigation, le contenu, etc. Cela dit, un site ne se résume pas à son aspect visuel. Une personne qui serait déficiente sur le plan visuel (par exemple quelqu'un qui est daltonien, comme <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% de la population mondiale</a>) pourra tirer partie de concepts comme « barre de navigation » et « contenu principal », en revanche, « taille de police plus grande » et « vert clair » seront inutiles.</p> + +<p>Dans votre code HTML, vous pouvez identifier les sections en fonction de leur <em>fonctionnalité</em>. C'est ce que nous verrons dans la suite de cet article. Pour savoir comment ajouter des indications visuelles, vous pouvez consulter <a href="https://developer.mozilla.org/en-US/Learn/CSS/Howto">notre tutoriel CSS</a>.</p> + +<p>Pour structurer une page avec cette sémantique, HTML fournit des balises dédiées :</p> + +<ul> + <li><strong>Pour l'en-tête : </strong>{{htmlelement("header")}}</li> + <li><strong>Pour la barre de navigation : </strong>{{htmlelement("nav")}}</li> + <li><strong>Pour le contenu principal : </strong>{{htmlelement("main")}} ainsi qu'une association d'éléments {{HTMLElement("article")}}, {{htmlelement("section")}} et {{htmlelement("div")}} pour créer des sous-sections</li> + <li><strong>Pour la barre latérale : </strong>{{htmlelement("aside")}}</li> + <li><strong>Pour le pied de page : </strong>{{htmlelement("footer")}}</li> +</ul> + +<div class="note"> +<p>Pour la barre de navigation, on trouvera souvent <a href="/fr/Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML">une liste, non-ordonnée, de liens</a> placée dans un élément <code><nav></code>. <a href="https://css-tricks.com/wrapup-of-navigation-in-lists/">Chris Coyier résume les avantages et inconvénients</a> entre les listes et les liens directs.</p> +</div> + +<h3 id="Quel_élément_utiliser">Quel élément utiliser</h3> + +<p>Vous pouvez être confronté-e à d'autres scénarios que celui que nous venons de voir. Dans la liste qui suit, nous verrons des descriptions plus détaillées des éléments HTML liés aux sections d'un document :</p> + +<ul> + <li>{{HTMLElement('main')}} est utilisé pour indiquer du contenu qui appartient <em>exclusivement</em> à cette page. <code><main></code> ne doit être utilisé qu'une seule fois par page et se place directement sous l'élément {{HTMLElement('body')}}. Dans l'idéal, il ne devrait pas être imbriqué dans d'autres éléments sous <code><body></code>.</li> + <li>{{HTMLElement('article')}} contient un bloc de contenu qui pourrait être cohérent sans le reste de la page (par exemple un billet de blog).</li> + <li>{{HTMLElement('section')}} agit comme <code><article></code> mais dépend du reste de la page, qui fournit alors un contexte. Il est possible d'utiliser des sections pour grouper ou subdiviser des articles. Généralement, pour respecter des bonnes pratiques, on commencera une section avec un élément de <a href="/fr/Apprendre/HTML/Howto/Set_up_a_proper_title_hierarchy">titre</a>.</li> + <li>{{HTMLElement('aside')}} contient du contenu qui n'est pas directement lié au contenu principal mais qui peut fournir des informations supplémentaires, liées à ce contenu principal (par exemple une biographie de l'auteur, des liens sur le sujet, etc.).</li> + <li>{{HTMLElement('header')}} représente un groupe de contenu introductif. Si c'est un élément inclus dans {{HTMLElement('body')}}, il définit l'en-tête de la page web. En revanche, si c'est un élément inclus dans {{HTMLElement('article')}} ou {{HTMLElement('section')}}, il définit un en-tête propre à cette section (attention à ne pas confondre cette notion avec les <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">niveaux de titre</a>).</li> + <li>{{HTMLElement('footer')}} représente un groupe de contenu final. Selon sa position il aura un sens analogue à l'élément {{HTMLElement('header')}}.</li> + <li>{{HTMLElement('div')}} est un élément qui peut être utilisé (de préférence avec un attribut {{htmlattrxref('class')}} donné) lorsqu'il n'existe pas d'élément plus spécifique. Les éléments <code><div></code> n'ajoutent pas de division sémantique au document, cela peut permettre de manipuler certaines parties d'un document (la classe ou l'identifiant du <code><div></code> permettra de le(s) retrouver facilement) via {{glossary("CSS")}} ou {{glossary("JavaScript")}}.</li> +</ul> + +<div class="warning"> +<p><strong>Attention : </strong>Les éléments <code><div></code> sont parfois si pratiques qu'on en utilise trop. Ces éléments ne portent aucune sémantique, il ne font qu'encombrer le code HTML. Attention donc à ne les utiliser que lorsqu'il n'existe pas de meilleure solution sémantique. S'ils sont trop présents, cela rendra les mises à jour et la maintenance plus difficiles.</p> +</div> + +<h3 id="Exemple">Exemple</h3> + +<p>Exprimé sous forme de code HTML, le dessin présenté ci-avant correspondrait à :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="utf-8"> + <title>Document HTML</title> +</head> +<body> + + <!-- + Voici l'en-tête principal, utilisé sur les + différentes pages du site web + --> + <header> + header + + <!-- + Bien que ce ne soit pas obligatoire, on trouve + généralement un menu de navigation dans l'en-tête + principal + --> + <nav> + <ul> + <li><a href="#">Navigation</a></li> + <li><a href="#">Qui nous sommes</a></li> + <li><a href="#">Ce que nous faisons</a></li> + <li><a href="#">Contact</a></li> + </ul> + + <!-- + Une barre de recherche est un outil de navigation + "non-linéaire" au sein du site web. + --> + <form> + <input type="search" name="q" placeholder="Recherchez..."> + <input type="submit" value="OK"> + </form> + </nav> + </header> + + <!-- + Voici le contenu principal + --> + <main> + + <!-- + Il contient un article + --> + <article> + <h1>Titre</h1> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. + Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue + ligula as quam viverra nec consectetur ant hendrerit. Donec et + mollis dolor. Praesent et diam eget libero egestas mattis sit + amet vitae augue. Nam tincidunt congue enim, ut porta lorem + lacinia consectetur.</p> + + <h2>Sous-section</h2> + <p>Donec ut librero sed accu vehicula ultricies a non tortor. + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean + ut gravida lorem. Ut turpis felis, pulvinar a semper sed, + adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. + Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat + nist imperdiet. Ut convallis libero in urna ultrices accumsan. + Donec sed odio eros.</p> + + <h2>Une autre sous-section</h2> + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. + Cum soclis natoque penatibus et manis dis parturient montes, + nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris + vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut + tristique vitae sagittis vel odio. Maecenas convallis ullamcorper + ultricied. Curabitur ornare, ligula semper consectetur sagittis, + nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- + le contenu placé sur le côté peut aussi + être dans le contenu principal + --> + <aside> + <p>N'hésitez pas à rendre visite à nos sponsors !</p> + <ul> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + <li><a href="#">item</a></li> + </ul> + </aside> + </main> + + <!-- + Enfin, voici le pied de page principal, + utilisé sur les différentes pages du site. + Note : Ceci est une fausse déclaration de copyright + Attention à celles qui sont réelles. + --> + <footer> + ©Copyright 2050 par exemple.com. Tous droits réservés. + </footer> +</body> +</html> +</pre> + +<h2 id="Les_rôles_ARIA_qu'est-ce_que_c'est">Les rôles ARIA, qu'est-ce que c'est ?</h2> + +<p>HTML a initialement été conçu pour définir la <em>structure</em> d'un document. Or, il est désormais utilisé pour créer des applications web.</p> + +<p>{{Glossary("ARIA")}} est une méthode qui permet d'indiquer aux technologies d'aide à la navigation qu'un élément HTML possède des fonctionnalités web applicatives.</p> + +<p>Certains éléments HTML5 comme {{HTMLElement('nav')}} permettent de contenir des informations de ce genre et rendent (dans ce cas particulier) les attributs ARIA redondants. Cela dit, si vous utilisez des technologies qui ne supportent pas encore HTML5 ou que vous souhaitez utiliser un élément qui n'a pas de sémantique particulière (par exemple {{HTMLElement('div')}}) , vous pouvez appliquer des rôles ARIA de cette façon:</p> + +<ul> + <li><code><main role="main"></code></li> + <li><code><header role="banner"></code></li> + <li><code><nav role="navigation"></code></li> + <li><code><aside role="complementary"></code></li> + <li><code><footer role="contentinfo"></code></li> +</ul> + +<p>Pour en savoir plus à propos d'ARIA, consultez notre <a href="/fr/docs/Accessibilité/ARIA">documentation.</a></p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{HTMLElement("article")}}</li> + <li>{{htmlelement("aside")}}</li> + <li>{{htmlelement("div")}}</li> + <li>{{htmlelement("footer")}}</li> + <li>{{htmlelement("header")}}</li> + <li>{{htmlelement("main")}}</li> + <li>{{htmlelement("nav")}}</li> + <li>{{htmlelement("section")}}</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/getting_started/index.html b/files/fr/conflicting/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..3e911e92c8 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,189 @@ +--- +title: Créer un document HTML simple +slug: Apprendre/HTML/Comment/Créer_un_document_HTML_simple +tags: + - Beginner + - Guide + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +translation_of_original: Learn/HTML/Howto/Create_a_basic_HTML_document +--- +<p class="summary">Pour créer un site web, on commence par rédiger un document HTML. Les navigateurs actuels sont plutôt tolérants mais pour éviter quelques maux de tête, mieux vaut l'assembler correctement dès le début.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez avoir <a href="/en-US/Learn/Choose,_Install_and_set_up_a_text_editor">installé un éditeur de texte</a> et connaître <a href="/en-US/Learn/Getting_started_with_the_web/HTML_basics">quelques rudiments de HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre à mettre en place un document HTML vierge tout en comprenant le rôle de chaque composant du squelette obtenu.</td> + </tr> + </tbody> +</table> + +<p>Chaque document HTML partage la même structure. Cet article décrira chacune des parties de cette structure. Une fois n'est pas coutume, commençons par la fin en regardant la structure complète, avant de la décomposer :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="fr"> + <head> + <meta charset="utf-8"> + <title>Inscrire un titre ici</title> + <!-- On peut avoir d'autres méta-données ici --> + </head> + <body> + <!-- Ici, on placera tout le contenu à destination + de l'utilisateur --> + </body> +</html></pre> + +<p>Dans la suite de cet article, nous verrons les raisons d'être de chacun des morceaux de cet exemple. En attendant, vous pouvez copier/coller cette exemple dans votre éditeur de texte pour avoir un squelette de base, réutilisable pour vos différents documents.</p> + +<h2 id="Qu'est-ce_qu'un_document_HTML">Qu'est-ce qu'un document HTML ?</h2> + +<p>Un document HTML ou <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">une page web</a> est simplement composé de texte structuré au sein de balise (une balise étant un mot-clé encadré par des chevrons ("<>"), par exemple, dans l'exemple précédent <code><html></code> et <code><body></code> sont deux des éléments qui sont utilisés). La plupart des balises fonctionnent par paires (on a alors une balise ouvrante <code><body></code> et une balise fermante correspondante : <code></body></code>). Un <strong><dfn>{{Glossary('élément')}}</dfn></strong> est une chaîne de texte entre deux balises.</p> + +<p>La plupart des programmes (le plus souvent des {{glossary("navigateur","navigateurs")}}) traitent ces balises pour générer (ou « rendre ») le site que l'utilisateur peut voir, écouter ou ressentir.</p> + +<p>Étant donné que HTML est un format textuel, il est possible d'écrire des fichiers HTML avec n'importe quel <a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">éditeur de texte</a>. Ajouter des balises HTML au texte est très simple et se fait en un rien de temps. Pour choisir les meilleurs outils, mieux vaut comprendre les balises et {{Glossary("Attribut","attributs")}} les plus communs. C'est le but de la <a href="/fr/Apprendre">zone d'apprentissage de MDN</a>.</p> + +<p>Dans la suite de cet article, nous expliquerons les différents fragments de l'exemple précédent :</p> + +<ul> + <li>ce qu'est un {{glossary("doctype")}} et pourquoi c'est important</li> + <li>l'élément racine : {{htmlelement("html")}}</li> + <li>la différence entre les éléments placés dans {{htmlelement("head")}} et dans {{htmlelement("body")}}</li> + <li>l'importance de l'élément {{htmlelement("title")}}.</li> + <li>la définition du jeu de caractères à utiliser pour le document avec l'élément {{htmlelement("meta")}}.</li> +</ul> + +<h2 id="Le_doctype">Le <em>doctype</em></h2> + +<p>La chaîne de texte suivante est appelée {{Glossary("doctype")}} (qui est la contraction, anglaise, de « document » et « type »).</p> + +<pre class="brush: html"><!DOCTYPE html></pre> + +<p>En ce qui concerne HTML, le <em>doctype</em> est un reliquat historique. Pourquoi est-il alors toujours présent ?</p> + +<p>Si vous ne commencez pas votre document par <code><!DOCTYPE html></code>, les navigateurs afficheront votre document en <a href="/fr/docs/Mode_quirks_de_Mozilla"><em>mode quirks</em></a>. Le mode <em>quirks</em> est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.</p> + +<p>Le <em>doctype</em> déclenche l'utilisation du mode <em>standard</em>. Cela fait que la page sera affichée de façon prévisible et cohérente par rapport aux standards définis par le {{glossary("W3C")}} et le {{glossary("WHATWG")}}. Cela signifie également que les navigateurs gèrent les erreurs de façon standard, prévisible et homogène.</p> + +<div class="warning"> +<p><strong>Attention :</strong> Le <em>doctype</em> doit commencer le document HTML avant toute autre chose (pas de commentaires HTML, pas de sauts de ligne, pas de blancs). Certains navigateurs historiques seront très pointilleux à ce sujet et mieux vaut donc respecter cette règle.</p> +</div> + +<h2 id="L'élément_<html>">L'élément <code><html></code></h2> + +<p>Tout le document (en dehors du <em>doctype</em>) est contenu entre les balises <code><html></code> et <code></html></code>. Il ne peut y avoir qu'un seul élément {{HTMLElement('html')}} par document.</p> + +<div class="note"> +<p>Il est possible d'oublier <code><html></code> et le navigateur le comprendra de façon implicite. Cependant, afin de pouvoir manipuler le document dans son ensemble, <code><html></code> sera nécessaire. Par exemple, on utilise <code><html lang="fr"></code> pour indiquer que le document entier est écrit en français. De la même façon, <code><html></code> permettra d'appliquer une mise en forme sur tout le document grâce à CSS.</p> +</div> + +<h2 id="Les_éléments_<head>_et_<body>">Les éléments <code><head></code> et <code><body></code></h2> + +<p>Au sein de l'élément <code><html></code>, le document aura une « tête » (<em>head</em> en anglais) située entre les balises <code><head></code> et <code></head></code> et un « corps » (<em>body</em> en anglais) situé entre les balises <code><body></code> et <code></body></code>.</p> + +<p>La tête de la page contient les méta-données (c'est-à-dire les données qui décrivent le document) mais pas le contenu principal affiché pour l'utilisateur. Ces méta-données peuvent être utilisées par les moteurs de recherches, pour ajouter des liens vers des feuilles de style CSS, etc. Dans la section qui suit, nous verrons les contenus les plus importants pour cet élément : le titre et la déclaration du jeu de caractères.</p> + +<p>Le corps contient le contenu affiché pour l'utilisateur. C'est donc sur cet élément qu'on s'attardera le plus.</p> + +<div class="note"> +<p>HTML est très souple à propos de la structure du document, si vous oubliez les éléments <code><head></code> et <code><body></code>, ils seront implicitement ajoutés. Voici un document sans <code><html></code> ni <code><head></code> ni <code><body></code> :</p> + +<pre class="brush: html"><!DOCTYPE html> +<title>Ceci est un document HTML</title> + +Coucou monde ! (<i>Hello world!</i>) +</pre> + +<p>Le navigateur s'occupera de tout :</p> + +<p><img alt="[Screenshot of the browser making its best guess]" src="https://mdn.mozillademos.org/files/11675/Capture%20du%202015-10-04%2017-23-03.png" style="height: 254px; width: 873px;"></p> + +<p>Même si le navigateur prend soin d'ajouter les balises qui manquent : c'est une mauvaise idée de les oublier. Si vous continuez sur cette voie et que votre contenu devient plus complexe, vous devrez faire confiance au navigateur pour déterminer ce qui est la tête et ce qui est le corps. En explicitant où est <code><head></code> et où est <code><body></code>, vous gagnerez plus de temps.</p> +</div> + +<h2 id="L'élément_<title>_le_titre_du_document">L'élément <code><title></code> : le titre du document</h2> + +<p>Dans la tête du document, on écrira un titre concis et équivoque qui décrit le document. Il faut que le titre ait du sens sans autre contexte. Récapitulons, voici où va le titre :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Mon fabuleux exemple HTML</title> + ... + </head> + <body> + ... + </body> +</html></pre> + +<p>Le titre ne doit contenir que du texte (aucun élément ne sera interprété dans <code><title></code>).</p> + +<div class="note"> +<p>Là encore, libre à vous de ne pas indiquer le titre et d'en subir les conséquences. Le titre d'un document est notamment utilisé dans les résultats des moteurs de recherche et pour indiquer le propos du document. De plus, les navigateurs graphiques utiliseront les titres pour les libellés des onglets.</p> + +<p>S'il n'y a pas de titre, les navigateurs et les moteurs de recherches construiront eux-mêmes le texte, ce qui ne sera pas très parlant :</p> + +<pre class="brush: html"><!DOCTYPE html> +<!-- Pas de titre ici --> +Hello world! +</pre> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Chrome</th> + <td><img alt="[Screenshot of a Chrome tab labeled ''index.html'']" src="https://mdn.mozillademos.org/files/10887/index-ch.png" style="height: 147px; width: 400px;"></td> + </tr> + </tbody> + <tbody> + <tr> + <th scope="col">Firefox</th> + <td><img alt="[Screenshot of a Firefox tab labeled with the HTML document's entire path and filename]" src="https://mdn.mozillademos.org/files/11143/index-ff.png"></td> + </tr> + </tbody> +</table> +</div> + +<dl> + <dt> + <h2 id="Définir_le_jeu_de_caractères_utilisé">Définir le jeu de caractères utilisé</h2> + </dt> +</dl> + +<p>Les ordinateurs enregistrent toutes les informations sous forme de zéros et de uns. Tous les nombres sont, au final, exprimé en base 2 (c'est-à-dire au format binaire). Pour exprimer d'autres valeurs, il est nécessaire de s'accorder sur un format de représentation qui définit la correspondance entre telle valeur binaire et telle valeur à représenter.</p> + +<p>Heureusement, lorsqu'il s'agit de représenter des chaînes de caractères, il existe un standard appelé {{glossary("UTF-8")}} qui permet d'associer des nombres binaires à l'ensemble des glyphes contenus dans les différents langages humains. On peut donc dire, sans ambiguité, que "A" sera stocké avec la valeur "65", ce qui correspond, en écriture binaire, au nombre "01000001". </p> + +<p>D'autres formes d'encodage sont encore utilisées par ailleurs, aussi, pour garantir le résultat obtenu, on déclare explicitement qu'on utilise UTF-8 dans le fichier HTML. C'est pour cette raison que nous avons ajouté <code><meta charset="utf-8"></code> dans l'exemple ci-avant.</p> + +<div class="note"> +<p><strong>Note :</strong> En plus de cette déclaration, il faut également enregistrer le fichier HTML avec l'encodage UTF-8. Généralememnt, vous trouverez une option dans le menu « Enregistrer sous… » qui permet de définir l'encodage à utiliser lors de l'enregistrement.</p> + +<p>Voici ce qui se produit si on utilise un document HTML encodé en ISO-8859-1 et non en UTF-8. Le navigateur affichera � à la place des lettres accentuées :</p> + +<p><img alt="[Screenshot showing the browser displaying ''Les Fran?ais utilisent des lettres accentu?es'']" src="https://mdn.mozillademos.org/files/10907/index-encoding.png" style="height: 132px; width: 335px;"></p> +</div> + +<h2 id="Modèles_et_gabarits">Modèles et gabarits</h2> + +<p>Au fur et à mesure que vous créerez vos document HTML, vous remarquerez que la même structure revient encore et toujours… et que c'est pénible de la saisir à chaque fois. Pour épargner du temps, vous pouvez sauvegarder ce code dans un fichier modèle que vous pourrez utiliser à chaque fois que vous aurez besoin d'une nouvelle page HTML (pour laquelle il suffira de copier le modèle plutôt que de retaper le code correspondant).</p> + +<p>Vous pouvez mettre en place des modèles personnalisés pour les différents projets que vous avez. Cela vous permettra d'éviter d'écrire à chaque fois la même chose pour les barres de navigation, les liens vers les feuilles de styles ou du code qui est réutilisé pour chaque page d'un site (certaines sociétés travaillent même à créer, fournir et vendre des modèles de fichiers HTML).</p> + +<div class="note"> +<p><strong>Astuce :</strong> Si votre éditeur de texte permet de gérer les <em>snippets</em> (fragments de code), vous pouvez placer votre modèle dans un <em>snippet</em> pour l'invoquer rapidement et générer un début de document à la vitesse de la lumière.</p> +</div> + +<div class="note"> +<p><strong>Astuce :</strong> À un certain moment, vous serez devenu-e très familier-e avec HTML. Lorsque ce sera le cas, n'hésitez pas à consulter le projet <a href="https://html5boilerplate.com/">HTML5 Boilerplate</a>. Celui-ci décrit des <em>templates</em> (modèles) avancés de documents HTML, construits avec les meilleures pratiques du développement web.</p> +</div> + +<h2 id="Exercices">Exercices</h2> + +<p>À construire, <a href="/fr/docs/MDN/Contribute/Howto/Create_an_interactive_exercise_to_help_learning_the_web">n'hésitez pas à contribuer !</a></p> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..e7c828c348 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,171 @@ +--- +title: Créer une liste d'éléments avec HTML +slug: Apprendre/HTML/Comment/Créer_une_liste_d_éléments_avec_HTML +tags: + - Beginner + - Guide + - HTML +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists +translation_of_original: Learn/HTML/Howto/Create_list_of_items_with_HTML +--- +<div class="summary"> +<p>Vous souhaitez ajouter une liste numérotée ou une liste à puces. Quel que soit son type, HTML permet de dresser une liste très rapidement.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre à mettre en place des listes (ordonnées et non-ordonnées) avec HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Les_listes_non-ordonnées_et_les_listes_ordonnées">Les listes non-ordonnées et les listes ordonnées</h2> + +<dl> + <dt>Les listes non-ordonnées</dt> + <dd> + <p>Comme leur nom l'indique, les listes non-ordonnées n'ont pas de notion d'ordre et on peut mélanger leurs éléments sans que cela modifie leur sens. Une liste de courses est un bon exemple de liste non-ordonnée (l'ordre dans lequel on achète les produits n'a pas grande importance) :</p> + + <p><img alt="Croustille, moutarde" src="https://mdn.mozillademos.org/files/11639/3409407112_4348b68ea4_z.jpg" style="height: 281px; width: 423px;" title="Photo par Joseph SARDIN"></p> + + <p>(Photo par <a href="https://www.flickr.com/photos/14328577@N08/">Joseph SARDIN</a>)</p> + + <p>Les listes non-ordonnées apparaissent parfois à des endroits inattendus : les barres de navigation sont par exemple des listes non-ordonnées auxquelles on a appliqué quelques règles CSS pour la mise en forme.</p> + </dd> + <dt>Les listes ordonnées</dt> + <dd> + <p>Dans ce cas, les éléments de la liste doivent être lus ou réalisés dans un ordre donné, les éléments sont donc numérotés. On retrouve souvent ces listes pour décrire des processus pas-à-pas (comme un mode d'emploi ou une recette) où chaque étape ne peut être réalisée que si l'action précédente a été traitée :</p> + <a href="https://www.flickr.com/photos/chiotsrun/4457386990/sizes/m/"><img alt="" src="https://farm3.staticflickr.com/2785/4457386990_4d30f85964_d.jpg" style="height: 344px; width: 500px;" title="© Chiot's Run"></a></dd> +</dl> + +<h2 id="Construire_des_listes_avec_HTML">Construire des listes avec HTML</h2> + +<p>Comment donc construire une liste avec HTML ? Pour commencer, il faudra répondre à une question : si on mélange les éléments de la liste, est-ce que le sens de la liste change également ?</p> + +<ul> + <li>Si oui, alors il faudra utiliser un élément {{HTMLElement('ol')}} pour créer une <strong>liste ordonnée.</strong></li> + <li>Sinon, il faudra utiliser un élément {{HTMLElement('ul')}} qui permettra de créer une <strong>liste non-ordonnée.</strong></li> +</ul> + +<h3 id="Ajouter_des_éléments_à_une_liste">Ajouter des éléments à une liste</h3> + +<p>Toute la liste sera placée dans les balises {{htmlelement("ol")}} ou {{htmlelement("ul")}}. Chacun des éléments de la liste sera placé à l'intérieur d'un élément {{htmlelement("li")}}. Voici un exemple qui contient les deux types de liste :</p> + +<pre class="brush: html"><h1>Guacamole rapide à faire</h1> + +<h2>Ingrédients</h2> +<ul> + <li>2 avocats (pelés et avec les noyaux retirés)</li> + <li>le jus d'un citron</li> + <li>¼ de concombre, coupé grossièrement</li> + <li>1 petite tomate, coupée</li> +</ul> + +<h2>Instructions</h2> +<ol> + <li>Écrasez délicatement les avocats avec une fourchette</li> + <li>Placez la purée obtenue dans un plat et arrosez avec le jus de citron</li> + <li>Mélangez pour que le jus de citron empêche la purée d'avocat de noircir</li> + <li>Mélangez la tomate et le concombre coupés</li> + <li>Gardez au frais et servir rapidement avec des tortillas</li> +</ol> +</pre> + +<p>Par défaut, le navigateur utilisera des chiffres pour les listes ordonnées et des puces (rondes) pour les listes non-ordonnées :</p> + +<p>{{EmbedLiveSample('Ajouter_des_éléments_à_une_liste','100%',350)}}</p> + +<h3 id="Comment_modifier_la_numérotation_ou_les_puces">Comment modifier la numérotation ou les puces</h3> + +<h4 id="Avec_HTML">Avec HTML</h4> + +<ul> + <li><strong>Pour commencer une liste avec un autre nombre que 1</strong>, on pourra utiliser l'attribut {{htmlattrxref('start','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol start="3"></code>.</li> + <li><strong>Pour décompter plutôt que compter </strong>(par exemple 5-4-3-2-1), on pourra utiliser l'attribut {{htmlattrxref('reversed','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol reversed></code>.</li> + <li><strong>Pour utiliser des lettres à la place des chiffres</strong>, on pourra utiliser l'attribut {{htmlattrxref('type','ol')}} de l'élément {{HTMLElement('ol')}} : <code><ol type="a"></code> (<code>type="1"</code> affichera des nombres, <code>="a"</code> pour utiliser des lettres minuscules, <code>="A"</code> pour utiliser des lettres majuscules, <code>="i"</code> pour utiliser les chiffres romains en minuscules, <code>="I"</code> pour utiliser les chiffres romains en majuscules).</li> + <li><strong>Pour changer la numérotation d'un élément donné</strong>, on pourra utiliser l'attribut {{htmlattrxref('value','li')}} de la balise {{HTMLElement('li')}} : <code><li value="5"></code> (les éléments <em>suivants</em> de la liste seront également renumérotés).</li> +</ul> + +<p>Par exemple, ici, on aura une liste qui utilise des lettres majuscules et qui commence à partir de C :</p> + +<pre class="brush: html"><ol start="3" type="A"> + <li>Je suis premier</li> + <li>Je suis deuxième</li> + <li>Je suis troisième</li> +</ol></pre> + +<p>Ce qui donne :</p> + +<p>{{EmbedLiveSample('Avec_HTML','100%',90)}}</p> + +<h4 id="Avec_CSS">Avec CSS</h4> + +<p>Les attributs HTML permettent de modifier le contenu d'une liste. Pour ajuster l'aspect cosmétique d'une liste, il faudra utiliser CSS.</p> + +<ul> + <li><strong>Pour modifier le style de puce ou le style de numérotation, </strong>on pourra utiliser la propriété CSS {{cssxref("list-style-type")}}</li> + <li><strong>Pour utiliser une image donnée comme puce,</strong> on pourra utiliser la propriété CSS {{cssxref("list-style-image")}}. Attention toutefois, les images sont plus lourdes (donc plus lentes) et moins adaptatives que le texte.</li> +</ul> + +<p>CSS peut permettre d'obtenir des effets très complexes (comme <a href="/fr/docs/Web/CSS/Compteurs_CSS">un système de comptage personnalisé</a>). Si vous souhaitez apprendre CSS, vous pouvez parcourir <a href="/fr/docs/CSS/Premiers_pas">le Guide CSS</a> et voir <a href="/fr/Apprendre/HTML/Comment/Appliquer_du_CSS_à_une_page_web">comment appliquer des règles CSS à une page web</a>.</p> + +<p>Prenons un rapide exemple. Voici une liste HTML non-ordonnée :</p> + +<pre class="brush: html"><ul> + <li>J'ai un point</li> + <li>J'ai un cercle</li> + <li>J'ai aussi un cercle</li> +</ul></pre> + +<p>Ces règles CSS permettront que la puce des éléments soit un cercle, sauf pour le premier (où ce sera un point) :</p> + +<pre class="brush: css">ul { + list-style-type: circle; +} + +li:first-child { + list-style-type: disc; +} +</pre> + +<p>Ce code donnera :</p> + +<p>{{EmbedLiveSample('Avec_CSS','100%',90)}}</p> + +<h3 id="Les_listes_imbriquées">Les listes imbriquées</h3> + +<p>On voit souvent plusieurs listes placées les unes dans les autres. Autrement dit, on peut imbriquer des listes (un élément d'une liste sera une liste entière) :</p> + +<pre class="brush: html"><ul> + <li>Un composant</li> + <li>Un processus : + <ol> + <li>Étape 1</li> + <li>Étape 2</li> + <li>Étape 3</li> + </ol> + </li> + <li>Un composant</li> +</ul> +</pre> + +<p>Cela donnera le résultat suivant :</p> + +<p>{{ EmbedLiveSample('Les_listes_imbriquées','100%',150) }}</p> + +<p>Les menus de navigation utilisent parfois des listes imbriquées. Pour étudier un exemple réel, vous pouvez <a href="/fr/docs/Outils/Inspecteur/Comment/Examiner_et_éditer_le_code_HTML">inspecter le code HTML</a> du menu MDN qui se situe en haut de cette page.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{HTMLElement("ul")}}</li> + <li>{{HTMLElement("ol")}}</li> + <li>{{HTMLElement("li")}}</li> + <li><a href="http://www.w3.org/TR/html4/struct/lists.html#h-10.1">Des recommandations sur comment utiliser les listes</a></li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6/index.html b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6/index.html new file mode 100644 index 0000000000..668ad5c084 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_42ad0dcdd765b60d8adda1f6293954b6/index.html @@ -0,0 +1,189 @@ +--- +title: Mettre l'accent sur un contenu ou indiquer qu'un texte est important +slug: >- + Apprendre/HTML/Comment/Mettre_l_accent_sur_un_contenu_ou_indiquer_qu_un_texte_est_important +tags: + - Beginner + - Composing + - Guide + - HTML + - Learn + - OpenPractices +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance +translation_of_original: Learn/HTML/Howto/Emphasize_content_or_indicate_that_text_is_important +--- +<p class="summary">Dans cet article, nous verrons comment baliser des passages caractéristiques, selon leur importance, leur pertinence ou un changement de ton.</p> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML ismple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment marquer des passages de texte contenus dans votre document qui seraient spéciaux ou particulièrement importants pour les lecteurs.</td> + </tr> + </tbody> +</table> + +<p>Les dialogues ne se résument pas uniquement à des séries de mots : le ton importe également. Dans les œuvres couchées sur le papier, ce sont la ponctuation et la mise en forme qui permettent de retranscrire ces informations. Quelle que soit l'outil utilisé, le but est d'ajouter des informations implicites.</p> + +<p>Voici un exemple simple :</p> + +<blockquote> +<p>Je suis en retard.</p> + +<p>Je suis en retard ?</p> +</blockquote> + +<p>Dans cet exemple, la première phrase exprime une connaissance (je sais que je suis en retard) alors que la seconde évoque un doute ou pose une question. On remarquera que l'ordre des mots n'a pas changé, seule la ponctuation change cette nuance. À l'oral, cela se serait traduit par un changement de ton.</p> + +<p>La mise en forme permet également d'ajouter des nuances. Voici un deuxième exemple :</p> + +<blockquote> +<p>Je suis sympa, même si parfois je suis méchant.</p> +</blockquote> + +<p>Cette phrase est plutôt neutre. Ajoutons quelque chose pour changer ça :</p> + +<blockquote> +<p>Je suis <em>sympa</em>, même si parfois je suis méchant.</p> + +<p>Je suis sympa, même si parfois je suis <em>méchant</em>.</p> +</blockquote> + +<p>Remarquez-vous le changement que cela apporte ? L'italique accentue l'adjectif « sympa » ou « méchant ». En imprimerie, l'accentuation est portée par la mise en forme (ici la mise en italique). Il faudrait plus de contexte pour saisir tout le sens de cette phrase mais la mise en forme ajoute clairement une intonation.</p> + +<p>Cet article ne porte pas sur la mise en forme du document. Ce n'est pas le rôle de HTML que de mettre en forme un document (en revanche, la tâche est toute indiquée pour {{Glossary('CSS')}} qui vous aidera à contrôler l'aspect visuel de votre page web). Ici, nous verrons comment ajouter le <em>sens</em> porté par la mise en forme. Or, ajouter du sens est <em>le</em> rôle de HTML. Une fois que le sens est présent dans le document, alors, on pourra le mettre en forme grâce à <a href="/fr/Apprendre/CSS/Howto">CSS</a>.</p> + +<p>Ici, nous évoquerons trois nuances qui peuvent être exprimées par HTML : <em>l'emphase</em>, <em>l'importance</em> et <em>la pertinence</em><em>.</em></p> + +<h2 id="L'emphase">L'emphase</h2> + +<p>L'élément {{htmlelement('em')}} (<code><em></code> pour <em>emphase</em>) permet d'exprimer une accentuation particulière sur un ou plusieurs mots (qui se serait traduite à l'oral par un changement de ton).</p> + +<pre class="brush: html">Allons-nous <em>au cinéma</em> ce soir ? +<code>Allons-nous au cinéma <em>ce soir</em></code> ? +</pre> + +<p>Par défaut, un navigateur graphique affiche le texte contenu dans un élément <code><em></code> en italique mais cette mise en forme peut être changée avec CSS. Les lecteurs d'écran utiliseront un ton différent pour lire ce texte. Pour résumer, <em><code><em></code> signifie emphase et pas italique.</em></p> + +<h2 id="L'importance">L'importance</h2> + +<p>L'élément {{htmlelement("strong")}} permet d'indiquer une importance forte (c'est en quelque sorte une emphase renforcée).</p> + +<pre class="brush: html"><code><p> + <strong>Ne pas</strong> toucher ces produits chimiques. + Ces produits chimiques sont <strong>corrosifs !</strong> +</p></code> +</pre> + +<p>Ici aussi, par défaut les navigateurs graphiques afficheront le texte contenu dans <code><strong></code> en gras. Mais là encore, <em><code><strong></code> signifie « très important » et pas « gras » !</em> La mise en forme pourra être adaptée librement avec CSS. De même, un lecteur d'écran lira le texte différemment car celui-ci est important (et non parce qu'il est affiché en gras).</p> + +<h2 id="La_pertinence">La pertinence</h2> + +<p><code><strong></code> permet d'indiquer du texte qui est important pour le contexte courant. L'élément {{htmlelement("mark")}}, en revanche, signifie que le texte est pertinent par rapport au contenu destiné au lecteur. Un exemple courant est l'utilisation des résultats liés à une recherche :</p> + +<pre class="brush: html"><p> + « ce » apparaît 3 fois dans le texte : + <mark>Ce</mark> chat a tué <mark>ce</mark> + rat et <mark>ce</mark> moineau. +</p> +</pre> + +<p>Là encore, la mise en forme appliquée peut être modifiée. Par défaut, le texte sera affiché sur un fond jaune :</p> + +<p>{{EmbedLiveSample('La_pertinence', '100%', 64)}}</p> + +<div class="note"> +<p>Attention lorsqu'on utilise <code><mark></code> pour marquer des résultats liés à une recherche. Si la recherche renvoie des correspondances partielles, cela pourrait casser les éléments <code><mark></code>. Par exemple : <code>Le chat a couru après <mark>ce</mark>s oiseaux</code>. Cela entraînera des problèmes d'accessibilité car les lecteurs d'écran ne sauront pas traiter (ou traiteront mal) les mots ainsi découpés.</p> +</div> + +<h2 id="Les_éléments_associés_à_la_sémantique">Les éléments associés à la sémantique</h2> + +<p>Si vous souhaitez afficher un texte avec une mise en forme particulière, pensez d'abord au sens que vous souhaitez communiquer. Si le sens peut être transmis par {{htmlelement('em')}}, {{htmlelement('strong')}} ou {{htmlelement("mark")}}, utilisez ces éléments (plutôt que CSS seul, ce qui serait une mauvaise pratique).</p> + +<p>Il existe d'autres cas pour lesquels on affiche habituellement le texte en italique ou en gras et qui correspondent à une sémantique particulière qui peut être transmise grâce à des éléments HTML :</p> + +<ul> + <li>{{htmlelement("cite")}} pour <a href="/fr/Apprendre/HTML/Comment/Ajouter_citations_sur_page_web">les titres d'œuvres citées</a></li> + <li>{{htmlelement("dfn")}} pour <a href="/fr/Apprendre/HTML/Comment/Définir_des_termes_avec_HTML">la première occurence d'un terme</a></li> + <li>{{htmlelement("q")}} pour <a href="/fr/Apprendre/HTML/Comment/Ajouter_citations_sur_page_web">les citations dans le texte du document</a></li> + <li>{{htmlelement("var")}} pour <a href="/fr/Apprendre/HTML/Comment/Afficher_du_code_informatique_avec_HTML">les variables mathématiques</a></li> +</ul> + +<p>HTML ne permet pas de couvrir tous les cas de figures (sinon utiliser HTML correctement serait un calvaire de perfectionnisme). En règle générale, si vous souhaitez afficher du texte de façon différente et qu'il existe un élément HTML pour transmettre ce sens : utilisez-le, sinon vous pouvez utiliser l'élément neutre {{htmlelement("span")}} en spécifiant sa sémantique avec l'attribut {{htmlattrxref("class")}} et en le mettant en forme grâce à CSS.</p> + +<p>Les éléments que nous avons évoqués jusqu'à présent (à l'exception de <code><span></code>) ont tous une sémantique claire. En revanche, cela peut être plus ambigu avec les éléments {{htmlelement("b")}}, {{htmlelement("i")}} et {{htmlelement("u")}}. Ces éléments HTML permettent d'écrire du texte en gras, italique ou de le souligner. Ils sont apparus lorsque CSS n'existait pas ou avant qu'il ne soit supporté largement. Avec HTML5, ces éléments ont vu leur sémantique précisée.</p> + +<p>Voici la règle à respecter : s'il n'existe pas d'élément approprié permettant de retranscrire précisément le sens d'un texte qui serait généralement affiché en gras, italique ou souligné, alors on pourra utiliser <code><b></code>, <code><i></code> ou <code><u></code> à la place de <code><span></code>. Attention toutefois à ne pas oublier l'accessibilité : la mise en italique n'est pas particulièrement utile pour les personnes utilisant des lecteurs d'écran ou pour les personnes qui utilisent un alphabet non latin.</p> + +<ul> + <li>{{HTMLElement('i')}} permet généralement de retranscrire du texte placé en italique : des termes d'une langue étrangère, des dénominations taxonomiques, des termes techniques, des pensées, etc.</li> + <li>{{HTMLElement('b')}} permet de retranscrire du texte généralement affiché en gras : des mots-clés, des noms de produits, etc.</li> + <li>{{HTMLElement('u')}} permet de retranscrire des noms propres, des fautes d'orthographe</li> +</ul> + +<div class="note"> +<p>Léger avertissement à propos du soulignement : <strong>les visiteurs associent fortement le soulignement avec des hyperliens.</strong> De fait, on ne soulignera généralement que les liens d'une page. <code><u></code> ne doit être utilisé que lorsque la sémantique qu'il porte est sans équivoque. Dans ces cas, CSS pourra être utilisé pour définir un motif de soulignement différent, plus approprié. L'exemple qui suit illustre comment obtenir ce résultat.</p> +</div> + +<pre class="brush: html"><!-- Des noms scientifiques --> +<p> + Le colibri à gorge rubis (<i>Archilocus colubris</i>) + est l'espèce de colibri la plus répandue en Amérique + du Nord orientale. +</p> + +<!-- Des termes étrangers --> +<p> + Le menu comportait de nombreux termes exotiques comme + <i lang="uk-latn">vatrushka</i>, <i lang="id">nasi goreng</i> + et <i lang="en">pancakes</i>. +</p> + +<!-- Une faute d'orthographe --> +<p> + Un jour, j'écrirai <u class="erreur-orthographe">mieu</u>. +</p> + +<!-- Des mots-clés mis en avant dans un mode d'emploi --> +<ol> + <li> + <b>Tranchez</b> le pain en deux tranches. + </li> + <li> + <b>Insérez</b> une tranche de tomate et + une feuille de salade entre les tranches. + </li> +</ol> +</pre> + +<div id="instructions-with-b"> +<pre class="brush: css">/* Voici des mises en forme alternatives +permettant au lecteur de repérer la différence */ + +b { + font-weight: normal; + font-variant: small-caps; +} + +.erreur-orthographe { + text-decoration: underline red wavy; +} +</pre> +</div> + +<p>{{EmbedLiveSample('Les_éléments_associés_à_la_sémantique', '100%',192) }}</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("em")}}</li> + <li>{{htmlelement("strong")}}</li> + <li>{{htmlelement("mark")}}</li> + <li>{{htmlelement("b")}}</li> + <li>{{htmlelement("i")}}</li> + <li>{{htmlelement("u")}}</li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc/index.html b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc/index.html new file mode 100644 index 0000000000..788bcc2a44 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/html_text_fundamentals_e22cde852fd55bbd8b014a4eac49a3bc/index.html @@ -0,0 +1,95 @@ +--- +title: Mettre en place une hiérarchie de titres +slug: Apprendre/HTML/Comment/Mettre_en_place_une_hiérarchie_de_titres +tags: + - Beginner + - HTML + - Learn +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +translation_of_original: Learn/HTML/Howto/Set_up_a_proper_title_hierarchy +--- +<p class="summary">Dans cet article, nous verrons comment ajouter des titres de différents niveaux à un document web afin que les lecteurs puissent identifier le contenu et trouver les réponses à leurs questions plus efficacement.</p> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment utiliser des titres et les hiérarchiser dans un document web.</td> + </tr> + </tbody> +</table> + +<h2 id="Pourquoi_utiliser_des_titres">Pourquoi utiliser des titres ?</h2> + +<p>Les titres forment le squelette d'un texte sans fournir de longues explications. Prenons un exemple simple : même si ces deux textes sont en anglais, lequel semble le plus clair ?</p> + +<p><img alt="[Picture comparing a document with headings to a document without headings]" src="https://mdn.mozillademos.org/files/10717/Screenshot%20from%202015-05-05%2013:47:50.png" style="width: 100%;"></p> + +<p>Voilà une bonne partie de la réponse à la question posée avant.</p> + +<p>Comme vous pouvez le voir, un lecteur utilisera les titres et leurs niveaux pour déterminer quel contenu est présent et s'il est utile de poursuivre la lecture pour trouver le contenu recherché. Nous passons généralement <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">très peu de temps sur une page web</a> et consulter les titres fait partie du processus que nous déroulons pour déterminer s'il faut rester sur la page ou la quitter. Pour cette raison, il est préférable d'avoir une organisation claire pour les titres afin que le lecteur se repère facilement et continue à consulter la page.</p> + +<p>Vous faut-il plus d'arguments ? Savez-vous que certaines personnes ne lisent pas les pages web mais les écoutent grâce à des logiciels appelés {{interwiki('wikipedia',"Lecteur_d'écran","lecteurs d'écrans")}}. Ces logiciels permettent d'accéder rapidement à un contenu textuel donné. Parmi les techniques utilisées par ces logiciels, de nombreuses se basent sur les titres. Si les titres ne sont pas définis, pensez-vous que ces visiteurs prendront la peine d'écouter l'intégralité du document ?</p> + +<p>Enfin, le plan d'un document, composé des titres, est souvent utilisé par les moteurs de recherche pour déterminer la pertinence d'un article sur un sujet de recherche donné. Chaque niveau de titre (de 1 à 6) aura un « poids » différent : un titre de niveau 1 sera jugé plus pertinent qu'un titre de niveau 2 et ainsi de suite.</p> + +<h2 id="Les_titres_HTML">Les titres HTML</h2> + +<p>HTML fournit des éléments qui permettent de créer des titres dans des documents HTML : ce sont les éléments {{htmlelement('h1')}}, {{htmlelement('h2')}} et jusqu'à {{htmlelement('h6')}}.</p> + +<h3 id="Ajouter_le_titre_principal">Ajouter le titre principal</h3> + +<p>Au début du document, vous pouvez écrire le titre de plus au niveau entre des balises {{htmlelement('h1')}} :</p> + +<pre class="brush: html"><h1>Améliorez vos compétences sur le Web !</h1></pre> + +<p>Si vous considérez le document comme un arbre, le tronc sera le titre <code><h1></code>. Cela implique qu'un document ne doit avoir qu'un seul titre de niveau 1. Continuons les explications car ce sujet revient souvent dans les discussions. D'un point de vue technique, rien ne vous empêche d'utiliser plusieurs titres de niveau 1 dans vos documents. Cependant, d'un point de vue sémantique, cela serait bizarre car un titre de niveau 1 introduit un sujet totalement différent. Si vous jugez nécessaire d'avoir plusieurs titres de niveau 1 dans votre document, cela signifie peut être que le document doit être découpé en plusieurs documents dont chacun aurait un titre de niveau 1 distinct.</p> + +<p>Un autre argument en faveur d'un unique titre de niveau 1 serait l'impact sur le référencement. <a href="http://www.searchenginejournal.com/in-2014-how-important-is-an-h1-tag-for-seo/">Ce point est plus discutable</a> car les algorithmes des moteurs de recherche sont des secrets bien gardés, cela dit, certaines observations tendent à montrer que les niveaux de titres ont un impact sur le classement d'un site et que plus un niveau de titre est utilisé, plus l'impact sur le classement s'affaiblit.</p> + +<div class="note"> +<p><strong>Attention :</strong> On voit souvent les titres de niveau 1 utilisés pour mettre en avant le logo d'un site web ou sa marque. Comme ces informations ne sont pas les informations les plus structurantes ni les plus importantes, il est préférable d'éviter ce genre de détournement.</p> +</div> + +<h3 id="Ajouter_des_sous-titres">Ajouter des sous-titres</h3> + +<p>Sauf si votre document est très court, vous devrez le découper en sections. Chaque section commence avec un titre {{htmlelement("h2")}} :</p> + +<pre class="brush: html">... +<h2>Organisez la structure de votre document avec HTML</h2> +... +<h2>Ajustez le style de votre document avec CSS</h2> +...</pre> + +<p>Si besoins, vous pouvez découper vos sections en sous-sections et ainsi de suite en utilisant des éléments {{htmlelement("h3")}} jusqu'à {{htmlelement("h6")}}. Cela dit, si vous arrivez à un niveau de découpage avec {{htmlelement("h4")}} voire inférieur, cela peut signifier que votre document est trop long et qu'il serait préférable de le découper pour en faciliter la lecture.</p> + +<p>Lorsque vous créer des sections et sous-sections, il y a quelques points à prendre en compte afin d'améliorer l'expérience du lecteur :</p> + +<dl> + <dt>Gardez une hiérarchie cohérente</dt> + <dd>Autrement dit, cela signifie que vous devriez éviter de sauter des niveaux de titres (par exemple passer directement d'un niveau <code><h1></code> ou <code><h2></code> à un niveau <code><h4></code>). Vos lecteurs,<a href="https://www.youtube.com/watch?v=AmUPhEVWu_E"> notamment ceux qui utilisent des lecteurs d'écran</a>, pourraient penser que quelque chose manque à votre page.</dd> + <dt>Utilisez les niveaux de titre pour leur sémantique et non pour leur mise en forme</dt> + <dd>Le rôle de HTML est de fournir des informations sémantiques (sur le sens). La mise en forme par défaut d'un élément HTML donné n'a pas de rôle particulier et peut être modifiée avec {{Glossary("CSS")}}. Lorsqu'on s'occupe des titres, on peut utiliser <a href="/fr/docs/Web/CSS/font-size">la propriété CSS <code>font-size</code></a> afin de modifier la taille de la police utilisée.</dd> + <dt>N'utilisez pas les niveaux de titres pour représenter des sous-titres ou des slogans</dt> + <dd>Une des notions qui manque à HTML est le fait de ne pas avoir d'éléments particulier pour représenter un sous-titre ou un slogan. Certains développeurs utilisent les éléments de titre à cet effet mais cela entraîne des cassures dans la hiérarchie des titres et pose des problèmes d'accessibilité. Bien qu'il y ait quelques tentatives pour résoudre ce problème avec l'élément {{HTMLElement('hgroup')}}, il est préférable d'utiliser un élément {{htmlelement("p")}} ou {{htmlelement("span")}} avec un attribut {{htmlattrxref('class')}} donné.</dd> +</dl> + +<h2 id="Gérer_des_niveaux_de_titre_dynamiques">Gérer des niveaux de titre dynamiques</h2> + +<p>L'élément {{htmlelement("section")}} est apparu avec HTML5 pour marquer les différentes sections d'un document HTML, chacune de ces sections étant <em>a priori</em> suivie d'un titre approprié.</p> + +<p>Supposons que votre plan évolue (ce qui peut arriver si le HTML est généré de façon dynamique par le serveur) et que vous décidiez que certains <code><h3></code> devraient en fait être des <code><h2></code>. De même, si vous compilez plusieurs pages web en un e-book, cela peut être ennuyant que d'avoir à revoir tous les différents titres.</p> + +<p>Si vos <code><section></code> sont imbriquées de façon logique, HTML5 indique que chaque section peut commencer avec <code><h1></code> et que ceux-ci continueront à former un plan valide. L'idée est plutôt bonne mais souffre de quelques inconvénients : le code est moins lisible et il n'est plus possible d'appliquer une mise en forme différente pour les <code><h1></code> si ceux-ci n'ont pas la même importance.</p> + +<p>Pour plus de détails, lire l'article <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">Sectionnement et plan d'un document HTML5</a>.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">Les éléments de titre</a></li> +</ul> diff --git a/files/fr/conflicting/learn/html/introduction_to_html/index.html b/files/fr/conflicting/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..7e449e92e0 --- /dev/null +++ b/files/fr/conflicting/learn/html/introduction_to_html/index.html @@ -0,0 +1,258 @@ +--- +title: Les balises HTML et leur rôle +slug: Apprendre/HTML/Balises_HTML +tags: + - Beginner + - CodingScripting + - HTML +translation_of: Learn/HTML/Introduction_to_HTML +translation_of_original: Learn/HTML/HTML_tags +--- +<div class="summary"> +<p>Cet article aborde les bases de {{Glossary("HTML")}} : les balises et comment les utiliser.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable connaître <a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">la différence entre une page web et un site web</a> et <a href="/fr/Apprendre/HTML/Comment/Créer_un_document_HTML_simple">savoir comment créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre ce que sont les balises HTML et comment les utiliser correctement dans un document HTML.</td> + </tr> + </tbody> +</table> + +<p>{{Glossary("HTML")}} (<em>HyperText Markup Language</em>) est un langage descriptif utilisé pour structurer le contenu d'une page (ses textes, ses images, ses liens, etc.).</p> + +<p>Un document HTML est un fichier texte qui contient des {{glossary("balise","balises")}} (ou <em>tag</em> en anglais). Ces balises doivent être utilisées d'une certaine façon pour décrire correctement la structure du document. Les balises indiquent au navigateur comment afficher le document, certaines balises permettent d'intégrer différents médias comme des images, des vidéos ou des musiques parmi le texte de la page.</p> + +<p>Le navigateur n'affiche pas les balises telles quelles. Lorsqu'un utilisateur visite une page web, son navigateur <em>analyse</em> (ou <em>parse</em> en anglais) le document et l'<em>interprète</em> afin d'afficher la page web correctement. Par exemple, si le document contient une balise {{HTMLElement("img")}}, le navigateur chargera l'image associée et affichera l'image <em>à la place</em> de la balise HTML.</p> + +<h3 id="La_syntaxe_des_balises">La syntaxe des balises</h3> + +<p>Les balises HTML respectent une syntaxe simple et stricte :</p> + +<ul> + <li><strong>Un chevron ouvrant (<)</strong></li> + <li><strong>Le nom de la balise</strong></li> + <li><strong>Des attributs </strong>(optionnels). Un espace, suivi du nom de l'attribut, d'un signe égal (=) et d'une valeur entre doubles quotes ("").</li> + <li><strong>Un chevron fermant (>)</strong></li> +</ul> + +<p>Voici quelques exemples :</p> + +<ul> + <li><code><article></code></li> + <li><code><meta charset="utf-8"></code></li> + <li><code><img src="monImage.png" alt=""></code></li> +</ul> + +<h3 id="Les_éléments_HTML">Les éléments HTML</h3> + +<p>Généralement, les balises fonctionnent par paires. La première balise est la balise ouvrante et la seconde est la balise fermante. Une balise fermante <em>doit</em> avoir le même nom que la balise ouvrante correspondante. De plus, une balise fermante doit contenir une barre oblique entre le chevron initial et le nom de la balise. Ainsi, si <code><p></code> est une balise ouvrante, <code></p></code> sera la balise fermante correspondante.</p> + +<p>Un <strong>élément HTML</strong> se compose d'une balise ouvrante, d'un contenu textuel et d'une balise fermante :</p> + +<p><img alt="The basic syntax of HTML tags" src="https://mdn.mozillademos.org/files/8573/anatomy-of-an-html-element.png" style="height: 181px; width: 609px;"></p> + +<p>La rigidité des conventions pour la fermeture des balises est utile afin de pouvoir imbriquer différents éléments les uns dans les autres :</p> + +<pre class="brush: html"><p> + Voici le début du paragraphe + <strong> + ici un texte important au sein du paragraphe + </strong> + et là, la fin du paragraphe. +</p> +</pre> + +<div class="note"> +<p><strong>Bonne pratique :</strong> Si vous omettez les balises fermantes, le navigateur aura les coudées franches pour déterminer comment clôturer un élément. Ces règles sont bien définies mais souvent contre-intuitives (donc difficiles à deviner). Afin de vous épargner des pertes de temps à venir, préférez fermer les éléments.</p> +</div> + +<h3 id="Les_balises_HTML">Les balises HTML</h3> + +<p>HTML contient environ <a href="/fr/docs/Web/HTML/Element">140 balises</a> qui fournissent au navigateur des indications sur le sens d'un élément, son interprétation ou son affichage. Entre autres choses, les balises permettent de fournir des méta-données pour le document HTML, de mettre en avant certaines phrases, d'ajouter des fichiers multimédias ou de gérer des formulaires en ligne.</p> + +<p>Voici quelques-unes des balises les plus fréquemment utilisées :</p> + +<dl> + <dt>{{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}</dt> + <dd>Ces balises permetttent de définir des titres de différents niveaux : <code>h1</code> pour les grands titres et <code>h6</code> pour les titres des sections très spécifiques.</dd> + <dt>{{HTMLElement("p")}}</dt> + <dd>La balise utilisée pour créer des paragraphes. Ces paragraphes sont généralement (automatiquement) séparés par des sauts de ligne.</dd> + <dt>{{HTMLElement("a")}}</dt> + <dd>Cette balise est utilisée afin de créer des liens vers des ressources externes : une autre page web, un e-mail, une image, une autre section du document, etc. Les balises {{HTMLElement("a")}} contiennent le texte qui sera utilisé pour le lien, l'attribut {{htmlattrxref("href","a")}} de cet élément est utilisé pour définir l'{{glossary("URL")}} cible : <code><a href="url_cible">du texte qui sera lu par l'utilisateur</a></code>.</dd> + <dt>{{HTMLElement("img")}}</dt> + <dd>Cette balise permet d'intégrer une image dans un document HTML. Voici un exemple d'utilisation : <code><img src="url/vers/mon/image.png" alt="Une description"></code></dd> +</dl> + +<dl> + <dt>{{HTMLElement("div")}} et {{HTMLElement("span")}}</dt> + <dd>Ces balises n'ont pas de signification particulière, elles permettent simplement de séparer des sections d'un document. La plupart du temps, ces balises sont utilisées pour la mise en forme et le script (dont nous discuterons plus tard).</dd> + <dt>{{HTMLElement("ul")}}, {{HTMLElement("ol")}} et {{HTMLElement("li")}}</dt> + <dd>Ces balises sont utilisées pour créer des listes. <code><ul></code> permet de définir une liste non-ordonnée et <code><ol></code> de définir une liste ordonnée. Pour chacune de ces listes, ce sera la balise <code><li></code> qui permettra de définir un élément de la liste. Voici un exemple avec <code><ul></code> :</dd> +</dl> + +<pre class="brush: html"> <ul> + <li>Café</li> + <li>Thé</li> + <li>Lait</li> +</ul></pre> + +<p>N'hésitez pas à expérimenter avec ces balises. Dans les articles suivants, nous verrons comment intégrer des fichiers multimédias, des formulaires, des tableaux, etc. Dans tous les cas, vous pouvez faire vos propres tests avec <a href="/fr/docs/Web/HTML/Element">n'importe quelle balise HTML</a>. Assurez-vous de bien choisir la bonne balise pour ce que vous souhaitez faire : la sémantique des éléments HTML est très importante, notamment pour les moteurs de recherches qui analysent et classent votre site.</p> + +<h2 id="Pédagogie_active">Pédagogie active</h2> + +<p><em>Cet article ne contient pas encore de matériau interactif. <a href="/fr/docs/MDN/Débuter_sur_MDN">N'hésitez pas à contribuer</a>.</em></p> + +<h2 id="Aller_plus_loin">Aller plus loin</h2> + +<p>Pour l'instant, nous avons vu quelques règles simples concernant les éléments et les balises HTML. Mais c'est bien connu, chaque règle a ses exceptions.</p> + +<h3 id="Les_balises_«_auto-fermantes_»_(ou_balises_vides)">Les balises « auto-fermantes » (ou balises vides)</h3> + +<p>Nous avons vu précédemment qu'un élément HTML était composé de texte entre deux balises. Cependant, certaines balises ne contiennent pas de texte. L'exemple le plus simple est {{HTMLElement("img")}}. Le navigateur remplace la balise <code><img></code> avec l'image indiquée, ignorant le texte de l'élément. Pour cette raison, <code><img></code> n'a pas de balise fermante.</p> + +<pre class="brush: html">Here some text before an image element + <img src="myImage.png" alt=""> +Here some text after an image element +</pre> + +<div class="note"> +<p><strong>Note :</strong> Attention à ne pas mélanger les éléments et les balises. Parfois, une balise seule permet de définir un élément mais la plupart du temps, les balises fonctionnent par paires.</p> +</div> + +<h3 id="Les_éléments_spéciaux">Les éléments spéciaux</h3> + +<p>En HTML, il existe deux éléments spéciaux qui n'ont pas de balise. Ces éléments sont essentiels pour tout document HTML.</p> + +<h4 id="Le_doctype">Le <em>doctype</em></h4> + +<p>Le <em>doctype</em> (pour « type de document ») est une déclaration formelle, placée au tout début d'un document HTML. Elle indique que le document est écrit avec du HTML standard. Le doctype se présente de cette façon :</p> + +<pre class="brush: html"><!DOCTYPE html></pre> + +<p>Si vous ne commencez pas votre document par <code><!DOCTYPE html></code>, les navigateurs afficheront votre document en <a href="https://developer.mozilla.org/fr/docs/Mode_quirks_de_Mozilla"><em>mode quirks</em></a>. Le mode <em>quirks</em> est le mode utilisé par le navigateur pour afficher les documents anciens ou malformés, écrits dans les années 1990 lorsque HTML était peu (voire pas du tout) standardisé et que chaque navigateur gérait HTML à sa façon.</p> + +<h4 id="Les_commentaires">Les commentaires</h4> + +<p>Les commentaires sont des éléments très particuliers. Ce sont des notes que vous pouvez utiliser pour annoter votre code HTML . Le navigateur n'affichera pas ces commentaires dans la page web (cependant, le code source peut être lu par n'importe qui et les commentaires seront donc publics comme le reste de la page).</p> + +<p>En HTML, les commentaires sont écrits avec du texte contenu entre <code><!--</code> et <code>--></code></p> + +<pre class="brush: html"><!-- Ceci est un commentaire. Il ne sera pas affiché dans le navigateur.--> + +Ce texte s'affichera dans le navigateur. +</pre> + +<h3 id="Structure_d'un_document_HTML">Structure d'un document HTML</h3> + +<p>La structure de base d'un document HTML est définie avec un ensemble de balises spéciales. Les éléments définis dans ces balises ne doivent pas apparaître plus d'une fois dans le document (excepté pour l'élément {{HTMLElement("title")}} ). Le navigateur gèrera les cas où ces éléments ne sont pas fournis (ce qui n'est pas conseillé).</p> + +<dl> + <dt>{{HTMLElement("html")}}</dt> + <dd>Cet élément définit la <em>racine</em> du document. Chaque document HTML ne contient qu'une <em>racine</em>. Tous les autres éléments doivent être placés dans cet élément.</dd> + <dt>{{HTMLElement("head")}}</dt> + <dd>Cet élément définit la <em>tête</em> du document. Le navigateur n'affichera pas cet élément qui ne contient que des méta-données, dont le titre et des informations descriptives. Les navigateurs pourront utiliser ces méta-données pour améliorer l'ergonomie de la page (nous le verrons par la suite).</dd> + <dt>{{HTMLElement("body")}}</dt> + <dd>Cet élément définit le <em>corps</em> du document. Il n'y a qu'un seul élément <code>body</code> dans un document HTML et celui-ci est toujours placé après la tête. L'utilisateur verra tout ce qui est placé dans cet élément.</dd> + <dt>{{HTMLElement("title")}}</dt> + <dd>Cet élément définit le <em>titre</em> d'un document. Le <em>titre</em> est le seul élément HTML obligatoire et il est placé dans la tête. En effet, le titre est une des méta-données utilisée par le navigateur (il est utilisé pour le titre de la fenêtre, le titre de l'onglet et aussi dans les résultats d'un moteur de recherche).</dd> +</dl> + +<h4 id="Formel_ou_valide">Formel ou valide ?</h4> + +<p>Voici le document HTML formel le plus simple qu'on puisse écrire :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <title>Un document HTML formel</title> + </head> + <body> + <!-- Du contenu pour l'utilisateur ici --> + </body> +</html> +</pre> + +<p>Si on retire les différentes balises optionnelles, on obtient alors le document HTML <em>valide</em> le plus simple qui puisse être écrit :</p> + +<pre class="brush: html"><!DOCTYPE html> +<title>Et voilà un tout petit document HTML</title> +</pre> + +<div class="note"> +<p><strong>Bonne pratique :</strong> Nous vous recommandons d'utiliser la structure formelle. Si vous ne séparez pas clairement le contenu de <code><head></code> du contenu de <code><body></code>, il sera plus facile de commettre des erreurs qui entraîneront un comportement étrange du navigateur.</p> +</div> + +<h3 id="Les_éléments_qui_se_chevauchent">Les éléments qui se chevauchent</h3> + +<p>Pour finir notre aperçu sur les éléments HTML, précisons que les éléments peuvent être <em>imbriqués</em> mais ne peuvent pas se <em>chevaucher.</em></p> + +<p>Comment faire se chevaucher des éléments ? Voici un exemple :</p> + +<pre class="brush: html"><p> + le début de mon paragraphe + <strong> + du texte important +</p> +<p> + un deuxième paragraphe + </strong> + et l'élément strong a été bouclé + juste avant +</p> +</pre> + +<p>Dans l'exemple ci-dessus, l'élément <code>strong</code> chevauche ceux des paragraphes. Ceci est une erreur (qui n'est pas autorisée par HTML). Il faut plutôt écrire :</p> + +<pre class="brush: html"><p> + mon paragraphe commence ici + <strong> + du texte important + </strong> +</p> +<p> + <strong> + un deuxième paragraphe + </strong> + dont le début était important aussi +</p> +</pre> + +<p>Dans des cas simples comme celui-ci, le navigateur pourra deviner ce qui était voulu mais généralement de telles erreurs pourront avoir des répercussions importantes (par exemple avec {{Glossary("CSS")}} ou {{Glossary("JavaScript")}} que nous verrons bientôt). Par exemple, si nous avions utilisé une balise {{HTMLElement("div")}} à la place des balises {{HTMLElement("p")}} et {{HTMLElement("strong")}} :</p> + +<pre class="brush: html"><div> + le début de mon paragraphe + <div> + du texte important + </div> + <div> + un deuxième paragraphe + </div> + la fin du paragraphe +</div> +</pre> + +<p>Comment savoir si les éléments se chevauchent ou non ? C'est impossible car il n'y a plus de chevauchement mais une imbrication d'éléments <code>div</code> ! Attention donc si vous souhaitez maîtriser le comportement de vos futurs documents HTML.</p> + +<h3 id="Vérifier_le_code_HTML">Vérifier le code HTML</h3> + +<p>Une bonne pratique consiste à valider son code pour s'assurer qu'il est correct. Le meilleur outil pour cela est <a href="http://validator.w3.org/" rel="external">le validateur HTML du W3C</a>. C'est un outil en ligne qui analyse votre document HTML et vous indique si celui-ci respecte les spécifications HTML. Si le document est invalide, le validateur fournira des indications quant aux erreurs qu'il a trouvées.</p> + +<div class="note"> +<p><strong>Note :</strong> Étant donné la méthode utilisée par le validateur, il est préférable de se concentrer sur la première erreur relevée dans l'analyse. En effet, une seule erreur peut en déclencher d'autres en cascades. Si le résultat de l'analyse comporte une myriade d'erreurs, commencez par résoudre la première, cela permettra éventuellement de résoudre des erreurs suivantes.</p> +</div> + +<h2 id="Prochaines_étapes">Prochaines étapes</h2> + +<p>Grâce aux notions abordées dans cet article, vous devriez être en mesure d'écrire votre premier document HTML complet et d'obtenir une première version d'un site web fonctionnel.</p> + +<ul> + <li>Pour que cette page soit (plus) belle, vous pouvez lire <a href="/en-US/docs/Learn/CSS/CSS_properties">l'article sur les propriétés CSS et comment les utiliser</a>.</li> + <li>Pour savoir comment publier votre page web, vous pouvez lire <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">comment transférer ses fichiers vers un serveur web</a>.</li> +</ul> diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..36c8d1cfbb --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,125 @@ +--- +title: Ajouter des images à une page web +slug: Apprendre/HTML/Comment/Ajouter_des_images_à_une_page_web +tags: + - Beginner + - Composing + - HTML + - NeedsActiveLearning + - OpenPractices +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage +translation_of_original: Learn/HTML/Howto/Add_images_to_a_webpage +--- +<p class="summary">Les images permettent de faire passer des messages plus simplement et plus directement. Elles attirent l'œil du visiteur lorsqu'il consulte le site. Dans cet articles, nous allons voir comment ajouter, simplement, des images à une page web.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre les méthodes simples qui permettent d'ajouter une image dans un document HTML.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Cet article illustre uniquement comment insérer une image statique. Attention à la taille des images que vous utilisez, elles doivent rester légères pour être efficacement affichées sur les appareils des personnes dont la connexion est lente ou dont les écrans sont petits. Si vous souhaitez adapter votre contenu en fonction de la taille de l'écran et notamment pour les grands écrans,<a href="/en-US/Learn/HTML/Howto/Add_responsive_image_to_a_webpage"> l'article sur les images adaptatives (responsive)</a> pourra vous intéresser.</p> +</div> + +<h2 id="Ce_dont_vous_avez_besoin">Ce dont vous avez besoin</h2> + +<p>Vous allez écrire un élément {{htmlelement("img")}}, mais pour remplir ses attributs correctement, il faut les informations correspondantes :</p> + +<ul> + <li>L'{{glossary("URL")}} (absolue ou relative) de l'image</li> + <li>Un équivalent textuel pour toute fonctionnalité ou information utile contenue dans l'image</li> + <li>La hauteur et la largeur qu'on souhaite donner à l'image dans la page (ce n'est pas <em>obligatoire</em> mais cela permet d'accélerer le rendu)</li> +</ul> + +<p>Une fois ces informations récoltées, vous pouvez écrire un élément <code><img></code> dans le code de votre page. <code><img></code> est un {{glossary("élément vide")}} et il n'y a donc pas de balise fermante <code></img></code>, il suffit uniquement de placer une barre oblique (<em>slash</em>) avant le chevron fermant de la balise : <code><img ... /></code>. Si votre image fournit une information ou une fonctionnalité, votre code devrait ressembler à :</p> + +<pre class="brush: html"><img + src="images/graphique-camembert.png" + alt="[ABC Tech posssède 75% de part de marché et XYZ 25%]" + height="300px" + width="300px" +/> +</pre> + +<p>Si l'image est strictement décorative ou que le contenu associé est déjà fourni par le texte de la page, l'attribut <code>alt</code> peut être laissé blanc :</p> + +<pre class="brush: html"><img src="images/licorne.png" alt="" /> +</pre> + +<div class="warning"> +<p><strong>Attention !</strong> La plupart des images sont couvertes par le droit d'auteur. <strong>Vous ne devez pas</strong> afficher une image sur votre page web sauf si</p> + +<ol> + <li>Vous possédez l'image, ou</li> + <li>Si vous avez reçu la permission écrite, explicite du propriétaire de l'image, ou</li> + <li>Si vous disposez de preuves comme quoi l'image appartient au domaine public</li> +</ol> + +<p>De plus, il ne faut <strong>jamais</strong> faire point l'attribut <code>src</code> vers une image hébergée sur le site de quelqu'un d'autre. Cela s'appelle du <em>"hotlinking"</em> : cela gaspille des ressources vers le site d'origine, ralentit votre page et vous empêche d'être sûr du contenu de votre page (l'image peut être remplacée à tout moment). En bref, c'est totalement immoral.</p> +</div> + +<p class="note">Il est possible de transformer une image en lien en imbriquant un élément {{htmlelement("img")}} dans un élément {{htmlelement("a")}}. Dans ce cas, il est préférable de s'assurer que l'image est plus grande qu'un carré de 45px sur 45 px (sinon les utilisateurs auront du mal à cliquer/appuyer dessus). Pour plus d'informations à ce sujet, <a href="/fr/Apprendre/HTML/Howto/Create_a_hyperlink">voir notre tutoriel sur comment ajouter des hyperliens.</a></p> + +<p>Dans la suite de cet article, nous allons nous intéresser plus en détails à ce qui doit être utilisé pour les attributs <code>height</code>/<code>width</code>, <code>src</code>, et <code>alt</code>.</p> + +<h2 id="height_et_width"><code>height</code> et <code>width</code></h2> + +<p><code>height</code> et <code>width</code> ne doivent pas être utilisés pour redimensionner les images dans le navigateurs. Si vous utilisez ces attributs, les valeurs doivent correspondre à la taille réelle, exprimée en pixels, de l'image (votre éditeur d'image favori pourra vous fournir cette information si besoin). Si vous devez redimensionner l'image, utilisez un logiciel d'édition adapté.</p> + +<p>Si vous fournissez de mauvaises valeurs pour la hauteur et la largeur, l'image semblera déformée. Si la hauteur et la largeur sont trop grandes, l'image aura l'air pixélisée. Si elles sont trop petites, vous gaspillerez de la bande passante et du temps de calcul en chargeant une image plus grande que nécessaire.</p> + +<h2 id="src"><code>src</code></h2> + +<p>Vous pourriez fournir une {{glossary("URL")}} complète, composée d'un chemin <em>absolu</em> et d'un nom de fichier (par exemple <code>https://exemple.com/images/licorne.png</code>) mais cela n'a pas grand intérêt car il y a de très grandes chances que votre image se situe sur le même {{glossary("nom de domaine","domaine")}} que votre page web (encore une fois, le <em>hotlinking</em> est inacceptable).</p> + +<p>Si vous ne fournissez qu'un nom de fichier, le navigateur consultera le même dossier que celui du document HTML affiché. Si l'image n'est pas à cet emplacement, le navigateur abandonnera le chargement de l'image.</p> + +<p>La plupart du temps, vous aurez à utiliser un chemin <em>relatif </em>suivi d'un nom de fichier. C'est-à-dire qu'on écrit le chemin du fichier relativement à partir de l'endroit où la page est située. Pour ce chemin, on pourra utiliser deux points pour remonter d'un niveau de dossier (<code>../</code>) ou utiliser un seul point (<code>./</code>) pour faire référence au répertoire courant.</p> + +<p>Si, par exemple, la page web courante est <code>https://exemple.com/animaux/mythique.html</code> et que l'image se situe à <code>https://exemple.com/images/licorne.png</code>, vous pourrez écrire ce chemin relatif : <code>src="../images/licorne.png</code><code>"</code>.</p> + +<div class="note"> +<p>À des fins de référencement ({{glossary("SEO")}}), il est préférable de donner un nom descriptif pour le fichier (<code>licorne.png</code> sera mieux que <code>img835.png</code>). Google recommande également que l'ensemble des images soient placées dans un répertoire <code>images</code>.</p> +</div> + +<h2 id="alt"><code>alt</code></h2> + +<p>Il existe différents scénarios selon lesquels les visiteurs de votre site ne pourront profiter des images :</p> + +<ul> + <li>le fichier image est invalide ou le navigateur ne supporte pas ce type d'image</li> + <li>le chemin ou le nom de fichier fourni pour l'image est incorrect</li> + <li>les visiteurs utilisent des logiciels qui lisent l'écran</li> + <li>les visiteurs ont désactivé le chargement des images afin de réduire le volume de données transférées (point notamment valable pour les téléphones)</li> +</ul> + +<p>Autrement dit : les images ne doivent pas être primordiales pour votre site et le contenu textuel de celui-ci doit suffire entièrement.</p> + +<p>Si vous insérez des images dans votre site, vous devez utiliser un attribut <code>alt</code>. Sinon, le navigateur utilisera un motif neutre et inutile quand l'image ne pourra être affichée. Que faut-il donc écrire dans l'attribut <code>alt</code> ? Cela dépend avant tout du <em>rôle</em> de l'image dans la page (en d'autres termes : que perd-t-on comme information si l'image ne s'affiche pas).</p> + +<ul> + <li><strong>Décoration.</strong> Si l'image n'est utilisée que pour décorer, un attribut <code>alt</code> vide suffira (<code>alt=""</code>). Pour être tout à fait précis, les images décoratives ne devraient pas faire partie du code HTML mais des fichiers {{glossary("CSS")}} qui peuvent être utilisés pour gérer tout ce qui a trait à la présentation visuelle. Pour plus d'informations sur comment ajouter des images avec CSS, voir les pages sur {{cssxref('content')}} ou {{cssxref("background-image")}}.</li> + <li><strong>Contenu.</strong> Si votre image fournit des informations conséquentes, fournissez les mêmes informations grâce à un texte <em>bref</em> pour l'attribut <code>alt</code>. Mieux encore, fournissez l'information sous forme de texte dans la page web (auquel cas, il n'est pas nécessaire de réécrire l'information dans le texte utilisé pour <code>alt</code>).</li> + <li><strong>Lien.</strong> Si vous placez une image dans une balise {{htmlelement("a")}}, vous devez fournir <a href="/fr/Apprendre/HTML/Howto/Create_a_hyperlink#Writing_accessible_link_text">un texte alternatif pour le lien</a>. À vous de choisir si vous utilisez l'élément <code><a></code> ou l'attribut <code>alt</code> de l'image pour le faire.</li> + <li><strong>Texte.</strong> Vous ne devriez pas utiliser d'images qui contiennent du texte ! (si vous voulez réaliser des effets de style sur un texte, CSS est là pour ça. Dans le cas où vous devez le faire malgré tout, le texte doit être fourni dans l'attribut <code>alt</code>.</li> +</ul> + +<p>Le point-clé est de s'assurer que toutes les informations nécessaires sont contenues dans le texte de la page. Il ne faut pas qu'un visiteur qui ne voit pas les images réalise que quelque chose lui manque. Lors de l'écriture de votre page, vous pouvez tester en désactivant les images. Vous verrez par exemple que les expressions comme « une image de » ou « un logo de » sont assez peu utiles pour les textes alternatifs.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>L'élément {{htmlelement("img")}}</li> + <li><a href="/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_adaptatives_%C3%A0_une_page_web">Comment ajouter une image adaptative (<em>responsive</em>) à une page web</a></li> + <li><a href="/fr/Apprendre/HTML/Howto/Add_vector_image_to_a_webpage">Comment ajouter une image vectorielle à une page web</a></li> + <li><a href="/fr/Apprendre/HTML/Comment/Ajouter_carte_zones_cliquables_sur_image">Comment ajouter une carte de zones cliquables sur une image</a></li> +</ul> diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html_2c0377f7605f693cad465c2b4839addc/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html_2c0377f7605f693cad465c2b4839addc/index.html new file mode 100644 index 0000000000..ad32d4ea26 --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/images_in_html_2c0377f7605f693cad465c2b4839addc/index.html @@ -0,0 +1,73 @@ +--- +title: Annoter des images et graphiques +slug: Apprendre/HTML/Comment/Annoter_des_images_et_graphiques +tags: + - Accessibility + - Beginner + - Guide + - HTML + - Learn +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions +translation_of_original: Learn/HTML/Howto/Annotate_images_and_graphics +--- +<div class="summary"> +<p>HTML fournit une méthode simple pour ajouter des figures et leurs légendes.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Apprendre comment ajouter des figures à une page web, accompagnées de leurs légendes.</td> + </tr> + </tbody> +</table> + +<h2 id="Qu'est-ce_qu'une_figure">Qu'est-ce qu'une figure ?</h2> + +<p>Une figure est une unité de contenu indépendante :</p> + +<ul> + <li>qui exprime un message de façon claire et concise</li> + <li>qui pourrait être placée à différents endroits dans la structure linéaire de la page</li> + <li>qui fournit des informations essentielles pour appuyer le sens du texte principal</li> +</ul> + +<p>Si vous pensez qu'une légende doit être ajoutée à un contenu, c'est qu'il s'agit probablement d'une figure. Voici quelques exemples : des images, des fragments de code, des éléments audio ou vidéo, des équations, des tableaux, des diagrammes.</p> + +<p>Pour symboliser des figures, HTML fournit l'élément {{htmlelement("figure")}} :</p> + +<pre class="brush: html"><figure> + <img alt="MDN" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"> +</figure> +</pre> + +<h2 id="Ajouter_une_légende">Ajouter une légende</h2> + +<p>Pour ajouter une légende, il suffit de la placer dans un élément {{htmlelement("figcaption")}}, lui-même placé au sein de l'élément <code><figure></code> à côté d'une des deux balises <code><figure></code> :</p> + +<pre class="brush: html"><figure> + <img alt="" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"> + <figcaption>Le logo de MDN en 2014</figcaption> +</figure> +</pre> + +<p>{{htmlelement("figcaption")}} indique au navigateur et aux technologies d'assistance (telles que les lecteurs d'écran) que la légende décrit le contenu de l'élément {{htmlelement("figure")}}.</p> + +<div class="note"> +<p>Du point de vue de l'accessibilité, les légendes et les textes de l'attribut {{htmlattrxref('alt','img')}} ont deux rôles différents. Les légendes peuvent être utilisées par l'ensemble des visiteurs, qu'ils voient l'image ou non alors que le texte {{htmlattrxref('alt','img')}} n'est utilisé que lorsque l'image est absente.</p> + +<p>Pour cette raison, une légende et le texte <code>alt</code> ne devraient pas être identiques car les deux textes apparaissent lorsque l'image n'apparaît pas. Vous pouvez tester ce point en désactivant les images dans votre navigateur.</p> +</div> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement("figure")}}</li> + <li>{{htmlelement("figcaption")}}</li> +</ul> diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html new file mode 100644 index 0000000000..fcbe0b40c9 --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -0,0 +1,154 @@ +--- +title: Ajouter du contenu Flash dans une page web +slug: Apprendre/HTML/Comment/Ajouter_contenu_Flash_dans_page_web +tags: + - Accessibility + - Advanced + - Flash + - Guide + - HTML +translation_of: >- + Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements +translation_of_original: Learn/HTML/Howto/Add_Flash_content_within_a_webpage +--- +<div class="summary"> +<p>Cet article illustre pourquoi il est nécessaire que le contenu d'une page web soit accessible sans plugin. Si vous avez besoin de tels plugins (pour un cas bien spécifique ou pour des raisons historiques), nous illustrerons également un cas expliquant comment intégrer du contenu de cette façon.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devez savoir <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">comment créer un document HTML basique</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Cet article aborde les méthodes pour insérer du contenu, dépendant d'extensions tierces, dans une page web.</td> + </tr> + </tbody> +</table> + +<div class="warning"> +<p><strong>Résumé :</strong> Des plugins comme Flash représentent une technologie passée, notamment sur les appareils mobiles où ils ne sont pas disponibles. Les navigateurs destinés aux ordinateurs de bureau<a href="http://arstechnica.com/information-technology/2015/04/chrome-starts-pushing-java-off-the-web-by-disabling-plugins/"> vont également abandonner leur support</a>.</p> +</div> + +<h2 id="Tourner_son_clavier_sept_fois_sur_son_bureau_avant_de_dépendre_de_plugins_tiers">Tourner son clavier sept fois sur son bureau avant de dépendre de plugins tiers</h2> + +<p>Un <a href="/fr/Add-ons/Plugins"><strong>plugin</strong></a> est un logiciel qui permet d'accéder à un contenu que le navigateur ne peut pas lire/décoder nativement. Il était une fois, les plugins étaient indispensables sur le Web. Il y a quelques années, installer Adobe Flash Player était un passage obligé pour regarder un film en ligne. À cette époque, on avait également de (trop) nombreuses alertes pour mettre à jour Flash Player ou Java Runtime Environment.</p> + +<p>Depuis, les technologies web ont grandi et aquis une certaine maturité et une certaine robustesse. Pour la plupart des application, il est donc temps d'arrêter de dépendre de ces plugins et de tirer parti des technologies web. Cela permettra :</p> + +<ul> + <li><strong>D'élargir votre audience à toutes les personnes qui ont un navigateur. </strong>Tout le monde a un navigateur, les plugins sont beaucoup plus rare, notamment pour les utilisateurs mobiles. Le Web était devenu largement utilisable sans plugins, les gens iront sans aucun doute sur un autre site web concurrent plutôt que d'installer un plugin supplémentaire.</li> + <li><strong>De vous épargner <a href="http://webaim.org/techniques/flash/">les maux de tête liés à l'accessibilité</a> et aux plugins comme Flash ou les autres.</strong></li> + <li><strong>De rester à l'abri de failles de sécurités répétées. </strong>Il est <a href="http://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">de notoriété publique qu'Adobe Flash est peu sécurisé</a> et ce malgré les nombreux correctifs apportés au cours du temps. En 2015, Alex Stamos, le responsable de la sécurité informatique de Facebook a même demandé à Adobe <a href="http://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">d'arrêter le développement de Flash.</a></li> +</ul> + +<p>Que faire ? Si vous avez besoin d'une certaine intéractivité sur votre page, {{glossary("JavaScript")}} vous permettra sans aucun doute d'accomplir ce dont vous avez besoin, sans avoir à utiliser d'applets Java ou de composants ActiveX/BHO. Plutôt que d'utiliser Adobe Flash, vous pouvez utiliser <a href="/fr/Apprendre/HTML/Howto/Add_audio_or_video_content_to_a_webpage">la vidéo HTML5</a> pour les cas où vous avez besoin de médias, <a href="/fr/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> pour les graphiques vectoriels et <a href="/fr/docs/Web/API/Canvas_API/Tutorial">Canvas</a> pour réaliser des images et animations complexes. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Plusieurs années auparavant, Peter Elst écrivait déjà</a> qu'Adobe Flash était rarement le meilleur outil pour développer sur le Web, notamment pour les jeux et les applications d'entreprises. En ce qui concerne ActiveX, même le navigateur de Microsoft, {{glossary("Microsoft Edge","Edge")}}, ne le supporte plus.</p> + +<h2 id="L'histoire_de_deux_balises">L'histoire de deux balises</h2> + +<p>Si vous devez dépendre de plugins pour un cas spécifique ou lié au cadre d'une entreprise donnée, HTML fournit deux élément pour intégrer du contenu provenant d'un plugin : {{htmlelement("embed")}} et {{htmlelement('object')}}. Il faut noter qu'<code><embed></code> est un élément vide, à la différence de <code><object></code>.</p> + +<p>Il faudra donc utiliser les attributs pour fournir certaines informations :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"> </th> + <th scope="col">{{htmlelement("embed")}}</th> + <th scope="col">{{htmlelement("object")}}</th> + </tr> + </thead> + <tbody> + <tr> + <td>L'{{glossary("URL")}} du contenu à intégrer</td> + <td>{{htmlattrxref('src','embed')}}</td> + <td>{{htmlattrxref('data','object')}}</td> + </tr> + <tr> + <td>Le type {{glossary("MIME")}} <em>précis</em> du contenu à intégrer</td> + <td>{{htmlattrxref('type','embed')}}</td> + <td>{{htmlattrxref('type','object')}}</td> + </tr> + <tr> + <td>La hauteur et la largeur, exprimées en pixels CSS, de la boîte contrôlée par le plugin</td> + <td>{{htmlattrxref('height','embed')}}<br> + {{htmlattrxref('width','embed')}}</td> + <td>{{htmlattrxref('height','object')}}<br> + {{htmlattrxref('width','object')}}</td> + </tr> + <tr> + <td>Les noms et valeurs à founir comme paramètres au plugin</td> + <td>Des attributs <em>ad hoc</em> avec les noms et les valeurs</td> + <td>Des éléments sur une seule balise {{htmlelement("param")}} contenus dans la balise <code><object></code></td> + </tr> + <tr> + <td>Du contenu HTML indépendant à utiliser en secours au cas où la ressource à intégrer n'est pas disponible</td> + <td>Non supporté (<code><noembed></code> est obsolète)</td> + <td>Contenus dans la balise <code><object></code>, après les éléments <code><param></code></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><code><object></code> a besoin d'un attribut <code>data</code> ou d'un attribut <code>type</code> ou des deux. SI vous utilisez les deux, il faudra peut être utiliser l'attribut {{htmlattrxref('typemustmatch','object')}} (uniquement implémenté dans Firefox à l'heure où cet article est écrit). <code>typemustmatch</code> permet au contenu intégré de ne pas être lancé tant que l'attribut <code>type</code> ne correspond pas au type du média. <code>typemustmatch</code> permet ainsi d'apporter beaucoup plus de sécurité lorsqu'on intègre du contenu provenant d'une autre {{glossary("origine")}} (cela peut empêcher des attaquants malveillants de lancer des scripts modifiés au travers du plugin).</p> +</div> + +<p>Les deux exemples utilisent chacun <code><embed></code> ou <code><object></code> pour insérer un film Flash, <code><object></code> permet également de gérer un contenu à utiliser en cas de secours :</p> + +<pre class="brush: html"><embed + src="explosion.swf" + type="application/vnd.adobe.flash-movie" + width="500" + height="300" + bgcolor="#ff7f00" + allowfullscreen="true" +/></pre> + +<pre class="brush: html"><object + data="explosion.swf" + type="application/vnd.adobe.flash-movie" + width="500" + height="300" + typemustmatch> + <param name="bgcolor" value="#ff7f00" /> + <param name="allowfullscreen" value="true" /> + + <p>Le film Flash n'a pu être trouvé.</p> +</object> +</pre> + +<p>Afin d'être tout à fait complet, voici deux exemples supplémentaires. Encore une fois, il est (de loin) préférable d'utiliser JavaScript que des applets Java car le navigateur exécutera directement le code JavaScript sans passer par un environnement tiers, lourd. Ceci étant dit, voilà comment utiliser l'élément <code><object></code> pour insérer une applet Java :</p> + +<pre class="brush: html"><object + data="mon_applet.jar" + type="application/x-java-applet"> + <param name="code" value="MaClasseJava"> + + <p>Java n'est pas disponible ou est désactive.</p> +</object> +</pre> + +<p>Un autre cas où on a besoin de faire appel à <code><object></code> : les fichiers PDF. Ces fichiers posent de nombreux <a href="http://webaim.org/techniques/acrobat/acrobat">problèmes d'accessibilité</a>, notamment pour les utilisateurs qui utilisent un petit écran. Il ne devrait pas être absolument nécessaire de lire un PDF pour consulter un site web (imaginez si tous les sites web étaient uniquement disponibles en largeur fixe). Toutefois, si vous avez besoin d'intégrer un contenu PDF, voici comment le faire dans votre page web :</p> + +<pre class="brush: html"><object + data="mon_fichier.pdf" + type="application/pdf" + width="100%" + height="100%" + typemustmatch> + <p>Vous n'avez pas de plugin pour lire des fichiers PDF mais vous pouvez + <a href="mon_fichier.pdf">télécharger le fichier PDF correspondant.</a></p> +</object> +</pre> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li><a href="http://webaim.org/techniques/flash/">L'accessibilité avec Flash</a></li> + <li>{{htmlelement('object')}}</li> + <li>{{htmlelement('embed')}}</li> + <li><a href="https://en.wikipedia.org/wiki/Comparison_of_HTML5_and_Flash">Comparaison entre HTML5 et Flash</a> sur Wikipédia (en anglais)</li> + <li><a href="http://www.flashsucks.org">flashsucks.org</a>, <a href="http://www.occupyflash.org">occupyflash.org</a> (en anglais) (pour expliciter, encore plus si besoin, les raisons pour lesquelles Flash est très déconseillé)</li> +</ul> diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies_fbe06d127f73df4dd2f56a31b7c2bd2d/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies_fbe06d127f73df4dd2f56a31b7c2bd2d/index.html new file mode 100644 index 0000000000..b5d0db7caa --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/other_embedding_technologies_fbe06d127f73df4dd2f56a31b7c2bd2d/index.html @@ -0,0 +1,150 @@ +--- +title: Intégrer une page web au sein d'une autre page web +slug: Apprendre/HTML/Comment/Intégrer_une_page_web_dans_une_autre_page_web +tags: + - Beginner + - Guide + - HTML + - Learn + - Security +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +translation_of_original: Learn/HTML/Howto/Embed_a_webpage_within_another_webpage +--- +<div class="summary"> +<p>Dans cet article, nous verrons comment intégrer une page web dans une autre, tout en minimisant les risques encourus par une telle manipulation.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez au préalable savoir comment <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">créer un document HTML simple</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Connaître les risques encourus lorsqu'on imbrique des pages web entre elles et savoir comment intégrer une page web au sein d'une autre page tout en minimisant ces risques.</td> + </tr> + </tbody> +</table> + +<h2 id="L'imbrication_des_pages_quelques_mots_d'histoire">L'imbrication des pages, quelques mots d'histoire</h2> + +<p>Imbriquer des pages entre elles peut sembler étrange voire contre-nature mais cela existe depuis les débuts du Web. Lorsque la bande passante était utilisée par des modems 56k (voire moindre), pour réduire le temps de téléchargement, les pages web étaient fragmentées en morceaux appelés <em>frames</em>, tous intégrées dans un <em>frameset</em>. Malheureusement, les <em>frames</em> ont apporté plus de problèmes que de solutions et le concept de <em>frame</em>/<em>frameset</em> a disparu depuis l'apparition d'{{glossary("AJAX")}}.</p> + +<p>Cela dit, il existe des cas où imbriquer des pages web est une solution valide. C'est notamment le cas lorsqu'on veut inclure du contenu généré par un utilisateur ou du contenu tiers (des publicités par exemple). Afin d'améliorer la sécurité lors de telles opérations, il est possible d'intégrer le contenu dans une <em>iframe</em> HTML5. Dans certains cas complexes, cela peut également permettre au navigateur d'être plus rapide car les arbres {{glossary("DOM")}} à traiter peuvent être plus légers.</p> + +<p>Malgré tout, l'imbrication de pages web a des conséquences significatives sur la sécurité, la performance et l'accessibilité. Avant de la mettre en œuvre, assurez-vous d'en comprendre les enjeux et les risques afin de servir au mieux vos visiteurs.</p> + +<h2 id="Une_imbrication_simple">Une imbrication simple</h2> + +<p>La plupart du temps, vous aurez besoin d'une {{htmlelement("iframe")}} pour imbriquer des pages web entre elles. Pour commencer, voici quelques questions :</p> + +<ul> + <li><strong>Quel est le document que j'intègre dans la page web ?</strong> L'URL du document sera la valeur de l'attribut {{htmlattrxref('src','iframe')}}.</li> + <li><strong>Quel espace doit occuper le document par rapport à la page web « parente » ? </strong>Pour cette information, on utilisera les attributs {{htmlattrxref('width','iframe')}} et {{htmlattrxref('height','iframe')}}.</li> + <li><strong>Que se passe-t-il lorsque l'agent utilisateur ne supporte pas les <em>iframes</em> ?</strong> Dans ces cas, il faut fournir un contenu HTML à utiliser en recours (ça peut, par exemple, être un lien vers le document qui aurait dû être imbriqué), ce contenu sera placé entre les balises <code><iframe></code>.</li> + <li>Il ne faut pas oublier l'attribut <code>sandbox</code>, hautement conseillé, qui permet de renforcer la sécurité des requêtes effectuées.</li> +</ul> + +<p>Au final, le code ressemblera à :</p> + +<pre class="brush: html"><iframe + src="https://developer.mozilla.org/fr/docs/Web/JavaScript/" + width="100%" height="500" + sandbox> + <p> + <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/"> + Un lien à utiliser dans les cas où les navigateurs ne supportent + pas les <i>iframes</i>. + </a> + </p> +</iframe> +</pre> + +<div class="note"> +<p>Afin d'améliorer la vitesse de chargement du site principal, il peut être utile de définir l'attribut <code>src</code> de l'<em>iframe</em> grâce à JavaScript, une fois que le contenu principal a été chargé. De cette façon, votre page sera utilisable plus tôt et le temps de chargement « officiel » de votre page sera réduit (ce qui peut être une métrique importante pour le référencement).</p> +</div> + +<div class="note"> +<p>Si vous n'appréciez pas la bordure épaisse autour de l'{{htmlelement("iframe")}}, vous pouvez utiliser {{cssxref('border')}}<code>: none;</code> dans votre code {{Glossary('CSS')}}.</p> +</div> + +<h2 id="Soyez_couverts">Soyez couverts</h2> + +<p>Dans les paragraphes précédents, nous avions insisté sur les aspects liés à la sécurité. Nous y voilà revenus. Les développeurs de navigateurs et les développeurs web ont appris à leurs dépens que les <em>iframes</em> pouvaient être un vecteur d'attaque visant à modifier une page web ou à faire faire aux visiteurs quelque chose à leur insu.</p> + +<div class="note"> +<p>{{interwiki('wikipedia','Clickjacking')}} est l'une des attaques connues utilisant les <em>iframes</em> : un attaquant placera une <em>iframe</em> invisible dans le document pour capturer les interactions entre l'utilisateur et le site web. Cela permet de détourner les utilisateurs ou de subtiliser des données sensibles.</p> +</div> + +<p>Voici quelques mesures à prendre pour mieux protéger votre site, de la plus simple à la plus complexe.</p> + +<h3 id="Ne_pas_intégrer_de_contenu_tiers">Ne pas intégrer de contenu tiers</h3> + +<p>Il peut arriver que vous n'ayez pas le choix, en revanche si vous l'avez, ne pas intégrer de contenu tiers pourra certainement vous épargner des maux de tête. Si vous avez développé le contenu intégré, regardez-y à deux fois. Si le contenu provient de l'extérieur, considérez-le comme dangereux.</p> + +<div class="note"> +<p>Un autre aspect que celui de la sécurité intervient ici : la propriété intellectuelle. La plupart des contenus, qu'ils soient en ligne ou non, sont placés sous le droit d'auteur, y compris du contenu dont on penserait qu'il est libre de droit (par exemple, la plupart des images sur <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). <strong>N'affichez jamais du contenu sur votre page web si ce n'est pas le vôtre et que vous n'avez pas eu l'accord expresse de l'auteur. Les peines infligées pour infraction au droit d'auteur peuvent être importantes.</strong> Là encore, on n'est jamais trop prudent.</p> + +<p>Si le contenu est placé sous licence, vous devez respecter les termes de la licence. Par exemple, MDN est sous<a href="/en-US/docs/MDN/About#Copyrights_and_licenses"> licence CC-BY-SA</a>. Cela signifie que vous devez <a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">créditer les auteurs correctement</a> lorsque vous citez le contenu d'une de ses pages, même si vous y apportez des modifications.</p> +</div> + +<h3 id="Utiliser_HTTPS">Utiliser HTTPS</h3> + +<p>{{Glossary("HTTPS")}} est la version chiffrée de {{Glossary("HTTP")}}. Vous devriez utiliser HTTPS dès que possible :</p> + +<ol> + <li>HTTPS réduit les chances que le contenu distant soit modifié lors du transport ;</li> + <li>HTTPS empêche le contenu intégré d'accéder au contenu du document parent, et <em>vice versa</em>.</li> +</ol> + +<p>Les certificats de sécurité ne sont pas donnés et si vous ne pouvez pas vous en procurer un, vous devrez servir votre document parent avec HTTP. Cependant, suite à ce qui a été vu avant,<em> dans aucun cas vous ne devez intégrer du contenu tiers qui soit transporté par HTTP </em>(dans le meilleur des cas, cela se traduira, pour l'utilisateur, par un avertissement dans le navigateur).</p> + +<h3 id="Utiliser_l'attribut_sandbox_toujours">Utiliser l'attribut <code>sandbox</code>, toujours</h3> + +<p>Si vous souhaitez minimiser les risques, ne donnez <em>que les permissions indispensables nécessaires</em>. Bien entendu, cela s'applique également à votre contenu.</p> + +<p>Le contenu qui n'est pas mis dans un bac à sable (<em>sandbox</em>) a trop de droits par défaut (utilisations de scripts, de formulaires, de pop-ups, etc). Tant que c'est possible, imposez toutes les restrictions en utilisant {{htmlattrxref('sandbox','iframe')}} sans paramètres.</p> + +<p>Si c'est nécessaire, vous pouvez ajouter certaines permissions, une à une, dans la valeur de <code>sandbox</code>. Attention ! <em>Il ne faut jamais</em> ajouter <code>allow-scripts</code> et <code>allow-same-origin</code> en même temps car le contenu placé en bac à sable pourrait alors désactiver les protections.</p> + +<div class="note"> +<p>La mise en bac à sable (<em>sandboxing</em>) n'offre aucune protection si l'attaquant peut détourner les visiteurs et leur faire visiter un contenu dangereux directement (qui n'est pas dans une <code>iframe</code>). S'il y a une probabilité qu'un contenu soit dangereux (par exemple : un contenu généré par un utilisateur), faites en sorte que ce contenu soit servir avec une origine différente de celle du site principal.</p> +</div> + +<h3 id="Établir_des_canaux_de_communication_entre_les_contenus">Établir des canaux de communication entre les contenus</h3> + +<p>Dans certains cas, il peut être utile de faire communiquer une <em>iframe</em> avec le document hôte. Mettre en place de tels canaux de communication est assez simple avec JavaScript. Si l'<em>iframe</em> est correctement mise en bac à sable, ni l'<em>iframe</em> ni le document parent ne pourront accéder au DOM de l'autre (sans bac à sable, ça serait possible et incroyablement dangereux). Pour échanger de tels messages, l'API {{domxref('window.postMessage','postMessage')}} est la seule méthode sécurisée.</p> + +<h3 id="Configurer_les_directives_CSP">Configurer les directives CSP</h3> + +<p>{{Glossary("CSP")}} fournit <a href="/fr/docs/Web/Security/CSP/CSP_policy_directives">un ensemble d'en-têtes HTTP</a> conçus pour améliorer la sécurité d'un document HTML. Lorsqu'on utilise des <em>iframe</em>, il faut s'assurer de <a href="/fr/docs/Web/HTTP/X-Frame-Options">configurer son serveur pour envoyer un en-tête <code>X-Frame-Options</code> approprié</a>. Cela peut empêcher d'autres sites web d'intégrer le contenu de votre page dans d'autres pages web (ce qui serait une première étape pour faire du {{interwiki('wikipedia','clickjacking')}} ou effectuer d'autres attaques). Pour plus d'informations sur ce sujet, <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">le billet de Frederik Braun (en anglais)</a> est particulièrement intéressant.</p> + +<h2 id="Placez_le_code_HTML_dans_un_bac_à_sable_(sandboxing)">Placez le code HTML dans un bac à sable (<em>sandboxing</em>)</h2> + +<p>Nous avons déjà évoqué la mise en bac à sable pour les contenus embarqués mais cela peut également concerner votre propre contenu. Il est parfois avantageux d'aller encore plus loin en découpant sa page web en plusieurs <em>iframes</em>, chacune mise dans un bac à sable, en gérant un minimum de privilèges et en les coordinant depuis le document principal (<a href="http://www.html5rocks.com/tutorials/security/sandboxed-iframes/">Mike West décrit ce sujet en détails</a> et explique comment la séparation des privilèges permet d'améliorer le niveau de sécurité). Découpage une page de cette façon peut également permettre d'obtenir de meilleures performances car les arbres {{glossary("DOM")}} manipulés sont plus légers.</p> + +<p>En utilisant les deux nouveaux attributs d'<code>iframe</code> : {{htmlattrxref('seamless','iframe')}} et {{htmlattrxref('srcdoc','iframe')}}, vous pouvez intégrer des fragments de code HTML dans un document HTML. Pour supporter les navigateurs historiques, il est possible de fournir un contenu alternatif via une URL avec <code>src</code> (cela peut être une <a href="/fr/docs/Web/HTTP/data_URIs">URI de données</a>). Voici un exemple simple :</p> + +<pre class="brush: html"><iframe + sandbox + seamless + src="fallback.html" + srcdoc=" + <p> + Ce paragraphe est dans un bac à sable. + </p> + "> + Du contenu pour les navigateurs qui ne supportent pas + les iframes. +</iframe></pre> + +<div class="note"> +<p>Pour l'attribut <code>srcdoc</code>, les quotes doivent être échappées (<code>&quot;</code>) et les ampersandes doivent être doublement échappées (<code>&amp;amp;</code> pour représenter une ampersande simple (&)).</p> +</div> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li>{{htmlelement('iframe')}}</li> +</ul> diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..8d3caf06b2 --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,154 @@ +--- +title: Ajouter du contenu audio ou vidéo à une page web +slug: Apprendre/HTML/Comment/Ajouter_contenu_audio_vidéo_page_web +tags: + - Audio + - Beginner + - Guide + - HTML + - Video +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of_original: Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage +--- +<div class="summary"> +<p>Dans cet article, nous verrons comment intégrer des éléments vidéo et audio de premier rang, accessibles à chacun, quelle que soit la méthode utilisée.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Prérequis :</th> + <td>Vous devriez vous être familiarisé-e avec <a href="/fr/Apprendre/HTML/Write_a_simple_page_in_HTML">la création de documents HTML simples</a>.</td> + </tr> + <tr> + <th scope="row">Objectifs :</th> + <td>Savoir comment intégrer des éléments audio et vidéo dans une page web.</td> + </tr> + </tbody> +</table> + +<h2 id="L'audio_et_la_vidéo_sur_le_web">L'audio et la vidéo sur le web</h2> + +<p>Depuis toujours, les développeurs web ont intégré (ou tenté d'intégrer) des vidéos et des sons sur le Web. Après une longue période d'expérimentation, {{glossary("HTML5")}} offre aujourd'hui la meilleure solution et tire parti de nouvelles {{Glossary("API")}} {{Glossary("JavaScript")}} .</p> + +<p>Dans cet article, nous expliquerons comment intégrer des fichiers audio et vidéo dans des documents HTML. Nous prendrons le postulat de départ que vous avez déjà ces fichiers disponibles (la création de média n'est pas, à proprement parlé, du développement web et nous n'en parlerons donc pas dans cet article)</p> + +<p>Avant de commencer, précisons qu'il existe par ailleurs quelques fournisseurs de vidéos en ligne tels que <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> ou <a href="https://vimeo.com/">Vimeo</a>. Ces sites offrent un moyen pratique pour héberger ou consommer des vidéos et peuvent nous éviter d'avoir à penser à la consommation de bande passante. Ils permettent généralement d'utiliser des scripts JavaScript permettant d'embarquer les vidéos sur une page web. Cette méthode permet d'éviter certaines des difficultés que nous allons aborder, toutefois, cela ne correspond pas exactement au fait d'utiliser HTML pour fournir <strong>directement</strong> du contenu multimédia à vos utilisateurs.</p> + +<h2 id="Pour_commencer">Pour commencer</h2> + +<p>La façon la plus simple permettant d'intégrer un fichier multimédia dans une page web est d'utiliser l'élément {{htmlelement("audio")}} pour les fichiers sonores et l'élément {{htmlelement("video")}} pour les vidéos. Par exemple :</p> + +<pre class="brush: html"><audio src="exemple.ogg" controls></audio> +<video src="exemple.webm" width="375" height="280" controls></video> +</pre> + +<p>Ces deux éléments HTML possèdent quelques attributs permettant de contrôler le comportement des éléments :</p> + +<dl> + <dt>{{htmlattrxref("width","video")}} et {{htmlattrxref("height","video")}} (uniquement pour <code><video></code>)</dt> + <dd>Ces attributs permettent de contrôler la taille à utiliser pour la vidéo (des propriétés CSS peuvent également être utilisées). Dans tous les cas, les vidéos garderont leur ratio « hauteur / largeur » de départ (des bandes noires viendront occuper l'espace vide).</dd> + <dt>{{htmlattrxref("controls","video")}}</dt> + <dd> + <p>Les utilisateurs doivent être en mesure de contrôler la lecture de la vidéo ou du son (ce point est notamment critique pour les personnes <a href="https://fr.wikipedia.org/wiki/%C3%89pilepsie#.C3.89pid.C3.A9miologie">epileptiques</a>). Il faut donc utiliser l'attribut <code>controls</code> pour que le navigateur fournisse les contrôles natifs ou alors construire votre propre interface, grâce à <a href="/fr/docs/Web/API/HTMLMediaElement">l'API JavaScript appropriée</a>. L'interface utilisateur devra, au minimum, fournir un moyen de lancer la lecture, de l'arrêter et d'ajuster le volume.</p> + </dd> + <dt>{{htmlattrxref("autoplay","video")}}</dt> + <dd>Cet attribut permet de lancer la vidéo ou la piste audio dès qu'elle est chargée et lors du chargement de la page. Attention, de nombreux utilisateurs peuvent trouver ce comportement « agressif ».</dd> + <dt>{{htmlattrxref("loop","video")}}</dt> + <dd>Cet attribut permet de lire la piste audio ou la vidéo en boucle, en la relançant automatiquement une fois qu'elle a fini. Attention également à utiliser cet attribut avec précaution.</dd> + <dt>{{htmlattrxref("muted","video")}}</dt> + <dd>Cet attribut permet de lancer le média avec le son désactivé par défaut.</dd> + <dt>{{htmlattrxref("poster","video")}} (video only)</dt> + <dd>Cet attribut fournit l'URL d'une image à afficher avant de lancer la vidéo.</dd> +</dl> + +<h2 id="Déjouer_les_pièges_des_codecs">Déjouer les pièges des codecs</h2> + +<h3 id="Le_problème_les_navigateurs_supportent_différents_codecs">Le problème : les navigateurs supportent différents codecs</h3> + +<p>Les <strong>{{Glossary("Codec","codecs")}}</strong> (tels que Vorbis ou H.264) permettent de convertir du son et de la vidéo en chiffres binaires et aussi de réaliser la conversion inverse. Mais si on ne dispose pas du bon codec, les données exprimées en binaires seront inexploitables.</p> + +<div class="note"><strong>Les formats de type « conteneur »</strong> (tel que Ogg) : ces formats font référence à la façon dont les données d'images, de son et les méta-données sont regroupées (« empaquetées ») dans un seul fichier. Le support pour les différents types de conteneur est un problème à part entière mais généralement, les systèmes supportenent les formats de conteneurs associés aux codex qu'ils supportent (par exemple Ogg empaquète de l'audio au format Vorbis et de la vidéo au format Theora ; WebM regroupe le plus souvent de l'audio au format Vorbis avec de la vidéo au format VP8/VP9 ; MP4, quant à lui, empaquète de l'audio AAC et de la vidéo H.26).</div> + +<p>Malheureusement, les navigateurs ne supportent pas tous les mêmes codecs, il faut donc, la plupart du temps, fournir différents fichiers pour les différents formats.</p> + +<h3 id="Quels_formats_fournir">Quels formats fournir ?</h3> + +<p>Le format <strong>MP3 </strong>(pour l'audio) et le format <strong>MP4/H.264</strong> (pour la vidéo) sont très largement supportés. Cepedant, des brevets américains portent sur le format MP3 jusqu'en 2017 au minimum et sur le format H.264 jusqu'en 2027 au minimum. Beaucoup de personnes préfèrent éviter d'utiliser des logiciels restreints à ces brevets, c'est pour cela qu'il est nécessaire de mettre à disposition les fichiers multimédia dans des formats libres (tel qu'<a href="http://xiph.org/vorbis/">Ogg Vorbis</a> pour l'audio et <a href="http://www.webmproject.org/">WebM</a> pour la vidéo).</p> + +<p>Dans un monde idéal, à la façon de Wikipédia, il suffirait de fournir les fichiers uniquement dans ces formats ouverts. Cependant, des navigateurs comme Safari et Microsoft Edge (sans parler d'Internet Explorer) ne supportent pas ces formats. Cela laisserait donc beaucoup d'utilisateurs potentiels sur le banc.</p> + +<p>Pour plus de détails sur cette compatibilité, consultez notre <a href="https://developer.mozilla.org/en-US/Apps/Build/Manipulating_media/Cross-browser_audio_basics#Audio_Codec_Support">tableau de compatibilité pour les codecs audio</a> et notre <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility">tableau de compatibilité pour les codecs audio-vidéo</a>.</p> + +<h3 id="Comment_fournir_le_même_contenu_sous_plusieurs_formats">Comment fournir le même contenu sous plusieurs formats ?</h3> + +<p>HTML fournit l'élément {{htmlelement("source")}} qui peut être utilisé avec l'attribut {{htmlattrxref("src","source")}}. Cet attribut, <code>src</code>, ne doit pas être placé au sein même de l'élément <code><video></code> ou <code><audio></code> car il remplacerait alors le contenu déclaré dans les éléments <code><source></code>. Voici un exemple :</p> + +<pre class="brush: html"><audio controls> + <source src="exemple.mp3" type="audio/mpeg"> + <source src="exemple.ogg" type="audio/ogg"> +</audio></pre> + +<div class="note"> +<p>Assurez-vous de ne pas oublier l'attribut {{htmlattrxref("type","source")}}. S'il manque, les navigateurs chargeront et essaieront chaque fichier, ce qui prendra plus de temps et consommera plus de ressources. <code>type</code> permet aux navigateurs de sauter tous les fichiers qu'ils ne peuvent pas lire. Dans <a href="/en-US/docs/Web/HTML/Supported_media_formats">cet article sur les formats de médias supportés</a>, les {{glossary("type MIME","types MIME")}} les plus communs sont explicités.</p> +</div> + +<h2 id="Les_transcriptions_et_les_sous-titres">Les transcriptions et les sous-titres</h2> + +<p>Transcrire signifie ici qu'on écrit les dialogues oraux sont forme de texte.</p> + +<p>De nombreuses personnes ne peuvent pas (ou ne veulent pas) utiliser des contenus audio ou vidéos (par exemple dans un environnement bruyant ou dans une bibliothèque). Pour que votre site puisse être consulté par ces visiteurs, il est donc nécessaire de fournir une transcription textuelle du média ainsi qu'une « piste » de texte qui s'affiche en même temps que la vidéo. Cela prend du temps à réaliser mais cela en vaut le coût..</p> + +<p>Les pistes textuelles permettent également d'avoir un meilleur impact pour le référencement ({{glossary("SEO")}}) car les moteurs de recherches utilisent principalement le contenu textuel. Un dialogue d'une vidéo pourra donc être référencé s'il est transcrit.</p> + +<h3 id="Les_pistes_textuelles">Les pistes textuelles</h3> + +<p>Les chaînes de texte affichées durant une vidéo peuvent prendre différentes formes, dont voici les principales :</p> + +<dl> + <dt>Les sous-titres</dt> + <dd>La traduction des dialogues à l'écrit, éventuellement dans une langue autre que celle parlée dans la vidéo.</dd> + <dt>La description</dt> + <dd>Une transcription synchronisée des dialogues et les descriptions des sons entendus dans la vidéo (ce qui permet aux personnes de regarder un film sans le son par exemple)</dd> + <dt>L'audio-description</dt> + <dd>Du texte, décrivant les scènes qui est fourni en audio (notamment pour les personnes souffrant d'une déficience visuelle).</dd> +</dl> + +<p>HTML permet d'inclure facilement de telles pistes :</p> + +<ol> + <li><a href="/fr/docs/Web/API/Web_Video_Text_Tracks_Format">Il faut écrire un ou plusieurs fichiers texte WebVTT.</a> Un fichier WebVTT contient les textes à utiliser et définit à quels moment ces textes doivent apparaître ou disparraître (dans ces cas, avoir une bonne transcription dès le début aide énormément).</li> + <li>Puis lier le ou les fichiers WebVTT à l'élément {{htmlelement("track")}}. <code><track></code> se place dans les éléments <code><audio></code> ou <code><video></code> et est situé après les éléments <code><source></code>. L'attribut {{htmlattrxref("kind","track")}} doit être utilisé pour indiquer s'il s'agit de <code>subtitles</code> (sous-titres), <code>captions</code> (description) ou de <code>descriptions</code> (audio description). L'attribut {{htmlattrxref("srclang","track")}} peut également être utilisé pour compléter et indiquer au navigateur le langage utilisé pour les sous-titres.</li> +</ol> + +<p>Voici un exemple :</p> + +<pre class="brush: html"><video controls> + <source src="exemple.mp4" type="video/mp4"> + <source src="exemple.webm" type="video/webm"> + <track kind="subtitles" src="sous-titres-en.vtt" srclang="en"> +</video></pre> + +<p>Pour plus de détails, n'hésitez pas à lire <a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">l'article décrivant comment ajouter des sous-titres et légendes à une vidéo HTML5</a>.</p> + +<h2 id="Contenu_de_secours_pour_les_navigateurs_historiques">Contenu de secours pour les navigateurs historiques</h2> + +<p>Il est possible d'ajouter un contenu qui sera utilisé dans le cas où le navigateur ne connaît pas ces éléments HTML5. Ce contenu doit être ajouté avant la balise de fermeture. Il est par exemple possible d'ajouter un lien de téléchargement vers le fichier média :</p> + +<pre class="brush: html"><video src="exemple.webm" controls> + <track kind="captions" src="captions.vtt" srclang="fr"> + <a href="exemple.webm">Télécharger la vidéo</a> +</video></pre> + +<p>Un lien de téléchargement n'est pas parfaitement adapté pour tous les utilisateurs (notamment pour ceux qui sont sur des mobiles) mais c'est une meilleure solution que d'indiquer uniquement que le navigateur doit être mis à jour. <a href="https://dev.opera.com/articles/html5-video-flash-fallback-custom-controls/">Il existe des techniques plus avancées pour répondre à ce cas</a> mais une solution rapide à mettre en œuvre consiste à utiliser les plateformes vidéos évoquées au début de cet article, qui fournissent un script tiers fonctionnel.</p> + +<h2 id="En_savoir_plus">En savoir plus</h2> + +<ul> + <li><a href="/fr/docs/Web/HTML/Utilisation_d'audio_et_video_en_HTML5">Un guide plus détaillé</a></li> + <li>{{htmlelement("audio")}}</li> + <li>{{htmlelement("video")}}</li> + <li>{{htmlelement("source")}}</li> + <li>{{htmlelement("track")}}</li> + <li><a href="/fr/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Ajouter des sous-titres à une vidéo HTML5</a></li> +</ul> diff --git a/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content_040b1c36f4218ba488ffb0284dfe52bf/index.html b/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content_040b1c36f4218ba488ffb0284dfe52bf/index.html new file mode 100644 index 0000000000..efa30853e6 --- /dev/null +++ b/files/fr/conflicting/learn/html/multimedia_and_embedding/video_and_audio_content_040b1c36f4218ba488ffb0284dfe52bf/index.html @@ -0,0 +1,245 @@ +--- +title: Utilisation d'audio et video en HTML5 +slug: Web/HTML/Utilisation_d'audio_et_video_en_HTML5 +tags: + - Aperçu + - Featured + - Guide + - HTML + - HTML5 + - Media + - Web +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +translation_of_original: Web/Guide/HTML/Using_HTML5_audio_and_video +--- +<p>{{ gecko_minversion_header("1.9.1") }}</p> + +<p>La gestion des éléments HTML 5 <a class="internal" href="/fr/HTML/Element/Audio" title="fr/HTML/Element/Audio"><code>audio</code></a> et <a class="internal" href="/Fr/HTML/Element/Video" title="fr/HTML/Element/Video"><code>video</code></a> a été introduite dans Firefox 3.5, ce qui permet d'intégrer facilement des médias dans des documents HTML. Actuellement, les formats de média Ogg Theora, Ogg Vorbis et WAV sont gérés.</p> + +<h2 id="Intégration_de_médias">Intégration de médias</h2> + +<p>Il est trivial d'intégrer des médias dans vos documents HTML :</p> + +<pre class="brush: html"><video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls> + Votre navigateur ne gère pas l'élément <code>video</code>. +</video> +</pre> + +<p>Cet exemple jouera une vidéo exemple du site web de Theora.</p> + +<p>Plusieurs fichiers sources peuvent être référencés à l'aide de l'élément <a class="internal" href="/fr/HTML/Element/Source" title="fr/HTML/Element/Source"><code>source</code></a> afin de fournir des vidéos/extraits audio encodés dans différents formats pour différents navigateurs. Par exemple,</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg"> + <source src="foo.mp4"> + Votre navigateur ne gère pas l'élément <code>video</code>. +</video> +</pre> + +<p>jouera le fichier Ogg dans les navigateurs gérant ce format. Si ce n'est pas le cas, il essaiera de jouer le fichier MPEG-4.</p> + +<p>Il est également possible d'indiquer les codecs dont le fichier média a besoin ; cela permet au navigateur de prendre de meilleurs décisions :</p> + +<pre class="brush: html"><video controls> + <source src="foo.ogg" type="video/ogg; codecs=&quot;dirac, speex&quot;"> + Votre navigateur ne gère pas l'élément <code>video</code>. +</video></pre> + +<p>Ici, on indique que la vidéo utilise les codecs Dirac et Speex. Si le navigateur gère les médias Ogg, mais pas les codecs spécifiés, la vidéo ne se chargera pas.</p> + +<p>Si l'attribut <code>type</code> n'est pas spécifié le type du média est récupéré depuis le serveur et vérifié pour voir s'il est géré par Gecko ; s'il n'est pas utilisable, l'élément <code>source</code> suivant est vérifié. Si aucun des éléments <code>source</code> ne peut être utilisé, un évènement <code>error</code> est transmis à l'élément <code>video</code>. Si l'attribut <code>type</code> est spécifié, il est comparé avec ceux qui peuvent être joués ; s'il n'est pas reconnu, le serveur n'est même pas interrogé, et on passe directement à la vérification de l'élément <code>source</code> suivant.</p> + +<p> </p> + +<h2 id="Contrôle_de_la_lecture">Contrôle de la lecture</h2> + +<p>Une fois le média intégré dans votre document HTML à l'aide de ces nouveaux éléments, vous pouvez les contrôler programmatiquement depuis du code JavaScript. Par exemple, pour démarrer (ou redémarrer) la lecture, vous pouvez faire ceci :</p> + +<pre class="brush: js">var v = document.getElementsByTagName("video")[0]; +v.play(); +</pre> + +<p>La première ligne récupère le premier élément video dans le document, et la seconde appelle la méthode <a class="external" href="/fr/NsIDOMHTMLMediaElement#play()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/fr/NsIDOMHTMLMediaElement#play()"><code>play()</code></a> de l'élément, telle que définie dans l'interface {{ interface("nsIDOMHTMLMediaElement") }} utilisée pour implémenter les éléments de médias.</p> + +<h2 id="Évènements_des_médias">Évènements des médias</h2> + +<p>Différents évènements sont envoyés lors du traitement de médias :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">Nom de l'évènement</td> + <td class="header">Description</td> + </tr> + <tr> + <td><code>abort</code></td> + <td>Envoyé lorsque la lecture est annulée ; par exemple il sera envoyé si le média est en cours de lecture et redémarré depuis le début.</td> + </tr> + <tr> + <td><code>canplay</code></td> + <td>Envoyé lorsque suffisamment de données sont disponibles pour débuter la lecture du média, au moins pour quelques premières images. Il correspond à la valeur <code>CAN_PLAY</code> de <code>readyState</code>.</td> + </tr> + <tr> + <td><code>canplaythrough</code></td> + <td>Envoyé lorsque l'état devient <code>CAN_PLAY_THROUGH</code>, ce qui indique que le média peut être entièrement lu sans interruption, en supposant que la vitesse de téléchargement reste au niveau actuel.</td> + </tr> + <tr> + <td><code>canshowcurrentframe</code></td> + <td>L'image courante est chargée et peut être présentée. Ceci correspond à la valeur <code>CAN_SHOW_CURRENT_FRAME</code> de <code>readyState</code>.</td> + </tr> + <tr> + <td><code>dataunavailable</code></td> + <td>Envoyé lorsque l'état devient <code>DATA_UNAVAILABLE</code>.</td> + </tr> + <tr> + <td><code>durationchange</code></td> + <td>Les métadonnées ont été chargées ou modifiées, ce qui indique un changement dans la durée du média. Sera par exemple envoyé lorsque le média est suffisamment chargé pour que sa durée soit connue.</td> + </tr> + <tr> + <td><code>emptied</code></td> + <td>Le média est devenu vide ; par exemple si le média est déjà chargé (ou partiellement chargé) et qu'on appelle la méthode <a class="internal" href="/fr/nsIDOMMediaHTMLElement#load()" title="fr/nsIDOMMediaHTMLElement#load()"><code>load()</code></a> pour le recharger.</td> + </tr> + <tr> + <td><code>empty</code></td> + <td>Envoyé lorsqu'une erreur survient et que le média est vide.</td> + </tr> + <tr> + <td><code>ended</code></td> + <td>Envoyé lorsque la lecture se termine.</td> + </tr> + <tr> + <td><code>error</code></td> + <td>Envoyé lorsqu'une erreur se produit. L'attribut <code>error</code> de l'élément contient plus d'informations.</td> + </tr> + <tr> + <td><code>loadedfirstframe</code></td> + <td>La première image du média a été chargée.</td> + </tr> + <tr> + <td><code>loadedmetadata</code></td> + <td>Les métadonnées du média ont été chargées ; tous les attributs contiennent autant d'informations que possible.</td> + </tr> + <tr> + <td><code>loadstart</code></td> + <td>Envoyé lorsque le chargement du média débute.</td> + </tr> + <tr> + <td><code>pause</code></td> + <td>Envoyé lorsque la lecture est interrompue.</td> + </tr> + <tr> + <td><code>play</code></td> + <td>Envoyé lorsque la lecture débute ou reprend.</td> + </tr> + <tr> + <td><code>progress</code></td> + <td> + <p>Envoyé périodiquement pour informer les parties intéressées de la progression du téléchargement du média. L'évènement progress dispose de trois attributs :</p> + + <dl> + <dt><code>lengthComputable</code></dt> + <dd>vaut <code>true</code> si la taille totale du média est connue, <code>false</code> sinon.</dd> + <dt><code>loaded</code></dt> + <dd>Le nombre d'octets du fichier de média qui ont été reçus jusqu'à présent.</dd> + <dt><code>total</code></dt> + <dd>Le nombre total d'octets dans le fichier de média.</dd> + </dl> + </td> + </tr> + <tr> + <td><code>ratechange</code></td> + <td>Envoyé lorsque la vitesse de lecture change.</td> + </tr> + <tr> + <td><code>seeked</code></td> + <td>Envoyé lorsqu'une opération de positionnement est effectuée.</td> + </tr> + <tr> + <td><code>seeking</code></td> + <td>Envoyé lorsqu'une opération de positionnement débute.</td> + </tr> + <tr> + <td><code>suspend</code> {{ gecko_minversion_inline("1.9.2") }}</td> + <td>Envoyé lorsque le chargement du média est interrompu ; cela peut arriver parce que le téléchargement est terminé ou parce qu'il a été mis en pause pour toute autre raison.</td> + </tr> + <tr> + <td><code>timeupdate</code></td> + <td>Le temps indiqué par l'attribut <code>currentTime</code> de l'élément a été modifié.</td> + </tr> + <tr> + <td><code>volumechange</code></td> + <td>Envoyé lorsque le volume audio est modifié (qu'il s'agisse d'une modification du volume ou d'un changement de l'attribut <code>muted</code>).</td> + </tr> + <tr> + <td><code>waiting</code></td> + <td>Envoyé lorsque l'opération demandée (comme une lecture) est retardée en attendant la fin d'une autre opération (comme un positionnement).</td> + </tr> + </tbody> +</table> + +<p>{{ gecko_minversion_note("1.9.2", "L'ancien évènement <code>load</code> a été retiré de Gecko 1.9.2, il n'était pas déclenché quand il fallait et ne doit pas être utilisé.") }}</p> + +<p>Ces évènements peuvent facilement être interceptés à l'aide ce ce genre de code :</p> + +<pre>var v = document.getElementsByTagName("video")[0]; + +v.addEventListener("seeked", function() { document.getElementsByTagName("video")[0].play(); }, true); +v.currentTime = 10.0; +</pre> + +<p>Cet exemple récupère le premier élément vidéo du document et lui attache un écouteur d'évènement, vérifiant l'évènement seeked qui est envoyé lorsqu'une opération de positionnement se termine. La fonction appelle simplement la méthode <code>play()</code> de l'élément, qui lance la lecture.</p> + +<p>Ensuite, à la ligne 4, cet exemple positionne l'attribut <code>currentTime</code> de l'élément à 10.0, ce qui lance une opération de positionnement à la dixième seconde du média. Cela déclenche l'envoi d'un évènement <code>seeking</code> au début de l'opération, ensuite d'un évènement <code>seeked</code> lorsque le positionnement est terminé.</p> + +<p>Autrement dit, l'exemple se positionne à dix secondes du début du média, puis commence la lecture dès que c'est fait.</p> + +<h2 id="Options_de_rechange">Options de rechange</h2> + +<p>Le code HTML fourni entre les balises, par exemple <code><video></code> et <code></video></code>, est utilisé par les navigateurs ne gérant pas les médias HTML 5. Vous pouvez tirer parti de cela pour fournir un contenu alternatif de rechange pour ces navigateurs.</p> + +<p>Cette section propose deux options de rechange possibles pour la vidéo. Dans les deux cas, si le navigateur gère la vidéo HTML 5, c'est celle-ci qui sera utilisée.</p> + +<h3 id="Utilisation_de_Flash">Utilisation de Flash</h3> + +<p>Vous pouvez utiliser Flash pour lire une vidéo Flash si l'élément <code>video</code> n'est pas géré :</p> + +<pre class="brush: html"><video src="video.ogv" controls> + <object data="flvplayer.swf" type="application/x-shockwave-flash"> + <param value="flvplayer.swf" name="movie"/> + </object> +</video> +</pre> + +<p>Notez qu'il ne faut pas mettre d'attribut <code>classid</code> à la balise <code>object</code> afin de rester compatible avec les autres navigateurs qu'Internet Explorer.</p> + +<h3 id="Lecture_de_vidéos_Ogg_dans_une_applet_Java">Lecture de vidéos Ogg dans une applet Java</h3> + +<p>Une applet Java appelée <a class="external" href="http://maikmerten.livejournal.com/2256.html" title="http://maikmerten.livejournal.com/2256.html">Cortado</a> peut-être utilisée pour lire les vidéos Ogg dans les navigateurs ne pouvant pas lire les vidéos HTML 5 mais où Java est géré :</p> + +<pre class="brush: html"><video src="my_ogg_video.ogg" controls width="320" height="240"> + <object type="application/x-java-applet" + width="320" height="240"> + <param name="archive" value="cortado.jar"> + <param name="code" value="com.fluendo.player.Cortado.class"> + <param name="url" value="my_ogg_video.ogg"> + <p>You need to install Java to play this file.</p> + </object> +</video> +</pre> + +<p>Si vous ne créez pas d'élément enfant de l'objet cortado comme l'élément <p> dans l'exemple ci-dessus, les installations de Firefox 3.5 qui gèrent la vidéo nativement mais où Java n'est pas installé informeront incorrectement l'utilisateur qu'il doit installer un plugin pour lire le contenu de la page.</p> + +<h2 id="Voir_également">Voir également</h2> + +<ul> + <li><a class="internal" href="/fr/HTML/Element/Audio" title="fr/HTML/Element/Audio"><code>audio</code></a></li> + <li><a class="internal" href="/Fr/HTML/Element/Video" title="fr/HTML/Element/Video"><code>video</code></a></li> + <li><a class="internal" href="/fr/HTML/Element/Source" title="fr/HTML/Element/Source"><code>source</code></a></li> + <li><a class="internal" href="/fr/Manipulation_de_vidéos_avec_canvas" title="fr/Manipulation de vidéos avec canvas"><code>Manipulation de vidéos avec canvas</code></a></li> + <li>{{ interface("nsIDOMHTMLMediaElement") }}</li> + <li><a class="internal" href="/fr/docs/Web/HTML/formats_media_support" title="fr/Formats de médias gérés par les éléments audio et video"><code>Formats de médias gérés par les éléments audio et video</code></a></li> +</ul> + +<p> {{ languages( { "en": "en/Using_audio_and_video_in_Firefox" } ) }}</p> + +<p> {{ languages( { "es": "es/Etiquetas audio y video en Firefox" } ) }}</p> diff --git a/files/fr/conflicting/learn/index.html b/files/fr/conflicting/learn/index.html new file mode 100644 index 0000000000..b1aee4ae00 --- /dev/null +++ b/files/fr/conflicting/learn/index.html @@ -0,0 +1,22 @@ +--- +title: Compétences +slug: Apprendre/Compétences +tags: + - Index +translation_of: Learn +translation_of_original: Learn/Skills +--- +<p>Lorsqu'il s'agit d'apprendre le développement Web, il existe plusieurs compétences, listées par <a href="https://webmaker.org" rel="external">WebMaker</a> dans la <a href="https://webmaker.org/literacy" rel="external">littéracie web</a> : une carte destinée aux débutants pour apprendre les bases. Sur MDN, les articles de cette section sont consacrés au développement de sites web et sont destinés à tous publics :</p> + +<dl> + <dt><a href="/fr/Apprendre/Mécanismes_Web">Les mécanismes du Web</a></dt> + <dd>Comprendre l'écosystème du Web.</dd> + <dt><a href="/fr/Apprendre/Infrastructure">Infrastructure</a></dt> + <dd>Comprendre l'aspect technique du Web.</dd> + <dt><a href="/fr/Apprendre/Coder-scripter">Coder/Scripter</a></dt> + <dd>Créer des expériences interactives sur le Web.</dd> + <dt><a href="/fr/Apprendre/Design_Accessibilité">Conception et accessibilité</a></dt> + <dd>Utiliser les ressources du Web pour communiquer efficacement avec tout le monde.</dd> + <dt><a href="/fr/Apprendre/Redaction_web">Écrire pour le Web</a></dt> + <dd>Créer et organiser du contenu sur le Web.</dd> +</dl> diff --git a/files/fr/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/fr/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html new file mode 100644 index 0000000000..6e9414972d --- /dev/null +++ b/files/fr/conflicting/learn/javascript/client-side_web_apis/manipulating_documents/index.html @@ -0,0 +1,147 @@ +--- +title: JavaScript +slug: CSS/Premiers_pas/JavaScript +tags: + - CSS + - 'CSS:Premiers_pas' +translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents +translation_of_original: Web/Guide/CSS/Getting_started/JavaScript +--- +<p> </p> +<p>Vous entrez dans la partie II du tutoriel. Cette partie contient des exemples montrant toute la portée de CSS dans Mozilla.</p> +<p>Chaque page de la partie II illustre la manière dont CSS interagit avec une autre technologie donnée. Ces pages ne sont pas prévues pour vous apprendre à utiliser ces autres technologies. Pour cela, vous devrez consulter d'autres tutoriels pour les comprendre en détail.</p> +<p>Au lieu de cela, ces pages sont conçues pour illustrer les nombreux usages de CSS. Pour les comprendre, vous devriez avoir une certaine connaissance de CSS, mais il n'est pas nécessaire de maîtriser aucune des autres technologies évoquées.</p> +<h3 id="Information_:_JavaScript" name="Information_:_JavaScript">Information : JavaScript</h3> +<p>JavaScript est un + <i> + langage de programmation</i> + . Lorsque vous utilisez une application Mozilla (par exemple votre navigateur), une grande partie du code exécuté par votre ordinateur est écrit en JavaScript.</p> +<p>JavaScript peut interagir avec les feuilles de style, ce qui permet d'écrire des programmes modifiant le style d'un document dynamiquement.</p> +<p>Il existe trois manières de le faire :</p> +<ul> + <li>En travaillant avec la liste de feuilles de style du document — par exemple en ajoutant, retirant ou modifiant une feuille de style.</li> + <li>En travaillant avec les règles d'une feuille de style — par exemple en ajoutant, retirant ou modifiant une règle.</li> + <li>En travaillant avec un élément individuel du DOM — en modifiant son style indépendamment des feuilles de style du document.</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #f4f4f4; margin-bottom: 1em; width: 100%;"> + <caption> + Plus de détails</caption> + <tbody> + <tr> + <td>Pour plus d'informations à propos de JavaScript dans Mozilla, consultez la page <a href="fr/JavaScript">JavaScript</a> de ce wiki.</td> + </tr> + </tbody> +</table> +<h3 id="Action_:_une_d.C3.A9monstration_en_JavaScript" name="Action_:_une_d.C3.A9monstration_en_JavaScript">Action : une démonstration en JavaScript</h3> +<p>Créez un nouveau document HTML, <code>doc5.html</code>. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler pour en obtenir l'entièreté :</p> +<div style="width: 48em; height: 12em; overflow: auto;"> + <pre><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> +<HTML> + +<HEAD> +<TITLE>Premiers pas en CSS avec Mozilla - Démonstration en JavaScript</TITLE> +<LINK rel="stylesheet" type="text/css" href="style5.css"></strong> +<SCRIPT type="text/javascript" src="script5.js"></SCRIPT> +</HEAD> + +<BODY> +<H1>Exemple en JavaScript</H1> + +<DIV id="square"></DIV> + +<BUTTON type="button" onclick="doDemo(this);">Cliquez ici</BUTTON> + +</BODY> +</HTML> +</pre> +</div> +<p>Créez un nouveau fichier CSS, <code>style5.css</code>. Copiez et collez-y le contenu ci-dessous :</p> +<div style="width: 48em;"> + <pre>/*** Démonstration en JavaScript ***/ +#square { + width: 20em; + height: 20em; + border: 2px inset gray; + margin-bottom: 1em; + } + +button { + padding: .5em 2em; + } +</pre> +</div> +<p>Créez un nouveau fichier texte, <code>script5.js</code>. Copiez et collez-y le contenu ci-dessous :</p> +<div style="width: 48em;"> + <pre>// JavaScript demonstration +function doDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "#fa4" + button.setAttribute("disabled", "true") + setTimeout(clearDemo, 2000, button) + } + +function clearDemo (button) { + var square = document.getElementById("square") + square.style.backgroundColor = "transparent" + button.removeAttribute("disabled") + } +</pre> +</div> +<p>Ouvrez le document dans votre navigateur et appuyez sur le bouton.</p> +<p>Ce wiki ne permet pas d'utiliser JavaScript dans ses pages, il n'est donc pas possible de montrer la démonstration ici. Cela ressemble à ceci, avant et après que vous appuyiez sur le bouton :</p> +<table> + <tbody> + <tr> + <td style="padding-right: 2em;"> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><b>Démonstration en JavaScript</b></p> + <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: white;"> + <div style="width: 2em; height: 1em; border: 1px outset black; background-color: #ccc; margin-top: 4px;"> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </td> + <td> + <table style="border: 2px outset #36b; padding: 0 1em .5em .5em;"> + <tbody> + <tr> + <td> + <p><b>Démonstration en JavaScript</b></p> + <div style="width: 5em; height: 5em; border: 2px inset gray; background-color: #fa4;"> + <div style="width: 2em; height: 1em; border: 1px inset black; background-color: #ccc; margin-top: 4px;"> + </div> + </div> + </td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> +<p>Remarques à propos de cette démonstration :</p> +<ul> + <li>Le document HTML est lié à la feuille de style de la manière habituelle et est également lié au script.</li> + <li>Le script traite des éléments individuels du DOM. Il modifie le style du carré directement. Il modifie le style du bouton indirectement en changeant un de ses attributs.</li> + <li>En JavaScript, <code>document.getElementById("square")</code> fonctionne de manière similaire au sélecteur CSS <code>#square</code>.</li> + <li>En JavaScript, <code>backgroundColor</code> correspond à la propriété CSS <code>background-color</code>.</li> + <li>Votre navigateur possède une règle de style interne pour <code>button{{ mediawiki.external('disabled=\"true\"') }}</code> qui modifie l'apparence du bouton lorsqu'il est désactivé.</li> +</ul> +<table style="border: 1px solid #36b; padding: 1em; background-color: #fffff4; margin-bottom: .5em;"> + <caption> + Challenge</caption> + <tbody> + <tr> + <td>Modifiez le script pour que le carré se déplace vers la droite de 20 em lorsque sa couleur change et revienne à sa place lors de l'opération inverse.</td> + </tr> + </tbody> +</table> +<h4 id="Pour_continuer" name="Pour_continuer">Pour continuer</h4> +<p>Si vous avez eu des difficultés à comprendre cette page ou si vous avez d'autres commentaires à son sujet, n'hésitez pas à contribuer à sa <a>page de discussion</a>.</p> +<p>Dans cette démonstration, le document HTML est lié au script même si seul l'élément button utilise le script. Mozilla étend CSS afin qu'il puisse lier du code JavaScript (ainsi que du contenu et d'autres feuilles de style) aux éléments sélectionnés. La page suivante en fournit la démonstration : <b><a href="/fr/docs/CSS/Premiers_pas/Liaisons_XBL">Liaisons XBL</a></b></p> diff --git a/files/fr/conflicting/learn/javascript/objects/index.html b/files/fr/conflicting/learn/javascript/objects/index.html new file mode 100644 index 0000000000..c778187586 --- /dev/null +++ b/files/fr/conflicting/learn/javascript/objects/index.html @@ -0,0 +1,372 @@ +--- +title: Introduction à JavaScript orienté objet +slug: Web/JavaScript/Introduction_à_JavaScript_orienté_objet +tags: + - Encapsulation + - Intermédiaire + - JavaScript + - OOP + - Object + - Orienté objet +translation_of: Learn/JavaScript/Objects +translation_of_original: Web/JavaScript/Introduction_to_Object-Oriented_JavaScript +--- +<div>{{jsSidebar("Introductory")}}</div> + +<p>JavaScript possède un grand potentiel pour la programmation orientée objet (aussi appelée {{Glossary("OOP")}}). Cet article débutera par une introduction à la programmation orientée objet puis abordera le modèle objet de JavaScript et finira par les concepts de la programmation orientée objet appliquée à JavaScript.</p> + +<div class="note"> +<p><strong>Note :</strong> Une nouvelle façon de créer des objets a été introduite avec ECMAScript 2015 (ES6) et n'est pas décrite ici. Il s'agit <a href="/fr/docs/Web/JavaScript/Reference/Classes">des classes</a>.</p> +</div> + +<h2 id="Un_aperçu_de_JavaScript">Un aperçu de JavaScript</h2> + +<p>Si vous n'êtes pas certain de connaître certains concepts comme les variables, les types, les fonctions, et les portées vous pouvez lire <a href="/fr/docs/Web/JavaScript/Une_réintroduction_à_JavaScript">Une réintroduction à JavaScript</a>. Vous pouvez également consulter le <a href="/fr/docs/Web/JavaScript/Guide">guide JavaScript</a>.</p> + +<h2 id="La_programmation_orientée_objet">La programmation orientée objet</h2> + +<p>La programmation orientée objet est un paradigme de programmation qui se base sur une abstraction du monde réel pour créer des modèles. Plusieurs techniques sont utilisées, provenant de paradigmes précédents, comme la modularité, le polymorphisme, ou l'encapsulation. Aujourd'hui, de nombreux langages de programmation (Java, JavaScript, C#, C++, Python, PHP, Ruby et Objective-C par exemple) utilisent la programmation orientée objet (OOP en anglais pour <em>Object-Oriented Programmation</em>).</p> + +<p>La programmation orientée objet peut être vue comme une façon de concevoir un ou des logiciel(s) grâce à un ensemble d'objets qui coopèrent plutôt que d'utiliser, avec une approche plus traditionnelle, un ensemble de fonctions ou encore une liste d'instructions à envoyer à un ordinateur. En programmation orientée objet, chaque objet est capable d'envoyer et de recevoir des messages provenant d'autres objets, de traiter des données. Chaque objet peut être compris comme une entité indépendante avec un rôle distinct.</p> + +<p>La programmation orientée objet a pour but de permettre une plus grande flexibilité et maintenabilité du code. Elle est populaire pour les projets logiciels de grande ampleur. Étant donné l'accent mis sur la modularité, le code orienté objet est censé être plus simple à développer, plus facile à reprendre, à analyser et permettre de répondre à des situations complexes en comparaison à d'autres méthodes de programmation moins modulaires.</p> + +<h2 id="Terminologie">Terminologie</h2> + +<dl> + <dt>{{Glossary("Namespace","Espace de noms")}}</dt> + <dd>Un conteneur qui permet aux développeurs d'empaqueter les différentes fonctionnalités d'un programme sous un même nom d'application.</dd> + <dt>{{Glossary("Class", "Classe")}}</dt> + <dd>Définit les caractéristiques de l'objet.</dd> + <dt>{{Glossary("Objet")}}</dt> + <dd>Une instance (un « exemplaire ») d'une classe.</dd> + <dt>{{Glossary("Property", "Propriété")}}</dt> + <dd>Une caractéristique d'un objet (sa couleur par exemple).</dd> + <dt>{{Glossary("Méthode")}}</dt> + <dd>Une capacité d'un objet (changer de couleur par exemple).</dd> + <dt>{{Glossary("Constructeur")}}</dt> + <dd>Une méthode appelée au moment de l'instantiation.</dd> + <dt>{{Glossary("Héritage")}}</dt> + <dd>Une classe peut hériter des caractéristiques et des fonctionnalités d'une autre classe.</dd> + <dt>{{Glossary("Encapsulation")}}</dt> + <dd>Une classe définit uniquement les caractéristiques de son objet, une méthode définit uniquement la façon dont elle s'exécute. On regroupe donc les données et les méthodes qui utilisent ces données.</dd> + <dt>{{Glossary("Abstraction")}}</dt> + <dd>La conjonction entre l'utilisation de l'héritage, de méthodes ou de propriétés d'un objet pour simuler un modèle de la réalité.</dd> + <dt>{{Glossary("Polymorphisme")}}</dt> + <dd>Poly signifie « plusieurs » et morphisme signifie « formes ». Cela signifie que différentes classes peuvent définir la même méthode ou la même propriété.</dd> +</dl> + +<p>Pour une description plus étendue, lire l'article {{interwiki("wikipedia","Programmation_orientée_objet","Programmation orientée objet")}} de Wikipédia.</p> + +<h2 id="Programmation_orientée_prototype">Programmation orientée prototype</h2> + +<p>La programmation orientée prototype est un style de programmation orientée objet qui n'utilise pas les classes. La réutilisation des propriétés d'un objet (appelée héritage pour les langages à classe) est effectuée via des objets qui seront des prototypes pour d'autres objets. Parmi les autres noms de ce modèle, on retrouve la programmation sans classe ou la programmation à base d'instances.</p> + +<p>L'exemple premier d'un langage utilisant les prototypes est le langage de programmation {{interwiki("wikipedia", "Self_(langage)", "Self")}}, développé par David Ungar et Randall Smith. Toutefois, ce modèle de programmation s'est popularisé à différents langages comme JavaScript, Cecil, NewtonScript, Io, MOO, REBOL, Kevo, Squeak (quand le framework Viewer est utilisé pour manipuler des composants Morphic), et d'autres encore.</p> + +<h2 id="La_programmation_orientée_objet_avec_JavaScript">La programmation orientée objet avec JavaScript</h2> + +<h3 id="Les_espaces_de_noms">Les espaces de noms</h3> + +<p>Un espace de noms est un conteneur qui permet de regrouper l'ensemble des fonctionnalités d'une application sous un un nom unique, spécifique à cette application. <strong>En JavaScript, un espace de noms est un objet comme les autres qui contient des méthodes et des propriétés.</strong></p> + +<div class="note"> +<p><strong>Note :</strong> il est important de bien faire la différence avec d'autres langages ou les espaces de noms et les objets sont des entités distinctes. En JavaScript, ce n'est pas le cas.</p> +</div> + +<p>Pourquoi créer un espace de noms en JavaScript ? La réponse est simple, on peut ainsi disposer d'un seul objet global qui contient l'ensemble des variables, méthodes et fonctions en tant que propriétés. L'utilisation d'un tel objet permet ainsi de réduire le risque de conflit (utilisation d'un même nom) au sein d'une application qui en utilise une autre.</p> + +<p>Par exemple : on peut créer un objet global MONAPPLICATION :</p> + +<pre class="brush: js">// espace de nom global +var MONAPPLICATION = MONAPPLICATION || {};</pre> + +<p>Dans l'exemple ci-dessus, on vérifie d'abord que MONAPPLICATION n'est pas déjà défini (dans ce fichier ou dans un autre). S'il est déjà défini, on l'utilise, sinon on crée un objet vide MONAPPLICATION qui recevra les différentes méthodes, fonctions et variables à encapsuler.</p> + +<p>Il est également possible de créer des espaces de noms à un niveau inférieur (une fois qu'on a bien défini le <em>namespace</em> global) :</p> + +<pre class="brush: js">// espace de noms "fils" +MONAPPLICATION.event = {};</pre> + +<p>L'exemple ci-dessous permet de créer un espace de noms et de lui ajouter des variables, des fonctions et des méthodes :</p> + +<pre class="brush: js">// On crée un conteneur MONAPPLICATION.méthodesCommunes pour regrouper certaines méthodes +MONAPPLICATION.méthodesCommunes = { + regExPourNom: "", // on définit une expression rationnelle pour un nom + regExPourTéléphone: "", // une autre pour un numéro de téléphone + validerNom: function(nom){ + // On valide le nom en utilisant + // la regexp par exemple + }, + + validerNumTéléphone: function(numTéléphone){ + // on valide le numéro de téléphone + } +} + +// On utilise un conteneur pour les événements +MONAPPLICATION.event = { + addListener: function(el, type, fn) { + // le corps de la méthode + }, + removeListener: function(el, type, fn) { + // le corps de la méthode + }, + getEvent: function(e) { + // le corps de la méthode + } + + // Il est possible d'ajouter des méthodes et des propriétés +} + +// Exemple de syntaxe pour utiliser la méthode addListener : +MONAPPLICATION.event.addListener("monÉlément", "type", callback);</pre> + +<h3 id="Objets_natifs_standard">Objets natifs standard</h3> + +<p>JavaScript dispose de plusieurs objets essentiels inclus dans le langage. On y trouve entre autres les objets <code>Math</code>, <code>Object</code>, <code>Array</code>, et <code>String</code>. L'exemple ci-après illustre comment utiliser l'objet <code>Math</code> pour obtenir un nombre aléatoire en utilisant la méthode <code>random()</code>.</p> + +<pre class="brush: js">console.log(Math.random()); +</pre> + +<div class="note"><strong>Note :</strong> Cet exemple, ainsi que les suivants, utilisent une fonction {{domxref("console.log()")}} définie globalement. La fonction <code>console.log </code>n'est pas, à proprement parler, une fonctionnalité de JavaScript en tant que telle mais est implémentée dans la plupart des navigateurs à des fins de débogage.</div> + +<p>Voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux">les objets globaux</a> pour une liste de ces objets essentiels.</p> + +<p>En JavaScript, chaque objet est une instance de l'objet <a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Object"><code>Object</code></a> et hérite donc des propriétés et des méthodes de ce dernier.</p> + +<h3 id="Objets_créés_sur_mesure">Objets créés sur mesure</h3> + +<h4 id="Le_constructeur">Le constructeur</h4> + +<p>JavaScript est un langage utilisant les prototypes, il ne dispose pas d'une instruction pour déclarer une classe (à la différence de C++ ou Java). Cela peut sembler déroutant pour les développeurs utilisant d'autres langages de classe. JavaScript utilise des fonctions comme constructeurs pour définir un objet. On définit les propriétés et méthodes d'un objet en définissant une fonction qui sera utilisée par la suite pour construire l'objet souhaité. Ici, on définit un constructeur <code>Personne</code>.</p> + +<pre class="brush: js">var Personne = function () { } +</pre> + +<div class="note"> +<p><strong>Note :</strong> Par convention, le nom d'un constructeur commence par une majuscule. Cela permet de différencier les fonctions classiques des constructeurs et de mieux les utiliser.</p> +</div> + +<h4 id="L'instance">L'instance</h4> + +<p>Pour créer une nouvelle instance, on utilise l'instruction <code>new <em>objet</em></code>, et on affecte le résultat de cette expression à une variable qu'on utilisera par la suite. Il est également possible d'utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create"><code>Object.create</code></a> afin de créer une instance non initialisée.</p> + +<p>Dans l'exemple qui suit, on utilise le constructeur <code>Personne</code> définit précédemment et on crée deux instances grâce à l'opérateur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_sp%C3%A9ciaux/L'op%C3%A9rateur_new"><code>new</code></a> (<code>personne1</code> et <code>personne2</code>).</p> + +<pre class="brush: js">var personne1 = new Personne(); +var personne2 = new Personne(); +</pre> + +<div class="note"><strong>Note:</strong> Voir aussi {{jsxref("Object.create()")}} pour une autre méthode d'instanciation.</div> + +<h4 id="Le_constructeur_(suite)">Le constructeur (suite)</h4> + +<p>Le constructeur est la méthode appelée au moment de l'instanciation (l'instant où l'exemplaire de l'objet est créé). En JavaScript, la déclaration vue précédemment suffit à définir un constructeur. Chaque action déclarée dans le constructeur est executée au moment de l'instanciation.</p> + +<p>Le constructeur est utilisé afin de définir les propriétés d'un objet et d'appeler les méthodes nécessaires pour préparer l'objet.</p> + +<p>Dans l'exemple ci-dessous, le constructeur de la classe <code>Personne</code> affiche un message dans la console lorsqu'un objet <code>Personne</code> est instancié.</p> + +<pre class="brush: js">function Personne() { + console.log('Nouvel objet Personne créé'); +} + +var personne1 = new Personne(); +// affiche "Nouvel objet Personne créé" dans la console +var personne2 = new Personne(); +// affiche "Nouvel objet Personne créé" dans la console +</pre> + +<h4 id="Les_propriétés_(ou_attributs)">Les propriétés (ou attributs)</h4> + +<p>Les propriétés sont des variables appartenant à un objet. Les propriétés d'un objet peuvent être définies au sein du prototype afin que tous les objets qui en héritent puissent disposer de cette propriété via la chaîne de prototypes.</p> + +<p>Dans le contexte d'un objet, l'accès à ses propriétés se fait grâce au mot-clé <code>this</code>, qui fait référence à l'objet courant. L'accès (en écriture ou lecture) à une propriété depuis un autre objet se fait grâce à la syntaxe <code>nomInstance.propriété</code>. Cette syntaxe est la même pour d'autres langages comme C++, Java, etc.</p> + +<p>Dans l'exemple qui suit, on crée la propriété <code>nom</code> pour le constructeur <code>Personne</code> et on définit sa valeur lors de l'instanciation :</p> + +<pre class="brush: js">function Personne(nom) { + this.nom = nom; + console.log('Nouvel objet Personne créé'); +} + +var personne1 = new Personne('Alice'); +var personne2 = new Personne('Bob'); + +//on affiche le nom de personne1 +console.log('personne1 est ' + personne1.nom); // personne1 est Alice +console.log('personne2 est ' + personne2.nom); // personne2 est Bob +</pre> + +<h4 id="Les_méthodes">Les méthodes</h4> + +<p>Les méthodes sont également des propriétés d'un objet : ce sont des fonctions plutôt que des objets. L'appel à une méthode se fait de la même façon que pour l'accès à une propriété, les parenthèses <code>()</code> en plus, éventuellement avec des arguments. Pour définir une méthode dont disposeront tous les objets qu'on souhaite définir, il faut l'assigner comme propriété de la propriété <code>prototype</code> de l'objet. Le nom auquel est assigné la fonction est le nom de la méthode.</p> + +<p>Dans l'exemple qui suit, on définit et utilise la méthode <code>direBonjour()</code> pour un objet <code>Personne</code>.</p> + +<pre class="brush: js">function Personne(nom) { + this.nom = nom; +} + +Personne.prototype.direBonjour = function() { + console.log("Bonjour, je suis " + this.nom); +}; + +var personne1 = new Personne('Alice'); +var personne2 = new Personne('Robert'); + +// on appelle la méthode. +personne1.direBonjour(); // Bonjour, je suis Alice +</pre> + +<p>En JavaScript, les méthodes sont des fonctions classiques simplement liées à un objet en tant que propriété. On peut donc appeler la méthode « en dehors de l'objet ». Par exemple :</p> + +<pre class="brush: js">function Personne(nom) { + this.nom = nom; +} + +Personne.prototype.afficherNom = function() { + console.log("Je suis "+this.nom); +}; + +var personne1 = new Personne('Gustave'); +var donnerUnNom = personne1.afficherNom; + +personne1.afficherNom(); // 'Je suis Gustave' +donnerUnNom(); // undefined +console.log(donnerUnNom === personne1.afficherNom); // true +console.log(donnerUnNom === Personne.prototype.afficherNom); // true +donnerUnNom.call(personne1); // 'Je suis Gustave' +</pre> + +<p>On voit ici plusieurs concepts. Tout d'abord, il n'existe pas de méthode propre à un objet car toutes les références à la méthode vont utiliser la fonction définie pour le prototype. Ensuite, JavaScript fait un lien entre le contexte de l'objet courant et la variable <strong>this</strong> quand une fonction est appelée en tant que propriété d'un objet. Ceci est équivalent à utiliser la fonction <code>call</code> :</p> + +<pre class="brush: js">donnerUnNom.call(personne1); // 'Gustave' +</pre> + +<div class="note"><strong>Note :</strong> Voir les pages <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/call">Function.call</a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function/apply">Function.apply</a> pour plus d'informations. Voir également la page sur l'opérateur <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">this</a> et les différents contextes.</div> + +<h4 id="L'héritage">L'héritage</h4> + +<p>L'héritage permet de créer un objet spécialisé qui découle d'un autre objet. (<em>JavaScript ne supporte que l'héritage unique : c'est-à-dire qu'un objet peut spécialiser un autre objet mais ne peut pas en spécialiser plusieurs à la fois</em>). L'objet spécialisé est appelé l'objet fils et l'objet générique appelé parent. Pour indiquer un lien d'héritage en JavaScript, on assigne une instance de l'objet parent à la propriété <code>prototype</code> de l'objet fils. Grâce aux navigateurs récents, il est également possible d'utiliser la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create#H.C3.A9ritage_avec_Object.create">Object.create</a> afin d'implémenter l'héritage.</p> + +<div class="note"> +<p><strong>Note :</strong> Il est également nécessaire de renseigner la propriété <code>prototype.constructor</code> avec le constructeur de la classe parente ! Voir la page de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/prototype">Object:prototype</a> pour plus d'informations.</p> +</div> + +<p>Dans les exemples qui suivent, on définit le constructeur <code>Étudiant</code> pour créer des objets bénéficiant des propriétés d'un objet <code>Personne</code>. Pour cet objet fils, on redéfinit la méthode <code>direBonjour()</code> et on ajoute la méthode <code>aurevoir()</code>.</p> + +<pre class="brush: js">// Le constructeur Personne +var Personne = function(nom) { + this.nom = nom; +}; + +Personne.prototype.marcher = function(){ + console.log("Je marche !"); +}; +Personne.prototype.direBonjour = function(){ + console.log("Bonjour, je suis "+this.nom); +}; + +// Le constructeur Étudiant +function Étudiant(nom, sujet) { + // On appelle le constructeur parent + // pour profiter des propriétés définies dans la fonction + Personne.call(this, nom); + this.sujet = sujet; +} + +// On déclare l'héritage pour bénéficier de la chaîne de prototypes +// Attention à ne pas utiliser "new Personne()". Ceci est incorrect +// on ne peut pas fournir l'argument "nom". C'est pourquoi on appelle +// Personne avant, dans le constructeur Étudiant. +Étudiant.prototype = Object.create(Personne.prototype); + +// on corrige le constructeur qui pointe sur celui de Personne +Étudiant.prototype.constructor = Étudiant; + +// on remplace la méthode direBonjour pour l'étudiant +Étudiant.prototype.direBonjour = function(){ + console.log("Bonjour, je suis "+ this.nom + ". J'étudie " + this.sujet + "."); +}; + +// on ajoute la méthode aurevoir +Étudiant.prototype.aurevoir = function(){ + console.log('Au revoir'); +}; + +var étudiant1 = new Étudiant("Jean", "la physique appliquée"); +étudiant1.direBonjour(); +étudiant1.marcher(); +étudiant1.aurevoir(); + +// on vérifie l'héritage +console.log(étudiant1 instanceof Personne); // true +console.log(étudiant1 instanceof Étudiant); // true +</pre> + +<p>Les anciens navigateurs peuvent ne pas disposer de la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create"><code>Object.create</code></a>. Pour résoudre ce problème, il est possible d'utiliser une prothèse d'émulation (<em>polyfill</em> ou <em>shim</em>) comme :</p> + +<pre class="brush: js">function createObject(proto) { + function ctor() { } + ctor.prototype = proto; + return new ctor(); +} + +// Exemple d'utilisation: +Étudiant.prototype = createObject(Personne.prototype);</pre> + +<div class="note"><strong>Note :</strong> Voir la page <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/create">Object.create</a> pour plus d'informations et pour une prothèse d'émulation pour les anciens navigateurs.</div> + +<p class="note">Il peut parfois être utile de vérifier la valeur de this utilisée au sein de la fonction pour appliquer les bons traitements. Par exemple, on pourra utiliser</p> + +<pre class="brush: js">var Person = function(nom) { + if (this instanceof Personne) { + this.nom = nom; + } else { + return new Personne(nom); + } +} +</pre> + +<h4 id="L'encapsulation">L'encapsulation</h4> + +<p>Dans l'exemple précédent, <code>Étudiant</code> n'a pas besoin de réimplémenter la méthode <code>marcher() </code>de <code>Personne</code> : il peut l'utiliser directement. L'encapsulation signifie qu'on a seulement besoin d'implémenter les changements (ex : <code>direBonjour</code>) par rapport à l'objet parent, le reste sera hérité naturellement et pourra être utilisé par l'objet fils. Chaque prototype regroupe les données et les méthodes dans une seule et même unitée.</p> + +<p>D'autres langages permettent de masquer des informations grâce des méthodes/propriétés privées et/ou protégées. Bien qu'il soit possible de simuler ce comportement en JavaScript, cet aspect n'est pas obligatoire en programmation orientée objet.</p> + +<h4 id="L'abstraction">L'abstraction</h4> + +<p>L'abstraction permet de modéliser le problème qu'on souhaite résoudre. On peut créer un modèle abstrait en utilisant l'héritage (autrement dit une spécialisation des objets) et la composition. Comme on l'a vu JavaScript permet de créer un héritage (simple) entre objets et la composition est obtenue car les propriétés d'un objet peuvent elles-mêmes être des objets.</p> + +<p>L'objet JavaScript <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Function"><code>Function</code></a> hérite de <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object">Object</a></code> (on a l'héritage) et la propriété <code>Function.prototype</code> est une instance d'<code>Object</code> (on a la composition)</p> + +<pre class="brush: js">var toto = function(){}; +console.log('toto est une Function : ' + (toto instanceof Function) ); +console.log('toto.prototype est un Object : ' + (toto.prototype instanceof Object) ); +</pre> + +<h4 id="Le_polymorphisme">Le polymorphisme</h4> + +<p>Le polymorphisme est rendu possible par l'héritage des méthodes. Les différents objets fils peuvent définir différentes méthodes avec le même nom. Ainsi si on itère sur une collection d'objets dont on sait que ces objets sont des instances du type parent, on pourra utiliser la méthode nommée qui utilisera la méthode définie pour l'objet fils.</p> + +<h2 id="Notes">Notes</h2> + +<p>Les techniques présentées ici ne sont qu'un fragment des techniques utilisables en JavaScript. JavaScript, grâce à sa nature prototypale, est très flexible et permet d'implémenter différentes façons de programmer avec des objets.</p> + +<p>Les techniques présentées ici ne tirent pas partie de l'implémentation des objets d'autres langages ni de bidouilles spécifiques au langage. Il existe d'autres techniques permettant de construire différentes architectures objet en JavaScript mais celles-ci dépassent le cadre de cet article.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Guide">Guide JavaScript</a> sur MDN</li> + <li>L'article Wikipédia : <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_objet">Programmation orientée objet</a></li> + <li>L'article Wikipédia : <a href="https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_prototype">Programmation orientée prototype</a></li> + <li>L'article Wikipédia : <a href="https://fr.wikipedia.org/wiki/Encapsulation_(programmation)">l'encapsulation</a></li> + <li><a href="https://davidwalsh.name/javascript-objects">Aperçu de JavaScript pour la POO</a>, une série d'articles en anglais écrite par Kyle Simpson</li> + <li>{{jsxref("Function.prototype.call()")}}</li> + <li>{{jsxref("Function.prototype.apply()")}}</li> + <li>{{jsxref("Object.create()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">Le mode strict</a></li> +</ul> diff --git a/files/fr/conflicting/learn_370bfb0fa23e42f4384f010341852c43/index.html b/files/fr/conflicting/learn_370bfb0fa23e42f4384f010341852c43/index.html new file mode 100644 index 0000000000..c60efcffac --- /dev/null +++ b/files/fr/conflicting/learn_370bfb0fa23e42f4384f010341852c43/index.html @@ -0,0 +1,168 @@ +--- +title: Comment construire un site web +slug: Apprendre/Tutoriels/Comment_construire_un_site_web +tags: + - Beginner + - Index + - NeedsContent +translation_of: Learn +translation_of_original: Learn/tutorial/How_to_build_a_web_site +--- +<p>Lorsqu'il s'agit d'apprendre la conception et le développement web, beaucoup souhaitent construire leur site web le plus rapidement possible. Pour faciliter votre progression, nous avons organisé et listé ici les connaissances minimales à acquérir.</p> + +<p>Nous vous suggérons de démarrer avec les articles de ce tableau, en allant de la gauche vers la droite pour chacune des lignes, ligne après ligne. Si vous rencontrez des difficultés à comprendre un terme, n'hésitez pas à utiliser notre <a href="/fr/docs/Glossaire">glossaire</a>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row" style="text-align: center;"> </th> + <th scope="col" style="text-align: center;">Savoir théorique</th> + <th scope="col" style="text-align: center;">Savoir technique</th> + <th scope="col" style="text-align: center;">Savoir faire</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" style="text-align: center;">1</th> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Commencez_votre_projet_web">Commencer son projet web</a></strong><br> + Cette article présente l'étape primordiale de n'importe quel projet : définir ce qu'on souhaite accomplir avec.</td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">2</th> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Fonctionnement_Internet">Le fonctionnement d'Internet</a></strong><br> + Dans cet article, nous expliquons ce qu'est l'Internet et comment il fonctionne.</td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">3</th> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/page_vs_site_vs_serveur_vs_moteur_recherche">Comprendre les différences entre une page web, un site web, un serveur web et un moteur de recherche</a></strong></td> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Qu_est-ce_qu_un_serveur_web">Qu'est-ce qu'un serveur web ?</a></strong><br> + Dans cet article, nous verrons ce que sont les serveurs web, comment ils fonctionnent et pourquoi ils sont importants.</td> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Quels_logiciels_sont_nécessaires_pour_construire_un_site_web">De quels logiciels ai-je besoin pour construire un site web ?</a></strong><br> + Dans cet article, nous listons les logiciels nécessaires pour éditer, mettre en ligne ou consulter un site web.</td> + </tr> + <tr> + <th scope="row" style="text-align: center;">4</th> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Le_fonctionnement_des_liens_sur_le_Web">Le fonctionnement des liens sur le Web</a></strong><br> + Dans cet article, nous verrons ce que sont les liens et en quoi ils sont importants pour la structure du Web.</td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">5</th> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Comprendre_les_URL">Comprendre les URL et leur structure</a></strong><br> + Cet article aborde les <em>Uniform Resource Locators</em> (URL) en expliquant leur rôle et leur structure.</td> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Comprendre_noms_de_domaine">Comprendre les noms de domaine</a></strong><br> + Dans cet article, nous discutons des noms de domaine : ce qu'ils sont, comment ils sont organisés et comment en avoir un.</td> + <td style="vertical-align: top;"> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">6</th> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Concevoir_page_web">Concevoir une page web</a></strong><br> + Lorsque vous concevez des pages pour votre site Internet, il est utile d'avoir en tête les modèles de mise en page les plus fréquemment utilisés.</td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Publier_sur_le_Web_combien_ça_coûte">Publier sur le Web : combien ça coûte ?</a></strong><br> + Se lancer sur le Web n'est pas aussi bon marché qu'il y paraît à première vue. Dans cet article, nous verrons les différentes dépenses et leur raison d'être.</td> + </tr> + <tr> + <th scope="row" style="text-align: center;">7</th> + <td style="vertical-align: top;"><a href="/en-US/docs/Learn/The_basics_of_web_design">Les bases de la conception web (TBD)</a></td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Choisir_installer_paramétrer_un_éditeur_de_texte">Choisir, installer et paramétrer un éditeur de texte</a></strong><br> + Dans cet article, nous présentons les éléments principaux à connaître pour installer un éditeur de texte utilisé pour du développement web.</td> + </tr> + <tr> + <th scope="row" style="text-align: center;">8</th> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Mettre_en_place_un_environnement_de_travail">Mettre en place un environnement de travail</a></strong><br> + Cet article indique comment mettre en place un environnement de travail et de test afin d'organiser vos pages web.</td> + </tr> + <tr> + <th scope="row" style="text-align: center;">9</th> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/HTML/Écrire_une_simple_page_HTML">Écrire une simple page HTML</a></strong><br> + Dans cet article, vous apprendrez à créer une page web simple grâce à HTML.</td> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Ouvrir_un_fichier_dans_un_navigateur_web">Ouvrir un fichier avec un navigateur web</a></strong><br> + Dans article, nous verrons comment ouvrir un fichier avec un navigateur web.</td> + </tr> + <tr> + <th scope="row" style="text-align: center;">10</th> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/HTML/Balises_HTML">Les balises HTML et leur rôle</a></strong><br> + Cet article aborde les bases de HTML : les balises et comment les utiliser.</td> + <td style="vertical-align: top;"><strong><a href="/fr/Apprendre/Transférer_des_fichiers_vers_un_serveur_web">Transférer des fichiers vers un serveur web</a></strong><br> + Cet article illustre comment publier votre site en ligne grâce à des outils FTP.</td> + </tr> + <tr> + <th scope="row" style="text-align: center;">11</th> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> </td> + <td style="vertical-align: top;"> + <p><strong><a href="/fr/Apprendre/Tester_le_bon_fonctionnement_de_votre_site_web">Tester le bon fonctionnement de votre site web</a></strong><br> + Dans cet article, nous présenterons les différentes étapes permettant de diagnostiquer les problèmes d'un site web ainsi que les mesures à prendre pour corriger certains de ces problèmes.</p> + </td> + </tr> + </tbody> +</table> + +<p>Voici les bases qu'il est nécessaire d'avoir pour construire son premier site web. Si vous souhaitez approfondir et aborder des notions plus avancées, afin de réaliser un site web professionel par exemple, vous pouvez poursuivre avec les articles du tableau qui suit :</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="row" style="text-align: center;"> </th> + <th scope="col" style="text-align: center;">Savoir théorique</th> + <th scope="col" style="text-align: center;">Savoir technique</th> + <th scope="col" style="text-align: center;">Savoir faire</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row" style="text-align: center;">12</th> + <td><strong><a href="/fr/Apprendre/Que_faut-il_pour_que_les_gens_voient_mon_site_web">Que faut-il pour que les gens puissent voir mon site web ?</a></strong></td> + <td> </td> + <td> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">13</th> + <td> </td> + <td><strong><a href="/fr/Apprendre/CSS/Utiliser_CSS_dans_une_page_web">Utiliser CSS dans une page web</a></strong><br> + Cet article explique comment appliquer des styles CSS à vos documents HTML.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">14</th> + <td><strong><a href="/fr/Apprendre/Accessibilité">Qu'est-ce que l'accessibilité ?</a></strong><br> + Cet article aborde les concepts de base qui forment l'accessibilité pour le Web.</td> + <td><strong><a href="/fr/Apprendre/CSS/Les_propriétés_CSS">Les propriétés CSS et comment s'en servir</a></strong><br> + CSS définit l'apparence d'une page web. Il utilise des règles prédéfinies à l'aide de sélecteurs et de propriétés pour appliquer différents styles aux éléments et groupes d'éléments HTML.</td> + <td> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">15</th> + <td><strong><a href="/fr/Apprendre/Concevoir_site_tous_types_utilisateurs">Concevoir un site pour tous les types d'utilisateur</a></strong><br> + Cet article aborde les concepts de bases pour vous aider à construire des sites web accessibles à tous.</td> + <td> + <p><strong><a href="/fr/Apprendre/CSS/formatage_texte_CSS">Mise en forme basique du texte avec CSS</a></strong><br> + Cet article explique comment mettre en forme le texte de documents HTML en utilisant les propriétés CSS les plus communes.</p> + </td> + <td> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">16</th> + <td> </td> + <td><strong><a href="https://developer.mozilla.org/fr/docs/Apprendre/HTML/Comment/Ajouter_des_images_%C3%A0_une_page_web">Utiliser des images</a></strong></td> + <td> </td> + </tr> + <tr> + <th scope="row" style="text-align: center;">17</th> + <td><a href="/en-US/docs/Learn/Common_pitfalls_to_avoid_in_web_design">Common pitfalls to avoid in Web design (TBD)</a></td> + <td><a href="/en-US/docs/Learn/Basics_of_UX_Design">Basics of User eXperience (UX) Design (TBD)</a></td> + <td><strong><a href="/fr/Apprendre/Concevoir_menu_de_navigation">Design of navigation menus</a></strong></td> + </tr> + </tbody> +</table> diff --git a/files/fr/conflicting/learn_6767a192c90d2c9c5179cf004fce2ee8/index.html b/files/fr/conflicting/learn_6767a192c90d2c9c5179cf004fce2ee8/index.html new file mode 100644 index 0000000000..407a95704e --- /dev/null +++ b/files/fr/conflicting/learn_6767a192c90d2c9c5179cf004fce2ee8/index.html @@ -0,0 +1,36 @@ +--- +title: Tutoriels +slug: Apprendre/Tutoriels +tags: + - Index + - TopicStub +translation_of: Learn +translation_of_original: Learn/tutorial +--- +<p>Connaître les technologies Web et leurs concepts est un premier pas important. Mais il arrrive un moment où la mise en pratique est nécessaire. Pour cela, nous avons dressé quelques « chemins » qui vous aideront à parcourir les technologies web et à mettre en œuvre ce que vous pouvez apprendre !</p> + +<div class="row topicpage-table"> +<div class="section" style="width: 568px;"> +<h2 id="Les_bases" style="line-height: 30px; font-size: 2.14285714285714rem;">Les bases</h2> + +<p>Ces séries d'articles sont essentielles pour débuter dans le développement web.</p> + +<dl> + <dt><a href="/fr/Learn/tutorial/How_to_build_a_web_site">Comment construire un site web</a></dt> + <dd>Ce tutoriel illustre chacune des étapes pour construire un site web de A à Z.</dd> + <dt><a href="/fr/docs/Learn/tutorial/Les_bases_de_la_sécurité_informatique">Les bases de la sécurité informatique</a></dt> + <dd>Ce tutoriel explique les principes de base en sécurité informatique et comment les appliquer, notamment en cryptographie.</dd> +</dl> +</div> + +<div class="section" style="width: 593px;"> +<h2 id="En_détails" style="line-height: 30px; font-size: 2.14285714285714rem;">En détails</h2> + +<p>Le tutoriel qui suit aborde des notions plus avancées, destinées aux développeurs web ayant une certaine expérience.</p> + +<dl> + <dt><a href="/fr/Apps/Quickstart/Build">Construire des applications web</a></dt> + <dd>Les applications web (ou <em>Web Apps</em>) sont des applications qui fonctionnent dans un navigateur web. Il y a quelques notions qui leur sont propres et qu'il faut connaître avant de commencer. Tout ce dont vous avez besoin est sur MDN !</dd> +</dl> +</div> +</div> diff --git a/files/fr/conflicting/mdn/contribute/index.html b/files/fr/conflicting/mdn/contribute/index.html new file mode 100644 index 0000000000..a4cd040a80 --- /dev/null +++ b/files/fr/conflicting/mdn/contribute/index.html @@ -0,0 +1,90 @@ +--- +title: Contribuer à MDN +slug: MDN_a_dix_ans/Contribuer_à_MDN +tags: + - MDN +translation_of: MDN_at_ten/Contributing_to_MDN +--- +<div class="column-container"> +<div class="column-8"> +<h2 id="Le_processus_de_contribution">Le processus de contribution</h2> + +<p>Contribuer à MDN est simple. Il y a deux façons pour commencer. Vous voyez une page que vous pouvez améliorer (en corrigeant une coquille, en ajoutant des informations ou en corrigeant des notions techniques) ? Il suffit de cliquer sur le bouton « Modifier » situé en haut de la page. Vous connaissez quelque chose sur le Web qui n'est pas encore traité dans MDN ? Il suffit de <a href="/fr/docs/Project%3AMDN/contribuer/Cr%C3%A9er_et_modifier_des_pages">créer une nouvelle page</a> et notre communauté de relecteurs et d'éditeurs s'assurera que votre page respecte <a href="/en-US/docs/MDN/Contribute/Content">la forme nécessaire</a> puis la placera au bon endroit dans le wiki. Pas de stress ! Peu importe si ce n'est pas parfait du premier coup, chacun peut améliorer le Web à sa façon !</p> +</div> + +<div class="column-4"> +<div class="promo10 promo10-globe"> +<div class="promo10-text"> +<h3 id="Rejoignez-nous_!">Rejoignez-nous !</h3> + +<p>Rejoignez-nous pour apprendre à tous comment développer grâce aux technologies web !</p> + +<p><a class="learnmore" href="/fr/docs/MDN/Débuter_sur_MDN">Contribuez dès aujourd'hui</a></p> +</div> +</div> +</div> +</div> + +<div class="column-container"> +<div class="column-8"> +<h2 id="Quelques_exemples_de_contributeurs">Quelques exemples de contributeurs</h2> + +<p>MDN est composé d'une vaste communauté de contributeurs. Nous ne pouvons malheureusement pas présenter tous les contributeurs (cela prendrait quelques années) mais nous pouvons en présenter quelques-uns dont les contributions sont conséquentes et/ou qui seront probablement présents sur le salon <a href="https://chat.mozilla.org/#/room/#mdn:mozilla.org">MDN Web Docs</a> pour vous passer un coup de main, si besoin, lors de vos contributions</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Nickolay_Ponomarev_Contributeur_volontaire">Nickolay Ponomarev<br> + <small>Contributeur volontaire</small></h3> + +<p><a href="/profiles/Nickolay">Nickolay</a> <span class="author-p-1669">fut l'un des premiers contributeurs. Il participa aux travaux initiaux autour de DevEdge. Encore aujourd'hui, il contribue à de nombreuses sections, des standards du Web aux produits Mozilla</span>.</p> + +<h3 id="Andrew_Overholt_Responsable_technique">Andrew Overholt<br> + <small>Responsable technique</small></h3> + +<p><a href="/profiles/Overholt">Andrew</a><span class="author-g-l0xhvihafq5iyoyt"> est à la tête des développeurs de l'équipe Web API. Une partie de son travail consiste à encourager les développeurs du DOM et des autres API afin qu'ils s'assurent que la documentation est en bonne forme, que ce soit en fournissant des informations à l'équipe d'écrivains techniques, en relisant la documentation ou en aidant à la création d'exemple de codes. Cette collaboration est très chère à l'équipe de MDN !</span></p> + +<h3 id="Jérémie_Patonnier_Chef_de_projet">Jérémie Patonnier<br> + <small>Chef de projet</small></h3> + +<p><a href="/profiles/Jeremie">Jérémie</a> a commencé à contribuer à MDN en 2011 en documentant les propriétés SVG, documentation dont il avait besoin pour son propre travail. Jérémie est devenu le chef d'orchestre de la communauté française de MDN. Il organise chaque mois des « MercrediDocs » dans les bureaux de Mozilla Paris. Actuellement, il travaille à créer la <a href="/fr/Apprendre">Learning area</a> et à améliorer et normaliser les données de compatibilité web contenues dans MDN.</p> + +<h3 id="Julien_Sphinx_Contributeur_volontaire"><span id="Julien_Sphinx_Volunteer">Julien (Sphinx)</span><br> + <small>Contributeur volontaire</small></h3> + +<p><a href="/en-US/profiles/SphinxKnight">Julien</a> contribua pour une grande partie à la traduction de la section JavaScript de MDN en français. De nombreux contributeurs l'ont aidé dans cette tâche. Julien a passé de nombreuses soirées et week-ends à traduire des articles sur JavaScript pour que cette partie soit à jour et maintenue.</p> +</div> + +<div class="column-half"> +<h3 id="Jeff_Walden_Développeur_logiciel_sur_le_moteur_JavaScript">Jeff Walden<br> + <small>Développeur logiciel sur le moteur JavaScript</small></h3> + +<p><a href="/profiles/Waldo">Jeff Walden</a> <span class="author-p-1669">fait désormais partie de l'équipe SpiderMonkey. Il a contribué à MDN depuis ses débuts, sur de nombreux sujets comme</span><span class="author-g-jkiyvakmsbole3bz122z"> <a href="/fr/docs/XPCOM">XPCOM</a>, la compilation et les tests, <a href="/fr/docs/Web/JavaScript">JavaScript</a>, <a href="/fr/docs/Web/CSS">CSS</a>, et d'autres encore</span>.</p> + +<h3 id="Priyanka_Nag_Contributeur_volontaire">Priyanka Nag<br> + <small>Contributeur volontaire</small></h3> + +<p><a href="/profiles/Priyanka13">Priyanka Nag</a> a rejoint MDN en 2012 et est active dans la communauté MDN depuis le Sommet Mozilla en 2013 où elle a rencontré Luke Crouch et David Walsh, développeurs pour MDN. Cette rencontre fut décisive pour motiver ses premières contributions. Priyanka aime à faire connaître MDN, organiser des événements MDN tout en éditant ce wiki. Elle travaille actuellement comme écrivain technique à Red Hat et revendique fièrement que son intérêt pour l'écriture technique est né grâce à MDN et que ses contributions l'ont ainsi aidée dans sa vie professionnelle.</p> + +<h3 id="Saurabh_Nair_Contributeur_volontaire">Saurabh Nair<br> + <small>Contributeur volontaire</small></h3> + +<p><a href="/profiles/jsx">Saurabh</a> contribue à MDN depuis 2011. Il est devenu plus actif cette dernière année et fait partie de l'équipe de garde contre les spams. Il aide ainsi à supprimer les pages nocives, à réparer les pages vandalisées et à bannir les malfaiteurs dès qu'ils apparaissent. Saurabh vivant en Inde, il peut ainsi prendre le relai quand les équipes européennes et américaines dorment.</p> + +<h3 id="Sebastian_Zartner_Contributeur_volontaire">Sebastian Zartner<br> + <small>Contributeur volontaire</small></h3> + +<p><a href="/en-US/profiles/sebastianz">Sebastian</a> commença à contribuer à MDN en 2007 en traduisant des articles en allemand. Rapidement, il se mit à contribuer aux articles anglais. Plus récemment, il a beaucoup contribué au contenu et à l'organisation de la référence CSS, en créer une API JSON pour les pages CSS et une macro pour la syntaxe CSS.</p> +</div> +</div> +</div> + +<div class="column-4"> +<div class="quote"> +<blockquote>Les docs de Mozilla sur JavaScript sont un mélange d'or et d'arcs-en-ciel. Beaucoup d'arcs-en-ciel. Elles sont magiques.</blockquote> +<a href="/profiles/Priyanka13"><span class="attribution">— </span></a><a href="https://twitter.com/nathandim">Nathan Dimitriades</a></div> + +<div class="quote"> +<blockquote>J'adore MDN car je ne peux même pas me souvenir de la structure des API que j'ai conçues.</blockquote> +<span class="attribution">— <a href="https://twitter.com/jaffathecake/status/620987733524262912">Jake Archibald</a></span></div> +</div> +</div> diff --git a/files/fr/conflicting/mdn/tools/index.html b/files/fr/conflicting/mdn/tools/index.html new file mode 100644 index 0000000000..bf1a518498 --- /dev/null +++ b/files/fr/conflicting/mdn/tools/index.html @@ -0,0 +1,14 @@ +--- +title: Guide de l'utilisateur MDN +slug: MDN/User_guide +tags: + - Documentation + - Démarrer + - MDN + - Projet MDC +translation_of: MDN/Tools +translation_of_original: MDN/User_guide +--- +<div>{{MDNSidebar}}</div><p>Le site Mozilla Developper Network est un système avancé pour trouver, lire et contribuer à la documentation ainsi qu'au code pour les développeurs Web (mais aussi pour les développeurs Firefox et Firefox OS). Le guide de l'utilisateur MDS regorge d'articles détaillant comment utiliser le site MDS pour trouver la documentation dont vous avez besoin et si vous le désirez, comment aider à rendre les outils encore meilleurs et complets.</p> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/fr/conflicting/mozilla/add-ons/webextensions/api/menus/overridecontext/index.html b/files/fr/conflicting/mozilla/add-ons/webextensions/api/menus/overridecontext/index.html new file mode 100644 index 0000000000..8d8463f069 --- /dev/null +++ b/files/fr/conflicting/mozilla/add-ons/webextensions/api/menus/overridecontext/index.html @@ -0,0 +1,62 @@ +--- +title: menus.overrideContext() +slug: Mozilla/Add-ons/WebExtensions/API/menus/menus.overrideContext() +tags: + - API + - Add-ons + - Extensions + - Méthode + - WebExtensions + - contextMenus +translation_of: Mozilla/Add-ons/WebExtensions/API/menus/menus.overrideContext() +--- +<div>{{AddonSidebar()}}</div> + +<p>Cette API permet aux extensions de masquer tous les éléments de menu par défaut de Firefox afin de fournir une interface utilisateur de menu contextuel personnalisée. Ce menu contextuel peut comprendre plusieurs éléments de menu de niveau supérieur de l'extension et éventuellement inclure des éléments de menu contextuel d'onglet ou de signet provenant d'autres extensions. Cela doit être appelé lors d'un gestionnaire d'événements DOM du menu <code>contextmenu</code>, et s'applique uniquement au menu qui s'ouvre après cet événement.</p> + +<p>Cette API ne peut être appelée que si l'addon dispose de la <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">permission</a> <code>"menus.overrideContext"</code>.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox brush:js">browser.menus.overrideContext( + contextOptions // object +) +</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>contextOptions</code></dt> + <dd><code>object</code>.Propriétés qui définissent le contexte du menu contextuel.</dd> + <dd> + <dl class="reference-values"> + <dt><code>bookmarkId</code> {{optional_inline}}</dt> + <dd><code>string</code> Requis lorsque le contexte est un <code>signet</code>. Nécessite la <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">permission </a> <code>"bookmark"</code> .</dd> + <dt><code>context</code> {{optional_inline}}</dt> + <dd><code>string</code>. pour passer outre, pour autoriser les éléments de menu d'autres extensions dans le menu. Actuellement, seuls <code>"bookmark"</code> et <code>"tab"</code> sont supportés. <code>showDefaults</code> ne peut pas être utilisé avec cette option.</dd> + <dt><code>showDefaults</code> {{optional_inline}}</dt> + <dd><code>boolean</code>. S'il faut également inclure des éléments de menu par défaut dans le menu.</dd> + <dt><code>tabId</code> {{optional_inline}}</dt> + <dd><code>string</code> Requis lorsque le contexte est <code>"tab"</code>. Nécessite la <a href="/fr/Add-ons/WebExtensions/manifest.json/permissions">permission</a> <code>"tabs"</code> .</dd> + </dl> + </dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Ouvrez le menu contextuel de l'onglet de votre interface utilisateur personnalisée, dans ce cas :</p> + +<pre class="brush:js">document.addEventListener('contextmenu', event => { + const foo = event.target.closest('.foo'); + if (foo) { + // When the context menu is opened on an element with the foo class + // set the context to "opening a tab context menu". + browser.menus.overrideContext({ + context: 'tab', + tabId: parseInt(foo.dataset.tabId) + }); + } +}, { capture: true }); +</pre> + +<p>Voir <a href="https://blog.mozilla.org/addons/2018/11/08/extensions-in-firefox-64/#cm">ce billet de blog</a> pour plus de détails.</p> diff --git a/files/fr/conflicting/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.html b/files/fr/conflicting/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.html new file mode 100644 index 0000000000..0a71ce921b --- /dev/null +++ b/files/fr/conflicting/mozilla/add-ons/webextensions/api/userscripts/registereduserscript/unregister/index.html @@ -0,0 +1,49 @@ +--- +title: unregister +slug: >- + Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/RegisteredUserScript.unregister() +tags: + - API + - Extensions + - Reference + - RegisteredUserScript + - Type + - unregister + - userScripts +translation_of: >- + Mozilla/Add-ons/WebExtensions/API/userScripts/RegisteredUserScript/RegisteredUserScript.unregister() +--- +<p>{{AddonSidebar}}</p> + +<p>La méhode <code>unregister()</code> de l'interface {{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}désenregistre le script utilisateur représenté par cette instance d'interface et précédemment enregistré via {{WebExtAPIRef("userScripts.register","userScripts.register()")}}.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> Les scripts utilisateur sont automatiquement désenregistrés lorsque la page d'extension correspondante (à partir de laquelle les scripts utilisateur ont été enregistrés) est déchargée, vous devez donc enregistrer un script utilisateur depuis une page d'extension qui persiste au moins aussi longtemps que vous voulez que les scripts utilisateur restent enregistrés..</p> +</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: js">const registeredUserScript = await browser.userScripts.register( + userScriptOptions // object +); +… +await registeredUserScript.unregister()</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<p>Aucun.</p> + +<h3 id="Valeur_retournée">Valeur retournée</h3> + +<p>Une {{JSxRef("Promise")}} qui sera résolu une fois le script utilisateur désenregistré. La promesse ne rapporte rien.</p> + +<h2 id="Compatibilité_du_navigateur">Compatibilité du navigateur</h2> + +<p>{{Compat("webextensions.api.userScripts.RegisteredUserScript.unregister")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{WebExtAPIRef("userScripts.register","userScripts.register()")}}</li> + <li>{{WebExtAPIRef("userScripts.RegisteredUserScript","RegisteredUserScript")}}</li> +</ul> diff --git a/files/fr/conflicting/tools/debugger/how_to/set_watch_expressions/index.html b/files/fr/conflicting/tools/debugger/how_to/set_watch_expressions/index.html new file mode 100644 index 0000000000..ff534ba3ae --- /dev/null +++ b/files/fr/conflicting/tools/debugger/how_to/set_watch_expressions/index.html @@ -0,0 +1,49 @@ +--- +title: 'Examiner, modifier, et espionner des variables' +slug: 'Outils/Débogueur/Comment/Examiner,_modifier,_et_espionner_des_variables' +translation_of: Tools/Debugger/How_to/Set_Watch_Expressions +translation_of_original: 'Tools/Debugger/How_to/Examine,_modify,_and_watch_variables' +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette fonctionnalité n'est pas encore supportée par le nouveau Débogueur. Si vous avez besoin de l'utiliser, il faut changer la préférence "devtools.debugger.new-debugger-frontend" dans about:config (page interne du navigateur)</p> + +<p>La documentation de l'ancienne version du Débogueur est disponible sur la page <a href="/fr/docs/Tools/Debugger_%28before_Firefox_52%29">Débogueur (avant Firefox 52)</a>.</p> +</div> + +<h2 id="Examiner_des_variables">Examiner des variables</h2> + +<p>Quand le code s'est arrêté sur un point d'arrêt, il est possible d'examiner ses variables grâce au <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables</a> du débogueur :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13216/debugger-variables-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 903px;"></p> + +<p>Les variables sont listées et triées selon leur portée : Dans la fonction ci-dessus, les variables intégrées <code>arguments</code> et <code>this</code> ainsi que les variables locales comme <code>user</code> et <code>greeting</code> seront visibles. Dans la portée globale, les variables globales qui ont été définies (<code>greetme</code>) et les variables globales intégrées (<code>localStorage</code>, <code>console</code>…) seront visibles.</p> + +<p>Chaque objet peut être étendu pour voir son contenu en utilisant l'icône en forme de triangle.</p> + +<p>Survoler le nom d'une variable affiche une infobulle qui fournit des informations complémentaires sur la variable. Se référer à <a href="/fr/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a> pour des détails sur la signification de ces termes.</p> + +<p>Pour voir les propriétés des objets, il est possible d'utiliser le <a href="#" title="#script filter">filtre de script</a> avec le préfixe spécial "*" ou en utilisant la boite de filtrage des variables si vous l'avez activée dans les <a href="/fr/docs/Tools/Debugger/Settings" title="#debugger-settings">options du débogueur</a>.</p> + +<p>{{EmbedYouTube("dxCvnixpM_Q")}}</p> + +<p>Si une variable existe dans la source, mais a été enlevé par le moteur JavaScript à la suite d'une optimisation. Alors cette variable est présente dans le panneau, mais sa valeur est égale à <code>(optimized away)</code>, et n'est pas modifiable. Dans la capture d’écran ci-dessous, la variable <code>upvar</code> a été optimisée :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10169/optimized-out.png" style="display: block; height: 235px; margin-left: auto; margin-right: auto; width: 332px;"></p> + +<h2 id="Modifier_des_variables">Modifier des variables</h2> + +<p>Quand le code s'est arrêté à un point d'arrêt, il est possible de modifier les variables dans le <a href="/fr/docs/Tools/Debugger/UI_Tour#Variables_pane" title="#variables-pane">panneau des variables </a> du débogueur. Il suffit de cliquer sur la valeur actuelle d'une variable pour pouvoir la réécrire :</p> + +<p>{{EmbedYouTube("FKG-jkvSpq8")}}</p> + +<h2 id="Espionner_une_expression">Espionner une expression</h2> + +<p>Les expressions espionnes sont des expressions qui sont évaluées à chaque fois que l'exécution s'arrête. Il est alors possible d'examiner le résultat de ces expressions. C'est utile dans la mesure où cela permet d'inspecter des éléments invariants dans votre code que vous savez être présents, mais qui ne sont pas nécessairement prêts pour une inspection.</p> + +<p>Pour ajouter une expression espionne, il faut cliquer sur la boite "ajouter une expression espionne" puis entrer l'expression JavaScript que vous souhaitez surveiller en parcourant votre code.</p> + +<p>Il ne reste plus qu'à faire tourner votre code. L'expression espionne ne fait rien tant que le code n'est pas arrêté à un point d'arrêt. Quand le code est arrêté, les expressions espionnes sont activées et leur valeur apparaitra alors :</p> + +<p>{{EmbedYouTube("CwGU-5wKRw0")}}</p> + +<p>À chaque changement de la valeur de l'expression espionne, sa boite sera brièvement affichée en surbrillance jaune. Il est possible de supprimer une expression espionne en cliquant sur l'icône en forme de croix à côté. Bien sûr, il est également possible d'avoir plus d'une seule expression espionne à la fois.</p> diff --git a/files/fr/conflicting/tools/memory/basic_operations/index.html b/files/fr/conflicting/tools/memory/basic_operations/index.html new file mode 100644 index 0000000000..2524339f8d --- /dev/null +++ b/files/fr/conflicting/tools/memory/basic_operations/index.html @@ -0,0 +1,15 @@ +--- +title: Comparer deux captures de la heap +slug: Outils/Memory/Comparing_heap_snapshots +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Comparing_heap_snapshots +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>Cette fonctionnalité est une des nouveautés de Firefox 45.</p> +</div> + +<p>À partir de Firefox 45, il est possible d'afficher les différences entre deux captures. Le diff montre où la mémoire a été allouée et où elle a été libérée entre les deux captures.</p> + +<p>Pour créer un diff, il faut cliquer sur le bouton "Comparer les captures" à droite de l'icône en forme d'appareil photo puis sélectionner deux captures à comparer (la première capture fait office de base). Cet outil affiche les différences entre les captures. Il est alors possible d'analyser ces différences avec les mêmes vues que celles d'une capture simple.</p> + +<p>{{EmbedYouTube("rbDHVxCzqhU")}}</p> diff --git a/files/fr/conflicting/tools/memory/basic_operations_9264f1c8b3be17d004821ca45ca04d3a/index.html b/files/fr/conflicting/tools/memory/basic_operations_9264f1c8b3be17d004821ca45ca04d3a/index.html new file mode 100644 index 0000000000..2c851f8ce6 --- /dev/null +++ b/files/fr/conflicting/tools/memory/basic_operations_9264f1c8b3be17d004821ca45ca04d3a/index.html @@ -0,0 +1,9 @@ +--- +title: Ouvrir l'outil Mémoire +slug: Outils/Memory/Open_the_Memory_tool +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Open_the_Memory_tool +--- +<div>{{ToolsSidebar}}</div><p>Actuellement, l'outil Mémoire n'est pas activé par défaut, pour l'activer, il faut ouvrir les options des outils des développements (F12 puis cliquer sur l'icône en forme d'engrenage en haut à droite) et cocher l'option "Mémoire" dans la catégorie "Outils de développement par défaut" :</p> + +<p>{{EmbedYouTube("SbpiMD4QjjY")}}</p> diff --git a/files/fr/conflicting/tools/memory/basic_operations_f2c86b478396e7a233344f64c4d4f1da/index.html b/files/fr/conflicting/tools/memory/basic_operations_f2c86b478396e7a233344f64c4d4f1da/index.html new file mode 100644 index 0000000000..ac0d2d630f --- /dev/null +++ b/files/fr/conflicting/tools/memory/basic_operations_f2c86b478396e7a233344f64c4d4f1da/index.html @@ -0,0 +1,9 @@ +--- +title: Capturer un instantané +slug: Outils/Memory/Take_a_heap_snapshot +translation_of: Tools/Memory/Basic_operations +translation_of_original: Tools/Memory/Take_a_heap_snapshot +--- +<div>{{ToolsSidebar}}</div><p>Pour prendre une capture de la heap, il faut cliquer sur le bouton "Capturer un instantané" ou cliquer sur l'icône en forme d'appareil photo en haut à gauche :</p> + +<p>{{EmbedYouTube("XbHyxrjRDis")}}</p> diff --git a/files/fr/conflicting/tools/page_inspector/ui_tour/index.html b/files/fr/conflicting/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..26a4192b00 --- /dev/null +++ b/files/fr/conflicting/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,12 @@ +--- +title: Panneau HTML +slug: Outils/Inspecteur/Panneau_HTML +tags: + - HTML + - Tools + - Web Development + - 'Web Development:Tools' +translation_of: Tools/Page_Inspector/UI_Tour +translation_of_original: Tools/Page_Inspector/HTML_panel +--- +<div>{{ToolsSidebar}}</div><p>Le contenu de cette page à été transféré dans la section "Panneau HTML" de la <a href="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane" title="/fr/docs/Tools/Page_Inspector/UI_Tour#HTML_pane"> visite guidée de l'Inspecteur</a>.</p> diff --git a/files/fr/conflicting/tools/performance/waterfall/index.html b/files/fr/conflicting/tools/performance/waterfall/index.html new file mode 100644 index 0000000000..215ce97ad5 --- /dev/null +++ b/files/fr/conflicting/tools/performance/waterfall/index.html @@ -0,0 +1,25 @@ +--- +title: Frise chronologique +slug: Outils/Frise_chronologique +tags: + - Gecko + - Guide + - Tools +translation_of: Tools/Performance/Waterfall +translation_of_original: Tools/Timeline +--- +<div>{{ToolsSidebar}}</div><p>La frise chronologique suit à la trace les opérations réalisées par Gecko, le moteur du navigateur.Il faut aller dans les <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">the devtools options des outils de developemment</a> pour activer la frise chronologique.</p> + +<p>Pour le moment, la frise chronologique couvre les éléments suivants :</p> + +<ul> + <li><em>reflows</em> (aussi appelés <em>Layout</em>) : Le moteur a calculé la géométrie d'un ou plusieurs nœuds.</li> + <li><em>restyle </em>: le style a été recalculé.</li> + <li><em>paint </em>: une partie de la page a été redessinée.</li> + <li><em>console </em>: appels à la fonction <code>console.time(label)</code> et/ou <code>console.timeEnd(label)</code>;</li> + <li><a href="/fr/docs/Web/Events"><em>Éènements DOM</em></a> : les évènements tel que "click", "input", "keydown" etc...</li> +</ul> + +<p>Les opérations reflows, restyle et paint ont lieu dans le "thread" principal et peut retarder ou être retardé à cause des opérations lentes (reflows, exécution de script, beaucoup de restyle, etc...).</p> + +<p><img alt="Timeline Screenshot" src="https://mdn.mozillademos.org/files/8883/timeline.png" style="height: 728px; width: 879px;"></p> diff --git a/files/fr/conflicting/tools/responsive_design_mode/index.html b/files/fr/conflicting/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..086a531ea3 --- /dev/null +++ b/files/fr/conflicting/tools/responsive_design_mode/index.html @@ -0,0 +1,77 @@ +--- +title: Vue Adaptative (avant Firefox 52) +slug: Outils/Responsive_Design_Mode_(before_Firefox_52) +translation_of: Tools/Responsive_Design_Mode +translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52) +--- +<div>{{ToolsSidebar}}</div><div class="note"> +<p>Cette page décrit la Vue Adaptative telle qu'elle apparait avant Firefox 52. Il est également possible d'avoir cette version de l'outil si le <a href="https://support.mozilla.org/t5/Manage-preferences-and-add-ons/Enable-multiprocess-support/ta-p/1371917">support multiprocessus (e10s)</a> est désactivé. Pour l'article décrivant la version ultérieure à Firefox 52, voir <a href="/fr/docs/Tools/Responsive_Design_Mode">Vue Adaptative</a>.</p> +</div> + +<p>Un<a href="/fr/docs/Développement_Web/Design_web_Responsive"> <em>responsive design</em></a> est un design qui s'adapte à différentes tailles d'écrans, afin que la présentation soit optimale sur tous les types d'appareils utilisés, tels que les smartphones ou les tablettes. Le mode « vue adaptative » permet de voir facilement le rendu de votre design sur des écrans de tailles différentes.</p> + +<p>La capture d’écran ci-dessous montre une page de la version mobile de Wikipédia, vue dans une zone de contenu de 320×480.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12738/responsive-design-mode.png" style="height: 788px; width: 735px;"></p> + +<p>La vue adaptative est utile, car elle permet de changer rapidement la taille de cette zone de contenu.</p> + +<p>Bien sûr, vous pourriez simplement redimensionner la fenêtre du navigateur. Mais cela peut être gênant, car tous les onglets sont alors redimensionnés. Et cela peut rendre l'interface du navigateur bien plus dure à utiliser.</p> + +<p>Quand la vue adaptative est activée, vous pouvez continuer à naviguer normalement dans la zone de contenu redimensionnée.</p> + +<h2 id="Activation_et_désactivation">Activation et désactivation</h2> + +<p>Il existe trois façons d’activer la vue adaptative :</p> + +<ul> + <li>Dans le <strong>menu de Firefox</strong>, sélectionner le sous-menu <strong>Développement</strong> puis <strong>Vue adaptative</strong> (ou le menu Outils si la barre de menus est affichée ou si vous êtes sur OS X).</li> + <li>Appuyer sur le bouton <strong>Vue adaptative</strong> de la <a href="/fr/docs/Tools/Tools_Toolbox#Toolbar">barre d’outils de développement</a>.</li> + <li>Sur le clavier, appuyer sur <strong>Ctrl+Maj+M</strong> pour Windows ou Linux, ou Cmd+Option+M pour OS X.</li> +</ul> + +<p>Pour désactiver la vue adaptative :</p> + +<ul> + <li>Sélectionner à nouveau <strong>Vue adaptative</strong> dans le <strong>menu de Firefox</strong>.</li> + <li>Cliquer sur le bouton de fermeture en haut à gauche de la fenêtre.</li> + <li>Sur le clavier, appuyer à nouveau sur <strong>Ctrl+Maj+M</strong>, ou sur <strong>Échap.</strong></li> +</ul> + +<h2 id="Redimensionnement">Redimensionnement</h2> + +<p>Vous pouvez redimensionner la zone de contenu de deux façons différentes :</p> + +<ul> + <li>en utilisant le contrôle "<a href="/fr/docs/Outils/Vue_adaptative#select-size">Sélectionner la taille</a></li> + <li>en cliquant-glissant les contrôles situés à droite et en bas, ou celui dans le coin en bas à droite.</li> +</ul> + +<p>Si vous redimensionnez en utilisant le cliquer-glisser, vous pouvez maintenir la touche CTRL (cmd sous Mac) enfoncée pour ralentir la vitesse de redimensionnement afin d'être plus précis.</p> + +<p> </p> + +<div style="overflow: hidden;"> +<h2 id="Contrôles_de_la_vue_adaptative">Contrôles de la vue adaptative</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12736/responsive-design-mode-controls.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>En haut de la page sur laquelle la vue adaptative est active se trouvent les six contrôles suivants :</p> + +<dl> + <dt>Fermer</dt> + <dd>Fermer la vue adaptative et retourner à la navigation normale.</dd> + <dt>Sélectionner la taille</dt> + <dd>Sélectionner une résolution parmi des combinaisons de largeur x hauteur; ou définir sa propre résolution</dd> + <dt>Orientation</dt> + <dd>Alterner entre la vue portrait et paysage.</dd> + <dt><strong>Simuler les événements tactiles</strong></dt> + <dd>Activer/Désactiver la simulation des événements tactiles : quand cette option est active, les mouvements de la souris sont convertis en <a href="fr/docs/Web/Guide/API/DOM/Events/Touch_events">événements tactiles.</a></dd> + <dt><strong>Capture d'écran</strong></dt> + <dd>Prendre une capture d'écran de la zone de contenu. Les captures d'écrans seront sauvées dans le dossier de téléchargements de Firefox.</dd> + <dt>Définir un User Agent personnalisé</dt> + <dd><em>Nouveau dans Firefox 47</em>. Entrer une chaine de caractère User Agent et sortir de la boite. Alors la boite deviendra bleue pour signifier que la chaine est utilisée. Firefox inclura la chaine donnée dans les requêtes effectuées uniquement depuis cet onglet. C'est utile pour les sites qui affichent différents contenus en se basant sur le <a href="/fr/docs/Browser_detection_using_the_user_agent">UA sniffing</a>. Supprimer la chaine remet le comportement par défaut.</dd> +</dl> +</div> + +<p> </p> diff --git a/files/fr/conflicting/web/accessibility/index.html b/files/fr/conflicting/web/accessibility/index.html new file mode 100644 index 0000000000..d87406d368 --- /dev/null +++ b/files/fr/conflicting/web/accessibility/index.html @@ -0,0 +1,66 @@ +--- +title: Développement Web +slug: Accessibilité/Développement_Web +tags: + - ARIA + - Accessibilité + - Développement Web + - XUL + - À relire +translation_of: Web/Accessibility +translation_of_original: Web/Accessibility/Web_Development +--- +<p> </p> +<table> + <tbody> + <tr> + <td style="vertical-align: top;"> + <h2 id="Accessibilité_Web">Accessibilité Web</h2> + <dl> + <dt> + <a href="/fr/docs/Accessibilité/ARIA" title="http://developer.mozilla.org/fr/docs/Accessibilité/ARIA">ARIA pour les développeurs</a></dt> + <dd style=""> + ARIA permet l’accessibilité des contenus HTML dynamiques, comma par exemple les zones Live et les composants.</dd> + <dt> + <a href="/fr/docs/Contrôles_DHTML_personnalisés_navigables_au_clavier" title="Contrôles DHTML + personnalisés navigables au clavier">Contrôles DHTML personnalisés navigables au clavier</a></dt> + <dd> + Jusqu’à présent, les développeurs Web qui désiraient rendre accessible au clavier leurs <div> et leurs <span> stylisées basées sur des composants dynamiques ne disposaient pas de techniques appropriées. La navigabilité au clavier est le requis minimum de l’accessibilité auquel chaque développeur Web devraient prêter attention.</dd> + </dl> + <h2 id="Accessibilité_XUL">Accessibilité XUL</h2> + <dl> + <dt> + <a href="/en/Building_accessible_custom_components_in_XUL" hreflang="en" title="en/Building_accessible_custom_components_in_XUL">Construire des composants personnalisés accessibles en XUL</a></dt> + <dd> + Comment utiliser les techniques d’accessibilité DHTML pour améliorer l’accessibilité de vos composants personnalisés XUL.</dd> + <dt> + <a href="/fr/docs/Recommandations_d'accessibilité_pour_XUL" title="/fr/docs/Recommandations_d'accessibilité_pour_XUL">Recommandations d’accessibilité pour XUL</a></dt> + <dd> + Lorsqu’il est codé selon ces recommandations, XUL est capable de générer des interfaces utilisateurs accessibles. Codeurs, vérificateurs, graphistes et ingénieurs Qualité devraient se familiariser avec ces recommandations.</dd> + </dl> + </td> + <td style="vertical-align: top;"> + <h2 id="Ressources_externes">Ressources externes</h2> + <dl> + <dt> + <a class="external" href="http://diveintoaccessibility.info/" hreflang="en">Dive into Accessibility</a> (Plonger dans l’accessibilité)</dt> + <dd> + Ce livre répond à deux questions. La première de ces questions est « Pourquoi devrais-je rendre mes sites plus accessibles ? » La second question est « Comment rendre mes sites plus accessibles ?»</dd> + <dt> + <a class="external" href="https://www.eyrolles.com/Informatique/Livre/accessibilite-web-9782212128895" hreflang="fr">Accessibilité web</a></dt> + <dd> + Normes et bonnes pratiques pour des sites plus accessibles</dd> + <dt> + <a class="external" href="http://www-306.ibm.com/able/guidelines/web/accessweb.html" hreflang="en">Création d’une page Web accessible</a></dt> + <dd> + Une liste utile des bonnes pratiques d’accessibilité Web, par IBM.</dd> + <dt> + </dt> + <dd> + </dd> + </dl> + </td> + </tr> + </tbody> +</table> +<p> </p> diff --git a/files/fr/conflicting/web/api/canvas_api/tutorial/index.html b/files/fr/conflicting/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..0b0a96257e --- /dev/null +++ b/files/fr/conflicting/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,176 @@ +--- +title: Dessiner avec Canvas +slug: Web/Guide/Graphics/Dessiner_avec_canvas +tags: + - Canvas + - HTML +translation_of: Web/API/Canvas_API/Tutorial +translation_of_original: Web/API/Canvas_API/Drawing_graphics_with_canvas +--- +<p> </p> +<h3 id="Introduction" name="Introduction">Introduction</h3> +<p>Depuis <a href="/fr/Firefox_1.5_pour_les_d%C3%A9veloppeurs" title="fr/Firefox_1.5_pour_les_développeurs">Firefox 1.5</a>, Firefox comprend un nouvel élément HTML servant à dessiner programmatiquement. L'élément {{HTMLElement("canvas")}} est basé sur la <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">spécification canvas du WHATWG</a>, elle-même basée sur la balise <code><canvas></code> d'Apple implémentée dans Safari. Celui-ci peut être utilisé pour afficher des graphes, des élements d'interface, et d'autres éléments graphiques personnalisés sur le client.</p> +<p>{{HTMLElement("canvas")}} crée une surface de dessin de taille fixe, ou <em>canevas</em>, exposant un ou plusieurs <em>contextes de rendu</em>. Nous nous concentrerons sur le contexte de rendu 2D (c'est d'ailleurs le seul contexte de rendu actuellement défini). Dans le futur, d'autres contextes peuvent fournir différents types de rendu. Par exemple, il est probable qu'un contexte 3D basé sur OpenGL ES sera ajouté à la spécification <code><canvas></code>.</p> +<h3 id="Le_contexte_de_rendu_2D" name="Le_contexte_de_rendu_2D">Le contexte de rendu 2D</h3> +<h4 id="Un_exemple_simple" name="Un_exemple_simple">Un exemple simple</h4> +<p>Pour commencer, voici un exemple simple qui dessine deux rectangles ayant une intersection, l'un d'entre-eux possédant une transparence alpha :</p> +<p><img align="right" alt="Exemple 1." class="internal" src="/@api/deki/files/1337/=Canvas_ex1.png"></p> +<pre class="eval"><html> + <head> + <script type="application/x-javascript"> +function draw() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "rgb(200,0,0)"; + ctx.fillRect (10, 10, 55, 50); + + ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; + ctx.fillRect (30, 30, 55, 50); +} + </script> + </head> + <body onload="draw()"> + <canvas id="canvas" width="300" height="300"></canvas> + </body> +</html> +</pre> +<p>La fonction <code>draw</code> récupère l'élément <code>canvas</code>, et ensuite son contexte <code>2d</code>. L'objet <code>ctx</code> peut ensuite être utilisé pour dessiner réellement vers le canevas. L'exemple remplit simplement les deux rectangles, en positionnant <code>fillStyle</code> à deux couleurs différentes à l'aide des spécifications de couleur CSS et d'un appel à <code>fillRect</code>. Le second appel à <code>fillStyle</code> utilise <code>rgba()</code> pour spécifier une valeur alpha parmi les informations de couleur.</p> +<p>Les appels à <code>fillRect</code>, <code>strokeRect</code> et <code>clearRect</code> affichent un rectangle plein, surligné ou vide. Pour afficher des formes plus complexes, on utilise des chemins.</p> +<h4 id="Utilisation_de_chemins" name="Utilisation_de_chemins">Utilisation de chemins</h4> +<p>La fonction <code>beginPath</code> commence un nouveau chemin, et <code>moveTo</code>, <code>lineTo</code>, <code>arcTo</code>, <code>arc</code> et des méthodes similaires sont utilisées pour ajouter des segments au chemin. Le chemin peut être fermé à l'aide de <code>closePath</code>. Une fois que le chemin est créé, vous pouvez utiliser <code>fill</code> ou <code>stroke</code> pour afficher celui-ci sur le canevas.</p> +<p><img align="right" alt="Exemple 2." class="internal" src="/@api/deki/files/1338/=Canvas_ex2.png"></p> +<pre class="eval"><html> + <head> + <script type="application/x-javascript"> +function draw() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + ctx.fillStyle = "red"; + + ctx.beginPath(); + ctx.moveTo(30, 30); + ctx.lineTo(150, 150); + ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); + ctx.lineTo(30, 30); + ctx.fill(); +} + </script> + </head> + <body onload="draw()"> + <canvas id="canvas" width="300" height="300"></canvas> + </body> +</html> +</pre> +<p>L'appel à <code>fill()</code> ou <code>stroke()</code> provoque l'utilisation du chemin. Pour être rempli ou dessiné à nouveau, le chemin devra être recréé.</p> +<h4 id=".C3.89tat_graphique" name=".C3.89tat_graphique">État graphique</h4> +<p>Les attributs du contexte comme <code>fillStyle</code>, <code>strokeStyle</code>, <code>lineWidth</code> et <code>lineJoin</code> font partie de l'<em>état graphique</em> courant. Le contexte fournit deux méthodes, <code>save()</code> et <code>restore()</code>, qui peuvent être utilisées pour déplacer l'état courant vers et depuis la pile d'états.</p> +<h4 id="Un_exemple_plus_compliqu.C3.A9" name="Un_exemple_plus_compliqu.C3.A9">Un exemple plus compliqué</h4> +<p>Voici un exemple un petit peu plus compliqué, qui utilise des chemins, des états et introduit également la matrice de transformation courante. Les méthodes du contexte <code>translate()</code>, <code>scale()</code> et <code>rotate()</code> transforment toutes la matrice courante. Tous les points affichés sont au préalable transformés par cette matrice.</p> +<p><img align="right" alt="Exemple 3." class="internal" src="/@api/deki/files/1339/=Canvas_ex3.png"></p> +<pre> <html> + <head> + <script type="application/x-javascript"> + function dessineNoeudPap(ctx, fillStyle) { + + ctx.fillStyle = "rgba(200,200,200,0.3)"; + ctx.fillRect(-30, -30, 60, 60); + + ctx.fillStyle = fillStyle; + ctx.globalAlpha = 1.0; + ctx.beginPath(); + ctx.moveTo(25, 25); + ctx.lineTo(-25, -25); + ctx.lineTo(25, -25); + ctx.lineTo(-25, 25); + ctx.closePath(); + ctx.fill(); + } + + function point(ctx) { + ctx.save(); + ctx.fillStyle = "black"; + ctx.fillRect(-2, -2, 4, 4); + ctx.restore(); + } + + function dessine() { + var canvas = document.getElementById("canvas"); + var ctx = canvas.getContext("2d"); + + // notez que toutes les autres translations sont relatives à + // celle-ci + ctx.translate(45, 45); + + ctx.save(); + //ctx.translate(0, 0); // non nécessaire + dessineNoeudPap(ctx, "red"); + point(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 0); + ctx.rotate(45 * Math.PI / 180); + dessineNoeudPap(ctx, "green"); + point(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(0, 85); + ctx.rotate(135 * Math.PI / 180); + dessineNoeudPap(ctx, "blue"); + point(ctx); + ctx.restore(); + + ctx.save(); + ctx.translate(85, 85); + ctx.rotate(90 * Math.PI / 180); + dessineNoeudPap(ctx, "yellow"); + point(ctx); + ctx.restore(); + } + </script> + </head> + <body onload="dessine()"> + <canvas id="canvas" width="300" height="300"></canvas> + </body> + </html> +</pre> +<p>Ceci définit deux méthodes <code>dessineNoeudPap</code> et <code>point</code>, qui sont appelées 4 fois. Avant chaque appel, <code>translate()</code> et <code>rotate()</code> sont utilisées pour définir la matrice de transformation courante, qui à son tour positionne le point et le nœud papillon. <code>point</code> affiche un petit carré noir centré sur <code>(0, 0)</code>. Ce point est déplacé par la matrice de transformation. <code>dessineNoeudPap</code> affiche un chemin simple en forme de nœud papillon en utilisant le style de remplissage fourni en paramètre.</p> +<p>Comme les opérations de matrices sont cumulatives, <code>save()</code> et <code>restore()</code> sont utilisées autour de chaque jeu d'appels afin de restaurer l'état initial du canevas. Une chose à surveiller est que la rotation se passe toujours autour de l'origine courante ; donc une séquence <code>translate() rotate() translate()</code> donnera des résultats différents d'une série d'appels <code>translate() translate() rotate()</code>.</p> +<h3 id="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple" name="Compatibilit.C3.A9_avec_le_.3Ccanvas.3E_d.27Apple">Compatibilité avec le <canvas> d'Apple</h3> +<p>Pour la plus grande partie, le <code><canvas></code> de Mozilla est compatible avec celui d'Apple et d'autres implémentations. Il convient cependant d'être averti de quelques problèmes, décrits ci-dessous.</p> +<h4 id="Balise_.3C.2Fcanvas.3E_requise" name="Balise_.3C.2Fcanvas.3E_requise">Balise <code></canvas></code> requise</h4> +<p>Dans l'implémentation d'Apple Safari, <code><canvas></code> est un élément fortement semblable à l'élément <code><img></code> ; il ne doit pas forcément avoir de balise de fermeture. Cependant, pour que <code><canvas></code> puisse être utilisé à grande échelle sur le Web, il est important de pouvoir fournir facilement du contenu alternatif. C'est pourquoi l'implémentation de Mozilla a une balise de fin <em>requise</em>.</p> +<p>Si aucun contenu alternatif n'est nécessaire, un simple <code><canvas id="foo" ...></canvas></code> sera entièrement compatible avec Safari et Mozilla -- Safari ignorera simplement la balise de fermeture.</p> +<p>Si un contenu alternatif est désiré, certaines astuces CSS doivent être utilisées pour masquer le contenu alternatif à Safari (qui doit seulement afficher le canevas), et masquer ces mêmes astuces à Internet Explorer (qui doit afficher le contenu alternatif). <strong>À faire : les commandes CSS exactes doivent être fournies par hixie.</strong></p> +<h3 id="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires" name="Fonctionnalit.C3.A9s_suppl.C3.A9mentaires">Fonctionnalités supplémentaires</h3> +<h4 id="Affichage_de_contenu_Web_dans_un_canevas" name="Affichage_de_contenu_Web_dans_un_canevas">Affichage de contenu Web dans un canevas</h4> +<div class="note"> + Cette fonctionnalité est uniquement disponible pour le code exécuté avec des privilèges Chrome. Son utilisation n'est pas permise dans des pages HTML normales.</div> +<p>L'élément <code>canvas</code> de Mozilla a été étendu avec la méthode <code>drawWindow</code>. Celle-ci dessine une capture du contenu d'un élément DOM <code>window</code> dans le canevas. Par exemple,</p> +<pre class="eval">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(0,0,0)"); +</pre> +<p>affichera le contenu de la fenêtre courante dans le rectangle (0,0,100,200) défini en pixels relatifs au coin en haut à gauche de la fenêtre d'affichage, sur un fond noir, dans le canevas. En spécifiant "rgba(0,0,0,0)" comme couleur, le contenu sera dessiné avec un fond transparent (ce qui sera plus lent).</p> +<p>Avec cette méthode, il est possible de remplir un IFRAME caché avec du contenu arbitraire (par exemple, du texte HTML stylé avec CSS, ou du SVG) et de le dessiner dans un canevas. Celui-ci sera redimensionné, tourné, etc. suivant la transformation courante.</p> +<p>L'extension <a class="external" href="http://ted.mielczarek.org/code/mozilla/tabpreview/">tab preview</a> de Ted Mielczarek utilise cette technique dans le chrome pour fournir des miniatures de pages Web, et sa source est disponible pour référence.</p> +<h3 id="Voir_aussi" name="Voir_aussi">Voir aussi</h3> +<ul> + <li><a href="/fr/HTML/Canvas" title="fr/HTML/Canvas">Page du sujet canvas</a></li> + <li><a href="/fr/Tutoriel_canvas" title="fr/Tutoriel_canvas">Tutoriel canvas</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">Spécification du WHATWG</a></li> + <li><a class="external" href="http://developer.apple.com/documentation/AppleApplications/Reference/SafariJSRef/Classes/Canvas.html">La documentation d'Apple sur Canvas</a></li> + <li><a class="external" href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Affichage de miniatures de pages Web</a></li> + <li>Quelques <a href="/Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr" title="Special:Tags?tag=Exemples_d'utilisation_de_canvas&language=fr">exemples</a> : + <ul> + <li><a class="external" href="http://www.tapper-ware.net/canvas3d/">Rendu 3D du format OBJ</a></li> + <li><a href="/fr/Un_raycaster_basique" title="fr/Un_raycaster_basique">Un raycaster basique</a></li> + <li><a class="external" href="http://awordlike.com/">The Lightweight Visual Thesaurus</a></li> + <li><a class="external" href="http://www.abrahamjoffe.com.au/ben/canvascape/">Exemple impressionnant d'utilisation de canvas</a></li> + <li><a class="external" href="http://caimansys.com/painter/">Canvas Painter</a></li> + </ul> + </li> + <li><a href="/Special:Tags?tag=HTML:Canvas&language=fr" title="Special:Tags?tag=HTML:Canvas&language=fr">Et plus…</a></li> +</ul> +<p>{{ languages( { "en": "en/Drawing_Graphics_with_Canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas" } ) }}</p> diff --git a/files/fr/conflicting/web/api/document/createevent/index.html b/files/fr/conflicting/web/api/document/createevent/index.html new file mode 100644 index 0000000000..5cfbb7f05f --- /dev/null +++ b/files/fr/conflicting/web/api/document/createevent/index.html @@ -0,0 +1,41 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +tags: + - API + - DOM + - Evènement + - Méthodes +translation_of: Web/API/Document/createEvent +translation_of_original: Web/API/Event/createEvent +--- +<p>{{APIRef("DOM")}}</p> + +<p>Crée un nouvel évènement, qui doit alors être initialisé en appelant sa méthode <code>initEvent()</code> .</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre><code>document.createEvent(type) </code></pre> + +<dl> + <dt><code>type</code></dt> + <dd>Une chaîne de caractère indiquant le type de l'évènement à créer.</dd> +</dl> + +<p>Cette méthode renvoie un nouvel objet DOM {{ domxref("Event") }} du type spécifié, qui doit être initialisé avant utilisation.</p> + +<h2 id="Exemple">Exemple</h2> + +<pre>var newEvent = document.createEvent("UIEvents");</pre> + +<h2 id="Spécification">Spécification</h2> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> +</ul> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Event.createEvent")}}</p> diff --git a/files/fr/conflicting/web/api/document_object_model/index.html b/files/fr/conflicting/web/api/document_object_model/index.html new file mode 100644 index 0000000000..518da7e3d8 --- /dev/null +++ b/files/fr/conflicting/web/api/document_object_model/index.html @@ -0,0 +1,16 @@ +--- +title: À propos du Document Object Model +slug: À_propos_du_Document_Object_Model +tags: + - DOM +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM/About_the_Document_Object_Model +--- +<h3 id="Présentation_du_DOM">Présentation du DOM</h3> +<p>Le <a href="/fr/docs/DOM">Document Object Model</a>, ou modèle objet de document, est une API pour les documents <a href="/fr/docs/Web/HTML">HTML</a> et <a href="/fr/docs/XML">XML</a>. Le DOM fournit une représentation structurelle du document, permettant de modifier son contenu et sa présentation visuelle. Fondamentalement, il relie les pages Web aux scripts et langages de programmation.</p> +<p>Toutes les propriétés, méthodes et évènements utilisables par le développeur Web pour manipuler et créer des pages sont organisés au sein d'<a href="/fr/docs/R%c3%a9f%c3%a9rence_du_DOM_Gecko">objets</a> (c'est-à-dire l'objet document qui représente le document lui-même, l'objet table qui représente un élément de tableau HTML, et ainsi de suite). Ces objets sont accessibles via des langages de scripts dans la plupart des navigateurs récents.</p> +<p>Le DOM est le plus souvent utilisé en conjonction avec <a href="/fr/docs/JavaScript">JavaScript</a>. C'est-à-dire que le code est écrit en JavaScript, mais qu'il utilise le DOM pour accéder à la page Web et ses éléments. Cependant, le DOM a été conçu pour être indépendant de tout langage de programmation particulier, rendant la représentation structurelle du document disponible à l'aide d'une seule API cohérente. Bien que ce site soit concentré sur JavaScript, des implémentations du DOM peuvent être conçues pour <a class="external" href="http://www.w3.org/DOM/Bindings">n'importe quel langage</a>.</p> +<p>Le <a class="external" href="http://www.w3.org/">World Wide Web Consortium</a> établit un <a class="external" href="http://www.w3.org/DOM/">standard pour le DOM</a>, appelé W3C DOM. Il doit permettre, maintenant que les navigateurs les plus importants l'implémentent correctement, de réaliser de puissantes applications multinavigateurs.</p> +<h3 id="L.27importance_du_support_du_DOM_dans_Mozilla" name="L.27importance_du_support_du_DOM_dans_Mozilla">L'importance du support du DOM dans Mozilla</h3> +<p>« Dynamic HTML » (<a href="/fr/docs/DHTML">DHTML</a>) ou HTML dynamique est un terme utilisé par certains pour décrire la combinaison de HTML, de feuilles de style et de script permettant à des documents d'être animés. Le groupe de travail DOM du W3C travaille dur pour s'assurer que des solutions interopérables et ne dépendant pas du langage utilisé soient acceptées par tous (voir aussi la <a class="external" href="http://www.w3.org/DOM/faq.html">FAQ du W3C</a>). Étant donné que Mozilla revendique le titre de « plateforme d'applications Web », le support du DOM est l'une des fonctionnalités les plus demandées et est nécessaire si Mozilla désire être une alternative viable à d'autres navigateurs.</p> +<p>Plus important même est le fait que l'interface utilisateur de Mozilla (ainsi que de Firefox et Thunderbird) est construite à l'aide de XUL, un langage d'interface utilisateur basé sur XML. Par conséquent, Mozilla utilise le DOM pour <a href="/fr/docs/Modification_dynamique_d'interfaces_utilisateur_en_XUL">manipuler sa propre interface utilisateur</a>.</p> diff --git a/files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html b/files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html new file mode 100644 index 0000000000..77c272f5b2 --- /dev/null +++ b/files/fr/conflicting/web/api/document_object_model_03f6e13c52ad7c539d9b4c33c51ac4a3/index.html @@ -0,0 +1,54 @@ +--- +title: Préface +slug: Web/API/Document_Object_Model/Préface +tags: + - Référence_du_DOM_Gecko +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/API/Document_Object_Model/Preface +--- +<p>{{ ApiRef() }}</p> +<h3 id=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence" name=".C3.80_propos_de_cette_r.C3.A9f.C3.A9rence">À propos de cette référence</h3> +<p>Cette section décrit le guide lui-même : ceux à qui il est destiné, la manière dont sont présentées les informations, et d'utiliser les exemples de la référence dans vos propres développements avec DOM.</p> +<p>Notez que ce document est en cours de développement, et n'est pas actuellement une liste exhaustive de toutes les méthodes et propriétés DOM implémentées par Gecko. Chaque section individuelle du document (par exemple la <a href="fr/DOM/document">référence de DOM document</a>) est cependant complète pour les objets décrits. Lorsque des informations de référence pour les nombreux membres de cette énorme API deviennent disponibles, elles sont intégrées dans ce document.</p> +<h3 id=".C3.80_qui_est_destin.C3.A9_ce_guide" name=".C3.80_qui_est_destin.C3.A9_ce_guide">À qui est destiné ce guide</h3> +<p>Le lecteur de la <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko">Référence du DOM Gecko</a> est un développeur Web ou utilisateur confirmé qui a une idée de la façon dont les pages Web sont construites. Cette référence évite de présumer des connaissances préalables du lecteur en ce qui concerne le DOM, <a href="fr/XML">XML</a>, les serveurs et standards du Web, et même en ce qui concerne <a href="fr/JavaScript">JavaScript</a>, le langage dans lequel le DOM est rendu accessible. Cependant, il suppose que vous soyez familiers avec <a href="fr/HTML">HTML</a>, avec son balisage, avec la structure basique des pages Web, avec les navigateurs, et avec les feuilles de style.</p> +<p>Le contenu introductif présenté ici, avec ses nombreux exemples et ses explications détaillées, s'avèrera utile tant pour les développeurs débutants que pour les développeurs expérimentés dans le domaine du Web. Il n'est pas réservé aux « débutants » et l'on peut le considérer comme un manuel de référence évolutif de l'API.</p> +<h3 id="Pr.C3.A9sentation_de_Gecko" name="Pr.C3.A9sentation_de_Gecko">Présentation de Gecko</h3> +<p>Mozilla, Firefox, Netscape 6+, et les autres navigateurs basés sur Mozilla bénéficient de la même implémentation du DOM. En effet, ils utilisent tous la même technologie de base. <span class="comment">naturally, it applies only to products based on the same version of Gecko, but it's tricky to explain</span></p> +<p>Gecko, le composant logiciel de ces navigateurs qui gère l'analyse du HTML, la mise en page, le modèle objet de document, et même le rendu de toute l'interface de l'application est un moteur rapide et respectant les standards. Il implémente les standards DOM du W3C et un modèle objet de navigateur similaire au DOM, mais non standardisé (par exemple <a href="fr/DOM/window"><code>window</code></a> etc.) dans le contexte des pages Web et de l'interface applicative (ou + <i> + chrome</i> + ) du navigateur.</p> +<p>Bien que l'interface applicative et le contenu affichés par le navigateur diffèrent en de nombreux points, le DOM les expose uniformément sous la forme d'une hiérarchie de nœuds.</p> +<h3 id="Syntaxe_de_l.27API" name="Syntaxe_de_l.27API">Syntaxe de l'API</h3> +<p>Chaque description dans la référence de l'API comprend la syntaxe, les paramètres entrants et sortants (lorsque le type de retour est donné), un exemple, éventuellement quelques remarques supplémentaires, et un lien vers la spécification appropriée.</p> +<p>Typiquement, les propriétés en lecture seule ont une seule ligne de syntaxe, puisqu'on peut uniquement accéder à propriétés et non les modifier. Par exemple, la syntaxe de la propriété en lecture seule <code>availHeight</code> de l'objet <code>screen</code> est présentée de la manière suivante :</p> +<pre class="eval"><i>screenObj</i> = window.screen.availHeight; +</pre> +<p>Cela signifie qu'il est seulement possible d'utiliser la propriété dans le membre de droite d'une opération. Dans le cas des propriétés modifiables, il est possible d'assigner une valeur à la propriété, et la syntaxe est présentée de la manière suivante :</p> +<pre class="eval"><i>chaine</i> = window.status; +window.status =<i>chaine</i>; +</pre> +<p>En général, l'objet dont le membre est décrit est donné dans la description de syntaxe avec un type simple, comme <code>element</code> pour tous les éléments, <code>document</code> pour l'objet de document racine, <code>table</code> pour un objet de tableau, etc. Consultez <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Types_de_donn.C3.A9es_importants">Types de données importants</a> pour plus d'informations à propos des types de données.</p> +<h3 id="Utilisation_des_exemples" name="Utilisation_des_exemples">Utilisation des exemples</h3> +<p>Beaucoup des exemples dans cette référence sont des fichiers complets que vous pouvez exécuter en les copiant et collant vers un nouveau fichier, puis en les ouvrant dans votre navigateur. D'autres sont des petits bouts de code. Vous pouvez les exécuter en les plaçant dans des fonctions callback de JavaScript. Par exemple, la propriété <a href="fr/DOM/window.document">window.document</a> peut être testée au sein d'une fonction comme celle-ci, laquelle est appelée par le bouton assorti :</p> +<pre><html> + +<script> +function testWinDoc() { + + doc= window.document; + + alert(doc.title); + +} +</script> + +<button onclick="testWinDoc();">test de la propriété document</button> + +</html> +</pre> +<p>Des pages et fonctions similaires peuvent être créés pour tous les membres qui ne sont pas déjà décrits d'une façon prête à être utilisée. Consultez la section <a href="fr/R%c3%a9f%c3%a9rence_du_DOM_Gecko/Introduction#Test_de_l.27API_DOM">Test de l'API DOM</a> de l'introduction pour un canevas de test que vous pourrez utiliser pour tester plusieurs API à la fois.</p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/Gecko_DOM_Reference/Preface", "es": "es/Referencia_DOM_de_Gecko/Prefacio", "ja": "ja/Gecko_DOM_Reference/Preface", "ko": "ko/Gecko_DOM_Reference/Preface", "pl": "pl/Dokumentacja_Gecko_DOM/Przedmowa", "zh-cn": "cn/Gecko_DOM_\u53c2\u8003/Preface" } ) }}</p> diff --git a/files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html b/files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html new file mode 100644 index 0000000000..ad672dee28 --- /dev/null +++ b/files/fr/conflicting/web/api/document_object_model_656f0e51418b39c498011268be9b3a10/index.html @@ -0,0 +1,30 @@ +--- +title: Guides DOM pour développeurs +slug: Web/Guide/DOM +tags: + - API + - DOM + - Guide + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: Web/Guide/API/DOM +--- +<p>{{draft}}</p> + +<p>Le <a href="/docs/DOM">Document Object Model</a> est une API pour les documents <a href="/en-US/docs/HTML">HTML</a> et <a href="/en-US/docs/XML">XML</a>. Il fournit une représentation structurelle du document, permettant au développeur de modifier son contenu et sa présentation visuelle. Essentiellement, il connecte des pages Web à des scripts ou des langages de programmation.</p> + +<p>Toutes les propriétés, méthodes, et événements disponible pour le développeur web pour manipuler et créer des pages Web sont organisés en <a href="/en-US/docs/Gecko_DOM_Reference">objects</a> (par exemple, l'objet de document qui représente le document lui-même, l'objet de table qui représente un élément de tableau HTML, etc.). Ces objets sont accessibles via les langages de script dans les navigateurs Web les plus récents.</p> + +<p>Le DOM est le plus souvent utilisé en conjonction avec <a href="/en-US/docs/JavaScript">JavaScript</a>. Cependant, le DOM a été conçu pour être indépendant de tout langage de programmation particulier, rendant la représentation structurelle du document disponible à partir d'une API unique et cohérente. <span class="tlid-translation translation" lang="fr"><span title="">Bien que nous nous concentrions sur JavaScript tout au long de ce site, les implémentations du DOM peuvent être construites pour</span></span> <a href="http://www.w3.org/DOM/Bindings">n'importe quel langage</a>.</p> + +<p>Le <a href="http://www.w3.org/">World Wide Web Consortium</a> établit une <a href="http://www.w3.org/DOM/">norme pour le DOM</a>, appelée W3C DOM. Il devrait, maintenant que les navigateurs les plus importants l'implémentent correctement, activer de puissantes applications multi-navigateurs.</p> + +<h2 id="Why_is_the_DOM_support_in_Mozilla_important.3F" name="Why_is_the_DOM_support_in_Mozilla_important.3F">Pourquoi le DOM est-il important?</h2> + +<p>"HTML dynamique" (<a href="/en-US/docs/DHTML">DHTML</a>) est un terme utilisé par certains fournisseurs pour écrire la combinaison de HTML, de feuilles de style et de scripts permettant d'animer les documents. Le groupe de travail DOM du W3C travaille d'arrache-pied pour s'assurer que des solutions interopérables et indépendantes du langage sont convenues (voir également la <a href="http://www.w3.org/DOM/faq.html">FAQ du W3C</a>). Comme Mozilla revendique le titre de "Web Application Platform", la prise en charge du DOM est l'une des fonctionnalités les plus demandées, et nécessaire si Mozilla veut être une alternative viable aux autres navigateurs.</p> + +<p>Encore plus important est le fait que l'interface utilisateur de Mozilla (également Firefox et Thunderbird) est construite en utilisant <a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a>, en utilisant le DOM pour <a href="/en-US/docs/Dynamically_modifying_XUL-based_user_interface">manipuler sa propre interface utilisateur</a>.</p> + +<h2 id="En_savoir_plus_sur_le_DOM">En savoir plus sur le DOM</h2> + +<p>{{LandingPageListSubpages}}</p> diff --git a/files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html b/files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html new file mode 100644 index 0000000000..3d07259319 --- /dev/null +++ b/files/fr/conflicting/web/api/formdata/using_formdata_objects/index.html @@ -0,0 +1,141 @@ +--- +title: Utiliser les objets FormData +slug: Web/Guide/Using_FormData_Objects +translation_of: Web/API/FormData/Using_FormData_Objects +translation_of_original: Web/Guide/Using_FormData_Objects +--- +<p>L'objet <a href="/en/DOM/XMLHttpRequest/FormData" title="en/DOM/XMLHttpRequest/FormData"><code>FormData</code></a> vous permet de créer un ensemble de paires clef-valeur pour un envoi via <code>XMLHttpRequest</code>. Cet objet est destiné avant tout à l'envoi de données de formulaire, mais il peut être utilisé indépendamment des formulaires afin de transmettre des données associées à une clef. Les données transmises sont dans le même format qu'utiliserait la méthode <code>submit()</code> pour envoyer des données si le type d'encodage du formulaire correspondait à "multipart/form-data".</p> + +<h2 id="Créer_un_objet_FormData_de_zéro">Créer un objet <code>FormData</code> de zéro</h2> + +<p>Vous pouvez créer un objet <code>FormData</code> en l'instanciant puis en lui ajoutant des champs au moyen de la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>append()</code></a>, comme ci-dessous :</p> + +<pre class="brush: js">var formData = new FormData(); + +formData.append("username", "Groucho"); +formData.append("accountnum", 123456); // le nombre 123456 est immédiatement converti en la chaîne "123456" + +// Choix de l'utilisateur à partir d'un input HTML de type file... +formData.append("userfile", fileInputElement.files[0]); + +// Pseudo-objet fichier JavaScript... +var content = '<a id="a"><b id="b">hey!</b></a>'; // le corps du nouveau fichier... +var blob = new Blob([content], { type: "text/xml"}); + +formData.append("webmasterfile", blob); + +var request = new XMLHttpRequest(); +request.open("POST", "http://foo.com/submitform.php"); +request.send(formData); +</pre> + +<div class="note"><strong>Remarque :</strong> les champs "userfile" et "webmasterfile" contiennent tous les deux un fichier. Le nombre assigné au champ "accountnum" est immédiatement converti en une chaîne de caractères par la méthode <a href="/en/DOM/XMLHttpRequest/FormData#append()" title="en/XMLHttpRequest/FormData#append()"><code>FormData.append()</code></a> (la valeur du champ peut être soit un {{ domxref("Blob") }}, soit un {{ domxref("File") }}, ou encore une chaîne de caractères : <strong>si la valeur n'est ni un objet Blob ni un objet File, la valeur est convertie en une chaîne de caractères</strong>).</div> + +<p>Cet exemple crée une instance de <code>FormData</code> contenant des valeurs pour les champs nommés "username", "accountnum", "userfile" et "webmasterfile", puis utilise la méthode <a href="/en/DOM/XMLHttpRequest#send()" title="en/XMLHttpRequest#send()"><code>send()</code></a> de <code>XMLHttpRequest</code> pour envoyer les données du formulaire. Le champ "webmasterfile" est un <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>. Un objet <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a> représente un pseudo-objet fichier de données brutes et immuables. Les Blobs représentent des données qui ne sont pas forcément dans un format natif de JavaScript. L'interface {{ domxref("File") }} est basée sur le <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, héritant des fonctionnalités du blob et l'étendant afin de supporter les fichiers système de l'utilisateur. Afin de construire un <a href="/en/DOM/Blob" title="en/DOM/Blob"><code>Blob</code></a>, vous pouvez invoquer le <a href="/en/DOM/Blob#Constructor" title="en/DOM/Blob#Constructor"><code>constructeur Blob</code></a>.</p> + +<h2 id="Récupérer_un_objet_FormData_à_partir_d'un_formulaire">Récupérer un objet <code>FormData</code> à partir d'un formulaire</h2> + +<p>Pour construire un objet <code>FormData</code> qui contient les données d'un {{ HTMLElement("form") }} existant, il suffit de spécifier cet élément formulaire lors de la création de l'objet <code>FormData</code> :</p> + +<pre class="brush: js">var formData = new FormData(someFormElement); +</pre> + +<p>Par exemple :</p> + +<pre class="brush: js">var formElement = document.getElementById("myFormElement"); +var request = new XMLHttpRequest(); +request.open("POST", "submitform.php"); +request.send(new FormData(formElement)); +</pre> + +<p>Vous pouvez également ajouter des données additionnelles à l'objet <code>FormData</code> après l'avoir extrait d'un formulaire et avant son envoi, comme ceci :</p> + +<pre class="brush: js">var formElement = document.getElementById("myFormElement"); +formData = new FormData(formElement); +formData.append("serialnumber", serialNumber++); +request.send(formData);</pre> + +<p>Cela vous permet de compléter les données du formulaire avant de les envoyer, en incluant des informations additionnelles qui ne sont pas nécessairement accessibles à l'utilisateur dans le formulaire.</p> + +<h2 id="Envoyer_des_fichiers_avec_un_objet_FormData">Envoyer des fichiers avec un objet <code>FormData</code></h2> + +<p>Vous pouvez aussi envoyer des fichiers en utilisant <code>FormData</code>. Il suffit d'inclure un élément {{ HTMLElement("input") }} de type "file" :</p> + +<pre class="brush: html"><form enctype="multipart/form-data" method="post" name="fileinfo"> + <label>Your email address:</label> + <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br /> + <label>Custom file label:</label> + <input type="text" name="filelabel" size="12" maxlength="32" /><br /> + <label>File to stash:</label> + <input type="file" name="file" required /> + <input type="submit" value="Stash the file!" /> +</form> +<div id="output"></div> +</pre> + +<p>Vous pouvez ensuite l'envoyer en utilisant un code semblable à celui-ci :</p> + +<pre class="brush: js">var form = document.forms.namedItem("fileinfo"); +form.addEventListener('submit', function(ev) { + + var + oOutput = document.getElementById("output"), + oData = new FormData(document.forms.namedItem("fileinfo")); + + oData.append("CustomField", "This is some extra data"); + + var oReq = new XMLHttpRequest(); + oReq.open("POST", "stash.php", true); + oReq.onload = function(oEvent) { + if (oReq.status == 200) { + oOutput.innerHTML = "Uploaded!"; + } else { + oOutput.innerHTML = "Error " + oReq.status + " occurred uploading your file.<br \/>"; + } + }; + + oReq.send(oData); + ev.preventDefault(); +}, false); +</pre> + +<div class="note"> +<p><strong>Remarque </strong>: si vous passez une référence au formulaire, la méthode spécifiée dans le formulaire sera utilisée en remplacement de celle précisée dans l'appel à open().</p> +</div> + +<div class="note"> +<p><strong>Remarque </strong>: Cet exemple redirige les données en sortie vers un script PHP sur le serveur, et gère les erreurs HTTP, quoique d'une manière peu élégante.</p> +</div> + +<p>Vous pouvez aussi ajouter un {{ domxref("File") }} ou un {{ domxref("Blob") }} directement à l'objet {{ domxref("XMLHttpRequest/FormData", "FormData") }}, comme ceci :</p> + +<pre class="brush: js">data.append("myfile", myBlob, "filename.txt"); +</pre> + +<p>Lorsque la méthode <code>append</code> est utilisée, il est possible de renseigner le troisième paramètre optionnel pour passer un nom de fichier à l'en-tête <code>Content-Disposition</code> qui est envoyée au serveur. Si aucun nom de fichier n'est spécifié (ou si le paramètre n'est pas supporté,) le nom "blob" est utilisé.</p> + +<p>Vous pouvez aussi utiliser <code>FormData</code> avec jQuery si vous configurez les bonnes options :</p> + +<pre class="brush: js">var fd = new FormData(document.getElementById("fileinfo")); +fd.append("CustomField", "This is some extra data"); +$.ajax({ + url: "stash.php", + type: "POST", + data: fd, + processData: false, // indique à jQuery de ne pas traiter les données + contentType: false // indique à jQuery de ne pas configurer le contentType +}); +</pre> + +<h2 id="Soumettre_des_formulaires_et_téléverser_des_fichiers_via_AJAX_sans_objets_FormData">Soumettre des formulaires et téléverser des fichiers via AJAX <em>sans</em> <code>objets FormData</code></h2> + +<p>Si vous souhaitez savoir comment sérialiser et soumettre via <a href="/en-US/docs/AJAX" title="/en-US/docs/AJAX">AJAX</a> un formulaire<em> sans</em> utiliser d'objets FormData, veuillez consulter <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a>.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li> + <li><a href="/en-US/docs/DOM/HTMLFormElement" title="/en-US/docs/DOM/HTMLFormElement"><code>HTMLFormElement</code></a></li> + <li><a href="/en-US/docs/DOM/Blob" title="/en-US/docs/DOM/Blob"><code>Blob</code></a></li> + <li><a href="/en-US/docs/JavaScript/Typed_arrays" title="/en-US/docs/JavaScript/Typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html b/files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..d2c0d6304f --- /dev/null +++ b/files/fr/conflicting/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,78 @@ +--- +title: window.onresize +slug: Web/API/Window/onresize +tags: + - API + - DOM + - Gestionnaires d'évènements + - Propriété + - évènements +translation_of: Web/API/GlobalEventHandlers/onresize +--- +<p>{{ ApiRef() }}</p> + +<p>La propriété <code><strong>GlobalEventHandlers.onresize</strong></code> contient un {{domxref("EventHandler")}} (<em>gestionnaire d'évènements)</em> qui survient quand un évènement {{event("resize")}} est reçu.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="eval">window.onresize = <em>funcRef</em>; +</pre> + +<h3 id="Parameters" name="Parameters">Paramètres</h3> + +<ul> + <li><code>funcRef</code> est une référence à une fonction.</li> +</ul> + +<h2 id="Example" name="Example">Exemple</h2> + +<pre>window.onresize = doFunc; +</pre> + +<pre class="line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>html</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>head</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>title</span><span class="punctuation token">></span></span>onresize test<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>title</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>head</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Resize the browser window to fire the resize event.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Window height: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>height<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Window width: <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>span</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>width<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>span</span><span class="punctuation token">></span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> + +<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>script</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text/javascript<span class="punctuation token">"</span></span><span class="punctuation token">></span></span><span class="language-javascript script token"> + <span class="keyword token">var</span> heightOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#height'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + <span class="keyword token">var</span> widthOutput <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'#width'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> + + <span class="keyword token">function</span> <span class="function token">resize</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> + heightOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerHeight<span class="punctuation token">;</span> + widthOutput<span class="punctuation token">.</span>textContent <span class="operator token">=</span> window<span class="punctuation token">.</span>innerWidth<span class="punctuation token">;</span> + <span class="punctuation token">}</span> + + window<span class="punctuation token">.</span>onresize <span class="operator token">=</span> resize<span class="punctuation token">;</span> +</span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>script</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>body</span><span class="punctuation token">></span></span> +<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>html</span><span class="punctuation token">></span></span></code></pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>L’événement <code>resize</code> est déclenché après le redimensionnement de la fenêtre.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> diff --git a/files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html b/files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html new file mode 100644 index 0000000000..68e28e9626 --- /dev/null +++ b/files/fr/conflicting/web/api/htmlmediaelement/abort_event/index.html @@ -0,0 +1,70 @@ +--- +title: abort +slug: Web/Events/abort +translation_of: Web/API/HTMLMediaElement/abort_event +translation_of_original: Web/Events/abort +--- +<div>L'événement <strong>abort</strong> est déclenché lorsque le chargement d'une resource a été interrompu.</div> + +<div> </div> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;"><a href="/fr/docs/Web/API/UIEvent">UIEvent</a> si généré à partir de l'interface utilisateur sinon, <a href="/fr/docs/Web/API/Event">Event</a>.</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is an interface implemented by objects that can receive events and may have listeners for them."><code>EventTarget</code></a></td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/DOMString" title="DOMString is a UTF-16 String. As JavaScript already uses such strings, DOMString is mapped directly to a String."><code>DOMString</code></a></td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td><a href="/en-US/docs/Web/API/Boolean" title="The Boolean object is an object wrapper for a boolean value."><code>Boolean</code></a></td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>view</code> {{readonlyInline}}</td> + <td><a class="new" href="/en-US/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> + <td><a href="/en-US/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{readonlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + </tbody> +</table> diff --git a/files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html b/files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html new file mode 100644 index 0000000000..950e8ef545 --- /dev/null +++ b/files/fr/conflicting/web/api/htmlmediaelement/ended_event/index.html @@ -0,0 +1,83 @@ +--- +title: ended (Web Audio) +slug: Web/Events/ended_(Web_Audio) +translation_of: Web/API/HTMLMediaElement/ended_event +translation_of_original: Web/Events/ended_(Web_Audio) +--- +<div> +<p>L'événement <strong>ended </strong>est déclenché lorsque la lecture s'est arrêté parce que la fin du média a été atteinte.</p> +</div> + +<h2 id="Informations_générales">Informations générales</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Spécification</dt> + <dd style="margin: 0 0 0 120px;">{{SpecName("Web Audio API")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Event")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Propagation</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Annulable</dt> + <dd style="margin: 0 0 0 120px;">Non</dd> + <dt style="float: left; text-align: right; width: 120px;">Cible</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("AudioBufferSourceNode")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Action par défaut</dt> + <dd style="margin: 0 0 0 120px;">Aucune</dd> +</dl> + +<h2 id="Propriétés">Propriétés</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="Evénements_liés">Evénements liés</h2> + +<ul> + <li>{{event("playing")}}</li> + <li>{{event("waiting")}}</li> + <li>{{event("seeking")}}</li> + <li>{{event("seeked")}}</li> + <li>{{event("ended")}}</li> + <li>{{event("loadedmetadata")}}</li> + <li>{{event("loadeddata")}}</li> + <li>{{event("canplay")}}</li> + <li>{{event("canplaythrough")}}</li> + <li>{{event("durationchange")}}</li> + <li>{{event("timeupdate")}}</li> + <li>{{event("play")}}</li> + <li>{{event("pause")}}</li> + <li>{{event("ratechange")}}</li> + <li>{{event("volumechange")}}</li> + <li>{{event("suspend")}}</li> + <li>{{event("emptied")}}</li> + <li>{{event("stalled")}}</li> +</ul> diff --git a/files/fr/conflicting/web/api/index.html b/files/fr/conflicting/web/api/index.html new file mode 100644 index 0000000000..a4f8a6ba0a --- /dev/null +++ b/files/fr/conflicting/web/api/index.html @@ -0,0 +1,77 @@ +--- +title: element.name +slug: Web/API/Element/name +tags: + - API + - DOM + - Element + - Nom + - Propriétés +translation_of: Web/API +translation_of_original: Web/API/Element/name +--- +<p>{{ APIRef("DOM") }}</p> + +<p><code><strong>name</strong></code> obtient ou définit la propriété <code>name</code> (<em>nom</em>) d'un élément dans le DOM. Il s'applique uniquement aux éléments suivants : {{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }} et {{ HTMLelement("textarea") }}.</p> + +<div class="note"> +<p><strong>Note :</strong> La propriété <code>name</code> n'existe pas pour d'autres éléments ; contrairement à <a href="https://developer.mozilla.org/en/DOM/Element.tagName" title="en/DOM/element.tagName"><code>tagName</code></a> et <a href="https://developer.mozilla.org/en/DOM/Node.nodeName" title="en/DOM/Node.nodeName"><code>nodeName</code></a>, ce n'est pas une propriété des interfaces {{domxref("Node")}}, {{domxref("Element")}} ou {{domxref("HTMLElement")}}.</p> +</div> + +<p>Le <code>name</code> peut être utilisé avec la méthode {{ domxref("document.getElementsByName()") }}, dans un <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement" title="fr/DOM/form">formulaire</a> et dans la collection <a href="https://developer.mozilla.org/fr/docs/Web/API/HTMLFormElement/elements" title="fr/DOM/form.elements"><code>elements</code></a> d'un formulaire. Lorsqu'il est utilisé avec un formulaire ou les collections d'éléments, il peut renvoyer un seul élément ou une collection d'éléments.</p> + +<h2 id="Syntaxe" name="Syntaxe">Syntaxe</h2> + +<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; +var elName = <em>HTMLElement</em>.name; + +var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; +var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; +</pre> + +<h2 id="Exemple" name="Exemple">Exemple</h2> + +<pre class="eval"><form action="" name="formA"> + <input type="text" value="foo"> +</form> + +<script type="text/javascript"> + + // Obtient une référence au premier élément du formulaire + var formElement = document.forms['formA'].elements[0]; + + // Lui donne un nom + formElement.name = 'inputA'; + + // Affiche la valeur du champ + alert(document.forms['formA'].elements['inputA'].value); + +</script> +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Dans Internet Explorer, la propriété <code>name</code> des objets DOM créés à l'aide de <code><a href="/fr/DOM/document.createElement" title="fr/DOM/document.createElement">createElement</a></code> ne peut être définie ou modifiée.</p> + +<h2 id="Sp.C3.A9cification" name="Sp.C3.A9cification">Spécification</h2> + +<p>Spécification DOM 2 HTML du W3C :</p> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-32783304">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-39843695">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-22051454">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-91128709">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-96819659">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-47534097">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-52696514">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-31037081">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-20110362">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Option</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-89658498">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-59871447">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-41636323">traduction</a></small></li> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a> <small>— <a class="external" href="http://www.yoyodesign.org/doc/w3c/dom2-html/html.html#ID-70715578">traduction</a></small></li> +</ul> + +<p><small>Les traductions ne sont pas normatives.</small></p> diff --git a/files/fr/conflicting/web/api/node/getrootnode/index.html b/files/fr/conflicting/web/api/node/getrootnode/index.html new file mode 100644 index 0000000000..7ee512dd8f --- /dev/null +++ b/files/fr/conflicting/web/api/node/getrootnode/index.html @@ -0,0 +1,71 @@ +--- +title: Node.rootNode +slug: Web/API/Node/rootNode +tags: + - API + - Arborescence + - DOM + - Noeuds + - Propriétés + - Racine +translation_of: Web/API/Node/getRootNode +translation_of_original: Web/API/Node/rootNode +--- +<p>{{deprecated_header}}{{APIRef("DOM")}}{{SeeCompatTable}}</p> + +<p>La propriété en lecture seule <code><strong>Node.rootNode</strong></code> renvoie un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre, ou le noeud actuel s'il est le noeud du plus haut niveau de l'arbre. Il est trouvé par rétro-navigation à travers les noeuds parents {{domxref("Node.parentNode")}} jusqu'à l'arrivée au sommet.</p> + +<div class="warning"> +<p><strong>Important </strong>: Pour des raisons de compatibilité, cette propriété a été remplacée par la méthode {{domxref("Node.getRootNode()")}}.</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre><var>rootNode</var> = <em>node</em>.rootNode; +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un objet {{domxref("Node")}} représentant le noeud du plus haut niveau de l'arbre.</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<p>L'exécution de la ligne suivante dans les navigateurs de support doit renvoyer une référence au noeud HTML / document :</p> + +<pre class="brush: js">console.log(document.body.rootNode);</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p></p><p>Les navigateurs basés sur Gecko insèrent des nœuds texte dans un document pour représenter des espaces + vides dans le balisage source. Par conséquent, un nœud obtenu par exemple via <a href="/fr/docs/Web/API/Node/firstChild" title="La propriété en lecture seule Node.firstChild renvoie le premier nœud enfant de l'arbre ou null s'il n'en a pas. Si le noeud est un Document , il renvoie le premier noeud de la liste de ses enfants directs."><code>Node.firstChild</code></a> ou + <a href="/fr/docs/Web/API/Node/previousSibling" title='{{APIRef("DOM")}}'><code>Node.previousSibling</code></a> peut faire référence à un nœud texte contenant des espaces plutôt qu'au véritable élément + que l'auteur comptait obtenir.</p> + + <p>Consultez <a href="/fr/docs/Gestion_des_espaces_dans_le_DOM">Gestion des espaces dans le DOM</a> + et <a class="external" href="http://www.w3.org/DOM/faq.html#emptytext" rel="noopener"><i>Why are some Text nodes empty?</i> + dans la FAQ DOM 3 du W3C</a> pour plus d'informations.</p><p></p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.rootNode")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-node-rootnode', 'Node.rootNode')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> diff --git a/files/fr/conflicting/web/api/node/index.html b/files/fr/conflicting/web/api/node/index.html new file mode 100644 index 0000000000..617ed79d8e --- /dev/null +++ b/files/fr/conflicting/web/api/node/index.html @@ -0,0 +1,39 @@ +--- +title: Node.baseURIObject +slug: Web/API/Node/baseURIObject +tags: + - API + - DOM + - Noeuds + - Propriétés + - URI + - URL +translation_of: Web/API/Node +translation_of_original: Web/API/Node/baseURIObject +--- +<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> + +<p>La propriété <code><strong>Node.baseURIObject</strong></code> renvoie le {{Interface("nsIURI")}} représentant l'URL de base du noeud (un document ou un élément). Elle est similaire à {{domxref("Node.baseURI")}}, à ceci près qu'elle renvoie une "nsIURI" à la place d'une "string" (<em>chaîne de caractères</em>).</p> + +<p>Cette propriété existe sur tous les noeuds (HTML, XUL, SVG, MathML, etc.), mais est utilisable par le script seulement s'il a des privilèges UniversalXPConnect.</p> + +<p>Voir {{domxref("Node.baseURI")}} pour plus de détails sur ce qu'est une URL de base.</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><var>uriObj</var> = <em>node</em>.baseURIObject +</pre> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, on ne peut y accèder qu'à partir du code privilégié.</p> + +<h2 id="Specification" name="Specification">Spécification</h2> + +<p>N'existe dans aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.baseURIObject")}}</p> diff --git a/files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html b/files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html new file mode 100644 index 0000000000..33144eae42 --- /dev/null +++ b/files/fr/conflicting/web/api/node_378aed5ed6869e50853edbc988cf9556/index.html @@ -0,0 +1,40 @@ +--- +title: Node.nodePrincipal +slug: Web/API/Node/nodePrincipal +tags: + - API + - DOM + - Noeuds + - Principal + - Propriétés +translation_of: Web/API/Node +translation_of_original: Web/API/Node/nodePrincipal +--- +<div>{{APIRef("DOM")}} {{Non-standard_header}}</div> + +<p>La propriété en lecture seule <code><strong>Node.nodePrincipal</strong></code> renvoie l'objet {{Interface("nsIPrincipal")}} représentant le contexte de sécurité actuel du noeud.</p> + +<p>{{Note("Cette propriété existe sur tous les nœuds (HTML, XUL, SVG, MathML, etc.), mais n'est accessible par le script que s'il possède des privilèges de chrome.")}}</p> + +<h2 id="Syntax" name="Syntax">Syntaxe</h2> + +<pre class="syntaxbox"><em>principalObj</em> = <em>Node</em>.nodePrincipal +</pre> + +<h3 id="Valeur">Valeur</h3> + +<p>Un objet <code>nsIPrincipal</code> représentant le contexte de sécurité du noeud.</p> + +<h2 id="Notes">Notes</h2> + +<p>Cette propriété est en lecture seule ; tenter d'y écrire lancera une exception. En outre, cette propriété est accessible seulement par le code privilégié.</p> + +<h2 id="Specification" name="Specification">Spécifications</h2> + +<p>N'existe dans aucune spécification. C'est une propriété propre à Firefox.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + + + +<p>{{Compat("api.Node.nodePrincipal")}}</p> diff --git a/files/fr/conflicting/web/api/selection/index.html b/files/fr/conflicting/web/api/selection/index.html new file mode 100644 index 0000000000..bca8077699 --- /dev/null +++ b/files/fr/conflicting/web/api/selection/index.html @@ -0,0 +1,221 @@ +--- +title: Selection API +slug: Web/API/Selection_API +translation_of: Web/API/Selection_API +--- +<p>{{APIRef}}</p> + +<div class="summary"> +<p>L’API Selection fournit des fonctionnalités pour lire et manipuler les plages (en anglais : <em lang="en-US">ranges</em>) de texte sélectionnées par l’utilisatrice ou l’utilisateur.</p> +</div> + +<h2 id="Concepts_et_utilisation">Concepts et utilisation</h2> + +<p>Pour obtenir la plage de texte actuellement sélectionnée par l’utilisatrice ou l’utilisateur, vous pouvez utiliser la méthode {{domxref("Window.getSelection()")}} ou {{domxref("Document.getSelection()")}}, et stocker la valeur de retour – un objet {{domxref("Selection")}} – dans une variable pour une utilisation ultérieure.</p> + +<p>Une fois que votre sélection est dans une variable, vous pouvez effectuer différentes opérations dessus, par exemple :</p> + +<ul> + <li>copier la sélection dans une chaîne en utilisant {{domxref("Selection.toString()")}} ;</li> + <li>ajouter (ou enlever) une plage (representée par un objet {{domxref("Range")}} standard) à la sélection grâce à {{domxref("Selection.addRange()")}} / {{domxref("Selection.removeRange()")}} ;</li> + <li>modifier la sélection pour qu’elle devienne le contenu entier d’un nœud DOM grâce à {{domxref("Selection.selectAllChildren()")}}.</li> +</ul> + +<p>Vous pouvez exécuter du code en réponse à un changement de sélection, ou au commencement d’une nouvelle sélection, en utilisant les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}}.</p> + +<h2 id="Interfaces_de_l’API_Selection">Interfaces de l’API Selection</h2> + +<dl> + <dt>{{domxref("Selection")}}</dt> + <dd>Représente la plage de texte sélectionnée ou la position actuelle du curseur.</dd> +</dl> + +<h2 id="Extensions_à_d’autres_interfaces">Extensions à d’autres interfaces</h2> + +<dl> + <dt>{{domxref("Window.getSelection()")}}, {{domxref("Document.getSelection()")}}</dt> + <dd>Retourne un objet {{domxref("Selection")}} représentant la plage de texte sélectionnée ou la position actuelle du curseur. <code>Document.getSelection()</code> est en quelques sortes un alias de <code>Window.getSelection()</code>.</dd> + <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt> + <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectstart")}} est émis sur l’objet concerné (c’est-à-dire quand une nouvelle plage de texte est sur le point d’être sélectionnée).</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>Représente le gestionnaire d’évènement qui est appelé quand un évènement {{event("selectionchange")}} est émis sur l’objet concerné (c’est-à-dire quand la plage de texte sélectionné change).</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + <tr> + <td>{{SpecName('Selection API', '#definition', 'Selection')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>La spécification de l’API Selection est basée sur la spécification de l’API Édition HTML et se concentre sur les fonctionnalités liées à la sélection.</td> + </tr> + <tr> + <td>{{SpecName('HTML Editing', '#selection', 'Selection')}}</td> + <td>{{Spec2('HTML Editing')}}</td> + <td>Définition initiale (plus ancienne), à présent obsolète.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown()}}<br> + {{CompatGeckoDesktop(52)}}<sup>[1]</sup></td> + <td>9</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>modify()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>setBaseAndExtent()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>deleteFromDocument()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>setPosition()</code> comme alias de <code>collapse()</code></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support de base</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td> + <p>{{CompatVersionUnknown()}}<br> + {{CompatGeckoMobile(52)}}<sup>[1]</sup></p> + </td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>modify()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>setBaseAndExtent()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>deleteFromDocument()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>empty()</code> comme alias de <code>removeAllRanges()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td><code>setPosition()</code> comme alias de <code>collapse()</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile(55)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Les gestionnaires d’évènements {{domxref("GlobalEventHandlers.onselectionchange")}} et {{domxref("GlobalEventHandlers.onselectstart")}} sont supportés à partir de Firefox 52.</p> + +<h2 id="See_also" name="See_also">Voir aussi</h2> + +<ul> + <li><a href="https://github.com/chrisdavidmills/selection-api-examples/tree/gh-pages#key-quote-generator" lang="en-US">Key quote generator</a>: Une démo simple montrant un usage typique de l’API Selection pour capturer la sélection actuelle à un instant donné et copier les sélections dans une liste (<a href="https://chrisdavidmills.github.io/selection-api-examples/">voir également en direct</a>).</li> + <li>L’objet {{domxref("Range")}}.</li> +</ul> diff --git a/files/fr/conflicting/web/api/url/index.html b/files/fr/conflicting/web/api/url/index.html new file mode 100644 index 0000000000..223701977c --- /dev/null +++ b/files/fr/conflicting/web/api/url/index.html @@ -0,0 +1,95 @@ +--- +title: Window.URL +slug: Web/API/Window/URL +translation_of: Web/API/URL +translation_of_original: Web/API/Window/URL +--- +<p>{{ApiRef("Window")}}{{SeeCompatTable}}</p> + +<p>La propriété <strong><code>Window.URL</code></strong> retourne un objet qui fournit les méthodes statiques utilisées pour créer et gérer les objets URLs. On peut aussi l'appeler comme uns constructeur pour instancier des objets {{domxref("URL")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntax</h2> + +<p>Utilisation de la méthode statique:</p> + +<pre class="syntaxbox"><code><var>img</var>.src = URL.{{domxref("URL.createObjectURL", "createObjectURL")}}(<var>blob</var>);</code></pre> + +<p>Utilisation d'un objet instancié:</p> + +<pre class="syntaxbox"><code>var <var>url</var> = new {{domxref("URL.URL", "URL")}}("../cats/", "https://www.example.com/dogs/");</code></pre> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('URL', '#dom-url', 'URL')}}</td> + <td>{{Spec2('URL')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>8.0<sup>[2]</sup></td> + <td>{{CompatGeckoDesktop("2.0")}}<sup>[1]</sup><br> + {{CompatGeckoDesktop("19.0")}}</td> + <td>10.0</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup><br> + 7.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[2]</sup></td> + <td>{{CompatGeckoMobile("14.0")}}<sup>[1]</sup><br> + {{CompatGeckoMobile("19.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>15.0<sup>[2]</sup></td> + <td>6.0<sup>[2]</sup></td> + </tr> + </tbody> +</table> +</div> + +<p>[1] From Gecko 2 (Firefox 4) to Gecko 18 included, Gecko returned an object with the non-standard <code>nsIDOMMozURLProperty</code> internal type. In practice, this didn't make any difference.</p> + +<p>[2] Implemented under the non-standard name <code>webkitURL</code>.</p> diff --git a/files/fr/conflicting/web/api/web_storage_api/index.html b/files/fr/conflicting/web/api/web_storage_api/index.html new file mode 100644 index 0000000000..2b52e93ad8 --- /dev/null +++ b/files/fr/conflicting/web/api/web_storage_api/index.html @@ -0,0 +1,106 @@ +--- +title: Storage +slug: DOM/Storage +tags: + - Applications_web_hors_ligne + - DOM + - JavaScript + - Référence_du_DOM_Gecko +translation_of: Web/API/Web_Storage_API +translation_of_original: Web/Guide/API/DOM/Storage +--- +<p>{{ ApiRef() }} {{ Fx_minversion_header(2) }}</p> +<div class="note"> + <p>Cette traduction est complètement obsolète, veuillez consulter l'original anaglais)</p> +</div> +<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<p>DOM Storage est le nom donné à l'ensemble des <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">fonctionnalités de stockage</a> introduites dans la spécification <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0</a>. DOM Storage est conçu pour fournir une alternative aux cookies pour le stockage d'informations, alternative plus grande, plus sûre et plus facile à utiliser. DOM Storage n'est actuellement disponible que dans les navigateurs basés sur Mozilla, en particulier <a href="fr/Firefox_2">Firefox 2</a> et suivants.</p> +<div class="note"> + <b>Note :</b> DOM Storage ne doit pas être confondu avec <a href="/Storage">mozStorage</a> (les interfaces XPCOM de Mozilla vers SQLite) ou l'<a href="fr/API_de_restauration_de_session">API de restauration de session</a> (un utilitaire de stockage <a href="fr/XPCOM">XPCOM</a> utilisable par les extensions).</div> +<h3 id="Description" name="Description">Description</h3> +<p>Le mécanisme DOM Storage est un moyen par lequel des paires de chaînes clé/valeur peuvent être stockées de manière sûre et récupérées pour être utilisées plus tard. L'ajout de cette fonctionnalité a pour but de fournir un moyen complet par lequel des applications interactives peuvent être construites (avec des possibilités avancées, comme la possibilité de travailler « hors ligne » pendant des périodes prolongées).</p> +<p>Pour l'instant, seuls les navigateurs basés sur Mozilla fournissent une implémentation fonctionnelle de la spécification DOM Storage. Cependant, Internet Explorer dispose d'une fonctionnalité semblable appelée « <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a> » qui permet également de conserver des données d'une session de navigation à une autre.</p> +<p>DOM Storage est utile car il n'existe aucune bonne méthode limitée au navigateur pour conserver une quantité raisonnable de données pour une période donnée. Les <a class="external" href="http://fr.wikipedia.org/wiki/Cookie_(informatique)">cookies de navigation</a> ont une capacité limitée et ne permettent pas d'organiser les données conservées, tandis que d'autres méthodes (comme <a class="external" href="http://www.macromedia.com/support/documentation/fr/flashplayer/help/help02.html">Flash Local Storage</a>) nécessitent un plugin externe.</p> +<p>Une des premières applications publiques à utiliser la fonctionnalité DOM Storage (en plus de la fonctionnalité userData Behavior d'Internet Explorer) a été <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (une application de prise de notes) écrite par <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a>. Dans son application, Aaron enregistre de manière simultanée les notes sur un serveur distant (lorsque la connexion Internet est disponible) et dans un espace d'enregistrement local. Cette méthode permet à l'utilisateur de rédiger ses notes de manière sûre, même avec une connexion Internet sporadique.</p> +<p>Bien que le concept et l'implémentation présentés dans halfnote soient relativement simples, sa création montre la possibilité d'une nouvelle gamme d'applications Web utilisables tant en ligne qu'hors ligne.</p> +<h3 id="R.C3.A9f.C3.A9rence" name="R.C3.A9f.C3.A9rence">Référence</h3> +<p>Les objets suivants sont globaux et existent comme propriétés de tout <a href="fr/DOM/window">objet <code>window</code></a>. Cela signifie qu'on peut y accéder avec <code>sessionStorage</code> ou <code>window.sessionStorage</code>. (c'est important à savoir, parce qu'on peut alors utiliser des iframes pour stocker ou accéder à des données supplémentaires à celles immédiatement disponibles dans la page).</p> +<h4 id="sessionStorage" name="sessionStorage"><code>sessionStorage</code></h4> +<p>Il s'agit d'un objet global (<code>sessionStorage</code>) qui conserve un espace de stockage disponible pour toute la durée de la session de la page. Une session de page dure aussi longtemps que le navigateur est ouvert et se poursuit au travers des rechargements de la page. L'ouverture d'une page dans un nouvel onglet ou une nouvelle fenêtre provoquera la création d'une nouvelle session pour la page.</p> +<pre class="eval">// Enregistre des données dans l'espace de stockage de la session courante +sessionStorage.username = "John"; + +// Accède à une donnée stockée +alert( "username = " + sessionStorage.username ); +</pre> +<p>L'objet <code>sessionStorage</code> est surtout utile pour conserver des données temporaires qui doivent être enregistrées et restaurées si la fenêtre du navigateur est accidentellement ou volontairement rafraichie.</p> +<div class="bug"> + <b>Note :</b> <code>sessionStorage</code> devrait également être capable de restaurer les données après un crash (et une restauration de la session) du navigateur, mais suite au {{ Bug(339445) }} cela ne fonctionne pas encore dans Firefox. Tant qu'il n'est pas résolu, l'utilisation de <code>sessionStorage</code> comme mesure préventive est discutable.</div> +<p><b>Exemples :</b></p> +<p>Enregistre automatiquement le contenu d'un champ texte et, si la page est rafraichie accidentellement, restaure ce contenu afin qu'aucun texte ne soit perdu.</p> +<pre class="eval"> // Recherche le champ texte à suivre + var field = document.getElementById("field"); + + // Vérifie s'il y a une valeur de sauvegarde automatique + // (ce qui se produira uniquement si la page est rafraichie) + if ( sessionStorage.autosave ) { + // Restaure le contenu du champ texte + field.value = sessionStorage.autosave; + } + + // Vérifie le contenu du champ texte à chaque seconde + setInterval(function(){ + // Et enregistre le résultat dans l'objet de stockage de session + sessionStorage.autosave = field.value; + }, 1000); +</pre> +<p><b>Pour plus d'informations :</b></p> +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">La spécification de <code>sessionStorage</code></a></li> +</ul> +<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4> +<p>{{ Non-standard_header() }} Il s'agit d'un objet global (<code>globalStorage</code>) qui conserve une série d'espaces de stockage privés pour conserver des données sur une longue période de temps (par exemple depuis plusieurs pages et d'une session de navigation à l'autre).</p> +<pre class="eval">// Enregistre des données auxquelles seuls les scripts du domaine peuvent accéder +globalStorage['mozilla.org'].snippet = "<b>Hello</b>, comment ça va ?"; + +// Enregistre des données auxquelles toute page Web, sur n'importe quel domaine, peut accéder +globalStorage[<span class="nowiki">''</span>].favBrowser = "Firefox"; +</pre> +<p>Plus précisément, l'objet <code>globalStorage</code> permet d'accéder à différents objets de stockage dans lesquels des données peuvent être enregistrées. Par exemple, si l'on voulait construire une page Web utilisant <code>globalStorage</code> sur ce domaine (developer.mozilla.org) nous devrions disposer de l'objet de stockage suivant :</p> +<ul> + <li><code>globalStorage{{ mediawiki.external('\'developer.mozilla.org\'') }}</code> — Toutes les pages Web au sein du sous-domaine developer.mozilla.org peuvent lire et écrire des données dans cet objet de stockage.</li> +</ul> +<p>{{ Fx_minversion_note(3, "Firefox 2 permettait d\'accéder à des objets de stockage plus haut dans la hiérarchie de domaine que le document actuel. Ce n\'est plus permis dans Firefox 3, pour des raisons de sécurité. Cet ajout à HTML 5 a également été retiré des spécifications HTML 5 en faveur de <code>localStorage</code>, qui n\'a pas encore été implémenté dans Firefox.") }}</p> +<p><b>Exemples :</b></p> +<p>Pour tous ces exemples, vous aurez besoin d'insérer un script (en plus des lignes de codes suivantes) dans chaque page sur laquelle vous désirez afficher le résultat.</p> +<p>Retient le nom d'utilisateur d'un visiteur pour le sous-domaine particulier visité :</p> +<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John"; +</pre> +<p>Compte le nombre de fois qu'un visiteur visite n'importe quelle page de votre domaine :</p> +<pre class="eval"> // parseInt doit être utilisée car toutes les données sont stockées comme des chaînes + globalStorage['mozilla.org'].visits = + parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1; +</pre> +<h3 id="Pour_plus_d.27informations" name="Pour_plus_d.27informations">Pour plus d'informations</h3> +<ul> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Spécification Web Applications 1.0</a></li> + <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Spécification de Web Applications 1.0 Storage</a></li> + <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Activer/Désactiver DOM Storage dans Firefox ou SeaMonkey</a></li> +</ul> +<h3 id="Exemples" name="Exemples">Exemples</h3> +<ul> + <li><a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Exemples basiques utilisant DOMStorage</a></li> + <li><a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> — Application de prise de notes utilisant DOM Storage.</li> +</ul> +<h3 id="Sujets_li.C3.A9s" name="Sujets_li.C3.A9s">Sujets liés</h3> +<ul> + <li><a class="external" href="http://fr.wikipedia.org/wiki/Cookie_(informatique)">Cookies HTTP</a> (<code><a href="fr/DOM/document.cookie">document.cookie</a></code>)</li> + <li><a class="external" href="http://www.macromedia.com/support/documentation/fr/flashplayer/help/help02.html">Flash Local Storage</a> (enregistrement local avec Flash)</li> + <li><a class="external" href="http://msdn2.microsoft.com/en-us/library/ms531424.aspx">Internet Explorer userData behavior</a> (en anglais)</li> +</ul> +<div class="noinclude"> + </div> +<div class="note"> + <p>{{ languages( { "en": "en/DOM/Storage", "es": "es/DOM/Almacenamiento", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</p> +</div> +<p> </p> diff --git a/files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html b/files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html new file mode 100644 index 0000000000..b925ca7f4b --- /dev/null +++ b/files/fr/conflicting/web/api/web_workers_api/using_web_workers/index.html @@ -0,0 +1,423 @@ +--- +title: Concepts avancés et exemples +slug: Web/API/Web_Workers_API/Advanced_concepts_and_examples +translation_of: Web/API/Web_Workers_API/Using_web_workers +translation_of_original: Web/API/Web_Workers_API/Advanced_concepts_and_examples +--- +<div class="summary"> +<p>Cet article fournit de nombreux détails et maints exemples pour illustrer les concepts avancés des web workers.</p> +</div> + +<h2 id="Passage_de_données_copie_et_non_partage">Passage de données : copie, et non partage</h2> + +<p>Les données passées entre la page principale et les workers sont <strong>copiées</strong>, et non partagées. Les objets sont sérialisées au moment où ils sont confiés au worker, et consécutivement désérialisés à l'autre bout. La page et le worker <strong>ne partagent pas la même instance</strong>, ainsi au final <strong>une copie</strong> est créée de chaque côté. La plupart des navigateurs implémentent cette caractéristique en tant que <a href="/en/DOM/The_structured_clone_algorithm" title="The structured clone algorithm">clonage structuré</a>.</p> + +<p>Avant de poursuivre, créons à des fins didactiques une fonction nommée <code>emulateMessage()</code>, avec pour objectif de simuler le comportement d'une valeur qui est <em>clonée et non partagée</em> durant le passage du <code>worker</code> à la page principale ou inversement :</p> + +<pre class="brush: js">function emulateMessage (vVal) { + return eval("(" + JSON.stringify(vVal) + ")"); +} + +// Tests + +// test #1 +var example1 = new Number(3); +alert(typeof example1); // objet +alert(typeof emulateMessage(example1)); // nombre + +// test #2 +var example2 = true; +alert(typeof example2); // booléen +alert(typeof emulateMessage(example2)); // booléen + +// test #3 +var example3 = new String("Hello World"); +alert(typeof example3); // objet +alert(typeof emulateMessage(example3)); // chaîne de caractères + +// test #4 +var example4 = { + "name": "John Smith", + "age": 43 +}; +alert(typeof example4); // objet +alert(typeof emulateMessage(example4)); // objet + +// test #5 +function Animal (sType, nAge) { + this.type = sType; + this.age = nAge; +} +var example5 = new Animal("Cat", 3); +alert(example5.constructor); // Animal +alert(emulateMessage(example5).constructor); // Objet</pre> + +<p>Une valeur qui est clonée et non partagée est appelée <em>message</em>. Comme vous le savez probablement dès à présent, les <em>messages</em> peuvent être envoyés à et à partir du thread principal en utilisant <code>postMessage()</code>, et l'attribut {{domxref("MessageEvent.data", "data")}} de l'événement <code>message</code> contient les données retournées par le worker.</p> + +<p><strong>example.html </strong>(la page principale) :</p> + +<pre class="brush: js">var myWorker = new Worker("my_task.js"); + +myWorker.onmessage = function (oEvent) { + console.log("Worker said : " + oEvent.data); +}; + +myWorker.postMessage("ali");</pre> + +<p><strong>my_task.js</strong> (leworker) :</p> + +<pre class="brush: js">postMessage("I\'m working before postMessage(\'ali\')."); + +onmessage = function (oEvent) { + postMessage("Hi " + oEvent.data); +};</pre> + +<p>L'algorithme de <a href="/en-US/docs/Web/Guide/DOM/The_structured_clone_algorithm" style="line-height: 1.572;" title="The structured clone algorithm">clonage structurée</a> peut accepter du JSON et quelques autres choses impossibles en JSON — comme les références circulaires.</p> + +<h3 id="Exemples_de_passages_de_données">Exemples de passages de données</h3> + +<h4 id="Exemple_1_Créer_un_eval()_asynchrone_générique">Exemple #1 : Créer un "<code>eval() </code>asynchrone" générique</h4> + +<p>L'exemple suivant montre comment utiliser un worker afin d'exécuter <strong>de manière asynchrone</strong> n'importe quel code JavaScript permis dans un worker, au moyen d'une méthode <a href="/en-US/docs/JavaScript/Reference/Global_Objects/eval" title="/en-US/docs/JavaScript/Reference/Global_Objects/eval"><code>eval()</code></a> appelée dans le worker :</p> + +<pre class="brush: js">// Syntaxe : asyncEval(code[, listener]) + +var asyncEval = (function () { + + var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D"); + + oParser.onmessage = function (oEvent) { + if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); } + delete aListeners[oEvent.data.id]; + }; + + + return function (sCode, fListener) { + aListeners.push(fListener || null); + oParser.postMessage({ + "id": aListeners.length - 1, + "code": sCode + }); + }; + +})();</pre> + +<p>La data URI est équivalente à une requête réseau, avec la réponse suivante :</p> + +<pre>onmessage = function (oEvent) { + postMessage({ + "id": oEvent.data.id, + "evaluated": eval(oEvent.data.code) + }); +}</pre> + +<p>Exemples d'utilisation :</p> + +<pre class="brush: js">// message d'alerte asynchrone... +asyncEval("3 + 2", function (sMessage) { + alert("3 + 2 = " + sMessage); +}); + +// affichage asynchrone d'un message... +asyncEval("\"Hello World!!!\"", function (sHTML) { + document.body.appendChild(document.createTextNode(sHTML)); +}); + +// néant asynchrone... +asyncEval("(function () {\n\tvar oReq = new XMLHttpRequest();\n\toReq.open(\"get\", \"http://www.mozilla.org/\", false);\n\toReq.send(null);\n\treturn oReq.responseText;\n})()");</pre> + +<h4 id="Exemple_2_passage_avancé_de_données_JSON_et_création_d'un_système_d'échange">Exemple #2 : passage avancé de données JSON et création d'un système d'échange</h4> + +<p>Si vous devez passer des données complexes et appeler différentes fonctions à la fois dans la page principale et dans le worker, vous pouvez créer un système comme suit.</p> + +<p><strong>example.html</strong> (la page principale) :</p> + +<pre class="brush: html"><!doctype html> +<html> +<head> +<meta charset="UTF-8" /> +<title>MDN Example - Queryable worker</title> +<script type="text/javascript"> + /* + QueryableWorker instances methods: + * sendQuery(queryable function name, argument to pass 1, argument to pass 2, etc. etc): calls a Worker's queryable function + * postMessage(string or JSON Data): see Worker.prototype.postMessage() + * terminate(): terminates the Worker + * addListener(name, function): adds a listener + * removeListener(name): removes a listener + QueryableWorker instances properties: + * defaultListener: the default listener executed only when the Worker calls the postMessage() function directly + */ + function QueryableWorker (sURL, fDefListener, fOnError) { + var oInstance = this, oWorker = new Worker(sURL), oListeners = {}; + this.defaultListener = fDefListener || function () {}; + oWorker.onmessage = function (oEvent) { + if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("vo42t30") && oEvent.data.hasOwnProperty("rnb93qh")) { + oListeners[oEvent.data.vo42t30].apply(oInstance, oEvent.data.rnb93qh); + } else { + this.defaultListener.call(oInstance, oEvent.data); + } + }; + if (fOnError) { oWorker.onerror = fOnError; } + this.sendQuery = function (/* nom de la fonction requêtable, argument à passer 1, argument à passer 2, etc. etc */) { + if (arguments.length < 1) { throw new TypeError("QueryableWorker.sendQuery - not enough arguments"); return; } + oWorker.postMessage({ "bk4e1h0": arguments[0], "ktp3fm1": Array.prototype.slice.call(arguments, 1) }); + }; + this.postMessage = function (vMsg) { + //Je ne pense pas qu'il y ait besoin d'appeler la méthode call() + //que diriez-vous tout simplement de oWorker.postMessage(vMsg); + //le même cas se pose avec terminate + //bien, juste un peu plus vite, aucune recherche dans la chaîne des prototypes + Worker.prototype.postMessage.call(oWorker, vMsg); + }; + this.terminate = function () { + Worker.prototype.terminate.call(oWorker); + }; + this.addListener = function (sName, fListener) { + oListeners[sName] = fListener; + }; + this.removeListener = function (sName) { + delete oListeners[sName]; + }; + }; + + // votre worker "queryable" personnalisé + var oMyTask = new QueryableWorker("my_task.js" /* , votreEcouteurDeMessageParDefautIci [optional], votreEcouteurDErreurIci [optional] */); + + // vos "écouteurs" personnalisés + + oMyTask.addListener("printSomething", function (nResult) { + document.getElementById("firstLink").parentNode.appendChild(document.createTextNode(" The difference is " + nResult + "!")); + }); + + oMyTask.addListener("alertSomething", function (nDeltaT, sUnit) { + alert("Worker waited for " + nDeltaT + " " + sUnit + " :-)"); + }); +</script> +</head> +<body> + <ul> + <li><a id="firstLink" href="javascript:oMyTask.sendQuery('getDifference', 5, 3);">What is the difference between 5 and 3?</a></li> + <li><a href="javascript:oMyTask.sendQuery('waitSomething');">Wait 3 seconds</a></li> + <li><a href="javascript:oMyTask.terminate();">terminate() the Worker</a></li> + </ul> +</body> +</html></pre> + +<p><strong>my_task.js</strong> (le worker) :</p> + +<pre class="brush: js">// vos fonctions PRIVEES personnalisées + +function myPrivateFunc1 () { + // instructions à exécuter +} + +function myPrivateFunc2 () { + // instructions à exécuter +} + +// etc. etc. + +// vos fonctions PUBLIQUES personnalisées (i.e. requêtables depuis la page principale) + +var queryableFunctions = { + // exemple #1 : obtenir la différence entre deux nombres : + getDifference: function (nMinuend, nSubtrahend) { + reply("printSomething", nMinuend - nSubtrahend); + }, + // exemple #2 : attendre trois secondes + waitSomething: function () { + setTimeout(function() { reply("alertSomething", 3, "seconds"); }, 3000); + } +}; + +// fonctions système + +function defaultQuery (vMsg) { + // votre fonction PUBLIQUE par défaut est exécutée seulement lorsque la page principale appelle la méthode queryableWorker.postMessage() directement + // instructions à exécuter +} + +function reply (/* listener name, argument to pass 1, argument to pass 2, etc. etc */) { + if (arguments.length < 1) { throw new TypeError("reply - not enough arguments"); return; } + postMessage({ "vo42t30": arguments[0], "rnb93qh": Array.prototype.slice.call(arguments, 1) }); +} + +onmessage = function (oEvent) { + if (oEvent.data instanceof Object && oEvent.data.hasOwnProperty("bk4e1h0") && oEvent.data.hasOwnProperty("ktp3fm1")) { + queryableFunctions[oEvent.data.bk4e1h0].apply(self, oEvent.data.ktp3fm1); + } else { + defaultQuery(oEvent.data); + } +};</pre> + +<p>Il est possible d'échanger le contenu de chaque message page principale -> worker et worker -> page principale.</p> + +<h3 id="Passage_de_données_par_transfert_de_propriété_(objets_transférables)">Passage de données par transfert de propriété (objets transférables)</h3> + +<p>Google Chrome 17+ et Firefox 18+ proposent une manière additionnelle de passer certains types d'objets (les objets <span class="external">transférables, c'est-à-dire les objets implémentant l'interface {{domxref("Transferable")}}</span>) vers ou à partir d'un worker avec une haute performance. Les objets transférables sont transférés d'un contexte vers un autre sans aucune opération de copie, ce qui conduit à d'énormes gains de performance lorsque de gros ensembles de données sont envoyés. Considérez la chose comme un passage par référence si vous venez du monde C/C++. Cependant, contrairement au passage par référence, la 'version' issue du contexte appelant n'est plus disponible une fois transférée. Sa propriété est transférée au nouveau contexte. Par exemple, lors du transfert d'un {{domxref("ArrayBuffer")}} à partir de votre application principale vers le script d'un worker, le {{domxref("ArrayBuffer")}} original est nettoyé et définitivement inutilisable. Son contenu est (tout à fait littéralement) transféré au contexte du worker.</p> + +<pre class="brush: js">// Crée un "fichier" de 32MB et le remplit. +var uInt8Array = new Uint8Array(1024*1024*32); // 32MB +for (var i = 0; i < uInt8Array.length; ++i) { + uInt8Array[i] = i; +} + +worker.postMessage(uInt8Array.buffer, [uInt8Array.buffer]); +</pre> + +<div class="note"> +<p><strong>Remarque </strong>: pour plus d'information sur les objets transférables, la performance et la détection de fonctionnalité de cette méthode, lisez <a href="http://updates.html5rocks.com/2011/12/Transferable-Objects-Lightning-Fast">Transferable Objects: Lightning Fast!</a> sur HTML5 Rocks.</p> +</div> + +<h2 id="Workers_embarqués">Workers embarqués</h2> + +<p>Il n'y a pas une manière "officielle" d'embarquer le code d'un worker dans une page web, comme les éléments {{ HTMLElement("script") }} le font pour les scripts normaux. Mais un élément {{ HTMLElement("script") }} qui n'aurait pas d'attribut <code>src</code> et dont l'attribut <code>type</code> n'identifierait pas un type MIME exécutable peut être considéré comme un élément de bloc de données dont JavaScript peut faire usage. Les "blocs de données" sont une caractéristique plus générale d'HTML5 qui peuvent contenir presque n'importe quelles données textuelles. Ainsi, un worker pourrait être embarqué de cette façon :</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> +<head> +<meta charset="UTF-8" /> +<title>MDN Example - Embedded worker</title> +<script type="text/js-worker"> + // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker. + var myVar = "Hello World!"; + // Le reste du code de votre worker commence ici. +</script> +<script type="text/javascript"> + // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript. + function pageLog (sMsg) { + // Utilisation d'un fragment : le navigateur réaffichera/réorganisera le DOM seulement une fois. + var oFragm = document.createDocumentFragment(); + oFragm.appendChild(document.createTextNode(sMsg)); + oFragm.appendChild(document.createElement("br")); + document.querySelector("#logDisplay").appendChild(oFragm); + } +</script> +<script type="text/js-worker"> + // Ce script NE SERA PAS traité par les moteurs JS parce que son type MIME est text/js-worker. + onmessage = function (oEvent) { + postMessage(myVar); + }; + // Le reste du code de votre worker commence ici. +</script> +<script type="text/javascript"> + // Ce script SERA analysé par les moteurs JS engines parce que son type MIME est text/javascript. + + // Dans le passé... : + // blob builder a existé + // ...mais nous utilisons désormais Blob...: + var blob = new Blob(Array.prototype.map.call(document.querySelectorAll("script[type=\"text\/js-worker\"]"), function (oScript) { return oScript.textContent; }),{type: "text/javascript"}); + + // Création d'une nouvelle propriété document.worker contenant tous nos scripts "text/js-worker". + document.worker = new Worker(window.URL.createObjectURL(blob)); + + document.worker.onmessage = function (oEvent) { + pageLog("Received: " + oEvent.data); + }; + + // Démarrage du worker. + window.onload = function() { document.worker.postMessage(""); }; +</script> +</head> +<body><div id="logDisplay"></div></body> +</html></pre> + +<p>Le worker embarqué est maintenant imbriqué dans une nouvelle propriété personnalisée <code>document.worker</code>.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Cette section fournit plusieurs exemples sur la façon d'utiliser les workers DOM.</p> + +<h3 id="Réaliser_des_calculs_en_arrière-plan">Réaliser des calculs en arrière-plan</h3> + +<p>Les workers sont principalement utiles pour permettre à votre code de réaliser des calculs très consommateur en CPU sans bloquer le thread de l'interface utilisateur. Dans cet exemple, un worker est utilisé pour calculer la suite de Fibonacci.</p> + +<h4 id="Le_code_JavaScript">Le code JavaScript</h4> + +<p>Le code JavaScript suivant est stocké dans le fichier "fibonacci.js" référencé par le fichier HTML dans la prochaine section.</p> + +<pre class="brush: js">var results = []; + +function resultReceiver(event) { + results.push(parseInt(event.data)); + if (results.length == 2) { + postMessage(results[0] + results[1]); + } +} + +function errorReceiver(event) { + throw event.data; +} + +onmessage = function(event) { + var n = parseInt(event.data); + + if (n == 0 || n == 1) { + postMessage(n); + return; + } + + for (var i = 1; i <= 2; i++) { + var worker = new Worker("fibonacci.js"); + worker.onmessage = resultReceiver; + worker.onerror = errorReceiver; + worker.postMessage(n - i); + } + };</pre> + +<p>Le worker affecte à la propriété <code>onmessage</code> une fonction qui recevra les messages envoyés lorsque la méthode <code>postMessage()</code> de l'objet worker est appelée (remarquez que cela diffère de définir une <em>variable</em> globale de ce nom, ou de définir une <em>fonction</em> avec ce nom. <code>var onmessage</code> <code>et function onmessage</code> définissent des propriétés globales avec ces noms, mais elles n'enregistrent pas la fonction pour recevoir les messages envoyés par la page web qui a créé le worker). Au démarrage de la récursion, il engendre ainsi de nouvelles copies de lui-même pour gérer chacune des itérations du calcul.</p> + +<h4 id="Le_code_HTML">Le code HTML</h4> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8" /> + <title>Test threads fibonacci</title> + </head> + <body> + + <div id="result"></div> + + <script language="javascript"> + + var worker = new Worker("fibonacci.js"); + + worker.onmessage = function(event) { + document.getElementById("result").textContent = event.data; + dump("Got: " + event.data + "\n"); + }; + + worker.onerror = function(error) { + dump("Worker error: " + error.message + "\n"); + throw error; + }; + + worker.postMessage("5"); + + </script> + </body> +</html> +</pre> + +<p>La page web crée un élément <code>div</code> avec l'ID <code>result</code> , qui sera utilisé pour afficher le résultat, puis engendre le worker. Après création du worker, le gestionnaire <code>onmessage</code> est configuré pour afficher les résultats en renseignant le contenu de l'élément <code>div</code>, et le gestionnaire <code>onerror</code> est configuré pour <a class="external" href="/en/Debugging_JavaScript#dump()" title="https://developer.mozilla.org/editor/fckeditor/core/editor/en/Debugging_JavaScript#dump()">capturer</a> le message d'erreur.</p> + +<p>Finalement, un message est envoyé au worker pour le démarrer.</p> + +<p><a class="external" href="/samples/workers/fibonacci" title="https://developer.mozilla.org/samples/workers/fibonacci/">Tester cet exemple</a>.</p> + +<h3 id="Réaliser_des_ES_web_en_arrière-plan">Réaliser des E/S web en arrière-plan</h3> + +<p>Vous pouvez trouver un tel exemple dans l'article <a class="internal" href="/En/Using_workers_in_extensions" title="En/Using workers in extensions">Using workers in extensions</a> .</p> + +<h3 id="Répartir_des_tâches_entre_plusieurs_workers">Répartir des tâches entre plusieurs workers</h3> + +<p>Les ordinateurs multi-coeur étant de plus en plus répandus, il est souvent utile de répartir le calcul de tâches complexes entre différents workers afin de tirer partie des coeurs de ces multiprocesseurs.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Web_Workers_API">API Web Workers</a></li> + <li><a href="/en-US/docs/Web/API/Web_Workers_API/basic_usage">Utilisation des web workers</a></li> +</ul> diff --git a/files/fr/conflicting/web/api/webrtc_api/index.html b/files/fr/conflicting/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..2d516d62d5 --- /dev/null +++ b/files/fr/conflicting/web/api/webrtc_api/index.html @@ -0,0 +1,52 @@ +--- +title: WebRTC +slug: Web/Guide/API/WebRTC +tags: + - Intro + - WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: Web/Guide/API/WebRTC +--- +<p><strong>WebRTC</strong> (où RTC signifie Real-Time Communications -Communications en temps réel-) est une technologie qui permet la transmission en continue (streaming) de l'audio/vidéo et le partage de données entre les navigateurs clients (peers). Comme un ensemble de normes (standards), le WebRTC fournit à n'importe quel navigateur la capacité de partager des données d'application et d'effectuer des téléconférences d’égal à égal, sans avoir à installer quelques plug-ins ou logiciels tiers.</p> +<p>Les composants WebRTC sont accessibles grâce aux APIs JavaScript : l'API de flux réseau (Network Stream), qui représente un flux de données audio ou vidéo ; l'API de Connexion (PeerConnection), qui permet à plusieurs utilisateurs de communiquer via leurs navigateurs ; et l'API DataChannel qui permet la communication d'autres types de données pour le jeu en temps réel, dialogue en ligne, transfert de fichiers, etc.</p> +<div class="note"> + <p><strong>Note:</strong> Cette documentation n'est pas à jour et est un travail en cours. <strong>Vous voulez aider?</strong> Nous avons besoin de personnes pour parcourir ces docs et les mettre à jour, tout autant que de documenter les APIs dans notre référence d’API! Consultez notre guide à la page <a href="/fr/docs/MDN/Débuter_sur_MDN">Débuter sur MDN</a> si vous voulez aider.</p> +</div> +<h2 id="Guide">Guide</h2> +<dl> + <dt> + <a href="/fr/docs/WebRTC/Introduction" title="/fr/docs/WebRTC/Introduction">Introduction au WebRTC</a></dt> + <dd> + Guide d'introduction à ce qu’est WebRTC et comment ça marche.</dd> + <dt> + <a href="/fr/docs/WebRTC/communication-de-pair-a-pair-avec-WebRTC" title="Communication de pair-à-pair avec WebRTC">Communications Peer-to-peer avec WebRTC</a></dt> + <dd> + Comment faire pour effectuer des communications peer-to-peer en utilisant les APIs WebRTC.</dd> + <dt> + <a href="/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam" title="Prendre des photos avec la webcam">Prendre des photos avec la webcam</a></dt> + <dd> + Un guide d'introduction à ce qu’est WebRTC et à comment ça marche.</dd> + <dt> + <a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture" title="/fr/docs/Web/Guide/API/WebRTC/WebRTC_architecture">Introduction à l'architecture WebRTC</a></dt> + <dd> + <strong>(AKA "WebRTC et l'océan des acronymes")</strong> WebRTC a beaucoup de parties différentes et cela peut être accablant et source de confusion pour les nouveaux venus. Cet article a pour but d'expliquer qu’elles sont toutes les pièces, et comment elles s'imbriquent.</dd> + <dt> + <a href="/fr/docs/Web/Guide/API/WebRTC/WebRTC_basics" title="/fr/docs/Web/Guide/API/WebRTC/WebRTC_basics">L’essentiel du WebRTC</a></dt> + <dd> + Maintenant que vous comprenez l'architecture WebRTC, vous pouvez passer à cet article, qui vous emmène à travers la création d'une application multi-navigateur RTC simple.</dd> +</dl> +<h2 id="Référence">Référence</h2> +<dl> + <dt> + <a href="/fr/docs/Web/API/Navigator.getUserMedia">Navigator.getUserMedia</a></dt> + <dd> + L'API pour capturer des médias (audio/video).</dd> + <dt> + <a href="/fr/docs/Web/API/RTCPeerConnection">RTCPeerConnection</a></dt> + <dd> + L'interface traitant en continu des données entre deux pairs.</dd> + <dt> + <a href="/fr/docs/Web/API/RTCDataChannel">RTCDataChannel</a></dt> + <dd> + L'interface pour l'envoi des données arbitraires à travers la connexion de pair (peer connection).</dd> +</dl> diff --git a/files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html b/files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html new file mode 100644 index 0000000000..7bff67c30f --- /dev/null +++ b/files/fr/conflicting/web/api/webrtc_api_d8621144cbc61520339c3b10c61731f0/index.html @@ -0,0 +1,77 @@ +--- +title: WebRTC +slug: WebRTC +tags: + - WebRTC +translation_of: Web/API/WebRTC_API +translation_of_original: WebRTC +--- +<p>Le RTC de WebRTC est synonyme de communications en temps réel, la technologie qui permet streaming audio / vidéo et le partage de données entre les clients de navigateur (pairs). Comme ensemble de normes, WebRTC permet à n'importe quel navigateur d'avoir la possibilité de partager les données d'application et d'effectuer des téléconférences entre pairs, sans la nécessité d'installer des plug-ins ou logiciels tiers.</p> + +<div> </div> + +<div>Les composants WebRTC sont accessibles avec JavaScript API. Sont actuellement en développement les flux de réseau API, ce qui représente un fichier audio ou un flux de données vidéo, et l'API de connexion, qui permet à deux ou plusieurs utilisateurs de communiquer par l'intermédiaire des navigateurs. Également en cours de développement : une API qui permet la communication par DataChannel d'autres types de données pour les jeux en temps réel, chat texte, transfert de fichiers, et ainsi de suite.</div> + +<div> </div> + +<div>Envie de découvrir WebRTC ? <a href="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video" title="https://mozillaignite.org/resources/labs/future-uses-of-webrtc-video">Suivre cette introduction vidéo </a>! (en Anglais)</div> + +<div> </div> + +<div> </div> + +<table class="topicpage-table"> + <tbody> + <tr> + <td> + <h2 class="Documentation" id="Documentation" name="Documentation">Documentation de WebRTC</h2> + + <dl> + <dt><a href="https://developer.mozilla.org/fr/docs/WebRTC/Introduction" title="https://developer.mozilla.org/fr/docs/WebRTC/Introduction">Introduction à WebRTC</a></dt> + <dd>Un guide d'introduction pour comprendre ce qu'est WebRTC et comment il fonctionne.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/WebRTC/Using_the_Network_Stream_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/Using_the_Network_Stream_API">Utilisation de l'API de flux réseau</a></dt> + <dd>Un guide d'utilisation de l'API de flux réseau pour diffuser de l'audio et de la vidéo.</dd> + <dt><a href="/fr/docs/WebRTC/communication-de-pair-a-pair-avec-WebRTC" title="https://developer.mozilla.org/en-US/docs/WebRTC/Peer-to-peer_communications_with_WebRTC">Communications de pair-à-pair avec WebRTC</a></dt> + <dd>Comment effectuer des communications pair-à-pair en utilisant l'Api WebRTC.</dd> + <dt><a href="https://developer.mozilla.org/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam" title="https://developer.mozilla.org/fr/docs/WebRTC/Prendre_des_photos_avec_la_webcam">Prendre des photos avec la webcam</a></dt> + <dd> </dd> + <dt><a href="/fr/docs/WebRTC/MediaStream_API" title="https://developer.mozilla.org/en-US/docs/WebRTC/MediaStream_API">MediaStream API</a></dt> + <dd>L'API qui permet la production et la manipulation d'objets de flux multimédia.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia" title="https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia">getUserMedia ()</a></dt> + <dd>La fonction de navigation qui permet d'accéder aux périphériques du système des médias.</dd> + </dl> + + <p><span class="alllinks"><a href="https://developer.mozilla.org/en-US/docs/tag/WebRTC" title="https://developer.mozilla.org/en-US/docs/tag/WebRTC">Afficher tout ...</a></span></p> + </td> + <td> + <h2 class="Community" id="Community" name="Community">Obtenir de l'aide de la communauté</h2> + + <p>Lors du développement de sites et d'applications Web qui tirent parti des technologies WebRTC, il peut être utile d'engager la conversation avec les autres.</p> + + <ul> + <li>Consultez le forum au sujet des Médias: {{DiscussionList ("dev-média", "mozilla.dev.media")}}</li> + </ul> + + <ul> + <li>Posez votre question sur le canal IRC de Mozilla médias: # media</li> + </ul> + + <p><span class="alllinks"><a class="external" href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">N'oubliez pas la netiquette...</a></span></p> + + <h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets liés</h2> + + <ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video" title="/en-US/docs/Using_HTML5_audio_and_video">Utiliser l'audio et la vidéo HTML5</a></li> + </ul> + + <h2 class="Tools" id="Ressource">Ressource</h2> + + <ul> + <li>{{spec("http://www.w3.org/TR/webrtc/", "WebRTC specification", "wd")}}</li> + </ul> + </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/fr/conflicting/web/api/window/localstorage/index.html b/files/fr/conflicting/web/api/window/localstorage/index.html new file mode 100644 index 0000000000..9f6c400f86 --- /dev/null +++ b/files/fr/conflicting/web/api/window/localstorage/index.html @@ -0,0 +1,135 @@ +--- +title: LocalStorage +slug: Web/API/Storage/LocalStorage +translation_of: Web/API/Window/localStorage +translation_of_original: Web/API/Web_Storage_API/Local_storage +--- +<p>{{APIRef()}}</p> + +<p>La propriété <code>localStorage</code> de l’objet <code>Window</code> est comparable à {{ DOMxRef("Window.sessionStorage", "sessionStorage") }} (la même {{ Glossary("same-origin_policy", "politique de même origine") }} est appliquée), mais les données enregistrées sont persistantes d’une session à l’autre. <code>localStorage</code> a été introduit dans Firefox 3.5.</p> + +<div class="note"><strong>Note :</strong> Quand le navigateur est en mode navigation privée, une nouvelle base de donnée temporaire est créée pour stocker les données locales ; cette base de données est vidée et supprimée quand le mode de navigation privée est arrêté.</div> + +<pre class="brush:js">// Sauvegarder les informations dans l’espace local courant +localStorage.setItem("username", "John"); + +// Accéder à des données enregistrées +alert("username = " + localStorage.getItem("username"));</pre> + +<p class="note">La persistence de <code>localStorage</code> le rend utile pour une varitété d’usages, comprenant des compteurs de vues de page comme démontré dans ce <a href="http://codepen.io/awesom3/pen/Hlfma">tutoriel sur Codepen</a>.</p> + +<h2 id="Compatibilité">Compatibilité</h2> + +<p>Les objets {{ DOMxRef("Storage") }} sont un ajout récent au standard. Ainsi, ils pourraient ne pas être présents dans tous les navigateurs. Il est possible de contourner ce problème en insérant l’un des deux codes suivants au début de vos scripts. Cela vous permettra d’utiliser l’objet <code>localStorage</code> dans les navigateurs qui ne le supportent pas nativement.</p> + +<p>Cet algorithme est une imitation exacte de l’objet <code>localStorage</code>, mais utilise les cookies.</p> + +<pre class="brush:js">if (!window.localStorage) { + Object.defineProperty(window, "localStorage", new (function () { + var aKeys = [], oStorage = {}; + Object.defineProperty(oStorage, "getItem", { + value: function (sKey) { return sKey ? this[sKey] : null; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "key", { + value: function (nKeyId) { return aKeys[nKeyId]; }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "setItem", { + value: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "length", { + get: function () { return aKeys.length; }, + configurable: false, + enumerable: false + }); + Object.defineProperty(oStorage, "removeItem", { + value: function (sKey) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + }, + writable: false, + configurable: false, + enumerable: false + }); + this.get = function () { + var iThisIndx; + for (var sKey in oStorage) { + iThisIndx = aKeys.indexOf(sKey); + if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); } + else { aKeys.splice(iThisIndx, 1); } + delete oStorage[sKey]; + } + for (aKeys; aKeys.length > 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); } + for (var aCouple, iKey, nIdx = 0, aCouples = document.cookie.split(/\s*;\s*/); nIdx < aCouples.length; nIdx++) { + aCouple = aCouples[nIdx].split(/\s*=\s*/); + if (aCouple.length > 1) { + oStorage[iKey = unescape(aCouple[0])] = unescape(aCouple[1]); + aKeys.push(iKey); + } + } + return oStorage; + }; + this.configurable = false; + this.enumerable = true; + })()); +} +</pre> + +<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par la capacité des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.setItem()</code> et <code>localStorage.removeItem()</code> pour ajouter, changer ou supprimer une clé. L’utilisation des méthodes <code>localStorage.yourKey = yourValue;</code> et <code>delete localStorage.yourKey;</code> pour définir ou supprimer une clé n’est <strong>pas sécurisée avec ce code.</strong> Vous pouvez également changer son nom et l’utiliser pour gérer uniquement les cookies indépendamment de l’objet <code>localStorage</code>.</div> + +<div class="note"><strong>Note :</strong> En remplaçant <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées entre les fenêtres et onglets du navigateur (et sera nettoyée seulement quand toutes les fenêtres du navigateur sont fermées), tandis qu’une implémentation fidèle de <code>sessionStorage</code> restreint les valeurs stockées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div> + +<p>Voici une autre imitation, moins exacte, de l’objet <code>localStorage</code>. Elle est plus simple que la version précédente, mais est compatible avec les navigateur plus anciens comme Internet Explorer < 8 (<strong>testé et vérifié même avec Internet Explorer 6</strong>). Ce code utilise également les cookies.</p> + +<pre class="brush:js">if (!window.localStorage) { + window.localStorage = { + getItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return null; } + return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1")); + }, + key: function (nKeyId) { + return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); + }, + setItem: function (sKey, sValue) { + if(!sKey) { return; } + document.cookie = escape(sKey) + "=" + escape(sValue) + "; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"; + this.length = document.cookie.match(/\=/g).length; + }, + length: 0, + removeItem: function (sKey) { + if (!sKey || !this.hasOwnProperty(sKey)) { return; } + document.cookie = escape(sKey) + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; + this.length--; + }, + hasOwnProperty: function (sKey) { + return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie); + } + }; + window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length; +} +</pre> + +<div class="note"><strong>Note :</strong> La taille maximale des données est limitée par les capacités des cookies. Avec cet algorithme, utilisez les fonctions <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code>, et <code>localStorage.removeItem()</code> pour récupérer, ajouter, modifier ou supprimer une clé. L’utilsation de la méthode <code>localStorage.yourKey</code> pour récupérer, définir, ou supprimer une clé <strong>n’est pas possible avec ce code</strong>. Vous pouvez également changer son nom et l’utiliser pour gérer les cookies indépendamment de l’objet <code>localStorage</code>.</div> + +<div class="note"><strong>Note :</strong> En remplaçant la chaîne <code>"; expires=Tue, 19 Jan 2038 03:14:07 GMT; path=/"</code> par <code>"; path=/"</code> (et en changeant le nom de l’objet), cela deviendra un polyfill pour <code>sessionStorage</code> plutôt que pour <code>localStorage</code>. Cependant, cette implémentation partagera les valeurs stockées au travers des onglets et fenêtres du navigateur (et seront supprimée uniquement quand toutes les fenêtres du navigateur seront fermées), alors qu’une implémentation pleinement compatible avec <code>sessionStorage</code> restreint les valeurs sauvegardées au {{ Glossary("Browsing_context", "contexte de navigation") }} actuel uniquement.</div> + +<h3 id="Compatibilité_et_relation_avec_globalStorage">Compatibilité et relation avec globalStorage</h3> + +<p><code>localStorage</code> est équivalent à <code>globalStorage[location.hostname]</code>, à la différence qu’il est rattaché à une {{ Glossary("origine") }} HTML5, et que <code>localStorage</code> est une instance de <code>Storage</code>, contrairement à <code>globalStorage[location.hostname]</code> qui est une instance de <code>StorageObsolete</code> (qui est abordé ci-dessous). Par exemple, <a class="external" href="http://example.com" rel="freelink">http://example.com</a> ne sera pas capable d’accéder au même objet <code>localStorage</code> que <a class="link-https" href="https://example.com" rel="freelink">https://example.com</a> mais il pourront accéder au même élément <code>globalStorage</code>. <code>localStorage</code> est une interface standard alors que <code>globalStorage</code> n’est pas standard. Ainsi, vous ne devriez pas vous fier à cette dernière.</p> + +<p>Veuillez noter que définir une propriété sur <code>globalStorage[location.hostname]</code> n’entraîne <strong>pas</strong> sa définition sur <code>localStorage</code>, et qu’étendre <code>Storage.prototype</code> n’affecte pas les objets <code>globalStorage</code> ; pour faire ainsi, c’est <code>StorageObsolete.prototype</code> qu’il faut étendre.</p> + +<h2 id="Format_de_stockage">Format de stockage</h2> + +<p>Les clés et les valeurs de <code>Storage</code> sont stockées au format {{ DOMxRef("DOMString") }} UTF-16, qui utilise 2 octets par caractère.</p> diff --git a/files/fr/conflicting/web/api/xsltprocessor/index.html b/files/fr/conflicting/web/api/xsltprocessor/index.html new file mode 100644 index 0000000000..0b42bdbde9 --- /dev/null +++ b/files/fr/conflicting/web/api/xsltprocessor/index.html @@ -0,0 +1,44 @@ +--- +title: XSLT dans Gecko +slug: XSLT_dans_Gecko +tags: + - XSLT +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLT_in_Gecko +--- +<p> </p> + +<ol> + <li><a href="/fr/docs/XSLT_dans_Gecko">Introduction</a></li> + <li><a href="/fr/docs/XSLT_dans_Gecko/Exemple_basique">Exemple basique</a></li> + <li><a href="/fr/docs/XSLT_dans_Gecko/G%c3%a9n%c3%a9ration_de_HTML">Génération de HTML</a></li> + <li><a href="/fr/docs/XSLT_dans_Gecko/Diff%c3%a9rences_entre_les_navigateurs">Différences entre les navigateurs</a></li> + <li><a href="/fr/docs/XSLT_dans_Gecko/Ressources">Ressources</a></li> +</ol> + +<p> </p> + +<h2 id="Introduction" name="Introduction">Introduction</h2> + +<p>Une des tendances notables dans les standards du W3C a été l'effort de séparation du contenu et du style. Cela permet de réutiliser un même style pour de multiple contenus, mais également de simplifier le travail de maintenance et de permettre une modification rapide (en ne modifiant qu'un seul et unique fichier) de la charte graphique du contenu.</p> + +<p>CSS (Cascade Style Sheets) a été l'un des premiers moyens proposés par le W3C. CSS est un moyen simple d'appliquer des règles de style à un document Web. Ces règles de style définissent de quelle façon le document (le contenu) doit s'afficher. Cependant, CSS a plusieurs limitations, telles l'absence de structures de programmation et l' impossibilité de créer des modèles de rendu complexes. CSS possède également un support limité des changements de position d'un élément.</p> + +<p>Les transformations XSL (eXtensible Stylesheet Language) sont composées de deux parties : les éléments XSL, qui permettent la transformation d'un arbre XML en un arbre possédant un balisage différent, et XPath, un langage de sélection pour les arbres. XSLT traite un document XML (le contenu) et crée un nouveau document basé sur les règles contenues dans une feuille de style XSL. Ceci permet à XSLT d'ajouter, d'enlever, de réorganiser les éléments du document XML original et permet ainsi un contrôle plus fin de la structure du document résultant.</p> + +<p>Les transformations XSLT sont basées sur des règles qui sont constituées de modèles. Chaque modèle détermine à quels fragments du document XML d'entrée il applique (à l'aide de XPath) les règles de substitution qu'il contient pour créer le nouveau document en sortie.</p> + +<p>{{Next("XSLT dans Gecko:Exemple basique")}}</p> + +<div class="originaldocinfo"> +<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3> + +<ul> + <li>Auteur(s) : Doron Rosenberg</li> + <li>Dernière mise à jour : 30 janvier 2003</li> + <li>Copyright : © 2003 Netscape Communications.</li> + <li>URL : <a class="external" href="http://devedge-temp.mozilla.org/viewsource/2003/xslt-browser/index_en.html">XSLT in Netscape Gecko</a></li> +</ul> +</div> + +<p><span class="comment">Interwiki Languages Links</span></p> diff --git a/files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html b/files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html new file mode 100644 index 0000000000..940157af5f --- /dev/null +++ b/files/fr/conflicting/web/api/xsltprocessor_197eea6e529b0a946d29ce7cc292e7ef/index.html @@ -0,0 +1,15 @@ +--- +title: XSLTProcessor +slug: XSLTProcessor +translation_of: Web/API/XSLTProcessor +translation_of_original: XSLTProcessor +--- +<p> +</p><p>XSLTProcesor est un objet fournissant une interface avec le moteur XSLT de Mozilla. Il est utilisable par du code JavaScript sans privilèges. +</p> +<ul><li> <a href="fr/Utilisation_de_l'interface_JavaScript_de_Mozilla_pour_les_transformations_XSL">Utilisation de l'interface JavaScript de Mozilla pour les transformations XSL</a> +</li><li> <a href="fr/L'interface_XSLT%2f%2fJavaScript_dans_Gecko">L'interface XSLT/JavaScript dans Gecko</a> +</li><li> <a class="external" href="http://xulplanet.com/references/objref/XSLTProcessor.html">XULPlanet reference (en)</a> +</li></ul> +<p><span>Interwiki Languages Links</span> +</p>{{ languages( { "en": "en/XSLTProcessor" } ) }} diff --git a/files/fr/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html b/files/fr/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html new file mode 100644 index 0000000000..17459c2dfd --- /dev/null +++ b/files/fr/conflicting/web/api_dd04ca1265cb79b990b8120e5f5070d3/index.html @@ -0,0 +1,124 @@ +--- +title: WebAPI +slug: WebAPI +tags: + - Portail +translation_of: Web/API +translation_of_original: WebAPI +--- +<p>Le terme <strong>WebAPI</strong> permet de regrouper différentes API permettant d'accéder aux composants ou aux caractéristiques des appareil (comme la batterie, les vibrations...). Elles permettent aussi d'accéder aux informations enregistrées sur l'appareil (liste de contacts, agenda...). En créant ces API, nous espérons offrir de nouvelles possibilités au Web, jusqu'a présent réservées aux plates-formes propriétaires.</p> + +<div class="note"> +<p><strong>Note :</strong> La documentation semble légère sur le sujet : il n'en est rien. Beaucoup de documents ont été écrits et des liens sont en train d'être ajoutés. Nous travaillons beaucoup à améliorer cela, de nombreux articles apparaîtront très prochainement. Vous pouvez consulter la page <a href="/fr/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">de l'état de documentation sur WebAPI </a>qui récapitule le travail fait sur la documentation WebAPI.</p> +</div> + +<div class="note"> +<p><strong>Note :</strong> Pour obtenir des explications rapides sur chaque badge, consultez la documentation sur les <a href="/fr/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="Web/Apps/Packaged_apps#Types_of_packaged_apps">applications </a>.</p> +</div> + +<div class="row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="Communication_APIs" name="Communication_APIs">Les API de Communication</h2> + +<dl> + <dt><a href="/fr/docs/WebAPI/WebBluetooth" title="WebAPI/WebBluetooth">Bluetooth</a></dt> + <dd>L'API WebBluetooth permet d'accéder, à un bas niveau, aux fonctionnalités Bluetooth de l'appareil.</dd> + <dt><a href="/fr/docs/WebAPI/Mobile_Connection" title="WebAPI/Mobile_Connection">Mobile Connection API</a> {{NonStandardBadge}}</dt> + <dd>Cette API permet de connaître les informations concernant la connexion : force du signal, informations sur l'opérateur ...</dd> + <dt><a href="/fr/docs/WebAPI/Network_Information" title="WebAPI/Network_Information">Network Information API</a></dt> + <dd>Cette API fournit des informations de bases sur la connexion réseau utilisée (la vitesse de connexion entre autres).</dd> + <dt><a href="/fr/docs/WebAPI/Network_Stats" title="WebAPI/Network_Stats">Network Stats API</a> {{NonStandardBadge}}</dt> + <dd>Cette API enregistres des données sur l'utilisation des données réseaux et fournit cette information aux applications disposant des privilèges nécessaires.</dd> + <dt><a href="/fr/docs/WebAPI/WebTelephony" title="WebAPI/WebTelephony">Telephony</a> {{NonStandardBadge}}</dt> + <dd>Cette API permet aux applications d'interagir avec les appels téléphoniques en utilisant l'interface utilisateur.</dd> + <dt><a href="/fr/docs/WebAPI/WebSMS" title="WebAPI/WebSMS">WebSMS </a>{{NonStandardBadge}}</dt> + <dd>Cette API permet aux applications d'envoyer/recevoir des SMS et d'accéder aux messages enregistrés dans l'appareil.</dd> + <dt><a href="/fr/docs/WebAPI/WiFi_Information" title="WebAPI/WiFi_Information">WiFi Information API</a> {{NonStandardBadge}}</dt> + <dd>Cette API est un API avec privilèges permettant de fournir des informations liées au WiFi : réseau utilisé, force du signal, réseaux disponibles...</dd> +</dl> + +<h2 class="Documentation" id="Hardware_access_APIs" name="Hardware_access_APIs">Les API Matériel</h2> + +<dl> + <dt><a href="/fr/docs/WebAPI/Using_Light_Events">Ambient Light Sensor API</a></dt> + <dd>Cette API fournit un accès au capteur de lumière environnante. Cela permet à l'application de connaître la luminosité présente autour de l'appareil.</dd> + <dt><a href="/fr/docs/WebAPI/Battery_Status" title="WebAPI/Battery_Status">Battery Status API</a></dt> + <dd>Cette API fournit des informations sur la batterie (niveau de la charge, savoir si l'appareil est en cours de charge...).</dd> + <dt><a href="/fr/docs/WebAPI/Camera" title="WebAPI/Camera">Camera API</a> {{NonStandardBadge}}</dt> + <dd>Cette API permet aux applications de prendre des photos et/ou d'enregistrer des vidéos en utilisant l'appareil photo et/ou la caméra.</dd> + <dt><a href="/fr/docs/Using_geolocation" title="Using_geolocation">Geolocation API</a></dt> + <dd>Cette API fournit des informations sur la position géographique de l'appareil.</dd> + <dt><a href="/fr/docs/WebAPI/Pointer_Lock" title="API/Pointer_Lock_API">Pointer Lock API</a></dt> + <dd>Cette API permet aux applications de verrouiller l'accès du pointeur (de la souris) et d'accéder aux déplacements (relatifs) et non aux coordonnées absolues. Cela est particulièrement utile pour les jeux.</dd> + <dt><a href="/fr/docs/WebAPI/Power_Management" title="WebAPI/Power_Management">Power Management API </a>{{NonStandardBadge}}</dt> + <dd>Cette API permet aux application d'allumer ou d'éteindre l'écran, le processeur, de connaître la puissance de l'appareil, le processeur... Elle permet aussi de surveiller (écoute et inspection) les événements de verrouillage des ressources (resources lock).</dd> + <dt><a href="/fr/docs/WebAPI/Proximity" title="WebAPI/Proximity">Proximity API</a></dt> + <dd>Cette API permet aux applications de détecter si quelque chose est à proximité de l'appareil (par exemple le visage de l'utilisateur).</dd> + <dt><a href="/fr/docs/WebAPI/Detecting_device_orientation" title="WebAPI/Detecting_device_orientation">Device Orientation API</a></dt> + <dd>Cette API permet d'envoyer des notifications lorsque l'appareil change d'orientation.</dd> + <dt><a href="/fr/docs/WebAPI/Managing_screen_orientation" title="WebAPI/Detecting_device_orientation">Screen Orientation API</a></dt> + <dd>Cette API permet d'envoyer des notifications lorsque l'écran change d'orientation. Il est aussi possible d'utiliser cette API pour permettre à l'API d'indiquer l'orientation à utiliser par l'application.</dd> + <dt><a href="/fr/docs/WebAPI/Vibration" title="WebAPI/WebBluetooth">Vibration API</a></dt> + <dd>Cette API permet aux applications de contrôler les vibrations de l'appareil. Cela peut permettre de faire vibrer l'appareil pendant un jeu par exemple. <strong>Cette API n'est pas conçue</strong> pour provoquer des vibrations de notifications (dans ce cas il faut utiliser l'API <a href="/fr/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm</a>).</dd> + <dd style="margin-left: 160px;"><span class="alllinks"><a href="https://developer.mozilla.org/fr/docs/tag/WebAPI" title="tag/CSS">Voir tout...</a></span></dd> +</dl> +</div> + +<div class="section"> +<h2 class="Documentation" id="Data_management_APIs" name="Data_management_APIs">Les API de gestion des données</h2> + +<dl> + <dt><a href="/fr/docs/WebAPI/FileHandle_API" title="WebAPI/FileHandle_API">FileHandle API</a></dt> + <dd>Cette API permet d'interagir avec les fichiers en écriture tout en gérant les options de verrouillages.</dd> + <dt><a href="/fr/docs/IndexedDB" title="IndexedDB">IndexedDB</a></dt> + <dd>Permet de stocker des informations côté client et fournit un support pour effectuer des recherches de manière performante. <strong>Ces documents doivent être déplacés.</strong></dd> + <dt><a href="/fr/docs/WebAPI/Settings" title="WebAPI/Settings">Settings API</a> {{NonStandardBadge}}</dt> + <dd>Cette API permet aux applications de connaître et de modifier les options liées à la configuration du système, enregistrées de manière permanente dans l'appareil.</dd> +</dl> + +<h2 class="Documentation" id="Other_APIs" name="Other_APIs">Les autres API</h2> + +<dl> + <dt><a href="/fr/docs/WebAPI/Alarm" title="WebAPI/Alarm">Alarm API</a></dt> + <dd>Cette API permet aux applications de planifier des notifications. Elle offre également la possibilité de lancer une application de manière automatique à un moment donné.</dd> + <dt><a href="/fr/docs/Apps" title="Apps">Apps API</a> {{NonStandardBadge}}</dt> + <dd>Cette API d'applications web offre la possibilité de gérer et d'installer des applications web. Cette API permet aussi aux applications de définir les informations liées au paiement.</dd> + <dt><a href="/fr/docs/WebAPI/Browser" title="DOM/Using_the_Browser_API"><strong>Browser API</strong></a> {{NonStandardBadge}}</dt> + <dd>Cette API offre la possibilité de construire un navigateur web en n'utilisant que des technologies Web (et donc un navigateur dans un navigateur).</dd> +</dl> + +<dl> + <dt><a href="/fr/docs/WebAPI/Idle" title="WebAPI/Device_Storage_API">Idle API</a></dt> + <dd>Cette API permet aux applications de recevoir des notifications, notamment lorsque l'utilisateur n'est pas en train d'utiliser l'appareil.</dd> + <dt><a href="/fr/docs/WebAPI/Permissions" title="WebAPI/Permissions">Permissions API</a> {{NonStandardBadge}}</dt> + <dd>Cette API permet de gérer les autorisations des applications au sein d'un même endroit. Elle est utilisée par l'application Réglages.</dd> + <dt><a href="/fr/docs/WebAPI/Simple_Push" title="WebAPI/Push_Notifications">Simple Push API</a></dt> + <dd>Cette API permet à la plate-forme d'envoyer des messages de notifications à certaines applications en particulier.</dd> + <dt><a href="/fr/docs/WebAPI/Time_and_Clock" title="WebAPI/Time_and_Clock">Time/Clock API</a> {{NonStandardBadge}}</dt> + <dd>Cette API offre la possibilité de régler l'heure. Le fuseau horaire est lui réglé avec l'<a href="/en-US/docs/WebAPI/Settings" title="WebAPI/Settings"> API Settings</a>.</dd> + <dt><a href="/fr/docs/WebAPI/Web_Activities" title="WebAPI/Web_Activities">Web Activities</a> {{NonStandardBadge}}</dt> + <dd>Cette API permet à une application de déléguer une activité à une autre application. Un application peut, par exemple, demander à une autre application de sélectionner (ou de créer) une photo et de la renvoyer à la première application. C'est généralement l'utilisateur qui sera capable de configurer la façon dont les applications seront choisies.</dd> +</dl> + +<h2 class="Community" id="Community" name="Community">La communauté WebAPI</h2> + +<p>Si vous souhaitez avoir de l'aide concernant ces API, il y a plusieurs moyens d'échanger avec les autres développeurs.</p> + +<ul> + <li>Le forum WebAPI : {{DiscussionList("dev-webapi", "mozilla.dev.webapi")}}</li> + <li>Le canal IRC WebAPI : <a href="irc://irc.mozilla.org/webapi" title="irc://irc.mozilla.org/webapi">#webapi</a></li> +</ul> + +<p><span class="alllinks"><a href="http://www.catb.org/~esr/faqs/smart-questions.html" title="http://www.catb.org/~esr/faqs/smart-questions.html">N'oubliez pas la <em>netiquette</em>...</a></span></p> + +<h2 class="Related_Topics" id="Related_Topics" name="Related_Topics">Sujets Annexes</h2> + +<ul> + <li>Le <a href="/fr/docs/DOM" title="Document Object Model (DOM)">Document Object Model (DOM)</a>, représentant la structure du document HTML comme un arbre</li> + <li><a href="/fr/docs/JavaScript" title="JavaScript">JavaScript</a> - Langage de script largement utilisé sur le Web.</li> + <li><a href="/fr/docs/WebAPI/Doc_status" title="WebAPI/Doc_status">Doc status</a>: Une liste de sujets en lien avec WebAPI ainsi que l'état de leur documentation</li> +</ul> +</div> +</div> + +<p> </p> diff --git a/files/fr/conflicting/web/css/@viewport/index.html b/files/fr/conflicting/web/css/@viewport/index.html new file mode 100644 index 0000000000..bd7b0871c9 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport/index.html @@ -0,0 +1,77 @@ +--- +title: height +slug: Web/CSS/@viewport/height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/height +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-height", "min-height")}} et {{cssxref("@viewport/max-height", "max-height")}}.</p> + +<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la hauteur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la hauteur minimale de la zone d'affichage et la deuxième à la hauteur maximale.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Une valeur de longueur */ +/* Type <length> ou <percentage> */ +height: auto; +height: 320px; +height: 15em; + +/* Deux valeurs de longueur */ +height: 320px 200px; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une longueur relative ou absolue qui doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur exprimée en pourcentages qui est relative à la hauteur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + height: 500px; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-height', '"height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.viewport.height")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_3ecbd2877baedebcfaffc13eaa7d61ce/index.html b/files/fr/conflicting/web/css/@viewport_3ecbd2877baedebcfaffc13eaa7d61ce/index.html new file mode 100644 index 0000000000..45f9b90ef5 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_3ecbd2877baedebcfaffc13eaa7d61ce/index.html @@ -0,0 +1,69 @@ +--- +title: user-zoom +slug: Web/CSS/@viewport/user-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/user-zoom +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>user-zoom</code></strong>, utilisé dans la règle @ {{cssxref("@viewport")}}, définit si l'utilisateur doit pouvoir modifier le niveau de zoom d'un document dans la zone d'affichage (<em>viewport</em>).</p> + +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +user-zoom: zoom; +user-zoom: fixed; +</pre> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>zoom</code></dt> + <dd>L'utilisateur peut zoomer/dézoomer.</dd> + <dt><code>fixed</code></dt> + <dd>L'utilisateur ne peut ni zoomer ni dézoomer.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Specifications" name="Specifications">Accessibilité</h2> + +<p>Supprimer la possibilité de zoomer empêche les personnes ayant une vision faible de lire et de comprendre le contenu de la page.</p> + +<ul> + <li><a href="/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background">Explications des recommendations WCAG 1.4</a></li> + <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html" rel="noopener">Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0</a></li> +</ul> + +<h2 id="Specifications" name="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#the-lsquouser-zoomrsquo-descriptor', '"user-zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.viewport.user-zoom")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html b/files/fr/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html new file mode 100644 index 0000000000..fd3499f24c --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_516ab4b0283b5b2231fb657505e22440/index.html @@ -0,0 +1,77 @@ +--- +title: max-height +slug: Web/CSS/@viewport/max-height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-height +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>max-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur maximale de la zone d'affichage (<em>viewport</em>) d'un document.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Avec un mot-clé */ +max-height: auto; + +/* Valeur de longueur */ +/* Type <length> */ +max-height: 400px; +max-height: 50em; +max-height: 20cm; + +/* Valeur proportionnelle */ +/* Type <percentage> */ +max-height: 75%;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + max-height: 600px; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-height', '"max-height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.viewport.max-height")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html b/files/fr/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html new file mode 100644 index 0000000000..295e87ce7a --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_6e9c91ec34cdb0393d301240d0d50d84/index.html @@ -0,0 +1,70 @@ +--- +title: min-zoom +slug: Web/CSS/@viewport/min-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-zoom +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>min-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom minimal en-dessous duquel le navigateur ne réduira pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p> + +<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeur avec un mot-clé */ +min-zoom: auto; + +/* Nombres : type <number> */ +min-zoom: 0.8; +min-zoom: 2.0; + +/* Valeurs proportionnelles : type <percentage> */ +min-zoom: 150%; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd> + <dt><code><number></code></dt> + <dd>Un nombre positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<number>")}}).</dd> + <dt><code><percentage></code></dt> + <dd>Un pourcentage positif qui correspond à la limite basse du niveau de zoom (cf. {{cssxref("<percentage>")}}).</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#min-zoom-desc', '"min-zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.viewport.min-zoom")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html b/files/fr/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html new file mode 100644 index 0000000000..42e89f24e5 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_7861ca3461a359b150d44f2c8d74e53a/index.html @@ -0,0 +1,65 @@ +--- +title: orientation +slug: Web/CSS/@viewport/orientation +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/orientation +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>orientation</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir l'orientation d'un document.</p> + +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +orientation: auto; +orientation: portrait; +orientation: landscape; +</pre> + +<p>Pour les agents utilisateurs et/ou les appareils pour lesquels l'orientation est modifiée en orientant l'appareil, l'auteur pourra utiliser ce descripteur afin d'inhiber le changement d'orientation lié à la stimulation physique.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>L'agent utilisateur déterminera l'orientation du document automatiquement. Généralement, il utilisera l'accéléromètre de l'appareil (si ce dernier en possède un) si le résultat de cette mesure n'est pas modifié par un réglage utilisateur (« bloquer la rotation de l'écran »).</dd> + <dt><code>portrait</code></dt> + <dd>Le document devrait être verrouillé en mode portrait.</dd> + <dt><code>landscape</code></dt> + <dd>Le document devrait être verrouillé en mode paysage.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#the-lsquoorientationrsquo-descriptor', '"orientation" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.viewport.orientation")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html b/files/fr/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html new file mode 100644 index 0000000000..5532ed2191 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_a33ee59ffd8336ffb3336900dea02e9f/index.html @@ -0,0 +1,75 @@ +--- +title: viewport-fit +slug: Web/CSS/@viewport/viewport-fit +tags: + - '@viewport' + - CSS + - Descripteur + - Experimental + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/viewport-fit +--- +<div>{{CSSRef}}{{Draft}}{{SeeCompatTable}}</div> + +<p>Le descripteur <strong><code>viewport-fit</code></strong>, associé à la règle @ {{CSSxRef("@viewport")}} contrôle la façon dont la zone d'affichage (<em>viewport</em>) d'un document recouvre l'écran.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css; no-line-numbers">/* Valeurs avec un mot-clé */ +viewport-fit: auto; +viewport-fit: contain; +viewport-fit: cover; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>Cette valeur n'a aucun impact sur la disposition initiale de la zone d'affichage et l'ensemble de la page web est visible.</dd> + <dt><code>contain</code></dt> + <dd>La zone d'affichage est redimensionnée afin de s'inscrire dans le plus grand rectangle qu'il est possible de faire tenir sur l'écran.</dd> + <dt><code>cover</code></dt> + <dd>La zone d'affichage est redimensionnée afin de couvrir l'écran de l'appareil. Il est fortement recommandé d'utiliser <a href="/en-US/docs/Web/CSS/env">des variables pour le placement en zone sûre</a> afin de s'assurer qu'aucun contenu important ne se retrouve en dehors de l'écran.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">auto | contain | cover</pre> + +<h2 id="Accessibilité">Accessibilité</h2> + +<p>When using the <code>viewport-fit</code> descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the <a href="/en-US/docs/Web/CSS/env">safe area inset variables</a>.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS Round Display", "#viewport-fit-descriptor", '"viewport-fit" descriptor')}}</td> + <td>{{Spec2("CSS Round Display")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.viewport.viewport-fit")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{CSSxRef("env", "env()")}}</li> +</ul> diff --git a/files/fr/conflicting/web/css/@viewport_a47f799d4189f98a73bc55899628d6d7/index.html b/files/fr/conflicting/web/css/@viewport_a47f799d4189f98a73bc55899628d6d7/index.html new file mode 100644 index 0000000000..83a55c3c66 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_a47f799d4189f98a73bc55899628d6d7/index.html @@ -0,0 +1,77 @@ +--- +title: min-height +slug: Web/CSS/@viewport/min-height +tags: + - '@viewport' + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-height +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>min-height</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la hauteur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Avec un mot-clé */ +min-height: auto; + +/* Valeur de longueur */ +/* Type <length> */ +min-height: 400px; +min-height: 50em; +min-height: 20cm; + +/* Valeur proportionnelle */ +/* Type <percentage> */ +min-height: 75%;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur de pourcentage relative à la hauteur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + min-height: 600px; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-height', '"min-height" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.viewport.min-height")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_c5f2dc316e069e8c32ab24f9117600a7/index.html b/files/fr/conflicting/web/css/@viewport_c5f2dc316e069e8c32ab24f9117600a7/index.html new file mode 100644 index 0000000000..aa345f6c1e --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_c5f2dc316e069e8c32ab24f9117600a7/index.html @@ -0,0 +1,76 @@ +--- +title: min-width +slug: Web/CSS/@viewport/min-width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/min-width +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>min-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur minimale de la zone d'affichage (<em>viewport</em>) d'un document.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Avec un mot-clé */ +min-width: auto; + +/* Valeur de longueur */ +/* Type <length> */ +min-width: 400px; +min-width: 50em; +min-width: 20cm; + +/* Valeur proportionnelle */ +/* Type <percentage> */ +min-width: 75%;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + min-width: 600px; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-min-width', '"min-width" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.viewport.min-width")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html b/files/fr/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html new file mode 100644 index 0000000000..26e657d76a --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_c925ec0506b352ea1185248b874f7848/index.html @@ -0,0 +1,76 @@ +--- +title: width +slug: Web/CSS/@viewport/width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/width +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}} est un raccourci permettant de définir les deux descripteurs {{cssxref("@viewport/min-width", "min-width")}} et {{cssxref("@viewport/max-width", "max-width")}}.</p> + +<p>Si on fournit une seule valeur, c'est cette valeur qui sera utilisée pour la largeur minimale et maximale de la zone d'affichage (<em>viewport</em>). Si on fournit deux valeurs, la première correspondra à la largeur minimale de la zone d'affichage et la deuxième à la largeur maximale.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Une valeur de longueur */ +/* Type <length> ou <percentage> */ +width: auto; +width: 320px; +width: 15em; + +/* Deux valeurs de longueur */ +width: 320px 200px; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>La <a href="/fr/docs/Web/CSS/Valeur_utilis%C3%A9e">valeur utilisée</a> sera calculée à partir des valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une longueur relative ou absolue qui doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur exprimée en pourcentages qui est relative à la largeur de la zone d'affichage (<em>viewport</em>) lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + width: 500px; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-width', '"width" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.viewport.width")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html b/files/fr/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html new file mode 100644 index 0000000000..a5021d48f3 --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_d03ebc763769680c55d1a4258592d3ed/index.html @@ -0,0 +1,70 @@ +--- +title: max-zoom +slug: Web/CSS/@viewport/max-zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-zoom +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>max-zoom</code></strong>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom maximal au-delà duquel le navigateur n'augmentera pas le niveau de zoom (que ce soit une action automatique ou une action de l'utilisateur).</p> + +<p>Un facteur de zoom égal à <code>1.0</code> ou à <code>100%</code> correspond à l'absence de zoom. Si on utilise des valeurs supérieures, cela correspondra à un niveau de zoom plus élevé. À l'inverse des valeurs inférieures traduiront un « dézoom ».</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeur avec un mot-clé */ +max-zoom: auto; + +/* Nombres : type <number> */ +max-zoom: 0.8; +max-zoom: 2.0; + +/* Valeurs proportionnelles : type <percentage> */ +max-zoom: 150%; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>L'agent utilisateur détermine la limite du niveau de zoom applicable pour le document.</dd> + <dt><code><number></code></dt> + <dd>Un nombre positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<number>")}}).</dd> + <dt><code><percentage></code></dt> + <dd>Un pourcentage positif qui correspond à la limite haute du niveau de zoom (cf. {{cssxref("<percentage>")}}).</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#max-zoom-desc', '"max-zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.viewport.max-zoom")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html b/files/fr/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html new file mode 100644 index 0000000000..c995febbea --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_e065ce90bde08c9679692adbe64f6518/index.html @@ -0,0 +1,72 @@ +--- +title: zoom +slug: Web/CSS/@viewport/zoom +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/zoom +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <strong><code>zoom</code></strong>, utilisé au sein de la règle @ {{cssxref("@viewport")}}, permet de définir le niveau de zoom initial d'un document.</p> + +<p>Un niveau de zoom égal à <code>1.0</code> ou <code>100%</code> n'appliquera aucun zoom. Les valeurs supérieures zoomeront plus et les valeurs inférieures dézoomeront.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush:css">/* Valeur avec un mot-clé */ +zoom: auto; + +/* Valeurs numériques */ +/* Type <number> */ +zoom: 0.8; +zoom: 2.0; + +/* Valeurs proportionnelles */ +/* Type <percentage> */ +zoom: 150%; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>C'est l'agent utilisateur qui déterminera le niveau de zoom initial. L'agent utilisateur pourra utiliser la taille de la grille de la zone d'affichage afin de déterminer ce niveau.</dd> + <dt><code><number></code></dt> + <dd>Un nombre positif qui correspond au niveau de zoom appliqué. Pour plus d'informations, voir le type de donnée {{cssxref("<number>")}}.</dd> + <dt><code><percentage></code></dt> + <dd>Un pourcentage positif qui correspond au niveau de zoom appliqué (100% : aucun zoom ; les valeurs supérieures traduiront un zoom plus importants ; les valeurs inférieures auront un effet de « dézoom »). Pour plus d'informations, voir le type de donnée {{cssxref("<percentage>")}}.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#zoom-desc', '"zoom" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("css.at-rules.viewport.zoom")}}</p> diff --git a/files/fr/conflicting/web/css/@viewport_ff9d4f4f351256d9fdb3d21397eb3880/index.html b/files/fr/conflicting/web/css/@viewport_ff9d4f4f351256d9fdb3d21397eb3880/index.html new file mode 100644 index 0000000000..f131a09f7d --- /dev/null +++ b/files/fr/conflicting/web/css/@viewport_ff9d4f4f351256d9fdb3d21397eb3880/index.html @@ -0,0 +1,76 @@ +--- +title: max-width +slug: Web/CSS/@viewport/max-width +tags: + - CSS + - Descripteur + - Reference +translation_of: Web/CSS/@viewport +translation_of_original: Web/CSS/@viewport/max-width +--- +<div>{{CSSRef}}</div> + +<p>Le descripteur <code><strong>max-width</strong></code>, rattaché à la règle @ {{cssxref("@viewport")}}, permet de définir la largeur maximale de la zone d'affichage (<em>viewport</em>) d'un document. Par défaut, la largeur maximale de la zone d'affichage correspond à celle du <em>viewport</em> initial.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css">/* Avec un mot-clé */ +max-width: auto; + +/* Valeur de longueur */ +/* Type <length> */ +max-width: 400px; +max-width: 50em; +max-width: 20cm; + +/* Valeur proportionnelle */ +/* Type <percentage> */ +max-width: 75%;</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>auto</code></dt> + <dd><a href="/fr/docs/Web/CSS/Valeur_utilisée">La valeur utilisée</a> est alors calculée selon les valeurs des autres descripteurs.</dd> + <dt><code><length></code></dt> + <dd>Une valeur absolue ou relative représentant une longueur. Cette valeur doit être positive.</dd> + <dt><code><percentage></code></dt> + <dd>Une valeur de pourcentage relative à la largeur initiale de la zone d'affichage lorsque le niveau de zoom vaut 1. Cette valeur doit être positive.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<pre class="brush: css">@viewport { + max-width: 600px; +}</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Device', '#descdef-viewport-max-width', '"max-width" descriptor')}}</td> + <td>{{Spec2('CSS3 Device')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.at-rules.viewport.max-width")}}</p> diff --git a/files/fr/conflicting/web/css/_colon_is/index.html b/files/fr/conflicting/web/css/_colon_is/index.html new file mode 100644 index 0000000000..f3036e1ee9 --- /dev/null +++ b/files/fr/conflicting/web/css/_colon_is/index.html @@ -0,0 +1,175 @@ +--- +title: ':any()' +slug: 'Web/CSS/:any' +tags: + - CSS + - Experimental + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:is' +translation_of_original: 'Web/CSS/:any' +--- +<div>{{CSSRef}}{{SeeCompatTable}}</div> + +<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:any()</code></strong> vous permet de construire des ensembles de sélecteurs similaires en créant des groupes à partir desquels l'un des éléments sera activé. C'est une méthode alternative qui permet d'éviter de réécrire un sélecteur entier alors que seule une petite partie varie.</p> + +<pre class="brush: css no-line-numbers">/* sélectionne tous les h2 d'une section, d'un article */ +/* d'un aside ou d'un nav */ +/* actuellement pris en charge avec les préfixes */ +/* -moz- et -webkit- */ +:-moz-any(section, article, aside, nav) h2 { + font-size: 4.5rem; +} + +:-webkit-any(section, article, aside, nav) h2 { + font-size: 4.5rem; +} +</pre> + +<div class="note"><strong>Note : </strong>Cette pseudo-classe est en voie d'être standardisée dans la spécification <a class="external" href="http://dev.w3.org/csswg/selectors4/#matches"><em>CSS Selectors Level 4</em></a> sous le nom de <code>:matches()</code>. Il est probable que la syntaxe et le nom de <code>:-<em>préfixe</em>-any()</code> soit amené à changer pour l'adopter dans un avenir proche.</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>selector</code></dt> + <dd>Un sélecteur, simple ou multiple, composé d'un <a class="external" href="http://www.w3.org/TR/css3-selectors/#simple-selectors">sélecteur CSS simple</a>.</dd> +</dl> + +<div class="note"><strong>Note :</strong> Le sélecteur <strong>ne peut pas</strong> contenir de combinateur ou de pseudo-éléments.</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Simplifier_la_sélection_de_listes">Simplifier la sélection de listes</h3> + +<p>Par exemple, le code CSS suivant :</p> + +<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */ + dans certains cas */ +ol ol ul, ol ul ul, ol menu ul, ol dir ul, +ol ol menu, ol ul menu, ol menu menu, ol dir menu, +ol ol dir, ol ul dir, ol menu dir, ol dir dir, +ul ol ul, ul ul ul, ul menu ul, ul dir ul, +ul ol menu, ul ul menu, ul menu menu, ul dir menu, +ul ol dir, ul ul dir, ul menu dir, ul dir dir, +menu ol ul, menu ul ul, menu menu ul, menu dir ul, +menu ol menu, menu ul menu, menu menu menu, menu dir menu, +menu ol dir, menu ul dir, menu menu dir, menu dir dir, +dir ol ul, dir ul ul, dir menu ul, dir dir ul, +dir ol menu, dir ul menu, dir menu menu, dir dir menu, +dir ol dir, dir ul dir, dir menu dir, dir dir dir { + list-style-type: square; +} +</pre> + +<p>Pourra être remplacé par :</p> + +<pre class="brush: css">/* Les listes non-ordonnes utilisent un carré */ + dans certains cas */ +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu, +:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir { + list-style-type: square; +}</pre> + +<p>Cependant, on évitera d'utiliser le code suivant (cf. <a href="#Performances">la section sur les performances</a> plus bas) :</p> + +<pre class="brush: css">:-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) { + list-style-type: square; +}</pre> + +<h3 id="Simplifier_la_sélection_de_section">Simplifier la sélection de section</h3> + +<p>Ceci est particulièrement utile lorsqu'on manipule <a href="/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document">des sections et des titres</a> HTML. Les éléments {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} et {{HTMLElement("nav")}} peuvent être imbriqués, sans <code>:any()</code>, leur appliquer un style peut être beaucoup plus complexe.</p> + +<p>Par exemple, sans <code>:any()</code>, appliquer un style à tous les éléments {{HTMLElement("h1")}} situés à différents niveaux peut être vraiment compliqué :</p> + +<pre class="brush: css">/* Niveau 0 */ +h1 { + font-size: 30px; +} +/* Niveau 1 */ +section h1, article h1, aside h1, nav h1 { + font-size: 25px; +} +/* Niveau 2 */ +section section h1, section article h1, section aside h1, section nav h1, +article section h1, article article h1, article aside h1, article nav h1, +aside section h1, aside article h1, aside aside h1, aside nav h1, +nav section h1, nav article h1, nav aside h1, nav nav h1, { + font-size: 20px; +} +/* Niveau 3 */ +/* ... même pas la peine d'y penser */ +</pre> + +<p>En utilisant : <code>-any()</code>, cela devient plus simple :</p> + +<pre class="brush: css">/* Niveau 0 */ +h1 { + font-size: 30px; +} +/* Niveau 1 */ +:-moz-any(section, article, aside, nav) h1 { + font-size: 25px; +} +:-webkit-any(section, article, aside, nav) h1 { + font-size: 25px; +} + +/* Niveau 2 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 20px; +} + +:-webkit-any(section, article, aside, nav) +:-webkit-any(section, article, aside, nav) h1 { + font-size: 20px; +} + +/* Niveau 3 */ +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) +:-moz-any(section, article, aside, nav) h1 { + font-size: 15px; +} + +:-webkit-any(section, article, aside, nav) +:-webkit-any(section, article, aside, nav) +:-webkit-any(section, article, aside, nav) h1 { + font-size: 15px; +}</pre> + +<h2 id="Notes">Notes</h2> + +<h3 id="Problèmes_avec_les_performances_et_la_spécificité"><a id="Performances">Problèmes avec les performances et la spécificité</a></h3> + +<p>Le bug {{bug("561154")}} illustre un problème où la spécificité de <code>:-moz-any()</code> est incorrecte. L'implémentation actuelle considère <code>:-moz-any()</code> comme une règle universelle. Ainsi, lorsqu'il est utilisé pour le sélecteur le plus à droite d'un expression ce sera plus lent que d'utiliser un identifiant, une classe ou une balise.</p> + +<p>Par exemple :</p> + +<pre class="brush: css">.a > :-moz-any(.b, .c) +</pre> + +<p>est moins rapide que :</p> + +<pre class="brush: css">.a > .b, .a > .c +</pre> + +<p>et celui-ci est rapide :</p> + +<pre class="brush: css">:-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c +</pre> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.selectors.any")}}</p> diff --git a/files/fr/conflicting/web/css/_colon_placeholder-shown/index.html b/files/fr/conflicting/web/css/_colon_placeholder-shown/index.html new file mode 100644 index 0000000000..8b1111134c --- /dev/null +++ b/files/fr/conflicting/web/css/_colon_placeholder-shown/index.html @@ -0,0 +1,117 @@ +--- +title: ':-ms-input-placeholder' +slug: 'Web/CSS/:-ms-input-placeholder' +tags: + - CSS + - Non-standard + - Pseudo-classe + - Référence(2) +translation_of: 'Web/CSS/:placeholder-shown' +translation_of_original: 'Web/CSS/:-ms-input-placeholder' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>La pseudo-classe <strong><code>:-ms-input-placeholder</code></strong> représente le texte de substitution d'un élément de formulaire. Elle permet aux auteurs et aux développeurs web d'adapter l'apparence des textes de substitution. Cette pseudo-classe est propriétaire et est uniquement prise en charge par Internet Explorer et Edge.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans l'exemple suivant, le champ « Identifiant » a un style particulier. Le texte de substitution est affiché de cette façon jusqu'à ce que le focus passe sur le champ (ce qui correspond à une saisie).</p> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input { + background-color:#E8E8E8; + color:black; +} +/* Style pour le texte de substitution */ +input.studentid:-ms-input-placeholder { + font-style:italic; + color: red; + background-color: yellow; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><form id="test"> + <p><label>Saisir le nom : <input id="nom" placeholder="Nom de l'étudiant"/></label></p> + <p><label>Saisir le domaine : <input id="domaine" placeholder="Domaine d'étude" /></label></p> + <p><label>Saisir l'identifiant : <input type="num" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="Identifiant à 8 chiffres" /></label></p> + <input type="submit" /> +</form></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","300")}}</p> + +<h3 id="Capture_d'écran">Capture d'écran</h3> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12684/bandicam%202016-03-08%2001-48-59-851.jpg" style="border-style: solid; border-width: 1px; height: 160px; margin: 0px; width: 650px;"></p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette pseudo-classe est une pseudo-classe propriétaire liée à Trident/Microsoft et ne fait partie d'aucune spécification. <a href="https://msdn.microsoft.com/en-us/library/hh772745(v=vs.85).aspx">MSDN documente cette pseudo-classe</a>.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>10</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("::placeholder")}}</li> + <li>{{cssxref("::-webkit-input-placeholder")}}</li> + <li>{{cssxref("::-moz-placeholder")}}</li> + <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/fr/conflicting/web/css/_doublecolon_placeholder/index.html b/files/fr/conflicting/web/css/_doublecolon_placeholder/index.html new file mode 100644 index 0000000000..4be89a52e0 --- /dev/null +++ b/files/fr/conflicting/web/css/_doublecolon_placeholder/index.html @@ -0,0 +1,97 @@ +--- +title: '::-webkit-input-placeholder' +slug: 'Web/CSS/::-webkit-input-placeholder' +tags: + - CSS + - Non-standard + - Pseudo-element + - Reference +translation_of: 'Web/CSS/::placeholder' +translation_of_original: 'Web/CSS/::-webkit-input-placeholder' +--- +<div>{{Non-standard_header}}{{CSSRef}}</div> + +<p>Le pseudo-élément <strong><code>::-webkit-input-placeholder</code></strong> représente <a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML#The_placeholder_attribute">le texte de substitution</a> d'un formulaire. Il permet aux auteurs et aux développeurs d'adapter la mise en forme de ce texte de substitution. Ce pseudo-élément est uniquement pris en charge par WebKit et Blink.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input placeholder="Veuillez saisir ici..."></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">input::-webkit-input-placeholder { + color: green; +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Ce pseudo-élément est un pseudo-élément propriétaire lié à WebKit/Blink et ne fait partie d'aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("::placeholder")}}</li> + <li>{{cssxref("::-moz-placeholder")}}</li> + <li>{{cssxref(":-ms-input-placeholder")}}</li> + <li><a href="/fr/docs/Web/Guide/HTML/Forms_in_HTML">Les formulaires en HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li>{{HTMLElement("textarea")}}</li> +</ul> diff --git a/files/fr/conflicting/web/css/border-collapse/index.html b/files/fr/conflicting/web/css/border-collapse/index.html new file mode 100644 index 0000000000..3a1430f65e --- /dev/null +++ b/files/fr/conflicting/web/css/border-collapse/index.html @@ -0,0 +1,201 @@ +--- +title: Tableaux +slug: Astuces_CSS/Tableaux +tags: + - CSS +translation_of: Web/CSS/border-collapse +translation_of_original: Useful_CSS_tips/Tables +--- +<h3 id="Centrage" name="Centrage">Centrage</h3> +<p>Si vous voulez centrer un tableau, il n'est pas correct d'utiliser</p> +<dl> + <dd> + <code>text-align: center</code></dd> +</dl> +<p>dans l'élément parent. La méthode correcte est d'appliquer le style</p> +<dl> + <dd> + <code>margin: 0px auto 0px auto</code></dd> +</dl> +<p>à la table elle-même.</p> +<table style="border-collapse: collapse; margin: 0px auto 0px auto;"> + <tbody> + <tr> + <td colspan="3" style="border: 1px solid black;">Table avec margin: 0px auto 0px auto;</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + </tbody> +</table> +<h3 id="Bordures" name="Bordures">Bordures</h3> +<p>Voici un tableau standard avec <code>cellspacing</code> non nul et une bordure de cellule de 1px :</p> +<table> + <tbody> + <tr> + <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="4"</code></td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + </tbody> +</table> +<p>Si vous voulez transformer le tableau en grille, définissez l'espacement de cellule à 0 et le tableau devient comme ceci :</p> +<table> + <tbody> + <tr> + <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="0"</code></td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + </tbody> +</table> +<p>Le résultat n'est pas celui attendu et la raison en est que le modèle de bordure par défaut est défini comme <b>séparé</b>. Avec ce modèle, chaque cellule à sa propre bordure, même si l'espacement de cellule est 0. Afin d'avoir un rendu comme une grille, le modèle <code>collapse</code> doit être utilisé.</p> +<table style="border-collapse: collapse;"> + <tbody> + <tr> + <td colspan="3" style="border: 1px solid black;">Table avec <code>cellspacing="0"</code><br> + et <code>border-collapse:collapse;</code></td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + <tr> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + <td style="border: 1px solid black;">Contenu cellule</td> + </tr> + </tbody> +</table> +<h3 id="Style_de_colonne" name="Style_de_colonne">Style de colonne</h3> +<p>Si vous voulez définir un style particulier à certaines colonnes du tableau, la solution usuelle est de créer une classe de style et d'assigner explicitement toutes les cellules appartenant à ces colonnes à cette classe.</p> +<pre> <style type="text/css"> + td { background-color: #eeeeee; } + td.CoulNoire { background-color: #cccccc; } + </style> + +<table> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + <tr><td class="darkcol">Cell</td> + <td>Cell</td><td>Cell</td><td>Cell</td><td class="CoulNoire ">Cellule</td></tr> + </table> +</pre> +<p>Cette solution a l'avantage d'être compatible multi-navigateur, mais nécessite aussi de modifier le code HTML, pour explicitement sélectionner les cellules du tableau à <i>styler</i>.</p> +<p>Pour les navigateurs supportant les <i>sélecteurs adjacents</i>, il existe une solution alternative en pure CSS</p> +<pre><style type="text/css"> + /* Style pour toutes les lignes */ + tr { font: bold 16px Arial; } + /* Style pour les lignes avec une ligne avant: 2e, 3e, 4e, ... */ + tr + tr { font: 12px Arial; } + + /* Style pour toutes les colonnes */ + td { background-color: #cccccc; } + /* Style pour les colonnes avec une colonne avant: 2e, 3e, 4e, 5e */ + td + td { background-color: #eeeeee; } + /* Style pour les colonnes avec 4 colonnes avant: 5e */ + td + td + td + td + td { background-color: #cccccc; } +</style> + +<table> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> + <tr><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td><td>Cell</td></tr> +</table> +</pre> +<h3 id="En-t.C3.AAte_fixe" name="En-t.C3.AAte_fixe">En-tête fixe</h3> +<p>Si un tableau contient de nombreuses lignes, quand l'utilisateur fait défiler la page vers le bas pour voir toutes les données, l'en-tête défile en haut et devient invisible. Vous pouvez avoir un tableau avec un en-tête fixe et un défilement vertical, en utilisant le code ci-après.</p> +<div class="note"> + Ce code ne fait pas partie de la page originale et a été rajouté par le traducteur</div> +<pre><style type="text/css"> +table { + width: 20em; /* esthétique */ + border-collapse: separate; /* par défaut */ +/* border-collapse: collapse; /* Boggué depuis 2002 avec overflow-y: auto sur tbody */ + border-spacing: 0; /* contournement du bug */ +} +tbody { + height: 10em; /* définit une hauteur */ + overflow-x: hidden; /* esthétique */ + overflow-y: auto; /* permet de scroller les cellules */ +} +td { + border-left: 1px solid blue; /* contournement du bug */ + border-bottom: 1px solid blue; /* contournement du bug */ +} +</style> + +<table> + <thead><tr><th>Entête</th><th>Entête</th><th>Entête</th></tr></thead> + <tfoot><tr><th>Pied</th><th>Pied</th><th>Pied</th></tr></tfoot> + <tbody> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + <tr><td>Cellule</td><td>Cellule</td><td>Cellule</td></tr> + </tbody> +</table> +</pre> +<p>Actuellement, il y a un problème avec le moteur de rendu de Firefox (voir sur bugzilla {{ Bug(135236) }})), qui ne style pas corectement des tableaux avec le modèle <i>collapse border</i> et TBODY avec le style <i>overflow: auto</i>.</p> +<p>{{ languages( { "en": "en/Useful_CSS_tips/Tables" } ) }}</p> diff --git a/files/fr/conflicting/web/css/box-ordinal-group/index.html b/files/fr/conflicting/web/css/box-ordinal-group/index.html new file mode 100644 index 0000000000..4215966858 --- /dev/null +++ b/files/fr/conflicting/web/css/box-ordinal-group/index.html @@ -0,0 +1,74 @@ +--- +title: '-moz-box-ordinal-group' +slug: Web/CSS/-moz-box-ordinal-group +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/box-ordinal-group +translation_of_original: Web/CSS/-moz-box-ordinal-group +--- +<div>{{CSSRef}}</div> + +<div class="warning"> +<p><strong>Attention ! </strong>Cette propriété a été implémentée pour les premiers brouillons de la spécification pour le module de boîtes flexibles. Elle a été remplacée par des propriétés standards depuis, pour plus d'informations sur ce qui doit être utilisé à la place, consultez l'article sur <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS" title="/en/CSS/Flexible_boxes">les boîtes flexibles</a>.</p> +</div> + +<p>La propriété <code><strong>-moz-box-ordinal-group</strong></code> indique le groupe ordinal auquel appartient l'élément. Les éléments dont le groupe ordinal est inférieur seront affichés avant ceux dont le groupe ordinal est plus élevé.</p> + +<h2 id="Valeurs">Valeurs</h2> + +<p>Cette propriété accepte des valeurs entières strictement positives. La valeur initiale de cette propriété est 1.</p> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">#Flexbox { + display: -ms-box; + display: -moz-box; + display: -webkit-box; +} + +#text1 { + background: red; + -ms-box-ordinal-group: 4; + -moz-box-ordinal-group: 4; + -webkit-box-ordinal-group: 4; +} + +#text2 { + background: green; + -ms-box-ordinal-group: 3; + -moz-box-ordinal-group: 3; + -webkit-box-ordinal-group: 3; +} + +#text3 { + background: blue; + -ms-box-ordinal-group: 2; + -moz-box-ordinal-group: 2; + -webkit-box-ordinal-group: 2; +} + +#text4 { + background: orange; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="Flexbox"> + <div id="text1">text 1</div> + <div id="text2">text 2</div> + <div id="text3">text 3</div> + <div id="text4">text 4</div> +</div></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples","300","300")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.</p> diff --git a/files/fr/conflicting/web/css/color_value/index.html b/files/fr/conflicting/web/css/color_value/index.html new file mode 100644 index 0000000000..3880593692 --- /dev/null +++ b/files/fr/conflicting/web/css/color_value/index.html @@ -0,0 +1,139 @@ +--- +title: Couleurs et fonds +slug: Astuces_CSS/Couleurs_et_fonds +tags: + - CSS +translation_of: Web/CSS/color_value +translation_of_original: Useful_CSS_tips/Color_and_Background +--- +<p> +</p> +<h3 id="Fond_translucide"> Fond translucide </h3> +<p>Même si <i>opacity</i> (translucidité) est une propriété de style définie dans la spécification CSS3, <a class="external" href="http://www.w3.org/TR/css3-color/#transparency">module CSS3 Color, chapitre 3.2</a>, des navigateurs la gèrent déjà. D'après la spécification, <i>l'opacité peut être considérée conceptuellement comme une opération de post-traitement</i>, par conséquent le niveau de transparence choisi est appliqué à tout le contenu. +</p><p>Cela signifie que si vous avez un DIV contenant du texte, il est impossible d'avoir <b>du texte opaque sur un fond translucide</b>, car si vous définissez la propriété <i>opacity</i> pour l'élément DIV, tout son contenu hérite de la transparence, et il est impossible de l'enlever… par des moyens normaux. +</p><p>Si vous essayez cet exemple de code, vous découvrirez que <b>texteopaque</b> n'est pas opaque, il a hérité de l'attribut <code>opacity</code> de son parent et les redéfinitions de style sont ignorées pour la raison donnée ci-dessus. +</p> +<pre><div id="conteneur"> + <div id="texteopaque"> + Ceci est un texte normal + sur un fond translucide + </div> +</div> +</pre> +<pre>#conteneur { + background-color: #ffffff; /* le fond */ + filter:alpha(opacity=50); /* Internet Explorer 6 */ + -moz-opacity:0.5; /* Mozilla 1.6 et infér. */ + opacity: 0.5; /* CSS3 et Mozilla récents */ +} +#texteopaque { + filter:alpha(opacity=100); /* ignoré */ + -moz-opacity:1.0; /* ignoré */ + opacity: 1.0; /* ignoré */ +} +</pre> +<p>En réalité, deux manières d'obtenir cet effet existent et fonctionnent dans plusieurs navigateurs (prennent en compte le comportement <i>exotique</i> d'Internet Explorer) : +</p> +<ul><li> <b>Une hiérarchie réarrangée</b> : comme le problème principal est que le texte à rendre opaque fait partie de la boîte translucide, mettez-le en dehors de la boîte. +</li></ul> +<ul><li> <b>Une image PNG avec canal alpha</b> : utilisez une image de fond translucide. +</li></ul> +<h4 id="Hi.C3.A9rarchie_r.C3.A9arrang.C3.A9e"> Hiérarchie réarrangée </h4> +<p>Comme suggéré précédemment, cette astuce est basée sur un autre arrangement de la hiérarchie des éléments DIV. Comme tous les descendants du DIV translucide héritent de l'opacité de leurs parents, le truc est d'utiliser deux DIV séparés pour le fond transparent et le texte opaque, placés au même niveau de la hiérarchie et non l'un dans l'autre. Les deux feront partie d'un DIV parent à positionner de manière absolue ou flottant. +</p> +<pre><div id="conteneur"> + + <div id="texteopaque"> + Ceci est un texte normal + sur un fond translucide + </div> + + <div id="fondtranslucide"> + + </div> + +</div> +</pre> +<p>Afin de placer la zone <b>texteopaque</b> par dessus <b>fondtranslucide</b>, il faut utiliser le positionnement absolu et l'attribut <i>z-index</i> pour le DIV contenant le texte. De plus, la hauteur et la largeur des deux DIV doivent être identiques, elles doivent donc être déclarées explicitement. +</p> +<pre>#conteneur { + position: absolute; + top: 100px; left: 400px; /* placez-le où vous voulez */ +} + +#fondtranslucide { + width: 250px; height: 100px; /* pour correspondre à la taille du DIV */ + background-color: #ffffff; /* la couleur de fond */ + filter:alpha(opacity=50); + -moz-opacity:0.5; + opacity: 0.5; +} + +#texteopaque { + width: 250px; height: 100px; /* pour correspondre à la taille du DIV */ + background-color: transparent; /* fond transparent */ + position: absolute; /* positionnement absolu */ + z-index: 2; /* placement sur l'autre DIV */ +} +</pre> +<p><br> +</p> +<h5 id="Comment_retirer_la_hauteur_fixe_pr.C3.A9d.C3.A9finie"> Comment retirer la hauteur fixe prédéfinie </h5> +<p>Il est parfois problématique d'avoir une hauteur prédéfinie, parce que la longueur du texte contenu (et des images) n'est pas connue. Il est toujours possible d'éviter de fixer la hauteur, avec quelques ajouts supplémentaires. Le plus simple est de laisser grandir le DIV <b>texteopaque</b> autant que nécessaire, puis d'utiliser JavaScript pour redimensionner <b>fondtranslucide</b> à la même hauteur. Mais ce n'est pas une solution en pur CSS. +</p><p>Si vous voulez n'utiliser que CSS, la solution est assez simple, vous n'avez qu'à répéter le contenu de <b>texteopaque</b> dans <b>fondtranslucide</b> également. Ce n'est pas élégant, mais très facile à implémenter, notamment dans les pages générées dynamiquement. +</p> +<pre><div id="conteneur"> + + <div id="texteopaque"> + Ceci est un texte normal + sur un fond translucide + </div> + + <div id="fondtranslucide"> + Ceci est un texte normal + sur un fond translucide + </div> + +</div> +</pre> +<h4 id="Image_PNG_avec_canal_alpha"> Image PNG avec canal alpha </h4> +<p>Cette solution utilise toujours la hiérarchie parent-enfant, mais est en fait une technique hybride, car elle met en œuvre le fond translucide avec des moyens totalement différents selon le navigateur utilisé. +</p> +<ul><li> <b>Mozilla</b> : la translucidité est implémentée à l'aide d'une image PNG avec un canal alpha comme image de fond de l'élément conteneur. +</li></ul> +<ul><li> <b>Internet Explorer</b> : comme IE6 (et les versions précédentes) ne supporte pas les images PNG avec un canal alpha, la translucidité est implémentée avec le filtre alpha de l'exemple précédent, et l'héritage des descendants est écrasé à l'aide d'un comportement non-standard d'IE. +</li></ul> +<p>Notes et inconvénients pour cette solution : +</p> +<ul><li> Un autre DIV conteneur doit être ajouté pour que l'effet fonctionne sous Internet Explorer. +</li><li> Le DIV parent est positionné de manière absolue, et le nouveau DIV conteneur avec un fond translucide doit être un DIV normal. Celui qui contient le texte doit être positionné de manière absolue pour briser l'héritage de la transparence. +</li><li> Quelques hacks CSS doivent être utilisés pour que des règles CSS différentes s'appliquent selon le navigateur. +</li><li> Une image PNG spécifique doit être générée, avec le niveau de transparence souhaité. +</li></ul> +<pre><div id="conteneur"> + <div id="fondtranslucide"> + <div id="texteopaque"> + Ceci est un texte normal + sur un fond translucide + </div> + </div> +</div> +</pre> +<pre>#conteneur { + position: absolute; + width: 250px; + top: 400px; left: 100px; + } + +#fondtranslucide { + width: 250px; + background-image: url(transparent.png) !important; /* Mozilla uniquement */ + background-color: transparent !important; /* Mozilla uniquement */ + background-image: none; /* IE uniquement */ + background-color: #ffffff; /* IE uniquement */ + filter:alpha(opacity=50); /* IE uniquement */ + } + +#texteopaque { position: relative; } +</pre> +{{ languages( { "en": "en/Useful_CSS_tips/Color_and_Background" } ) }} diff --git a/files/fr/conflicting/web/css/column-gap/index.html b/files/fr/conflicting/web/css/column-gap/index.html new file mode 100644 index 0000000000..05b3e559d2 --- /dev/null +++ b/files/fr/conflicting/web/css/column-gap/index.html @@ -0,0 +1,128 @@ +--- +title: grid-column-gap +slug: Web/CSS/grid-column-gap +tags: + - CSS + - Propriété + - Reference +translation_of: Web/CSS/column-gap +translation_of_original: Web/CSS/grid-column-gap +--- +<div>{{CSSRef}}{{Deprecated_Header}}</div> + +<div class="note"> +<p><strong>Note :</strong> La propriété <code>grid-column-gap</code> a été fusionnée avec la propriété {{cssxref("column-gap")}} afin d'être remplacée par cette dernière.</p> +</div> + +<p>La propriété <strong><code>grid-column-gap</code></strong> définit l'espacement entre les colonnes d'une grille.</p> + +<div>{{EmbedInteractiveExample("pages/css/grid-column-gap.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>En termes de dimensionnement, cet espace est traité comme une piste supplémentaire de la longueur indiquée. Les valeurs négatives ne sont pas autorisées.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="brush: css no-line-numbers">/* Valeurs de longueur */ +grid-column-gap: 20px; +grid-column-gap: 1em; +grid-column-gap: 3vmin; +grid-column-gap: 0.5cm; + +/* Valeurs relatives à la taille */ +/* de l'élément englobant */ +/* Type <percentage> */ +grid-column-gap: 10%; + +/* Valeurs globales */ +grid-column-gap: inherit; +grid-column-gap: initial; +grid-column-gap: unset; +</pre> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code><length-percentage></code></dt> + <dd>La largeur de la « gouttière » placée entre les colonnes de la grille. Pour les valeurs exprimées en pourcentages, elles sont relatives aux dimensions de l'élément englobant.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight[6]">#grid { + display: grid; + height: 100px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 100px; + grid-column-gap: 20px; +} + +#grid > div { + background-color: lime; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="grid"> + <div></div> + <div></div> + <div></div> +</div></pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", "100%", "100px")}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("CSS3 Box Alignment", "#propdef-grid-column-gap", "grid-column-gap")}}</td> + <td>{{Spec2("CSS3 Box Alignment")}}</td> + <td>Dépréciée afin d'être remplacée par {{cssxref("column-gap")}}.</td> + </tr> + <tr> + <td>{{SpecName("CSS3 Grid", "#gutters", "grid-column-gap")}}</td> + <td>{{Spec2("CSS3 Grid")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.properties.grid-column-gap")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Versions standards non-préfixées : + <ul> + <li>{{cssxref("row-gap")}},</li> + <li>{{cssxref("column-gap")}},</li> + <li>{{cssxref("gap")}}</li> + </ul> + </li> + <li>{{cssxref("grid-row-gap")}}</li> + <li>{{cssxref("grid-gap")}}</li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_concepts_de_base#Les_gouttières">Guide : les concepts de bases : les gouttières</a></li> +</ul> diff --git a/files/fr/conflicting/web/css/css_backgrounds_and_borders/index.html b/files/fr/conflicting/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..8873196702 --- /dev/null +++ b/files/fr/conflicting/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,162 @@ +--- +title: Arrière-plans et bordures CSS +slug: Web/CSS/Arrière-plans_et_bordures_CSS +tags: + - CSS + - Référence(2) +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +translation_of_original: Web/CSS/CSS_Background_and_Borders +--- +<div>{{CSSRef}}</div> + +<p><strong>Les arrière-plans et bordures CSS</strong> forment un module CSS qui définit la façon dont les arrière-plans et les bordures des éléments sont décrits. Les bordures peuvent ainsi être des lignes ou des images et les boîtes peuvent avoir un ou plusieurs arrière-plan, des coins arrondis, des ombres.</p> + +<h2 id="Référence">Référence</h2> + +<h3 id="Propriétés_CSS">Propriétés CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("background-attachment")}}</li> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-bottom-left-radius")}}</li> + <li>{{cssxref("border-bottom-right-radius")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-collapse")}}</li> + <li>{{cssxref("border-color")}}</li> + <li>{{cssxref("border-image")}}</li> + <li>{{cssxref("border-image-outset")}}</li> + <li>{{cssxref("border-image-repeat")}}</li> + <li>{{cssxref("border-image-slice")}}</li> + <li>{{cssxref("border-image-source")}}</li> + <li>{{cssxref("border-image-width")}}</li> + <li>{{cssxref("border-left")}}</li> + <li>{{cssxref("border-left-color")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-radius")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-top-left-radius")}}</li> + <li>{{cssxref("border-top-right-radius")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("box-shadow")}}</li> +</ul> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Utiliser_des_fonds_multiples">Utiliser plusieurs arrière-plans CSS</a></dt> + <dd>Cet article explique comment définir plusieurs arrière-plans sur des éléments et la façon dont ceux-ci interagissent.</dd> + <dt><a href="/fr/docs/Web/CSS/CSS_Background_and_Borders/Scaling_background_images">Redimensionner des images d'arrière-plan</a></dt> + <dd>Cet article décrit comment modifier l'apparence des images d'arrière-plan en les étirant ou en les retirant afin de couvrir (ou non) tout un élément.</dd> +</dl> + +<h2 id="Outils">Outils</h2> + +<dl> + <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-image">Générateur de <code>border-image</code></a></dt> + <dd>Cet outil interactif permet de créer, de façon visuelle, des bordures avec images pour {{cssxref("border-image")}}.</dd> + <dt><a href="/fr/docs/Web/CSS/Arrière-plans_et_bordures_CSS/Générateur_border-radius">Générateur de <code>border-radius</code></a></dt> + <dd>Cet outil interactif permet de créer des bordures arrondies pour {{cssxref("border-radius")}}.</dd> + <dt><a href="/fr/docs/Web/CSS/Modèle_de_boîte_CSS/Générateur_box-shadow">Générateur de <code>box-shadow</code></a></dt> + <dd>Cet outil interactif permet de créer des ombres portées derrière les éléments avec {{cssxref("box-shadow")}}.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Backgrounds')}}</td> + <td>{{Spec2('CSS3 Backgrounds')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support simple</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1.0")}}</td> + <td>4.0</td> + <td>3.5</td> + <td>1.0 (85)</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("1.9.2")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/fr/conflicting/web/css/css_color/index.html b/files/fr/conflicting/web/css/css_color/index.html new file mode 100644 index 0000000000..fb589fa689 --- /dev/null +++ b/files/fr/conflicting/web/css/css_color/index.html @@ -0,0 +1,133 @@ +--- +title: Couleurs CSS +slug: Web/CSS/Couleurs_CSS +tags: + - Aperçu + - CSS + - CSS Color + - Reference +translation_of: Web/CSS/CSS_Color +translation_of_original: Web/CSS/CSS_Colors +--- +<div>{{CSSRef}}</div> + +<p><strong>Les couleurs CSS</strong> (<em>CSS Color</em> en anglais) forment un module CSS qui décrit la manipulation des couleurs, les types de données liées aux couleurs et l'application de la transparence en CSS.</p> + +<h2 id="Référence">Référence</h2> + +<h3 id="Propriétés_CSS">Propriétés CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("opacity")}}</li> +</ul> +</div> + +<h3 id="Types_de_donnée">Types de donnée</h3> + +<div class="index"> +<ul> + <li>{{cssxref("<color>")}}</li> +</ul> +</div> + +<h2 id="Guide">Guide</h2> + +<dl> + <dt><a href="/fr/docs/Web/HTML/Applying_color">Appliquer des couleurs sur des éléments HTML grâce à CSS</a></dt> + <dd>Un guide qui illustre comment utiliser CSS afin d'appliquer des couleurs sur différents contenus.</dd> +</dl> + +<h2 id="Outils">Outils</h2> + +<dl> + <dt><a href="/fr/docs/Web/CSS/Couleurs_CSS/Sélecteur_de_couleurs">Un sélecteur de couleurs</a></dt> + <dd>Cet outil vous permet de créer, ajuster et manipuler des couleurs.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Colors')}}</td> + <td>{{Spec2('CSS3 Colors')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'colors.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS1')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support simple</td> + <td>1.0</td> + <td>{{CompatGeckoDesktop("1")}}</td> + <td>3.0</td> + <td>3.5</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>1.0</td> + <td>{{CompatGeckoMobile("1")}}</td> + <td>6.0</td> + <td>6.0</td> + <td>1.0</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>Attention, en CSS, les dégradés de couleurs ne sont pas des couleurs mais <a href="/fr/docs/Web/CSS/CSS_Images">des images</a>.</li> + <li>Les autres propriétés relatives aux couleurs et qui font partie d'autres modules de spécification : {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}} et {{cssxref("column-rule-color")}}.</li> +</ul> diff --git a/files/fr/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/fr/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html new file mode 100644 index 0000000000..b36e1eb0f4 --- /dev/null +++ b/files/fr/conflicting/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -0,0 +1,121 @@ +--- +title: Rétrocompatibilité de flexbox +slug: Web/CSS/CSS_Flexible_Box_Layout/Rétrocompatibilite_de_flexbox +tags: + - '@supports' + - Boîtes flexibles + - CSS + - Guide + - Intermediate + - flexbox +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox +--- +<div>{{CSSRef}}</div> + +<p class="summary">Les boîtes flexibles (<em>flexbox</em>) sont largement prises en charge parmi les navigateurs modernes. Toutefois, quelques problèmes peuvent survenir. Dans ce guide, nous verrons précisément quelle est la prise en charge des boîtes flexibles dans les navigateurs. Nous verrons les problèmes éventuels ainsi que les ressources et méthodes afin de créer des méthodes de contournement ou des alternatives.</p> + +<h2 id="Il_était_une_fois_flexbox…">Il était une fois <em>flexbox</em>…</h2> + +<p>Comme toute spécification CSS, la spécification Flexbox a vu de nombreuses modifications avant d'atteindre le statut de <em>Candidate Recommendation</em> dont elle dispose aujourd'hui. Dans cet état actuel, il ne devrait pas y avoir de modification majeur dans la spécification, mais cette stabilité n'a pas toujours existé par le passé.</p> + +<p>Les boîtes flexibles ont été implémentées de façon expérimentale dans plusieurs navigateurs. À cette époque, créer une implémentation expérimentale consistait à utiliser un préfixe spécifique. Ces préfixes devaient permettre aux implémentations de la spécification d'être testées et manipulées par les développeurs des navigateurs et par les développeurs web, sans qu'il y ait de conflit avec les autres implémentations. On ne devait pas utiliser d'implémentation expérimentale pour du code de production. Toutefois, les préfixes ont fini par être utilisés en production et les modifications apportées à la spécification expérimentale nécessitaient une réactivité des développeurs web pour maintenir leurs sites.</p> + +<p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">En 2009</a>, la spécification était plutôt différente. Pour créer un conteneur flexible, il fallait utiliser <code>display: box</code> et on disposait ensuite de différentes propriétés <code>box-*</code> qui permettaient d'obtenir des résultats semblables à ceux qu'offrent les boîtes flexibles actuelles.</p> + +<p>Vint ensuite <a href="https://www.w3.org/TR/2012/WD-css3-flexbox-20120322/">une mise à jour de la spécification</a> pour mettre à jour la syntaxe : <code>display: flexbox</code> — là encore, ces valeurs étaient préfixées.</p> + +<p>Enfin, la spécification a été mise à jour pour définir <code>display: flex</code> comme façon de créer un conteneur flexible. La prise en charge des navigateurs sur la version à jour de la spécification est excellent à partir de ce moment.</p> + +<p>Quelques anciens articles font référence à d'anciennes versions de la spécification. Ceux-ci sont facilement identifiables en raison des modifications concernant la création d'un conteneur flexible. Si vous lisez des règles telles que <code>display: box</code> ou <code>display: flexbox</code>, vous pouvez en déduire qu'il s'agit d'informations obsolètes.</p> + +<h2 id="État_de_la_compatibilité_des_navigateurs">État de la compatibilité des navigateurs</h2> + +<p>La prise en charge des navigateurs pour les boîtes flexibles est excellente et la grande partie des navigateurs n'ont pas besoin de préfixe. Safari a été le dernier des principaux navigateurs à retirer les préfixes avec la sortie de Safari 9 en 2015. Les deux navigateurs pour lesquels il est nécessaire de faire attention à la compatibilité sont :</p> + +<ul> + <li>Internet Explorer 10 qui implémentait la version <code>display: flexbox</code> avec le préfixe <code>-ms-</code>.</li> + <li>UC Browser qui prend en charge la version de 2009 avec <code>display: box</code> et avec le préfixe <code>-webkit-</code>.</li> +</ul> + +<p>On notera qu'Internet Explorer 11 prend bien en charge la spécification actuelle avec <code>display: flex</code> mais que de nombreux bugs sont présents dans cette implémentation.</p> + +<h2 id="Problèmes_fréquents">Problèmes fréquents</h2> + +<p>La plupart des problèmes relatifs aux boîtes flexibles sont liés aux modifications de la spécification lors de son développement et au fait que de nombreux développeurs ont essayé d'utiliser des implémentations expérimentales en production. Si vous souhaitez garantir une rétrocompatibilité avec certaines anciennes versions de navigateurs et notamment IE10 et IE11, le site <a href="https://github.com/philipwalton/flexbugs">Flexbugs</a> représente une ressource précieuse. Vous pourrez voir que de nombreux bugs sont présents pour d'anciennes versions des navigateurs et sont désormais corrigés pour les versions actuelles. Chacun de ces bugs possède une méthode de contournement associée, ce qui peut faire gagner un temps précieux.</p> + +<p>Si vous souhaitez inclure de très anciens navigateurs prenant en charge les boîtes flexibles, il vous faudra inclure les préfixes éditeurs dans votre feuille CSS, en plus de la version non-préfixée. Cela devient de moins en moins nécessaire vue l'étendue de la compatibilité actuelle.</p> + +<pre class="brush: css">.wrapper { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +}</pre> + +<p><a href="https://autoprefixer.github.io/">Autoprefixer Online</a> est un outil utile pour déterminer quels préfixes sont recommandés selon les versions des navigateurs qu'on souhaite prendre en charge. Vous pouvez également consulter <a href="https://caniuse.com/#feat=flexbox">Can I Use</a> ou les tableaux de compatibilité en bas des pages de référence MDN pour savoir quand les préfixes ont été retirés des navigateurs.</p> + +<h2 id="Techniques_de_recours">Techniques de recours</h2> + +<p>La mise en place des boîtes flexibles dans un document est effectuée grâce à la propriété {{cssxref("display")}}. Lorsqu'on souhaite prendre en charge de très anciens navigateurs qui ne prennent pas du tout en charge les boîtes flexibles, des méthodes alternatives peuvent être construites en surchargeant une méthode de disposition par une autre. La spécification définit ce qui se produit si on utilise une autre méthode de disposition sur un élément qui devient ensuite un élément flexible.</p> + +<h3 id="Éléments_flottants">Éléments flottants</h3> + +<blockquote> +<p>“<code>float</code> et <code>clear</code> ne créent pas de flottement ou de dégagement pour les éléments flexibles et ne les retirent pas du flux.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-containers">3. Conteneurs flexibles</a></p> +</blockquote> + +<p>Dans l'exemple qui suit, on a deux blocs flottants et on applique ensuite <code>display: flex</code> sur le conteneur. Les éléments sont alors des éléments flexibles ce qui signifie qu'ils sont étirés sur des hauteurs égales. Tout comportement associé au flottement n'aura pas lieu.</p> + +<p>Pour tester le comportement alternatif, vous pouvez retirer <code>display: flex</code> du conteneur englobant.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/float.html", '100%', 550)}}</p> + +<h3 id="display_inline-block"><code>display: inline-block</code></h3> + +<p>Lorsqu'un élément disposé avec <code>inline-block</code> devient un élément flexible, cet élément devient analogue à un bloc et le comportement de <code>display: inline-block</code> qui permet de conserver les espaces blancs entre les éléments ne s'applique plus.</p> + +<p>Vous pouvez retirer la règle avec <code>display: flex</code> dans l'exemple qui suit pour voir le comportement alternatif. Vous verrez de l'espace ajouté entre les éléments car c'est ce que préfère <code>display: inline-block</code>.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/inline-block.html", '100%', 550)}}</p> + +<h3 id="display_table-"><code>display: table-</code><em> </em></h3> + +<p>Les propriétés CSS relatives aux dispositions en tableaux s'avèrent potentiellement très utiles comme méthode de recours car elles permettent d'obtenir des organisations de contenu analogues avec des colonnes sur toute la hauteur, du centrage vertical et car elles fonctionnent jusqu'à Internet Explorer 8.</p> + +<p>Si vous utilisez <code>display: table-cell</code> sur un élément HTML, cet élément récupèrera la mise en forme d'une cellule de tableau HTML. Pour celles-ci, CSS crée des boîtes anonymes qui représentent ces éléments et il n'est pas nécessaire d'envelopper chaque élément dans un conteneur pour représenter une ligne puis dans un second qui représente le tableau. Il n'est pas possible de mettre en forme ces boîtes anonymes, celles-ci servent uniquement à corriger la structure.</p> + +<p>Si vous déclarez ensuite <code>display: flex</code> sur l'élément parent, ces boîtes anonymes ne sont pas créées et l'élément redevient un enfant direct qui peut devenir un élément flexible, perdant tout aspect relatif au tableau.</p> + +<blockquote> +<p>“Note : certaines valeurs de <code>display</code> déclenchent normalement la création de boîtes anonymes autour de la boîte originale. Si une telle boîte est un élément flexible, cet élément devient un bloc puis la création des boîtes anonymes n'a pas lieu. Ainsi, deux éléments flexibles adjacents avec <code>display: table-cell</code> deviendront deux éléments flexibles distincts avec <code>display: block</code> plutôt que d'être enveloppés au sein d'un même tableau anonyme.” - <a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4. Éléments flexibles</a></p> +</blockquote> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/table-cell.html", '100%', 550)}}</p> + +<h3 id="La_propriété_vertical-align">La propriété <code>vertical-align</code></h3> + +<p>L'exemple qui suit illustre l'utilisation de la propriété {{cssxref("vertical-align")}} associée au mode <code>display: inline-block</code>. Les deux modes <code>display: table-cell</code> et <code>display: inline-block</code> permettent d'utiliser cette propriété. La propriété <code>vertical-align</code> permet d'opérer un alignement vertical avant l'application des boîtes flexibles. Cette propriété est ignorée avec les boîtes flexibles et elle peut donc être utilisée avec <code>display: table-cell</code> ou <code>display: inline-block</code> comme méthode d'alignement alternative aux propriétés d'alignement des boîtes flexibles.</p> + +<p>{{EmbedGHLiveSample("css-examples/flexbox/browsers/vertical-align.html", '100%', 550)}}</p> + +<h2 id="Requêtes_de_fonctionnalités_et_flexbox">Requêtes de fonctionnalités et <em>flexbox</em></h2> + +<p>Il est possible d'utiliser <a href="/fr/docs/Web/CSS/%40supports">les requêtes de fonctionnalité (<em>feature queries</em>)</a> afin de détecter la prise en charge des boîtes flexibles :</p> + +<pre class="brush: css">@supports (display: flex) { + // code utilisé pour les navigateurs qui + // prennent en charge cette fonctionnalité +}</pre> + +<p>On notera qu'Internet Explorer 11 ne prend pas en charge les requêtes de fonctionnalité mais prend bien en charge les boîtes flexibles. Si vous choisissez de considérer l'implémentation d'IE11 comme étant trop erronée et que vous souhaitez que ce navigateur utilise votre code de recours, vous pouvez alors utiliser les requêtes de fonctionnalité pour ne servir le code <em>flexbox</em> qu'aux navigateurs qui disposent d'une prise en charge suffisante. Pour rappel, si on souhaite inclure les versions des navigateurs qui utilisaient des préfixes spécifiques, on devra inclure la version préfixée dans la requête de fonctionnalité. La requête suivant inclura par exemple UC Browser qui prend en charge les requêtes de fonctionnalités et une ancienne syntaxe, préfixée, pour les boîtes flexibles :</p> + +<pre class="brush: css">@supports (display: flex) or (display: -webkit-box) { + // code pour les navigateurs qui + // prennent en charge cette fonctionnalité +}</pre> + +<p>Pour plus d'informations sur les requêtes de fonctionnalités, vous pouvez lire <em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">Using Feature Queries in CSS</a></em><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/"> (en anglais)</a> sur le blog Hacks de Mozilla.</p> + +<h2 id="Conclusion">Conclusion</h2> + +<p>Bien que nous ayons vu ici certains problèmes potentiels et méthodes alternatives, les boîtes flexibles peuvent tout à fait être utilisées en production et de façon généralisée. Ce guide vous sera utile si vous rencontrez un problème particulier ou qu'il vous faut prendre en charge de plus vieux navigateurs.</p> diff --git a/files/fr/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html b/files/fr/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html new file mode 100644 index 0000000000..f91090e0dc --- /dev/null +++ b/files/fr/conflicting/web/css/css_flexible_box_layout/typical_use_cases_of_flexbox/index.html @@ -0,0 +1,188 @@ +--- +title: Utiliser les boîtes flexibles pour les applications web +slug: Web/CSS/CSS_Flexible_Box_Layout/Boîtes_flexibles_pour_applications_web +tags: + - Avancé + - CSS + - Guide +translation_of: Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox +translation_of_original: Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications +--- +<div>{{CSSRef}}</div> + +<p>Les boîtes flexibles permettent de concevoir des dispositions qui s'appliquent mieux à des environnements mobiles et de bureau et qui peuvent servir aux applications web. Fini d'utiliser des éléments {{HTMLElement("div")}} flottants, <a href="/fr/docs/Web/CSS/position#Positionnement_absolu">le positionnement absolu</a> et des bidouilles JavaScript. Quelques lignes CSS permettent de construire des dispositions verticales et horizontales, flexibles. Voici quelques exemples de cas d'utilisation :</p> + +<ul> + <li>Centrer un élément au milieu d'une page</li> + <li>Définir des conteneurs qui s'organisent verticalement, l'un après l'autre</li> + <li>Créer une ligne de boutons ou d'autres éléments qui se condensent verticalement sur les écrans de petite taille.</li> +</ul> + +<p>Cet article ne couvre que l'utilisation des propriétés relatives aux boîtes flexibles non préfixées et standard. Pour plus d'informations sur les préfixes et les anciens navigateurs, se référer <a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">au guide plus générique sur la manipulation des boîtes flexibles en CSS</a>.</p> + +<h2 id="Les_bases">Les bases</h2> + +<p>Pour qu'un élément flotte dans une boîte flexible, on peut utiliser la propriété {{cssxref("display")}} avec la valeur <code>flex</code> puis définir {{cssxref("flex-flow")}} avec la valeur <code>row</code> (si on souhaite que les éléments s'organisent horizontalement) ou avec la valeur <code>column</code> (si on souhaite que les éléments s'empilent verticalement). Si on veut avoir une boîte flexible horizontale et que les éléments « passent à la ligne » verticalement, on pourra définir la propriété <code>wrap</code>.</p> + +<p>Ensuite, pour chaque élément qui s'inscrit dans le conteneur flexible, on pourra définir la propriété {{cssxref("flex")}}. Généralement, on utilisera les valeurs suivantes :</p> + +<ul> + <li>Si on veut qu'un élément n'occupe que la place qui lui est allouée (ex. un bouton), on pourra utiliser <code>flex: none</code> that expands to <code>0 0 auto</code>.</li> + <li>Si on veut définir la taille explicite d'un élément, on pourra utiliser <code>flex: 0 0 <em>taille</em></code>. Par exemple : <code>flex 0 0 60px</code>.</li> + <li>Si on veut qu'un élément occupe tout l'espace disponible de façon équitable avec ses voisins, on pourra utiliser <code>flex: auto</code>. It expands to <code>1 1 auto</code>.</li> +</ul> + +<p>Il existe bien entendu d'autres possibilités en dehors de cas d'usage simples. Voici quelques exemples d'application.</p> + +<h2 id="Centrer_un_élément">Centrer un élément</h2> + +<p>Pour ce cas, le plus simple consiste à créer deux boîtes flexibles, l'une dans l'autre. Chaque boîte flexible aura trois élément, deux autour de l'élément centré ainsi que l'élément en question.</p> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.horizontal-box { + display: flex; + flex-flow: row; +} +.spacer { + flex: auto; + background-color: black; +} +.centered-element { + flex: none; + background-color: white; +} +</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html;"><div class="vertical-box"> + <div class="spacer"></div> + <div class="centered-element horizontal-box"> + <div class="spacer"></div> + <div class="centered-element">Centered content</div> + <div class="spacer"></div> + </div> + <div class="spacer"></div> +</div> +</pre> + +<h3 id="Resultat">Resultat</h3> + +<p>{{EmbedLiveSample('Centrer_un_élément', 500, 500)}}</p> + +<h2 id="Répartir_des_conteneurs_verticalement">Répartir des conteneurs verticalement</h2> + +<p>Prenons une page qui se compose d'un en-tête, d'une zone de contenu et d'un pied de page. On souhaite que l'en-tête et le pied de page aient la même taille mais que le contenu s'adapte selon l'espace disponible. Pour cela, on peut utiliser la propriété {{cssxref("flex")}} avec la valeur <code>auto</code> pour le contenu et la valeur <code>none</code> pour l'en-tête et le pied de page.</p> + +<h3 id="CSS_2">CSS</h3> + +<pre class="brush: css;">.vertical-box { + display: flex; + height: 400px; + width: 400px; + flex-flow: column; +} +.fixed-size { + flex: none; + height: 30px; + background-color: black; + text-align: center; +} +.flexible-size { + flex: auto; + background-color: white; +} +</pre> + +<h3 id="HTML_2">HTML</h3> + +<pre class="brush: html;"><div id="document" class="vertical-box"> + <div class="fixed-size"><button id="increase-size">Augmenter la taille du conteneur</button></div> + <div id="flexible-content" class="flexible-size"></div> + <div class="fixed-size"><button id="decrease-size">Réduire la taille du conteneur</button></div> +</div> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js;">var height = 400; +document.getElementById('increase-size').onclick=function() { + height += 10; + if (height > 500) height = 500; + document.getElementById('document').style.height = (height + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + height -= 10; + if (height < 300) height = 300; + document.getElementById('document').style.height = (height + "px"); +}</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Répartir_des_conteneurs_verticalement', 500, 500)}}</p> + +<h2 id="Créer_un_conteneur_horizontal_qui_se_replie">Créer un conteneur horizontal qui se replie</h2> + +<p>Dans certains cas, on veut pouvoir afficher des informations horizontalement lorsque l'écran le permet et les replier en vertical lorsque la taille est trop réduire. On peut obtenir cet effet simplement avec les boîtes flexibles en utilisant la valeur <code>wrap</code> sur la propriété {{cssxref("flex-flow")}}.</p> + +<h3 id="CSS_3">CSS</h3> + +<pre class="brush: css;">.horizontal-container { + display: flex; + width: 300px; + flex-flow: row wrap; +} +.fixed-size { + flex: none; + width: 100px; + background-color: black; + color: white; + text-align: center; +} +</pre> + +<h3 id="HTML_3">HTML</h3> + +<pre class="brush: html;"><div id="container" class="horizontal-container"> + <div class="fixed-size">Élément 1</div> + <div class="fixed-size">Élément 2</div> + <div class="fixed-size">Élément 3</div> +</div> +<button id="increase-size">Augmenter la taille du conteneur</button> +<button id="decrease-size">Réduire la taille du conteneur</button> +</pre> + +<h3 id="JavaScript_2">JavaScript</h3> + +<pre class="brush: js;">var width = 300; + +document.getElementById('increase-size').onclick=function() { + width += 100; + if (width > 300) width = 300; + document.getElementById('container').style.width = (width + "px"); +} + +document.getElementById('decrease-size').onclick=function() { + width -= 100; + if (width < 100) width = 100; + document.getElementById('container').style.width = (width + "px"); +} +</pre> + +<h3 id="Résultat_2">Résultat</h3> + +<p>{{EmbedLiveSample('Créer_un_conteneur_horizontal_qui_se_replie', 500, 200)}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/CSS/Disposition_des_boîtes_flexibles_CSS/Utilisation_des_flexbox_en_CSS">Manipuler les boîtes flexibles</a></li> +</ul> diff --git a/files/fr/conflicting/web/css/cursor/index.html b/files/fr/conflicting/web/css/cursor/index.html new file mode 100644 index 0000000000..a7121bf02e --- /dev/null +++ b/files/fr/conflicting/web/css/cursor/index.html @@ -0,0 +1,16 @@ +--- +title: '-moz-cell' +slug: Web/CSS/-moz-cell +tags: + - CSS + - Obsolete + - Propriété + - Reference +translation_of: Web/CSS/cursor +translation_of_original: Web/CSS/-moz-cell +--- +<div class="boxed translate-rendered"> +<div>{{CSSRef}}{{deprecated_header}}</div> + +<p><em>Ne pas utiliser cette valeur ! </em>C'est la valeur <code>cursor</code> {{cssxref("cursor#cell","cell")}} qui doit être utilisée à la place.</p> +</div> diff --git a/files/fr/conflicting/web/css/filter_effects/index.html b/files/fr/conflicting/web/css/filter_effects/index.html new file mode 100644 index 0000000000..6976999a5f --- /dev/null +++ b/files/fr/conflicting/web/css/filter_effects/index.html @@ -0,0 +1,115 @@ +--- +title: Filters Effects +slug: Web/CSS/Filters_Effects +tags: + - CSS + - Reference +translation_of: Web/CSS/Filter_Effects +translation_of_original: Web/CSS/Filters_Effects +--- +<div>{{CSSRef}}</div> + +<p><em><strong>Filter Effects</strong></em> (ou module des effets de filtre) est un module CSS qui définit une manière de traiter le rendu des éléments avant qu'ils ne soient affichés dans le document.</p> + +<h2 id="Référence">Référence</h2> + +<h3 id="Propriétés_CSS">Propriétés CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("filter")}}</li> +</ul> +</div> + +<h3 id="Fonctions_CSS">Fonctions CSS</h3> + +<div class="index"> +<ul> + <li>{{cssxref("filter", "blur()", "#blur()")}}</li> + <li>{{cssxref("filter", "brightness()", "#brightness()")}}</li> + <li>{{cssxref("filter", "contrast()", "#contrast()")}}</li> + <li>{{cssxref("filter", "drop-shadow()", "#drop-shadow()")}}</li> + <li>{{cssxref("filter", "grayscale()", "#grayscale()")}}</li> + <li>{{cssxref("filter", "hue-rotate()", "#hue-rotate()")}}</li> + <li>{{cssxref("filter", "invert()", "#invert()")}}</li> + <li>{{cssxref("filter", "opacity()", "#opacity()")}}</li> + <li>{{cssxref("filter", "saturate()", "#saturate()")}}</li> + <li>{{cssxref("filter", "sepia()", "#sepia()")}}</li> + <li>{{cssxref("filter", "url()", "#url()")}}</li> +</ul> +</div> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Filters 1.0', '#FilterProperty', 'filter')}}</td> + <td>{{Spec2('Filters 1.0')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatChrome("18.0")}}{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop(35)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatOpera("15.0")}}{{property_prefix("-webkit")}}</td> + <td>{{CompatSafari("6.0")}}{{property_prefix("-webkit")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Edge</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simle</td> + <td>{{CompatAndroid("4.4")}}{{property_prefix("-webkit")}}</td> + <td>{{CompatGeckoDesktop(35)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>22.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td> + <td> + <p>6.0 {{CompatVersionUnknown}}{{property_prefix("-webkit")}}</p> + </td> + </tr> + </tbody> +</table> +</div> diff --git a/files/fr/conflicting/web/css/float/index.html b/files/fr/conflicting/web/css/float/index.html new file mode 100644 index 0000000000..471bfdc5af --- /dev/null +++ b/files/fr/conflicting/web/css/float/index.html @@ -0,0 +1,43 @@ +--- +title: none +slug: Web/CSS/none +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/float +translation_of_original: Web/CSS/none +--- +<p>{{ CSSRef() }}</p> +<h2 id="Résumé">Résumé</h2> +<p><code>none</code> est une valeur commune pour la plupart des propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("normal") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p> +<h2 id="Utilisation">Utilisation</h2> +<div class="warning"> + Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div> +<ul> + <li>{{ Cssxref("animation-name") }}</li> + <li>{{ Cssxref("background-image") }}</li> + <li>{{ Cssxref("border-style") }} ({{ Cssxref("border-bottom-style") }}, {{ Cssxref("border-left-style") }}, {{ Cssxref("border-right-style") }} et {{ Cssxref("border-top-style") }}</li> + <li>{{ Cssxref("clear") }}</li> + <li>{{ Cssxref("content") }}</li> + <li>{{ Cssxref("display") }}</li> + <li>{{ Cssxref("float") }}</li> + <li>{{ Cssxref("font-size-adjust") }}</li> + <li>{{ Cssxref("list-style-image") }}</li> + <li>{{ Cssxref("list-style-type") }}</li> + <li>{{ Cssxref("max-height") }}</li> + <li>{{ Cssxref("max-width") }}</li> + <li>{{ Cssxref("outline-style") }}</li> + <li>{{ Cssxref("quotes") }}</li> + <li>{{ Cssxref("resize") }}</li> + <li>{{ Cssxref("text-decoration") }}</li> + <li>{{ Cssxref("text-transform") }}</li> +</ul> +<p><u><strong>Extensions Mozilla :</strong></u></p> +<ul> + <li>{{ Cssxref("-moz-transform") }}</li> + <li>{{ Cssxref("-moz-transition-property") }}</li> + <li>{{ Cssxref("-moz-text-blink") }}</li> + <li>{{ Cssxref("-moz-user-input") }}</li> + <li>{{ Cssxref("-moz-user-select") }}</li> + <li>{{ Cssxref("-moz-window-shadow") }}</li> +</ul> diff --git a/files/fr/conflicting/web/css/font-variant/index.html b/files/fr/conflicting/web/css/font-variant/index.html new file mode 100644 index 0000000000..5b611f0369 --- /dev/null +++ b/files/fr/conflicting/web/css/font-variant/index.html @@ -0,0 +1,36 @@ +--- +title: normal +slug: Web/CSS/normal +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/font-variant +translation_of_original: Web/CSS/normal +--- +<p>{{ CSSRef() }}</p> +<h2 id="Résumé">Résumé</h2> +<p><code>normal</code> est une valeur commune pour certaines propriétés CSS et souvent c'est la valeur par défaut. On peut la comparer à la valeur {{ Cssxref("none") }} qui peut être utilisée de manière similaire pour d'autres propriétés.</p> +<h2 id="Utilisation">Utilisation</h2> +<div class="warning"> + Cette liste n'est pas exhaustive et les propriétés qui ne sont pas encore supportées par les différents navigateurs ne sont pas incluses.</div> +<ul> + <li>{{ Cssxref("animation-direction") }}</li> + <li>{{ Cssxref("content") }}</li> + <li>{{ Cssxref("counter-increment") }}</li> + <li>{{ Cssxref("counter-reset") }}</li> + <li>{{ Cssxref("font-style") }}</li> + <li>{{ Cssxref("font-variant") }}</li> + <li>{{ Cssxref("font-weight") }}</li> + <li>{{ Cssxref("letter-spacing") }}</li> + <li>{{ Cssxref("white-space") }}</li> + <li>{{ Cssxref("word-spacing") }}</li> + <li>{{ Cssxref("word-wrap") }}</li> +</ul> +<p><u><strong>Extensions Mozilla :</strong></u></p> +<ul> + <li>{{ Cssxref("-moz-appearance") }}</li> + <li>{{ Cssxref("-moz-box-direction") }}</li> + <li>{{ Cssxref("-moz-column-gap") }}</li> + <li>{{ Cssxref("-moz-column-rule-width") }}</li> +</ul> +<p>{{ languages( { "en": "en/CSS/normal", "es": "es/CSS/normal" } ) }}</p> diff --git a/files/fr/conflicting/web/css/index.html b/files/fr/conflicting/web/css/index.html new file mode 100644 index 0000000000..213bc187b5 --- /dev/null +++ b/files/fr/conflicting/web/css/index.html @@ -0,0 +1,25 @@ +--- +title: Astuces CSS +slug: Astuces_CSS +tags: + - CSS +translation_of: Web/CSS +translation_of_original: Useful_CSS_tips +--- +<p> +</p><p>Cette page présente quelques astuces concernant l'utilisation de CSS. Chaque astuce est prévue pour être aussi courte que possible et fournir les informations nécessaires sur les propriétés et caractéristiques les plus recherchées mais peu connues ou sujettes à des erreurs fréquentes. +</p> +<h4 id="Astuces_CSS:Couleurs_et_fonds"> <a href="fr/Astuces_CSS/Couleurs_et_fonds">Astuces CSS:Couleurs et fonds</a> </h4> +<dl><dd> <a href="fr/Astuces_CSS/Couleurs_et_fonds#Fond_translucide">Du texte opaque sur un fond translucide</a> +</dd></dl> +<h4 id="Astuces_CSS:Tableaux"> <a href="fr/Astuces_CSS/Tableaux">Astuces CSS:Tableaux</a> </h4> +<dl><dd> <a href="fr/Astuces_CSS/Tableaux#Centrage">Comment centrer un tableau</a> +</dd><dd> <a href="fr/Astuces_CSS/Tableaux#Bordures">La bonne bordure pour votre tableau</a> +</dd><dd> <a href="fr/Astuces_CSS/Tableaux#Style_des_colonnes">Donnez un style à vos colonnes avec une solution en pur CSS</a> +</dd><dd> <a href="fr/Astuces_CSS/Tableaux#En-t.C3.AAtes_fixes">Un tableau dont le contenu peut défiler mais les en-têtes restent fixes</a> +</dd></dl> +<h4 id="Astuces_CSS:Liens"> <a href="fr/Astuces_CSS/Liens">Astuces CSS:Liens</a> </h4> +<dl><dd> <a href="fr/Astuces_CSS/Liens#Pseudo-classes_d.27ancres">L'ordre correct pour les pseudo-classes d'ancres</a> +</dd><dd> <a href="fr/Astuces_CSS/Liens#Survol_sans_texte">Comportement de survol quand il n'y a pas de texte</a> +</dd></dl> +{{ languages( { "en": "en/Useful_CSS_tips" } ) }} diff --git a/files/fr/conflicting/web/css/mask-image/index.html b/files/fr/conflicting/web/css/mask-image/index.html new file mode 100644 index 0000000000..2303f48997 --- /dev/null +++ b/files/fr/conflicting/web/css/mask-image/index.html @@ -0,0 +1,175 @@ +--- +title: '-webkit-mask-image' +slug: Web/CSS/-webkit-mask-image +tags: + - CSS +translation_of: Web/CSS/mask-image +translation_of_original: Web/CSS/-webkit-mask-image +--- +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CSSRef() }}</p> + +<p>{{ Non-standard_header() }}</p> + +<h3 id="Résumé">Résumé</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">La propriété CSS <code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">-webkit-mask-image </code>définit l'image de masque pour un élément. L'image de masque découpe la portion visible d'un élément conformément aux valeurs de transparence de cette image.</p> + +<ul style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 22px; list-style-type: disc;"> + <li>{{ Xref_cssinitial() }} : none</li> + <li>S'applique à : tous les éléments</li> + <li>{{ Xref_cssinherited() }} : non</li> + <li>Média : {{ Xref_cssvisual() }}</li> + <li>{{ Xref_csscomputed() }} : URI absolue ou none</li> +</ul> + +<h3 id="Syntaxe">Syntaxe</h3> + +<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;">-webkit-mask-image: <mask-image>[, <mask-image>]* +</pre> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Valeurs :</p> + +<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> + <dt style="font-style: normal; font-weight: bold;"><mask-image></dt> + <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><code style="font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace; color: inherit; font-weight: inherit;">{{cssxref("<uri>")}} | <gradient> | none</code></dd> +</dl> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Values</p> + +<dl style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;"> + <dt style="font-style: normal; font-weight: bold;"><uri></dt> + <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Chemin de la ressource image utilisée comme masque.</dd> + <dt style="font-style: normal; font-weight: bold;"> </dt> + <dt style="font-style: normal; font-weight: bold;"><gradient></dt> + <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;"><span style="font-family: courier new;">Fonction-webkit-gradient</span> utilisée comme masque.</dd> + <dt style="font-style: normal; font-weight: bold;">none</dt> + <dd style="margin-bottom: 20px; padding-left: 16px; border-bottom-width: 1px; border-bottom-style: dashed; margin-top: 0px; margin-right: 0px; margin-left: 0px; padding-top: 2px; padding-right: 0px; padding-bottom: 4px;">Signifie que l'élément n'a pas de masque image.</dd> +</dl> + +<h4 id="Exemples">Exemples</h4> + +<pre class="brush: css">body { + -webkit-mask-image: url('images/mymask.png'); +} + +div { + -webkit-mask-image: url('images/foo.png'), url('images/bar.png'); +} + +p { + -webkit-mask-image: none; +} +</pre> + +<h3 id="Notes">Notes</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">Si plusieurs images de masque sont spécifiées, la région visible résultat sera la combinaison des régions visibles de chaque image.</p> + +<h3 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h3> + +<p style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px;">{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;"> + <tbody> + <tr> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Fonctionnalité</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Firefox (Gecko)</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Chrome</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Internet Explorer</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Safari</th> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">1.0{{ property_prefix("-webkit") }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Masques SVG</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">8.0</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">4.0</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table" style="border-bottom-style: dotted; border-bottom-width: 1px; border-collapse: collapse; border-left-style: dotted; border-left-width: 1px; border-right-style: dotted; border-right-width: 1px; border-top-style: dotted; border-top-width: 1px; font-size: 14px; margin-bottom: 1.286em;"> + <tbody> + <tr> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;"><strong style="background-color: rgb(238, 238, 238); font-weight: bold; line-height: 14px;">Fonctionnalité</strong></th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">iOS Safari</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mini</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Opera Mobile</th> + <th style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 0px; padding-right: 5px; padding-bottom: 0px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(238, 238, 238); text-align: left; font-weight: bold;">Android Browser</th> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Support basique</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">3.2</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">2.1</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Images de masque multiples</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">Dégradés</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes {{ property_prefix("-webkit") }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">{{ CompatNo() }}</td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;">yes{{ property_prefix("-webkit") }}</td> + </tr> + <tr> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p>Masques SVG</p> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p>yes</p> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p>{{ CompatNo() }}<a id="fck_paste_padding" style="text-decoration: none; color: rgb(51, 102, 153) !important; cursor: default;"></a></p> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p>{{ CompatNo() }}</p> + </td> + <td style="font-family: inherit; font-size: inherit; color: inherit; padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; text-align: left; background-clip: initial; background-color: rgb(255, 255, 255); vertical-align: top; word-wrap: break-word;"> + <p>yes</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="note"><strong>Note :</strong> Gecko supporte les <a href="/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking" style="font-style: italic;" title="https://developer.mozilla.org/En/Applying_SVG_effects_to_HTML_content#Example:.C2.A0Masking">effets de filtre SVG </a>depuis sa version 1.9.1. Ils peuvent être utilisés pour masquer du contenu HTML.</div> + +<h3 id="Voir_également">Voir également</h3> + +<p>{{ cssxref("-webkit-mask") }}, {{ cssxref("-webkit-mask-origin") }}, {{ cssxref("-webkit-mask-attachment") }},{{ cssxref("-webkit-mask-image") }},{{ cssxref("-webkit-mask-composite") }},{{ cssxref("-webkit-mask-repeat") }}</p> diff --git a/files/fr/conflicting/web/css/mozilla_extensions/index.html b/files/fr/conflicting/web/css/mozilla_extensions/index.html new file mode 100644 index 0000000000..98f3c88b72 --- /dev/null +++ b/files/fr/conflicting/web/css/mozilla_extensions/index.html @@ -0,0 +1,47 @@ +--- +title: Implémentation des fonctionnalités CSS à l'état de brouillon +slug: Web/CSS/Implémentation_des_Brouillons_CSS +tags: + - CSS + - Draft + - NeedsContent +translation_of: Web/CSS/Mozilla_Extensions +translation_of_original: Web/CSS/Draft_Implementations_of_CSS_Features +--- +<div>{{CSSRef}}{{Draft}}</div> + +<div class="warning"> +<p><strong>Attention !</strong> Cette page est incomplète et n'est pas à jour. Se référer aux pages suivantes pour plus d'informations :</p> + +<ul> + <li><a href="/fr/docs/Web/CSS/Extensions_CSS_Microsoft">Les extensions Microsoft à CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Extensions_Mozilla">Les extensions Mozilla à CSS</a></li> + <li><a href="/fr/docs/Web/CSS/Reference/Extensions_WebKit">Les extensions WebKit à CSS</a></li> +</ul> +</div> + +<p>Mozilla gère un certain nombre d'extensions <a href="/fr/docs/Web/CSS" title="en/CSS">CSS</a> préfixées par<code> -moz-</code>. La liste suivante contient toutes les extensions Mozilla correspondant aux implémentations de fonctionnalités en cours de standardisation par le W3C. Les fonctionnalités propriétaires ne sont pas présentes dans cette liste.</p> + +<h3 id="Propriétés">Propriétés</h3> + +<p>...</p> + +<h3 id="Valeurs">Valeurs</h3> + +<p>...</p> + +<h3 id="Pseudo-éléments_et_pseudo-classes">Pseudo-éléments et pseudo-classes</h3> + +<p>...</p> + +<h3 id="Règles_At">Règles At</h3> + +<p>...</p> + +<h3 id="Requêtes_de_média">Requêtes de média</h3> + +<p>...</p> + +<h3 id="Autres">Autres</h3> + +<p>...</p> diff --git a/files/fr/conflicting/web/css/pseudo-classes/index.html b/files/fr/conflicting/web/css/pseudo-classes/index.html new file mode 100644 index 0000000000..c6c631c6c0 --- /dev/null +++ b/files/fr/conflicting/web/css/pseudo-classes/index.html @@ -0,0 +1,32 @@ +--- +title: Liens +slug: Astuces_CSS/Liens +tags: + - CSS +translation_of: Web/CSS/Pseudo-classes +translation_of_original: Useful_CSS_tips/Links +--- +<p> +</p> +<h3 id="Les_pseudo-classes_d.27ancre"> Les pseudo-classes d'ancre </h3> +<p>Les feuilles de style <a href="fr/CSS">CSS</a> permettent de styler les ancres grâce à 4 pseudo-classes : +</p> +<ul><li> {{ Cssxref(":link") }} pour les liens non visités +</li><li> {{ Cssxref(":visited") }} pour les liens visités +</li><li> {{ Cssxref(":hover") }} pour les liens survolés +</li><li> {{ Cssxref(":active") }} pour les liens actifs +</li></ul> +<p>À cause de la nature en <i>cascade</i> des styles CSS, il est important de déclarer les pseudo-classes dans l'ordre indiqué ci-dessus. Le style de <code>:hover</code> doit être placé après <code>:link</code> et <code>:visited</code>, sinon il serait écrasé par ces 2 derniers styles. De plus, comme <code>:active</code> est défini après <code>:hover</code>, quand un lien est aussi bien <i>survolé</i> que <i>actif</i>, le dernier style est appliqué. +</p> +<h3 id=":hover_quand_il_n.27y_a_pas_de_texte"> <code>:hover</code> quand il n'y a pas de texte </h3> +<p>Normalement, la pseudo-classe <code>:hover</code> est appliquée quand un dispositif de pointage survole le texte du lien. Parfois, quand un lien est placé dans une cellule de tableau ou une barre de menu, verticale ou horizontale, il est nécessaire d'appliquer le style <code>:hover</code> quand le pointeur survole la cellule, là où il n'y a pas de texte. +</p><p>Un contournement pour avoir ce comportement est de styler l'ancre comme un <code>block</code> avec une largeur fixe. +</p> +<pre class="eval"><a style="display: block; width: 150px;" href="#">Mon lien</a> +</pre> +<h3 id="Articles_connexes"> Articles connexes </h3> +<ul><li> <a href="fr/Probl%c3%a8mes_soulev%c3%a9s_par_le_pseudo_%c3%a9l%c3%a9ment_hover">Problèmes soulevés par le pseudo élément hover</a> <span>(ajout du traducteur)</span> +</li><li> Propriété CSS {{ Cssxref("display") }} +</li></ul> +<p><span>Interwiki Languages Links</span> +</p>{{ languages( { "en": "en/Useful_CSS_tips/Links" } ) }} diff --git a/files/fr/conflicting/web/css/scroll-snap-type/index.html b/files/fr/conflicting/web/css/scroll-snap-type/index.html new file mode 100644 index 0000000000..fff872ad27 --- /dev/null +++ b/files/fr/conflicting/web/css/scroll-snap-type/index.html @@ -0,0 +1,51 @@ +--- +title: '-ms-scroll-snap-type' +slug: Web/CSS/-ms-scroll-snap-type +tags: + - CSS + - Non-standard + - Reference +translation_of: Web/CSS/scroll-snap-type +translation_of_original: Web/CSS/-ms-scroll-snap-type +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<p>La propriété <strong><code>-ms-scroll-snap-type</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique le type de point d'accroche à utiliser pour l'élément courant.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Values" name="Values">Valeurs</h3> + +<dl> + <dt><code>none</code></dt> + <dd> + <p>Valeur initiale. Le déplacement et le défilement ne sont pas modifiés par les points d'accroche.</p> + </dd> + <dt><code>proximity</code></dt> + <dd> + <p>Lorsque l'inertie normale fait arriver à proximité d'un point d'accroche, la vitesse est ajustée afin que le mouvement se termine sur un point d'accroche. Il est toutefois possible que le mouvement se termine entre deux points d'accroche.</p> + </dd> + <dt><code>mandatory</code></dt> + <dd> + <p>L'inertie est ajustée afin que le mouvement se termine toujours sur un point d'accroche.</p> + </dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Specifications" name="Specifications">Spécifications</h2> + +<p>Cette propriété est une propriété spécifique et ne fait partie d'aucune spécification.</p> + +<p>{{cssinfo}}</p> + +<h2 id="Remarks" name="Remarks">Notes</h2> + +<p> </p> + +<p>Cette propriété est disponible à partir de Windows 8. Elle n'a aucun effet pour les éléments qui ne permettent pas d'utiliser un ascenseur.</p> + +<p>À partir de Windows 8.1, cette propriété est également prise en charge pour les interactions à la souris, au clavier ou au pavé tactile.</p> diff --git a/files/fr/conflicting/web/css/shape-outside/index.html b/files/fr/conflicting/web/css/shape-outside/index.html new file mode 100644 index 0000000000..de7ad2607a --- /dev/null +++ b/files/fr/conflicting/web/css/shape-outside/index.html @@ -0,0 +1,169 @@ +--- +title: <shape-box> +slug: Web/CSS/shape-box +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/shape-outside +translation_of_original: Web/CSS/shape-box +--- +<div>{{CSSRef}}</div> + +<p>Le type de donnée CSS <strong><code><shape-box></code></strong> permet de définir des formes relatives aux boîtes de l'élément (voir <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">le modèle de boîtes</a>), notamment pour la propriété {{cssxref("shape-outside")}}.</p> + +<h2 id="Valeurs">Valeurs</h2> + +<dl> + <dt><code>margin-box</code></dt> + <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de marge. Les rayons des coins de la forme sont définis grâce aux propriétés {{cssxref("border-radius")}} et {{cssxref("margin")}}. Si le ratio <code>border-radius</code> / <code>margin</code> est supérieur ou égal à 1, le rayon du coin de la boîte sera <code>border-radius</code> + <code>margin</code>. Si le ratio <code>border-radius / margin</code> est inférieur à 1, le rayon du coin de la boîte sera <code>border-radius + (margin * (1 + (ratio-1)^3))</code>.</dd> + <dt><code>border-box</code></dt> + <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de bordure. Elle suit donc les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd> + <dt><code>padding-box</code></dt> + <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de remplissage (<em>padding</em>). Elle suit les règles normales de mise en forme de la bordure (notamment pour les coins arrondis).</dd> + <dt><code>content-box</code></dt> + <dd>La forme correspond à la forme dessinée par le contour extérieur de la boîte de contenu. Le rayon de chaque coin correspondra à la valeur maximale entre <code>0</code> et <code>border-radius</code> - <code>border-width</code> - <code>padding</code>.</dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.main { + width: 500px; + height: 200px; +} + +.left { + -webkit-shape-outside: polygon(0 0, 100% 100%, 0 100%); + float: left; + width: 40%; + height: 12ex; + background-color: lightgray; + -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); +} + +.right { + -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); + float: right; + width: 40%; + height: 12ex; + background-color: lightgray; + -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); +} + +p { + text-align: center; +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="main"> + <div class="left"></div> + <div class="right"></div> + <p> + Sometimes a web page's text content appears to be + funneling your attention towards a spot on the page + to drive you to follow a particular link. Sometimes + you don't notice. + </p> +</div></pre> + +<h3 id="Résultat">Résultat</h3> + +<h3 id="EmbedLiveSample('Exemples'100100)">{{EmbedLiveSample('Exemples',"100%","100%")}}</h3> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS Shapes', '#typedef-shape-box', '<shape-box>')}}</td> + <td>{{Spec2('CSS Shapes')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{compatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatVersionUnknown}}</td> + </tr> + <tr> + <td>\xx</td> + <td>{{compatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Android</th> + <th>Chrome pour Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{compatVersionUnknown}}</td> + <td>{{compatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatVersionUnknown}}</td> + </tr> + <tr> + <td>\xx</td> + <td>{{compatVersionUnknown}}</td> + <td>{{compatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{compatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("shape-outside")}}</li> + <li><a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">Le modèle de boîtes CSS</a></li> +</ul> diff --git a/files/fr/conflicting/web/css/url()/index.html b/files/fr/conflicting/web/css/url()/index.html new file mode 100644 index 0000000000..a31d8c3342 --- /dev/null +++ b/files/fr/conflicting/web/css/url()/index.html @@ -0,0 +1,34 @@ +--- +title: url() +slug: Web/CSS/filter-function/url +tags: + - CSS + - Junk + - Reference +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/filter-function/url +--- +<div>{{CSSRef}}</div> + +<p>La fonction <strong><code>url()</code></strong> permet d'utiliser un <a href="/fr/docs/Web/SVG/Element/filter">filtre SVG</a> afin de modifier l'apparence d'une image.</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<pre class="syntaxbox">url(<em>emplacement</em>)</pre> + +<h3 id="Paramètres">Paramètres</h3> + +<dl> + <dt><code>emplacement</code></dt> + <dd>L'URL ({{cssxref("<url>")}}) d'un fichier {{glossary("XML")}} qui définit un filtre SVG. On peut ajouter une ancre sur cette URL afin d'indiquer un filtre spécifique.</dd> +</dl> + +<h2 id="Exemple">Exemple</h2> + +<pre class="brush: css">url(ressources.svg#c1)</pre> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("<filter-function>")}}</li> +</ul> diff --git a/files/fr/conflicting/web/css/url()_168028c4e5edd9e19c061adb4b604d4f/index.html b/files/fr/conflicting/web/css/url()_168028c4e5edd9e19c061adb4b604d4f/index.html new file mode 100644 index 0000000000..d68db30cfe --- /dev/null +++ b/files/fr/conflicting/web/css/url()_168028c4e5edd9e19c061adb4b604d4f/index.html @@ -0,0 +1,109 @@ +--- +title: <url> +slug: Web/CSS/url +tags: + - CSS + - Reference + - Type +translation_of: Web/CSS/url() +translation_of_original: Web/CSS/url +--- +<div>{{CSSRef}}</div> + +<p>Le type de donnée CSS <strong><code><url></code></strong> représente un pointeur vers une ressource (cela peut être une image, une police de caractères). Ce type de données ne possède pas de syntaxe propre et ne peut être utilisé qu'avec la notation fonctionnelle <code>url()</code>. Il est utilisé avec de nombreuses propriétés telles que {{cssxref("background-image")}}, {{cssxref("cursor")}}, {{cssxref("list-style")}}, etc.</p> + +<div class="note"><strong>Note : URI ou URL ?</strong><br> +<br> +Une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Identifier">URI</a> est différente d'une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Locator">URL</a>. Une URL décrit l'emplacement d'une ressource et l'URI décrit l'identifiant de la ressource. Une URI peut être un emplacement, une URL, un nom, une <a href="https://fr.wikipedia.org/wiki/Uniform_Resource_Name">URN</a> d'une ressource.<br> +<br> +Pour la spécification CSS de niveau 1, la notation fonctionnelle <code>url()</code> a été introduite afin de décrire des… URL, autrement dit des emplacements (un type de donnée <code><url></code> bien qu'il n'était pas défini explicitement).<br> +<br> +Pour la spécification CSS de niveau 2, la même notation fonctionnelle a été étendue afin de pouvoir décrire n'importe quelle URI, que ce soit une URL ou un URN. Cela a été une source d'ambiguïté car <code>url()</code> était utilisée pour créer une valeur de type <code><uri></code>. En plus d'être source de confusion, les URN était très marginalement utilisées dans la pratique.<br> +<br> +Afin de remédier à cela, la spécification CSS de niveau 3 est revenue à la définition initiale avec cette fois-ci une définition explicite. La notation fonctionnelle <code>url()</code> représente donc une valeur de type <code><url></code> et plus une valeur de type <code><uri></code>.<br> +<br> +Cela dit, ces détails de sémantique ont peu d'impact pour les auteurs web voire pour l'implémentation du type de donnée par le moteur.</div> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>L'URL peut être indiquée telle quelle comme argument de la fonction <code>url()</code>et encadrée, ou non, entre quotes ou doubles quotes. Il est possible d'utiliser des URL relatives. Celles-ci sont alors relatives à l'URL de la feuille de style (et non à l'URL de la page web).</p> + +<pre class="syntaxbox"> <propriété_css>: url("http://monsite.exemple.com/curseur.png") + <propriété_css>: url("http://monsite.exemple.com/curseur.png") + <propriété_css>: url(http://monsite.exemple.com/curseur.png) +</pre> + +<div class="note"> +<p><strong>Note :</strong> Les caractères de contrôle au-delà de 0x7e ne sont plus autorisés pour la forme sans quote à partir de Firefox 15. Voir {{bug(752230)}} pour plus d'informations.</p> +</div> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">ul { + list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif") +}</pre> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><ul> + <li>Élément 1</li> + <li>Élément 2</li> +</ul> +</pre> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples')}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS4 Values')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS3 Values', '#urls', '<url>')}}</td> + <td>{{Spec2('CSS3 Values')}}</td> + <td>Aucune modification significative.</td> + </tr> + <tr> + <td>{{Specname('CSS2.1', 'syndata.html#uri', '<uri>')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td>Aucune modification significative.</td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#url', '<url>')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("css.types.url")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("url()", "url()")}}</li> + <li>{{cssxref("<gradient>")}}</li> + <li>{{cssxref("element()")}}</li> + <li>{{cssxref("_image","image()")}}</li> + <li>{{cssxref("image-set","image-set()")}}</li> + <li>{{cssxref("cross-fade")}}</li> +</ul> diff --git a/files/fr/conflicting/web/css/user-select/index.html b/files/fr/conflicting/web/css/user-select/index.html new file mode 100644 index 0000000000..047c721acc --- /dev/null +++ b/files/fr/conflicting/web/css/user-select/index.html @@ -0,0 +1,108 @@ +--- +title: '-ms-user-select' +slug: Web/CSS/-ms-user-select +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Web/CSS/user-select +translation_of_original: Web/CSS/-ms-user-select +--- +<div>{{CSSRef}}{{non-standard_header}}</div> + +<p>La propriété CSS <strong><code>-ms-user-select</code></strong> est <a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">une propriété spécifique à Microsoft</a> qui indique sur quelle zone d'un élément l'utilisateur peut sélectionner le texte de l'élément.</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<h3 id="Values" name="Values">Valeurs</h3> + +<dl> + <dt><code>none</code></dt> + <dd> + <p>Empêche la sélection de commencer sur l'élément. Cette valeur n'empêche pas une sélection déjà initiée de continuer sur l'élément.</p> + </dd> + <dt><code>element</code></dt> + <dd> + <p>Active la sélection au sein de l'élément. Toutefois, la sélection est limitée aux bords de l'élément.</p> + </dd> + <dt><code>text</code></dt> + <dd> + <p>Active la sélection au sein de l'élément et permet de poursuivre la sélection à l'extérieur de l'élément.</p> + </dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}} +</pre> + +<h2 id="Examples" name="Examples">Exemples</h2> + +<p>Dans l'exemple suivant, on utilise le scénario d'un blog avec un conteneur qui est un élément {{HTMLElement("div")}} avec un identifiant <code>blog</code>. Ce conteneur contient un autre élément <code><div></code> avec l'identifiant <code>blogPost</code> pour le billet de la page. La classe <code>comment</code> est appliquée aux éléments <code><div></code> qui sont des commentaires. Le billet de blog contient un élément {{HTMLElement("input")}} et un élément {{HTMLElement("textarea")}} pour ajouter un commentaire.</p> + +<p>La déclaration suivante désactive la sélection à l'exception du contenu éditable.</p> + +<pre class="brush: css">#blog { + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: -moz-none; +} +</pre> + +<p>La déclaration suivante désactive la sélection pour le reste :</p> + +<pre class="brush: css">#blog, #blog input, #blog textarea, +#blog *[contenteditable=true] { + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: -moz-none; +} +</pre> + +<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que le contenu du billet.</p> + +<pre class="brush: css">#blogPost { + -ms-user-select: element; + -webkit-user-select: text; + -moz-user-select: text; +} + +#blog { + -ms-user-select: none; + -webkit-user-select: none; + -moz-user-select: -moz-none; +} +</pre> + +<p>La déclaration suivante permet aux utilisateurs de ne sélectionner que les commentaires.</p> + +<pre class="brush: css">.comment { + -ms-user-select: element; + -moz-user-select: text; + -webkit-user-select: text; +} + +#blog{ + -ms-user-select: none; + -moz-user-select: -moz-none; + -webkit-user-select: none; +} +</pre> + +<p>Le code suivan permet de commencer la sélection sur le billet ou sur l'un des commentaires et de poursuivre sur la suite.</p> + +<pre class="brush: css">#blogPost, .comment { + -ms-user-select: text; +} + +#blog { + -ms-user-select: none; +} +</pre> + +<h2 id="Specifications" name="Specifications">Spécifications</h2> + +<p>Cette propriété est une propriété non-standard qui ne fait partie d'aucune spécification.</p> + +<p>{{cssinfo}}</p> diff --git a/files/fr/conflicting/web/css/width/index.html b/files/fr/conflicting/web/css/width/index.html new file mode 100644 index 0000000000..92535f6d82 --- /dev/null +++ b/files/fr/conflicting/web/css/width/index.html @@ -0,0 +1,29 @@ +--- +title: auto +slug: Web/CSS/auto +tags: + - CSS + - Référence CSS +translation_of: Web/CSS/width +translation_of_original: Web/CSS/auto +--- +<p>{{ CSSRef() }}</p> +<h2 id="Résumé">Résumé</h2> +<p>Indique qu'une valeur est calculée de manière automatique par le navigateur. Les effets de <code>auto</code> sont différents suivant la propriété à laquelle la valeur est affectée.</p> +<h2 id="Utilisation">Utilisation</h2> +<ul> + <li>{{ Cssxref("overflow") }}</li> + <li>{{ Cssxref("overflow-x") }}</li> + <li>{{ Cssxref("overflow-y") }}</li> + <li>{{ Cssxref("cursor") }}</li> + <li>{{ Cssxref("width") }}</li> + <li>{{ Cssxref("height") }}</li> + <li>{{ Cssxref("marker-offset") }}</li> + <li>{{ Cssxref("margin") }}</li> + <li>margin-* (left|bottom|top|right|start|end)</li> + <li>{{ Cssxref("bottom") }}</li> + <li>{{ Cssxref("left") }}</li> + <li>{{ Cssxref("table-layout") }}</li> + <li>{{ Cssxref("z-index") }}</li> + <li>{{ Cssxref("column-width") }}</li> +</ul> diff --git a/files/fr/conflicting/web/guide/events/creating_and_triggering_events/index.html b/files/fr/conflicting/web/guide/events/creating_and_triggering_events/index.html new file mode 100644 index 0000000000..c075a3eec7 --- /dev/null +++ b/files/fr/conflicting/web/guide/events/creating_and_triggering_events/index.html @@ -0,0 +1,30 @@ +--- +title: dispatchEvent exemple +slug: DOM/dispatchEvent_exemple +tags: + - Référence_du_DOM_Gecko +translation_of: Web/Guide/Events/Creating_and_triggering_events +translation_of_original: Web/Guide/Events/Event_dispatching_example +--- +<div class="noinclude"> + {{ ApiRef() }}</div> +<p>Cet exemple montre la simulation d'un clic sur une case à cocher, à l'aide des méthodes DOM. Vous pouvez le voir en action <a class="external" href="http://developer.mozilla.org/samples/domref/dispatchEvent.html">ici</a>.</p> +<pre class="eval">function simulateClick() { + var evt = <a href="fr/DOM/document.createEvent">document.createEvent</a>("MouseEvents"); + evt.<a href="fr/DOM/event.initMouseEvent">initMouseEvent</a>("click", true, true, window, + 0, 0, 0, 0, 0, false, false, false, false, 0, null); + var cb = document.getElementById("checkbox"); + var canceled = !cb.<a href="fr/DOM/element.dispatchEvent">dispatchEvent</a>(evt); + if(canceled) { + // Un gestionnaire a appelé preventDefault + alert("canceled"); + } else { + // Aucun gestionnaire n'a appelé preventDefault + alert("not canceled"); + } +} +</pre> +<p> </p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/dispatchEvent_example", "es": "es/DOM/dispatchEvent_example", "pl": "pl/DOM/dispatchEvent_-_przyk\u0142ad" } ) }}</p> diff --git a/files/fr/conflicting/web/guide/index.html b/files/fr/conflicting/web/guide/index.html new file mode 100644 index 0000000000..303018ea82 --- /dev/null +++ b/files/fr/conflicting/web/guide/index.html @@ -0,0 +1,13 @@ +--- +title: Développement Web +slug: Développement_Web +tags: + - Développement_Web +translation_of: Web/Guide +translation_of_original: Web_Development +--- +<p>Le <strong>développement Web</strong> comprend tous les aspects du développement d'un site ou d'une application Web.</p> +<p>Découvrez comment créer d'un simple site web à des applications complexes et interactives utilisant les dernières technologies du web en parcourant les articles que vous trouverez ici.</p> +<div> <div> <table class="mainpage-table"> <tbody> <tr> <td colspan="2"> <h2 id="Sujets_de_documentation">Sujets de documentation</h2> </td> </tr> <tr> <td> <dl> <dt><a class="internal" href="/fr/Développement_Web/Introduction_au_développement_web" title="fr/Développement web/Introduction au développement web">Introduction au développement web</a></dt> <dd>Un guide pour apprendre comment développer pour le web.</dd> <dt><a class="internal" href="/fr/HTML" rel="internal" title="https://developer.mozilla.org/fr/HTML">HTML</a></dt> <dd>Le langage de balisage hypertexte est le langage de base pour créer des pages web et d'autres documents affichés dans un navigateur.</dd> <dt><a class="internal" href="/fr/JavaScript" rel="internal" title="https://developer.mozilla.org/fr/JavaScript">JavaScript</a></dt> <dd>JavaScript est le langage de script le plus couramment utilisé pour développer des applications web ; il est également utilisé dans le développement de logiciels basés sur Mozilla.</dd> <dt><a class="internal" href="fr/CSS" rel="internal">CSS</a></dt> <dd>Les feuilles de style en cascade permettent de concevoir des mises en pages complexes et d'avoir du style sur le web.</dd> <dt><a class="internal" href="/fr/AJAX" rel="internal" title="https://developer.mozilla.org/fr/AJAX">AJAX</a></dt> <dd>Il ne s'agit pas tellement d'une technologie que d'un ensemble de technologies ; à l'aide de JavaScript et d'autres outils du web modernes mises ensemble, il est possible de créer des applications web dynamiques.</dd> </dl> </td> <td> <dl> <dt><a class="internal" href="/fr/Standards_du_Web" title="fr/Standards du web">Standards du web</a></dt> <dd>Apprenez à rendre votre site ou application web accessibles au plus grand nombre grâce à sa compatibilité avec le web ouvert.</dd> <dt><a href="/fr/Développement_Web/Développer_des_sites_à_compatibilité_descendante" title="Développer des sites à compatibilité descendante">Développer des sites à compatibilité descendante</a></dt> <dd>Bonnes pratiques de création de sites qui continuent de fonctionner avec les mises à jour des navigateurs.</dd> <dt><a class="internal" href="/fr/DOM" rel="internal" title="https://developer.mozilla.org/fr/DOM">DOM</a></dt> <dd>Le modèle objet de document est une API pour les documents HTML et XML qui fournit une représentation structurée du document qui peut être modifiée afin de changer son contenu et sa présentation.</dd> <dt><a class="internal" href="/fr/XHTML" title="https://developer.mozilla.org/fr/XHTML">XHTML</a></dt> <dd>XHTML est un langage semblable à HTML, mais basé sur XML qui permet d'avoir une syntaxe plus stricte.</dd> <dt><a class="internal" href="/fr/SVG" rel="internal" title="https://developer.mozilla.org/fr/SVG">SVG</a></dt> <dd>SVG est un langage de balisage XML permettant de décrire des graphiques vectoriels en deux dimensions.</dd> <dt><a class="internal" href="/fr/FAQ_de_Mozilla_pour_développeurs_web" title="fr/FAQ de Mozilla pour développeurs web">FAQ de Mozilla pour développeurs web</a></dt> <dd>Les questions les plus fréquemment posées par les développeurs web… et leurs réponses !</dd> </dl> <p><span class="alllinks"><a href="/Special:Tags?tag=Développement_web&language=fr" title="Special:Tags?tag=Développement_web&language=fr">Tout afficher…</a></span></p> </td> </tr> <tr> <td> <h2 id="Communauté">Communauté</h2> <ul> <li><a class="external" href="http://www.geckozone.org/forum/viewforum.php?f=8">Forum Développement web</a> sur les forums Geckozone</li> <li>Voir les forums de Mozilla… <ul> <li><a class="link-https" href="https://lists.mozilla.org/listinfo/dev-web-development" rel="external nofollow" title="https://lists.mozilla.org/listinfo/dev-web-development"> comme liste de diffusion</a></li> <li><a class="link-news" href="news://news.mozilla.org/mozilla.dev.web-development" rel="external nofollow" title="news://news.mozilla.org/mozilla.dev.web-development"> comme groupe de discussion</a></li> <li><a class="external" href="http://groups.google.com/group/mozilla.dev.web-development" rel="external nofollow" title="http://groups.google.com/group/mozilla.dev.web-development"> comme groupe Google</a></li> <li><a class="external" href="http://groups.google.com/group/mozilla.dev.web-development/feeds" rel="external nofollow" title="http://groups.google.com/group/mozilla.dev.web-development/feeds"> comme flux web</a></li> </ul> </li> <li><a class="external" href="/web-tech" title="https://developer.mozilla.org/editor/fckeditor/core/editor/web-tech/">Mozilla Web-tech blog</a></li> <li><a class="external" href="http://www.whatwg.org/" rel="external nofollow" title="http://www.whatwg.org/">WHAT Working Group</a></li> <li><a class="external" href="http://webdevfeedhouse.com/" rel="external nofollow" title="http://webdevfeedhouse.com/">WebDev FeedHouse</a></li> </ul> </td> <td> <h2 id="Outils">Outils</h2> <ul> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/1843" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/1843">L'extension Firebug</a></li> <li><a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/60" rel="external nofollow" title="https://addons.mozilla.org/en-US/firefox/addon/60">L'extension Web Developer</a></li> <li><a href="fr/Venkman" rel="internal">Venkman</a>, le débogueur JavaScript</li> <li><a href="fr/Inspecteur_DOM" rel="internal">L'inspecteur DOM</a> <p><span class="alllinks"><a href="/Special:Tags?tag=Web_Development:Tools&language=en" title="Special:Tags?tag=Web_Development:Tools&language=en">Tout afficher…</a></span></p> </li> </ul> </td> </tr> </tbody> </table> </div> <p>{{ languages( { "zh-tw": "zh_tw/Web_開發", "de": "de/Webentwicklung", "en": "en/Web_Development", "es": "es/Desarrollo_Web", "it": "it/Sviluppo_Web", "ja": "ja/Web_Development", "pl": "pl/Programowanie_WWW","zh-cn": "cn/Web_Development" } ) }}</p> +</div> +<p>s</p> diff --git a/files/fr/conflicting/web/html/element/index.html b/files/fr/conflicting/web/html/element/index.html new file mode 100644 index 0000000000..42f2df0c51 --- /dev/null +++ b/files/fr/conflicting/web/html/element/index.html @@ -0,0 +1,580 @@ +--- +title: Liste des éléments HTML5 +slug: Web/Guide/HTML/HTML5/Liste_des_éléments_HTML5 +tags: + - Débutant + - Guide + - HTML + - HTML5 + - Web +translation_of: Web/HTML/Element +translation_of_original: Web/Guide/HTML/HTML5/HTML5_element_list +--- +<p>Cette Page n'est pas encore complète.</p> + +<p>Travail progressif basé sur document de travail en court à <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/" rel="external" title="http://www.whatwg.org/specs/web-apps/current-work/multipage/">http://www.whatwg.org/specs/web-apps/current-work/multipage/</a>.</p> + +<h3 id="Élément_racine" style="">Élément racine</h3> + +<p>Les éléments racines définissent la structure d'un document HTML. Ils sont présents dans chacune des pages web et se situent à la suite de la déclaration doctype à la première ligne du document HTML. Les éléments de page sont placés à l'intérieur des balises ouvrante <html> et fermante </html>.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("html") }}</td> + <td>L'<em>élément HTML racine</em> (<strong><code><html></code></strong>) représente la racine du document HTML. Tout autre élément est un descendant de cet élément racine.</td> + </tr> + </tbody> +</table> + +<h3 id="Métadonnées_du_document">Métadonnées du document</h3> + +<p>Les méta-données contiennent les informations liées à la page telles que les styles de présentation et les scripts. Les méta-données de style et de scripts peuvent être définies au sein de la page web ou via un lien pointant vers un fichier.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("head") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("title") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("base") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("link") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("meta") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("style") }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Gestion_des_scripts">Gestion des scripts</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("script") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("noscript") }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Sections">Sections</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("body") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("section") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("nav") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("article") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("aside") }}</td> + <td> </td> + </tr> + <tr> + <td><a href="/fr/HTML/Element/Heading_Elements" title="Elementy blokowe"><code><h1>,<h2>,<h3>,<h4>,<h5>,<h6></code></a></td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("hgroup") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("header") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("footer") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("address") }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Contenu_de_type_bloc">Contenu de type bloc</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("p") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("hr") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("pre") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("blockquote") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("ol") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("ul") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("li") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("dl") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("dt") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("dd") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("figure") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("figcaption") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("div") }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Les_sémantiques_à_un_niveau_textuel">Les sémantiques à un niveau textuel</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("a") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("em") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("strong") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("small") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("s") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("cite") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("q") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("dfn") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("abbr") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("data") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("time") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("code") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("var") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("samp") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("kbd") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("sub") }},{{ HTMLElement("sup") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("i") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("b") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("u") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("mark") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("ruby") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("rt") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("rp") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("bdi") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("bdo") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("span") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("br") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("wbr") }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Les_éléments_d'édition">Les éléments d'édition</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col"> </th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("ins") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("del") }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Le_contenu_inclus">Le contenu inclus</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col"> </th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("img") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("iframe") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("object") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("param") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("video") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("audio") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("source") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("track") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("canvas") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("map") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("area") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("svg") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("math") }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Les_données_tabulaire">Les données tabulaire</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col"> </th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("table") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("caption") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("colgroup") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("col") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("tbody") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("thead") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("tfoot") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("tr") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("td") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("th") }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Les_formulaires">Les formulaires</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col"> </th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("form") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("fieldset") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("legend") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("label") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("input") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("button") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("select") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("datalist") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("optgroup") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("option") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("textarea") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("keygen") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("output") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("progress") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("meter") }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h3 id="Les_éléments_pour_l'interactivité">Les éléments pour l'interactivité</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Balise</th> + <th scope="col"> </th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ HTMLElement("details") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("summary") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("command") }}</td> + <td> </td> + </tr> + <tr> + <td>{{ HTMLElement("menu") }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/fr/conflicting/web/html/global_attributes/index.html b/files/fr/conflicting/web/html/global_attributes/index.html new file mode 100644 index 0000000000..3ff9306fa4 --- /dev/null +++ b/files/fr/conflicting/web/html/global_attributes/index.html @@ -0,0 +1,26 @@ +--- +title: Attribut universel +slug: Glossaire/Attribut_global +tags: + - Attribut + - Glossaire + - HTML +translation_of: Web/HTML/Global_attributes +translation_of_original: Glossary/Global_attribute +--- +<p>Les <strong>attributs universels</strong> sont des {{glossary("attribute","attributs")}} qui peuvent être utilisés avec tous les {{glossary("element","éléments")}} (bien que parfois sans effet sur certains d'entre-eux).</p> + +<p>Un petit nombre d'attributs peut être utilisé sur tout élément HTML :</p> + +<ul> + <li><a href="/fr/docs/Web/HTML/Attributs_globaux/dir"><strong>dir</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/lang"><strong>lang</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/style"><strong>style</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/id"><strong>id</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/class"><strong>class</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/tabindex"><strong>tabindex</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/accesskey"><strong>accesskey</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/title"><strong>title</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/hidden"><strong>hidden</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/data-*"><strong>data-*</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/contextmenu"><strong>contextmenu</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/contenteditable"><strong>contenteditable</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/translate"><strong>translate</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/spellcheck"><strong>spellcheck</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/draggable"><strong>draggable</strong></a>, <a href="/fr/docs/Web/HTML/Attributs_globaux/dropzone"><strong>dropzone</strong></a>, <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/itemid"><strong>itemid</strong></a>, <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/itemprop"><strong>itemprop</strong></a>, <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/itemref"><strong>itemref</strong></a>, <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/itemscope"><strong>itemscope</strong></a> et <a href="https://developer.mozilla.org/fr/docs/Web/HTML/Attributs_universels/itemtype"><strong>itemtype</strong></a>.</li> + <li><strong>xml:lang</strong> et <strong>xml:base</strong>, dépréciés, hérités des spécifications {{glossary("XHTML")}} et conservés pour des raisons de compatibilité.</li> + <li>Les multiples attributs <strong><a href="https://developer.mozilla.org/fr/docs/Accessibilité/ARIA">aria-*</a></strong>, pour améliorer l'accessibilité.</li> + <li>Les attributs de gestion d'événement : <strong>onabort</strong>, <strong>onautocomplete</strong>, <strong>onautocompleteerror</strong>, <strong>onblur</strong>, <strong>oncancel</strong>, <strong>oncanplay</strong>, <strong>oncanplaythrough</strong>, <strong>onchange</strong>, <strong>onclick</strong>, <strong>onclose</strong>, <strong>oncontextmenu</strong>, <strong>oncuechange</strong>, <strong>ondblclick</strong>, <strong>ondrag</strong>, <strong>ondragend</strong>, <strong>ondragenter</strong>, <strong>ondragexit</strong>, <strong>ondragleave</strong>, <strong>ondragover</strong>, <strong>ondragstart</strong>, <strong>ondrop</strong>, <strong>ondurationchange</strong>, <strong>onemptied</strong>, <strong>onended</strong>, <strong>onerror</strong>, <strong>onfocus</strong>, <strong>oninput</strong>, <strong>oninvalid</strong>, <strong>onkeydown</strong>, <strong>onkeypress</strong>, <strong>onkeyup</strong>, <strong>onload</strong>, <strong>onloadeddata</strong>, <strong>onloadedmetadata</strong>, <strong>onloadstart</strong>, <strong>onmousedown</strong>, <strong>onmouseenter</strong>, <strong>onmouseleave</strong>, <strong>onmousemove</strong>, <strong>onmouseout</strong>, <strong>onmouseover</strong>, <strong>onmouseup</strong>, <strong>onmousewheel</strong>, <strong>onpause</strong>, <strong>onplay</strong>, <strong>onplaying</strong>, <strong>onprogress</strong>, <strong>onratechange</strong>, <strong>onreset</strong>, <strong>onresize</strong>, <strong>onscroll</strong>, <strong>onseeked</strong>, <strong>onseeking</strong>, <strong>onselect</strong>, <strong>onshow</strong>, <strong>onsort</strong>, <strong>onstalled</strong>, <strong>onsubmit</strong>, <strong>onsuspend</strong>, <strong>ontimeupdate</strong>, <strong>ontoggle</strong>, <strong>onvolumechange</strong>, <strong>onwaiting</strong>.</li> +</ul> + +<h2 id="Pour_approfondir">Pour approfondir</h2> + +<ul> + <li>Les <a href="/fr/docs/Web/HTML/Attributs_globaux">attributs universels</a> HTML.</li> +</ul> diff --git a/files/fr/conflicting/web/http/basics_of_http/mime_types/index.html b/files/fr/conflicting/web/http/basics_of_http/mime_types/index.html new file mode 100644 index 0000000000..8b529a4399 --- /dev/null +++ b/files/fr/conflicting/web/http/basics_of_http/mime_types/index.html @@ -0,0 +1,67 @@ +--- +title: Type MIME incorrect pour les fichiers CSS +slug: Type_MIME_incorrect_pour_les_fichiers_CSS +tags: + - CSS +translation_of: Web/HTTP/Basics_of_HTTP/MIME_types +translation_of_original: Incorrect_MIME_Type_for_CSS_Files +--- +<h3 id="Description_du_probl.C3.A8me" name="Description_du_probl.C3.A8me">Description du problème</h3> + +<p>Vous pouvez rencontrer des pages Web utilisant CSS avec une mise en page dégradée sous Firefox, Netscape 7.x ou tout autre navigateur basé sur Gecko comme Mozilla, tandis qu'Internet Explorer les affiche correctement. Une des raisons les plus courantes de cette situation est une configuration incorrecte du serveur Web hébergeant le fichier CSS. Certains serveurs Web Apache et iPlanet associent les fichiers portant une extension <code>.css</code> avec un type MIME incorrect comme « <code>text/plain</code> » ou « <code>application/x-pointplus</code> ». Dans certains cas, Netscape 7.x et Mozilla ignorent le fichier CSS à cause d'un mauvais type MIME et utilisent une feuille de style par défaut, ce qui fait que la mise en page n'est plus celle qui était prévue par le développeur Web.</p> + +<h3 id="La_source_du_probl.C3.A8me" name="La_source_du_probl.C3.A8me">La source du problème</h3> + +<p>La <a class="external" href="http://www.w3.org/TR/REC-CSS2/conform.html#text-css">spécification</a> du W3C indique que les fichiers CSS doivent être servis avec un type MIME <code>text/css</code>. Mozilla et Netscape 7.x, lorsqu'ils sont en « mode strict » suivront la spécification à la lettre et s'attendront à ce que le fichier CSS soit servi avec le type MIME correct (le « mode strict » est activé en mentionnant une DTD « stricte » dans la première ligne de la page HTML). En mode « quirks », ces navigateurs tolèreront un type MIME incorrect et utiliseront la feuille de style associée malgré la configuration incorrecte du serveur. Cela signifie que vous ne pouvez pas avoir de documents « stricts » sur un serveur mal configuré. Internet Explorer laissera passer cela en ne prenant pas en compte le type MIME fourni par le serveur dans les en-têtes HTTP.</p> + +<h3 id="La_solution_.C3.A0_mettre_en_.C5.93uvre" name="La_solution_.C3.A0_mettre_en_.C5.93uvre">La solution à mettre en œuvre</h3> + +<p>Vous devrez demander à l'administrateur du serveur de mettre à jour le fichier de configuration des types MIME du serveur Web.</p> + +<p>Ce problème, pour les serveurs Web iPlanet/Netscape, a déjà été pris en compte par le fournissseur, qui a publié une <a href="#Changement_des_types_MIME_sur_un_serveur_Web_iPlanet.2FSun">note technique</a> dans sa base de connaissances.</p> + +<p>Si vous utilisez Apache, vous pouvez également changer la configuration du fichier <code>.htaccess</code> dans votre répertoire racine (le fichier <code>.htaccess</code> est un fichier de configuration en lecture seule gérant un certain nombre de choses dont les types MIME). Ajoutez cette ligne dans votre fichier <code>.htaccess</code> :</p> + +<pre>AddType text/css .css</pre> + +<p>Notez que certains administrateurs désactivent l'utilisation de fichiers de configuration <code>.htaccess</code> sur leurs serveurs Apache parce que cela cause une petite baisse des performances.</p> + +<h3 id="Conclusion" name="Conclusion">Conclusion</h3> + +<p>L'utilisation d'une définition de type de document strict avec Mozilla signifie que le serveur Web servant vos pages Web doit être configuré correctement. Il existe plusieurs manières de contourner ce problème, mais la plus efficace est d'associer les fichiers CSS avec le bon type MIME. Demandez à l'administrateur de corriger cela pour vous, tous les autres utilisateurs qui publient des documents HTML en mode strict vous remercieront !</p> + +<h3 id="Changement_des_types_MIME_sur_les_serveurs_Web_iPlanet.2FSun" name="Changement_des_types_MIME_sur_les_serveurs_Web_iPlanet.2FSun">Changement des types MIME sur les serveurs Web iPlanet/Sun</h3> + +<p><strong>Problème</strong></p> + +<p>Les utilisateurs sont confrontés avec une boîte de dialogue « Enregistrer sous » avec le type de contenu défini à <code>application/x-pointplus</code> ou le contenu du fichier CSS est affiché en mode texte dans le navigateur lorsqu'une page renseigne un fichier CSS avec l'extension de fichier <code>.css</code>.</p> + +<p><strong>Solution</strong></p> + +<p>Le type de fichier CSS ne correspond pas aux feuilles de style CSS dans les types de fichiers par défaut fournis avec Enterprise Server. Vous pouvez changer les correspondances dans la page des types MIME globaux.</p> + +<p>Pour accéder à cette page, depuis l'administration du serveur, choisissez <code>Server Preferences</code>, <code>MIME Types</code> et définissez le type MIME pour l'extension <code>.css</code> à <code>text/css</code> plutôt que <code>application/x-pointplus</code>.</p> + +<p>Si le problème persiste, désactivez l'option keepalive en ajoutant « <code>KeepAliveTimeout 0</code> » à <code>magnus.conf</code>.</p> + +<p>Basé sur : <a class="external" href="http://sunsolve.sun.com">SunSolve, Sun Microsystems</a></p> + +<h3 id="Ressources_additionnelles" name="Ressources_additionnelles">Ressources additionnelles</h3> + +<p><a href="fr/Configuration_correcte_des_types_MIME_d'un_serveur">Configuration correcte des types MIME d'un serveur</a></p> + +<p><a class="external" href="http://www.htmlhelp.com/faq/html/media.html#garbled-media">About garbled media</a></p> + +<div class="originaldocinfo"> +<h3 id="Informations_sur_le_document_original" name="Informations_sur_le_document_original">Informations sur le document original</h3> + +<ul> + <li>Auteur(s) : Tristan Nitot</li> + <li>Date de publication : 18 mars 2002</li> + <li>Copyright © 2001-2003 Netscape.</li> +</ul> +</div> + +<p><span class="comment">Interwiki Language Links</span></p> + +<p>{{ languages( { "en": "en/Incorrect_MIME_Type_for_CSS_Files", "es": "es/Tipo_MIME_incorrecto_en_archivos_CSS", "pl": "pl/Nieprawid\u0142owy_typ_MIME_plik\u00f3w_CSS" } ) }}</p> diff --git a/files/fr/conflicting/web/javascript/equality_comparisons_and_sameness/index.html b/files/fr/conflicting/web/javascript/equality_comparisons_and_sameness/index.html new file mode 100644 index 0000000000..7a6c3c3ac8 --- /dev/null +++ b/files/fr/conflicting/web/javascript/equality_comparisons_and_sameness/index.html @@ -0,0 +1,265 @@ +--- +title: L'égalité en JavaScript +slug: Web/JavaScript/Guide/Égalité_en_JavaScript +tags: + - Advanced + - Guide + - JavaScript + - Operators +translation_of: Web/JavaScript/Equality_comparisons_and_sameness +translation_of_original: Web/JavaScript/Guide/Sameness +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> +<p>EcmaScript6 possède trois outils pour déterminer si deux valeurs x et y sont « égales ». Il y a l'égalité simple (deux signes égal) (<a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>==</code></a>), l'égalité stricte (trois signes égal) (<a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>===</code></a>), et la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a>. (Cette méthode a été ajoutée avec ES6. Les opérateurs d'égalité simple et stricte étaient présents en JavaScript avant ES6 et ont conservé leur comportement.)</p> +<h2 id="Un_aperçu">Un aperçu</h2> +<p>Voici comment utiliser chacun de ces outils de comparaisons :</p> +<pre class="brush:js">x == y</pre> +<pre class="brush:js">x === y</pre> +<pre class="brush:js">Object.is(x, y)</pre> +<p>En résumé : l'opérateur d'égalité simple effectuera une conversion de type entre les objets comparés, l'opérateur d'égalité stricte n'effectuera pas de conversion avant de comparer les objets (<code>false</code> est renvoyé automatiquement si les types sont différents), enfin <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> se comportera de la même façon que l'opérateur d'égalité stricte avec des règles supplémentaires pour les valeurs <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>, <code>-0</code> et <code>+0</code>. <code>Object.is(-0, +0) </code>ne sera pas vérifié et <code>Object.is(NaN, NaN)</code> sera vrai. (Généralement, quand on compare <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>, on obtient le résultat <code>false</code> car la norme IEEE 754 indique que ce comportement est celui attendu pour l'égalité simple ou stricte.)</p> +<p>Cette égalité ne s'applique qu'aux types de données primitifs, aucune des méthodes présentées ci-avant ne permet de comparer la structure de deux objets. Si deux objets x et y possèdent la même structure mais que ce sont des objets distincts, chacune de ces méthodes renverra le résultat <code>false</code>.</p> +<p>Ainsi :</p> +<pre class="brush:js">let x = { valeur: 17 }; +let y = { valeur: 17 }; +console.log(Object.is(x, y)); // false; +console.log(x === y); // false +console.log(x == y); // false</pre> +<h2 id="Les_égalités_simples_strictes_et_les_valeurs_identiques">Les égalités simples, strictes et les valeurs identiques</h2> +<p>Les comparaisons effectuées par les opérateurs d'égalité simple et d'égalité stricte sont décrites par EcmaScript5 : l'algorithme de l'opérateur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>==</code></a> est décrit dans la <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.3">section 11.9.3 (en anglais)</a> et l'algorithme de l'opérateur <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>=== </code></a>est décrit dans la <a href="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6" title="http://ecma-international.org/ecma-262/5.1/#sec-11.9.6">section 11.9.6 (en anglais)</a>. Ces deux algorithmes sont expliqués de façon simple et concise, il est préferable de lire le deuxième algorithme avant le premier. ES5 décrit également l'algorithme utilisé en interne par le moteur JavaScript : <a href="http://ecma-international.org/ecma-262/5.1/#sec-9.12" title="http://ecma-international.org/ecma-262/5.1/#sec-9.12">section 9.12, The SameValue Algorithm (en anglais)</a>. Ce dernier algorithme est très proche de celui utilisé pour l'égalité stricte, ils différent de par leurs gestions différentes des nombres représentés sous forme d'objets <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number"><code>Number</code></a>. <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> n'est que la retranscription de cet algorithme, utilisable depuis ES6.</p> +<p>Excepté pour la conversion implicite, on peut voir que, pour les opérateurs d'égalité simple et stricte, l'algorithme d'égalité stricte est un sous-ensemble de l'égalité simple car 11.9.6.2-7 correspond à 11.9.3.1.a-f.</p> +<h2 id="Comprendre_le_sens_des_différentes_égalités">Comprendre le sens des différentes égalités</h2> +<p>Avant ES6, on pouvait penser que l'égalité stricte était une version « améliorée » de l'égalité simple, ou vice-versa. Par exemple, dans certains cas, on peut trouver que l'égalité simple est plus souple que l'égalité stricte car elle effectue une conversion des types (ce qui permet de vérifier <code>6 == "6"</code>). Au contraire, on peut trouver que l'égalité stricte est « meilleure » que l'égalité simple car il est nécessaire que les deux opérandes soient du même type. L'utilité de chaque opérateur dépend du cadre dans lequel on l'utilise.</p> +<p><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a>, en revanche, n'est pas plus souple ou plus stricte que ces égalités. Il n'est pas non plus un « intermédiaire » entre ces deux opérateurs. <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> diffère dans sa façon de gérer la valeur numérique spéciale <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>. D'une certaine façon, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is">Object.is</a></code> se différencie en fonction de ses caractéristiques spéciales sur <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN">NaN</a></code> et -0 et +0.</p> +<table class="standard-table"> + <caption> + Opérateurs d'égalité</caption> + <thead> + <tr> + <th scope="col" style="text-align: center;">x</th> + <th scope="col" style="text-align: center;">y</th> + <th scope="col" style="width: 10em; text-align: center;"><code>==</code></th> + <th scope="col" style="width: 10em; text-align: center;"><code>===</code></th> + <th scope="col" style="width: 10em; text-align: center;"><code>Object.is</code></th> + </tr> + </thead> + <tbody> + <tr> + <td><code>undefined</code></td> + <td><code>undefined</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>null</code></td> + <td><code>null</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>true</code></td> + <td><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>false</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>"toto"</code></td> + <td><code>"toto"</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>{ toto: "truc" }</code></td> + <td><code>x</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + <tr> + <td><code>+0</code></td> + <td><code>-0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>""</code></td> + <td><code>0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>"0"</code></td> + <td><code>0</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>"17"</code></td> + <td><code>17</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>new String("toto")</code></td> + <td><code>"toto"</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>null</code></td> + <td><code>undefined</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>null</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>undefined</code></td> + <td><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>{ toto: "truc" }</code></td> + <td><code>{ toto: "truc" }</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>new String("toto")</code></td> + <td><code>new String("toto")</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>null</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>0</code></td> + <td><code>NaN</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>"toto"</code></td> + <td><code>NaN</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + </tr> + <tr> + <td><code>NaN</code></td> + <td><code>NaN</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(255, 144, 144); text-align: center;"><code>false</code></td> + <td style="background-color: rgb(144, 255, 144); text-align: center;"><code>true</code></td> + </tr> + </tbody> +</table> +<h2 id="Dans_quels_cas_utiliser_Object.is_ou_l'opérateur_d'égalité_stricte">Dans quels cas utiliser <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> ou l'opérateur d'égalité stricte</h2> +<p>En dehors du traîtement effectué pour <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/is"><code>Object.is</code></a> s'avère utile lorsqu'on manipule des valeurs très proches de 0 (parfois utilisées pour la métaprogrammation et notamment pour les descripteurs de propriétés et qu'on souhaite reproduire certaines caractéristiques de <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Object/defineProperty"><code>Object.defineProperty</code></a>). Si on n'a pas ce cas de figure à gérer, il est conseillé d'utiliser <a href="/fr/docs/JavaScript/Reference/R%C3%A9f%C3%A9rence_JavaScript/Op%C3%A9rateurs/Op%C3%A9rateurs_de_comparaison"><code>===</code></a>. Même dans l'éventualité où on devrait gérer une comparaison entre deux valeurs <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/NaN"><code>NaN</code></a> il est souvent plus facile de traiter le cas particulier en utilisant la fonction <a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Fonctions_globales/isNaN"><code>isNaN</code></a> présente dans les anciennes versions d'ECMAScript.</p> +<p>Voici une liste (non exhaustive) des méthodes et opérateurs qui pourraient entraîner une apparition des valeurs <code>-0</code> et <code>+0</code> :</p> +<dl> + <dt> + <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques#N.C3.A9gation_unaire_(-)"><code>- (négation unaire)</code></a></dt> +</dl> +<dl> + <dd> + <p>Il peut sembler évident que l'opposé de <code>0</code> est <code>-0</code> mais lorsque que cette opération est réalisée dans une expression, il est plus facile d'identifier la transformation qui s'est effectuée. Par exemple :</p> + <pre class="brush:js">let forceFrottement = obj.masse * -obj.vitesse</pre> + <p>Si <code>obj.vitesse </code>vaut <code>0</code>, on aura <code>-0</code> comme résultat du calcul, et c'est cette valeur qui sera assignée à <code>forceFrottement</code></p> + </dd> +</dl> +<dl> + <dt> + <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/atan2"><code>Math.atan2</code></a></dt> + <dt> + <a href="/fr/docs/JavaScript/Reference/Objets_globaux/Math/ceil"><code>Math.ceil</code></a></dt> + <dt> + <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/pow"><code>Math.pow</code></a></dt> + <dt> + <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/round"><code>Math.round</code></a></dt> +</dl> +<dl> + <dd> + La valeur <code>-0</code> peut être produite par ces méthodes (et donc introduite dans une expression qui les comportent), même dans le cas où <code>-0</code> n'est pas un argument. Par exemple, si on utilise <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/pow"><code>Math.pow</code></a> pour calculer <code>-<a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Infinity">Infinity</a></code> à une puissance entière impaire et négative, on obtiendra <code>-0</code>. Voir les différentes pages sur ces méthodes pour plus d'informations.</dd> +</dl> +<dl> + <dt> + <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/floor"><code>Math.floor</code></a></dt> + <dt> + <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/max"><code>Math.max</code></a></dt> + <dt> + <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/min"><code>Math.min</code></a></dt> + <dt> + <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sin"><code>Math.sin</code></a></dt> + <dt> + <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/sqrt"><code>Math.sqrt</code></a></dt> + <dt> + <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Math/tan"><code>Math.tan</code></a></dt> +</dl> +<dl> + <dd> + Ces méthodes peuvent produire la valeur <code>-0</code> si c'est un des paramètres de la fonction. Par exemple, <code>Math.min(-0, +0)</code> vaudra <code>-0</code>. Voir les différentes pages sur ces méthodes pour plus d'informations.</dd> +</dl> +<dl> + <dt> + <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">~</a></code></dt> + <dt> + <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires"><<</a></code></dt> + <dt> + <code><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires">>></a></code></dt> + <dd> + Chacun de ces opérateurs utilise l'algorithme ToInt32. Or, il n'y a qu'une seule représentation possible pour 0 sous forme d'un entier sur 32 bits, c'est pourquoi <code>-0</code> ne pourra pas être « conservé » par une combinaison de ces opérations (même si cette combinaison est équivalente, logiquement, à une identité). Par exemple <code>Object.is(~~(-0), -0)</code> et <code>Object.is(-0 << 2 >> 2, -0)</code> produiront la valeur <code>false</code>.</dd> +</dl> +<p>Il peut être dangereux d'utiliser <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is" title="/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/is"><code>Object.is</code></a> quand on ne souhaite pas différencier les deux valeurs <code>-0</code> et <code>+0</code>. En revanche, si on souhaite distinguer ces deux valeurs, cette fonction est idéale.</p> diff --git a/files/fr/conflicting/web/javascript/guide/index.html b/files/fr/conflicting/web/javascript/guide/index.html new file mode 100644 index 0000000000..a251b58105 --- /dev/null +++ b/files/fr/conflicting/web/javascript/guide/index.html @@ -0,0 +1,899 @@ +--- +title: Objets élémentaires JavaScript +slug: Web/JavaScript/Guide/Objets_élémentaires_JavaScript +tags: + - Guide + - JavaScript + - Objets JavaScript +translation_of: Web/JavaScript/Guide +translation_of_original: Web/JavaScript/Guide/Predefined_Core_Objects +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Dans ce chapitre nous verrons les différents objets élémentaires qui existent en JavaScript : <code>Array</code>, <code>Boolean</code>, <code>Date</code>, <code>Function</code>, <code>Math</code>, <code>Number</code>, <code>RegExp</code>, et <code>String</code>.</p> + +<h2 id="Les_tableaux_objet_Array">Les tableaux : objet <code>Array</code></h2> + +<p>JavaScript ne possède pas type primitif pour les tableaux. En revanche, il est possible d'utiliser l'objet natif <code>Array</code> ainsi que ses méthodes pour manipuler des tableaux. L'objet <code>Array</code> possède différentes méthodes pour manipuler les tableaux : fusion, inverse, tri... Il possède une propriété permettant de déterminer la longueur du tableau et d'autres propriétés qu'on peut utiliser avec les expressions rationnelles.</p> + +<p>Un <em>tableau</em> est un ensemble ordonné de valeurs auxquelles on peut faire référence via un nom et un indice. Si par exemple on utilise un tableau <code>reg </code>qui contient un registre de noms indicés (autrement dit dont la position dans le tableau est déterminée) par un identifiant : on aurait <code>reg[1]</code> pour le premier nom, <code>reg[2]</code> pour le second et ainsi de suite/</p> + +<h3 id="Créer_un_tableau">Créer un tableau :</h3> + +<p>Les instructions suivantes permettent de créer des objets <code>Array</code> équivalents :</p> + +<div> +<pre class="brush: js">var arr = new Array(element0, element1, ..., elementN); +var arr = Array(element0, element1, ..., elementN); +var arr = [element0, element1, ..., elementN]; +</pre> +</div> + +<p><code>element0, element1, ..., elementN</code> est la liste des valeurs des éléments du tableau. Quand ces valeurs sont fournies, les éléments du tableau sont initialisés avec ses valeurs. La propriété <code>length </code>vaudra alors le nombre d'arguments.</p> + +<p>La dernière syntaxe, utilisant des crochets, est appelée « littéral de tableau » ou « initialisateur de tableau ». C'est la forme la plus courte pour créer un tableau et c'est cette forme qui est souvent préférée. Voir la page <a href="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux" title="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_littéraux#Litt.C3.A9raux_de_tableaux">Littéraux de tableaux</a> pour plus de détails.</p> + +<p>Lorsqu'on souhaite créer un tableau de longueur non nulle mais qui ne contient aucun élément, les syntaxes suivantes peuvent être utilisées :</p> + +<pre class="brush: js">var arr = new Array(longueurTabl); +var arr = Array(longueurTabl); + +// Ces instructions ont le même effet +var arr = []; +arr.length = longueurTabl; +</pre> + +<p>Dans le code ci-dessus, <code>longueurTabl</code> doit être du type <code>Number</code>. Si ce n'est pas le cas, un tableau avec une seule valeur, celle fournie, <code>longueurTabl</code>, sera créé. Si on appelle <code>arr.length</code>, on aura bien <code>longueurTabl</code>, en revanche le tableau ne contiendra que des éléments vides (indéfinis). Si on utilise une boucle <code>for...in</code> sur le tableau, aucun des éléments du tableau ne sera renvoyé.</p> + +<p>En plus de définir une nouvelle variable en lui assignant un tableau, on peut également assigner les tableaux à une propriété d'un nouvel objet ou d'un objet existant :</p> + +<pre class="brush: js">var obj = {}; +// ... +obj.prop = [element0, element1, ..., elementN]; + +// OU +var obj = {prop: [element0, element1, ...., elementN]} +</pre> + +<p>Si on souhaite initialiser un tableau avec un seul élément qui est un nombre, on doit utiliser la syntaxe avec crochets. En effet, si on utilise le constructeur <code>Array()</code> auquel on passe un seul argument numérique, celui-ci sera interprété comme <code>longueurTabl</code>, et non pas comme le seul élément du tableau.</p> + +<pre><code>var arr = [42]; +var arr = Array(42); // Crée un tableau sans élément mais de longueur 42 + +// L'instruction ci-avant est équivalente à +var arr = []; +arr.length = 42; +</code> +</pre> + +<p>Si on appelle le constructeur <code>Array() </code>avec un argument qui n'est pas un nombre entier (dont la partie décimale est non nulle), on obtiendra une erreur <code>RangeError</code>. Voici un exemple :</p> + +<pre>var arr = Array(9.3); // RangeError: Invalid array length +</pre> + +<p>Si on souhaite créer des tableaux d'un seul élément (peu importe le type), il est plus adapté d'utiliser des littéraux de tableaux ou de créer un tableau vide puis d'y ajouter la valeur.</p> + +<h3 id="Remplir_un_tableau">Remplir un tableau</h3> + +<p>Il est possible de remplir un tableau en affectant des valeurs à ses différents éléments :</p> + +<pre class="brush: js">var reg = []; +reg[0] = "Casey Jones"; +reg[1] = "Phil Lesh"; +reg[2] = "August West"; +</pre> + +<p><strong>Note :</strong> Si on utilise les crochets et un nombre décimal non entier, une propriété sera créée pour l'objet mais cela ne créera pas un élément du tableau.</p> + +<pre> var arr = []; +arr[3.4] = "Oranges"; +console.log(arr.length); // 0 +console.log(arr.hasOwnProperty(3.4)); // true +</pre> + +<p>On peut également remplir un tableau à la création :</p> + +<pre class="brush: js">var monTableau = new Array("Hello", maVar, 3.14159); +var monTableau = ["Mangue", "Pomme", "Orange"] +</pre> + +<h3 id="Faire_référence_aux_éléments_d'un_tableau">Faire référence aux éléments d'un tableau</h3> + +<p>Il est possible de faire référence aux élément d'un tableau en utilisant leur indice dans ce tableau. Ainsi, si on définit le tableau suivant :</p> + +<pre class="brush: js">var monTableau = ["Vent", "Eau", "Feu"]; +</pre> + +<p>On peut faire référence au premier élément du tableau en utilisant <code>monTableau[0]</code> et au second élément en utilisant <code>monTableau[1]</code>. Les indices des éléments d'un tableau commencent à zéro.</p> + +<p><strong>Note :</strong> L'opérateur du tableau (les crochets) est aussi utilisé pour accéder aux propriétés du tableau (en effet les tableaux sont des objets en JavaScript, et on peut donc utiliser leurs propriétés). Par exemple :</p> + +<pre> var tabl = ["un", "deux", "trois"]; +tabl[2]; // trois +tabl["length"]; // 3 +</pre> + +<h3 id="La_propriété_length">La propriété <code>length</code></h3> + +<p>En termes d'implémentation, les éléments d'un tableau sont en fait stockés comme des propriétés de l'objet et l'indice de l'élément est le nom de la propriété. La propriété <code>length</code> est spéciale : elle renvoie toujours l'indice du dernier élément plus 1. Attention : les indices d'un tableau, en JavaScript, commencent à 0 et pas à 1.</p> + +<pre class="brush: js">var chats = []; +chats[30] = ['Nyan']; +print(chats.length); // 31 +</pre> + +<p>Il est également possible d'affecter une valeur à la propriété <code>length</code>. Si on lui assigne une valeur inférieure au nombre d'éléments du tableau : le tableau sera tronqué. Si on lui affecte la valeur 0, le tableau sera entièrement vidé.</p> + +<pre class="brush: js">var chats = ['Marie', 'Toulouse', 'Berlioz']; +console.log(chats.length); // 3 + +chats.length = 2; +console.log(chats); // affiche "Marie,Toulouse" - Berlioz a été retiré + +chats.length = 0; +console.log(chats); // Rien n'est affiché : tableau vide + +chats.length = 3; +console.log(cats); // [undefined, undefined, undefined] +</pre> + +<h3 id="Effectuer_des_boucles_sur_des_tableaux">Effectuer des boucles sur des tableaux</h3> + +<p>On sera souvent amené à faire des boucles sur les valeurs d'un tableau pour répéter un traitement sur chacune d'elle. La façon la plus simple de faire des boucles est la suivante :</p> + +<pre class="brush: js">var couleurs = ['rouge', 'vert', 'bleu']; +for (var i = 0; i < couleurs.length; i++) { + console.log(couleurs[i]); +} +</pre> + +<p>Si on est certain qu'aucun des éléments du tableau ne pourra être évalué à <code>false</code>. Si par exemple le tableau est constitué d'éléments du <a href="/fr/docs/R%C3%A9f%C3%A9rence_DOM_Gecko">DOM</a>, on peut utiliser la syntaxe suivante, plus efficace :</p> + +<pre class="brush: js">var divs = document.getElementsByTagName('div'); +for (var i = 0, div; div = divs[i]; i++) { + /* Effectuer un traitement sur les div */ +} +</pre> + +<p>En faisant cela, on évite de répéter le test qui consiste à vérifier la longueur du tableau et on s'assure que la variable <code>div</code> est réassignée à chaque passage dans la boucle.</p> + +<p>La méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach()</code></a>, introduite avec JavaScript 1.6, permet de boucler sur un tableau d'une autre façon :</p> + +<pre class="brush: js">var couleurs = ['rouge', 'vert', 'bleu']; +couleurs.forEach(function(couleur) { + console.log(couleur); +}); +</pre> + +<p>La fonction, passée en argument de la méthode <code>forEach</code> est exécutée pour chaque élément du tableau (qui sera passé en argument de cette fonction). Les éléments du tableau non assignés ne sont pas traités.</p> + +<p>Les éléments du tableau qui n'ont pas été définis lors de la création du tableau ne sont pas utilisés avec <code>forEach, </code>en revanche lorsque <code>undefined</code> a été explicitement assigné à un élément du tableau, il est pris en compte :</p> + +<pre class="brush: js">var array = ['premier', 'second', , 'quatrième']; + +// la boucle ci-dessous renvoie ['premier', 'second', 'quatrième']; +array.forEach(function(element) { + console.log(element); +}) + +if(array[2] === undefined) { console.log('array[2] vaut undefined'); } // true + +var array = ['premier', 'second', undefined, 'quatrième']; + +//la boucle ci-dessous renvoie ['premier', 'second', undefined, 'quatrième']; +array.forEach(function(element) { + console.log(element); +})</pre> + +<p>Les éléments d'un tableau étant stockés comme des propriétés d'un tableau, il n'est pas conseillé d'utiliser de boucle <code>for...in</code> pour traiter les tableaux car on traitera les éléments du tableau ainsi que toutes les propriétés énumérables.</p> + +<h3 id="Méthodes_de_l'objet_Array">Méthodes de l'objet <code>Array</code></h3> + +<p>L'objet <code>Array</code> possède les méthodes suivantes :</p> + +<ul> + <li><a href="/fr/docs/JavaScript/R%C3%A9f%C3%A9rence_JavaScript/R%C3%A9f%C3%A9rence_JavaScript/Objets_globaux/Array/concat"><code>concat()</code></a> : fusionne deux tableaux et renvoie le résultat de cette fusion + + <pre class="brush: js">var monTableau = new Array("1", "2", "3"); +monTableau = monTableau.concat("a", "b", "c"); // monTableau vaut maintenant ["1", "2", "3", "a", "b", "c"] +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/join"><code>join(délimiteur = ",")</code></a> fusionne les éléments d'un tableau en une seule chaîne, en utilisant un délimiteur : + <pre class="brush: js">var monTableau = new Array("Air", "Eau", "Feu"); +var liste = monTableauArray.join(" - "); // "Air - Eau - Feu" +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/push"><code>push()</code></a> ajoute un ou plusieurs éléments à la fin d'un tableau et retourne la longueur du tableau après cet ajout : + <pre class="brush: js">var monTableau = new Array("1", "2"); +monTableau.push("3"); // monTableau vaut maintenant ["1", "2", "3"] +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/pop"><code>pop()</code></a> retire le dernier élément d'un tableau et renvoie cet élément : + <pre class="brush: js">var monTableau = new Array("1", "2", "3"); +var dernier = monTableau.pop(); // monTableau vaut ["1", "2"] et dernier = "3" +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/shift"><code>shift()</code></a> retire le premier élément du tableau et renvoie cet élément : + <pre class="brush: js">var monTableau = new Array ("1", "2", "3"); +var premier = monTableau.shift(); // monTableau vaut ["2", "3"], premier vaut "1" +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/unshift"><code>unshift()</code></a> ajoute un ou plusieurs éléments en premier(s) élément(s) dans un tableau et renvoie la nouvelle longueur : + <pre class="brush: js">var monTableau = new Array ("1", "2", "3"); +monTableau.unshift("4", "5"); // monTableau devient ["4", "5", "1", "2", "3"]</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/slice"><code>slice(indice_debut, jusqu_indice)</code></a> extrait une portion d'un tableau et renvoie un nouveau tableau : + <pre class="brush: js">var monTableau = new Array ("a", "b", "c", "d", "e"); +monTableau = monTableau.slice(1, 4); /* commencer à 1 et jusqu'à l'indice 3, renvoyant + ainsi [ "b", "c", "d"] */ +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/splice"><code>splice(indice, nombre_a_enlever, ajout_element1, ajout_element2, ...)</code></a> retire des éléments d'un tableau et les remplace si des valeurs sont fournies : + <pre class="brush: js">var monTableau = new Array ("1", "2", "3", "4", "5"); +monTableau.splice(1, 3, "a", "b", "c", "d"); // monTableau vaut ["1", "a", "b", "c", "d", "5"] + // ce code commence à l'indice 1 (où il y a la valeur "2"), retire 3 éléments + // puis insère les éléments fournis à partir de cet indice +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/reverse"><code>reverse()</code></a> transpose les éléments d'un tableau : le premier élément du tableau et le dernier devient le premier : + <pre class="brush: js">var monTableau = new Array ("1", "2", "3"); +monTableau.reverse(); // transpose le tableau qui devient [ "3", "2", "1" ] +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/sort"><code>sort()</code></a> trie les éléments d'un tableau : + <pre class="brush: js">var monTableau = new Array("Air", "Eau", "Feu"); +monTableau.sort(); // trie le tableau qui devient [ "Air", "Eau", "Feu" ] +</pre> + + <p><code>sort()</code> peut également prendre en argument une fonction de rappel (<em>callback</em> en anglais) qui détermine la relation d'ordre selon laquelle les éléments sont comparés. Cette fonction compare deux valeurs et renvoie l'une de ces trois valeurs :</p> + + <ul> + <li>Si <code>a</code> est inférieur à <code>b</code> selon la relation d'ordre : -1 (ou tout autre nombre négatif)</li> + <li>Si <code>a</code> est supérieur à <code>b</code> selon la relation d'ordre : 1 (ou tout autre nombre positif)</li> + <li>Si <code>a</code> et<code> b</code> sont égaux selon la relation d'ordre : 0.</li> + </ul> + + <p>Par exemple, on peut utiliser la fonction ci-après pour trier selon la dernière lettre d'un tableau :</p> + + <pre class="brush: js">var triFn = function(a, b){ + if (a[a.length - 1] < b[b.length - 1]) return -1; + if (a[a.length - 1] > b[b.length - 1]) return 1; + if (a[a.length - 1] == b[b.length - 1]) return 0; +} +monTableau.sort(triFn); // tri le tableau qui deviendra +//monTableau = ["Air","Eau","Feu"]</pre> + </li> +</ul> + +<p>Du code compatible avec les anciens navigateurs, pour remplacer ces fonctions, est disponible sur les pages qui concernent ces fonctions. Le support des navigateurs pour ces fonctions est détaillé <a class="external" href="http://www.robertnyman.com/javascript/" title="http://www.robertnyman.com/javascript/">ici (en anglais)</a>.</p> + +<ul> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/indexOf"><code>indexOf(élémentCherché[, indiceDebut])</code></a> permet de chercher dans le tableau l'élément <code>élémentCherché</code> et renvoie le premier indice où l'élément est trouvé. + + <pre class="brush: js">var a = ['a', 'b', 'a', 'b', 'a']; +alert(a.indexOf('b')); // Affiche 1 +// Ensuite, on cherche après la première correspondance +alert(a.indexOf('b', 2)); // Affiche 3 +alert(a.indexOf('z')); // Affiche -1 car 'z' n'a pas été trouvé +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/lastIndexOf"><code>lastIndexOf(élémentCherché[, indiceDebut])</code></a> fonctionne comme <code>indexOf</code>, mais cherche à partir de la fin du tableau. + <pre class="brush: js">var a = ['a', 'b', 'c', 'd', 'a', 'b']; +alert(a.lastIndexOf('b')); // Affiche 5 +// Ensuite on cherche avant la dernière correspondance +alert(a.lastIndexOf('b', 4)); // Affiche 1 +alert(a.lastIndexOf('z')); // Affiche -1 +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach(callback[, thisObject])</code></a>exécute la fonction <code>callback</code> sur chaque élément du tableau. + <pre class="brush: js">var a = ['a', 'b', 'c']; +a.forEach(alert); // Affiche chaque élément +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map"><code>map(callback[, thisObject])</code></a> renvoie un nouveau tableau composé des résultats de l'application de la fonction <code>callback</code> sur chaque élément du tableau initial + <pre class="brush: js">var a1 = ['a', 'b', 'c']; +var a2 = a1.map(function(item) { return item.toUpperCase(); }); +alert(a2); // affiche A,B,C +</pre> + </li> + <li><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/filter"><code>filter(callback[, thisObject])</code></a> renvoie un nouveau tableau composé des éléments du tableau initial pour lesquels la fonction callback a renvoyé <code>true</code>. + <pre class="brush: js">var a1 = ['a', 10, 'b', 20, 'c', 30]; +var a2 = a1.filter(function(item) { return typeof item == 'number'; }); +alert(a2); // affiche 10,20,30 +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/every"><code>every(callback[, thisObject])</code></a> renvoie true si la fonction <code>callback</code> renvoie <code>true</code> pour chaque élément du tableau + <pre class="brush: js">function isNumber(value){ + return typeof value == 'number'; +} +var a1 = [1, 2, 3]; +alert(a1.every(isNumber)); // Affiche true +var a2 = [1, '2', 3]; +alert(a2.every(isNumber)); // Affiche false +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Objets_globaux/Array/some"><code>some(callback[, thisObject])</code></a> renvoie true si la fonction <code>callback</code> renvoie true pour au moins un élément du tableau + <pre class="brush: js">function isNumber(value){ + return typeof value == 'number'; +} +var a1 = [1, 2, 3]; +alert(a1.some(isNumber)); // Affiche true +var a2 = [1, '2', 3]; +alert(a2.some(isNumber)); // Affiche true +var a3 = ['1', '2', '3']; +alert(a3.some(isNumber)); // Affiche false +</pre> + </li> +</ul> + +<p>Les méthodes ci-dessus utilisent des fonctions de rappel (<em>callback</em>) et sont appelées méthodes <em>itératives</em>. En effet, d'une certaine façon, elles bouclent sur le tableau. Chacune de ces méthodes possède un argument facultatif <code>thisObject</code>. Si cet argument est utilisé, il représentera le contexte utilisé pour le mot-clé <code>this</code> utilisé dans la fonction de rappel. S'il n'est pas utilisé et que la fonction est appelée en dehors d'un contexte objet donné <code>this</code> fera référence à l'objet global (<a href="/fr/docs/DOM/window" title="/fr/docs/DOM/window"><code>window</code></a>). Pour plus d'informations, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this"><code>this</code></a>.</p> + +<p>En réalité, la fonction de rappel est utilisé avec trois arguments. Le premier est la valeur de l'élément, le deuxième est l'indice de l'élément et le troisième est la référence au tableau. Étant donné que JavaScript ignore les arguments en trop pour une fonction, on peut très bien appeler une fonction qui ne prend qu'un seul paramètre (comme <code>alert</code> par exemple).</p> + +<ul> + <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/Reduce"><code>reduce(callback[, initialValue])</code></a> applique la fonction <code>callback(valeur1, valeur2)</code> afin de réduire le tableau à une seule valeur. + + <pre class="brush: js">var a = [10, 20, 30]; +var total = a.reduce(function(premier, second) { return first + second; }, 0); +alert(total) // Affiche 60 +</pre> + </li> + <li><a href="/fr/docs/JavaScript/Reference/Global_Objects/Array/ReduceRight"><code>reduceRight(callback[, initialValue])</code></a> fonctionne comme <code>reduce()</code> mais en partant du dernier élément.</li> +</ul> + +<p><code>reduce</code> et <code>reduceRight</code> sont des méthodes itératives plus compliquées. Ces méthodes sont à utiliser pour des algorithmes récursifs pour réduire une séquence d'objet en une seule valeur.</p> + +<h3 id="Tableaux_à_plusieurs_dimensions">Tableaux à plusieurs dimensions</h3> + +<p>Les tableaux peuvent être imbriqués, cela signifie qu'un tableau peut contenir un autre tableau comme élément. De cette façon, on peut créer des tableaux à plusieurs dimensions.</p> + +<p>Voici par exemple la création d'un tableau de dimension 2.</p> + +<pre class="brush: js">var a = new Array(4); +for (i = 0; i < 4; i++) { + a[i] = new Array(4); + for (j = 0; j < 4; j++) { + a[i][j] = "[" + i + "," + j + "]"; + } +} +</pre> + +<p>Le code précédent permettra de créer un tableau avec ces lignes :</p> + +<pre>Ligne 0: [0,0] [0,1] [0,2] [0,3] +Ligne 1: [1,0] [1,1] [1,2] [1,3] +Ligne 2: [2,0] [2,1] [2,2] [2,3] +Ligne 3: [3,0] [3,1] [3,2] [3,3] +</pre> + +<h3 id="Tableaux_et_expressions_rationnelles">Tableaux et expressions rationnelles</h3> + +<p>Lorsqu'un tableau provient d'une correspondance entre une expression rationnelle et une chaîne de caractères, le tableau possède des propriétés et des éléments fournissant des informations sur la correspondance. Un tel tableau peut être renvoyé par <a href="/fr/docs/JavaScript/Reference/Objets_globaux/Object/RegExp/Exec"><code>RegExp.exec()</code></a>, <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match"><code>String.match()</code></a>, et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split"><code>String.split()</code></a>. Pour plus d'informations sur l'utilisation des tableaux et des expressions rationnelles, voir la page <a href="/fr/docs/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res">Expressions rationnelles</a>.</p> + +<h3 id="Manipuler_des_objets_semblables_aux_tableaux">Manipuler des objets semblables aux tableaux</h3> + +<p>Certains objets JavaScript, comme <a href="/fr/docs/Web/API/NodeList"><code>NodeList</code></a> (renvoyé par la méthode <a href="/fr/docs/DOM/document.getElementsByTagName"><code>document.getElementsByTagName()</code></a>) ou <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments"><code>arguments</code></a> (disponible au sein d'une fonction) ressemblent à des tableaux et peuvent se comporter comme tels, en revanche ils ne possèdent pas toutes les propriétés d'un objet de type <code>Array</code>. Par exemple, l'objet <code>arguments</code> possède un attribut <a href="/fr/docs/Web/JavaScript/Reference/Fonctions/arguments/length"><code>length</code></a> mais ne possède pas la méthode <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/forEach"><code>forEach()</code></a>.</p> + +<p>Les méthodes génériques, disponibles à partir de JavaScript 1.6, permettent d'utiliser des méthodes de l'objet <code>Array</code> sur des objets semblables à des tableaux. Chaque méthode standard possède un équivalent disponible via l'objet <code>Array</code> lui-même. Ainsi :</p> + +<pre class="brush: js"> function alertArguments() { + Array.forEach(arguments, function(item) { + alert(item); + }); + } +</pre> + +<p>Dans les versions plus anciennes, il est possible d'émuler ces méthodes génériques en utilisant la méthode <code>call</code> fournie par les fonctions :</p> + +<pre class="brush: js"> Array.prototype.forEach.call(arguments, function(item) { + alert(item); + }); +</pre> + +<p>Ces méthodes génériques peuvent également être utilisées sur les chaînes de caractères. En effet, elles fournissent un accès séquentiel aux différents caractères, comme pour les différents éléments d'un tableau :</p> + +<pre class="brush: js">Array.forEach("une chaine", function(caractere) { + alert(caractere); +});</pre> + +<p>Voici d'autres exemples utilisant ces méthodes sur des chaînes de caractères. Ces exemples utilisent également les <a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8#Fermetures_d.27expressions">fermetures d'expressions de JavaScript 1.8</a> :</p> + +<pre class="brush: js">var str = 'abcdef'; +var filtreConsonnes = Array.filter(str, function (c) !(/[aeiou]/i).test(c)).join(''); // 'bcdf' +var voyellesPrésentes = Array.some(str, function (c) (/[aeiou]/i).test(c)); // true +var toutesVoyelles = Array.every(str, function (c) (/[aeiou]/i).test(c)); // false +var intercaleZéros = Array.map(str, function (c) c+'0').join(''); // 'a0b0c0d0e0f0' +var valeurNumérique = Array.reduce(str, function (c, c2) c+c2.toLowerCase().charCodeAt()-96, 0); +// 21 (reduce() since JS v1.8) +</pre> + +<p>Les méthodes <code>filter</code> et <code>map</code> ne renvoient pas directement les caractères comme faisant partie d'une même chaîne de caractères mais le résultat de l'opération sur chacun des caractères, il est donc nécessaire d'utiliser <code>join</code> pour obtenir une chaîne de caractères finale.</p> + +<h3 id="Tableaux_définis_par_compréhensions">Tableaux définis par compréhensions</h3> + +<p>À partir de JavaScript 1.7, les définitions de tableaux par compréhension permettent de construire, simplement, un tableau se basant sur le contenu d'un premier tableau. Ces compréhensions sont souvent utilisées en lieu et place des méthodes <code>map()</code> et <code>filter()</code>.</p> + +<p>Dans l'exemple suivant, on définit un tableau par compréhension pour qu'il contienne les doubles des éléments du premier tableau :</p> + +<pre class="brush: js">var nombres = [1, 2, 3, 4]; +var doubles = [i * 2 for (i of nombres)]; +alert(doubles); // Affiche 2,4,6,8 +</pre> + +<p>Cela est équivalent à l'opération <code>map()</code> qui suit :</p> + +<pre class="brush: js">var doubles = nombres.map(function(i){return i * 2;}); +</pre> + +<p>Les compréhensions peuvent également être utilisées afin de restreindre un tableau à certaines valeurs correspondants à un critère. On peut par exemple ne garder que les nombres pairs :</p> + +<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30]; +var pairs = [i for (i of nombres) if (i % 2 === 0)]; +alert(pairs); // Affiche 2,22,30 +</pre> + +<p><code>filter()</code> aurait également pu être utilisé :</p> + +<pre class="brush: js">var pairs = nombres.filter(function(i){return i % 2 === 0;}); +</pre> + +<p>Les opérations du style de <code>map()</code> et <code>filter()</code> peuvent être combinées en une seule compréhension. Voici par exmple un tableau défini par compréhension qui contient les doubles des nombres pairs du premier tableau :</p> + +<pre class="brush: js">var nombres = [1, 2, 3, 21, 22, 30]; +var pairsDoubles = [i * 2 for (i of nombres) if (i % 2 === 0)]; +alert(pairsDoubles); // Affiche 4,44,60 +</pre> + +<p>Les crochets utilisés pour les définitions par compréhension permettent d'introduire une portée implicite. Les nouvelles variables (comme i dans l'exemple) sont utilisées comme si elles avaient été déclarées avec <a href="/fr/docs/Web/JavaScript/Reference/Instructions/let"><code>let</code></a>. Elles ne seront donc pas disponibles en dehors de la compréhension.</p> + +<p>Il n'est pas nécessaire de partir d'un tableau pour utiliser une telle définition, on peut également utiliser les <a href="/fr/docs/Web/JavaScript/Guide/iterateurs_et_generateurs">itérateurs et les générateurs</a>.</p> + +<p>On peut également utiliser des chaînes de caractères comme objet de départ :</p> + +<pre class="brush: js">var str = 'abcdef'; +var filtreConsonnes = [c for (c of str) if (!(/[aeiouAEIOU]/).test(c)) ].join(''); // 'bcdf' +var intercaleZéros = [c+'0' for (c of str) ].join(''); // 'a0b0c0d0e0f0' +</pre> + +<p>Ici aussi, il faut utiliser la méthode <code>join()</code> pour obtenir une chaîne de caractère unique en sortie.</p> + +<h2 id="L'objet_Boolean">L'objet <code>Boolean</code></h2> + +<p>L'objet <code>Boolean</code> est une « enveloppe » (ou <em>wrapper</em> en anglais) autour du type primitif booléen. La syntaxe suivante permet de créer un objet <code>Boolean</code> :</p> + +<pre class="brush: js">var nomObjetBooléen = new Boolean(valeur); +</pre> + +<p>Attention, il ne faut pas confondre les valeurs <code>true</code> et <code>false</code> du type primitif booléen et les valeurs true et false de l'objet <code>Boolean</code>. Tout objet dont la valeur n'est pas <code>undefined</code> , <code>null</code>, <code>0</code>, <code>NaN</code>, ou la chaîne de caractères vide (y compris un objet <code>Boolean</code> dont la valeur est false) sera évalué comme <code>true</code> dans un test conditionnel. Voir l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/if...else">if...else </a>pour plus d'informations.</p> + +<h2 id="Objet_Date">Objet <code>Date</code></h2> + +<p>JavaScript ne possède pas de type de données pour gérer les dates. En revanche, il est possible d'utiliser un objet <code>Date</code>, ainsi que ses méthodes, pour manipuler de telles données. L'objet<code> Date</code> possède différentes méthodes pour définir des dates, obtenir des informations sur une dates et les manipuler, il ne possède aucune propriété.</p> + +<p>La gestion des dates en JavaScript est similaire à celle effectuée par Java. Les deux languages partagent de nombreuses méthodes et ils stockent tous les deux les dates comme le nombre de millisecondes depuis le premier janvier 1970 à 00h00m00 UTC.</p> + +<p>L'intervalle qu'on peut utiliser avec l'objet <code>Date</code> est entre100 000 000 jours avant le premier janvier 1970 UTC et 100 000 000 jours après.</p> + +<p>Pour créer un tel objet :</p> + +<pre class="brush: js">var nomObjetDate = new Date([paramètres]); +</pre> + +<p><code>nomObjetDate</code> est le nom de l'objet qu'on crée. Il peut être un nouvel objet à part entière ou bien la propriété d'un objet existant.</p> + +<p>Si on utilise le constructeur Date sans le mot-clé <code>new</code>, on obtiendra seulement la date représentée dans une chaîne de caractères.</p> + +<p>On peut utiliser les <code>paramètres</code> suivants :</p> + +<ul> + <li>Aucun : on crée la date et l'heure du jour : <code>aujourdhui = new Date();</code>.</li> + <li>Une chaîne de caractères qui représente la date au format suivant "Mois_en_anglais jour, année heures:minutes:secondes." Ainsi <code>var Noel95 = new Date("December 25, 1995 13:30:00")</code>. Il est possible de ne pas renseigner les heures, minutes et secondes : les valeurs par défaut seront nulles (0).</li> + <li>Un ensemble d'entiers pour l'année, le mois et le jour<code> : var Noel95 = new Date(1995, 11, 25)</code>.</li> + <li>Un ensemble d'entiers pour l'année, le mois, le jour, l'heure, les minutes et les secondes : <code>var Xmas95 = new Date(1995, 11, 25, 9, 30, 0);</code>.</li> +</ul> + +<p><strong>Versions antérieures à JavaScript 1.2 (inclus)</strong><br> + L'objet <code>Date</code> fonctionne de la façon suivante :</p> + +<ul> + <li>Les dates antérieures à 1970 ne sont pas autorisées.</li> + <li>JavaScript se repose sur des utilitaires de gestion des dates qui dépendent de la plate-forme utilisée : on obtient donc des comportements et des résultats différents en fonction de la plate-forme sur laquelle on se situe.</li> +</ul> + +<h3 id="Les_méthodes_de_l'objet_Date">Les méthodes de l'objet <code>Date</code></h3> + +<p>Les méthodes de l'objet <code>Date</code> sont à répartir entre quatre grandes catégories :</p> + +<ul> + <li>Les méthodes de définition <code>set...</code>, permettant de régler le jour et l'heure dans les objets <code>Date</code></li> + <li>Les méthodes d'accès <code>get...</code>, permettant d'obtenir les valeurs de la date et de l'heure des objets <code>Date</code></li> + <li>Les méthodes de conversion <code>to...</code>, qui permettent d'obtenir une mise en forme en chaîne de caractères</li> + <li>Les méthodes d'analyse (<em>parsing</em>) et les méthodes UTC, permettant de transformer certaines chaînes de caractères en <code>Date</code>.</li> +</ul> + +<p>Les deux premières catégories permettent de définir ou d'obtenir les secondes, les minutes, les heures, le jour du mois, le jour de la semaine, les mois et les années. Il existe une méthode <code>getDay</code> pour obtenir le jour de la semaine, en revanche, il n'existe pas de méthode <code>setDay</code> car le calcul du jour de la semaine se fait automatiquement. Ces méthodes utilisent des entiers, de la façon suivante :</p> + +<ul> + <li>Les secondes et minutes : 0 à 59</li> + <li>Les heures : 0 à 23</li> + <li>Les jours : 0 (Dimanche) à 6 (Samedi)</li> + <li>La date : 1 to 31 (jour du mois)</li> + <li>Les mois : 0 (janvier) à 11 (décembre)</li> + <li>Les années : années depuis 1900</li> +</ul> + +<p>Par exemple, si on veut définir la date suivante :</p> + +<pre class="brush: js">var Noel95 = new Date("December 25, 1995"); +</pre> + +<p>On aura alors <code>Noel95.getMonth()</code> qui renverra 11, Noel<code>95.getFullYear()</code> qui renverra 1995.</p> + +<p>Les méthodes <code>getTime</code> et <code>setTime</code> peuvent notamment être utilisées pour comparer des dates. La méthode <code>getTime</code> renvoie le nombre de millisecondes écoulées depuis le premier janvier 1970 00h00m00s pour un objet <code>Date</code>.</p> + +<p>De cette façon, le code suivant permet d'afficher le nombre de jours restants pour l'année courante :</p> + +<pre class="brush: js">var ajd = new Date(); +var finAnnee = new Date(1995, 11, 31, 23, 59, 59, 999); // On règle jour et mois +finAnnee.setFullYear(ajd.getFullYear()); // On règle l'année +var msParJour = 24 * 60 * 60 * 1000; // Nombre de millisecondes par jour +var joursRestants = (finAnnee.getTime() - ajd.getTime()) / msParJour; +var joursRestants = Math.round(joursRestants); //renvoie le nombre de jours restants +</pre> + +<p>Dans cet exemple, on crée un objet <code>Date</code> qui contient la date du jour. Ensuite on crée un objet <code>finAnnee</code> et on fixe son année à celle du jour courant. Ensuite, en connaissant le nombre de millisecondes dans une journée, on calcule le nombre de jours entre<code> ajd</code> et <code>finAnnee</code> en utilisant la méthode <code>getTime</code> puis en arrondissant la valeur à un nombre entier.</p> + +<p>La méthode <code>parse</code> peut s'avérer utile lorsqu'on souhaite transformer une chaîne de caractères (en anglais, attention) en une date. L'exemple qui suit utilise les méthodes <code>parse</code> et <code>setTime</code> pour assigner une valeur de date à l'objet <code>dateIPO </code>:</p> + +<pre class="brush: js">var dateIPO = new Date(); +dateIPO.setTime(Date.parse("Aug 9, 1995")); +</pre> + +<h3 id="Exemple_d'utilisation">Exemple d'utilisation</h3> + +<p>L'exemple qui suit permet de définir la fonction <code>JSClock()</code> qui renvoie l'heure au même format qu'une horloge numérique :</p> + +<pre class="brush: js">function JSClock() { + var time = new Date(); + var heure = time.getHours(); + var minute = time.getMinutes(); + var seconde = time.getSeconds(); + var temp = "" + heure; + temp += ((minute < 10) ? ":0" : ":") + minute; + temp += ((seconde < 10) ? ":0" : ":") + seconde; + return temp; +} +</pre> + +<p>La fonctionThe <code>JSClock</code> commence par créer un objet <code>Date</code> appelé <code>time</code>. Aucun argument n'est donné, c'est donc la date et l'heure courante. Ensuite, on appelle les méthodes <code>getHours</code>, <code>getMinutes</code>, et <code>getSeconds</code> pour connaître l'heure, les minutes et les secondes.</p> + +<p>Les trois instructions suivantes permettent de construire une chaîne de caractères avec la variable <code>temp</code>. On ajoute l'heure, puis les minutes (si celles-ci sont inférieures à 10, on rajoute un 0 devant), puis les secondes (de la même manière on rajoute un zéro devant si le nombre de secondes est inférieur à 10).</p> + +<h2 id="L'objet_Function">L'objet <code>Function</code></h2> + +<p>L'objet élémentaire <code>Function</code> définit une chaîne de caractères de code JavaScript qui doit être compilé comme une fonction.</p> + +<p>Pour créer un objet <code>Function</code> on peut utiliser la syntaxe suivante :</p> + +<pre class="brush: js">var functionNomObjet = new Function ([arg1, arg2, ... argn], corpsFonction); +</pre> + +<p><code>functionNomObjet</code> est le nom d'une variable ou d'une propriété d'un objet. On peut également utiliser cette syntaxe avec un objet suivi par un nom de gestionnaire d'événements en minuscules comme <code>window.onerror</code>.</p> + +<p><code>arg1</code>, <code>arg2</code>, ... <code>argn</code> sont les arguments qui sont utilisés par la fonction. Chacun de ces arguments doit être une chaîne de caractères qui est un identifiant JavaScript valide (ex : "x" ou "monFormulaire".</p> + +<p><code>corpsFonction</code> est une chaîne de caractères définissant le code JavaScript qui doit être compilé comme le code de la fonction.</p> + +<p>Les objets<code> Function</code> sont évalués à chaque fois qu'ils sont utilisés. Utiliser ces objets est moins efficaces que la déclaration de fonctions qu'on appellera au sein du code. Cela est dû au fait que les fonctions déclarées sont compilées.</p> + +<p>En plus de la définition de fonction abordée ici, on peut également les expressions de fonction ou l'instruction <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function"><code>function</code></a>. Voir la <a href="/fr/docs/Web/JavaScript/Reference">référence JavaScript</a> pour plus d'informations sur ces différentes syntaxes.</p> + +<p>Le code suivant assigne une fonction à la variable <code>setBGColor</code>. Cette fonction permet de définir la couleur d'arrière-plan du document courant.</p> + +<pre class="brush: js">var setBGColor = new Function("document.bgColor = 'antiquewhite'"); +</pre> + +<p>Pour appeler l'objet <code>Function</code>, on peut utiliser le nom de la variable comme une fonction. Le code qui suit exécute la fonction qui aura été assignée à la variable <code>setBGColor</code> :</p> + +<pre class="brush: js">var choixCouleur="antiquewhite"; +if (choixCouleur=="antiquewhite") {setBGColor()} +</pre> + +<p>On peut assigner la fonction à un gestionnaire d'événements de différentes façons :</p> + +<ol> + <li> + <pre class="brush: js">document.form1.colorButton.onclick = setBGColor; +</pre> + </li> + <li> + <pre class="brush: html"><INPUT NAME="colorButton" TYPE="button" + VALUE="Changer la couleur de l'arrière-plan" + onClick="setBGColor()"> +</pre> + </li> +</ol> + +<p>La création de la variable <code>setBGColor</code> montrée avant est similaire à la fonction suivante :</p> + +<pre class="brush: js">function setBGColor() { + document.bgColor = 'antiquewhite'; +} +</pre> + +<p>Assigner une fonction à une variable est similaire à la déclaration d'une fonction, cependant il y a quelques différences :</p> + +<ul> + <li>Lorsqu'on assigne une fonction à une variable en utilisant la syntaxe <code>var setBGColor = new Function("...")</code>, <code>setBGColor</code> est une variable dont la valeur courante est une référence à la fonction créée avec <code>new Function()</code>.</li> + <li>Quand on crée une fonction en utilisant la syntaxe <code>function setBGColor() {...}</code>, <code>setBGColor</code> n'est pas une variable, c'est le nom de la fonction.</li> +</ul> + +<p>Il est possible d'imbriquer une fonction au sein d'une fonction. La fonction imbriquée est privée, en termes de portée, pour la fonction englobante.</p> + +<ul> + <li>La fonction imbriquée peut être utilisée à partir d'instructions seulement depuis la fonction englobante.</li> + <li>La fonction imbriquée peut utiliser des arguments et des variables de la fonction englobante. La fonction englobante ne peut pas utiliser les arguments et les variables de la fonction imbriquée.</li> +</ul> + +<h2 id="L'objet_Math">L'objet <code>Math</code></h2> + +<p>L'objet élémentaire <code>Math</code> possède différentes propriétés et méthodes pour manipuler des constantes et des fonctions mathématiques. Ainsi, la propriété <code>PI</code> de cette objet possède la valeur de pi (3.141...) :</p> + +<pre class="brush: js">Math.PI +</pre> + +<p>De la même façon, cet objet met a disposition des fonctions mathématiques qui sont des méthodes de l'objet <code>Math</code>. On retrouvera des fonctions trigonométriques, logarithmiques, exponentielles... Ainsi pour utiliser la fonction sinus, on écriera :</p> + +<pre class="brush: js">Math.sin(1.56) +</pre> + +<p>Note : les arguments des méthodes trigonométriques de cet objet doivent être exprimés en radians.</p> + +<p>Le tableau suivant liste les différentes méthodes de l'objet <code>Math</code>.</p> + +<table class="standard-table"> + <caption>Tableau 7.1 Méthodes de l'objet Math</caption> + <thead> + <tr> + <th scope="col">Méthode</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>abs</code></td> + <td>Valeur absolue</td> + </tr> + <tr> + <td><code>sin</code>, <code>cos</code>, <code>tan</code></td> + <td>Fonctions trigonométriques sinus, cosinus et tangente</td> + </tr> + <tr> + <td><code>acos</code>, <code>asin</code>, <code>atan</code>, <code>atan2</code></td> + <td>Fonctions trigonométriques inverses, les valeurs renvoyées sont exprimées en radians</td> + </tr> + <tr> + <td><code>exp</code>, <code>log</code></td> + <td>Les fonctions exponentielle et logarithme (naturel ou à base <code>e</code>)</td> + </tr> + <tr> + <td><code>ceil</code></td> + <td>Renvoie le plus petit entier supérieur ou égal à l'argument</td> + </tr> + <tr> + <td><code>floor</code></td> + <td>Renvoie le plus grand entier inférieur ou égal à l'argument</td> + </tr> + <tr> + <td><code>min</code>, <code>max</code></td> + <td>Renvoie le minimum ou le maximum (respectivement) des deux arguments</td> + </tr> + <tr> + <td><code>pow</code></td> + <td>La fonction puissance, le premier argument est la base et le second argument est l'exposant</td> + </tr> + <tr> + <td><code>random</code></td> + <td>Renvoie un nombre aléatoire compris entre 0 et 1</td> + </tr> + <tr> + <td><code>round</code></td> + <td>Arrondit l'argument au plus proche entier</td> + </tr> + <tr> + <td><code>sqrt</code></td> + <td>La fonction racine carrée</td> + </tr> + </tbody> +</table> + +<p>Contrairement à beaucoup d'autres objets, on ne crée jamais d'objet <code>Math</code> personnalisé : on utilise toujours l'objet élémentaire <code>Math</code>.</p> + +<h2 id="L'objet_Number">L'objet <code>Number</code></h2> + +<p>L'objet <code>Number</code> possède des propriétés correspondantes aux constantes numériques. On y trouve : la valeur maximale qu'il est possible de représenter, la valeur minimale, les infinis (négatifs et positifs), et également la constante « not a number » ou NaN qui indique que la valeur n'est pas un nombre. Ces valeurs sont fixes, ne peuvent être changées et s'utilisent de la façon suivante :</p> + +<pre class="brush: js">var maximum = Number.MAX_VALUE; +var minimum = Number.MIN_VALUE; +var infiniPlus = Number.POSITIVE_INFINITY; +var infiniMoins = Number.NEGATIVE_INFINITY; +var nonNombre = Number.NaN; +</pre> + +<p>Il faut toujours utiliser les propriétés de l'objet <code>Number</code> lui-même et non pas celles d'un objet <code>Number</code> qui aurait été créé.</p> + +<p>Le tableau suivant liste les différents propriétés de l'objet <code>Number</code> :</p> + +<table class="standard-table"> + <caption>Tableau 7.2 Propriétés de l'objet Number</caption> + <thead> + <tr> + <th scope="col">Propriété</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>MAX_VALUE</code></td> + <td>Le plus grand nombre qu'on peut représenter</td> + </tr> + <tr> + <td><code>MIN_VALUE</code></td> + <td>Le plus petit nombre qu'on peut représenter</td> + </tr> + <tr> + <td><code>NaN</code></td> + <td>Valeur spéciale pour les valeurs non numériques</td> + </tr> + <tr> + <td><code>NEGATIVE_INFINITY</code></td> + <td>Valeur spéciale pour représenter l'infini négatif</td> + </tr> + <tr> + <td><code>POSITIVE_INFINITY</code></td> + <td>Valeur spéciale pour représenter l'infini positif</td> + </tr> + </tbody> +</table> + +<p>Le prototype <code>Number</code> fournit également des méthodes pour obtenir des informations d'objets <code>Number</code>. Le tableau suivant liste ces différentes méthodes de <code>Number.prototype</code> :</p> + +<table class="fullwidth-table"> + <caption>Tableau 7.3 Méthodes de Number.prototype</caption> + <thead> + <tr> + <th scope="col">Méthode</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>toExponential</code></td> + <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation exponentielle.</td> + </tr> + <tr> + <td><code>toFixed</code></td> + <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe.</td> + </tr> + <tr> + <td><code>toPrecision</code></td> + <td>Renvoie une chaîne de caractères représentant le nombre dans sa notation à point fixe, avec une précision donnée.</td> + </tr> + <tr> + <td><code>toSource</code></td> + <td>Renvoie un littéral objet représentant l'objet <code>Number</code>. Cette valeur peut ensuite être utilisée pour créer un nouvel objet. Cette méthode surcharge la méthode <code>Object.toSource</code>.</td> + </tr> + <tr> + <td><code>toString</code></td> + <td>Renvoie une chaîne de caractères représentant l'objet. Cette méthode surcharge la méthode <code>Object.toString.</code></td> + </tr> + <tr> + <td><code>valueOf</code></td> + <td>Renvoie la valeur primitive de l'objet. Cette méthode surcharge la méthode <code>Object.valueOf</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="L'objet_RegExp">L'objet <code>RegExp</code></h2> + +<p>Pour plus d'explications sur le fonctionnement des expressions rationnelles, voir la page sur<a href="/fr/docs/JavaScript/Guide/Expressions_r%C3%A9guli%C3%A8res"> les expressions rationnelles</a>.</p> + +<h2 id="L'objet_String">L'objet String</h2> + +<p>L'objet <code>String</code> est une enveloppe pour les données du type chaîne de caractères. Les littéraux de chaînes de caractères ne doivent pas être confondus avec les objets <code>String</code>. Par exemple, le code suivant crée deux choses : un littéral de chaîne de caractère,<code> s1</code>, et l'objet <code>String</code> <code>s2</code> :</p> + +<pre class="brush: js">var s1 = "truc"; //crée un littéral de chaîne de caractères +var s2 = new String("truc"); //crée un objet String +</pre> + +<p>Chacune des méthodes de l'objet <code>String</code> peut être utilisée sur une valeur qui est un littéral de chaîne de caractères (pour ce faire, JavaScript convertit automatiquement le littéral en un objet <code>String</code> temporaire, appelle la méthode voulue puis supprime l'objet temporaire). Il est également possible d'utiliser la propriété <code>String.length</code> sur un littéral de chaîne de caractères.</p> + +<p>Il est fortement recommandé d'utiliser des littéraux de chaînes de caractères à moins d'avoir spécifiquement besoin d'utiliser un objet <code>String</code>. En effet, les objets <code>String</code> peuvent avoir des effets inattendus :</p> + +<pre class="brush: js">var s1 = "2 + 2"; //crée un littéral de chaîne de caractères +var s2 = new String("2 + 2"); //crée un objet String +eval(s1); //renvoie 4 +eval(s2); //renvoie la chaîne "2 + 2"</pre> + +<p>Un objet <code>String</code> possède une seule propriété, <code>length</code>, indiquant le nombre de caractères contenus dans la chaîne de caractères. Dans le code qui suit, x recevra la valeur 13 car la chaîne "Hello, World!" possède 13 caractères :</p> + +<pre class="brush: js">var maChaine = "Hello, World!"; +var x = maChaine.length; +</pre> + +<p>Un objet possède deux types de méthodes : celles qui renvoient une chaîne modifiée à partir de l'objet initial et celles qui renvoient une version au format HTML de la chaîne. Dans la première catégorie on trouvera des méthodes comme<code> substring</code> et <code>toUpperCase</code>, dans la seconde catégorie, on trouvera notamment <code>bold</code> et <code>link</code>.</p> + +<p>Par exemple, si on utilise la chaîne précédente <code>maChaine.toUpperCase()</code> ou aussi <code>"hello, world!".toUpperCase()</code>, on obtiendra le résultat "HELLO, WORLD!".</p> + +<p>La méthode <code>substring</code> contient deux arguments et renvoie un fragment de la chaîne de caractères entre ces deux arguments qui correspondent aux indices de début et de fin du « découpage ». <code>maChaine.substring(4, 9)</code> renverra "o, Wo".</p> + +<p>L'objet <code>String</code> possède également certaines méthodes permettant d'obtenir directement des données au format HTML : des liens, du texte formaté... Ainsi on pourrait créer un hyperlien avec la méthode suivante :</p> + +<pre class="brush: js">maChaine.link("http://www.helloworld.com") +</pre> + +<p>Le tableau qui suit liste les méthodes des objets <code>String</code>.</p> + +<table class="fullwidth-table"> + <caption>Tableau 7.4 Méthodes des instances du prototype String</caption> + <thead> + <tr> + <th scope="col">Méthode</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/anchor">anchor</a></code></td> + <td>Permet de créer un ancre HTML</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/big" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String//big">big</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/blink" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/blink">blink</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/bold" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/bold">bold</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fixed" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fixed">fixed</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/italics" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/italics">italics</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/small" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/small">small</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/strike" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/strike">strike</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sub" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sub">sub</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sup" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/sup">sup</a></code></td> + <td>Permet de formater une chaîne de caractères au format HTML. (Note : l'utilisation du CSS peut parfois être plus judicieuse que certaines entités HTML).</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charAt" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charAt">charAt</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/charCodeAt">charCodeAt</a></code></td> + <td>Renvoie le caractère ou le code du caractère à la position indiquée dans la chaîne de caractères.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/indexOf" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/indexOf">indexOf</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/lastIndexOf">lastIndexOf</a></code></td> + <td>Renvoie la position d'un fragment de la chaîne de caractères (respectivement la dernière position).</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/link" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/link">link</a></code></td> + <td>Crée un hyperlien HTML</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/concat" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/concat">concat</a></code></td> + <td>Concatène deux chaînes de caractères en une chaîne de caractères.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/fromCharCode">fromCharCode</a></code></td> + <td>Construit une chaîne de caractères à partir de la séquence de codes Unicodes fournie. Cette méthode appartient au prototype String mais pas aux instances objets String.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/split">split</a></code></td> + <td>Découpe un objet <code>String</code> en un tableau de chaînes de caractères selon un séparateur donné.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/slice" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/slice">slice</a></code></td> + <td>Extrait un fragment de la chaîne de caractères et renvoie une nouvelle chaîne.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substring" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substring">substring</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substr" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/substr">substr</a></code></td> + <td>Renvoie un fragment de la chaîne de caractères à partir d'un indice jusqu'à un autre indice ou à partir d'un indice et pour une longueur donnée.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/match">match</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/replace">replace</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/search" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/search">search</a></code></td> + <td>Fonctionne avec les expressions rationnelles.</td> + </tr> + <tr> + <td><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toLowerCase" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toLowerCase">toLowerCase</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toUpperCase" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String/toUpperCase">toUpperCase</a></code></td> + <td> + <p>Renvoie la chaîne de caractères en lettres minuscules (respectivement, en lettres majuscules).</p> + </td> + </tr> + </tbody> +</table> + +<p style="text-align: right;"><span style="float: left;"><a href="/fr/docs/JavaScript/Guide/Utiliser_les_objets">« Précédent</a></span> <a href="/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails">Suivant »</a></p> diff --git a/files/fr/conflicting/web/javascript/guide/introduction/index.html b/files/fr/conflicting/web/javascript/guide/introduction/index.html new file mode 100644 index 0000000000..d9e7239070 --- /dev/null +++ b/files/fr/conflicting/web/javascript/guide/introduction/index.html @@ -0,0 +1,139 @@ +--- +title: A propos de ce guide +slug: Web/JavaScript/Guide/Apropos +tags: + - Guide + - JavaScript +translation_of: Web/JavaScript/Guide/Introduction +translation_of_original: Web/JavaScript/Guide/About +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>JavaScript est un langage de script orienté objet et indépendant de la plateforme. Ce guide explique tout ce que vous devriez savoir pour utiliser JavaScript.</p> + +<h2 id="Nouvelles_fonctionalités_selon_les_versions_de_JavaScript">Nouvelles fonctionalités selon les versions de JavaScript</h2> + +<p></p><ul> +<li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.2">Nouveautés de JavaScript 1.2</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.3">Nouveautés de JavaScript 1.3</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.4">Nouveautés de JavaScript 1.4</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.5">Nouveautés de JavaScript 1.5</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.6">Nouveautés dans JavaScript 1.6</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.7">Nouveautés dans JavaScript 1.7</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8">Nouveautés dans JavaScript 1.8</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8.1">Nouveautés de JavaScript 1.8.1</a></li><li><a href="/fr/docs/Web/JavaScript/New_in_JavaScript/1.8.5">Nouveautés de JavaScript 1.8.5</a></li> +</ul><p></p> + +<h2 id="Ce_que_vous_devriez_déjà_connaître">Ce que vous devriez déjà connaître</h2> + +<p>Ce guide présuppose que vous possédez déjà les connaissances suivantes :</p> + +<ul> + <li>Une compréhension générale d'Internet et du World Wide Web (WWW).</li> + <li>De bonnes connaissances pratiques du langage <a href="/fr/docs/Web/HTML" title="en/HTML">HTML</a> (HyperText Markup Language).</li> + <li>Une expérience avec un langage de programmation est utile, mais n'est pas indispensable. Si vous débutez en programmation, vous pouvez essayer de suivre un des tutoriel de la page <a href="/fr/docs/Web/JavaScript">JavaScript</a></li> +</ul> + +<h2 id="Versions_de_JavaScript">Versions de JavaScript</h2> + +<table class="standard-table"> + <caption>Tableau des versions de JavaScript et des navigateurs correspondants</caption> + <thead> + <tr> + <th scope="col">Version JavaScript</th> + <th scope="col">Version du navigateur</th> + </tr> + </thead> + <tbody> + <tr> + <td>JavaScript 1.0</td> + <td>Navigator 2.0</td> + </tr> + <tr> + <td>JavaScript 1.1</td> + <td>Navigator 3.0</td> + </tr> + <tr> + <td>JavaScript 1.2</td> + <td>Navigator 4.0-4.05</td> + </tr> + <tr> + <td>JavaScript 1.3</td> + <td>Navigator 4.06-4.7x</td> + </tr> + <tr> + <td>JavaScript 1.4</td> + <td> </td> + </tr> + <tr> + <td>JavaScript 1.5</td> + <td>Navigator 6.0<br> + Mozilla (open source browser)</td> + </tr> + <tr> + <td>JavaScript 1.6</td> + <td><a href="/fr/Firefox/Versions/1.5">Firefox 1.5</a> et les autres produits Mozilla basés sur Gecko 1.8</td> + </tr> + <tr> + <td>JavaScript 1.7</td> + <td><a href="/fr/Firefox/Versions/2">Firefox 2</a> et les autres produits Mozilla basés sur Gecko 1.8</td> + </tr> + <tr> + <td>JavaScript 1.8</td> + <td><a href="/fr/Firefox/Versions/3">Firefox 3</a> et les autres produits Mozilla basés sur Gecko 1.9</td> + </tr> + </tbody> +</table> + +<h2 id="Où_trouver_de_l'information_sur_JavaScript">Où trouver de l'information sur JavaScript</h2> + +<p>La documentation JavaScript se trouve dans les ouvrages suivants:</p> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Guide">Le guide JavaScript</a> (ce guide) qui fournit l'information de base sur le langage JavaScript et ses composantes.</li> + <li><a href="/fr/docs/JavaScript/Reference">La référence JavaScript</a> qui est le document de référence du langage JavaScript.</li> + <li><a href="http://fr.eloquentjavascript.net/">javaScript éloquent</a> est un guide d'initiation progressive avec des exercices interactifs.</li> +</ul> + +<p>Si vous découvrez JavaScript, commencez par <a href="/fr/docs/Web/JavaScript/Guide">le guide JavaScript</a>. Une fois familiarisé avec les fondamentaux, vous pourrez utiliser <a href="/fr/docs/Web/JavaScript/Reference">la référence JavaScript</a> pour plus de détails sur les objets et les instructions.</p> + +<h2 id="Astuces_pour_l'apprentissage_du_JavaScript">Astuces pour l'apprentissage du JavaScript</h2> + +<p>Commencer l'apprentissage de JavaScript est assez simple : tout ce dont vous avez besoin c'est d'un navigateur Web récent. Ce guide intègre quelques fonctions JavaScript qui ne sont disponibles qu'avec les dernières versions de Firefox (et/ou les autres navigateurs basés sur le moteur Gecko), aussi est-il recommandé d'utiliser la version la plus récente de Firefox.</p> + +<p>Deux outils utiles sont nativement intégrés à Firefox et permettent de manipuler du JavaScript : la console web et l'ardoise JavaScript.</p> + +<h3 id="La_console_web">La console web</h3> + +<p>La <a href="/fr/docs/Outils/Web_Console">console web</a> permet d'afficher des informations sur la page web chargée dans le navigateur. Elle possède également <a href="/fr/docs/Outils/Web_Console#L'interpr.C3.A9teur_de_lignes_de_commande">une ligne de commande</a> qui permet d'exécuter des expressions JavaScript dans la page courante.</p> + +<p>Pour ouvrir la console web, aller dans le menu « Outils » puis « Développement web » puis « Console web ». La console apparaîtra en base de la fenêtre du navigateur. En bas de cette console se situe une ligne de commande qui peut être utilisée pour saisir du JavaScript :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7363/web-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="L'ardoise_JavaScript">L'ardoise JavaScript</h3> + +<p>La console web permet d'exécuter des lignes de JavaScript une à une. Dès qu'on souhaite exécuter plusieurs lignes, la console n'est plus très pratique. De plus, il est impossible d'enregistrer du code grâce à la console web. Pour mettre en place des exemples plus complexes, l'<a href="/fr/docs/Outils/Ardoise">ardoise JavaScript</a> sera plus adaptée.</p> + +<p>Pour ouvrir l'ardoise, aller dans le menu « Outils » puis « Développement web » puis « Ardoise JavaScript ». Elle s'ouvre dans une fenêtre séparée et contient un éditeur qui permet d'écrire et d'exécuter du JavaScript dans le navigateur. Elle permet également de sauvegarder/charger des scripts sur votre ordinateur</p> + +<p>Si vous utiliser l'option aller dans le menu « Examiner », le code contenu dans l'ardoise sera exécuter dans le navigateur et le résultat sera renvoyé dans l'éditeur sous forme d'un commentaire :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7365/scratchpad.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Conventions">Conventions</h2> + +<p>Les applications JavaScript fonctionnent sur de nombreux systèmes d'exploitations. Les informations de ce guide doivent s'appliquer à l'ensemble des systèmes sur lesquels fonctionne JavaScript.</p> + +<p>Ce guide utilise des URL de la forme suivante :</p> + +<p><code>http://<em>serveur</em>.<em>domaine</em>/<em>chemin</em>/<em>fichier</em>.html</code></p> + +<p>Dans ces URL, <em>serveur</em> représente le nom du serveur à partir duquel on lance l'application ; <em>domaine</em> représente le nom de domaine utilisé (par exemple <code>netscape.com</code> ou <code>uiuc.edu</code>) ; <em>chemin</em> représente l'arborescence du serveur et <em>fichier</em><code>.html</code> représente un fichier dans cette arborescence. Généralement, les éléments représentés en italique dans l'URL seront des paramètres et les éléments représentés en police à chasse fixe seront à prendre au sens littéral. Si votre serveur permet d'utiliser SSL/TLS, vous pourrez utiliser <code>https</code> à la place de <code>http</code>.</p> + +<p>Ce guide utilise les conventions de typographie suivantes :</p> + +<ul> + <li><code>La police à chasse fixe</code> est utilisée pour les exemples de code, les éléments de code (mots-clés, noms de méthodes et de propriétés), les noms de fichiers, les chemins vers les fichiers, les noms de répertoires, les balises HTML ainsi que tout texte devant être saisi à l'écran (<code><em>La police à chasse fixe italique</em></code> est utilisée pour les paramètres dans le code.)</li> + <li><em>L'italique</em> est utilisé pour les titres d'œuvres, l'accentuation, les variables et les paramètres ainsi que les termes à utiliser littéralement.</li> + <li><strong>Le gras</strong> est utilisé pour les termes du glossaire.</li> +</ul> + +<div> +<p style="text-align: right;"><span style="float: left;"><a href="/fr/docs/Web/JavaScript/Guide" title="JavaScript Guide">« Précédent</a></span><a href="/fr/docs/JavaScript/Guide/JavaScript_Overview" title="JavaScript Overview">Suivant »</a></p> +</div> + +<p> </p> diff --git a/files/fr/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html b/files/fr/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html new file mode 100644 index 0000000000..a5ec22c993 --- /dev/null +++ b/files/fr/conflicting/web/javascript/guide/introduction_6f341ba6db4b060ccbd8dce4a0d5214b/index.html @@ -0,0 +1,118 @@ +--- +title: Aperçu de JavaScript +slug: Web/JavaScript/Guide/JavaScript_Overview +tags: + - Guide + - Intermediate + - JavaScript +translation_of: Web/JavaScript/Guide/Introduction +translation_of_original: Web/JavaScript/Guide/JavaScript_Overview +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> +<p>Ce chapitre est une introduction à JavaScript et détaille quelques-uns des concepts fondamentaux de ce langage.</p> +<h2 id="Qu'est-ce_que_JavaScript">Qu'est-ce que JavaScript ?</h2> +<p>JavaScript est un langage de script, multi-plateforme, orienté-objet. JavaScript est un langage compact, léger. Il n'est pas conçu pour être utilisé de manière autonome, mais pour être intégré dans d'autres produits et applications tels que les navigateurs web. Dans un environnement hôte, JavaScript peut servir d'interface de manipulation avec les objets mis à disposition par l'environnement.</p> +<p>Le noyau du langage JavaScript contient un ensemble d'objets, tels que <code>Array</code>, <code>Date</code>, et <code>Math</code>, et un noyau d'éléments comme les opérateurs, structures de contrôle et déclarations. Le c<span>œ</span>ur de JavaScript peut être étendu pour remplir différents besoins grâce à des objets additionnels. Par exemple :</p> +<ul> + <li>Le JavaScript, côté client, étend le noyau du langage en y ajoutant des objets pour contrôler le navigateur et son Document Object Model (DOM). Les extensions côté client permettent par exemple à une application de placer des éléments dans un formulaire HTML et de répondre à des événements tels que le clic de la souris, une entrée dans un formulaire ou la navigation dans une page.</li> + <li>Le JavaScript, côté serveur, étend le noyau du langage en y ajoutant des objets nécessaires pour faire fonctionner JavaScript sur un serveur. Par exemple, les extensions côté serveur permettent à une application de communiquer avec une base de données relationnelle, d'offrir des informations continues au fur et à mesure des appels, ou encore d'effectuer des manipulations de fichiers sur le serveur.</li> +</ul> +<p>Grâce à la fonctionnalité LiveConnect, JavaScript peut faire communiquer du code Java avec JavaScript. À partir de JavaScript, on peut instancier des objets Java et accéder à leurs méthodes publiques et attributs. À partir de Java, on peut accéder des objets, propriétés et méthodes JavaScript.</p> +<p>Netscape inventa JavaScript et fut le premier navigateur à l'utiliser.</p> +<h2 id="JavaScript_et_Java">JavaScript et Java</h2> +<p>JavaScript et Java sont semblables en ce qui concerne quelques aspects mais restent fondamentalement différents. JavaScript ressemble à Java, mais il ne possède pas un typage fort et statique. JavaScript suit la syntaxe de la plupart des expressions Java, les conventions de nommage et les structures de flots de contrôle basiques. C'est pour cette raison qu'il a été renommé de LiveScript en JavaScript.</p> +<p>En contraste avec le système <em>compile-time</em> des classes construites par des déclarations, JavaScript supporte les systèmes <em>runtime </em>basés sur un petit nombre de types de données représentant des valeurs numériques, booléennes et des chaines de caractères. JavaScript possède un modèle objet basé sur des prototypes au lieu du modèle objet traditionnel. Le modèle basé sur le prototype offre un héritage dynamique. Cela signifie que ce qui est hérité peut varier selon les objets. JavaScript supporte aussi l'écriture de fonctions sans qu'il y ait besoin de déclarations spéciales. Les fonctions peuvent être des propriétés d'objets, exécutées comme des méthodes avec un typage souple.</p> +<p>JavaScript est un langage beaucoup plus souple que Java. Il n'est pas nécessaire de déclarer toutes les variables, classes, et méthodes. Il n'y a pas à se soucier qu'une méthode soit publique, privée ou protégée, il n'y a pas à implémenter d'interfaces. Les variables, paramètres et types de retour des fonctions ne sont pas explicitement typés.</p> +<p>Java est un langage de programmation basé sur les classes conçues pour une exécution rapide et un typage sûr. La sûreté du typage signifie qu'on ne peut pas transformer un entier en Java en une référence vers un objet ni accéder à la mémoire privée via une corruption du bytecode Java. Le modèle de Java, basé sur les classes, signifie que les programmes se composent exclusivement de classes et de leurs méthodes. L'héritage des classes en Java ainsi que le typage fort exigent généralement une hiérarchie d'objets étroitement couplée. Ces exigences font que la programmation en Java peut s'avérer plus complexe que JavaScript.<br> + <br> + En revanche, JavaScript vient d'une lignée de langages plus légers, dynamiquement typés comme HyperTalk et dBASE. Ces langages de script offrent des outils de programmation à un public beaucoup plus large en raison de leur syntaxe plus facile, des fonctionnalités spécialisées intégrées et des exigences minimales pour la création d'objets.</p> +<p>Table 1.1 Comparaison entre JavaScript et Java</p> +<table class="standard-table"> + <caption> + Tableau 1.1 Comparaison entre JavaScript et Java</caption> + <thead> + <tr> + <th scope="col">JavaScript</th> + <th scope="col">Java</th> + </tr> + </thead> + <tbody> + <tr> + <td>Orienté objet. Pas de distinction entre les types d'objets. L'héritage se fait à travers le mécanisme de prototype et les propriétés et méthodes peuvent être ajoutées à n'importe quel objet dynamique.</td> + <td>Basé sur classes. Les objets sont divisés en classes et instances avec une hiérarchie d'héritage. Les classes et les instances ne peuvent pas avoir des propriétés ou des méthodes ajoutées dynamiquement.</td> + </tr> + <tr> + <td>Les types des variables ne sont pas déclarés (typage dynamique).</td> + <td>Les types des variables doivent être déclarés (typage statique).</td> + </tr> + <tr> + <td>On ne peut pas écrire automatiquement sur le disque dur.</td> + <td>On ne peut pas écrire automatiquement sur le disque dur.</td> + </tr> + </tbody> +</table> +<p>Pour plus d'informations sur la différence entre JavaScript et Java, voir les détails au chapitre du <a href="/fr/docs/Web/JavaScript/Guide/Le_mod%C3%A8le_objet_JavaScript_en_d%C3%A9tails">modèle objet</a> de JavaScript.</p> +<h2 id="JavaScript_et_la_spécification_ECMAScript">JavaScript et la spécification ECMAScript</h2> +<p>Netscape a inventé JavaScript et JavaScript a d'abord été utilisé dans les navigateurs Netscape. Cependant, Netscape travailla avec <a href="http://www.ecma-international.org/" title="http://www.ecma-international.org/">Ecma International </a>- l'association européenne pour la normalisation des systèmes d'information et de communication (ECMA était autrefois un acronyme pour European Computer Manufacturers Association), afin de fournir un standard et un langage de programmation international basée sur le noyau JavaScript. Cette version standardisée de JavaScript, appelée ECMAScript, se comporte de la même façon dans toutes les applications qui prennent en charge la norme. Les entreprises peuvent utiliser le langage standard ouvert pour développer leur implémentation de JavaScript. La norme ECMAScript est documentée dans la spécification ECMA-262.<br> + <br> + La norme ECMA-262 est également approuvée par <a href="http://www.iso.org/iso/home.html" title="http://www.iso.org/iso/home.html">l'ISO</a> (Organisation internationale de normalisation) en tant que norme ISO-16262. Vous pouvez trouver <a href="http://www-archive.mozilla.org/js/language/E262-3.pdf" title="http://www-archive.mozilla.org/js/language/E262-3.pdf">une version PDF de la norme ECMA-262</a> (version obsolète) sur le site de Mozilla. Vous pouvez également trouver les spécifications sur <a href="http://www.ecma-international.org/publications/standards/Ecma-262.htm" title="http://www.ecma-international.org/publications/standards/Ecma-262.htm">le site de l'Ecma International</a>. La spécification ECMAScript ne décrit pas le Document Object Model (DOM), qui est standardisé par le <a href="http://www.w3.org/" title="http://www.w3.org/">World Wide Web Consortium (W3C)</a>. Le DOM définit la manière dont les objets des documents HTML sont exposés à votre script.</p> +<h3 id="Relation_entre_les_versions_de_JavaScript_et_les_éditions_d'ECMAScript">Relation entre les versions de JavaScript et les éditions d'ECMAScript</h3> +<p>Netscape a travaillé en étroite collaboration avec Ecma International afin de produire la spécification ECMAScript (ECMA-262). Le tableau suivant décrit la relation entre les versions de JavaScript et les éditions d'ECMAScript.</p> +<table class="standard-table"> + <caption> + Tableau 1.2 Les versions de JavaScript et les liens avec les versions ECMAScript</caption> + <thead> + <tr> + <th scope="col">Version de JavaScript</th> + <th scope="col">Lien avec l'édition d'ECMAScript</th> + </tr> + </thead> + <tbody> + <tr> + <td>JavaScript 1.1</td> + <td>ECMA-262, Édition 1 basée sur JavaScript 1.1.</td> + </tr> + <tr> + <td>JavaScript 1.2</td> + <td> + <p>ECMA-262 n'était pas terminée lorsque JavaScript 1.2 est sorti. JavaScript 1.2 n'est pas entièrement compatible avec la norme ECMA-262, édition 1, pour les raisons suivantes :</p> + <ul> + <li>Netscape a développé des fonctionnalités supplémentaires dans JavaScript 1.2 qui n'ont pas été prises en considération pour ECMA-262.</li> + <li>ECMA-262 ajoute deux nouvelles fonctionnalités : l'internationalisation en utilisant le comportement Unicode et uniforme sur toutes les plateformes. Plusieurs fonctionnalités de JavaScript 1.2, telles que l'objet Date, qui étaient dépendantes de la plateforme.</li> + </ul> + </td> + </tr> + <tr> + <td>JavaScript 1.3</td> + <td>JavaScript 1.3 est entièrement compatible avec la norme ECMA-262, édition 1.<br> + JavaScript 1.3 a résolu les contradictions que JavaScript 1.2 a eu avec ECMA-262, tout en conservant toutes les fonctionnalités supplémentaires de JavaScript 1.2, sauf == et! =, qui ont été modifiées pour se conformer à la norme ECMA-262.</td> + </tr> + <tr> + <td>JavaScript 1.4</td> + <td>JavaScript 1.4 est entièrement compatible avec la norme ECMA-262, édition 1.<br> + La troisième version de la spécification ECMAScript n'a pas été finalisée lorsque JavaScript 1.4 est sorti.</td> + </tr> + <tr> + <td>JavaScript 1.5</td> + <td>JavaScript 1.5 est entièrement compatible avec la spécification ECMA-262, édition 3.</td> + </tr> + </tbody> +</table> +<div class="note"> + <p><strong>Remarque </strong>: ECMA-262 dans sa deuxième édition contenait des modifications mineures et corrections de bugs selon la spécification Édition 1. La version actuelle par le groupe de travail TC39 d'Ecma International est ECMAScript Edition 5.1</p> +</div> +<p>La<a href="/fr/docs/Web/JavaScript/Reference"> référence JavaScript</a> indique les fonctionnalités du langage qui sont conformes à ECMAScript.</p> +<p>JavaScript inclut toujours des fonctionnalités qui ne font pas partie de la spécification ECMAScript. JavaScript est compatible avec ECMAScript, tout en offrant des fonctionnalités supplémentaires.</p> +<h3 id="Documentation_de_JavaScript_et_spécification_ECMAScript">Documentation de JavaScript et spécification ECMAScript</h3> +<p>La spécification ECMAScript est un ensemble d'exigences pour la mise en œuvre ECMAScript. Elle est utile pour savoir si une fonctionnalité JavaScript est prise en charge dans d'autres implémentations ECMAScript. Si vous prévoyez d'écrire du code JavaScript qui utilise des fonctionnalités prises en charge par ECMAScript seulement, alors il vous sera peut-être nécessaire de revoir la spécification ECMAScript.<br> + <br> + Le document ECMAScript n'est pas destiné à aider les programmeurs de script : c'est le but de la documentation JavaScript.</p> +<h3 id="Terminologie_JavaScript_et_ECMAScript">Terminologie JavaScript et ECMAScript</h3> +<p>La spécification ECMAScript utilise une syntaxe et une terminologie qui peuvent ne pas être familières à un programmeur JavaScript. Bien que la description du langage puisse varier en ECMAScript, le langage lui-même reste le même. JavaScript prend en charge toutes les fonctionnalités décrites dans la spécification ECMAScript.</p> +<p>La documentation JavaScript décrit les aspects du langage qui sont appropriés pour un programmeur JavaScript. Par exemple :</p> +<ul> + <li>L'objet global n'est pas abordé dans la documentation JavaScript parce qu'il n'a pas à être utilisé directement. Les méthodes et propriétés de l'objet global, que vous utilisez, sont abordées dans la documentation de JavaScript, mais sont appelées fonctions et propriétés de plus haut niveau (<em>top-level</em>).</li> + <li>Le constructeur sans paramètre des objets <code>Number</code> et <code>String</code> ne sont pas abordés dans la documentation JavaScript, parce que le résultat est peu utile. Un constructeur <code>Number</code> appelé sans argument retourne +0, et un constructeur <code>String</code> sans argument retourne "" (une chaine de caractères vide).</li> +</ul> +<p style="text-align: right;"><span style="float: left;"><a href="/fr/docs/Web/JavaScript/Guide/Apropos">« Précédent</a> </span><a href="/fr/docs/JavaScript/Guide/Valeurs,_variables,_et_litt%C3%A9raux">Suivant »</a></p> +<p style="margin-left: 40px;"> </p> diff --git a/files/fr/conflicting/web/javascript/guide/regular_expressions/assertions/index.html b/files/fr/conflicting/web/javascript/guide/regular_expressions/assertions/index.html new file mode 100644 index 0000000000..f56d56a399 --- /dev/null +++ b/files/fr/conflicting/web/javascript/guide/regular_expressions/assertions/index.html @@ -0,0 +1,96 @@ +--- +title: Limites +slug: Web/JavaScript/Guide/Expressions_régulières/Limites +tags: + - Guide + - JavaScript + - Limites + - RegExp +translation_of: Web/JavaScript/Guide/Regular_Expressions/Assertions +translation_of_original: Web/JavaScript/Guide/Regular_Expressions/Boundaries +--- +<p>{{jsSidebar("JavaScript Guide")}}{{draft}}</p> + +<p>Les limites permettent d'indiquer les débuts et fins des lignes et des mots.</p> + +<h2 id="Types">Types</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caractères</th> + <th scope="col">Signification</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>^</code></td> + <td> + <p>Correspond au début la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut <code>true</code>, il correspondra également immédiatement après un caractère de saut de ligne.<br> + <br> + Ainsi, <code>/^A/</code> ne correspond pas au 'A' de "un A", mais correspond au 'A' de "Arceau".<br> + <br> + Le caractère '<code>^</code>' possède un sens différent lorsqu'il est utilisé dans un motif d'ensemble de caractères. Voir les <a href="#special-negated-character-set">compléments sur les ensembles de caractères </a>pour plus de détails et d'exemples.</p> + </td> + </tr> + <tr> + <td><code>$</code></td> + <td> + <p>Correspond à la fin de la séquence. Si le marqueur (<em>flag</em>) de lignes multiples vaut true, il correspondra également immédiatement avant un caractère de saut de ligne.</p> + + <p>Ainsi, <code>/t$/</code> ne correspond pas au 't' de "printemps", mais correspond au 't' de "aliment".</p> + </td> + </tr> + <tr> + <td><code>\b</code></td> + <td> + <p>Correspond à la position d'uneAfter the <em>limite de mot</em>. Une limite de mot correspond à la position où un caractère d'un mot n'est pas suivi ou précédé d'un autre caractère de mot. Il faut savoir que la limite correspondante n'est pas incluse dans le résultat. Autrement dit, la longueur d'une telle correspondance est nulle. (À ne pas confondre avec <code>[\b]</code>.)</p> + + <p>Exemples :<br> + <code>/\bm/</code> correspond au 'm' dans "mignon" ;<br> + <code>/no\b/</code> ne correspond pas au 'no' de "mignon" car 'no' est suivi de 'n' qui n'est pas un caractère de limite de mot;<br> + <code>/non\b/</code> correspond au 'non' de "mignon" car 'non' représente la fin de la chaîne de caractère et n'est donc pas suivi par un caractère de mot.<br> + <code>/\w\b\w/</code> ne correspondra jamais à quoi que ce soit car un caractère de mot ne peut pas être suivi à la fois par un caractère de mot et un caractère n'étant pas un caractère de mot.</p> + + <div class="note"> + <p><strong>Note :</strong> Le moteur d'expressions rationnelles JavaScript définit <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-15.10.2.6">un ensemble de caractères spécifiques</a> qui doivent être considérés comme des caractères de mot. Tout caractère qui n'est pas dans cet ensemble est considéré comme une limite de mot. Cet ensemble de caractères est relativement limité car constitué uniquement des caractères de l'alphabet romain en minuscules et en majuscules, des chiffres décimaux et du tiret-bas (<em>underscore</em>). Les autres caractères, comme les caractères accentués (é ou ü par exemple), sont donc considérés comme des limites de mots.</p> + </div> + </td> + </tr> + <tr> + <td><code>\B</code></td> + <td> + <p>Correspond à une "non-<em>limite de mot</em>". Cela correspond pour les cas suivants :</p> + + <ul> + <li>Avant le premier caractère d'une chaîne de caractères</li> + <li>Après le dernier caractère d'une chaîne de caractères</li> + <li>Entre deux caractères de mot</li> + <li>Entre deux caractères qui ne sont pas des caractères de mot</li> + <li>Avec la chaîne vide.</li> + </ul> + + <p>Ainsi, <code>/\B../</code> correspond au 'oo' de "football" (et <code>/e\B./</code> correspond au 'er' dans "une mer "</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Cibler_le_début_d'un_champ_grâce_au_caractère_de_contrôle">Cibler le début d'un champ grâce au caractère de contrôle <code>^</code></h3> + +<p>On utilisera le caractère spécial <code>^</code> afin de cibler le début d'un mot. Dans cet exemple, on filtre les fruits qui commencent par A grâce à l'expression rationnelle <code> /^A/</code>.</p> + +<pre class="brush: js">let fruits = ["Ananas", "Melon", "Orange", "Abricot", "Pomme"]; + +let fruitsDebutantParA = fruits.filter(fruit => /^A/.test(fruit)); +console.table(fruitsDebutantsParA); // [ 'Ananas', 'Abricot' ]</pre> + +<p>Dans ce deuxième exemple, on utilise <code>^</code> à la fois pour indiquer le début du mot et pour indiquer un groupe complémentaire pour ne sélectionner que les fruits dont le nom ne commence pas par A.</p> + +<pre class="brush: js">let fruits = ["Ananas", "Melon", "Orange", "Abricot", "Pomme"]; + +let fruitsNeDebutantPasParA = fruits.filter(fruit => /^[^A]/.test(fruit)); +console.table(fruitsNeDebutantPasParA); // [ 'Melon', 'Orange', 'Pomme' ]] +</pre> diff --git a/files/fr/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/fr/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..1397899d63 --- /dev/null +++ b/files/fr/conflicting/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,88 @@ +--- +title: Retours sur l'héritage +slug: Web/JavaScript/Guide/Retours_sur_héritage +tags: + - Guide + - JavaScript + - Prototype +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +translation_of_original: Web/JavaScript/Guide/Inheritance_Revisited +--- +<p>Pour des informations plus générales sur l'héritage et les prototypes dans JavaScript, il est conseillé de lire la page <a href="/fr/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain" title="/fr/docs/JavaScript/Guide/Inheritance_and_the_prototype_chain">Héritage et chaîne de prototypes</a>.</p> + +<p>L'héritage a toujours été présent dans JavaScript. Les exemples de cette page utilisent des méthodes qui ont été introduites avec ECMAScript 5. Les pages décrivant ces méthodes vous permettront de savoir si elles peuvent être émulées ou non (pour les anciennes versions notamment).</p> + +<h2 id="Example" name="Example">Exemple</h2> + +<p><code>B</code> hérite de <code>A</code> :</p> + +<pre class="brush: js">function A(a){ + this.varA = a; +} + +A.prototype = { + faireQuelqueChose : function(){ + // ... + } +} + +function B(a, b){ + A.call(this, a); + this.varB = b; +} +B.prototype = Object.create(A.prototype, { + varB : { + value: null, + enumerable: true, + configurable: true, + writable: true + }, + faireQuelqueChose : { + value: function(){ // surcharge + A.prototype.faireQuelqueChose.apply(this, arguments); // call super + // ... + }, + enumerable: true, + configurable: true, + writable: true + } +}); + +var b = new B(); +b.faireQuelqueChose(); +</pre> + +<p>Ce qui est à retenir ici :</p> + +<ul> + <li>Les types sont définis dans <code>.prototype</code></li> + <li>On utiliser <code>Object.create()</code> pour l'héritage</li> +</ul> + +<h2 id="La_propriété_prototype_et_la_méthode_Object.getPrototypeOf">La propriété <code>prototype</code> et la méthode Object.getPrototypeOf</h2> + +<p>JavaScript peut paraître déroutant, relativement à Java ou C++ car il y a une gestion dynamique, à l'exécution et qu'il n'y a pas de classe. Tous les objets sont des instances.</p> + +<p>On voit dans l'exemple précédent que la fonction <code>A</code> possède une propriété spéciale appelée <code>prototype</code>. Cette propriété spéciale est liée à l'utilisation de l'opérateur <code>new</code>. Une référence à l'objet prototype est copié vers la propriété interne<code> [[Prototype]]</code> de la nouvelle instance. Ainsi, si on fait <code>var a1 = new A()</code>, JavaScript (une fois que l'objet sera créé en mémoire et avant d'exécuter la fonction<code> A()</code> avec <code>this</code> lié à l'objet) définira <code>a1.[[Prototype]] = A.prototype</code>. Quand on accède aux propriétés d'une instance, JavaScript vérifie d'abord que la propriété en question existe ou non pour l'instance même et si ce n'est pas le cas, consulte <code>[[Prototype]]</code>. Cela signifie que chaque chose définie dans <code>prototype</code> est partagée avec toutes les instances et qu'on peut changer certains aspects du prototype par la suite, ces changements seront répercutés pour toutes les instances.</p> + +<p>Si, dans l'exemple suivant, on fait <code>var a1 = new A(); var a2 = new A();</code> alors <code>a1.faireQuelqueChose</code> se référerait à <code>Object.getPrototypeOf(a1).faireQuelqueChose</code>, qui correspond exactement à <code>A.prototype.faireQuelqueChose</code>. Autrement dit : <code>Object.getPrototypeOf(a1).<code>faireQuelqueChose</code> == Object.getPrototypeOf(a2).<code>faireQuelqueChose</code> == A.prototype.<code>faireQuelqueChose</code></code>.</p> + +<p>En résumé, le <code>prototype</code> correspond au type tandis que <code>Object.getPrototypeOf()</code> permet de décrire une instance.</p> + +<p><code><span>[[Prototype]]</span></code> est exploré récursivement. Cela signifie qu'on cherche <code>a1.faireQuelqueChose</code>, puis <code>Object.getPrototypeOf(a1).<code>faireQuelqueChose</code></code>, puis <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).<code>faireQuelqueChose</code></code> et ainsi de suite jusqu'à ce que <code>Object.getPrototypeOf </code>renvoie la valeur <code>null</code>.</p> + +<p>Quand on appelle :</p> + +<pre class="brush: js">var o = new Toto();</pre> + +<p>JavaScript effectue en fait :</p> + +<pre class="brush: js">var o = new Object(); +o.[[Prototype]] = Toto.prototype; +o.Toto();</pre> + +<p>Puis, si on utilise cette instruction</p> + +<pre class="brush: js">o.unePropriété;</pre> + +<p>qui vérifie si <code>o</code> possède une propriété <code>unePropriété</code>. Si ce n'est pas le cas, JavaScript vérifiera si <code>Object.getPrototypeOf(o).<code>unePropriété</code></code> existe, si ce n'est pas le cas il vérifie <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).<code>unePropriété</code></code> et ainsi de suite.</p> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..a0c018f6ed --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,70 @@ +--- +title: ArrayBuffer.prototype +slug: Web/JavaScript/Reference/Objets_globaux/ArrayBuffer/prototype +tags: + - ArrayBuffer + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/ArrayBuffer/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <strong><code>ArrayBuffer.prototype</code></strong> représente le prototype de l'objet {{jsxref("ArrayBuffer")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Les instances de <code>ArrayBuffer</code> héritent toutes de <code>ArrayBuffer.prototype</code>. Il est donc possible de modifier le protoype du constructeur pour apporter des changements à chacune des instances <code>ArrayBuffer</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>ArrayBuffer.prototype.constructor</dt> + <dd>Définit la fonction qui crée le prototype d'un objet. La valeur initiale correspond au constructeur natif <code>ArrayBuffer</code>.</dd> + <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>La taille du tableau en octets. Cette propriété est déterminée lors de la construction du tableau et ne peut pas être changée. <code>Propriété en lecture seule</code>.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> + <dd>Renvoie un nouvel <code>ArrayBuffer</code> dont le contenu est une copie des octets contenus dans l'objet <code>ArrayBuffer</code> depuis <code>begin</code> (compris), jusqu'à <code>end</code> (non-compris). Si <code>begin</code> ou <code>end</code> est négatif, cela fait référence à l'indice à partir de la fin du tableau et non à l'indice à partir du début du tableau.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer.prototype', 'ArrayBuffer.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.ArrayBuffer.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("ArrayBuffer")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/boolean/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/boolean/index.html new file mode 100644 index 0000000000..8aebedeab9 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/boolean/index.html @@ -0,0 +1,89 @@ +--- +title: Boolean.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Boolean/prototype +tags: + - Boolean + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Boolean +translation_of_original: Web/JavaScript/Reference/Global_Objects/Boolean/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <strong><code>Boolean.prototype</code></strong> représente le prototype pour le constructeur {{jsxref("Boolean")}}.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<div>{{EmbedInteractiveExample("pages/js/boolean-constructor.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Description">Description</h2> + +<p>Les instances de {{jsxref("Boolean")}} hérite de {{jsxref("Boolean.prototype")}}. Vous pouvez utiliser l'objet prototype du constructeur pour ajouter des propriétés ou des méthodes de toutes les instances <code>Boolean</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Boolean.prototype.constructor</code></dt> + <dd>Renvoie la fonction de création d'un prototype d'instance. Il s'agit de la fonction {{jsxref("Boolean")}} par défaut.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Boolean.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> + <dd>Renvoie une chaine de caractères contenant le code source de l'objet {{jsxref("Boolean")}} ; celle-ci peut être utilisée pour créer un objet équivalent. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> +</dl> + +<dl> + <dt>{{jsxref("Boolean.prototype.toString()")}}</dt> + <dd>Renvoie une chaine de caractères contenant soit « <code>true</code> » soit « <code>false</code> » selon la valeur de l'objet. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<dl> + <dt>{{jsxref("Boolean.prototype.valueOf()")}}</dt> + <dd>Renvoie la valeur primitive de l'objet {{jsxref("Boolean")}}. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.6.3.1', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-boolean.prototype', 'Boolean.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Boolean.prototype")}}</p> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/dataview/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/dataview/index.html new file mode 100644 index 0000000000..fd20057af1 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/dataview/index.html @@ -0,0 +1,120 @@ +--- +title: DataView.prototype +slug: Web/JavaScript/Reference/Objets_globaux/DataView/prototype +tags: + - DataView + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/DataView +translation_of_original: Web/JavaScript/Reference/Global_Objects/DataView/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>DataView</strong></code><strong><code>.prototype</code></strong> représente le prototype de l'objet {{jsxref("DataView")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Chacune des instances de <code>DataView</code> hérite de <code>DataView.prototype</code>. Comme pour chacun des constructeurs, il est possible de changer le prototype du constructeur afin d'apporter des modifications pour toutes les instances de <code>DataView</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>{{jsxref("DataView.prototype.constructor")}}</dt> + <dd>Définit la fonction qui permet de créer le prototype d'un objet. La valeur initiale correspond au constructeur natif standard <code>DataView</code>.</dd> + <dt>{{jsxref("DataView.prototype.buffer")}} {{readonlyInline}}</dt> + <dd>L'{{jsxref("ArrayBuffer")}} référencé par cette vue. Cette propriété est fixée lors de la construction de l'objet et est donc en <strong>lecture seule.</strong></dd> + <dt>{{jsxref("DataView.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>La longueur, exprimée en octets, de la vue à partir du début de son {{jsxref("ArrayBuffer")}}. Cette propriété est fixée lors de la construction de l'objet et est donc en <strong>lecture seule.</strong></dd> + <dt>{{jsxref("DataView.prototype.byteOffset")}} {{readonlyInline}}</dt> + <dd>Le décalage, exprimé en octets, entre le début de la vue et du {{jsxref("ArrayBuffer")}} correspondant. Cette propriété est fixée lors de la construction de l'objet et est donc en <strong>lecture seule.</strong></dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<h3 id="Lecture">Lecture</h3> + +<dl> + <dt>{{jsxref("DataView.prototype.getInt8()")}}</dt> + <dd>Obtient un entier signé codé sur 8 bits à partir de l'octet de début (potentiellement décalé) de la vue.</dd> + <dt>{{jsxref("DataView.prototype.getUint8()")}}</dt> + <dd>Obtient un entier non-signé codé sur 8 bits à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.getInt16()")}}</dt> + <dd>Obtient un entier signé codé sur 16 bits (<em>short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.getUint16()")}}</dt> + <dd>Obtient un entier non-signé codé sur 16 bits (<em>unsigned short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.getInt32()")}}</dt> + <dd>Obtient un entier signé codé sur 32 bits (<em>long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.getUint32()")}}</dt> + <dd>Obtient un entier non-signé codé sur 32 bits (<em>unsigned long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.getFloat32()")}}</dt> + <dd>Obtient un flottant codé sur 32 bits (<em>float</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.getFloat64()")}}</dt> + <dd>Obtient un flottant codé sur 64 bits (<em>double</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.getBigInt64()")}}</dt> + <dd>Obtient un entier signé sur 64 bits (<em>long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.getBigUint64()")}}</dt> + <dd>Obtient un entier non-signé sur 64 bits (<em>unsigned long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> +</dl> + +<h3 id="Écriture">Écriture</h3> + +<dl> + <dt>{{jsxref("DataView.prototype.setInt8()")}}</dt> + <dd>Enregistre un entier signé codé sur 8 bits à partir de l'octet de début (potentiellement décalé) de la vue.</dd> + <dt>{{jsxref("DataView.prototype.setUint8()")}}</dt> + <dd>Enregistre un entier non-signé codé sur 8 bits à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.setInt16()")}}</dt> + <dd>Enregistre un entier signé codé sur 16 bits (<em>short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.setUint16()")}}</dt> + <dd>Enregistre un entier non-signé codé sur 16 bits (<em>unsigned short</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.setInt32()")}}</dt> + <dd>Enregistre un entier signé codé sur 32 bits (<em>long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.setUint32()")}}</dt> + <dd>Enregistre un entier non-signé codé sur 32 bits (<em>unsigned long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.setFloat32()")}}</dt> + <dd>Enregistre un flottant codé sur 32 bits (<em>float</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.setFloat64()")}}</dt> + <dd>Enregistre un flottant codé sur 64 bits (<em>double</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.setBigInt64()")}}</dt> + <dd>Enregistre un entier signé sur 64 bits (<em>long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> + <dt>{{jsxref("DataView.prototype.setBigUint64()")}}</dt> + <dd>Enregistre un entier non-signé sur 64 bits (<em>unsigned long long</em> par analogie avec le type C) à partir de l'octet de début de la vue (potentiellement décalé).</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-dataview.prototype', 'DataView.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-dataview.prototype', 'DataView.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.DataView.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("DataView")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/date/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/date/index.html new file mode 100644 index 0000000000..5d65e47b12 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/date/index.html @@ -0,0 +1,183 @@ +--- +title: Date.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Date/prototype +tags: + - Date + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Date +translation_of_original: Web/JavaScript/Reference/Global_Objects/Date/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Date.prototype</strong></code> représente le prototype du constructeur {{jsxref("Date")}}.</p> + +<div>{{js_property_attributes(0,0,1)}}</div> + +<h2 id="Description">Description</h2> + +<p>Les instances de {{jsxref("Date")}} JavaScript héritent de <code>Date.prototype</code>. Le prototype du constructeur peut être modifié afin d'altérer l'ensemble des instances de <code>Date</code> pour y ajouter des propriétés et/ou des méthodes.</p> + +<p>Pour des questions de compatibilité avec le calcul des millénaires (en d'autres termes, pour prendre en compte l'année 2000), il faut toujours renseigner l'année entière ; par exemple, utilisez 1998, et non 98. Afin d'obtenir ces valeurs JavaScript possède les méthodes {{jsxref("Date/getFullYear", "getFullYear()")}}, {{jsxref("Date/setFullYear", "setFullYear()")}}, {{jsxref("Date/getUTCFullYear", "getUTCFullYear()")}} et {{jsxref("Date/setUTCFullYear", "setUTCFullYear()")}}.</p> + +<p>Avec ECMAScript 6, l'objet <code>Date.prototype</code> n'est plus une instance de {{jsxref("Date")}}, c'est un objet « ordinaire ».</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>Date.prototype.constructor</dt> + <dd>Renvoie la fonction qui crée une instance de <code>Date</code>. Par défaut, ce sera le constructeur {{jsxref("Date", "Date")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<h3 id="Lecture_(getters)">Lecture (<em>getters</em>)</h3> + +<dl> + <dt>{{jsxref("Date.prototype.getDate()")}}</dt> + <dd>Renvoie le jour du mois (1-31) pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.getDay()")}}</dt> + <dd>Renvoie le jour de la semaine (0-6) pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.getFullYear()")}}</dt> + <dd>Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.getHours()")}}</dt> + <dd>Renvoie l'heure (0-23) pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.getMilliseconds()")}}</dt> + <dd>Renvoie les millièmes de secondes (0-999) pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.getMinutes()")}}</dt> + <dd>Renvoie les minutes (0-59) pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.getMonth()")}}</dt> + <dd>Renvoie le mois (0-11) pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.getSeconds()")}}</dt> + <dd>Renvoie les secondes (0-59) pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.getTime()")}}</dt> + <dd>Renvoie la valeur numérique de la date spécifiée sous la forme du nombre de millisecondes depuis le 1<sup>er</sup> janvier 1970, 00:00:00 UTC (les valeurs renvoyées pour les dates antérieures seront négatives).</dd> + <dt>{{jsxref("Date.prototype.getTimezoneOffset()")}}</dt> + <dd>Renvoie le décalage de fuseau horaire en minutes pour l'heure locale courante.</dd> + <dt>{{jsxref("Date.prototype.getUTCDate()")}}</dt> + <dd>Renvoie le jour (date) du mois (1-31) pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.getUTCDay()")}}</dt> + <dd>Renvoie le jour de la semaine (0-6) pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.getUTCFullYear()")}}</dt> + <dd>Renvoie l'année (avec 4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.getUTCHours()")}}</dt> + <dd>Renvoie les heures (0-23) pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.getUTCMilliseconds()")}}</dt> + <dd>Renvoie les millièmes de seconde (0-999) pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.getUTCMinutes()")}}</dt> + <dd>Renvoie les minutes (0-59) pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.getUTCMonth()")}}</dt> + <dd>Renvoie le mois (0-11) pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.getUTCSeconds()")}}</dt> + <dd>Renvoie les secondes (0-59) pour la date spécifiée selon le temps universel</dd> + <dt>{{jsxref("Date.prototype.getYear()")}} {{ Deprecated_inline() }}</dt> + <dd>Renvoie l'année (habituellement avec 2 ou 3 chiffres) pour la date spécifiée selon l'heure locale. Utilisez plutôt {{jsxref("Date/getFullYear", "getFullYear()")}}.</dd> +</dl> + +<h3 id="Écriture_(setters)">Écriture (<em>setters</em>)</h3> + +<dl> + <dt>{{jsxref("Date.prototype.setDate()")}}</dt> + <dd>Définit le jour du mois pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.setFullYear()")}}</dt> + <dd>Définit l'année complète (4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.setHours()")}}</dt> + <dd>Définit les heures pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.setMilliseconds()")}}</dt> + <dd>Définit les millièmes de seconde pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.setMinutes()")}}</dt> + <dd>Définit les minutes pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.setMonth()")}}</dt> + <dd>Définit le mois pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.setSeconds()")}}</dt> + <dd>Définit les secondes pour la date spécifiée selon l'heure locale.</dd> + <dt>{{jsxref("Date.prototype.setTime()")}}</dt> + <dd>Règle l'objet <code>Date</code> sur le temps représenté par un nombre de millisecondes depuis le 1<sup>er</sup> janvier 1970, 00:00:00 UTC.</dd> + <dt>{{jsxref("Date.prototype.setUTCDate()")}}</dt> + <dd>Définit le jour du mois pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.setUTCFullYear()")}}</dt> + <dd>Définit l'année complète (4 chiffres pour une année à 4 chiffres) pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.setUTCHours()")}}</dt> + <dd>Définit les heures pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.setUTCMilliseconds()")}}</dt> + <dd>Définit les millièmes de seconde pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.setUTCMinutes()")}}</dt> + <dd>Définit les minutes pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.setUTCMonth()")}}</dt> + <dd>Définit le mois pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.setUTCSeconds()")}}</dt> + <dd>Définit les secondes pour la date spécifiée selon le temps universel.</dd> + <dt>{{jsxref("Date.prototype.setYear()")}} {{ Deprecated_inline() }}</dt> + <dd>Définit l'année (habituellement avec 2 ou 3 chiffres) pour une date spécifiée selon le temps universel. Utilisez plutôt {{jsxref("Date/setFullYear", "setFullYear()")}}.</dd> +</dl> + +<h3 id="Lecture_avec_conversion">Lecture avec conversion</h3> + +<dl> + <dt>{{jsxref("Date.prototype.toDateString()")}}</dt> + <dd>Renvoie la partie « date » de l'objet <code>Date</code> sous la forme d'une chaîne de caractères lisible par un humain (autrement dit quelque chose comme "Thu Apr 12 2018").</dd> + <dt>{{jsxref("Date.prototype.toISOString()")}}</dt> + <dd>Convertit une date en chaîne de caractère respectant la norme ISO 8601 Format Étendu.</dd> + <dt>{{jsxref("Date.prototype.toJSON()")}}</dt> + <dd>Renvoie une chaîne de caractère représentant la date en utilisant {{jsxref("Date/toISOString", "toISOString()")}}. Pour une utilisation avec {{jsxref("JSON.stringify()")}}.</dd> + <dt>{{jsxref("Date.prototype.toGMTString()")}} {{ Deprecated_inline() }}</dt> + <dd>Convertit une date en une chaîne de caractères, en utilisant les conventions GMT. Utilisez plutôt {{jsxref("Date/toUTCString", "toUTCString()")}}.</dd> + <dt>{{jsxref("Date.prototype.toLocaleDateString()")}}</dt> + <dd>Renvoie la partie « date » de l'objet <code>Date</code> sous la forme d'une chaîne de caractères adaptée selon la locale en utilisant les réglages du système pour déterminer la locale à utiliser.</dd> + <dt>{{jsxref("Date.prototype.toLocaleFormat()")}} {{ Non-standard_inline() }}</dt> + <dd>Convertit une date en une chaîne de caractères, en utilisant une chaîne de formatage.</dd> + <dt>{{jsxref("Date.prototype.toLocaleString()")}}</dt> + <dd>Convertit une date en une chaîne de caractères, en utilisant les conventions locales courantes. Remplace la méthode {{jsxref("Object/toLocaleString", "Object.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("Date.prototype.toLocaleTimeString()")}}</dt> + <dd>Renvoie la partie « heure » de l'objet <code>Date</code> sous la forme d'une chaîne, en utilisant les conventions locales courantes.</dd> + <dt>{{jsxref("Date.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> + <dd>Renvoie une chaîne de caractères représentant le code source pour un objet <code>Date</code> équivalent ; cette valeur peut être utilisée pour créer un nouvel objet. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Date.prototype.toString()")}}</dt> + <dd>Renvoie une chaîne de caractères représentant l'objet <code>Date</code> spécifié. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Date.prototype.toTimeString()")}}</dt> + <dd>Renvoie la partie « heure » de l'objet <code>Date</code> sous la forme d'une chaîne de caractères lisible par humain.</dd> + <dt>{{jsxref("Date.prototype.toUTCString()")}}</dt> + <dd>Convertit une date en une chaîne de caractères, en utilisant le fuseau horaire UTC.</dd> + <dt>{{jsxref("Date.prototype.valueOf()")}}</dt> + <dd>Renvoie la valeur primitive d'un objet <code>Date</code>. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.9.5', 'Date.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-date-prototype-object', 'Date.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Date.prototype")}}</p> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/date/tostring/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/date/tostring/index.html new file mode 100644 index 0000000000..b558e82142 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/date/tostring/index.html @@ -0,0 +1,23 @@ +--- +title: toString +slug: toString +tags: + - Désambiguation +translation_of: Web/JavaScript/Reference/Global_Objects/Date/toString +translation_of_original: toString +--- +<div class="noinclude"><strong>toString</strong> est une méthode de plusieurs objets JavaScript :</div> + +<ul> + <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Array/toString">toString</a> — Méthode de l'objet <code>Array</code>.</li> + <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Boolean/toString">toString</a> — Méthode de l'objet <code>Boolean</code>.</li> + <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Date/toString">toString</a> — Méthode de l'objet <code>Date</code>.</li> + <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Function/toString">toString</a> — Méthode de l'objet <code>Function</code>.</li> + <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/JavaArray/toString">toString</a> — Méthode de l'objet <code>JavaArray</code>.</li> + <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Number/toString">toString</a> — Méthode de l'objet <code>Number</code>.</li> + <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/Object/toString">toString</a> — Méthode de l'objet <code>Object</code>.</li> + <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/RegExp/toString">toString</a> — Méthode de l'objet <code>RegExp</code>.</li> + <li><a href="fr/R%c3%a9f%c3%a9rence_de_JavaScript_1.5_Core/Objets_globaux/String/toString">toString</a> — Méthode de l'objet <code>String</code>.</li> +</ul> + +<div class="noinclude"><div class="disambig" id="disambig"><p><i>Ceci est une page de <a href="https://developer.mozilla.org/fr/docs/Project:D%c3%a9sambiguation">désambiguation</a> — une aide à la navigation qui liste une série de pages qui devraient partager le même titre. Si un lien provenant d'un article mène ici, n'hésitez pas à revenir à celui-ci pour le faire pointer vers la page concernée.</i></p></div></div> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/error/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/error/index.html new file mode 100644 index 0000000000..014afc9ce2 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/error/index.html @@ -0,0 +1,115 @@ +--- +title: Error.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Error/prototype +tags: + - Error + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Error +translation_of_original: Web/JavaScript/Reference/Global_Objects/Error/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Error.prototype</strong></code> représente le prototype du constructeur {{jsxref("Error")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances d'{{jsxref("Error")}} et les instances des {{jsxref("Error", "erreurs non-génériques", "#Types_d'erreur_personnalis.C3.A9s", 1)}} héritent de {{jsxref("Error.prototype")}}. Comme pour tous les constructeurs, on pouvez utiliser le prototype du constructeur pour ajouter des propriétés ou méthodes à l'ensemble des instances créées avec ce constructeur.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<h3 id="Propriétés_standard">Propriétés standard</h3> + +<dl> + <dt>Error.prototype.constructor</dt> + <dd>La fonction créeant une instance du prototype.</dd> + <dt>{{jsxref("Error.prototype.message")}}</dt> + <dd>Le message de l'erreur.</dd> + <dt>{{jsxref("Error.prototype.name")}}</dt> + <dd>Le nom de l'erreur.</dd> +</dl> + +<h3 id="Extensions_spécifiques_à_une_implémentation">Extensions spécifiques à une implémentation</h3> + +<div>{{Non-standard_header}}</div> + +<h4 id="Microsoft">Microsoft</h4> + +<dl> + <dt>{{jsxref("Error.prototype.description")}}</dt> + <dd>Description de l'erreur. Similaire à {{jsxref("Error.message", "message")}}.</dd> + <dt>{{jsxref("Error.prototype.number")}}</dt> + <dd>Numéro de l'erreur.</dd> +</dl> + +<h4 id="Mozilla">Mozilla</h4> + +<dl> + <dt>{{jsxref("Error.prototype.fileName")}}</dt> + <dd>Chemin vers le fichier qui a déclenché l'erreur.</dd> + <dt>{{jsxref("Error.prototype.lineNumber")}}</dt> + <dd>Numéro de la ligne qui a déclenché l'erreur dans le fichier.</dd> + <dt>{{jsxref("Error.prototype.columnNumber")}}</dt> + <dd>Numéro de la colonne qui a déclenché l'erreur dans le fichier.</dd> + <dt>{{jsxref("Error.prototype.stack")}}</dt> + <dd>Pile d'appels.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Error.prototype.toSource()")}} {{Non-standard_inline}}</dt> + <dd>Renvoie une chaine de caractères contenant le code source de l'objet <code>Error</code> ; cette valeur peut être utilisée pour créer un nouvel objet. Elle remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Error.prototype.toString()")}}</dt> + <dd>Renvoie une chaine de caractères représentant l'objet. Elle remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.3.1', 'Error')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-error.prototype', 'Error')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-error.prototype', 'Error')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une<em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Error.prototype")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Object.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/evalerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/evalerror/index.html new file mode 100644 index 0000000000..1123259c3d --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/evalerror/index.html @@ -0,0 +1,91 @@ +--- +title: EvalError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/EvalError/prototype +tags: + - Error + - EvalError + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/EvalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/EvalError/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>EvalError.prototype</strong></code> représente le prototype du constructeur {{jsxref("EvalError")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Chacune des instances de {{jsxref("EvalError")}} hérite de {{jsxref("EvalError.prototype")}}. On peut utiliser le prototype pour ajouter des propriétés ou des méthodes à toutes les instances.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>EvalError.prototype.constructor</code></dt> + <dd>Définit la fonction qui crée une instance basée sur le prototype.</dd> + <dt>{{jsxref("Error.prototype.message", "EvalError.prototype.message")}}</dt> + <dd>Un message décrivant l'erreur. Bien que la spécification ECMA-262 définit que <code>EvalError</code> doit fournir une propriété <code>message</code> propre à l'objet, l'implémentation de <a href="/fr/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> fait qu'il hérite de {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "EvalError.prototype.name")}}</dt> + <dd>Un nom d'erreur. Propriété héritée de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "EvalError.prototype.fileName")}}</dt> + <dd>Un chemin vers le fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "EvalError.prototype.lineNumber")}}</dt> + <dd>Le numéro de la ligne du fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "EvalError.prototype.columnNumber")}}</dt> + <dd>Le numéro de la colonne dans la ligne du fichier qui a provoqué l'erreur. Propriété héritée de {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "EvalError.prototype.stack")}}</dt> + <dd>Pile d'appels. Propriété héritée de {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p>Bien que l'objet prototype <code>EvalError</code> ne possède pas de propriété propre, les instances de {{jsxref("EvalError")}} héritent de certaines méthodes via la chaîne de prototypes.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.EvalError")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/function/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/function/index.html new file mode 100644 index 0000000000..ff4a70e10f --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/function/index.html @@ -0,0 +1,99 @@ +--- +title: Function.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Function/prototype +tags: + - Function + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Function +translation_of_original: Web/JavaScript/Reference/Global_Objects/Function/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Function.prototype</strong></code> représente le prototype de l'objet {{jsxref("Function")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Les objets {{jsxref("Function")}} héritent de <code>Function.prototype</code>. <code>Function.prototype</code> ne peut pas être modifié.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>{{jsxref("Function.arguments")}} {{deprecated_inline}}</dt> + <dd>Un tableau correspondant aux arguments passés à la fonction. Cette propriété est dépréciée et il est préférable d'utiliser l'objet {{jsxref("Fonctions/arguments", "arguments")}} à la place.</dd> + <dt>{{jsxref("Function.arity")}} {{obsolete_inline}}</dt> + <dd>Cette propriété était utilisée pour indiquer le nombre d'arguments attendus par la fonction. Cette propriété a été supprimée. La propriété {{jsxref("Function.length", "length")}} doit être utilisée à la place.</dd> + <dt>{{jsxref("Function.caller")}} {{non-standard_inline}}</dt> + <dd>Indique la fonction qui a appelée la fonction courante.</dd> + <dt>{{jsxref("Function.length")}}</dt> + <dd>Indique le nombre d'arguments attendus par la fonction.</dd> + <dt>{{jsxref("Function.name")}}</dt> + <dd>Le nom de la fonction.</dd> + <dt>{{jsxref("Function.displayName")}} {{non-standard_inline}}</dt> + <dd>Le nom de la fonction à utiliser pour l'affichage.</dd> + <dt><code>Function.prototype.constructor</code></dt> + <dd>Définit la fonction qui crée le prototype de l'objet. Voir la page {{jsxref("Object.prototype.constructor")}} pour plus de détails.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Function.prototype.apply()")}}</dt> + <dd>Cette méthode applique la fonction et pour cette fonction, <code>this</code> sera la valeur passée en argument (l'objet manipulé peut ainsi être différent de l'objet courant). Les arguments peuvent être passés grâce à un objet {{jsxref("Array")}}.</dd> + <dt>{{jsxref("Function.prototype.bind()")}}</dt> + <dd>Cette méthode crée un nouvelle fonction qui, lorsqu'elle est appelée, appelle cette fonction dans le contexte de la valeur fournie avec une suite d'arguments à utiliser avant ceux fournis à la nouvelle fonction.</dd> + <dt>{{jsxref("Function.prototype.call()")}}</dt> + <dd>Cette méthode applique la fonction, et pour cette fonction, <code>this</code> sera la valeur passée en premier arguments. Les arguments peuvent être passés tels quels dans les arguments suivants.</dd> + <dt>{{jsxref("Function.prototype.isGenerator()")}} {{non-standard_inline}}</dt> + <dd>Cette méthode renvoie <code>true</code> si la fonction est un <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function*">générateur</a> ; sinon elle renvoie <code>false</code>.</dd> + <dt>{{jsxref("Function.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Cette méthode renvoie une chaîne de caractères représentant le code source de la fonction. Elle surcharge la méthode {{jsxref("Object.prototype.toSource")}}.</dd> + <dt>{{jsxref("Function.prototype.toString()")}}</dt> + <dd>Cette méthode renvoie une chaîne de caractères représentant le code source de la fonction. Elle surcharge la méthode {{jsxref("Object.prototype.toString")}}.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.3.5.2', 'Function.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-instances-prototype','Function.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-instances-prototype', 'Function.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Function.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html new file mode 100644 index 0000000000..1a23ca8eb5 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/generatorfunction/index.html @@ -0,0 +1,67 @@ +--- +title: GeneratorFunction.prototype +slug: Web/JavaScript/Reference/Objets_globaux/GeneratorFunction/prototype +tags: + - ECMAScript 2015 + - GeneratorFunction + - Iterator + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/GeneratorFunction +translation_of_original: Web/JavaScript/Reference/Global_Objects/GeneratorFunction/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>GeneratorFunction.prototype</strong></code> représente le prototype de l'objet {{jsxref("GeneratorFunction")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Les objets {{jsxref("GeneratorFunction")}} héritent de <code>GeneratorFunction.prototype</code>. <code>GeneratorFunction.prototype</code> ne peut pas être modifié.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code><strong>GeneratorFunction.constructor</strong></code></dt> + <dd>La valeur initiale correspond à {{jsxref("GeneratorFunction")}}.</dd> + <dt><code><strong>GeneratorFunction.prototype.prototype</strong></code></dt> + <dd>La valeur est <code>%GeneratorPrototype%</code>.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generatorfunction.prototype', 'GeneratorFunction.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.GeneratorFunction.prototype")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Function")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/internalerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/internalerror/index.html new file mode 100644 index 0000000000..7d44d99002 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/internalerror/index.html @@ -0,0 +1,63 @@ +--- +title: InternalError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/InternalError/prototype +tags: + - Error + - InternalError + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/InternalError +translation_of_original: Web/JavaScript/Reference/Global_Objects/InternalError/prototype +--- +<div>{{JSRef}} {{non-standard_header}}</div> + +<p>La propriété <code><strong>InternalError.prototype</strong></code> représente le prototype du constructeur {{jsxref("InternalError")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("InternalError")}} héritent de {{jsxref("InternalError.prototype")}}. Ce prototype peut être utilisé pour ajouter des propriétés et/ou des méthodes à toutes les instances.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>InternalError.prototype.constructor</code></dt> + <dd>Définit la fonction qui permet de créer une instance du prototype.</dd> + <dt>{{jsxref("Error.prototype.message", "InternalError.prototype.message")}}</dt> + <dd>Un nom d'erreur. Bien que ECMA-262 spécifie que <code>InternalError</code> devrait fournir une propriété propre pour <code>message</code>. L'implémentation de<a href="/fr/docs/SpiderMonkey"> SpiderMonkey</a> fait que cette propriété est héritée via {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "InternalError.prototype.name")}}</dt> + <dd>Un nom d'erreur. Hérité via {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "InternalError.prototype.fileName")}}</dt> + <dd>Le chemin du fichier à l'origine de l'erreur. Héritée via {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "InternalError.prototype.lineNumber")}}</dt> + <dd>Le numéro de la ligne dans le fichier pour le code qui a déclenché l'erreur. Héritée via {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "InternalError.prototype.columnNumber")}}</dt> + <dd>Le numéro de la colonne dans la ligne du fichier pour le code qui a déclenché l'erreur. Héritée via {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "InternalError.prototype.stack")}}</dt> + <dd>Pile d'appels (stack trace). Héritée via {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p>Bien que l'objet prototype <code>InternalError</code> ne contienne aucune méthode qui lui soit propre, les instances de {{jsxref("InternalError")}} héritent de méthodes grâce à la chaîne de prototypes.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette propriété ne fait partie d'aucune spécification.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.InternalError")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/collator/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/collator/index.html new file mode 100644 index 0000000000..b523b88842 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/collator/index.html @@ -0,0 +1,81 @@ +--- +title: Intl.Collator.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Collator/prototype +tags: + - Collator + - Internationalisation + - Intl + - JavaScript + - Propriété + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Collator +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Collator/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Intl.Collator.prototype</strong></code> représente l'objet prototype du constructeur {{jsxref("Collator", "Intl.Collator")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Voir la page {{jsxref("Collator")}} pour une description appliquée aux instances de <code>Intl.Collator</code>.</p> + +<p>Les instances de <code>Intl.Collator</code> héritent de <code>Intl.Collator.prototype</code>. Les modifications apportées à l'objet prototype sont propagées sur toutes les instances de <code>Intl.Collator</code> via l'héritage (chaîne de prototypes).</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Intl.Collator.protoype.constructor</code></dt> + <dd>Une référence vers {{jsxref("Collator")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Collator.compare", "Intl.Collator.prototype.compare")}}</dt> + <dd>Un accesseur qui renvoie une fonction comparant deux chaînes de caractères, basée sur l'ordre de tri de l'objet {{jsxref("Objets_globaux/Collator", "Intl.Collator")}}.</dd> + <dt>{{jsxref("Collator.resolvedOptions", "Intl.Collator.prototype.resolvedOptions()")}}</dt> + <dd>Renvoie un nouvel objet dont les propriétés correspondent aux options de collation et de locales calculées lors de l'initialisation de l'objet.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-10.2.1', 'Intl.Collator.prototype')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Intl.Collator.prototype', 'Intl.Collator.prototype')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Intl.Collator.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Collator", "Intl.Collator")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html new file mode 100644 index 0000000000..39e6679295 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/datetimeformat/index.html @@ -0,0 +1,82 @@ +--- +title: Intl.DateTimeFormat.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/DateTimeFormat/prototype +tags: + - Internationalisation + - Intl + - JavaScript + - Propriété + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Intl.DateTimeFormat.prototype</strong></code> représente le prototype du constructeur {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Voir la page {{jsxref("DateTimeFormat")}} qui décrit les instances de <code>Intl.DateTimeFormat</code>.</p> + +<p>Les instances de {{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}} héritent de <code>Intl.DateTimeFormat.prototype</code>. Les modifications apportées à l'objet prototype sont propagées sur toutes les instances de <code>Intl.DateTimeFormat</code> par héritage.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Intl.DateTimeFormat.prototype.constructor</code></dt> + <dd>Une référence à <code>Intl.DateTimeFormat</code>.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("DateTimeFormat.format", "Intl.DateTimeFormat.prototype.format")}}</dt> + <dd>Un accesseur qui renvoie une fonction formattant une date selon les options de format et de locale spécifiées pour l'objet <code>DateTimeFormat</code>.</dd> + <dt>{{jsxref("DateTimeFormat.formatToParts","Intl.DateTimeFormat.prototype.formatToParts()")}}</dt> + <dd>Renvoie un tableau d'objets qui représentent les composants de la date sous forme de chaînes de caractères afin que celles-ci puissent être utilisée dans une mise en forme adaptée à la locale.</dd> + <dt>{{jsxref("DateTimeFormat.resolvedOptions", "Intl.DateTimeFormat.prototype.resolvedOptions()")}}</dt> + <dd>Renvoie un nouvel objet dont les propriétés indiquent les options de format et de locale calculées lors de l'initialisation de l'objet.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-12.2.1', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Intl.DateTimeFormat.prototype', 'Intl.DateTimeFormat.prototype')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Intl.DateTimeFormat.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("DateTimeFormat", "Intl.DateTimeFormat")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/listformat/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/listformat/index.html new file mode 100644 index 0000000000..1aab6a459d --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/listformat/index.html @@ -0,0 +1,63 @@ +--- +title: Intl.ListFormat.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/ListFormat/prototype +tags: + - Experimental + - Intl + - Intl.ListFormat + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/ListFormat/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <strong><code>Intl.ListFormat.prototype</code></strong> représente l'objet prototype utilisé par le constructeur {{jsxref("ListFormat", "Intl.ListFormat")}}.</p> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Description">Description</h2> + +<p>Voir la page {{jsxref("ListFormat")}} pour une description des instances de <code>Intl.ListFormat</code>.</p> + +<p>Les instances {{jsxref("ListFormat", "Intl.ListFormat")}} héritent de <code>Intl.ListFormat.prototype</code>. Les modifications apportées au prototypes seront héritées par les instances {{jsxref("ListFormat", "Intl.ListFormat")}}.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Intl.<font face="consolas, Liberation Mono, courier, monospace">ListFormat</font>.prototype.constructor</code></dt> + <dd>Une référence à {{jsxref("ListFormat", "Intl.ListFormat()")}}.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.github.io/proposal-intl-list-format/#sec-Intl.ListFormat.prototype">Proposition pour <code>Intl.ListFormat.prototype</code></a></td> + <td>Proposition de niveau 3</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Intl.ListFormat.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("ListFormat", "Intl.ListFormat")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/locale/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/locale/index.html new file mode 100644 index 0000000000..cc22f45a17 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/locale/index.html @@ -0,0 +1,91 @@ +--- +title: Intl.Locale.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/Locale/prototype +tags: + - Internationalisation + - Intl + - JavaScript + - Locale + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/Locale +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/Locale/prototype +--- +<p>{{JSRef}}</p> + +<p><span class="seoSummary">La propriété <strong><code>Intl.Locale.prototype</code></strong> représente le prototype pour le constructeur {{jsxref("Locale", "Intl.Locale")}}.</span></p> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Description">Description</h2> + +<p>Voir la page {{jsxref("Locale")}} pour en savoir plus sur les instances <code>Intl.Locale</code>.</p> + +<p>Les instances de {{jsxref("Locale", "Intl.Locale")}} héritent de <code>Intl.Locale.prototype</code>. Les modifications apportées au prototype sont héritées par l'ensemble des instances {{jsxref("Locale", "Intl.Locale")}}.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>{{jsxref("Locale/baseName", "Intl.Locale.prototype.baseName")}}</code></dt> + <dd>Renvoie un extrait de la chaîne de caractères représentant l'objet <code>Locale</code>. Cet extrait contient les informations essentielles à propos de l'objet <code>Locale</code>.</dd> + <dt><code>{{jsxref("Locale/calendar", "Intl.Locale.prototype.calendar")}}</code></dt> + <dd>Renvoie le type de calendrier utilisé par l'instance de <code>Locale</code>.</dd> + <dt><code>{{jsxref("Locale/collation", "Intl.Locale.prototype.collation")}}</code></dt> + <dd>Renvoie le <a href="https://www.unicode.org/reports/tr35/tr35-collation.html#CLDR_Collation">type de collation</a> pour l'instance de <code>Locale</code> courante. La collation est la méthode qui permet d'ordonner des chaînes de caractères en fonction des règles de la locale.</dd> + <dt><code>{{jsxref("Locale/hourCycle", "Intl.Locale.prototype.hourCycle")}}</code></dt> + <dd>Renvoie la convention pour le format des heures utilisée par la locale courante.</dd> + <dt><code>{{jsxref("Locale/caseFirst", "Intl.Locale.prototype.caseFirst")}}</code></dt> + <dd>Renvoie si la casse est prise en compte par la locale pour ses règles de collation (celles qui permettent d'ordonner des chaînes de caractères entre elles).</dd> + <dt><code>{{jsxref("Locale/numeric", "Intl.Locale.prototype.numeric")}}</code></dt> + <dd>Indique si la locale possède une collation spécifique pour les caractères numériques (la collation étant la méthode qui permet d'ordonner des chaînes de caractères entre elles).</dd> + <dt><code>{{jsxref("Locale/numberingSystem", "Intl.Locale.prototype.numberingSystem")}}</code></dt> + <dd>Renvoie le <a href="https://en.wikipedia.org/wiki/Numeral_system">système de numération</a> utilisée par la locale.</dd> + <dt><code>{{jsxref("Locale/language", "Intl.Locale.prototype.language")}}</code></dt> + <dd>Renvoie la langue associée à la locale.</dd> + <dt><code>{{jsxref("Locale/script", "Intl.Locale.prototype.script")}}</code></dt> + <dd>Renvoie le script utilisé pour l'écriture d'une langue donnée pour la locale courante.</dd> + <dt><code>{{jsxref("Locale/region", "Intl.Locale.prototype.region")}}</code></dt> + <dd>Renvoie la région du monde (il s'agit généralement d'un pays) associée à la locale courante.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt><code>{{jsxref("Locale/minimize", "Intl.Locale.prototype.minimize()")}}</code></dt> + <dd>Cette méthode tente de retirer les informations qui auraient pu être ajoutée à une locale lors d'un appel à {{jsxref("Locale/maximize", "Locale.maximize()")}}.</dd> + <dt><code>{{jsxref("Locale/maximize", "Intl.Locale.prototype.maximize()")}}</code></dt> + <dd>Cette méthode permet d'obtenir les valeurs les plus vraisemblantes pour la langue, le script et la région de la locale en fonction des valeurs existantes.</dd> + <dt><code>{{jsxref("Locale/toString", "Intl.Locale.prototype.toString()")}}</code></dt> + <dd>Cette méthode renvoie <a href="https://www.unicode.org/reports/tr35/#Unicode_locale_identifier">l'identifiant de locale complet</a> pour la locale courante.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.github.io/proposal-intl-locale/#sec-Intl.Locale.prototype">Proposition pour <code>Intl.Locale.prototype</code></a></td> + <td>Proposition de niveau 3</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Intl.Locale.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Locale", "Intl.Locale")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html new file mode 100644 index 0000000000..7627a01670 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/numberformat/index.html @@ -0,0 +1,83 @@ +--- +title: Intl.NumberFormat.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/NumberFormat/prototype +tags: + - Internationalisation + - Intl + - JavaScript + - NumberFormat + - Propriété + - Prototype + - Reference + - i18n +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Intl.NumberFormat.prototype</strong></code> représente l'objet prototype pour le constructeur {{jsxref("NumberFormat", "Intl.NumberFormat")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Voir la page {{jsxref("NumberFormat", "Intl.NumberFormat")}} pour une description des instances de <code>Intl.NumberFormat</code>.</p> + +<p>Les instances de <code>Intl.NumberFormat</code> héritent de <code>Intl.NumberFormat.prototype</code>. Les modifications apportées à l'objet prototype seront propagées par héritage aux instances <code>Intl.NumberFormat</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Intl.NumberFormat.prototype.constructor</code></dt> + <dd>Une référence à <code>Intl.NumberFormat</code>.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("NumberFormat.format", "Intl.NumberFormat.prototype.format")}}</dt> + <dd>Un accesseur qui renvoie une fonction permettant de formater un nombre en fonction des options de locale et de format définies dans un objet <code>NumberFormat</code>.</dd> + <dt>{{jsxref("NumberFormat.formatToParts", "Intl.NumberFormat.prototype.formatToParts()")}}</dt> + <dd>Cette méthode renvoie un tableau ({{jsxref("Array")}}) d'objets qui représentent les fragments de la chaîne de caractères correspondant au nombre afin de l'utiliser pour des mises en formes prenant en compte la locale de l'utilisateur.</dd> + <dt>{{jsxref("NumberFormat.resolvedOptions", "Intl.NumberFormat.prototype.resolvedOptions()")}}</dt> + <dd>Cette méthode renvoie un nouvel objet dont les propriétés correspondent aux options de locale et de collation calculées lors de l'initialisation de l'objet.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES Int 1.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int 1.0')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES Int 2.0', '#sec-11.2.1', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int 2.0')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES Int Draft', '#sec-Intl.NumberFormat.prototype', 'Intl.NumberFormat.prototype')}}</td> + <td>{{Spec2('ES Int Draft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Intl.NumberFormat.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("NumberFormat", "Intl.NumberFormat")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/pluralrules/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/pluralrules/index.html new file mode 100644 index 0000000000..6674890eb1 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/pluralrules/index.html @@ -0,0 +1,71 @@ +--- +title: Intl.PluralRules.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/PluralRules/prototype +tags: + - Internationalisation + - Intl + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/PluralRules/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <strong><code>Intl.PluralRules.prototype</code></strong> représente le prototype du constructeur {{jsxref("PluralRules", "Intl.PluralRules")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Voir {{jsxref("PluralRules")}} pour la description des instances <code>Intl.PluralRules</code>.</p> + +<p>Les instances de {{jsxref("PluralRules", "Intl.PluralRules")}} héritent de <code>Intl.PluralRules.prototype</code>. Les modifications apportées au prototype seront héritées par l'ensemble des instances de {{jsxref("PluralRules", "Intl.PluralRules")}}.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Intl.PluralRules.prototype.constructor</code></dt> + <dd>Une référence à <code>Intl.PluralRules</code>.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("PluralRules.resolvedOptions", "Intl.PluralRules.prototype.resolvedOptions()")}}</dt> + <dd>Cette méthode renvoie un nouvelle objet dont les propriétés reflètent la locale et les options de collations calculées lors de l'initialisation de l'objet.</dd> + <dt>{{jsxref("PluralRules.select", "Intl.PluralRules.prototype.select()")}}</dt> + <dd>Cette méthode renvoie une chaîne de caractères ({{jsxref("String")}}) qui indique quelle forme de règle de nombre est utilisée pour le formatage.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td><a href="https://rawgit.com/caridy/intl-plural-rules-spec/master/index.html">Brouillon pour les règles de nombre avec <code>Intl</code></a></td> + <td>Brouillon</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Intl.PluralRules.prototype")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("PluralRules", "Intl.PluralRules")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/intl/relativetimeformat/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/intl/relativetimeformat/index.html new file mode 100644 index 0000000000..9e212403c3 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/intl/relativetimeformat/index.html @@ -0,0 +1,73 @@ +--- +title: Intl.RelativeTimeFormat.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Intl/RelativeTimeFormat/prototype +tags: + - Internationalisation + - Intl + - JavaScript + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat +translation_of_original: Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <strong><code>Intl.RelativeTimeFormat.prototype</code></strong> représente l'objet prototype utilisé par le constructeur {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}.</p> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Description">Description</h2> + +<p>Voir {{jsxref("RelativeTimeFormat")}} pour une description des instances <code>Intl.RelativeTimeFormat</code>.</p> + +<p>Les instances {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}} héritent de <code>Intl.RelativeTimeFormat.prototype</code>. Les modifications apportées au prototype seront héritées par l'ensemble des instances {{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Intl.<font face="consolas, Liberation Mono, courier, monospace">RelativeTimeFormat</font>.prototype.constructor</code></dt> + <dd>Une référence à <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl.RelativeTimeFormat" title="The Intl.DateTimeFormat object is a constructor for objects that enable language-sensitive date and time formatting."><code>Intl.RelativeTimeFormat</code></a>.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("RelativeTimeFormat.format", "Intl.RelativeTimeFormat.prototype.format()")}}</dt> + <dd>Une méthode qui formate une valeur, accompagnée d'une unité selon des options de locales et de formatage stockées dans l'objet <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl.RelativeTimeFormat" title="The Intl.DateTimeFormat object is a constructor for objects that enable language-sensitive date and time formatting."><code>Intl.RelativeTimeFormat</code></a>.</dd> + <dt>{{jsxref("RelativeTimeFormat.formatToParts", "Intl.RelativeTimeFormat.prototype.formatToParts()")}}</dt> + <dd>Une méthode qui formate une valeur comme la méthode <code>format()</code> mais qui renvoie un tableau ({{jsxref("Array")}}) contenant les différentes parties de la valeur formatée.</dd> + <dt>{{jsxref("RelativeTimeFormat.resolvedOptions", "Intl.RelativeTimeFormat.prototype.resolvedOptions()")}}</dt> + <dd>Une méthode qui renvoie un objet dont les propriétés indique les options de locale et de formatage calculées lors de l'initialisation du formateur.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="https://tc39.github.io/proposal-intl-relative-time/#sec-Intl.RelativeTimeFormat.prototype">Proposition pour <code>Intl.RelativeTime</code></a></td> + <td>Proposition de niveau 3</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Intl.RelativeTimeFormat.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/json/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/json/index.html new file mode 100644 index 0000000000..a70dfee208 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/json/index.html @@ -0,0 +1,100 @@ +--- +title: Utiliser le JSON natif +slug: Web/JavaScript/Guide/Utiliser_le_JSON_natif +tags: + - Add-ons + - Advanced + - ECMAScript5 + - Extensions + - JSON + - JavaScript +translation_of: Web/JavaScript/Reference/Global_Objects/JSON +translation_of_original: Web/JavaScript/Guide/Using_native_JSON +--- +<p>{{jsSidebar("JavaScript Guide")}}</p> + +<p>Cet article aborde l'objet JSON natif conforme à ECMAScript 5 qui a été ajouté à Gecko 1.9.1. Pour consulter les informations de base sur l'utilisation de JSON dans les versions précédentes de Firefox, consulter la page <a class="internal" href="/fr/docs/JSON" title="En/JSON">JSON</a>.</p> + +<p>L'objet natif JSON possède deux méthodes clés. La méthode <code>JSON.parse()</code> qui analyse une chaîne de caractères JSON et qui reconstruit l'objet JavaScript original. La méthode <code>JSON.stringify()</code>, quant à elle, accepte un objet JavaScript et renvoie son équivalent JSON.</p> + +<div class="note"><strong>Note :</strong> JSON ne supporte pas les structures cycliques. Toute tentative de conversion d'une telle structure renverra une exception <code>TypeError</code>.</div> + +<h2 id="Analyser_(parser)_les_chaînes_JSON">Analyser (<em>parser</em>) les chaînes JSON</h2> + +<p>Afin de convertir une chaîne JSON en un objet JavaScript, il suffit de passer une chaîne JSON à la méthode <code>JSON.parse()</code> :</p> + +<pre>var objetJS = JSON.parse(chaineJSON);</pre> + +<div class="note"> +<p>À partir de JavaScript 1.8.5 (Firefox 4), <code>JSON.parse()</code> n'accepte pas les virgules en fin de chaîne</p> +</div> + +<pre>// ces deux instructions renverront une exception<code> SyntaxError</code> +// à partir de JavaScript 1.8.5 +var objetJS = JSON.parse("[1, 2, 3, 4, ]"); +var objetJS = JSON.parse("{ \"toto\" : 1, }"); +</pre> + +<h2 id="Convertir_les_objets_en_JSON">Convertir les objets en JSON</h2> + +<p>Afin de convertir un objet JavaScript en une chaîne JSON, il suffit de passer l'objet à la méthode <code>JSON.stringify()</code> :</p> + +<pre class="brush: js">var toto = {}; +toto.truc = "nouvelle propriété"; +toto.machin = 3; + +var chaineJSON = JSON.stringify(toto); +</pre> + +<p><code>chaineJSON</code> contient désormais <code>'{"truc":"nouvelle propriété","machin":3}'</code>.</p> + +<p>Depuis Firefox 3.5.4, <code>JSON.stringify()</code> permet d'adapter la conversion grâce à des paramètres optionnels. La syntaxe est la suivante :</p> + +<p><code>chaineJSON = JSON.stringify(<em>valeur</em> [, <em>remplacement</em> [, <em>espace</em>]])</code>remplacement</p> + +<dl> + <dt><code>valeur</code></dt> + <dd>L'objet JavaScript à convertir en une chaîne JSON.</dd> + <dt><code>remplacement</code></dt> + <dd>Une fonction qui modifie le comportement de la conversion ou bien un tableau d<code>'objets </code><a href="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String" title="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String"><code>String</code></a> et <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number"><code>Number</code></a> qui sera utilisé comme une liste de propriétés de l'objet <code>valeur</code> à inclure dans la chaîne JSON. Si cette valeur est nulle ou n'est pas fournie, toutes les propriétés de l'objet seront inclues dans la chaîne résultante.</dd> + <dt><code>espace</code></dt> + <dd>Un objet <code><a href="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String"><code>String</code></a></code> ou <a href="/fr/docs/JavaScript/Référence_JavaScript/Objets_globaux/Number" title="/fr/docs/JavaScript/Référence_JavaScript/Objets_globaux/Number"><code>Number</code></a> utilisé pour insérer des espaces dans la chaîne JSON afin qu'elle soit plus lisible. Si c'est un objet <code>Number</code>, il indique le nombre d'espaces à insérer. Ce nombre est limité à 10. Les valeurs inférieures à 1 indiquent qu'aucun espace ne sera utilisé, les valeurs supérieures à 10 seront ramenées à 10. Si cet objet est une <code>String</code>, la chaîne de caractères (ou les 10 premiers caractères si la chaîne est plus longue) à utiliser comme blanc. Si ce paramètre n'est pas fourni (ou vaut <code>null</code>), aucun blanc ne sera utilisé.</dd> +</dl> + +<h3 id="Le_paramètre_de_remplacement">Le paramètre de remplacement</h3> + +<p>La paramètre <code>remplacement</code> peut être une fonction ou un tableau. Si c'est une fonction, elle prendra deux paramètres : la clé et la valeur à être convertie en chaîne de caractères. L'objet pour lequel la clé a été trouvée sera fourni comme paramètre <code>this</code> de la fonction de remplacement. Initialement elle est appelée avec une clé vide représentant l'objet à transformer en chaîne et est ensuite appelé pour chacune des propriétés de l'objet ou du tableau à convertir. Elle doit renvoyer la valeur à ajouter à la chaîne de caractère JSON comme suit :</p> + +<ul> + <li>Si on renvoie un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number" title="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number"><code>Number</code></a>, la chaîne correspondante à ce nombre est utilisée pour la valeur de la propriété de à ajouter à la chaîne JSON.</li> + <li>Si on renvoie une <a href="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String" title="/fr/docs/JavaScript/Guide/Objets_élémentaires_JavaScript#L'objet_String"><code>String</code></a>, cette chaîne est utilisée comme la valeur de la propriété à ajouter à la chaîne JSON.</li> + <li>Si on renvoie un <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Boolean"><code>Boolean</code></a>, "true" ou "false" est utilisé comme la valeur de la propriété à ajouter à la chaîne JSON.</li> + <li>Si on renvoie n'importe quel autre objet, il est alors transformé en chaîne JSON de façon récursive en appelant la même fonction de remplacement sur chacune de ses propriétés sauf si l'objet est une fonction, auquel cas on n'ajoute rien à la chaîne JSON.</li> + <li>Si la valeur de retour est <code>undefined</code>, la propriété n'est pas incluse dans la chaîne résultante.</li> +</ul> + +<div class="note"><strong>Note :</strong> Il est impossible d'utiliser la fonction de remplacement pour retirer des valeurs d'un tableau. Si la valeur <code>undefined</code> ou une fonction est renvoyée : <code>null</code> sera renvoyé.</div> + +<h4 id="Exemple">Exemple</h4> + +<pre class="brush: js">function censure(key, value) { + if (typeof value === "string") { + return undefined; + } + return value; +} + +var toto = {fondation: "Mozilla", modèle: "box", semaine: 45, transport: "voiture", mois: 7}; +var chaineJSON = JSON.stringify(toto, censure); +</pre> + +<p>La chaîne JSON produite sera <code>{"semaine":45,"mois":7}</code>.</p> + +<p>Si <code>remplacement</code> est un tableau, les valeurs du tableau indiquent les noms des propriétés de l'objet à inclure dans la chaîne JSON.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a class="internal" href="/fr/docs/Web/JavaScript/New_in_JavaScript/Support_ECMAScript_5_par_Mozilla">Support d'ECMAScript 5 par Mozilla</a></li> + <li><a class="internal" href="/fr/docs/JSON" title="/fr/docs/JSON">JSON</a></li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/map/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/map/index.html new file mode 100644 index 0000000000..48a00f9135 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/map/index.html @@ -0,0 +1,89 @@ +--- +title: Map.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Map/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Map + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Map +translation_of_original: Web/JavaScript/Reference/Global_Objects/Map/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <strong><code>Map.prototype</code></strong> représente le prototype du constructeur {{jsxref("Map")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Les instances de {{jsxref("Map")}} héritent de {{jsxref("Map.prototype")}}. Le prototype du constructeur permet d'ajouter des propriétés ou des méthodes à toutes les instances de <code>Map</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Map.prototype.constructor</code></dt> + <dd>Renvoie la fonction qui a créé l'instance du prototype. Par défaut, ce sera la fonction {{jsxref("Map")}}.</dd> + <dt>{{jsxref("Map.prototype.size")}}</dt> + <dd>Renvoie le nombre de paires de clé-valeur contenues dans l'objet <code>Map</code>.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Map.prototype.clear()")}}</dt> + <dd>Supprime toutes les paires de clé-valeur de l'objet <code>Map</code>.</dd> + <dt>{{jsxref("Map.delete", "Map.prototype.delete(clé)")}}</dt> + <dd>Renvoie <code>true</code> si un élément contenu dans l'objet <code>Map</code> existait avec cette clé et a été retiré. Si aucun élément n'existe dans l'objet <code>Map</code> avec cette clé, c'est <code>false</code> qui est renvoyé. <code>Map.prototype.has(clé)</code> renverra <code>false</code> après l'exécution de cette méthode.</dd> + <dt>{{jsxref("Map.prototype.entries()")}}</dt> + <dd>Renvoie un nouvel objet <a href="/fr/docs/Web/JavaScript/Guide/Le_protocole_iterator">Iterator</a> qui contient un tableau de<strong> <code>[clé, valeur]</code></strong> pour chacun des éléments de l'objet <code>Map</code>, dans leur ordre d'insertion.</dd> + <dt>{{jsxref("Map.forEach", "Map.prototype.forEach(callbackFn[, thisArg])")}}</dt> + <dd>Appelle la fonction <code>callbackFn</code> pour chaque paire clé-valeur de l'objet <code>Map</code> dans leur ordre d'insertion. Si un paramètre <code>thisArg</code> est fourni, il sera utilisé comme valeur pour <code>this</code> pour chaque appel de la fonction de retour (callback).</dd> + <dt>{{jsxref("Map.get", "Map.prototype.get(clé)")}}</dt> + <dd>Renvoie la valeur associée à la clé et <code>undefined</code> s'il n'y en a pas.</dd> + <dt>{{jsxref("Map.has", "Map.prototype.has(clé)")}}</dt> + <dd>Renvoie un booléen indiquant si une valeur associée à cette clé a été trouvée dans l'objet <code>Map</code>.</dd> + <dt>{{jsxref("Map.prototype.keys()")}}</dt> + <dd>Renvoie un nouvel objet <code>Iterator</code> contenant les <strong>clés</strong> de chaque élément de l'objet <code>Map</code> dans leur ordre d'insertion.</dd> + <dt>{{jsxref("Map.set", "Map.prototype.set(clé, valeur)")}}</dt> + <dd>Définit la valeur d'un clé pour l'objet <code>Map</code>. Renvoie <code>undefined</code>.</dd> + <dt>{{jsxref("Map.prototype.values()")}}</dt> + <dd>Renvoie un nouvel objet <code>Iterator</code> contenant les <strong>valeurs</strong> de chaque élément de l'objet <code>Map</code> dans leur ordre d'insertion.</dd> + <dt>{{jsxref("Map.@@iterator", "Map.prototype[@@iterator]()")}}</dt> + <dd>Renvoie une nouvel objet <code>Iterator</code> qui contient <strong>un tableau de <code>[clé, valeur]</code></strong> pour chaque élément de l'objet <code>Map</code> dans leur ordre d'insertion.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-map.prototype', 'Map.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Map.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/number/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/number/index.html new file mode 100644 index 0000000000..0cb02e939e --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/number/index.html @@ -0,0 +1,91 @@ +--- +title: Number.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Number/prototype +tags: + - JavaScript + - Number + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Number +translation_of_original: Web/JavaScript/Reference/Global_Objects/Number/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <strong><code>Number.prototype</code></strong> représente le prototype du constructeur {{jsxref("Number")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Les instances de {{jsxref("Number")}} héritent de <code>Number.prototype</code>. On peut modifier l'objet prototype du constructeur {{jsxref("Number")}} afin que la modification affecte chacune des instances de <code>Number</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Number.prototype.constructor</code></dt> + <dd>Renvoie la fonction qui a créé l'instance de cette objet. Par défaut, ce sera l'objet {{jsxref("Number")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Number.prototype.toExponential()")}}</dt> + <dd>Renvoie une chaîne de caractères qui représente le nombre en notation exponentielle.</dd> + <dt>{{jsxref("Number.prototype.toFixed()")}}</dt> + <dd>Renvoie une chaîne de caractères qui représente le nombre en représentation à point fixe.</dd> + <dt>{{jsxref("Number.prototype.toLocaleString()")}}</dt> + <dd>Renvoie une chaîne de caractères qui représente le nombre en tenant compte de la locale. Surcharge la méthode {{jsxref("Object.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("Number.prototype.toPrecision()")}}</dt> + <dd>Renvoie une chaîne de caractères représentant le nombre en représentation à point fixe, selon une précision donnée ou en notation exponentielle.</dd> + <dt>{{jsxref("Number.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> + <dd>Renvoie un litéral objet représentant l'objet <code>Number</code> fourni. On peut utiliser cette valeur afin de créer un nouvel objet. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Number.prototype.toString()")}}</dt> + <dd>Renvoie une chaîne de caractères qui représente l'objet fourni selon une base donnée. Surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Number.prototype.valueOf()")}}</dt> + <dd>Renvoie une valeur primitive de l'objet fourni. Surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.1.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.7.4', 'Number')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-number-prototype-object', 'Number')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Number.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Number")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/object/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..6eb405ace4 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,176 @@ +--- +title: Object.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Object/prototype +tags: + - JavaScript + - Object + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Object +translation_of_original: Web/JavaScript/Reference/Global_Objects/Object/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Object.prototype</strong></code> représente le prototype de {{jsxref("Object")}}.</p> + +<p>{{js_property_attributes(0, 0, 0)}}</p> + +<h2 id="Description">Description</h2> + +<p>La quasi-totalité des objets JavaScript descendent de {{jsxref("Object")}} ; un objet classique héritera donc des méthodes et propriétés de <code>Object.prototype</code>. Comme pour toutes les propriétés héritées, il est possible de surcharger ces propriétés. Par exemple, d'autres prototypes de constructeurs surchargent la propriété <code>constructor</code> et fournissent leur propre méthode {{jsxref("Object.prototype.toString()", "toString()")}}.</p> + +<p>Cependant, on peut volontairement créer des objets qui ne descendent pas de {{jsxref("Object")}} (par exemple avec {{jsxref("Object.create", "Object.create(null)")}}) ou les modifier afin que ce ne soit plus le cas (par exemple avec la méthode {{jsxref("Object.setPrototypeOf()")}}).</p> + +<p>Les modifications apportées aux propriétés du prototype d'<code>Object</code> impactent donc tous ces objets via la chaîne de prototypes, sauf si ces propriétés sont surchargées. Ce puissant mécanisme permet ainsi de modifier le comportement des objets ou d'y ajouter des fonctionnalités.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>{{jsxref("Object.prototype.constructor")}}</dt> + <dd>Définit la fonction qui a créé le prototype d'un objet.</dd> + <dt>{{jsxref("Object.prototype.proto","Object.prototype.__proto__")}} {{non-standard_inline}}</dt> + <dd>Pointe vers l'objet qui a été utilisé comme prototype lors de l'instanciation de l'objet.</dd> + <dt>{{jsxref("Object.prototype.noSuchMethod","Object.prototype.__noSuchMethod__")}} {{non-standard_inline}}</dt> + <dd>Permet de définir une fonction qui sera exécutée lors d'une tentative d'accès à une méthode non-définie pour l'objet.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.count","Object.prototype.__count__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">UTilisée pour renvoyer le nombre de propriétés énumérables sur un objet défini par l'utilisateur. Cette propriété a été retirée.</s></dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.parent","Object.prototype.__parent__")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Utilisée pour faire référence au contexte de l'objet. Cette propriété a été retirée.</s></dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Object.prototype.defineGetter","Object.prototype.__defineGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Associe une fonction à une propriété qui, lorsqu'on y accède, exécute la fonction et renvoie la valeur de retour.</dd> + <dt>{{jsxref("Object.prototype.defineSetter","Object.prototype.__defineSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Associe une fonction à une propriété qui, lorsqu'on la définit, exécute la fonction qui modifie la propriété.</dd> + <dt>{{jsxref("Object.prototype.lookupGetter","Object.prototype.__lookupGetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Renvoie la fonction associée à la propriété définie par la méthode {{jsxref("Object.defineGetter", "__defineGetter__")}}.</dd> + <dt>{{jsxref("Object.prototype.lookupSetter()","Object.prototype.__lookupSetter__()")}} {{non-standard_inline}} {{deprecated_inline}}</dt> + <dd>Renvoie la fonction associée avec la propriété définie par la méthode {{jsxref("Object.defineSetter", "__defineSetter__")}}.</dd> + <dt>{{jsxref("Object.prototype.hasOwnProperty()")}}</dt> + <dd>Renvoie un booléen qui indique si l'objet contient la propriété donnée comme une propriété propre (non héritée via la chaîne de prototypes).</dd> + <dt>{{jsxref("Object.prototype.isPrototypeOf()")}}</dt> + <dd>Renvoie un booléen qui indique si l'objet courant fait partie de la chaîne de prototype de l'objet passé en argument.</dd> + <dt>{{jsxref("Object.prototype.propertyIsEnumerable()")}}</dt> + <dd>Renvoie un booléen qui indique si l'<a href="/fr/docs/Web/JavaScript/Structures_de_données#Propriétés">attribut ECMAScript interne [[Enumerable]]</a> est défini.</dd> + <dt>{{jsxref("Object.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Renvoie une chaîne de caractères qui est un littéral objet représentant l'objet pour lequel la méthode a été appelée. La valeur de retour peut être utilisée pour créer un nouvel objet.</dd> + <dt>{{jsxref("Object.prototype.toLocaleString()")}}</dt> + <dd>Appelle la méthode {{jsxref("Object.toString", "toString()")}}.</dd> + <dt>{{jsxref("Object.prototype.toString()")}}</dt> + <dd>Renvoie une chaîne de caractères représentant l'objet.</dd> + <dt>{{jsxref("Object.prototype.unwatch()")}} {{non-standard_inline}}</dt> + <dd>Supprime un point d'arrêt conditionnel placé sur une propriété de l'objet.</dd> + <dt>{{jsxref("Object.prototype.valueOf()")}}</dt> + <dd>Renvoie la valeur primitive de l'objet.</dd> + <dt>{{jsxref("Object.prototype.watch()")}} {{non-standard_inline}}</dt> + <dd>Ajoute un point d'arrêt conditionnel sur une propriété de l'objet.</dd> + <dt><s class="obsoleteElement">{{jsxref("Object.prototype.eval()")}} {{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Utilisée pour évaluer une chaîne de caractères étant du code JavaScript dans le contexte de l'objet. Cette méthode a été retirée.</s></dd> +</dl> + +<h2 id="Exemples">Exemples</h2> + +<p>Javascript se base sur un modèle prototypal et non pas classique (au sens « modèle à base de classes »). Le prototype d'un objet est utilisé pour fournir de façon dynamique des propriétés aux objets qui héritent du prototype.</p> + +<p>Par exemple :</p> + +<pre class="brush: js">var Personne = function(nom) { + this.name = nom; + this.peutParler = true; + this.salutation = function() { + if (this.peutParler) { + console.log('Bonjour, je suis ' + this.nom); + } + }; +}; + +var Employe = function(nom, titre) { + this.nom = nom; + this.titre = titre; + this.salutation = function() { + if (this.peutParler) { + console.log("Bonjour, je suis " + this.nom + ", le " + this.titre); + } + }; +}; +Employe.prototype = new Personne(); + +var Client = function(nom) { + this.nom = nom; +}; +Client.prototype = new Personne(); + +var Mime = function(nom) { + this.nom = nom; + this.peutParler = false; +}; +Mime.prototype = new Personne(); + +var bob = new Employe('Bob', 'bricoleur'); +var joe = new Client('Joe'); +var rg = new Employe('Red Green', 'réparateur'); +var mike = new Client('Mike'); +var mime = new Mime('Mime'); +bob.salutation(); +// Bonjour, je suis Bob, le bricoleur + +joe.salutation(); +// Bonjour, je suis Joe + +rg.salutation(); +// Bonjour, je suis Red Green, le réparateur + +mike.salutation(); +// Bonjour, je suis Mike + +mime.salutation(); +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2.3.1', 'Object.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object.prototype', 'Object.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.Object.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Introduction_à_JavaScript_orienté_objet">Introduction à JavaScript orienté objet</a></li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/object/tosource/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/object/tosource/index.html new file mode 100644 index 0000000000..cbd68198f6 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/object/tosource/index.html @@ -0,0 +1,26 @@ +--- +title: toSource +slug: toSource +tags: + - Désambiguation +translation_of: Web/JavaScript/Reference/Global_Objects/Object/toSource +translation_of_original: toSource +--- +<div class="noinclude"><strong>toSource</strong> est une méthode de différents objets JavaScript :</div> + +<ul> + <li><a href="/fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Array/toSource" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Array/toSource">toSource</a> — méthode de l'objet Array.</li> + <li><a href="/fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Boolean/toSource" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Boolean/toSource">toSource</a> — méthode de l'objet Boolean.</li> + <li><a href="/fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Date/toSource" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Date/toSource">toSource</a> — méthode de l'objet Date.</li> + <li><a href="/fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Function/toSource" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Function/toSource">toSource</a> — méthode de l'objet Function.</li> + <li><a href="/fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Number/toSource" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Number/toSource">toSource</a> — méthode de l'objet Number.</li> + <li><a href="/fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Object/toSource" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/Object/toSource">toSource</a> — méthode de l'objet Object.</li> + <li><a href="/fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/RegExp/toSource" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/RegExp/toSource">toSource</a> — méthode de l'objet RegExp.</li> + <li><a href="/fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/String/toSource" title="fr/Référence_de_JavaScript_1.5_Core/Objets_globaux/String/toSource">toSource</a> — méthode de l'objet String.</li> +</ul> + +<div class="noinclude"><div class="disambig" id="disambig"><p><i>Ceci est une page de <a href="https://developer.mozilla.org/fr/docs/Project:D%c3%a9sambiguation">désambiguation</a> — une aide à la navigation qui liste une série de pages qui devraient partager le même titre. Si un lien provenant d'un article mène ici, n'hésitez pas à revenir à celui-ci pour le faire pointer vers la page concernée.</i></p></div></div> + +<div class="noinclude"> +<p>{{ languages( { "en": "en/ToSource" } ) }}</p> +</div> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/promise/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..9a6146375f --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,73 @@ +--- +title: Promise.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Promise/prototype +tags: + - JavaScript + - Promise + - Propriété + - Prototype + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +translation_of_original: Web/JavaScript/Reference/Global_Objects/Promise/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Promise.prototype</strong></code> représente le prototype pour le constructeur {{jsxref("Promise")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Les instances de {{jsxref("Promise")}} héritent de {{jsxref("Promise.prototype")}}. On peut utiliser le prototype du constructeur afin d'ajouter des propriétés et/ou des méthodes à chacune des instances de <code>Promise</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Promise.prototype.constructor</code></dt> + <dd>Renvoie la fonction qui a créé le prototype d'une instance. Ce sera la fonction {{jsxref("Promise")}} par défaut.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Promise.prototype.catch()")}}</dt> + <dd>Ajoute une fonction <em>callback</em> à utiliser en cas de rejet de la promesse. Elle renvoie une nouvelle promesse qui est résolue avec la valeur de retour du callback s'il est appelé ou avec la valeur de résolution initiale si la promesse est tenue (et non rejetée).</dd> + <dt>{{jsxref("Promise.prototype.then()")}}</dt> + <dd>Ajoute des fonctions à utiliser en cas de résolution ou de rejet de la promesse et renvoie une nouvelle promesse qui est résolue avec la valeur de retour de la fonction utilisée en fonction de la résolution ou non.</dd> + <dt>{{jsxref("Promise.prototype.finally()")}}</dt> + <dd>Ajoute une fonction à la promesse et renvoie une nouvelle promesse qui est résolue lorsque la promesse originale est résolue. La fonction ajoutée est appelée lorsque la promesse est résolue, qu'elle soit tenue ou rejetée.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise.prototype', 'Promise.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Pour contribuer à ces données de compatibilité, vous pouvez envoyer une poule requête sur : <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Promise")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/rangeerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/rangeerror/index.html new file mode 100644 index 0000000000..1af96393bc --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/rangeerror/index.html @@ -0,0 +1,92 @@ +--- +title: RangeError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/RangeError/prototype +tags: + - Error + - JavaScript + - Propriété + - Prototype + - RangeError + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/RangeError +translation_of_original: Web/JavaScript/Reference/Global_Objects/RangeError/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>RangeError.prototype</strong></code> représente le prototype du constructeur {{jsxref("RangeError")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Chacune des instances de {{jsxref("RangeError")}} hérite de <code>RangeError.prototype</code>. Le prototype peut être utilisé afin d'ajouter des propriétés et/ou des méthodes à toutes les instances.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>RangeError.prototype.constructor</code></dt> + <dd>Définit la fonction qui a créé le prototype de l'instance.</dd> + <dt>{{jsxref("Error.prototype.message", "RangeError.prototype.message")}}</dt> + <dd>Le nom de l'erreur. Bien que ECMA-262 spécifie que {{jsxref("RangeError")}} devrait fournir sa propre propriété <code>message</code>, dans <a href="/fr/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a>, il l'hérite depuis {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "RangeError.prototype.name")}}</dt> + <dd>Le nom de l'erreur, hérité depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "RangeError.prototype.fileName")}}</dt> + <dd>Le chemin vers le fichier qui a causé l'erreur, hérité depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "RangeError.prototype.lineNumber")}}</dt> + <dd>Le numéro de la ligne de code dans le fichier qui a causé l'erreur, hérité depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "RangeError.prototype.columnNumber")}}</dt> + <dd>La position du code (colonne) dans la ligne de code qui a causé l'erreur, héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "RangeError.prototype.stack")}}</dt> + <dd>Pile d'appels, héritée depuis {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p>Bien que l'objet prototype {{jsxref("RangeError")}} ne possède pas de méthodes propres, les instances de <code>RangeError</code> hériteront de certaines méthodes via la chaîne de prototypes.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.RangeError")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/referenceerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/referenceerror/index.html new file mode 100644 index 0000000000..bdbf50f34c --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/referenceerror/index.html @@ -0,0 +1,92 @@ +--- +title: ReferenceError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/ReferenceError/prototype +tags: + - Error + - JavaScript + - Propriété + - Prototype + - Reference + - ReferenceError +translation_of: Web/JavaScript/Reference/Global_Objects/ReferenceError +translation_of_original: Web/JavaScript/Reference/Global_Objects/ReferenceError/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>ReferenceError.prototype</strong></code> représente le prototype du constructeur {{jsxref("ReferenceError")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("ReferenceError")}} héritent de <code>ReferenceError.prototype</code>. Le prototype peut être utilisé pour ajouter des propriétés ou des méthodes à chacune des instances.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>ReferenceError.prototype.constructor</code></dt> + <dd>Définit la fonction utilisée pour créer une instance du prototype.</dd> + <dt>{{jsxref("Error.prototype.message", "ReferenceError.prototype.message")}}</dt> + <dd>Le message de l'erreur. Bien que ECMA-262 spécifie que <code>ReferenceError</code> devrait posséder une propriété <code>message</code> en propre, <a href="/fr/docs/SpiderMonkey" title="SpiderMonkey">SpiderMonkey</a> lui fait hériter de {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "ReferenceError.prototype.name")}}</dt> + <dd>Le nom de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "ReferenceError.prototype.fileName")}}</dt> + <dd>Le chemin du fichier à l'origine de cette erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "ReferenceError.prototype.lineNumber")}}</dt> + <dd>Le numéro de la ligne dans le fichier à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "ReferenceError.prototype.columnNumber")}}</dt> + <dd>Le numéro de la colonne parmi la ligne à l'origine de l'erreur. Cette propriété est héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "ReferenceError.prototype.stack")}}</dt> + <dd>La pile d'appels, héritée de {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p>Bien que l'objet prototype pour {{jsxref("ReferenceError")}} ne contienne aucune méthode propre, les instances de <code>ReferenceError</code> héritent de certaines méthodes via la chaîne de prototypes.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Défini comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.ReferenceError")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/regexp/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/regexp/index.html new file mode 100644 index 0000000000..7a507e9699 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/regexp/index.html @@ -0,0 +1,119 @@ +--- +title: RegExp.prototype +slug: Web/JavaScript/Reference/Objets_globaux/RegExp/prototype +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - RegExp +translation_of: Web/JavaScript/Reference/Global_Objects/RegExp +translation_of_original: Web/JavaScript/Reference/Global_Objects/RegExp/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>RegExp.prototype</strong></code> représente l'objet prototype pour le constructeur {{jsxref("RegExp")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Voir la page {{jsxref("RegExp")}} qui décrit les instances de <code>RegExp</code>. Chaque instance de <code>RegExp</code> hérite de <code>RegExp.prototype</code>. Toute modification à l'objet prototype est propagée aux instances de <code>RegExp</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<p>Voir également la page sur <a href="/fr/docs/JavaScript/Reference/Annexes/Fonctionnalités_dépréciées">les propriétés dépréciées de <code>RegExp</code>.</a></p> + +<p>On notera que plusieurs des propriétés de {{jsxref("RegExp")}} ont un nom court et un nom long (semblable aux noms Perl). Le nom court et le nom long font référence à la même propriété. La modélisation des expressions rationnelles JavaScript est basée sur celle de Perl, un autre langage de programmation.</p> + +<dl> + <dt><code>RegExp.prototype.</code><code>constructor</code></dt> + <dd>Définit la fonction qui crée le prototype d'un objet.</dd> + <dt>{{jsxref("RegExp.prototype.flags")}}</dt> + <dd>Une chaîne qui contient les drapeaux (<em>flags</em>) utilisés pour l'objet <code>RegExp</code>.</dd> + <dt>{{jsxref("RegExp.prototype.dotAll")}}</dt> + <dd>Indique si <code>.</code> peut correspondre à des sauts de ligne.</dd> + <dt>{{jsxref("RegExp.prototype.global")}}</dt> + <dd>Définit si l'expression rationnelle doit relever la première correspondance d'une chaîne ou toutes les correspondances.</dd> + <dt>{{jsxref("RegExp.prototype.ignoreCase")}}</dt> + <dd>Définit si l'expression rationnelle doit ignorer la casse ou non pour détecter une correspondance.</dd> + <dt>{{jsxref("RegExp.prototype.multiline")}}</dt> + <dd>Définit si la recherche de la correspondance s'effectue sur plusieurs lignes ou sur une seule.</dd> + <dt>{{jsxref("RegExp.prototype.source")}}</dt> + <dd>Le texte du motif (<em>pattern</em>) à rechercher.</dd> + <dt>{{jsxref("RegExp.prototype.sticky")}}</dt> + <dd>Définit si la recherche s'effectue uniquement à partir de <code>lastIndex</code> ou non.</dd> + <dt>{{jsxref("RegExp.prototype.unicode")}}</dt> + <dd>Cette propriété indique si les fonctionnalités Unicode sont activées ou non.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Regexp.prototype.compile()")}}{{deprecated_inline}}</dt> + <dd>(Re)compile une expression rationnelle lors de l'exécution d'un script.</dd> + <dt>{{jsxref("RegExp.prototype.exec()")}}</dt> + <dd>Exécute une recherche de correspondance sur la chaîne de caractères fournie en paramètre.</dd> + <dt>{{jsxref("RegExp.prototype.test()")}}</dt> + <dd>Teste s'il y a une correspondance dans la chaîne de caractères fournie en paramètre.</dd> + <dt>{{jsxref("RegExp.prototype.@@match()", "RegExp.prototype[@@match]()")}}</dt> + <dd>Teste une correspondance sur une chaîne de caractères donnée et renvoie le résultat du test.</dd> + <dt>{{jsxref("RegExp.prototype.@@matchAll()", "RegExp.prototype[@@matchAll]()")}}</dt> + <dd>Renvoie l'ensemble des correspondances d'une expression rationnelle sur une chaîne.</dd> + <dt>{{jsxref("RegExp.prototype.@@replace()", "RegExp.prototype[@@replace]()")}}</dt> + <dd>Remplace les correspondances d'une chaîne de caractères avec une nouvelle sous-chaînes.</dd> + <dt>{{jsxref("RegExp.prototype.@@search()", "RegExp.prototype[@@search]()")}}</dt> + <dd>Recherche la correspondance dans une chaîne de caractères donnée et renvoie la position où est trouvé le motif.</dd> + <dt>{{jsxref("RegExp.prototype.@@split()", "RegExp.prototype[@@split]()")}}</dt> + <dd>Découpe une chaîne de caractères en un tableau de sous-chaînes.</dd> + <dt>{{jsxref("RegExp.prototype.toSource()")}} {{non-standard_inline}}</dt> + <dd>Renvoie un littéral objet représentant l'objet spécifié. Cette méthode peut être utilisée pour créer un nouvel objet. Elle surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("RegExp.prototype.toString()")}}</dt> + <dd>Renvoie une chaîne de caractères représentant l'objet spécifié. Cette méthode surcharge {{jsxref("Object.prototype.toString()")}}.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.10.5.1', 'RegExp')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-regexp.prototype', 'RegExp.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-regexp.prototype', 'RegExp.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.RegExp.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">Le chapitre concernant les expressions rationnelles</a> du <a href="/fr/docs/Web/JavaScript/Guide" title="JavaScript/Guide">Guide JavaScript</a></li> + <li>{{jsxref("RegExp")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/set/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/set/index.html new file mode 100644 index 0000000000..485be156ee --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/set/index.html @@ -0,0 +1,88 @@ +--- +title: Set.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Set/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Set +translation_of_original: Web/JavaScript/Reference/Global_Objects/Set/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Set.prototype</strong></code> représente le prototype pour le constructeur {{jsxref("Set")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Les instances de {{jsxref("Set")}} héritent de {{jsxref("Set.prototype")}}. Le prototype peut être utilisé afin d'ajouter des propriétés (valeurs ou méthodes) à toutes les instances de <code>Set</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Set.prototype.constructor</code></dt> + <dd>Renvoie la fonction qui crée le prototype d'une instance. Par défaut, ce sera la fonction {{jsxref("Set")}}.</dd> + <dt>{{jsxref("Set.prototype.size")}}</dt> + <dd>Renvoie le nombre de valeurs contenues dans l'objet <code>Set</code>.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Set.add", "Set.prototype.add(valeur)")}}</dt> + <dd>Ajoute un nouvel élément à l'objet <code>Set</code> avec la valeur donnée. La valeur de retour est l'objet <code>Set</code>.</dd> + <dt>{{jsxref("Set.prototype.clear()")}}</dt> + <dd>Retire tous les éléments de l'objet <code>Set</code>.</dd> + <dt>{{jsxref("Set.delete", "Set.prototype.delete(valeur)")}}</dt> + <dd>Retire l'élément associé à la <code>valeur</code> et renvoie la valeur que <code>Set.prototype.has(valeur)</code> aurait renvoyé. <code>Set.prototype.has(valeur)</code> renverra <code>false</code> après la suppression.</dd> + <dt>{{jsxref("Set.prototype.entries()")}}</dt> + <dd>Renvoie un nouvel objet <code>Iterator</code> qui contient un tableau de<strong> <code>[valeur, valeur]</code></strong> pour chaque élément de l'objet <code>Set</code>, dans l'ordre dans lequel les valeurs ont été insérées. On aura donc une structure semblable à un objet <code>Map</code>. Ici, chaque entrée aura la même valeur pour la <em>clé</em> et la <em>valeur</em>.</dd> + <dt>{{jsxref("Set.forEach", "Set.prototype.forEach(fnCallback[, thisArg])")}}</dt> + <dd>Appelle la fonction <code>fnCallback</code> pour chaque valeur présente dans l'objet <code>Set</code>, dans l'ordre dans lequel elles ont été insérées. Si un paramètre <code>thisArg</code> est fourni à <code>forEach</code>, il sera utilisé comme valeur de <code>this</code> pour chaque appel de la fonction de callback.</dd> + <dt>{{jsxref("Set.has", "Set.prototype.has(valeur)")}}</dt> + <dd>Renvoie un booléen qui indique si un des éléments de l'ensemble possède cette valeur.</dd> + <dt>{{jsxref("Set.prototype.values()","Set.prototype.keys()")}}</dt> + <dd>Cette fonction correspond à la fonction <strong><code>values()</code></strong> et renvoie un nouvel objet <code>Iterator</code> qui contient les valeurs correspondant à chaque élément de <code>Set</code> dans l'ordre dans lequel ils ont été insérés.</dd> + <dt>{{jsxref("Set.prototype.values()")}}</dt> + <dd>Renvoie un nouvel objet <code>Iterator</code> qui contient les valeurs pour chacun des éléments de l'objet <code>Set</code>, dans l'ordre dans lequel ils ont été insérés.</dd> + <dt>{{jsxref("Set.prototype.@@iterator()","Set.prototype[@@iterator]()")}}</dt> + <dd>Renvoie un nouvel objet <code>Iterator</code> qui contient les valeurs pour chaque élément de l'objet <code>Set</code> dans leur ordre d'insertion.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-set.prototype', 'Set.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-set.prototype', 'Set.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Set.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Map.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html new file mode 100644 index 0000000000..58e0f921fd --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/sharedarraybuffer/index.html @@ -0,0 +1,67 @@ +--- +title: SharedArrayBuffer.prototype +slug: Web/JavaScript/Reference/Objets_globaux/SharedArrayBuffer/prototype +tags: + - JavaScript + - Mémoire partagée + - Propriété + - Reference + - SharedArrayBuffer + - TypedArrays +translation_of: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer +translation_of_original: Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <strong><code>SharedArrayBuffer.prototype</code></strong> représente le prototype de l'objet {{jsxref("SharedArrayBuffer")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Les instances de <code>SharedArrayBuffer</code> héritent de <code>SharedArrayBuffer.prototype</code>. Comme avec les autres constructeurs, il est possible de changer le constructeur de l'objet prototype afin de modifier l'ensemble des instancees de <code>SharedArrayBuffer</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt>SharedArrayBuffer.prototype.constructor</dt> + <dd>Cette méthode définit la fonction qui crée le prototype d'un objet. La valeur initiale de cette méthode est le constructeur natif <code>SharedArrayBuffer</code>.</dd> + <dt>{{jsxref("SharedArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>La taille, exprimée en octets, du tableau. Elle est définie lorsque le tableau est construit et elle ne peut pas être modifiée par la suite. <strong>Propriété en lecture seule</strong><strong>.</strong></dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("SharedArrayBuffer.slice", "SharedArrayBuffer.prototype.slice(début, fin)")}}</dt> + <dd>Cette méthode renvoie un nouvel <code>SharedArrayBuffer</code> dont le contenu est une copie des octets de cet <code>SharedArrayBuffer</code>'s entre un indice de début et un indice de fin. Si cet indice de début ou de fin est négatif, cela représentera l'indice à partir de la fin du tableau.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-sharedarraybuffer.prototype', 'SharedArrayBuffer.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Définition initiale avec ES2017.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.SharedArrayBuffer.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/string/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..f7fc1c80a6 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,190 @@ +--- +title: String.prototype +slug: Web/JavaScript/Reference/Objets_globaux/String/prototype +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - String +translation_of: Web/JavaScript/Reference/Global_Objects/String +translation_of_original: Web/JavaScript/Reference/Global_Objects/String/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <strong><code>String.prototype</code></strong> représente l'objet prototype de {{jsxref("String")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("String")}} héritent de <code>String.prototype</code>. Les modifications de l'objet prototype <code>String</code> sont répercutées sur toutes les instances de <code>String</code>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>String.prototype.constructor</code></dt> + <dd>Définit la fonction créant le prototype d'un objet.</dd> + <dt>{{jsxref("String.prototype.length")}}</dt> + <dd>Reflète la longueur de la chaîne</dd> + <dt><code><em>N</em></code></dt> + <dd>Utilisée pour accéder au caractère en <em>N</em><sup>ème</sup> position où <em>N</em> est un entier entre 0 et la valeur de {{jsxref("String.length")}} moins un. Ces propriétés sont en lecture seule.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<h3 id="Méthodes_non_liées_à_HTML">Méthodes non liées à HTML</h3> + +<dl> + <dt>{{jsxref("String.prototype.charAt()")}}</dt> + <dd>Renvoie le caractère (ou plus précisement, le point de code UTF-16) à la position spécifiée.</dd> + <dt>{{jsxref("String.prototype.charCodeAt()")}}</dt> + <dd>Renvoie un nombre indiquant la valeur du point de code UTF-16 du caractère à la position spécifiée.</dd> + <dt>{{jsxref("String.prototype.codePointAt()")}}</dt> + <dd>Renvoie un entier positif qui est la valeur du codet UTF-16 à la position donnée.</dd> + <dt>{{jsxref("String.prototype.concat()")}}</dt> + <dd>Combine le texte de deux chaînes et renvoie une nouvelle chaîne.</dd> + <dt>{{jsxref("String.prototype.includes()")}}</dt> + <dd>Défini si une chaîne de caractères est contenue dans une autre chaîne de caractères.</dd> + <dt>{{jsxref("String.prototype.endsWith()")}}</dt> + <dd>Défini si une chaîne de caractère se termine par une chaîne de caractères spécifique.</dd> + <dt>{{jsxref("String.prototype.indexOf()")}}</dt> + <dd>Renvoie la position, au sein de l'objet <code>String</code> appelant, de la première occurrence de la valeur spécifiée, ou -1 si celle-ci n'est pas trouvée.</dd> + <dt>{{jsxref("String.prototype.lastIndexOf()")}}</dt> + <dd>Renvoie la position, au sein de l'objet String appelant, de la dernière occurrence de la valeur spécifiée, ou -1 si celle-ci n'est pas trouvée.</dd> + <dt>{{jsxref("String.prototype.localeCompare()")}}</dt> + <dd>Renvoie un nombre indiquant si une chaîne de référence vient avant, après ou est en position identique à la chaîne donnée selon un ordre de tri.</dd> + <dt>{{jsxref("String.prototype.match()")}}</dt> + <dd>Utilisée pour faire correspondre une expression rationnelle avec une chaîne.</dd> + <dt>{{jsxref("String.prototype.matchAll()")}}</dt> + <dd>Renvoie un itérateur listant l'ensemble des correspondances d'une expression rationnelle avec la chaîne.</dd> + <dt>{{jsxref("String.prototype.normalize()")}}</dt> + <dd>Retourne la forme Unicode normalisée de la chaîne de caractères appelée.</dd> + <dt>{{jsxref("String.prototype.padEnd()")}}</dt> + <dd>Complète la chaîne courante avec une autre chaîne de caractères, éventuellement répétée, afin d'obtenir une nouvelle chaîne de la longueur indiquée. La chaîne complémentaire est ajoutée à la fin.</dd> + <dt>{{jsxref("String.prototype.padStart()")}}</dt> + <dd>Complète la chaîne courante avec une autre chaîne de caractères, éventuellement répétée, afin d'obtenir une nouvelle chaîne de la longueur indiquée. La chaîne complémentaire est ajoutée au début.</dd> +</dl> + +<dl> + <dt>{{jsxref("String.prototype.quote()")}} {{obsolete_inline}}</dt> + <dd>Entoure la chaîne de guillemets doubles anglais ("<code>"</code>").</dd> + <dt>{{jsxref("String.prototype.repeat()")}}</dt> + <dd>Renvoie une chaîne dont le contenu est la chaîne courante répétée un certain nombre de fois.</dd> + <dt>{{jsxref("String.prototype.replace()")}}</dt> + <dd>Utilisée pour rechercher une correspondance entre une expression rationnelle et une chaîne, et pour remplacer la sous-chaîne correspondante par une nouvelle chaîne.</dd> + <dt>{{jsxref("String.prototype.search()")}}</dt> + <dd>Exécute la recherche d'une correspondance entre une expression régulière et une chaîne spécifiée.</dd> + <dt>{{jsxref("String.prototype.slice()")}}</dt> + <dd>Extrait une section d'une chaîne et renvoie une nouvelle chaîne.</dd> + <dt>{{jsxref("String.prototype.split()")}}</dt> + <dd>Sépare un objet String en un tableau de chaînes en séparant la chaîne en plusieurs sous-chaînes.</dd> + <dt>{{jsxref("String.prototype.startsWith()")}}</dt> + <dd>Détermine si une chaîne commence avec les caractères d'une autre chaîne.</dd> + <dt>{{jsxref("String.prototype.substr()")}} {{deprecated_inline}}</dt> + <dd>Renvoie les caractères d'une chaîne à partir de la position spécifiée et pour la longueur spécifiée.</dd> + <dt>{{jsxref("String.prototype.substring()")}}</dt> + <dd>Renvoie les caractères d'une chaîne entre deux positions dans celle-ci.</dd> + <dt>{{jsxref("String.prototype.toLocaleLowerCase()")}}</dt> + <dd>Les caractères de la chaîne seront convertis en minuscules selon la locale courante. Pour la plupart des langues, le résultat est identique à {{jsxref("String.prototype.toLowerCase()", "toLowerCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLocaleUpperCase()")}}</dt> + <dd>Les caractères de la chaîne seront convertis en majuscules selon la locale courante. Pour la plupart des langues, le résultat est identique à {{jsxref("String.toUpperCase()", "toUpperCase()")}}.</dd> + <dt>{{jsxref("String.prototype.toLowerCase()")}}</dt> + <dd>Renvoie la valeur de la chaîne appelante convertie en minuscules.</dd> + <dt>{{jsxref("String.prototype.toSource()")}} {{ Non-standard_inline() }}</dt> + <dd>Renvoie une représentation littérale de l'objet; celle-ci peut être utilisée pour créer un nouvel objet. Remplace la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("String.prototype.toString()")}}</dt> + <dd>Renvoie une chaîne représentant l'objet spécifié. Remplace la méthode {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("String.prototype.toUpperCase()")}}</dt> + <dd>Renvoie la valeur de la chaîne appelante convertie en majuscules.</dd> + <dt>{{jsxref("String.prototype.trim()")}}</dt> + <dd>Retire les blancs en début et en fin de chaîne. Cette méthode a été définie avec ECMAScript 5.</dd> + <dt>{{jsxref("String.prototype.trimStart()")}}<br> + {{jsxref("String.prototype.trimLeft()")}}</dt> + <dd>Retire les blancs situés au début de la chaîne.</dd> + <dt>{{jsxref("String.prototype.trimEnd()")}}<br> + {{jsxref("String.prototype.trimRight()")}}</dt> + <dd>Retire les blancs situés à la fin de la chaîne.</dd> + <dt>{{jsxref("String.prototype.valueOf()")}}</dt> + <dd>Renvoie la valeur primitive de l'objet spécifié. Remplace la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> + <dt>{{jsxref("String.prototype.@@iterator()","String.prototype[@@iterator]()")}}</dt> + <dd>Renvoie un nouvel objet <code>Iterator</code> qui permet d'itérer sur les codets de la chaîne, chaque codet étant renvoyé comme une chaîne.</dd> +</dl> + +<h3 id="Méthodes_de_transformation_HTML">Méthodes de transformation HTML</h3> + +<p>Ces méthodes ont une utilisation limitée, étant donné qu'elles ne fournissent qu'un petit sous-ensemble des balises et attributs HTML existants.</p> + +<dl> + <dt>{{jsxref("String.prototype.anchor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("name", "a", "<a name=\"name\">")}} (cible hypertexte)</dd> + <dt>{{jsxref("String.prototype.big()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("big")}}</dd> + <dt>{{jsxref("String.prototype.blink()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("blink")}}</dd> + <dt>{{jsxref("String.prototype.bold()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("b")}}</dd> + <dt>{{jsxref("String.prototype.fixed()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("tt")}}</dd> + <dt>{{jsxref("String.prototype.fontcolor()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("color", "font", "<font color=\"color\">")}}</dd> + <dt>{{jsxref("String.prototype.fontsize()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("size", "font", "<font size=\"size\">")}}</dd> + <dt>{{jsxref("String.prototype.italics()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("i")}}</dd> + <dt>{{jsxref("String.prototype.link()")}} {{deprecated_inline}}</dt> + <dd>{{htmlattrxref("href", "a", "<a href=\"url\">")}} (lien vers une URL)</dd> + <dt>{{jsxref("String.prototype.small()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("small")}}</dd> + <dt>{{jsxref("String.prototype.strike()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("strike")}}</dd> + <dt>{{jsxref("String.prototype.sub()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sub")}}</dd> + <dt>{{jsxref("String.prototype.sup()")}} {{deprecated_inline}}</dt> + <dd>{{HTMLElement("sup")}}</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5.3.1', 'String.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string.prototype', 'String.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.String.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("String")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/symbol/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/symbol/index.html new file mode 100644 index 0000000000..9f3c6f0703 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/symbol/index.html @@ -0,0 +1,75 @@ +--- +title: Symbol.prototype +slug: Web/JavaScript/Reference/Objets_globaux/Symbol/prototype +tags: + - ECMAScript6 + - JavaScript + - Propriété + - Reference + - Symbol +translation_of: Web/JavaScript/Reference/Global_Objects/Symbol +translation_of_original: Web/JavaScript/Reference/Global_Objects/Symbol/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>Symbol</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("Symbol")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/symbol-prototype.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Description">Description</h2> + +<p>Les instances de {{jsxref("Symbol")}} héritent toutes de {{jsxref("Symbol.prototype")}}. Ce prototype du constructeur peut être utilisé afin d'ajouter des propriétés et/ou des méthodes pour chaque instance de <code>Symbol</code> via la chaîne de prototypes.</p> + +<p>{{js_property_attributes(0,0,0)}}</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Symbol.prototype.constructor</code></dt> + <dd>Cette propriété correspond à la fonction qui a crée l'instance du prototype. Par défaut, c'est la fonction {{jsxref("Symbol")}} qui est renvoyée.</dd> + <dt>{{jsxref("Symbol.prototype.description")}}</dt> + <dd>Une chaîne de caractères en lecture seule qui contient la description du symbole.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("Symbol.prototype.toSource()")}} {{Non-standard_inline}}</dt> + <dd>Cette méthode renvoie une chaîne de caractères contenant la source de l'objet {{jsxref("Objets_globaux/Symbol", "Symbol")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toSource()")}}.</dd> + <dt>{{jsxref("Symbol.prototype.toString()")}}</dt> + <dd>Cette méthode renvoie une chaîne de caractères contenant la description du symbole. Cette méthode surcharge la méthode {{jsxref("Object.prototype.toString()")}}.</dd> + <dt>{{jsxref("Symbol.prototype.valueOf()")}}</dt> + <dd>Cette méthode renvoie la valeur primitive de l'objet {{jsxref("Symbol")}}. Cette méthode surcharge la méthode {{jsxref("Object.prototype.valueOf()")}}.</dd> + <dt>{{jsxref("Symbol.prototype.@@toPrimitive()", "Symbol.prototype[@@toPrimitive]")}}</dt> + <dd>Renvoie la valeur primitive de l'objet {{jsxref("Symbol")}}.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-symbol.prototype', 'Symbol.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-symbol.prototype', 'Symbol.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.Symbol.prototype")}}</p> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html new file mode 100644 index 0000000000..7407f68670 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/syntaxerror/index.html @@ -0,0 +1,90 @@ +--- +title: SyntaxError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/SyntaxError/prototype +tags: + - Error + - JavaScript + - Propriété + - Prototype + - Reference + - SyntaxError +translation_of: Web/JavaScript/Reference/Global_Objects/SyntaxError +translation_of_original: Web/JavaScript/Reference/Global_Objects/SyntaxError/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>SyntaxError.prototype</strong></code> représente le prototype du constructeur {{jsxref("SyntaxError")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("SyntaxError")}} héritent de <code>SyntaxError.prototype</code>. Le prototype peut être utilisé afin d'ajouter des propriétés ou des méthodes à toutes les instances.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>SyntaxError.prototype.constructor</code></dt> + <dd>Définit la fonction qui a créé le prototype d'une instance.</dd> + <dt>{{jsxref("Error.prototype.message", "SyntaxError.prototype.message")}}</dt> + <dd>Un message d'erreur. Bien que ECMA-262 définisse que {{jsxref("SyntaxError")}} doit avoir une propriété <code>message</code> en propre, dans <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a>, elle est héritée depuis {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "SyntaxError.prototype.name")}}</dt> + <dd>Un nom d'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "SyntaxError.prototype.fileName")}}</dt> + <dd>Le chemin du fichier qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "SyntaxError.prototype.lineNumber")}}</dt> + <dd>Le numéro de la ligne du fichier qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "SyntaxError.prototype.columnNumber")}}</dt> + <dd>Le numéro de la colonne dans la ligne qui a causé l'erreur. Propriété héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "SyntaxError.prototype.stack")}}</dt> + <dd>La pile d'appels (<em>stack trace</em>). Propriété héritée depuis {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p>Bien que le prototype de {{jsxref("SyntaxError")}} ne possède pas de méthodes directes, les instances de {{jsxref("SyntaxError")}} héritent de certaines méthodes via la chaîne de prototypes.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.SyntaxError")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/typedarray/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/typedarray/index.html new file mode 100644 index 0000000000..85c7f14222 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/typedarray/index.html @@ -0,0 +1,132 @@ +--- +title: TypedArray.prototype +slug: Web/JavaScript/Reference/Objets_globaux/TypedArray/prototype +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - TypedArray +translation_of: Web/JavaScript/Reference/Global_Objects/TypedArray +translation_of_original: Web/JavaScript/Reference/Global_Objects/TypedArray/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>TypedArray</strong></code><strong><code>.prototype</code></strong> représente le prototype des constructeurs {{jsxref("TypedArray")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Les instances de {{jsxref("TypedArray")}} héritent de {{jsxref("TypedArray.prototype")}}. Le prototype du constructeur peut être utilisé pour ajouter des propriétés et/ou des méthodes à toutes les instances de <em>TypedArray</em> (où <em>TypedArray</em> correspond à un des <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">types de tableaux typés</a>).</p> + +<p>Pour plus de détails sur le fonctionnement de l'héritage, voir la page sur <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Description"><em>TypedArray</em></a>.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>TypedArray.prototype.constructor</code></dt> + <dd>Cette propriété renvoie la fonction qui a créé le prototype de l'instance. Elle correspondra à l'une des fonctions par défaut pour le <a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/TypedArray#Les_objets_TypedArray">type du tableau typé</a> utilisé.</dd> + <dt>{{jsxref("TypedArray.prototype.buffer")}} {{readonlyInline}}</dt> + <dd>Cette propriété renvoie l'{{jsxref("ArrayBuffer")}} qui est référencé par le tableau typé. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement.</dd> + <dt>{{jsxref("TypedArray.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>Cette propriété renvoie la longueur (exprimée en octets) du tableau typé, à partir du début de l'{{jsxref("ArrayBuffer")}}. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement<strong>.</strong></dd> + <dt>{{jsxref("TypedArray.prototype.byteOffset")}} {{readonlyInline}}</dt> + <dd>Cette propriété renvoie le décalage utilisé (exprimé en octets) entre le début du tableau typé et le début du {{jsxref("ArrayBuffer")}}. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement<strong>.</strong></dd> + <dt>{{jsxref("TypedArray.prototype.length")}} {{readonlyInline}}</dt> + <dd>Cette propriété renvoie le nombre d'éléments contenus dans le tableau typé. Cette propriété est définie lors de la construction et est donc accessible en <strong>lecture seule</strong> uniquement<strong>.</strong></dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("TypedArray.prototype.copyWithin()")}}</dt> + <dd>Copie une suite d'éléments au sein du tableau typé. Voir aussi {{jsxref("Array.prototype.copyWithin()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.entries()")}}</dt> + <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés/valeurs pour chaque indice du tableau. Voir aussi {{jsxref("Array.prototype.entries()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.every()")}}</dt> + <dd>Teste si tous les éléments du tableau typé respectent une condition donnée sous la forme d'une fonction. Voir aussi {{jsxref("Array.prototype.every()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.fill()")}}</dt> + <dd>Affecte une même valeur statique aux éléments du tableau typé entre un indice de début et un indice de fin. Voir aussi {{jsxref("Array.prototype.fill()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.filter()")}}</dt> + <dd>Crée un nouveau tableau typé dont les éléments proviennent d'un tableau typé qu'on a filtré avec une fonction. Voir aussi {{jsxref("Array.prototype.filter()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.find()")}}</dt> + <dd>Renvoie la valeur trouvée dans le tableau typé si un élément du tableau typé respecte une condition définie par une fonction. Si aucun élément n'est trouvé, {{jsxref("undefined")}} sera renvoyé. Voir aussi {{jsxref("Array.prototype.find()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.findIndex()")}}</dt> + <dd>Renvoie l'indice de l'élément trouvé si un élément du tableau typé respecte une condition définie par une fonction. Si aucun élément n'est trouvé, -1 sera renvoyé. Voir aussi {{jsxref("Array.prototype.findIndex()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.forEach()")}}</dt> + <dd>Appelle une fonction pour chaque élément du tableau typé. Voir aussi {{jsxref("Array.prototype.forEach()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.includes()")}}</dt> + <dd>Détermine si un élément est contenu dans un tableau typé et renvoie <code>true</code> ou <code>false</code> selon le cas de figure. Voir aussi {{jsxref("Array.prototype.includes()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.indexOf()")}}</dt> + <dd>Renvoie le premier indice (le plus petit) d'un élément du tableau typé qui a la valeur fournie en argument. Si aucun élément n'est trouvé, la valeur -1 sera renvoyée. Voir aussi {{jsxref("Array.prototype.indexOf()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.join()")}}</dt> + <dd>Fusionne l'ensemble des éléments du tableau typé en une chaîne de caractères. Voir aussi {{jsxref("Array.prototype.join()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.keys()")}}</dt> + <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les clés pour chaque élément du tableau. Voir aussi {{jsxref("Array.prototype.keys()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.lastIndexOf()")}}</dt> + <dd>Renvoie le dernier indice (le plus grand) d'un élément du tableau typé qui a la valeur fournie en argument. Si aucun élément n'est trouvé, -1 sera renvoyé. Voir aussi {{jsxref("Array.prototype.lastIndexOf()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.map()")}}</dt> + <dd>Crée un nouveau tableau typé dont les éléments sont les images des éléments du tableau typé courant par une fonction donnée. Voir aussi {{jsxref("Array.prototype.map()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.move()")}} {{non-standard_inline}} {{unimplemented_inline}}</dt> + <dd>Ancienne version, non-standard, de {{jsxref("TypedArray.prototype.copyWithin()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.reduce()")}}</dt> + <dd>Applique une fonction par rapport à un accumulateur pour chaque valeur du tableau (de gauche à droite) afin de réduire le tableau typé à une seule valeur. Voir aussi {{jsxref("Array.prototype.reduce()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.reduceRight()")}}</dt> + <dd>Applique une fonction par rapport à un accumulateur pour chaque valeur du tableau (de droite à gauche) afin de réduire le tableau typé à une seule valeur. Voir aussi {{jsxref("Array.prototype.reduceRight()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.reverse()")}}</dt> + <dd>Inverse l'ordre des éléments du tableau typé (le premier devient le dernier, le dernier devient le premier et ainsi de suite). Voir aussi {{jsxref("Array.prototype.reverse()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.set()")}}</dt> + <dd>Cette méthode permet d'enregistrer plusieurs valeurs dans le tableau typé à partir d'un tableau donné.</dd> + <dt>{{jsxref("TypedArray.prototype.slice()")}}</dt> + <dd>Extrait un fragment du tableau typé et renvoie ce fragment sous forme d'un tableau typé. Voir aussi {{jsxref("Array.prototype.slice()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.some()")}}</dt> + <dd>Renvoie <code>true</code> si au moins un élément du tableau typé respecte une condition définie par une fonction passée en argument. Voir aussi {{jsxref("Array.prototype.some()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.sort()")}}</dt> + <dd>Trie les éléments du tableau typé sur place et renvoie le tableau typé. Voir aussi {{jsxref("Array.prototype.sort()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.subarray()")}}</dt> + <dd>Cette méthode renvoie un nouvel objet <code>TypedArray</code> en fonction d'un indice de début et de fin.</dd> + <dt>{{jsxref("TypedArray.prototype.values()")}}</dt> + <dd>Renvoie un nouvel objet <code>Array Iterator</code> qui contient les valeurs pour chaque indice du tableau typé. Voir aussi {{jsxref("Array.prototype.values()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.toLocaleString()")}}</dt> + <dd>Renvoie une chaîne de caractères localisée qui représente le tableau typé et ses éléments. Voir aussi {{jsxref("Array.prototype.toLocaleString()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.toString()")}}</dt> + <dd>Renvoie une chaîne de caractères représentant le tableau typé et ses éléments. Voir aussi {{jsxref("Array.prototype.toString()")}}.</dd> + <dt>{{jsxref("TypedArray.prototype.@@iterator()", "TypedArray.prototype[@@iterator]()")}}</dt> + <dd>Renvoie un nouvel objet <code>Array Iterator</code> contenant les valeurs pour chaque indice du tableau typé.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-properties-of-the-%typedarrayprototype%-object', 'TypedArray prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.TypedArray.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Tableaux_typés">Les tableaux typés en JavaScript</a></li> + <li>{{jsxref("TypedArray")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/typeerror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/typeerror/index.html new file mode 100644 index 0000000000..041451e11c --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/typeerror/index.html @@ -0,0 +1,90 @@ +--- +title: TypeError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/TypeError/prototype +tags: + - Error + - JavaScript + - Propriété + - Prototype + - Reference + - TypeError +translation_of: Web/JavaScript/Reference/Global_Objects/TypeError +translation_of_original: Web/JavaScript/Reference/Global_Objects/TypeError/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>TypeError.prototype</strong></code> représente le prototype du constructeur {{jsxref("TypeError")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("TypeError")}} héritent de <code>TypeError.prototype</code>. Le prototype peut être utilisé afin d'ajouter des propriétés ou des méthodes à l'ensemble des instances.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>TypeError.prototype.constructor</code></dt> + <dd>Définit la fonction qui crée le prototype d'une instance.</dd> + <dt>{{jsxref("Error.prototype.message", "TypeError.prototype.message")}}</dt> + <dd>Un message d'erreur. Bien que la spécification ECMA-262 définisse que {{jsxref("TypeError")}} doive fournir une propriété directe pour <code>message</code>, <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> la fait hériter de {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "TypeError.prototype.name")}}</dt> + <dd>Nom pour l'erreur, hérité depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "TypeError.prototype.fileName")}}</dt> + <dd>Le chemin vers le fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "TypeError.prototype.lineNumber")}}</dt> + <dd>La ligne du fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "TypeError.prototype.columnNumber")}}</dt> + <dd>La colonne (la position dans la ligne) du fichier qui a causé l'erreur. Hérité depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "TypeError.prototype.stack")}}</dt> + <dd>La pile d'appels (<em>stack trace</em>). Héritée depuis {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p>Bien que l'objet prototype pour {{jsxref("TypeError")}} ne contienne aucune méthode propre (qui lui soit directement rattachée), {{jsxref("TypeError")}} hérite de certaines méthodes grâce à la chaîne de prototypes.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.TypeError")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/urierror/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/urierror/index.html new file mode 100644 index 0000000000..4c45a4af6b --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/urierror/index.html @@ -0,0 +1,90 @@ +--- +title: URIError.prototype +slug: Web/JavaScript/Reference/Objets_globaux/URIError/prototype +tags: + - Error + - JavaScript + - Propriété + - Prototype + - Reference + - URIError +translation_of: Web/JavaScript/Reference/Global_Objects/URIError +translation_of_original: Web/JavaScript/Reference/Global_Objects/URIError/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>URIError.prototype</strong></code> représente le prototype du constructeur {{jsxref("URIError")}}.</p> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("URIError")}} héritent de <code>URIError.prototype</code>. Ce prototype peut être utilisé pour ajouter des propriétés et/ou des méthodes à l'ensemble des instances.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>URIError.prototype.constructor</code></dt> + <dd>Cette propriété définit la fonction qui a créé le prototype de l'instance.</dd> + <dt>{{jsxref("Error.prototype.message", "URIError.prototype.message")}}</dt> + <dd>Un message décrivant l'erreur. Bien qu'ECMA-262 spécifie qu'{{jsxref("URIError")}} devrait avoir une propriété <code>message</code> en propre, <a href="/fr/docs/SpiderMonkey">SpiderMonkey</a> lui fait hériter de {{jsxref("Error.prototype.message")}}.</dd> + <dt>{{jsxref("Error.prototype.name", "URIError.prototype.name")}}</dt> + <dd>Un nom d'erreur. Héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.fileName", "URIError.prototype.fileName")}}</dt> + <dd>Le chemin vers le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.lineNumber", "URIError.prototype.lineNumber")}}</dt> + <dd>Le numéro de la ligne dans le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.columnNumber", "URIError.prototype.columnNumber")}}</dt> + <dd>Le numéro de colonne (la position dans la ligne) dans le fichier qui a causé l'erreur. Héritée depuis {{jsxref("Error")}}.</dd> + <dt>{{jsxref("Error.prototype.stack", "URIError.prototype.stack")}}</dt> + <dd>La pile d'appels ayant mené à l'erreur (<em>stack trace</em>). Héritée de {{jsxref("Error")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p>Bien que l'objet prototype pour {{jsxref("URIError")}} ne contienne pas de méthode qui lui soit directement rattachée, les instances d'{{jsxref("URIError")}} héritent de certaines méthodes grâce à la chaîne de prototypes.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.11.7.6', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-nativeerror.prototype', 'NativeError.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Définie comme <code><em>NativeError</em>.prototype</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.URIError")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Error.prototype")}}</li> + <li>{{jsxref("Function.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/weakmap/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/weakmap/index.html new file mode 100644 index 0000000000..7ca2bf02d1 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/weakmap/index.html @@ -0,0 +1,82 @@ +--- +title: WeakMap.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WeakMap/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - WeakMap +translation_of: Web/JavaScript/Reference/Global_Objects/WeakMap +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakMap/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>WeakMap</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WeakMap")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Les instances de {{jsxref("WeakMap")}} héritent de {{jsxref("WeakMap.prototype")}}. L'objet prototype du constructeur peut donc être utilisé pour ajouter des propriétés et/ou des méthodes pour toutes les instances de <code>WeakMap</code>.</p> + +<p>WeakMap.prototype est un objet ordinaire :</p> + +<pre class="brush: js">Object.prototype.toString.call(WeakMap.prototype); // "[object Object]" +</pre> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>WeakMap.prototype.constructor</code></dt> + <dd>Renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera la fonction {{jsxref("WeakMap")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("WeakMap.delete", "WeakMap.prototype.delete(clé)")}}</dt> + <dd>Retire la valeur associée à la clé <code>clé.</code> <code>WeakMap.prototype.has(clé)</code> renverra <code>false</code> une fois la valeur supprimée.</dd> + <dt>{{jsxref("WeakMap.get", "WeakMap.prototype.get(clé)")}}</dt> + <dd>Renvoie la valeur associée à la <code>clé</code>, ou <code>undefined</code> s'il n'y en a pas.</dd> + <dt>{{jsxref("WeakMap.has", "WeakMap.prototype.has(clé)")}}</dt> + <dd>Renvoie un booléen qui indique s'il existe ou non une valeur associée à une <code>clé</code> donnée pour l'objet <code>WeakMap</code>.</dd> + <dt>{{jsxref("WeakMap.set", "WeakMap.prototype.set(clé, valeur)")}}</dt> + <dd>Définit la valeur associée à la <code>clé</code> dans l'objet <code>WeakMap</code>. La méthode renvoie l'objet<code> WeakMap</code>.</dd> + <dt><s class="obsoleteElement">{{jsxref("WeakMap.prototype.clear()")}}</s> {{obsolete_inline}}</dt> + <dd><s class="obsoleteElement">Retire toutes les paires de clés/valeurs contenues dans l'objet <code>WeakMap</code>. Il est possible de construire un objet semblable à <code>WeakMap</code> qui possède une méthode <code>clear()</code> en encapsulant (cf. l'exemple sur la page {{jsxref("WeakMap")}}).</s></dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakmap.prototype', 'WeakMap.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.WeakMap.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Map.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/weakset/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/weakset/index.html new file mode 100644 index 0000000000..092f97b6c3 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/weakset/index.html @@ -0,0 +1,80 @@ +--- +title: WeakSet.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WeakSet/prototype +tags: + - ECMAScript 2015 + - JavaScript + - Propriété + - Reference + - WeakSet +translation_of: Web/JavaScript/Reference/Global_Objects/WeakSet +translation_of_original: Web/JavaScript/Reference/Global_Objects/WeakSet/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>WeakSet</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WeakSet")}}.</p> + +<div>{{js_property_attributes(0,0,0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("WeakSet")}} héritent de {{jsxref("WeakSet.prototype")}}. Le prototype du constructeur peut être utilisé pour ajouter des méthodes et/ou des propriétés à toutes les instances de <code>WeakSet</code>.</p> + +<p>WeakSet.prototype est un objet ordinaire :</p> + +<pre class="brush: js">Object.prototype.toString.call(WeakSet.prototype); // "[object Object]"</pre> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>WeakSet.prototype.constructor</code></dt> + <dd>Cette propriété renvoie la fonction qui a créé le prototype de l'instance. Par défaut, ce sera la fonction native {{jsxref("WeakSet")}}.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt>{{jsxref("WeakSet.add", "WeakSet.prototype.add(valeur)")}}</dt> + <dd>Cette méthode permet d'ajouter une nouvel objet avec une valeur donnée à l'objet <code>WeakSet</code>.</dd> + <dt>{{jsxref("WeakSet.delete", "WeakSet.prototype.delete(valeur)")}}</dt> + <dd>Cette méthode retire l'élément associé à <code>valeur</code>. <code>WeakSet.prototype.has(valeur)</code> renverra <code>false</code> une fois l'opération effectuée.</dd> + <dt>{{jsxref("WeakSet.has", "WeakSet.prototype.has(valeur)")}}</dt> + <dd>Cette méthode renvoie un booléen indiquant si oui ou non un élément est présent avec cette valeur au sein de l'objet <code>WeakSet</code>.</dd> + <dt><s class="obsoleteElement">{{jsxref("WeakSet.prototype.clear()")}}{{obsolete_inline}}</s></dt> + <dd><s class="obsoleteElement">Cette méthode retire tous les éléments de l'ensemble <code>WeakSet</code>.</s></dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-weakset.prototype', 'WeakSet.prototype')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.WeakSet.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Set.prototype")}}</li> + <li>{{jsxref("WeakMap.prototype")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html new file mode 100644 index 0000000000..fabce82ac1 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/global/index.html @@ -0,0 +1,69 @@ +--- +title: WebAssembly.Global.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Global/prototype +tags: + - JavaScript + - Propriété + - Prototype + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Global/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>WebAssembly.Global</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Global()")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("WebAssembly.Global")}} héritent de <code>Global.prototype</code>. L'objet prototype du constructeur {{jsxref("WebAssembly.Global()")}} peut être modifié afin d'avoir un impact sur l'ensemble des instances {{jsxref( "WebAssembly.Global")}}.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Global.prototype.constructor</code></dt> + <dd>Cette propriété renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Global()")}}.</dd> + <dt><code>Global.prototype[@@toStringTag]</code></dt> + <dd>La valeur initiale de la propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag">@@toStringTag</a></code> est la chaîne de caractères <code>"WebAssembly.Global"</code>.</dd> + <dt><code>Global.prototype.value</code></dt> + <dd>La valeur contenue à l'intérieur de la variable globale. Cette propriété peut être utilisée afin de modifier et d'accéder à la valeur globale.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<dl> + <dt><code>Global.prototype.valueOf()</code></dt> + <dd>Une méthode qui renvoie la valeur contenue dans la variable globale.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#globals', 'WebAssembly.Global()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Brouillon pour la définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("javascript.builtins.WebAssembly.Global.prototype")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("WebAssembly.Global()")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html new file mode 100644 index 0000000000..504c57504a --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/instance/index.html @@ -0,0 +1,71 @@ +--- +title: WebAssembly.Instance.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/prototype +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - WebAssembly + - instance +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Instance/prototype +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p>La propriété <code><strong>WebAssembly.Instance</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Instance()")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("WebAssembly.Instance")}} héritent de <code>Instance.prototype</code>. L'objet qui est le prototype du constructeur {{jsxref("WebAssembly.Instance()")}} permet de modifier l'ensemble des instances {{jsxref( "WebAssembly.Instance")}} à travers la chaîne des prototypes.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Instance.prototype.constructor</code></dt> + <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Instance()")}}.</dd> + <dt><code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/WebAssembly/Instance/exports">Instance.prototype.exports</a></code> {{readonlyinline}}</dt> + <dd>Renvoie un objet dont les propriétés sont l'ensemble des fonctions exportées depuis l'instance du module WebAssembly. Cela permet d'y accéder et de les manipuler depuis du code JavaScript.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p>Aucune.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Brouillon de définition initiale pour WebAssembly.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.WebAssembly.Instance.prototype")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("WebAssembly.Instance()")}}</li> + <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li> + <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li> + <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html new file mode 100644 index 0000000000..32b16d8969 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/memory/index.html @@ -0,0 +1,72 @@ +--- +title: WebAssembly.Memory.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Memory/prototype +tags: + - JavaScript + - Propriété + - Prototype + - Reference + - WebAssembly + - memory +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Memory/prototype +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p>La propriété <code><strong>WebAssembly.Memory</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Memory()")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("WebAssembly.Memory")}} héritent de <code>Memory.prototype</code>. Le prototype du constructeur {{jsxref("WebAssembly.Memory()")}} peut être modifié afin de modifier le comportement de l'ensemble des instances de {{jsxref( "WebAssembly.Memory")}}.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Memory.prototype.constructor</code></dt> + <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Memory()")}}.</dd> + <dt>{{jsxref("WebAssembly/Memory/buffer","Memory.prototype.buffer")}}</dt> + <dd>Une propriété d'accesseur qui renvoie le tampon contenu dans l'espace mémoire.</dd> + <dt> + <h2 id="Méthodes">Méthodes</h2> + </dt> + <dt>{{jsxref("WebAssembly/Memory/grow","Memory.prototype.grow()")}}</dt> + <dd>Cette méthode permet d'accroître la taille de l'espace mémoire en ajoutant un nombre de pages WebAssembly (dont chacune mesure 64 Ko).</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblymemory-objects', 'Memory')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Brouillon de définition initiale pour WebAssembly.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.WebAssembly.Memory.prototype")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("WebAssembly.Memory()")}}</li> + <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li> + <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li> + <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/module/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/module/index.html new file mode 100644 index 0000000000..3ac694ae07 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/module/index.html @@ -0,0 +1,69 @@ +--- +title: WebAssembly.Module.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Module/prototype +tags: + - Experimental + - JavaScript + - Module + - Propriété + - Prototype + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Module/prototype +--- +<div>{{JSRef}}</div> + +<p>La propriété <code><strong>WebAssembly.Module</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Module()")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("WebAssembly.Module")}} héritent de <code>Module.prototype</code>. Le prototype du constructeur {{jsxref("WebAssembly.Module()")}} peut être modifié afin de modifier le comportement de toutes les instances de {{jsxref( "WebAssembly.Module")}}.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Module.prototype.constructor</code></dt> + <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Module()")}}.</dd> + <dt><code>Module.prototype[@@toStringTag]</code></dt> + <dd>La valeur initiale de la propriété <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Symbol/toStringTag">@@toStringTag</a></code> est la chaîne de caractères <code>"WebAssembly.Module"</code>.</dd> +</dl> + +<h2 id="Méthodes">Méthodes</h2> + +<p>Aucune.</p> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblymodule-objects', 'WebAssembly.Module()')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Brouillon de définition initiale pour WebAssembly.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.WebAssembly.Module.prototype")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("WebAssembly.Module()")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html new file mode 100644 index 0000000000..b9f2be5e36 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/global_objects/webassembly/table/index.html @@ -0,0 +1,76 @@ +--- +title: WebAssembly.Table.prototype +slug: Web/JavaScript/Reference/Objets_globaux/WebAssembly/Table/prototype +tags: + - Experimental + - JavaScript + - Propriété + - Prototype + - Reference + - WebAssembly +translation_of: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table +translation_of_original: Web/JavaScript/Reference/Global_Objects/WebAssembly/Table/prototype +--- +<div>{{JSRef}} {{SeeCompatTable}}</div> + +<p>La propriété <code><strong>WebAssembly.Table</strong></code><strong><code>.prototype</code></strong> représente le prototype du constructeur {{jsxref("WebAssembly.Table()")}}.</p> + +<div>{{js_property_attributes(0, 0, 0)}}</div> + +<h2 id="Description">Description</h2> + +<p>Toutes les instances de {{jsxref("WebAssembly.Table")}} héritent de <code>Table.prototype</code>. Le prototype du constructeur {{jsxref("WebAssembly.Table()")}} peut être modifié afin de modifier le comportement de toutes les instances {{jsxref( "WebAssembly.Table")}}.</p> + +<h2 id="Propriétés">Propriétés</h2> + +<dl> + <dt><code>Table.prototype.constructor</code></dt> + <dd>Renvoie la fonction qui a créé l'instance de l'objet. Par défaut, c'est le constructeur {{jsxref("WebAssembly.Table()")}}.</dd> + <dt>{{jsxref("WebAssembly/Table/length","Table.prototype.length")}}</dt> + <dd>Renvoie la taille du tableau, c'est-à-dire le nombre de références enregistrées dans le tableau.</dd> + <dt> + <h2 id="Méthodes">Méthodes</h2> + </dt> + <dt>{{jsxref("WebAssembly/Table/get","Table.prototype.get()")}}</dt> + <dd>Une fonction accesseur qui permet d'obtenir une référence à partir d'une position dans le tableau.</dd> + <dt>{{jsxref("WebAssembly/Table/grow","Table.prototype.grow()")}}</dt> + <dd>Cette méthode permet d'augmenter la taille de l'instance de <code>Table</code> d'un nombre donné de référence.</dd> + <dt>{{jsxref("WebAssembly/Table/set","Table.prototype.set()")}}</dt> + <dd>Cette méthode permet de changer une référence située à une position donnée dans le tableau.</dd> +</dl> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('WebAssembly JS', '#webassemblytable-objects', 'Table')}}</td> + <td>{{Spec2('WebAssembly JS')}}</td> + <td>Brouillon de définition initiale pour WebAssembly.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div> +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.builtins.WebAssembly.Table.prototype")}}</p> +</div> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("WebAssembly.Table")}}</li> + <li><a href="/fr/docs/WebAssembly">Le portail WebAssembly</a></li> + <li><a href="/fr/docs/WebAssembly/Concepts">Les concepts relatifs à WebAssembly</a></li> + <li><a href="/fr/docs/WebAssembly/Using_the_JavaScript_API">Utiliser l'API JavaScript WebAssembly</a></li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/lexical_grammar/index.html b/files/fr/conflicting/web/javascript/reference/lexical_grammar/index.html new file mode 100644 index 0000000000..dae1cd3126 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/lexical_grammar/index.html @@ -0,0 +1,94 @@ +--- +title: Mots réservés +slug: Web/JavaScript/Reference/Mots_réservés +translation_of: Web/JavaScript/Reference/Lexical_grammar#Keywords +translation_of_original: Web/JavaScript/Reference/Reserved_Words +--- +<h3 id="Introduction">Introduction</h3> + +<p>Cet annexe présente les mots réservés. Les mots réservés ne doivent pas être utilisés en tant que noms de variables, de fonctions, de méthodes ou d'identifiants d'objets parce-que <a href="/fr/ECMAScript" title="fr/ECMAScript">ECMAScript</a> spécifie une utilité spéciale pour eux.</p> + +<h3 id="Mots_actuellement_réservés">Mots actuellement réservés</h3> + +<p>Voici la liste des mots réservés actuellement utilisés en JavaScript :</p> + +<ul> + <li><a href="/en/JavaScript/Reference/Statements/break" title="en/JavaScript/Reference/Statements/break">break</a></li> + <li><a href="/en/JavaScript/Reference/Statements/switch" title="en/JavaScript/Reference/Statements/switch">case</a></li> + <li><a href="/en/JavaScript/Reference/Statements/try...catch" title="en/JavaScript/Reference/Statements/try...catch">catch</a></li> + <li><a href="/en/JavaScript/Reference/Statements/continue" title="en/JavaScript/Reference/Statements/continue">continue</a></li> + <li><a href="/en/JavaScript/Reference/Statements/debugger" title="en/JavaScript/Reference/Statements/debugger">debugger</a></li> + <li><a href="/en/JavaScript/Reference/Statements/switch" title="en/JavaScript/Reference/Statements/switch">default</a></li> + <li><a href="/en/JavaScript/Reference/Operators/Special/delete" title="en/JavaScript/Reference/Operators/Special/delete">delete</a></li> + <li><a href="/en/JavaScript/Reference/Statements/do...while" title="en/JavaScript/Reference/Statements/do...while">do</a></li> + <li><a href="/en/JavaScript/Reference/Statements/if...else" title="en/JavaScript/Reference/Statements/if...else">else</a></li> + <li><a href="/en/JavaScript/Reference/Statements/try...catch" title="en/JavaScript/Reference/Statements/try...catch">finally</a></li> + <li><a href="/en/JavaScript/Reference/Statements/for" title="en/JavaScript/Reference/Statements/for">for</a></li> + <li><a href="/en/JavaScript/Reference/Statements/function" title="en/JavaScript/Reference/Statements/function">function</a></li> + <li><a href="/en/JavaScript/Reference/Statements/if...else" title="en/JavaScript/Reference/Statements/if...else">if</a></li> + <li><a href="/en/JavaScript/Reference/Statements/for...in" title="en/JavaScript/Reference/Statements/for...in">in</a></li> + <li><a href="/en/JavaScript/Reference/Operators/Special/instanceof" title="en/JavaScript/Reference/Operators/Special/instanceof">instanceof</a></li> + <li><a href="/en/JavaScript/Reference/Operators/Special/new" title="en/JavaScript/Reference/Operators/Special/new">new</a></li> + <li><a href="/en/JavaScript/Reference/Statements/return" title="en/JavaScript/Reference/Statements/return">return</a></li> + <li><a href="/en/JavaScript/Reference/Statements/switch" title="en/JavaScript/Reference/Statements/switch">switch</a></li> + <li><a href="/en/JavaScript/Reference/Operators/Special/this" title="en/JavaScript/Reference/Operators/Special/this">this</a></li> + <li><a href="/en/JavaScript/Reference/Statements/throw" title="en/JavaScript/Reference/Statements/throw">throw</a></li> + <li><a href="/en/JavaScript/Reference/Statements/try...catch" title="en/JavaScript/Reference/Statements/try...catch">try</a></li> + <li><a href="/en/JavaScript/Reference/Operators/Special/typeof" title="en/JavaScript/Reference/Operators/Special/typeof">typeof</a></li> + <li><a href="/en/JavaScript/Reference/Statements/var" title="en/JavaScript/Reference/Statements/var">var</a></li> + <li><a href="/en/JavaScript/Reference/Operators/Special/void" title="en/JavaScript/Reference/Operators/Special/void">void</a></li> + <li><a href="/en/JavaScript/Reference/Statements/while" title="en/JavaScript/Reference/Statements/while">while</a></li> + <li><a href="/en/JavaScript/Reference/Statements/with" title="en/JavaScript/Reference/Statements/with">with</a></li> +</ul> + +<h3 id="Mots_réservés_dans_le_futur">Mots réservés dans le futur</h3> + +<p>Les mots suivants sont de futurs mots-clés réservés par la spécification ECMAScript. Bien qu'ils ne soient actuellement pas utilisés, ils ne peuvent pas servir d'identifiants d'objets car ils seront bientôt fonctionnels. (Notez que pour le moment, Mozilla réserve ces mots-clés seulement dans le code en mode strict. La plupart des autres navigateurs réservent ces mots-clés pour tout le code, qu'il soit strict ou non. Leur utilisation est souvent incompatbile entre les différents navigateurs. Mozilla réservera ces mots-clés à un code normal à l'avenir, pour correspondre aux spécifications des autres navigateurs).</p> + +<p>{{ gecko_minversion_header("2.1") }}</p> + +<div class="note"><strong>Note: </strong>En commençant avec Javascript 1.9 (Firefox 5), ces derniers seront réservés même lorsque vous n'êtes pas en mode strict.<br> +<strong>Note: La version de JavaScript ci-dessus n'est pas officielle.</strong></div> + +<ul> + <li>class</li> + <li>enum</li> + <li><a href="/en/JavaScript/Reference/Statements/export" title="en/JavaScript/Reference/Statements/export">export</a></li> + <li>extends</li> + <li><a href="/en/JavaScript/Reference/Statements/import" title="en/JavaScript/Reference/Statements/import">import</a></li> + <li>super</li> +</ul> + +<p>Les mots suivants sont de futurs mots-clés réservés par la spécification ECMAScript lorsqu'ils se situent dans de code en mode strict, excepté lorsque <code>let</code> et <code>yield</code> ont leurs fonctions traditionnelles dans le code compilé comme JavaScript 1.7 ou plus:</p> + +<ul> + <li>implements</li> + <li>interface</li> + <li><a href="/JavaScript/Reference/Statements/let" title="JavaScript/Reference/Statements/let">let</a></li> + <li>package</li> + <li>private</li> + <li>protected</li> + <li>public</li> + <li>static</li> + <li><a href="/en/JavaScript/Reference/Statements/yield" title="en/JavaScript/Reference/Statements/yield">yield</a></li> +</ul> + +<p>Note that while <a href="/en/JavaScript/Reference/Statements/const" title="en/JavaScript/Reference/Statements/const">const</a> is reserved as a future keyword by the ECMAScript specification, Mozilla and most other browsers implement it as a non-standard extension that may be standardized in a future version of ECMAScript. Further, <a href="/en/JavaScript/Reference/Statements/export" title="en/JavaScript/Reference/Statements/export">export</a> and <a href="/en/JavaScript/Reference/Statements/import" title="en/JavaScript/Reference/Statements/import">import</a> were once implemented in Mozilla but have returned to reserved status in recent releases.</p> + +<p>Additionally, the literals <code>null</code>, <code>true</code>, and <code>false</code> are reserved in ECMAScript for their normal uses.</p> + +<h2 id="Reserved_Word_Usage">Reserved Word Usage</h2> + +<p>Reserved Words actually only apply to Identifiers (vs. <span class="comment-copy">IdentifierNames) </span>. <span class="comment-copy">As described in <a href="http://es5.github.com/#A.1" rel="nofollow">es5.github.com/#A.1</a>, these are all IdentifierNames which do not exclude ReservedWords.</span></p> + +<p><span class="comment-copy"><code>a.import</code></span><br> + <span class="comment-copy"><code>a["import"]</code></span><br> + <span class="comment-copy"><code>a = { import: "test" }</code>.</span></p> + +<p><span class="comment-copy">On the other hand the following is illegal because it's an Identifier, which is an IdentifierName without the Reserved Words. Identifiers are used for FunctionDeclaration and FunctionExpression.</span></p> + +<p><span class="comment-copy"><code>function import() {}</code></span></p> + +<p> </p> + +<p>{{ languages( { "es": "es/Referencia_de_JavaScript_1.5/Palabras_Reservadas", "fr": "fr/R\u00e9f\u00e9rence_de_JavaScript_1.5_Core/Mots_r\u00e9serv\u00e9s", "ja": "ja/Core_JavaScript_1.5_Reference/Reserved_Words", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/S\u0142owa_zarezerwowane" } ) }}</p> diff --git a/files/fr/conflicting/web/javascript/reference/operators/index.html b/files/fr/conflicting/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..d11d106a96 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators/index.html @@ -0,0 +1,296 @@ +--- +title: Opérateurs arithmétiques +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Arithmetic_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Les opérateurs arithmétiques </strong>utilisent des valeurs numériques (variables ou littéraux) comme opérandes et renvoient une valeur numérique. Les opérateurs arithmétiques standard sont l'addition (+), la soustraction (-), la multiplication (*), et la division (/).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Addition_2"><a name="Addition">Addition (+)</a></h2> + +<p>L'opérateur d'addition permet d'obtenir la somme des opérandes numériques ou bien la concaténation de chaînes de caractères.</p> + +<h3 id="Syntaxe">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x + y</pre> + +<h3 id="Exemples">Exemples</h3> + +<pre class="brush: js">// nombre + nombre -> addition +1 + 2 // 3 + +// booléen + nombre -> addition +true + 1 // 2 + +// booléen + booléen -> addition +false + false // 0 + +// nombre + chaîne de caractères -> concaténation +5 + " + + concaténation +"toto" + false // "totofalse" + +// chaîne de caractères + chaîne de caractères -> concaténation +"toto" + "truc" // "tototruc" +</pre> + +<h2 id="Soustraction_-"><a name="Subtraction">Soustraction (-)</a></h2> + +<p>L'opérateur de soustraction soustrait les deux opérandes pour obtenir leur différence.</p> + +<h3 id="Syntaxe_2">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x - y</pre> + +<h3 id="Exemples_2">Exemples</h3> + +<pre class="brush:js">5 - 3 // 2 +3 - 5 // -2 +"toto" - 3 // NaN +</pre> + +<h2 id="Division_2"><a name="Division">Division (/)</a></h2> + +<p>L'opérateur de division produit le quotient de ces opérandes avec l'opérande gauche comme numérateur et l'opérande droit comme dénominateur.</p> + +<h3 id="Syntaxe_3">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x / y</pre> + +<h3 id="Exemples_3">Exemples</h3> + +<pre class="brush: js">1 / 2 // renvoie 0.5 en JavaScript +1 / 2 // renvoie 0 en Java +// (aucun des deux opérandes n'est un nombre flottant de façon explicite) + +1.0 / 2.0 // renvoie 0.5 en JavaScript et Java + +2.0 / 0 // renvoie Infinity (pour l'infini) en JavaScript +2.0 / 0.0 // renvoie Infinity également +2.0 / -0.0 // renvoie -Infinity en JavaScript</pre> + +<h2 id="Multiplication_*"><a name="Multiplication">Multiplication (*)</a></h2> + +<p>L'opérateur de multiplication permet d'obtenir le produit des opérandes.</p> + +<h3 id="Syntaxe_4">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x * y</pre> + +<h3 id="Exemples_4">Exemples</h3> + +<pre class="brush: js">2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +"toto" * 2 // NaN +</pre> + +<h2 id="Reste"><a name="Remainder">Reste (%)</a></h2> + +<p>L'opérateur « reste » renvoie le reste de la division du premier opérande par le second. Le résultat obtenu a toujours le signe du numérateur (la quantité divisée).</p> + +<h3 id="Syntaxe_5">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : var1 % var2</pre> + +<h3 id="Exemples_5">Exemples</h3> + +<pre class="brush: js">12 % 5 // 2 +-1 % 2 // -1 +1 % -2 // 1 +NaN % 2 // NaN +1 % 2 // 1 +2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5</pre> + +<h2 id="Exponentiation_**"><a id="Exponentiation" name="Exponentiation">Exponentiation (**)</a></h2> + +<p>L'opérateur d'exponentiation (aussi appelé opérateur de puissance) renvoie le résultat de l'élévation d'un nombre (premier opérande) à une puissance donnée (deuxième opérande). Par exemple : <code>var1 ** var2</code> sera équivalent à <code>var1<sup>var2</sup></code> en notation mathématique. Cet opérateur est associatif à droite, autrement dit <code>a ** b ** c</code> est égal à <code>a ** (b ** c)</code>.</p> + +<h3 id="Syntaxe_6">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : var1 ** var2</pre> + +<h3 id="Notes">Notes</h3> + +<p>Dans la plupart des langages (par exemple PHP, Python, etc.), l'opérateur d'exponentiation est défini avec une précédence supérieure à celle des opérateurs unaires tels que le plus unaire et le moins unaire. Des exceptions existent comme Bash où l'opérateur ** a une précédence inférieure à celle des opérateurs unaires. En JavaScript, il est impossible d'écrire une expression ambigüe avec l'exponentiation : il est impossible de placer un opérateur unaire juste avant le nombre.</p> + +<pre class="brush: js">-2 ** 2; +// vaut 4 en Bash ou -4 avec d'autres langages +// C'est invalide en JavaScript car il y +// une ambiguïté liée à l'expression + +- (2 ** 2); +// -4 en JavaScript car les parenthèses lèvent +// l'ambiguïté +</pre> + +<h3 id="Exemples_6">Exemples</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64</pre> + +<div class="note"> +<p><strong>Note :</strong> JavaScript possède également <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(XOR_binaire)">un opérateur binaire ^ (XOR logique)</a>. <code>**</code> et <code>^</code> sont deux opérateurs bien différents. Par exemple <code>2 ** 3 === 8</code> et <code>2 ^ 3 === 1</code>.</p> +</div> + +<h2 id="Incrément"><a name="Increment">Incrément (++)</a></h2> + +<p>L'opérateur d'incrément ajoute une unité à son opérande et renvoie une valeur.</p> + +<ul> + <li>Si l'opérateur est utilisé en suffixe (par exemple : x++), il renvoie la valeur avant l'incrémentation.</li> + <li>Si l'opérateur est utilisé en préfixe (par exemple : ++x), il renvoie la valeur après l'incrémentation.</li> +</ul> + +<h3 id="Syntaxe_7">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x++ ou ++x</pre> + +<h3 id="Exemples_7">Exemples</h3> + +<pre class="brush: js">// Suffixe +var x = 3; +y = x++; // y = 3, x = 4 + +// Préfixe +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="Décrément_--"><a name="Decrement">Décrément (--)</a></h2> + +<p>L'opérateur de décrément soustrait une unité à son opérande et renvoie une valeur.</p> + +<ul> + <li>Si l'opérateur est utilisé en suffixe (par exemple : x--), il renvoie la valeur avant la décrémentation.</li> + <li>Si l'opérateur est utilisé en préfixe (par exemple : --x), il renvoie la valeur après la décrémentation.</li> +</ul> + +<h3 id="Syntaxe_8">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : x-- ou --x</pre> + +<h3 id="Exemples_8">Exemples</h3> + +<pre class="brush: js">// Suffixe +var x = 3; +y = x--; // y = 3, x = 2 + +// Préfixe +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Négation_unaire_-"><a name="Unary_negation">Négation unaire (-)</a></h2> + +<p>L'opérateur de négation unaire précède son opérande et prend l'opposé de celui-ci (après l'avoir converti en nombre si besoin).</p> + +<h3 id="Syntaxe_9">Syntaxe</h3> + +<pre class="syntaxbox">Opérateur : -x</pre> + +<h3 id="Exemples_9">Exemples</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 + +// La négation unaire permet de convertir +// un opérande en nombre +var y = "4"; +var z = -y; // z = -4 +</pre> + +<h2 id="Plus_unaire"><a name="Unary_plus">Plus unaire</a> (+)</h2> + +<p>L'opérateur unaire plus (+) précède son opérande, l'évaluation correspond à son opérande, converti en nombre si possible et si ce n'est pas déjà un nombre. Bien que l'opérateur de négation unaire (-) puisse également convertir les expressions qui ne sont pas des nombres, le plus unaire est la méthode la plus efficace et celle la plus utilisée pour convertir quelque chose en un nombre car la conversion est la seule opération effectuée. Cet opérateur permet de convertir les chaînes de caractères représentant des nombres entiers, des nombres flottants ainsi que les valeurs <code>true</code>, <code>false</code>, et <code>null</code>. Les entiers, représentés sous forme décimale ou hexadécimale (préfixés par "0x"), sont supportés. Les nombres négatifs sont également supportés (mais pas au format hexadécimal). Si l'opérateur ne peut pas analyser l'opérande fourni, il sera évalué à <a href="/fr/docs/JavaScript/Reference/Propriétés_globales/NaN">NaN</a>.</p> + +<h3 id="Syntaxe_10">Syntaxe</h3> + +<pre class="syntaxbox">Opérator : +x</pre> + +<h3 id="Exemples_10">Exemples</h3> + +<pre class="brush: js">+3 // 3 ++"3" // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val; } // NaN +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td><a href="https://github.com/rwaldron/exponentiation-operator">Ajout de l'opérateur d'exponentiation.</a></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-postfix-expressions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Définis au sein de plusieurs sections de cette spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-additive-operators">Opérateurs additifs</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-multiplicative-operators">opérateurs multiplicatifs</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-postfix-expressions">expressions postfixes</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-unary-operators">opérateurs unaires</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.3')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définis au sein de plusieurs sections de cette spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.6">Opérateurs additifs</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.5">opérateurs multiplicatifs</a>,<a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.3"> expressions postfixes</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.4">opérateurs unaires</a>.</td> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation">Opérateurs d'affectation</a></li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/operators_03cb648b1d07bbaa8b57526b509d6d55/index.html b/files/fr/conflicting/web/javascript/reference/operators_03cb648b1d07bbaa8b57526b509d6d55/index.html new file mode 100644 index 0000000000..50d1221a40 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators_03cb648b1d07bbaa8b57526b509d6d55/index.html @@ -0,0 +1,257 @@ +--- +title: Opérateurs de comparaison +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_comparaison +tags: + - JavaScript + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Comparison_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>JavaScript possède des opérateurs de comparaisons stricts et des opérateurs de comparaisons qui effectuent des conversions. Une comparaison strict (ex. : <code>===</code>) ne sera vraie que si les deux opérandes sont du même type. La comparaison d'égalité faible (<code>==</code>) convertira les deux opérandes en un même type avant d'effectuer la comparaison. Pour les comparaisons relationnelles (ex. : <code><=</code>), les opérandes sont tout d'abord converties en valeurs, puis en valeurs du même type, enfin la comparaison est effectuée.</p> + +<p>Les chaînes de caractères sont comparées en fonction de l'ordre lexicographique, avec des valeurs Unicode.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-comparisonoperators.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Les règles de comparaisons pour <a href="/fr/docs/Web/JavaScript/Structures_de_données#Les_valeurs_primitives">les types primitifs</a> sont les suivantes :</p> + +<ul> + <li>Deux chaînes de caractères sont strictement égales lorsqu'elles ont la même séquence de caractères, la même longueur et les mêmes caractères aux mêmes positions.</li> + <li>Deux nombres sont strictement égaux lorsqu'ils ont la même valeur. {{jsxref("Objets_globaux/NaN","NaN")}} n'est égal à rien, y compris lui-même. Le zéro positif et le zéro négatif sont considérés égaux.</li> + <li>Deux booléens sont strictement égaux s'ils valent tous les deux <code>true</code> ou tous les deux <code>false</code>.</li> + <li>Deux objets distincts ne sont jamais égaux l'un à l'autre (pour l'égalité faible et stricte).</li> + <li>Deux objets sont égaux si les deux opérandes sont des références au même objet.</li> + <li>Les types nul et indéfini sont strictement égaux à eux-mêmes et sont faiblement égaux l'un à autre.</li> +</ul> + +<h2 id="Les_opérateurs_dégalité">Les opérateurs d'égalité</h2> + +<h3 id="Égalité_simple"><a>Égalité simple (==)</a></h3> + +<p>L'opérateur d'égalité simple convertit les deux opérandes s'<strong>ils ne sont pas du même type</strong>, ensuite la comparaison stricte est appliquée. Si <strong>les deux opérandes sont des objets</strong>, le moteur JavaScript comparera les références internes pour voir si elles réfèrent au même objet en mémoire.</p> + +<h4 id="Syntaxe">Syntaxe</h4> + +<pre class="syntaxbox">x == y +</pre> + +<h4 id="Exemples">Exemples</h4> + +<pre class="brush: js"> 1 == 1; // true +"1" == 1; // true + 1 == '1'; // true + 0 == false; // true + 0 == null; // false + 0 == undefined // false +null == undefined // true + +var obj1 = { "clé": "valeur"}; +var obj2 = { "clé": "valeur"}; +obj1 == obj2 // false +</pre> + +<h3 id="Inégalité_simple_!"><a>Inégalité simple (!=)</a></h3> + +<p>L'opérateur d'inégalité simple renvoie <code>true</code> si les deux opérandes ne sont pas égaux. Si les deux opérandes <strong>ne sont pas du même type</strong>, une conversion sera effectuée vers un type adéquat. <strong>Si les deux opérandes sont des objets,</strong> le moteur JavaScript comparera les références internes pour voir si elles réfèrent à des objets différents en mémoire.</p> + +<h4 id="Syntaxe_2">Syntaxe</h4> + +<pre class="syntaxbox">x != y</pre> + +<h4 id="Exemples_2">Exemples</h4> + +<pre class="brush: js">1 != 2; // true +1 != "1"; // false +1 != '1'; // false +1 != true; // false +0 != false; // false +</pre> + +<h3 id="Égalité_stricte"><a>Égalité stricte (===)</a></h3> + +<p>L'opérateur d'égalité stricte renvoie <code>true</code> si les opérandes sont strictement égaux (voir ci-avant), <strong>aucune conversion de type n'est effectuée</strong>.</p> + +<h4 id="Syntaxe_3">Syntaxe</h4> + +<pre class="syntaxbox">x === y</pre> + +<h4 id="Exemples_3">Exemples</h4> + +<pre class="brush: js ">3 === 3 // true +3 === '3' // false + +var objet1 = {'clé': 'valeur'}; +var objet2 = {'clé': 'valeur'}; +objet1 === objet2; // false +</pre> + +<h3 id="Inégalité_stricte_!"><a>Inégalité stricte (!==)</a></h3> + +<p>L'opérateur d'inégalité stricte renvoie <code>true</code> si les opérandes sont de types différents ou ne sont pas égaux.</p> + +<h4 id="Syntaxe_4">Syntaxe</h4> + +<pre class="syntaxbox">x !== y</pre> + +<h4 id="Exemples_4">Exemples</h4> + +<pre class="brush: js">3 !== '3' // true +4 !== 3 // true +</pre> + +<h2 id="Opérateurs_relationnels">Opérateurs relationnels</h2> + +<div class="note"> +<p><strong>Note :</strong> Chacun de ces opérateurs invoquera la fonction <code>valueOf()</code> des opérandes qui sont des objets avant d'effectuer la comparaison.</p> +</div> + +<h3 id="Supérieur_strict_>"><a>Supérieur strict (>)</a></h3> + +<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est strictement supérieur à l'opérande droit.</p> + +<h4 id="Syntaxe_5">Syntaxe</h4> + +<pre class="syntaxbox">x > y</pre> + +<h4 id="Exemples_5">Exemples</h4> + +<pre class="brush: js">4 > 3; // true +</pre> + +<h3 id="Supérieur_ou_égal_>"><a>Supérieur ou égal (>=)</a></h3> + +<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est supérieur ou égal à l'opérande droit</p> + +<h4 id="Syntaxe_6">Syntaxe</h4> + +<pre class="syntaxbox"> x >= y</pre> + +<h4 id="Exemples_6">Exemples</h4> + +<pre class="brush: js">4 >= 3; // true +3 >= 3; // true +</pre> + +<h3 id="Inférieur_strict_<"><a>Inférieur strict (<)</a></h3> + +<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est strictement inférieur à l'opérande droit</p> + +<h4 id="Syntaxe_7">Syntaxe</h4> + +<pre class="syntaxbox"> x < y</pre> + +<h4 id="Exemples_7">Exemples</h4> + +<pre class="brush: js">3 < 4; // true +</pre> + +<h3 id="Inférieur_ou_égal_<"><a>Inférieur ou égal (<=)</a></h3> + +<p>Cet opérateur renvoie <code>true</code> si l'opérande gauche est inférieur ou égal à l'opérande droit</p> + +<h4 id="Syntaxe_8">Syntaxe</h4> + +<pre class="syntaxbox"> x <= y</pre> + +<h4 id="Exemples_8">Exemples</h4> + +<pre class="brush: js">3 <= 4; // true +</pre> + +<h2 id="Utiliser_les_opérateurs_dégalité">Utiliser les opérateurs d'égalité</h2> + +<p>Les opérateurs d'égalité/inégalité faible (<code>==</code> et <code>!=</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.3">l'algorithme de comparaison d'égalité abstraite</a> afin de comparer les deux opérandes. Si les opérandes sont de types primitifs différents, le moteur tentera de les convertir en un même type avant d'effectuer la comparaison. Ainsi, dans l'expression <code>5 == '5'</code>, la chaîne de droite est convertie en un nombre avant que la comparaison soit faite.</p> + +<p>Les opérateurs d'égalité/inégalité stricte (<code>===</code> et <code>!==</code>) utilisent <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9.6">l'algorithme de comparaison d'égalité stricte</a>. Si les opérandes sont de types différents, le résultat sera toujours <code>false</code>, on aura donc <code>5 !== '5'</code>.</p> + +<p>Selon qu'on souhaite comparer des opérandes qui sont censés avoir le même type ou non, on utilisera l'un ou l'autre type d'opérateur.</p> + +<p>Si un opérande doit être comparé à un autre type, le moteur effectuera une conversion de la façon suivante :</p> + +<ul> + <li>Lorsqu'une comparaison est opérée entre une chaîne de caractères et un nombre, Javascript tente de convertir la chaine en une valeur numérique. Une valeur mathématique est obtenue à partir de la chaîne littérale numérique, puis celle-ci est arrondie à une valeur de type Nombre.</li> + <li>Si l'un des opérandes est de type booléen, <code>true</code> sera converti en 1 et <code>false</code> en +0.</li> + <li>Si on compare un objet avec un nombre ou une chaîne, le moteur JavaScript tentera de renvoyer la valeur par défaut de l'objet. Les opérateurs opèrent une conversion grâce aux méthodes <code>valueOf</code> (pour obtenir un nombre) et <code>toString</code> (pour obtenir une chaîne de caractères). Si cela ne fonctionne pas, une exception sera levée.</li> + <li>Un objet sera converti en un type primitif autre uniquement si l'autre opérande est un type primitif (autre qu'objet). Si les deux opérandes sont des objets, ils seront comparés comme deux objets (voir ci-avant) et l'égalité ne sera vérifiée que si les opérandes font référence au même objet en mémoire</li> +</ul> + +<div class="note"> +<p><strong>Note :</strong> Voir également la page sur <a href="/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser">les différents tests d'égalité et quand les utiliser</a>.</p> +</div> + +<div class="note"><strong>Note :</strong> Les objets String sont du type objet et ne sont pas de simples chaînes de caractères ! Cela peut parfois avoir des conséquences surprenantes :</div> + +<pre class="brush:js">// true car les deux opérandes sont du type primitif chaîne de caractères +'toto' === 'toto' + +var a = new String('toto'); +var b = new String('toto'); + +// false car a et b sont du type objet mais font référence à deux objets distincts +a == b + +// false car a et b sont du type objet mais font référence à deux objets distincts +a === b + +// true car a et 'toto' sont de type différents et lorsque a est +// converti, la fonction de conversion renvoie bien la chaîne 'toto' +a == 'toto' </pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale. Implémentée avec JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Ajoute les opérateurs <code>===</code> et <code>!==</code>. Implémentés avec JavaScript 1.3</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.8')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.8">opérateurs relationnels</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.9">opérateurs d'égalité</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-relational-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-relational-operators">opérateurs relationnels</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-equality-operators">opérateurs d'égalité</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-relational-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-relational-operators">opérateurs relationnels</a>, <a href="https://tc39.github.io/ecma262/#sec-equality-operators">opérateurs d'égalité</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.comparison")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Object.is()")}}</li> + <li>{{jsxref("Math.sign()")}}</li> + <li><a href="/fr/docs/Web/JavaScript/Guide/%C3%89galit%C3%A9_en_JavaScript">L'égalité en JavaScript</a></li> + <li><a href="/fr/docs/Web/JavaScript/Les_diff%C3%A9rents_tests_d_%C3%A9galit%C3%A9_comment_les_utiliser">Les différents tests d'égalité en JavaScript</a></li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/operators_201bc9aef1615ff38f215c35d4cde8c9/index.html b/files/fr/conflicting/web/javascript/reference/operators_201bc9aef1615ff38f215c35d4cde8c9/index.html new file mode 100644 index 0000000000..5b7ec3375f --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators_201bc9aef1615ff38f215c35d4cde8c9/index.html @@ -0,0 +1,28 @@ +--- +title: Opérateurs de chaînes +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_de_chaînes +translation_of: Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition +translation_of_original: Web/JavaScript/Reference/Operators/String_Operators +--- +<p> </p> +<h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> +<p>En complément des opérateurs de comparaison, qui peuvent être utilisés sur des valeurs chaînes de caractères, l'opérateur de concaténation (<code>+</code>) permet d'assembler deux chaînes, en renvoyant une nouvelle chaîne étant l'union des deux opérandes chaînes. Par exemple, <code>"ma " + "chaîne"</code> renvoie la chaîne <code>"ma chaîne"</code>.</p> +<p>L'opérateur raccourci d'assignation <code>+=</code> peut également être utilisé pour concaténer des chaînes. Par exemple, si la variable <code>ma_chaine</code> a la valeur <code>"alpha"</code>, l'expression <code>ma_chaine += "bet"</code> sera évaluée à <code>"alphabet"</code> et assignera cette valeur à la variable <code>ma_chaine</code>.</p> +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header" colspan="2">Opérateur</td> + </tr> + <tr> + <td>Implémentation :</td> + <td>JavaScript 1.0</td> + </tr> + <tr> + <td>Version ECMA :</td> + <td>ECMA-262</td> + </tr> + </tbody> +</table> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/Core_JavaScript_1.5_Reference/Operators/String_Operators", "es": "es/Referencia_de_JavaScript_1.5/Operadores/String", "pl": "pl/Dokumentacja_j\u0119zyka_JavaScript_1.5/Operatory/Operatory_dzia\u0142aj\u0105ce_na_ci\u0105gach_znak\u00f3w" } ) }}</p> diff --git a/files/fr/conflicting/web/javascript/reference/operators_2be16fc74d75a7c9dca0abca1dc5883b/index.html b/files/fr/conflicting/web/javascript/reference/operators_2be16fc74d75a7c9dca0abca1dc5883b/index.html new file mode 100644 index 0000000000..d019cb8637 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators_2be16fc74d75a7c9dca0abca1dc5883b/index.html @@ -0,0 +1,414 @@ +--- +title: Opérateurs d'affectation +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_d_affectation +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators#Assignment_operators +translation_of_original: Web/JavaScript/Reference/Operators/Assignment_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Un <strong>opérateur d'affectation</strong> permet d'assigner une valeur à son opérande gauche en se basant sur la valeur de son opérande droit.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-assignment.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Description">Description</h2> + +<p>L'opérateur utilisé pour l'affectation est le symbole égal (<code>=</code>), il permet d'affecter la valeur de l'opérande droit à son opérande gauche. Ainsi, quand on écrit <code>x = y</code>, on affecte la valeur de <code>y</code> à <code>x</code>. Les autres opérateurs d'affectation sont généralement des raccourcis pour des opérations standards. Ils sont décrits ci-après avec définitions et exemples.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Nom</th> + <th>Opérateur (raccourci)</th> + <th>Signification</th> + </tr> + <tr> + <td><a href="#Assignment">Affectation</a></td> + <td><code>x = y</code></td> + <td><code>x = y</code></td> + </tr> + <tr> + <td><a href="#Addition_assignment">Affectation après addition</a></td> + <td><code>x += y</code></td> + <td><code>x = x + y</code></td> + </tr> + <tr> + <td><a href="#Subtraction_assignment">Affectation après soustraction</a></td> + <td><code>x -= y</code></td> + <td><code>x = x - y</code></td> + </tr> + <tr> + <td><a href="#Multiplication_assignment">Affectation après multiplication</a></td> + <td><code>x *= y</code></td> + <td><code>x = x * y</code></td> + </tr> + <tr> + <td><a href="#Division_assignment">Affectation après division</a></td> + <td><code>x /= y</code></td> + <td><code>x = x / y</code></td> + </tr> + <tr> + <td><a href="#Remainder_assignment">Affectation du reste</a></td> + <td><code>x %= y</code></td> + <td><code>x = x % y</code></td> + </tr> + <tr> + <td><a href="#Exponentiation">Affectation après exponentiation</a></td> + <td><code>x **= y</code></td> + <td><code>x = x ** y</code></td> + </tr> + <tr> + <td><a href="#Left_shift_assignment">Affectation après décalage à gauche</a></td> + <td><code>x <<= y</code></td> + <td><code>x = x << y</code></td> + </tr> + <tr> + <td><a href="#Right_shift_assignment">Affectation après décalage à droite</a></td> + <td><code>x >>= y</code></td> + <td><code>x = x >> y</code></td> + </tr> + <tr> + <td><a href="#Unsigned_right_shift_assignment">Affectation après décalage à droite non-signé</a></td> + <td><code>x >>>= y</code></td> + <td><code>x = x >>> y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_AND_assignment">Affectation après ET binaire</a></td> + <td><code>x &= y</code></td> + <td><code>x = x & y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_XOR_assignment">Affectation après OU exclusif binaire</a></td> + <td><code>x ^= y</code></td> + <td><code>x = x ^ y</code></td> + </tr> + <tr> + <td><a href="#Bitwise_OR_assignment">Affectation après OU binaire</a></td> + <td><code>x |= y</code></td> + <td><code>x = x | y</code></td> + </tr> + </tbody> +</table> + +<h2 id="Affectation"><a name="Assignment">Affectation</a></h2> + +<p>L'opérateur d'affectation simple permet d'assigner une valeur à une variable. Le résultat de l'affectation est la valeur affectée. Il est possible de chaîner plusieurs opérateurs d'affectation afin d'assigner une même valeur à plusieurs variables. Voir l'exemple ci-après.</p> + +<h4 id="Syntaxe">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x = y +</pre> + +<h4 id="Exemples">Exemples</h4> + +<pre class="brush: js">// Si on dispose des variables suivantes : +// x = 5; +// y = 10; +// z = 25; + +x = y; // x vaudra désormais 10 +x = y = z; // x, y et z valent désormais tous 25 +</pre> + +<h3 id="Affectation_après_addition"><a name="Addition_assignment">Affectation après addition</a></h3> + +<p>Cet opérateur permet d'ajouter la valeur de l'opérande droit à une variable, le résultat de l'addition étant affecté à cette variable. Les types des deux opérandes déterminent le comportement de l'opérateur. Selon le type, on pourra en effet avoir une addition ou une concaténation. Voir la page sur l'opérateur d'{{jsxref("Opérateurs/Opérateurs_arithmétiques", "addition", "#Addition_(.2B)", 1)}} pour plus d'informations.</p> + +<h4 id="Syntaxe_2">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x += y +<strong>Signification :</strong> x = x + y +</pre> + +<h4 id="Exemples_2">Exemples</h4> + +<pre class="brush: js">// Si on dispose des variables suivantes : +// toto = "toto"; +// truc = 5; +// machin = true; + + +// Nombre + Nombre -> addition +truc += 2; // 7 + +// Booléen + Booléen -> addition +machin += 1; // 2 + +// Booléen + Booléen -> addition +machin += false; // 1 + +// Nombre + String -> concaténation +truc += "toto"; // "5toto" + +// String + Booléen -> concaténation +toto += false; // "totofalse" + +// String + String -> concaténation +toto += "truc"; // "tototruc" +</pre> + +<h3 id="Affectation_après_soustraction"><a name="Subtraction_assignment">Affectation après soustraction</a></h3> + +<p>Cet opérateur soustrait la valeur de l'opérande droit à la variable puis affecte le résultat de cette soustraction à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "soustraction", "#Soustraction_(-)", 1)}} pour plus d'information.</p> + +<h4 id="Syntaxe_3">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x -= y +<strong>Signification :</strong> x = x - y +</pre> + +<h4 id="Exemples_3">Exemples</h4> + +<pre class="brush: js">// Si on a la variable suivante : +// truc = 5; + +truc -= 2; // 3 +truc -= "toto"; // NaN +</pre> + +<h3 id="Affectation_après_multiplication"><a name="Multiplication_assignment">Affectation après multiplication</a></h3> + +<p>Cet opérateur permet de multiplier une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "multiplication", "#Multiplication_(*)", 1)}} pour plus d'informations.</p> + +<h4 id="Syntaxe_4">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x *= y +<strong>Signification :</strong> x = x * y +</pre> + +<h4 id="Exemples_4">Exemples</h4> + +<pre class="brush: js">// Si on a la variable suivante : +// truc = 5; + +truc *= 2; // 10 +truc *= "toto"; // NaN +</pre> + +<h3 id="Affectation_après_division"><a name="Division_assignment">Affectation après division</a></h3> + +<p>Cet opérateur permet de diviser une variable par la valeur de l'opérande droit et d'affecter le résultat de cette opération à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_arithmétiques", "division", "#Division_(.2F)", 1)}} pour plus d'informations.</p> + +<h4 id="Syntaxe_5">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x /= y +<strong>Signification :</strong> x = x / y +</pre> + +<h4 id="Exemples_5">Exemples</h4> + +<pre class="brush: js">// Si on a la variable suivante : +// truc = 5; + +truc /= 2; // 2.5 +truc /= "toto"; // NaN +truc /= 0; // Infinity +</pre> + +<h3 id="Affectation_du_reste"><a name="Remainder_assignment">Affectation du reste</a></h3> + +<p>Cet opérateur permet de divisier une variable par la valeur de l'opérande droit et d'affecter le reste de cette division à la variable. Pour plus d'informations, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "reste", "#Reste_(.25)", 1)}}.</p> + +<h4 id="Syntaxe_6">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x %= y +<strong>Signification :</strong> x = x % y +</pre> + +<h4 id="Exemples_6">Exemples</h4> + +<pre class="brush: js">// Si on a la variable suivante : +// truc = 5; + +truc %= 2; // 1 +truc %= "toto"; // NaN +truc %= 0; // NaN +</pre> + +<h3 id="Affectation_après_exponentiation"><a id="Exponentiation" name="Exponentiation">Affectation après exponentiation</a></h3> + +<p>L'opérateur d'affectation après exponentiation renvoie le résultat de l'élévation du premier opérande à la puissance donnée par le second opérande. Pour plus de détails, voir la page sur {{jsxref("Opérateurs/Opérateurs_arithmétiques", "l'opérateur d'exponentiation", "#Exponentiation_(**)", 1)}} for more details.</p> + +<h4 id="Syntaxe_7">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x **= y +<strong>Signification :</strong> x = x ** y +</pre> + +<h4 id="Exemples_7">Exemples</h4> + +<pre class="brush: js">// Si on a la variable : +// toto = 5 + +toto **= 2 // 25 +toto **= "truc" // NaN</pre> + +<h3 id="Affectation_après_décalage_à_gauche"><a name="Left_shift_assignment">Affectation après décalage à gauche</a></h3> + +<p>Cet opérateur permet de décaler un nombre donné de bits vers la gauche, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à gauche", "#.3C.3C_.28d.C3.A9calage_.C3.A0_gauche.29", 1)}} pour plus d'informations.</p> + +<h4 id="Syntaxe_8">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x <<= y +<strong>Signification :</strong> x = x << y +</pre> + +<h4 id="Exemples_8">Exemples</h4> + +<pre class="brush: js">var toto = 5; // (00000000000000000000000000000101) +toto <<= 2; // 20 (00000000000000000000000000010100) +</pre> + +<h3 id="Affectation_après_décalage_à_droite"><a name="Right_shift_assignment">Affectation après décalage à droite</a></h3> + +<p>Cet opérateur permet de décaler un nombre donné de bits vers la droite, le résultat de l'opération est ensuite affecté à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite", "##.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_propagation_du_signe.29", 1)}} pour plus d'informations.</p> + +<h4 id="Syntaxe_9">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x >>= y +<strong>Signification :</strong> x = x >> y +</pre> + +<h4 id="Exemples_9">Exemples</h4> + +<pre class="brush: js">var toto = 5; // (00000000000000000000000000000101) +toto >>= 2; // 1 (00000000000000000000000000000001) + +var toto -5; // (-00000000000000000000000000000101) +toto >>= 2; // -2 (-00000000000000000000000000000010) +</pre> + +<h3 id="Affectation_après_décalage_à_droite_non-signé"><a name="Unsigned_right_shift_assignment">Affectation après décalage à droite non-signé</a></h3> + +<p>Cet opérateur permet de décaler le contenu de la variable d'un nombre de bits donné pour ensuite affecter le résultat à la variable. Voir la page sur l'opérateur de {{jsxref("Opérateurs/Opérateurs_binaires", "décalage à droite non-signé", "#.3E.3E.3E_.28d.C3.A9calage_.C3.A0_droite_avec_insertion_de_z.C3.A9ros.29", 1)}} pour plus de détails.</p> + +<h4 id="Syntaxe_10">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x >>>= y +<strong>Signification :</strong> x = x >>> y +</pre> + +<h4 id="Exemples_10">Exemples</h4> + +<pre class="brush: js">var toto = 5; // (00000000000000000000000000000101) +toto >>>= 2; // 1 (00000000000000000000000000000001) + +var toto = -5; // (-00000000000000000000000000000101) +toto >>>= 2; // 1073741822 (00111111111111111111111111111110)</pre> + +<h3 id="Affectation_après_ET_binaire"><a name="Bitwise_AND_assignment">Affectation après ET binaire</a></h3> + +<p>Cet opérateur effectue une opération ET binaire sur les deux opérandes et affecte le résultat de l'opération à la variable (l'opérande gauche). Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire ET", "#&_.28ET_binaire.29", 1)}}.</p> + +<h4 id="Syntaxe_11">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x &= y +<strong>Signification :</strong> x = x & y +</pre> + +<h4 id="Exemple">Exemple</h4> + +<pre class="brush: js">var truc = 5; +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +truc &= 2; // 0 +</pre> + +<h3 id="Affectation_après_OU_exclusif_(XOR)_binaire"><a name="Bitwise_XOR_assignment">Affectation après OU exclusif (<em>XOR</em>) binaire</a></h3> + +<p>Cet opérateur utilise une représentation binaire des deux opérandes, effectue une opération binaire avec un OU exclusif et affecte le résultat à la variable. Pour plus d'informations sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "binaire OU exclusif", "#.5E_.28XOR_binaire.29", 1)}}.</p> + +<h4 id="Syntaxe_12">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x ^= y +<strong>Signification :</strong> x = x ^ y +</pre> + +<h4 id="Exemple_2">Exemple</h4> + +<pre class="brush: js">var toto = 5; +toto ^= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h3 id="Affectation_après_OU_binaire"><a name="Bitwise_OR_assignment">Affectation après OU binaire</a></h3> + +<p>Cet opérateur utilise une représentation binaire des deux opérandes, effectue un OU logique binaire entre ces deux variables et affecte le résultat de l'opération à la variable. Pour plus de détails sur cette opération, voir la page sur l'opérateur {{jsxref("Opérateurs/Opérateurs_binaires", "OU binaire", "#|_.28OU_binaire.29", 1)}}.</p> + +<h4 id="Syntaxe_13">Syntaxe</h4> + +<pre class="syntaxbox"><strong>Opérateur :</strong> x |= y +<strong>Signification :</strong> x = x | y +</pre> + +<h4 id="Exemple_3">Exemple</h4> + +<pre class="brush: js">var toto = 5; +toto |= 2; // 7 +// 5: 00000000000000000000000000000101 +// 2: 00000000000000000000000000000010 +// ----------------------------------- +// 7: 00000000000000000000000000000111 +</pre> + +<h2 id="Exemples_11">Exemples</h2> + +<h3 id="Opérande_gauche_utilisé_avec_un_autre_opérateur_d'affectation">Opérande gauche utilisé avec un autre opérateur d'affectation</h3> + +<p>Dans certains cas, l'opérateur d'affectation (par exemple<code> x += y</code>) n'est pas identique à l'expression développée correspondante (respectivement <code>x = x + y</code>). Lorsque l'opérande gauche contient lui-même un opérateur d'affectation, l'opérande gauche n'est évalué qu'une fois. Ainsi :</p> + +<pre class="brush: js">a[i++] += 5 // i est évalué une fois +a[i++] = a[i++] + 5 // i est évalué deux fois +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-assignment-operators', 'Assignment operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-assignment-operators', 'Assignment operators')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.13', 'Assignment operators')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11.13', 'Assignment operators')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.assignment")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_arithmétiques">Les opérateurs arithmétiques</a></li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/operators_688eef608213025193cd6b8e1e75b5c3/index.html b/files/fr/conflicting/web/javascript/reference/operators_688eef608213025193cd6b8e1e75b5c3/index.html new file mode 100644 index 0000000000..af76410f01 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators_688eef608213025193cd6b8e1e75b5c3/index.html @@ -0,0 +1,554 @@ +--- +title: Opérateurs binaires +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires +tags: + - JavaScript + - Operator + - Opérateur + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Bitwise_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Les opérateurs binaires traitent leurs opérandes comme des séquences de 32 bits (des zéros et des uns), plutôt que comme des nombres décimaux, hexadécimaux ou octaux. Par exemple, le nombre décimal neuf a une représentation binaire de 1001. Les opérateurs binaires traitent de telles représentations binaires, mais renvoient des valeurs numériques JavaScript standards.</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-bitwiseoperators.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>Le tableau qui suit résume les opérateurs binaires de JavaScript :</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Opérateur</th> + <th>Utilisation</th> + <th>Description</th> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(ET_binaire)">ET binaire</a></td> + <td><code>a & b</code></td> + <td> + <p>Renvoie un <code>1</code> pour chaque position de bit pour laquelle les bits correspondants des deux opérandes sont des <code>1</code>.</p> + </td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(OU_binaire)">OU binaire</a></td> + <td><code>a | b</code></td> + <td>Renvoie un <code>1</code> pour chaque position de bit pour laquelle le bit correspondant d'au moins un des deux opérandes est un <code>1</code> .</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(XOR_binaire)">OU exclusif binaire (<em>XOR</em>)</a></td> + <td><code>a ^ b</code></td> + <td>Renvoie un <code>1</code> pour chaque position de bit pour laquelle le bit correspondant d'un seul des deux opérandes est un <code>1</code>.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#(NON_binaire)">NON binaire</a></td> + <td><code>~ a</code></td> + <td>Inverse les bits de son opérande.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#<<_(décalage_à_gauche)">Décalage à gauche</a></td> + <td><code>a << b</code></td> + <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la gauche, en introduisant des zéros par la droite.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>_(décalage_à_droite_avec_propagation_du_signe)">Décalage à droite avec propagation du signe</a></td> + <td><code>a >> b</code></td> + <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la droite, en rejetant les bits à droite.</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_binaires#>>>_(décalage_à_droite_avec_insertion_de_zéros)">Décalage à droite avec introduction de zéros</a></td> + <td><code>a >>> b</code></td> + <td>Décale <code>a</code> en représentation binaire de <code>b</code> bits vers la droite, en rejetant les bits à droite et en introduisant des zéros par la gauche.</td> + </tr> + </tbody> +</table> + +<h2 id="Entiers_sur_32_bits_signés">Entiers sur 32 bits signés</h2> + +<p>Les opérandes de tous les opérateurs binaires sont convertis en entiers signés sur 32 bits en ordre big-endian et en format de <a href="https://fr.wikipedia.org/wiki/Compl%C3%A9ment_%C3%A0_deux">complément à deux</a> (à l'exception de l'opération de décalage à droite avec remplissage des zéros qui renvoie un non-signé). L'ordre big-endian signifie que le bit le plus significatif (la position du bit qui a la plus grande valeur) est le bit le plus à gauche si les 32 bits sont disposés sur une ligne horizontale. Le format de complément à deux signifie que la contrepartie négative d'un nombre (par exemple 5 pour -5) est l'inversion de tous les bits du nombre (NON binaire du nombre, c'est-à-dire son complément à un) plus un. Par exemple, la représentation suivante encode l'entier 314 (base 10) :</p> + +<pre class="eval">00000000000000000000000100111010 +</pre> + +<p>La représentation suivante encode ~314, c'est-à-dire le complément à un de 314 :</p> + +<pre class="eval">11111111111111111111111011000101 +</pre> + +<p>Finalement, la représentation suivante encode -314, c'est-à-dire le complément à deux de 314 :</p> + +<pre class="eval">11111111111111111111111011000110 +</pre> + +<p>Le complément à deux garantit que le bit le plus à gauche soit 0 lorsque le nombre est positif, et <code>1</code> lorsque le nombre est négatif. C'est pourquoi on l'appelle le <em>bit de signe</em> .</p> + +<p>Le nombre 0 est l'entier constitué intégralement de bits à <code>0</code> .</p> + +<pre>0 (base 10) = 00000000000000000000000000000000 (base 2)</pre> + +<p>Le nombre -1 est l'entier constitué intégralement de bits à <code>1</code> .</p> + +<pre>-1 (base 10) = 11111111111111111111111111111111 (base 2)</pre> + +<p>Le nombre <code>-2147483648</code> (qui correspond à <code>-0x80000000</code> en notation hexadécimale) est l'entier uniquement composé de 0, à l'exception du premier bit (le plus à gauche) qui vaut 1.</p> + +<pre>-2147483648 (base 10) = 10000000000000000000000000000000 (base 2)</pre> + +<p>Le nombre <code>2147483647</code> (qui correspond à <code>0x7fffffff</code> en notation hexadécimale) est l'entier uniquement composé de 1, à l'exception du premier bit (le plus à gauche) qui vaut 0.</p> + +<pre>2147483647 (base 10) = 01111111111111111111111111111111 (base 2)</pre> + +<p>Les nombres <code>-2147483648</code> et <code>2147483647</code> sont respectivement le nombre le plus petit et le plus grand qu'on peut représenter sur 32 bits (signés).</p> + +<h2 id="Opérateurs_logiques_binaires">Opérateurs logiques binaires</h2> + +<p>Conceptuellement, les opérateurs logiques binaires fonctionnent de la manière suivante :</p> + +<ul> + <li>Les opérandes sont convertis en entiers sur 32 bits et exprimés sous la forme d'une série de bits (des 1 et des 0). Les nombres sur plus de 32 bits voient leurs bits supplémentaires supprimés : + <pre class="brush: js">Avant : 11100110111110100000000000000110000000000001 +Après : 10100000000000000110000000000001</pre> + </li> + <li>Chaque bit du premier opérande est combiné avec le bit correspondant du second opérande : le premier bit avec le premier bit, le second bit avec le second bit, et ainsi de suite.</li> + <li>L'opérateur est appliqué à chaque paire de bits, et le résultat est construit bit après bit.</li> +</ul> + +<h3 id="(ET_binaire)"><a name="ET">& (ET binaire)</a></h3> + +<p>Effectue l'opération ET (<em>AND</em>) sur chaque paire de bits. <code>a</code> ET <code>b</code> donne 1 uniquement si à la fois <code>a</code> et <code>b</code> sont <code>1</code> . La table de vérité pour l'opération ET est :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a ET b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 & 9 (base 10) = 00000000000000000000000000001000 (base 2) = 8 (base 10) +</pre> + +<p>Utiliser le ET binaire avec n'importe quel nombre x et zéro donne zéro. Utiliser le ET binaire avec n'importe quel nombre x et -1 donne x.</p> + +<h3 id="(OU_binaire)"><a name="OU">| (OU binaire)</a></h3> + +<p>Effectue l'opération OU (<em>OR</em>) sur chaque paire de bits. <code>a</code> OU <code>b</code> donne <code>1</code> si <code>a</code> ou <code>b</code> vaut 1. La table de vérité pour l'opération OU est :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a OU b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>1</td> + </tr> + </tbody> +</table> + +<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 | 9 (base 10) = 00000000000000000000000000001111 (base 2) = 15 (base 10) +</pre> + +<p>Utiliser le OU binaire avec n'importe quel nombre x et 0 donne x. Utiliser le OU binaire avec n'importe quel nombre x et -1 donne -1.</p> + +<h3 id="(XOR_binaire)"><a name="XOR">^ (XOR binaire)</a></h3> + +<p>Effectue l'opération XOR (OU exclusif) sur chaque paire de bits. <code>a</code> XOR <code>b</code> donne <code>1</code> si <code>a</code> et <code>b</code> sont différents. La table de vérité pour l'opération XOR est :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">b</td> + <td class="header">a XOR b</td> + </tr> + <tr> + <td>0</td> + <td>0</td> + <td>0</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + 14 (base 10) = 00000000000000000000000000001110 (base 2) + -------------------------------- +14 ^ 9 (base 10) = 00000000000000000000000000000111 (base 2) = 7 (base 10) +</pre> + +<p>Utiliser le XOR binaire avec n'importe quel nombre x et 0 donne x. Utiliser le XOR binaire avec n'importe quel nombre x et -1 donne ~x.</p> + +<h3 id="(NON_binaire)"><a name="NON">~ (NON binaire)</a></h3> + +<p>Effectue l'opération NON (<em>NOT</em>) sur chaque bit. NON <code>a</code> donne la valeur inversée (c'est-à-dire le complément à un) de <code>a</code>. La table de vérité de l'opération NON est :</p> + +<table class="standard-table"> + <tbody> + <tr> + <td class="header">a</td> + <td class="header">NON a</td> + </tr> + <tr> + <td>0</td> + <td>1</td> + </tr> + <tr> + <td>1</td> + <td>0</td> + </tr> + </tbody> +</table> + +<pre class="eval"> 9 (base 10) = 00000000000000000000000000001001 (base 2) + -------------------------------- +~9 (base 10) = 11111111111111111111111111110110 (base 2) = -10 (base 10) +</pre> + +<p>Utiliser le NON binaire avec n'importe quel nombre <code>x</code> donne <code>-(x + 1)</code>. Par exemple, <code>~-5</code> donne <code>4</code>.</p> + +<p>Étant donnée la représentation sur 32 bits des nombres en JavaScript, on a <code>~-1</code> et <code>~4294967295</code> (2<sup>32</sup>-1) qui valent tous les deux <code>0</code>.</p> + +<h2 id="Opérateurs_de_décalage_binaire">Opérateurs de décalage binaire</h2> + +<p>Les opérateurs de décalage binaire (<em>shift</em>) prennent deux opérandes : le premier est une valeur à décaler et le second spécifie le nombre de positions de bits duquel le premier opérande doit glisser. La direction de l'opération de décalage est contrôlée par l'opérateur utilisé.</p> + +<p>Les opérateurs de décalage convertissent leurs opérandes en entiers 32 bits en ordre big-endian et renvoient un résultat du même type que l'opérande de gauche. L'opérande droit doit être inférieur à 32, sinon les cinq bits les plus faibles seront utilisés.</p> + +<h3 id="<<_(décalage_à_gauche)"><a name="Gauche"><< (décalage à gauche)</a></h3> + +<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la gauche. Les bits surnuméraires éjectés à gauche sont perdus. Des bits à zéro sont insérés par la droite.</p> + +<p>Par exemple, <code>9 << 2</code> donne 36 :</p> + +<pre class="eval"> 9 (base 10) : 00000000000000000000000000001001 (base 2) + -------------------------------- +9 << 2 (base 10) : 00000000000000000000000000100100 (base 2) = 36 (base 10) +</pre> + +<p>Décaler un nombre <strong>x</strong> de <strong>y</strong> bits vers la gauche renverra <math><semantics><mrow><mi>x</mi><mo>*</mo><msup><mn>2</mn><mi>y</mi></msup></mrow><annotation encoding="TeX">x*2^y</annotation></semantics></math>. Par exemple, <code>9 << 3</code> correspondra à <code>9 * (2 ** 3) = 9 * 8 = 72</code>.</p> + +<h3 id=">>_(décalage_à_droite_avec_propagation_du_signe)"><a name="Droite">>> (décalage à droite avec propagation du signe)</a></h3> + +<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des copies du bit le plus à gauche sont insérés par la gauche. Comme le bit le plus a gauche a la même valeur qu'avant l'opération, le bit de signe (celui qui est le plus à gauche) ne change pas. D'où ce qu'on appelle la « propagation du signe ».</p> + +<p>Par exemple, <code>9 >> 2</code> donne 2 :</p> + +<pre class="eval"> 9 (base 10) : 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >> 2 (base 10) : 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>De même, <code>-9 >> 2</code> donne -3, parce que le signe est préservé :</p> + +<pre class="eval"> -9 (base 10) : 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >> 2 (base 10) : 11111111111111111111111111111101 (base 2) = -3 (base 10) +</pre> + +<h3 id=">>>_(décalage_à_droite_avec_insertion_de_zéros)"><a name="Droite_zero">>>> (décalage à droite avec insertion de zéros)</a></h3> + +<p>Cet opérateur décale le premier opérande du nombre de bits spécifié vers la droite. Les bits surnuméraires éjectés à droite sont perdus. Des bits à zéro sont insérés par la gauche. Le bit de signe devient 0, donc le résultat est toujours positif. À la différence des autres opérateurs binaires, cette opération renvoie un entier non-signé sur 32 bits.</p> + +<p>Pour les nombres non négatifs, le décalage à droite avec insertion de zéros et le décalage à droite avec propagation du signe donnent le même résultat. Par exemple, <code>9 >>> 2</code> donne 2, tout comme <code>9 >> 2</code> :</p> + +<pre class="eval"> 9 (base 10) : 00000000000000000000000000001001 (base 2) + -------------------------------- +9 >>> 2 (base 10) : 00000000000000000000000000000010 (base 2) = 2 (base 10) +</pre> + +<p>Cependant, ce n'est pas le cas des nombres négatifs. Par exemple, <code>-9 >>> 2</code> donne 1073741821, ce qui est différent de <code>-9 >> 2</code> (qui donne -3) :</p> + +<pre class="eval"> -9 (base 10) : 11111111111111111111111111110111 (base 2) + -------------------------------- +-9 >>> 2 (base 10) : 00111111111111111111111111111101 (base 2) = 1073741821 (base 10) +</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_flags_et_bitmasks">Exemple : <em>flags</em> et <em>bitmasks</em></h3> + +<p>Les opérateurs logiques binaires sont souvent utilisés pour créer, manipuler et lire des séquences de<em>flags</em> , qui sont comme des variables binaires. On pourrait très bien utiliser des variables à la place de ces séquences binaires, mais des flags binaires prennent nettement moins de mémoire (par un facteur de 32).</p> + +<p>Supposons que l'on ait 4 flags :</p> + +<ul> + <li>flag A : nous avons une araignée</li> + <li>flag B : nous avons une belette</li> + <li>flag C : nous avons un chat</li> + <li>flag D : nous avons un dinosaure</li> +</ul> + +<p>Ces flags sont représentés par une séquence de bits : DCBA. Lorsqu'un flag est <em>positionné</em>, il a une valeur de 1. Sinon, il a une valeur de 0. Supposons qu'une variable <code>flags</code> a la valeur binaire de 0101 :</p> + +<pre class="eval">var flags = 0x5; // 0101 en binaire +</pre> + +<p>Cette valeur indique :</p> + +<ul> + <li>le flag A est vrai (nous avons une araignée) ;</li> + <li>le flag B est faux (nous n'avons pas de belette) ;</li> + <li>le flag C est vrai (nous avons un chat) ;</li> + <li>le flag D est faux (nous n'avons pas de dinosaure).</li> +</ul> + +<p>Comme les opérateurs binaires sont sur 32 bits, <code>0101</code> est en fait <code>00000000000000000000000000000101</code>, mais les zéros qui précèdent peuvent être négligés étant donné qu'ils ne contiennent aucune information significative.</p> + +<p>Un <em>bitmask</em> est une séquence de bits qui peuvent manipuler et/ou lire des flags. Typiquement, un masque « primitif » pour chaque flag est défini :</p> + +<pre class="eval">var FLAG_A = 0x1; // 0001 +var FLAG_B = 0x2; // 0010 +var FLAG_C = 0x4; // 0100 +var FLAG_D = 0x8; // 1000 +</pre> + +<p>De nouveaux masques peuvent être créés à l'aide des opérateurs logiques binaires sur ces masques primitifs. Par exemple, le masque <code>1011</code> peut être créé avec une opération OU sur <code>FLAG_A</code>, <code>FLAG_B</code> et <code>FLAG_D</code> :</p> + +<pre class="eval">var mask = FLAG_A | FLAG_B | FLAG_D; // 0001 | 0010 | 1000 => 1011 +</pre> + +<p>Des valeurs de flag particulières peuvent être extraites à l'aide d'une opération ET avec un bitmask, où chaque bit avec la valeur 1 va « extraire » le flag qui correspond. Le bitmask <em>masque</em> les flags dont on n'a pas besoin en effectuant l'opération ET avec des zéros (d'où le terme « bitmask »). Par exemple, le masque 0100 peut être utilisé pour voir si le flag C est positionné :</p> + +<pre class="eval">// si l'on a un chat +if (flags & FLAG_C) { // 0101 & 0100 => 0100 => true + // faire quelque chose +} +</pre> + +<p>Un masque avec plusieurs flags positionnés agit comme un « et/ou ». Par exemple, les deux instructions suivantes sont équivalentes :</p> + +<pre class="eval">// si on a une belette ou si on a un chat +if ((flags & FLAG_B) || (flags & FLAG_C)) { // (0101 & 0010) || (0101 & 0100) => 0000 || 0100 => true + // faire quelque chose +} +</pre> + +<pre class="eval">// si on a une belette ou si on a un chat +var mask = FLAG_B | FLAG_C; // 0010 | 0100 => 0110 +if (flags & mask) { // 0101 & 0110 => 0100 => true + // faire quelque chose +} +</pre> + +<p>Les flags peuvent être positionnés en utilisant l'opération OU avec un masque, où chaque bit de la valeur 1 définira le flag correspondant, si celui-ci n'est pas déjà positionné. Par exemple, le masque 1100 peut être utilisé pour positionner les flags C et D :</p> + +<pre class="eval">// oui, on a un chat et un dinosaure +var mask = FLAG_C | FLAG_D; // 0100 | 1000 => 1100 +flags |= mask; // 0101 | 1100 => 1101 +</pre> + +<p>Les flags peuvent être remis à zéro en utilisant l'opération ET avec un masque, où chaque bit avec la valeur 0 remettra à zéro le flag correspondant s'il ne l'est pas déjà. Ce masque peut être créé avec l'opération NOT sur les masques primitifs. Par exemple, le masque 1010 peut être utilisé pour remettre à zéro les flags A et C :</p> + +<pre class="eval">// non, nous n'avons pas d'araignée ou de chat +var mask = ~(FLAG_A | FLAG_C); // ~0101 => 1010 +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Le masque aurait également pu être créé avec <code>~FLAG_A & ~FLAG_C</code> (Loi de De Morgan) :</p> + +<pre class="eval">// non, nous n'avons pas d'araignée ou de chat +var mask = ~FLAG_A & ~FLAG_C; +flags &= mask; // 1101 & 1010 => 1000 +</pre> + +<p>Les flags peuvent être inversés en utilisant l'opération XOR avec un masque, où chaque bit avec la valeur 1 inversera le flag correspondant. Par exemple, le masque 0110 peut être utilisé pour inverser les flags B et C :</p> + +<pre class="eval">// si on n'avait pas de belette, on en a maintenant une. +// si on en avait une, on ne l'a plus. Même chose pour les chats. +var mask = FLAG_B | FLAG_C; +flags = flags ^ mask; // 1100 ^ 0110 => 1010 +</pre> + +<p>Finalement, les flags peuvent être tous inversés avec l'opérateur NON :</p> + +<pre class="eval">// entrée dans un univers parallèle... +flags = ~flags; // ~1010 => 0101 +</pre> + +<h3 id="Codes_de_conversion">Codes de conversion</h3> + +<p>Pour convertir une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></code> binaire en un <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number</a></code> (en base 10):</p> + +<pre class="brush: js">var chaîneBinaire = "1011"; +var monNombre = parseInt(chaîneBinaire, 2); +console.log(monNombre); // affiche 11 (1011 en base 2) +</pre> + +<p>Pour convertir un <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number">Number</a></code> (en base 10) en une <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/String">String</a></code> binaire :</p> + +<pre class="brush: js">var monNombre = 11; +var chaîneBinaire = monNombre.toString(2); +console.log(chaîneBinaire); // affiche 1011 (11 en base 10) +</pre> + +<h3 id="Automatiser_la_création_d'un_masque">Automatiser la création d'un masque</h3> + +<p>Si vous devez créer plusieurs masques à partir de booléens, il est possible d'automatiser ce processus :</p> + +<pre class="brush: js">function créerMasque () { + var nMask = 0, nFlag = 0, nLen = arguments.length > 32 ? 32 : arguments.length; + for (nFlag; nFlag < nLen; nMask |= arguments[nFlag] << nFlag++); + return nMask; +} +var masque1 = créerMasque(true, true, false, true); // 11, i.e.: 1011 +var masque2 = créerMasque(false, false, true); // 4, i.e.: 0100 +var masque3 = créerMasque(true); // 1, i.e.: 0001 +// etc. + +console.log(masque1); // affiche 11, i.e.: 1011 +</pre> + +<h3 id="Algorithme_réciproque_obtenir_un_tableau_de_booléen_à_partir_d'un_masque">Algorithme réciproque : obtenir un tableau de booléen à partir d'un masque</h3> + +<p>Si on souhaite créer un tableau de booléens à partir d'un masque, on pourra utiliser le code suivant :</p> + +<pre class="brush: js">function tableauMasque (nMask) { + // nMask doit être compris entre -2147483648 et 2147483647 + if (nMask > 0x7fffffff || nMask < -0x80000000) { + throw new TypeError("tableauMasque - intervalle de valeur dépassé"); + } + for (var nShifted = nMask, aFromMask = []; nShifted; + aFromMask.push(Boolean(nShifted & 1)), nShifted >>>= 1); + return aFromMask; +} + +var tableau1 = tableauMasque(11); +var tableau2 = tableauMasque(4); +var tableau3 = tableauMasque(1); + +console.log("[" + tableau1.join(", ") + "]"); +// affiche "[true, true, false, true]", i.e.: 11, i.e.: 1011 +</pre> + +<p>On peut ainsi utiliser les deux algorithmes :</p> + +<pre class="brush: js">var test = 19; // un masque quelconque +var résultat = créerMasque.apply(this, tableauMasque(test)); + +console.log(résultat); // 19 +</pre> + +<p>Pour l'exemple (car il existe la méthode <code><a href="/fr/docs/Web/JavaScript/Reference/Objets_globaux/Number/toString">Number.toString(2)</a></code>), on peut également modifier l'algorithme précédent pour créer une chaîne à partir de la représentation binaire d'un nombre :</p> + +<pre class="brush: js">function créerChaîneBinaire(nMask) { + // nMask doit être compris entre -2147483648 et 2147483647 + for (var nFlag = 0, nShifted = nMask, sMask = ""; nFlag < 32; + nFlag++, sMask += String(nShifted >>> 31), nShifted <<= 1); + return sMask; +} + +var string1 = créerChaîneBinaire(11); +var string2 = créerChaîneBinaire(4); +var string3 = créerChaîneBinaire(1); + +console.log(string1); +// affiche 00000000000000000000000000001011, i.e. 11 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.7')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définis au sein de plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.4.8">Opérateur NON binaire</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.7">Opérateurs binaires de décalage</a>, <a href="http://www.ecma-international.org/ecma-262/5.1/#sec-11.10">Opérateurs binaires</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définis au sein de plusieurs sections de la spécification : <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-not-operator">Opérateur NON binaire</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-bitwise-shift-operators">Opérateurs binaires de décalage</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-binary-bitwise-operators">Opérateurs binaires</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-bitwise-shift-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Defined in several sections of the specification: <a href="http://tc39.github.io/ecma262/#sec-bitwise-not-operator">opérateur NON binaire</a>, <a href="http://tc39.github.io/ecma262/#sec-bitwise-shift-operators">opérateurs binaires de décalage</a>, <a href="http://tc39.github.io/ecma262/#sec-binary-bitwise-operators">opérateurs binaires</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.operators.bitwise")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques">Les opérateurs logiques</a></li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/operators_d0fb75b0fac950a91a017a1f497c6a1f/index.html b/files/fr/conflicting/web/javascript/reference/operators_d0fb75b0fac950a91a017a1f497c6a1f/index.html new file mode 100644 index 0000000000..6b82320d69 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/operators_d0fb75b0fac950a91a017a1f497c6a1f/index.html @@ -0,0 +1,256 @@ +--- +title: Opérateurs logiques +slug: Web/JavaScript/Reference/Opérateurs/Opérateurs_logiques +tags: + - JavaScript + - Operator + - Reference +translation_of: Web/JavaScript/Reference/Operators +translation_of_original: Web/JavaScript/Reference/Operators/Logical_Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Les opérateurs logiques sont typiquement utilisés avec des valeurs booléennes (logiques) ; lorsque c'est le cas, ils renvoient une valeur booléenne également. Cependant, les opérateurs <code>&&</code> et <code>||</code> renvoient en réalité la valeur d'un des opérandes spécifiés. Si ces opérateurs sont utilisés avec des valeurs non booléennes, ils peuvent donc également renvoyer une valeur non booléenne.</p> + +<p>{{EmbedInteractiveExample("pages/js/expressions-logicaloperator.html")}}</p> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Description">Description</h2> + +<p>Les opérateurs logiques sont décrits dans le tableau suivant (les expressions indiquées comme opérandes peuvent être de n'importe quel type et pas nécessairement être booléennes au sens strict) :</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th>Opérateur</th> + <th>Usage</th> + <th>Description</th> + </tr> + <tr> + <td>ET logique (<code>&&</code>)</td> + <td><code><em>expr1</em> &&<em>expr2</em> </code></td> + <td>Renvoie <code>expr1</code> si cette expression peut être convertie en <code>false</code>, sinon renvoie <code>expr2</code>.</td> + </tr> + <tr> + <td>OU logique (<code>||</code>)</td> + <td><code><em>expr1</em> ||<em>expr2</em> </code></td> + <td>Renvoie <code>expr1</code> si cette expression peut être convertie en <code>true</code>, sinon renvoie <code>expr2</code>.</td> + </tr> + <tr> + <td>NON logique (<code>!</code>)</td> + <td><code>!<em>expr</em> </code></td> + <td>Renvoie <code>false</code> si son opérande unique peut être converti en <code>true</code>, sinon il renvoie <code>true</code>.</td> + </tr> + </tbody> +</table> + +<p>Si une valeur peut être convertie en <code>true</code>, on dit en anglais qu'elle est <em>truthy</em>. Pour <code>false</code> on dit qu'elle est <em>falsy</em>.</p> + +<p>Parmi les expressions qui peuvent être converties en <code>false</code>, citons celles qui seront évaluées à :</p> + +<ul> + <li><code>null</code>,</li> + <li><code>NaN</code>,</li> + <li><code>0</code>,</li> + <li>la chaîne vide (<code>""</code> ou <code>''</code> ou <code>``</code>),</li> + <li><code>undefined</code>.</li> +</ul> + +<p>Même si les opérateurs <code>&&</code> et <code>||</code> peuvent être utilisés avec des opérandes qui ne sont pas des valeurs booléennes, ils peuvent toujours être considérés comme des opérateurs booléens puisque leurs valeurs de retour peuvent toujours être converties en valeurs booléennes.</p> + +<h3 id="Évaluation_court-circuit">Évaluation court-circuit</h3> + +<p>Comme les expressions logiques sont évaluées de gauche à droite, leur évaluation sera éventuellement « court-circuitée » à l'aide des règles suivantes :</p> + +<ul> + <li>l'évaluation de <code>false &&<em> n'importe quoi</em> </code> est court-circuitée en <code>false</code>.</li> + <li>l'évaluation de <code>true ||<em> n'importe quoi</em> </code> est court-circuitée en <code>true</code>.</li> +</ul> + +<p>Les règles de la logique garantissent que ces évaluations seront toujours correctes. Notons que la partie<em>n'importe quoi</em> des expressions mentionnées ci-dessus ne sera jamais évaluée, et que tout effet de bord éventuel induit par cette évaluation ne se produira pas.</p> + +<p>Ainsi, les deux fonctions suivantes sont équivalentes :</p> + +<pre>function courtCircuit() { + // OU logique + faireQuelqueChose() || faireAutreChose(); + + faireQuelqueChose() && faireAutreChose(); +} + +function évaluationÉquivalente() { + var orFlag = faireQuelqueChose(); + if (!orFlag) { + faireAutreChose(); + } + + var andFlag = faireQuelqueChose(); + if (andFlag) { + faireAutreChose(); + } +} +</pre> + +<h3 id="Précédence_des_opérateurs">Précédence des opérateurs</h3> + +<p>Les expressions suivantes ne sont pas équivalentes en raison de <a href="/fr/docs/Web/JavaScript/Reference/Opérateurs/Précédence_des_opérateurs">la précédence des opérateurs</a>. Cela permet de noter que l'opérande droit ne doit être qu'une seule expression (si nécessaire entourée de parenthèses).</p> + +<pre>true || false && false // renvoie true car && est appliqué en premier +(true || false) && false // renvoie false car || est appliqué en premier grâce aux parenthèses</pre> + +<h3 id="ET_logique"><a name="Logical_AND">ET logique (<code>&&</code>)</a></h3> + +<p>Le code qui suit illustre comment utiliser l'opérateur <code>&&</code> (ET logique).</p> + +<pre>a1 = true && true // t && t renvoie true +a2 = true && false // t && f renvoie false +a3 = false && true // f && t renvoie false +a4 = false && (3 == 4) // f && f renvoie false +a5 = "Yip" && "Yop" // t && t renvoie "Yop" +a6 = false && "Yop" // f && t renvoie false +a7 = "Yop" && false // t && f renvoie false +a8 = "" && true // f && f renvoie "" +a9 = false && "" // f && f renvoie false +</pre> + +<h3 id="OU_logique"><a name="Logical_OR">OU logique (<code>||</code>)</a></h3> + +<p>Le code qui suit illustre quelques exemples d'utilisation de l'opérateur <code>||</code> (OU logique).</p> + +<pre>o1 = true || true // t || t renvoie true +o2 = false || true // f || t renvoie true +o3 = true || false // t || f renvoie true +o4 = false || (3 == 4) // f || f renvoie false +o5 = "Yip" || "Yop" // t || t renvoie "Yip" +o6 = false || "Yip" // f || t renvoie "Yip" +o7 = "Yip" || false // t || f renvoie "Yip" +o8 = "" || false // f || f renvoie false +o9 = false || "" // f || f renvoie "" +010 = false|| monObjet // f || objet renvoie monObjet +</pre> + +<h3 id="NON_logique!"><a name="Logical_NOT">NON logique(<code>!</code>)</a></h3> + +<p>Le code qui suit illustre quelques exemples d'utilisation de l'opérateur <code>!</code> (NON logique).</p> + +<pre>n1 = !true // !t renvoie false +n2 = !false // !f renvoie true +n3 = !"" // !f renvoie true +n3 = !"Yop" // !t renvoie false +</pre> + +<h4 id="Utilisation_de_la_double_négation">Utilisation de la double négation</h4> + +<p>Il est possible d'utiliser deux fois le NON logique à la suite afin de forcer la conversion d'une valeur en un booléen. On obtiendra ainsi le booléen <code>true</code> si la valeur est équivalente à vrai et <code>false</code> si la valeur est équivalente à faux. Cette opération de conversion peut également être réalisée grâce à la fonction {{jsxref("Boolean")}}.</p> + +<pre class="brush: js">n1 = !!true; // une valeur équivalente à true renvoie true +n2 = !!{}; // un objet, même vide est toujours équivalent à true +n3 = !!(new Boolean(false)); // même lorsque leur constructeur est Boolean ! +n4 = !!false; // une valeur équivalente à false renvoie false +n5 = !!""; // idem +n6 = !!Boolean(false); // ici Boolean n'est pas utilisé comme constructeur + // et la valeur produite est bien équivalente à false</pre> + +<h3 id="Règles_de_conversions">Règles de conversions</h3> + +<h4 id="Convertir_un_ET_logique_avec_des_OU_logiques">Convertir un ET logique avec des OU logiques</h4> + +<p>L'opération suivante</p> + +<pre>condition1 && condition2</pre> + +<p>sera toujours égale à :</p> + +<pre>!(!condition1 || !condition2)</pre> + +<h4 id="Convertir_un_OU_logique_avec_des_ET_logiques">Convertir un OU logique avec des ET logiques</h4> + +<p>L'opération suivante :</p> + +<pre>condition1 || condition2</pre> + +<p>sera toujours égale à :</p> + +<pre>!(!condition1 && !condition2)</pre> + +<h4 id="Convertir_des_NON_logiques_successifs">Convertir des NON logiques successifs</h4> + +<p>Si on a l'opération suivante avec un booléen :</p> + +<pre>!!condition +</pre> + +<p>elle sera toujours équivalente à</p> + +<pre>condition</pre> + +<h3 id="Retirer_les_parenthèses_imbriquées">Retirer les parenthèses imbriquées</h3> + +<p>Les expressions logiques sont évaluées de gauche à droite, il est donc possible de retirer certaines parenthèses d'une expression complexe grâce à quelques règles.</p> + +<h4 id="Retirer_les_parenthèses_dun_ET_imbriqué">Retirer les parenthèses d'un ET imbriqué</h4> + +<p>Cette opération :</p> + +<pre>condition1 || (condition2 && condition3)</pre> + +<p>sera toujours équivalente à :</p> + +<pre>condition1 || condition2 && condition3</pre> + +<h4 id="Retirer_les_parenthèses_dun_OU_imbriqué">Retirer les parenthèses d'un OU imbriqué</h4> + +<p>Cette opération :</p> + +<pre>condition1 && (condition2 || condition3)</pre> + +<p>sera toujours équivalente à :</p> + +<pre>!(!condition1 || !condition2 && !condition3)</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Définition initiale.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11.11')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.4.9">opérateur NON logique</a>, <a href="https://www.ecma-international.org/ecma-262/5.1/#sec-11.11">opérateurs logiques binaires</a></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-logical-not-operator">opérateur NON logique</a>, <a href="https://www.ecma-international.org/ecma-262/6.0/#sec-binary-logical-operators">opérateurs logiques binaires</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-binary-logical-operators')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Définis dans plusieurs sections de la spécification : <a href="https://tc39.github.io/ecma262/#sec-logical-not-operator">opérateur NON logique</a>, <a href="https://tc39.github.io/ecma262/#sec-binary-logical-operators">opérateurs logiques binaires</a></td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.operators.logical")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/Op%C3%A9rateurs_binaires">Les opérateurs binaires</a></li> + <li><a href="/fr/docs/Web/JavaScript/Guide/Types_et_grammaire#Les_littéraux_booléens">Le type primitif booléen</a></li> + <li>Le constructeur objet {{jsxref("Boolean")}}</li> +</ul> diff --git a/files/fr/conflicting/web/javascript/reference/statements/switch/index.html b/files/fr/conflicting/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..e2cc368115 --- /dev/null +++ b/files/fr/conflicting/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,124 @@ +--- +title: default +slug: Web/JavaScript/Reference/Instructions/default +tags: + - JavaScript + - Keyword + - Reference +translation_of: Web/JavaScript/Reference/Statements/switch +translation_of_original: Web/JavaScript/Reference/Statements/default +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Le mot-clé <strong><code>default</code> </strong>peut être utilisé à deux endroits en JavaScript : au sein d'une instruction {{jsxref("Instructions/switch", "switch")}} ou dans une instruction {{jsxref("Instructions/export", "export")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<p>Dans une instruction {{jsxref("Instructions/switch", "switch")}} :</p> + +<pre class="syntaxbox">switch (expression) { + case valeur1: + // Les instructions exécutées quand le résultat + // de l'expression vaut valeur1 + [break;] + default: + // Les instructions exécutées quand aucune des valeurs + // ne correspond à la valeur de l'expression + [break;] +}</pre> + +<p>Dans une instruction {{jsxref("Instructions/export", "export")}} :</p> + +<pre class="syntaxbox">export default <em>nomN</em> </pre> + +<h2 id="Description">Description</h2> + +<p>Pour plus de détails, voir les pages sur :</p> + +<ul> + <li>L'instruction {{jsxref("Instructions/switch", "switch")}} et</li> + <li>L'instruction {{jsxref("Instructions/export", "export")}}.</li> +</ul> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Utiliser_default_dans_une_instruction_switch">Utiliser <code>default</code> dans une instruction <code>switch</code></h3> + +<p>Dans l'exemple qui suit, si <code>expr</code> vaut "Bananes" ou "Pommes", le programme exécutera les instructions correspondantes à chacune de ces valeurs. Le mot-clé <code>default</code> permettra d'indiquer des instructions à exécuter dans les autres cas (<code>expr</code> ne correspond à aucun des cas).</p> + +<pre class="brush: js">switch (expr) { + case "Bananes": + console.log("Les bananes sont à 1.59€ le kilo."); + break; + case "Pommes": + console.log("Les pommes sont à 0.78€ le kilo."); + break; + default: + console.log("Désolé, nous n'avons plus de " + expr + "."); +}</pre> + +<h3 id="Utiliser_default_avec_export">Utiliser <code>default</code> avec <code>export</code></h3> + +<p>Si on souhaite exporter une seule valeur ou avoir une valeur par défaut dans un module, on peut utiliser un export avec <code>default</code> :</p> + +<pre class="brush: js">// module "mon-module.js" +let cube = function cube(x) { + return x * x * x; +} +export default cube;</pre> + +<p>Dans un autre script, on pourra simplement faire référence à l'export par défaut :</p> + +<pre class="brush: js">// module "autre-module.js" +import maFonction from 'mon-module'; +console.log(maFonction(3)); // 27 +</pre> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'Instruction switch')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p>{{Compat("javascript.statements.default")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{jsxref("Instructions/export", "export")}}</li> + <li>{{jsxref("Instructions/switch", "switch")}}</li> +</ul> diff --git a/files/fr/conflicting/web/progressive_web_apps/index.html b/files/fr/conflicting/web/progressive_web_apps/index.html new file mode 100644 index 0000000000..3bea56aaa7 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps/index.html @@ -0,0 +1,60 @@ +--- +title: Identifiable +slug: Web/Progressive_web_apps/Identifiable +tags: + - Applications + - Identifiable + - Manifeste + - Manifeste Web +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Discoverable +--- +<div class="column-container summary"> +<div class="column-11">Dès lors que vous publiez une application web, vous voulez que le monde le sache. Les moteurs de recherche le font, mais souvent on souhaite plus de contrôle sur comment l'application sera affichée dans les résultats de la recherche. Le nouveau manifeste du W3C pour les applications web peut aider à cela, ainsi que pour d'autres fonctionnalités.</div> + +<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12654/discoverable.svg" style="height: 43px; width: 34px;"></div> +</div> + +<p>Objectifs éventuels des applications web:</p> + +<ul> + <li>Être mieux représenté dans les moteurs de recherche</li> + <li>Être facile à exposer, dans un catalogue ou un classement</li> + <li>Avoir des méta-données (<em>metadata)</em> utilisables par le navigateur pour leur donner des capacités spéciales</li> +</ul> + +<h2 id="Guides">Guides</h2> + +<p>Aucun document actuellement; les contributions sont les bienvenues.</p> + +<h2 id="Technologies">Technologies</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Technologie</th> + <th scope="col">Description</th> + <th scope="col">Résumé du support</th> + <th scope="col">Dernière spécification</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/Manifest">Manifeste des applications web</a></td> + <td>Définit les fonctions d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, <span id="result_box" lang="fr"><span>pour une utilisation</span> <span>dans un contexte comme l'affichage sur </span><span>une liste</span> <span>d'applications ou</span> sur l'<span>écran d'accueil</span> <span>de l'appareil</span></span>.</td> + <td>Expérimental, supporté dans Chrome, support limité dans Firefox (<a href="/fr/docs/Web/Manifest#Browser_compatibility">plus de détails</a>)</td> + <td>{{SpecName('Manifest')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Outils">Outils</h2> + +<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<dl> + <dt><a href="http://ogp.me/">Open Graph</a></dt> + <dd>Un standard, <em>defacto,</em> fournissant un format pour spécifier des méta-données similaires dans la balise HTML <code><head></code> en utilisant les <em>meta tags</em>. Supporté par Facebook et d'autres domaines.</dd> +</dl> diff --git a/files/fr/conflicting/web/progressive_web_apps_0d5c38b9aa908cbb52e4c39037b4f28b/index.html b/files/fr/conflicting/web/progressive_web_apps_0d5c38b9aa908cbb52e4c39037b4f28b/index.html new file mode 100644 index 0000000000..c5c90869f4 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_0d5c38b9aa908cbb52e4c39037b4f28b/index.html @@ -0,0 +1,34 @@ +--- +title: Sécurisée +slug: Web/Progressive_web_apps/Securisee +tags: + - Applications + - Applications web modernes + - Applications web progressives + - HTTPS + - Sécurité + - Web +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Safe +--- +<div class="column-container summary"> +<div class="column-11">La plateforme Web fournit un mécanisme sécurisé de livraison permettant d'éviter l'infiltration et s'assurer que le contenu n'a pas été altéré - aussi longtemps que vous bénéficiez de l'avantage du HTTPS et que vous développez votre application avec la sécurité à l'esprit.</div> + +<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12664/safe.svg" style="height: 40px; width: 38px;"></div> +</div> + +<h2 id="Guides">Guides</h2> + +<p>Aucun document actuellement; les contributions sont les bienvenues.</p> + +<h2 id="Technologies">Technologies</h2> + +<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !</p> + +<h2 id="Outils">Outils</h2> + +<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<p><em>Ajouter un lien vers des informations liées</em>.</p> diff --git a/files/fr/conflicting/web/progressive_web_apps_12fa0bab73df8b67470cc2aaa3a2effc/index.html b/files/fr/conflicting/web/progressive_web_apps_12fa0bab73df8b67470cc2aaa3a2effc/index.html new file mode 100644 index 0000000000..98ad67f276 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_12fa0bab73df8b67470cc2aaa3a2effc/index.html @@ -0,0 +1,32 @@ +--- +title: Partageable +slug: Web/Progressive_web_apps/Partageable +tags: + - Applications + - Applications web modernes + - Applications web progressives + - Partageable +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Linkable +--- +<div class="column-container summary"> +<div class="column-11">Une des fonctions les plus puissantes du Web est d'être capable de relier une application web à un lien URL spécifique — pas besoin de plateforme d'application, pas de processus complexe d'installation. Cela a toujours été comme ça.</div> + +<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12658/linkable.svg" style="height: 40px; width: 82px;"></div> +</div> + +<h2 id="Guides">Guides</h2> + +<p>Aucun document actuellement; les contributions sont les bienvenues.</p> + +<h2 id="Technologies">Technologies</h2> + +<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça !</p> + +<h2 id="Outils">Outils</h2> + +<p><em>Ajouter un lien vers un outil ou une bibliothèque utile.</em></p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<p><em>Ajouter un lien vers des informations liées</em>.</p> diff --git a/files/fr/conflicting/web/progressive_web_apps_7b3e1886320599eacfee6834ead473f1/index.html b/files/fr/conflicting/web/progressive_web_apps_7b3e1886320599eacfee6834ead473f1/index.html new file mode 100644 index 0000000000..1692b10b1d --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_7b3e1886320599eacfee6834ead473f1/index.html @@ -0,0 +1,48 @@ +--- +title: Installable +slug: Web/Progressive_web_apps/Installable +tags: + - Applications + - Installable + - Manifeste +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Installable +--- +<div class="column-container summary"> +<div class="column-11">Une partie basique de l'expérience avec l'application, pour un utilisateur, est d'avoir l'icône sur l'écran d'accueil et être capable de l'ouvrir dans son propre conteneur avec une bonne intégration avec la plateforme système sous-jacente. Les applications web modernes peuvent avoir ce sentiment d'application native.</div> + +<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12656/installable.svg" style="height: 96px; width: 96px;"></div> +</div> + +<h2 id="Guides">Guides</h2> + +<p>Aucun document actuellement; les contributions sont les bienvenues.</p> + +<h2 id="Technologies">Technologies</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Technologie</th> + <th scope="col">Description</th> + <th scope="col">Résumé du support</th> + <th scope="col">Dernière spécification</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/Manifest">Manifeste des applications web</a></td> + <td>Définit les fonctions d'une application web comme son nom, une icône, un écran de lancement et un thème de couleur, <span id="result_box" lang="fr"><span>pour une utilisation</span> <span>dans un contexte comme l'affichage sur </span><span>une liste</span> <span>d'applications ou</span> sur l'<span>écran d'accueil</span> <span>de l'appareil</span></span>.</td> + <td>Expérimental, supporté dans Chrome, support limité dans Firefox (<a href="/fr/docs/Web/Manifest#Browser_compatibility">plus de détails</a>)</td> + <td>{{SpecName('Manifest')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Outils">Outils</h2> + +<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<p><em>Ajouter un lien vers des informations liées</em>.</p> diff --git a/files/fr/conflicting/web/progressive_web_apps_954d3e6cc1e06f006b865b74099f55cf/index.html b/files/fr/conflicting/web/progressive_web_apps_954d3e6cc1e06f006b865b74099f55cf/index.html new file mode 100644 index 0000000000..d4c0de5453 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_954d3e6cc1e06f006b865b74099f55cf/index.html @@ -0,0 +1,31 @@ +--- +title: Progressive +slug: Web/Progressive_web_apps/Progressive +tags: + - Amélioration progressive + - Applications + - Design adaptatif +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Progressive +--- +<div class="column-container summary"> +<div class="column-11">Les applications web modernes peuvent être développées pour fournir une experience vraiment agréable avec les navigateurs complètement compatibles, et une expérience correcte (mais pas aussi brillante) avec les navigateurs moins aptes. Nous avons fait cela pendant des années avec de bonnes pratiques comme l'amélioration progressive, donc gardons cette bonne manière de faire les choses.</div> + +<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12662/progressive.svg" style="height: 40px; width: 66px;"></div> +</div> + +<h2 id="GuidesEdit">Guides<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Guides"><span>Edit</span></a></h2> + +<p>Aucun document actuellement; les contributions sont les bienvenues.</p> + +<h2 id="TechnologiesEdit">Technologies<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Technologies"><span>Edit</span></a></h2> + +<p>Pas besoin de nouvelle technologie - Le Web a toujours fonctionné comme ça depuis longtemps !</p> + +<h2 id="OutilsEdit">Outils<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Outils"><span>Edit</span></a></h2> + +<p><em>Ajouter un lien vers un outils ou une bibliothèque utile.</em></p> + +<h2 id="Voir_aussiEdit">Voir aussi<a class="button section-edit only-icon" href="https://developer.mozilla.org/fr/docs/Web/Apps/Progressive/Partageable$edit#Voir_aussi"><span>Edit</span></a></h2> + +<p><em>Ajouter un lien vers des informations liées</em>.</p> diff --git a/files/fr/conflicting/web/progressive_web_apps_ab4d34f3f29326f76d3aab740be03d31/index.html b/files/fr/conflicting/web/progressive_web_apps_ab4d34f3f29326f76d3aab740be03d31/index.html new file mode 100644 index 0000000000..52bcf0a121 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_ab4d34f3f29326f76d3aab740be03d31/index.html @@ -0,0 +1,95 @@ +--- +title: Indépendante du réseau +slug: Web/Progressive_web_apps/Independante_du_reseau +tags: + - App shell + - Applications + - IndexedDB + - Indépendante du réseau + - Service Workers + - hors-ligne + - localStorage +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Network_independent +--- +<div class="column-container summary"> +<div class="column-11">Les applications web modernes peuvent fonctionner quand le réseau n'est pas fiable, ou même inexistant. Terminé les pages blanches d'erreur de connexion ou les dinosaures qui courent dans le désert. Une séparation claire entre l'affichage (UI) et le contenu ainsi qu'un cache hors-ligne et des services workers, vous permettent de stocker les données de l'application et ses dépendances pour les futures utilisations.</div> + +<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12660/network-independent.svg" style="height: 43px; width: 43px;"></div> +</div> + +<p>Les concepts de base, concernant l'indépendance au réseau, c'est la capacité de :</p> + +<ul> + <li>Re-visiter un site et accèder à son contenu même quand le réseau n'est pas disponible.</li> + <li>Naviguer dans tout type de contenu que l'utilisateur a visité au moins une fois auparavant, même dans une situation comme une mauvaise connectivité.</li> + <li>Contrôler ce qui est affiché à l'utilisateur dans les cas d'absence de connexion.</li> +</ul> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers">Utiliser les service workers</a></dt> + <dd>Un guide simple pour débutant à l'API Service Worker.</dd> + <dt><a href="/fr/docs/IndexedDB/Using_IndexedDB">Utiliser IndexedDB</a></dt> + <dd>Les bases concernant IndexedDB, expliquées en détails.</dd> + <dt><a href="/fr/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Utiliser l'API Web Storage</a></dt> + <dd>L'API Web Storage en toute simplicité.</dd> + <dt><a class="external" href="https://developers.google.com/web/updates/2015/11/app-shell">Chargement rapide des applications web avec l'architecture <em>App Shell </em></a></dt> + <dd>Un guide pour utiliser le<em> coding pattern App Shell</em> pour créer des applications qui se chargent rapidement.</dd> +</dl> + +<h2 id="Technologies">Technologies</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Technologie</th> + <th scope="col">Description</th> + <th scope="col">Résumé du support</th> + <th scope="col">Dernière spécification</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a></td> + <td>JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur dans certaines circonstances comme la récupération (<em>fetch</em>) et l'envoi (<em>push</em>) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toute les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elle ne soit servies.</td> + <td>Expérimental : Chrome et Firefox (<a href="/fr/docs/Web/API/Service_Worker_API#Browser_compatibility">plus de détails</a>)</td> + <td>{{SpecName('Service Workers')}}</td> + </tr> + <tr> + <td><a href="/fr/docs/IndexedDB">IndexedDB</a></td> + <td>Un système de base de données transactionnelle qui permet un stockage complexe de données coté client, contrôlable par JavaScript.</td> + <td>Répandu dans les navigateurs modernes (<a href="/fr/docs/Web/API/IndexedDB_API#Browser_compatibility">plus de détails</a>)</td> + <td>{{SpecName('IndexedDB')}}</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/Web_Storage_API">Web Storage</a></td> + <td>Une API simple de stockage de clé/valeurs côté client.</td> + <td>Répandu (<a href="/fr/docs/Web/API/Web_Storage_API#Browser_compatibility">plus de détails</a>)</td> + <td>{{SpecName('Web Storage')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Outils">Outils</h2> + +<dl> + <dt><a class="external" href="http://mozilla.github.io/localForage/">localForage</a></dt> + <dd>Une simple petite bibliothèque Javascript pour rendre vraiment simple la création d'un stockage de données côté client ; utilise par défaut IndexedDB, et se tourne vers Web SQL/Web Storage si nécessaire.</dd> + <dt><a class="external" href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt> + <dd>Un micro-framework similaire à <em>Express</em> pour le développement simple d'un <em>service worker</em>.</dd> + <dt><a class="external" href="https://github.com/mozilla/oghliner">oghliner</a></dt> + <dd>Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.</dd> + <dt><a class="external" href="https://github.com/GoogleChrome/sw-precache">sw-precache</a></dt> + <dd>Un module Node pour générer le code d'un <em>service worker</em> qui va mettre en pré-cache des ressources spécifiques.</dd> + <dt><a class="external" href="https://www.talater.com/upup/">upup</a></dt> + <dd>Un petit script qui vous assure que votre site est toujours présent pour vos utilisateurs.</dd> +</dl> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<dl> + <dt><a class="external" href="https://serviceworke.rs/">The service worker cookbook</a></dt> + <dd>Une série de très bonnes ressources concernant les <em>services workers</em>, montrant comment implémenter une application web hors-ligne, et plus encore.</dd> +</dl> diff --git a/files/fr/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html b/files/fr/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html new file mode 100644 index 0000000000..729faa93e9 --- /dev/null +++ b/files/fr/conflicting/web/progressive_web_apps_cb2823fe6cfc1ddee5db1f6a5d240c67/index.html @@ -0,0 +1,81 @@ +--- +title: Re-engageable +slug: Web/Progressive_web_apps/Re-engageable +tags: + - Applications + - Notifications + - Push + - Service Workers + - Web +translation_of: Web/Progressive_web_apps +translation_of_original: Web/Progressive_web_apps/Re-engageable +--- +<div class="column-container summary"> +<div class="column-11">Un des principaux avantages des plateformes natives est la facilité avec laquelle les utilisateurs peuvent se retrouver de nouveaux attirés par des mises-à-jour et du nouveau contenu, même quand ils ne sont pas en train de regarder l'application ou d'utiliser leur appareil. Les applications web modernes peuvent désormais le faire aussi, en utilisant de nouvelles technologies comme l'API Web Push.</div> + +<div class="column-1"><img alt="" src="https://mdn.mozillademos.org/files/12666/re-engageable.svg" style="height: 43px; width: 43px;"></div> +</div> + +<h2 id="Guides">Guides</h2> + +<dl> + <dt><a href="/fr/docs/Web/API/Service_Worker_API/Using_Service_Workers" lang="fr">Utiliser l'API service workers</a></dt> + <dd>Un guide simple pour débutant à l'API Service Worker.</dd> + <dt><a href="/en-US/docs/Web/API/Push_API/Using_the_Push_API" lang="en">Utiliser l'API Push</a></dt> + <dd>Apprendre les bases de l'API Web Push.</dd> + <dt><a href="/fr/docs/Web/API/notification/Using_Web_Notifications">Utiliser l'API Notifications</a></dt> + <dd>Un résumé sur les notifications Web.</dd> +</dl> + +<h2 id="Technologies">Technologies</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Technologie</th> + <th scope="col">Description</th> + <th scope="col">Résumé du support</th> + <th scope="col">Dernière spécification</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/fr/docs/Web/API/Service_Worker_API">Service workers</a></td> + <td> + <p>JavaScript fonctionne dans un contexte de travail particulier qui est lancé par le navigateur sous certaines circonstances comme la récupération (<em>fetch</em>) et l'envoi (<em>push</em>) d'évènements. Ceci permet au service worker d'intercepter des réponses et de les personnaliser, de toutes les façons que vous le souhaitez, par exemple mettre en cache des ressources pour un usage hors-ligne avant qu'elles ne soit servies.</p> + </td> + <td>Expérimental: Chrome et Firefox (<a href="/fr/docs/Web/API/Service_Worker_API#Browser_compatibility">plus de détails</a>)</td> + <td>{{SpecName('Service Workers')}}</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/Push_API">API Push</a></td> + <td>Après s'être inscrit, le service <em>Push</em> fournit un point de terminaison utilisable par le serveur pour transmettre des messages à une application web controlée par un <em>service worker</em> particulier.</td> + <td>Expérimental: chrome et Firefox (<a href="/fr/docs/Web/API/Push_API#Browser_Compatibility">plus de détails</a>)</td> + <td>{{SpecName("Push API")}}</td> + </tr> + <tr> + <td><a href="/fr/docs/Web/API/Notifications_API">API Notifications</a></td> + <td>Lancer des notifications systèmes directement depuis les applications web.</td> + <td>Répandu dans les navigateurs modernes (<a href="/fr/docs/Web/API/Notifications_API#Browser_compatibility">plus de détails</a>)</td> + <td>{{SpecName('Web Notifications')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Outils">Outils</h2> + +<dl> + <dt><a class="external" href="https://github.com/fxos-components/serviceworkerware">ServiceWorkerWare</a></dt> + <dd>Un micro-framework similaire à <em>Express</em> pour le développement simple d'un <em>service worker</em>.</dd> + <dt><a class="external" href="https://github.com/mozilla/oghliner" lang="en">oghliner</a></dt> + <dd>Pas seulement un template mais un outil permettant de déployer des applications web hors-ligne sur GitHub Pages.</dd> + <dt><a class="external" href="https://github.com/GoogleChrome/sw-precache" lang="en">sw-precache</a></dt> + <dd>Un module Node pour générer le code d'un <em>service worker</em> qui va mettre en pré-cache des ressources spécifiques.</dd> +</dl> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<dl> + <dt><a class="external" href="https://serviceworke.rs/" lang="en">The service worker cookbook</a></dt> + <dd>Une série de très bonnes ressources concernant les service worker, montrant comment implémenter une application web hors-ligne, et plus encore.</dd> +</dl> diff --git a/files/fr/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html b/files/fr/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html new file mode 100644 index 0000000000..861663258c --- /dev/null +++ b/files/fr/conflicting/web/xpath/introduction_to_using_xpath_in_javascript/index.html @@ -0,0 +1,85 @@ +--- +title: Utilisation de XPath +slug: Utilisation_de_XPath +tags: + - AJAX + - DOM + - Extensions + - Transformations_XML_avec_XSLT + - XML + - XPath + - XSLT +translation_of: Web/XPath/Introduction_to_using_XPath_in_JavaScript +translation_of_original: Using_XPath +--- +<p> </p> +<p><a href="/fr/XPath" title="fr/XPath">XPath</a> est un langage de conversion des éléments d'un document XML. C'est une <a class="external" href="http://www.w3.org/TR/xpath">recommandation du W3C (en)</a>.</p> +<p>Cet article décrit les interfaces de Mozilla qui exposent les fonctionnalités <a href="/fr/XPath" title="fr/XPath">XPath</a> au code JavaScript. Elles sont décrites dans <a class="external" href="http://www.w3.org/TR/DOM-Level-3-XPath/">DOM Level 3 XPath (en)</a> (qui est une note du groupe de travail du W3C pour le moment).</p> +<p>Cet article n'a pas vocation à enseigner XPath. Si vous n'êtes pas familier avec cette technologie, veuillez vous référer au <a class="external" href="http://www.w3schools.com/xpath/">tutoriel XPath de W3Schools (en)</a>.</p> +<h3 id="Fonction_Wrapper">Fonction Wrapper</h3> +<p>La fonction suivante peut être utilisée pour évaluer des expressions XPath de nœuds XML donnés. Le premier argument est un nœud DOM ou un objet de Document, le second est une chaîne définissant l'expression XPath.</p> +<pre class="eval">// Évalue une expression XPath aExpression par rapport à un nœud DOM donné +// ou un objet de document (aNode), puis retourne les résultats en table +// Merci à wanderingstan at morethanwarm dot mail dot com pour le +// travail initial. +function evaluateXPath(aNode, aExpr) { + var xpe = new XPathEvaluator(); + var nsResolver = xpe.createNSResolver(aNode.ownerDocument == null ? + aNode.documentElement : aNode.ownerDocument.documentElement); + var result = xpe.evaluate(aExpr, aNode, nsResolver, 0, null); + var found = []; + var res; + while (res = result.iterateNext()) + found.push(res); + return found; +} +</pre> +<p>Cette fonction utilise <code>new XPathEvaluator()</code>. Ce constructeur est spécifique à Mozilla. Les scripts utilisés dans des pages Web qui seront affichées par les différents navigateurs existant devraient remplacer l'appel à <code>new XPathEvaluator()</code> avec le fragment de code suivant :</p> +<pre class="eval"> // XPathEvaluator est implémenté sur les objets qui implémente Document + var xpe = aNode.ownerDocument || aNode; +</pre> +<p>Dans ce cas, la création de <a href="/fr/DOM/document.createNSResolver" title="fr/DOM/document.createNSResolver">XPathNSResolver</a> peut être simplifiée avec :</p> +<pre class="eval"> var nsResolver = xpe.createNSResolver(xpe.documentElement); +</pre> +<p>Notez cependant, que <code>createNSResolver</code> ne doit être utilisé que si vous êtes sûr que les préfixes de l'espace de noms correspondent à ceux du document « interrogé ». Autrement, vous devrez fournir votre propre implémentation de XPathNSResolver.</p> +<p>Si vous utilisez <a href="/fr/XMLHttpRequest" title="fr/XMLHttpRequest">XMLHttpRequest</a> pour un fichier XML local ou distant dans un arbre DOM (comme décrit dans <a href="/fr/Analyser_et_sérialiser_XML" title="fr/Analyser_et_sérialiser_XML">Analyser et sérialiser XML</a>), le premier argument de <code>evaluateXPath()</code> devrait être <code>req.responseXML</code>.</p> +<h3 id="Exemple_d.27utilisation">Exemple d'utilisation</h3> +<p>Supposons que l'on ait le document XML suivant (voir également <a href="/fr/Création_d'un_arbre_DOM" title="fr/Création_d'un_arbre_DOM">Création d'un arbre DOM</a> et <a href="/fr/Analyser_et_sérialiser_XML" title="fr/Analyser_et_sérialiser_XML">Analyser et sérialiser XML</a>):</p> +<pre class="eval"><?xml version="1.0"?> +<people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> +</people> +</pre> +<p>Vous pouvez « interroger » le document à l'aide d'expressions XPath. Bien que parcourir l'arbre DOM donnera des résultats similaires, l'utilisation d'expressions XPath est bien plus rapide et puissante. Si vous avez la possiblité d'utiliser des attributs <code>id</code>, <code>document.getElementById()</code> est encore puissant, mais toujours moins que XPath. Voici quelques exemples.</p> +<pre class="eval">// affiche le nom de famille de toutes les personnes du document +var results = evaluateXPath(people, "//person/@last-name"); +for (var i in results) + alert("la nom de famille de la personne #" + i + "est" + results[i].value); + +// recupère le nœud de la seconde personne +results = evaluateXPath(people, "/people/person[2]"); + +// récupère les nœuds de toutes les personnes vivant à Denver +results = evaluateXPath(people, "//person[address/@city='denver']"); + +// Récupère les adresses contenant "south" dans le nom de voie +results = evaluateXPath(people, "//address[contains(@street, 'south')]"); +alert(results.length); +</pre> +<h3 id="Ressources">Ressources</h3> +<ul> <li><a href="/fr/XPath" title="fr/XPath">XPath</a></li> <li><a class="external" href="http://www.topxml.com/code/default.asp?p=3&id=v20021221025528">Visualiseur XPath pour Mozilla et Firefox (en)</a></li> <li><a class="external" href="http://www.w3schools.com/xpath/">Tutoriel XPath (en)</a></li> <li><a class="external" href="http://forums.mozillazine.org/viewtopic.php?t=229106">Forum de discussion sur l'utilisation de XPath (en)</a></li> <li><a class="external" href="http://zeus.jesus.cam.ac.uk/~jg307/mozilla/xpath-tutorial.html">Utiliser l'interface JavaScript de Mozilla avec XPath (en)</a> - brouillon d'un tutoriel sur l'utilisation de XPath avec JavaScript</li> +</ul> +<p><span>Interwiki Language Links</span></p> +<p> </p> +<p> </p> + +<p>{{ languages( { "en": "en/Using_XPath", "ja": "ja/Using_XPath", "ko": "ko/Using_XPath", "zh-cn": "cn/Using_XPath" } ) }}</p> |