From c158335dab5082c3fe07b212ca780172e632b62e Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Tue, 16 Nov 2021 07:40:12 +0100 Subject: Remove redondant pages due to sync moves from mdn/content and prepare landing page for web (#3112) --- files/fr/web/api/node/baseuri/index.html | 115 ------ .../media_queries/using_media_queries/index.html | 397 --------------------- files/fr/web/index.html | 4 +- .../reference/global_objects/string/index.html | 39 -- 4 files changed, 2 insertions(+), 553 deletions(-) delete mode 100644 files/fr/web/api/node/baseuri/index.html delete mode 100644 files/fr/web/css/media_queries/using_media_queries/index.html delete mode 100644 files/fr/web/javascript/reference/global_objects/string/index.html diff --git a/files/fr/web/api/node/baseuri/index.html b/files/fr/web/api/node/baseuri/index.html deleted file mode 100644 index df3b4e7fe9..0000000000 --- a/files/fr/web/api/node/baseuri/index.html +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: xml:base -slug: Web/API/Node/baseURI -tags: - - Introduction - - SVG - - URL - - XML - - base -translation_of: Web/XML/xml:base -original_slug: Web/XML/xml:base ---- -

xml:base est comme  L'élément pour l'URL de base du document en HTML mais peut spécifier l'URI de base par élément ainsi que pour le document entier.

- -

L'URL de base d'un élément peut être interrogé à partir d'un script en utilisant Node.baseURI.

- -
-

L'URI de base d'un élément est :

- -
    -
  1. -

    l'URI de base spécifiée par un attribut xml:base sur l'élément, s'il en existe un, sinon

    -
    2. -
  2. -

    l'URI de base de l'élément du parent contenu dans l'entité du document ou une entité externe, s'il en existe, sinon

    -
    3. -
  3. -

    l'URI de base de l'entité du document ou d'une entité externe contenant l'élément.

    -
    4. -
-
- -

Malheureusement, la prise en charge du clignotement a été supprimée (Chrome et Opera) en 2015.

- -
    -
  1. https://bugs.chromium.org/p/chromium/issues/detail?id=341854
    2. -
  2. https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/ZvArHAXyAHM
    3. -
- -

Cas d'utilisation

- -

Si vous avez un SVG en ligne, vous utilisez des icônes qui doivent fonctionner dans un document avec un HTML BaseElement , vous pouvez réinitialiser l'URI sur votre "sprite" d'icône en réglant le xml:base.

- - -
<html>
-  <head>
-  <base href="https://mydomain.com">
-  <style>
-  .link { stroke: #999; stroke-opacity: .6; }
-  marker#arrow { fill: black; }
-  </style>
-</head>
-<body>
-  <svg width="100%" height="100%" xml:base="">
-    <defs>
-      <marker id="arrow" viewBox="0 -5 10 10" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto">
-        <path d="M0,-5L10,0L0,5"></path>
-      </marker>
-    </defs>
-    <line x1="100" y1="100" x2="333" y2="333" marker-start="url(#arrow)" class="link"></line>
-  </svg>
-</body>
-</html>
- - -

Imaginez un SVG avec des références de polices de caractères. Par exemple :

- -
<svg xml:base="https://foobar.s3-eu-west-1.amazonaws.com/uploads/15066845653629"
-  width="909" height="1286" viewBox="0 0 909 1286"xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<defs>
-<style type="text/css"><![CDATA[
-
-.s9_999{
-font-size: 9.17px;
-font-family: ZapfDingbats_ghr;
-fill: #161615;
-}
-]]></style>
-
-  <text
-    x="647"
-    y="412"
-    dx="0"
-    class="s9_999"
-  >r</text>
-
-<style type="text/css" ><![CDATA[
-
-@font-face {
-    font-family: ZapfDingbats_ghr;
-    src: url("fonts/ZapfDingbats_ghr.woff") format("woff");
-}
-
-]]></style>
-
-</svg>
-
- -

La définition du xml:base sur l'élément SVG signifie que vous pouvez intégrer le SVG et ainsi contourner le problème CORS sans modifier l'URI de base pour l'ensemble de votre document..

- - -

Les solutions de contournement

- - - -

Spécification

- - - - diff --git a/files/fr/web/css/media_queries/using_media_queries/index.html b/files/fr/web/css/media_queries/using_media_queries/index.html deleted file mode 100644 index 7c38602401..0000000000 --- a/files/fr/web/css/media_queries/using_media_queries/index.html +++ /dev/null @@ -1,397 +0,0 @@ ---- -title: Médias -slug: Web/CSS/Media_Queries/Using_media_queries -tags: - - CSS - - CSS:Premiers_pas -translation_of: Web/Progressive_web_apps/Responsive/Media_types -original_slug: Web/Progressive_web_apps/Responsive/Media_types ---- -

 

-

La plupart des pages de ce tutoriel sont centrées sur les propriétés CSS et les valeurs que vous pouvez utiliser pour spécifier la façon dont sera affiché un document.

-

Cette page revient sur le but et la structure des feuilles de style CSS.

-

Information : les médias

-

Le but de CSS est de spécifier la manière dont les documents sont présentés à l'utilisateur. La présentation peut prendre plusieurs formes.

-

Par exemple, vous êtes probablement en train de lire cette page sur un dispositif d'affichage comme un écran d'ordinateur. Mais vous pouvez aussi avoir envie de le projeter sur un grand écran pour un public plus important, ou encore l'imprimer sur papier. Ces différents médias peuvent avoir des caractéristiques différentes. CSS permet donc de présenter un document différemment sur un média différent.

-

Pour spécifier des règles spécifiques à un type de média, utilisez @media suivi du type de média, suivi de crochets courbes entourant les règles.

- - - - - - - -
- Exemple
Un document sur un site Web dispose d'une zone de navigation permettant à l'utilisateur de se déplacer dans le site. -

Dans le langage de balisage, l'élément parent de la zone de navigation a l'attribut id nav-area.

-

Lorsque le document est imprimé, la zone de navigation n'a aucun intérêt, elle est donc retirée complètement par la feuille de style :

-
- 
-@media print {
-  #nav-area {display: none;}
-  }
-
-
-
-

Voici certains des types de média courants :

- - - - - - - - - - - - - - - - - - - -
screenÉcran d'ordinateur en couleurs
printMédia paginé
projectionProjection sur un écran
allTous les médias (la valeur par défaut)
-

 

- - - - - - - -
- Plus de détails
Il existe d'autres manières de spécifier le type de média d'une série de règles. -

Le langage de balisage du document peut permettre de spécifier le type de média au moment où la feuille de style est liée au document. Par exemple, en HTML, vous pouvez optionnellement spécifier le type de média à l'aide de l'attribut media de la balise LINK.

-

En CSS, vous pouvez utiliser @import au début d'une feuille de style pour en importer une autre depuis une URL, éventuellement en spécifiant le type de média.

-

En utilisant ces techniques, vous pouvez séparer les règles de style pour différents médias dans différents fichiers. Cela peut s'avérer une manière utile de structurer vos feuilles de style.

-

Pour tous les détails sur les types de média, consultez Media dans la spécification CSS.

-

Plus d'exemples utilisant la propriété display sont présentés sur une prochaine page de ce tutoriel : Données XML.

-
-

 

-

Impression

-

CSS possède certaines instructions spécifiques pour l'impression et les médias paginés en général.

-

Une règle @page permet de spécifier les marges de la page. Pour l'impression recto-verso, vous pouvez spécifier des marges différentes pour les pages de gauche, @page:left, et les pages de droite, @page:right.

-

Pour les médias imprimés, il vaut mieux utiliser des unités de longueur appropriées, comme les centimètres (cm) et millimètres (mm), les pouces (in) ou les points (1 pt = 1/72 pouces). Il est également toujours approprié d'utiliser em pour s'accorder à la taille de police, et les pourcentages (%).

-

Vous pouvez contrôler la façon dont le contenu du document se comporte aux abords des limites de pages à l'aide des propriétés page-break-before (saut de page avant), page-break-after (saut de page après) et page-break-inside (saut de page à l'intérieur).

- - - - - - - -
- Exemples
Cette règle définit les marges de la page à deux centimètres de chaque côté : -
- 
-@page {margin: 2cm;}
-
-
-

Cette règle s'assure que chaque élément H1 commencera une nouvelle page :

-
- 
-h1 {page-break-before: always;}
-
-
-
-

 

- - - - - - - -
- Plus de détails
Pour tous les détails sur la gestion des médias paginés par CSS, consultez Paged media dans la spécification CSS. -

Comme les autres fonctionnalités de CSS, l'impression dépend de votre navigateur et de ses réglages. Par exemple, votre navigateur Mozilla fournit des marges, en-têtes et pieds de page par défaut pour l'impression. Lorsque d'autres utilisateurs imprimeront votre document, vous ne pouvez probablement pas prédire le navigateur et les paramètres qu'ils utiliseront, c'est pourquoi vous ne pouvez probablement pas contrôler complètement le résultat.

-
-

 

-

Interfaces utilisateur

-

CSS possède certaines propriétés spéciales pour les périphériques disposant d'une interface utilisateur comme les écrans d'ordinateur. Celles-ci font que l'apparence du document change dynamiquement et interagit avec les actions de l'utilisateur sur l'interface.

-

Il n'y a pas de type de média spécial pour ce type de périphériques.

-

Voici les cinq sélecteurs spéciaux :

- - - - - - - - - - - - - - - - - - - - - - - - - - - -
SelecteurSélectionne
E:hoverTout élément E survolé par le pointeur
E:focusTout élément E ayant le focus du clavier
E:activeTout élément E impliqué dans l'action courante de l'utilisateur
E:linkTout élément E qui est un lien hypertexte vers une URL que l'utilisateur n'a pas visitée récemment
E:visitedTout élément E qui est un lien hypertexte vers une URL que l'utilisateur a visitée récemment
-

La propriété cursor spécifie la forme du pointeur : certains des pointeurs courants sont montrés ci-dessous. Placez votre pointeur de souris au dessu des éléments de cette liste pour voir comment apparaissent les différentes formes dans votre navigateur :

- - - - - - - - - - - - - - - - - - - - - - - -
ValeurIndique
pointerIndique un lien
waitIndique que le programme n'accepte aucune interaction pour le moment
progressIndique que le programme fonctionne, mais peut toujours accepter une autre commande
defaultLe curseur par défaut (habituellement une flèche)
-


- Une propriété outline crée un encadrement souvent utilisé pour indiquer où se trouve le focus clavier. Ses valeurs sont similaires à celles de la propriété border, sauf que les différents côtés ne peuvent pas être spécifiés individuellement.

-

Certaines autres fonctionnalités des interfaces utilisateur sont implémentées à l'aide d'attributs, de la façon classique. Par exemple, un élément qui est désactivé ou en lecture seule a (respectivement) l'attribut disabled ou readonly. Les sélecteurs peuvent spécifier ces attributs comme n'importe quel autre attribut, à l'aide des crochets droits : {{ mediawiki.external('disabled') }} ou {{ mediawiki.external('readonly') }}.

-

 

- - - - - - - -
- Exemple
Ces règles spécifient des styles pour un bouton qui change dynamiquement lorsque l'utilisateur interagit avec lui : -
- 
-.bouton-vert {
-  background-color:#cec;
-  color:#black;
-  border:2px outset #cec;
-  }
-
-.bouton-vert[disabled] {
-  background-color:#cdc;
-  color:#777;
-  }
-
-.bouton-vert:active {
-  border-style: inset;
-  }
-
-
-

Ce wiki ne permet pas d'utiliser des boutons sur la page, mais voici quelques images pour illustrer l'idée :

- - - - - - -
- - - - - - - - - - - - - - - - -
Cliquez iciCliquez iciCliquez ici
 
disablednormalactive
-
-

Un bouton tout à fait fonctionnel a aussi un contour noir tout autour lorsqu'il est le bouton par défaut, et un encadrement pointillé sur sa surface lorsqu'il a le focus clavier. Il peut également changer grâce à un effet visuel lorsque le pointeur de la souris le survole.

-
- - - - - - - -
- Plus de détails
Pour plus d'informations à propos des interfaces utilisateur en CSS, consultez User interface dans la spécification CSS. -

Un exemple avec le langage de balisage de Mozilla pour les interfaces utilisateur, XUL, est fourni dans la partie II de ce tutoriel.

-
-

Action : impression d'un document

-

Créez un nouveau document HTML, doc4.html. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

-
- 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
-<HTML>
-
-<HEAD>
-<TITLE>Exemple à imprimer</TITLE>
-<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
-</HEAD>
-
-<BODY>
-<H1>Section A</H1>
-<P>Ceci est la première section...</P>
-
-<H1>Section B</H1>
-<P>Ceci est la seconde section...</P>
-
-<DIV id="en-tete-impression">
-Titre pour les médias paginés
-</DIV>
-
-<DIV id="pied-de-page-impression">
-Page :
-</DIV>
-
-</BODY>
-</HTML>
-
-
-

Créez une nouvelle feuille de style, style4.css. Copiez et collez-y le contenu ci-dessous, en vous assurant de faire défiler jusqu'en bas pour en obtenir l'entièreté :

-
- 
/*** Exemple d'impression ***/
-
-/* Réglages par défaut pour l'écran */
-#en-tete-impression,
-#pied-de-page-impression {
-  display: none;
-  }
-
-/* Uniquement pour l'impression */
-@media print {
-
-h1 {
-  page-break-before: always;
-  padding-top: 2em;
-  }
-
-h1:first-child {
-  page-break-before: avoid;
-  counter-reset: page;
-  }
-
-#en-tete-impression {
-  display: block;
-  position: fixed;
-  top: 0pt;
-  left:0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  text-align: center;
-  }
-
-#pied-de-page-impression {
-  display: block;
-  position: fixed;
-  bottom: 0pt;
-  right: 0pt;
-
-  font-size: 200%;
-  }
-
-#pied-de-page-impression:after {
-  content: counter(page);
-  counter-increment: page;
-  }
-
-} /* fin des paramètres pour l'impression */
-
-
-

Lorsque vous consultez ce document dans votre navigateur, il utilise le style par défaut de celui-ci.

-

Lorsque vous l'imprimez (ou demandez un aperçu avant impression) la feuille de style place chaque section sur une page séparée, et ajoute un en-tête et un pied de page à chacune d'elles. Si votre navigateur gère les compteurs, il ajoute le numéro de page dans le pied de page.

- - - - - - - -
- - - - - - -
- - - - - - -
-
- Titre
-
- Section A
-
- Ceci est la première section...
-
- Page : 1
-
-
- 		- - - - - - -
- - - - - - -
-
- Titre
-
- Section B
-
- Ceci est la seconde section...
-
- Page : 2
-
-
-
-

 

- - - - - - - -
- Challenge
Déplacez les règles spécifiques à l'impression dans un fichier CSS séparé. -

Utilisez les liens plus haut sur cette page pour lire la spécification CSS. Trouvez-y des détails sur la façon d'importer cette nouvelle feuille CSS spécifique à l'impression dans votre feuille de style.

-

Faites en sorte que les titres deviennent bleus lorsque le pointeur de la souris passe au dessus d'eux.

-
-

 

-

Pour continuer

-

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 page de discussion.

-

Jusqu'à présent, toutes les règles de style dans ce tutoriel ont été spécifiées dans des fichiers. Les règles et leurs valeurs sont fixées. La page suivante explique comment ces règles peuvent être changées dynamiquement à l'aide d'un langage de programmation : JavaScript.

diff --git a/files/fr/web/index.html b/files/fr/web/index.html index 034f0cb6f1..1c3a0ad9c8 100644 --- a/files/fr/web/index.html +++ b/files/fr/web/index.html @@ -8,7 +8,7 @@ translation_of: Web ---

Le Web fournit d'incroyables opportunités aux développeuses et développeurs. Pour tirer le meilleur parti de ces technologies, il est nécessaire de savoir comment les utiliser. Voici différents liens qui vous permettront de naviguer dans la documentation de ces technologies web.

-

Documentation pour le développement web

+

Documentation pour le développement web

Références
@@ -21,7 +21,7 @@ translation_of: Web
Les applications web progressives sont des applications web qui utilisent les API et les fonctionnalités du navigateur ainsi que des stratégies d'amélioration progressive afin d'apporter une expérience utilisateur semblable aux applications natives et qui puissent fonctionner sur les différentes plateformes web.
-

Références des technologies web

+

Références des technologies web

API Web
diff --git a/files/fr/web/javascript/reference/global_objects/string/index.html b/files/fr/web/javascript/reference/global_objects/string/index.html deleted file mode 100644 index 808d99008b..0000000000 --- a/files/fr/web/javascript/reference/global_objects/string/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: ByteString -slug: Web/JavaScript/Reference/Global_Objects/String -tags: - - API - - DOM - - Reference - - WebIDL -translation_of: Web/API/ByteString -original_slug: Web/API/ByteString ---- -
{{APIRef("DOM")}}
- -

ByteString est une chaîne de caractères en UTF-8 qui contient l'ensemble des séquences d'octets possibles. ByteString correspond à une chaîne de caractères (type {{jsxref("String")}}) lorsqu'il est manipulé en JavaScript. En général, cet objet est uniquement utilisé dans l'interfaçage de protocoles qui utilisent les octets et les chaînes de façon interchangeable (HTTP par exemple).

- -

Spécifications

- - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('WebIDL', '#idl-ByteString', 'ByteString')}}{{Spec2('WebIDL')}}Définition initiale.
- -

Voir aussi

- - -- cgit v1.2.3-54-g00ecf