From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: Prepare CSS section for Markdown conversion (#2307) * Removes summary / seoSummary classes * Remove div class=hidden and some notranslate * Remove hidden paragraphs for live sample * Remove hidden paragraphs for live sample - take 2 * Remove other hidden div and p - updated w/ en-US when necessary * Remove ids * Remove notranslate class * Fix typo which broke build * remove div class='index' * remove useless * remove non typographical sups * remove non typographical subs * remove blockindicator and fix some div.note * fix build :/ * remove useless classes * fix build - again :x * fix unhandled elements 1/N + embedlivesample build fail * fix div.warning * Fix fixable flaws - hoping to reduce error conversion * Remove unecessary images (same as en-US) * fix div notes * fix warnings * fix some dl handling * fix dls * Fix a bunch of conversion errors * rm unhandled figures * Fix other set of issues and revamp easing-function page * Fix some one-offs conversion errors (incl. deki files) * fix the rest of one-off conversion issues * Fix last dl standing --- .../basic_concepts/index.html | 26 +++++------ .../floating_and_positioning/index.html | 4 +- files/fr/web/css/css_logical_properties/index.html | 52 +++++++++------------- .../margins_borders_padding/index.html | 8 ++-- .../css/css_logical_properties/sizing/index.html | 6 +-- 5 files changed, 43 insertions(+), 53 deletions(-) (limited to 'files/fr/web/css/css_logical_properties') diff --git a/files/fr/web/css/css_logical_properties/basic_concepts/index.html b/files/fr/web/css/css_logical_properties/basic_concepts/index.html index 0df0049658..82079917e4 100644 --- a/files/fr/web/css/css_logical_properties/basic_concepts/index.html +++ b/files/fr/web/css/css_logical_properties/basic_concepts/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base ---
{{CSSRef}}
-

La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.

+

La spécification relative aux propriétés et valeurs logiques introduit une correspondance relative au flux pour de nombreuses propriétés et valeurs CSS. Dans cet article, nous verrons une introduction de cette spécification et expliquerons les propriétés et valeurs relatives au flux.

Quel intérêt pour les propriétés logiques ?

@@ -18,21 +18,21 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base

Prenons un exemple pour comprendre la nécessité de telles propriétés et valeurs logiques. On dispose d'une grille CSS et le conteneur de la grille possède une certaine largeur. On y utilise {{CSSxRef("align-self")}} et {{CSSxRef("justify-self")}} afin d'aligner les éléments à l'intérieur de la grille. Ces propriétés sont relatives au flux : justify-self: start aligne l'élément au début de l'axe en ligne et align-self: start aligne l'élément au début de l'axe de bloc.

-

A grid in a horizontal writing mode

+

A grid in a horizontal writing mode

Si on change le mode d'écriture de ce composant grâce à la propriété {{CSSxRef("writing-mode")}} et avec la valeur vertical-rl, l'alignement continue de fonctionner de la même façon : l'axe en ligne est désormais l'axe vertical et l'axe de bloc court horizontalement. La grille n'a cependant pas la même allure car la largeur est nécessairement définie pour l'axe horizontal : de façon physique et pas relativement au flux de texte.

-

A grid in vertical writing mode.

+

A grid in vertical writing mode.

Si on avait utilisé la propriété logique {{CSSxRef("inline-size")}} plutôt que width, le composant aurait gardé les mêmes proportions, quel que soit le mode d'écriture utilisé.

-

A grid layout in vertical writing mode

+

A grid layout in vertical writing mode

Vous pouvez essayer ces différentes valeurs dans l'exemple qui suit et notamment modifier la propriété writing-mode pour la passer de vertical-rl à horizontal-tb sur le sélecteur .box afin d'observer la façon dont les différentes propriétés modifient la disposition.

{{EmbedGHLiveSample("css-examples/logical/intro-grid-example.html", '100%', 700)}}

-

Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.

+

Lorsqu'on travaille sur un site où on utilise un mode d'écriture qui n'est pas horizontal et progressant du haut vers le bas ou qu'on travaille sur un concept créatif, pouvoir utiliser des concepts relatifs au flux plutôt que des valeurs géométriques absolues.

Axe de bloc et axe en ligne

@@ -44,20 +44,20 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base

Le diagramme ci-après illustre l'organisation des axes en ligne et des axes de bloc pour un mode d'écriture horizontal :

-

diagram showing the inline axis running horizontally, block axis vertically.

+

diagram showing the inline axis running horizontally, block axis vertically.

Le diagramme suivant illustre l'axe en ligne et l'axe de bloc pour un mode d'écriture vertical :

-

Diagram showing the block axis running horizontally the inline axis vertically.

+

Diagram showing the block axis running horizontally the inline axis vertically.

Prise en charge des navigateurs

-

Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages de référence pour ces propriétés sur MDN, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).

+

Les propriétés et valeurs logiques peuvent être catégorisées selon différents groupes, notamment pour la compatibilité des navigateurs. Certaines des propriétés logiques sont essentiellement des correspondances de propriétés physiques équivalentes ({{CSSxRef("inline-size")}} sera la propriété logique pouvant correspondre à la propriété physique {{CSSxRef("width")}} et {{CSSxRef("margin-inline-start")}} la propriété physique correspondant à {{CSSxRef("margin-left")}}). La prise en charge de ces propriétés logiques correspondant à des propriétés physiques est plutôt correcte pour les navigateurs récents, vous pouvez consulter les pages de référence pour ces propriétés sur MDN, seul Edge ne prend pas en charge ces propriétés à date (décembre 2018).

On a également un groupe de propriétés qui ne possèdent pas de correspondances directes avec les propriétés physiques. Ces propriétés sont des propriétés raccourcies qui font référence aux deux extrêmités d'un axe. Ainsi {{CSSxRef("margin-block")}} sera une propriété raccourcie pour {{CSSxRef("margin-block-start")}} et {{CSSxRef("margin-block-end")}}. Ce deuxième groupe n'est actuellement pas pris en charge par les navigateurs.

-
-

Note : Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom margin pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'issue GitHub n°1282.

+
+

Note : Le groupe de travail CSS est actuellement en réflexion pour les propriétés raccourcies avec quatre valeurs pour les propriétés logiques. Autrement dit, comment définir les marges logiques de la façon dont on utilise la propriété {{CSSxRef("margin")}}. Il faudrait en effet une sorte de modificateur si on continue d'utiliser le nom margin pour les propriétés relatives au flux. Pour en savoir plus sur les suggestions et commentaires, vous pouvez consulter l'issue GitHub n°1282.

Tester la compatibilité des navigateurs

@@ -69,8 +69,8 @@ original_slug: Web/CSS/CSS_Logical_Properties/Concepts_de_base

Voir aussi

diff --git a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html index dbb69adc26..e7105dad8a 100644 --- a/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html +++ b/files/fr/web/css/css_logical_properties/floating_and_positioning/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_ ---
{{CSSRef}}
-

La spécification sur les propriétés et valeurs logiques définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une disposition positionnée. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.

+

La spécification sur les propriétés et valeurs logiques définit des valeurs logiques qui correspondent aux valeurs physiques utilisées pour {{cssxref("float")}} et {{cssxref("clear")}}. Elle définit aussi des propriétés logiques pour le positionnement lorsqu'on utilise une disposition positionnée. Dans ce guide, nous verrons comment utiliser ces valeurs et ces propriétés logiques.

Correspondance entre les propriétés et les valeurs

@@ -129,7 +129,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Propriétés_logiques_flottements_
  • {{cssxref("inset-block")}} — elle permet de définir les décalage sur l'axe de bloc
    • -
    +

    Note : Les navigateurs n'ont, pour l'instant, pas implémenté ces nouvelles propriétés (décembre 2018). Pour plus d'informations sur la compatibilité des navigateurs, vous pouvez vous référer aux tableaux de compatibilité présents à la fin des pages de référence pour ces propriétés.

    diff --git a/files/fr/web/css/css_logical_properties/index.html b/files/fr/web/css/css_logical_properties/index.html index bf77e064c1..7d671c63ed 100644 --- a/files/fr/web/css/css_logical_properties/index.html +++ b/files/fr/web/css/css_logical_properties/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Logical_Properties ---
    {{CSSRef}}
    -

    CSS Logical Properties (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : block et inline, perpendiculaires, qui dépendent du sens de l'orientation du document.

    +

    CSS Logical Properties (les propriétés logiques CSS) est un module CSS qui définit une correspondance logique vers les propriétés physiques de contrôle de la mise en page selon le sens de lecture et l'orientation du texte. On aura deux directions logiques : block et inline, perpendiculaires, qui dépendent du sens de l'orientation du document.

    Ce module définit également les propriétés logiques et les valeurs pour les propriétés précédemment définies avec CSS 2.1. Les propriétés logiques sont des propriétés dont l'orientation est relative au mode d'écriture du document et possèdent des propriétés physiques équivalentes.

    @@ -20,9 +20,9 @@ translation_of: Web/CSS/CSS_Logical_Properties

    Les propriétés et valeurs logiques utilisent les termes abstraits bloc (block) ou ligne (inline) afin de décrire leur direction. La signification physique de ces termes dépend du mode d'écriture.

    -
    Dimension de bloc
    +
    Dimension de bloc
    C'est la dimension perpendiculaire au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension verticale lorsque le texte est écrit dans un mode horizontal et de la dimension horizontale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe vertical).
    -
    Dimension en ligne
    +
    Dimension en ligne
    C'est la dimension parallèle au flux du texte sur une ligne. Autrement dit, il s'agit de la dimension horizontale lorsque le texte est écrit dans un mode horizontal et de la dimension verticale lorsque le texte est écrit verticalement (pour le français, cette dimension correspond donc à l'axe horizontal).
    @@ -30,7 +30,6 @@ translation_of: Web/CSS/CSS_Logical_Properties

    Propriétés relatives au dimensionnement

    -
    • {{CSSxRef("block-size")}} {{Experimental_Inline}}
    • {{CSSxRef("inline-size")}} {{Experimental_Inline}}
      • @@ -39,11 +38,9 @@ translation_of: Web/CSS/CSS_Logical_Properties
    • {{CSSxRef("min-block-size")}} {{Experimental_Inline}}
    • {{CSSxRef("min-inline-size")}} {{Experimental_Inline}}
    -

    Propriétés relatives aux marges, bordures et remplissages

    -
    • {{CSSxRef("border-block")}} {{Experimental_Inline}}
    • {{CSSxRef("border-block-color")}} {{Experimental_Inline}}
      • @@ -57,7 +54,7 @@ translation_of: Web/CSS/CSS_Logical_Properties
    • {{CSSxRef("border-block-start-width")}} {{Experimental_Inline}}
    • {{CSSxRef("border-block-style")}} {{Experimental_Inline}}
    • {{CSSxRef("border-block-width")}} {{Experimental_Inline}}
      • -
    • {{CSSxRef("border-color")}} (mot-clé logical {{Experimental_Inline}})
      • +
    • {{CSSxRef("border-color")}} (mot-clé logical {{Experimental_Inline}})
    • {{CSSxRef("border-inline")}} {{Experimental_Inline}}
    • {{CSSxRef("border-inline-color")}} {{Experimental_Inline}}
    • {{CSSxRef("border-inline-end")}} {{Experimental_Inline}}
      • @@ -74,16 +71,16 @@ translation_of: Web/CSS/CSS_Logical_Properties
    • {{CSSxRef("border-start-end-radius")}} {{Experimental_Inline}}
    • {{CSSxRef("border-end-start-radius")}} {{Experimental_Inline}}
    • {{CSSxRef("border-end-end-radius")}} {{Experimental_Inline}}
      • -
    • {{CSSxRef("border-style")}} (mot-clé logical {{Experimental_Inline}})
      • -
    • {{CSSxRef("border-width")}} (mot-clé logical {{Experimental_Inline}})
      • -
    • {{CSSxRef("margin")}} (mot-clé logical {{Experimental_Inline}})
      • +
    • {{CSSxRef("border-style")}} (mot-clé logical {{Experimental_Inline}})
      • +
    • {{CSSxRef("border-width")}} (mot-clé logical {{Experimental_Inline}})
      • +
    • {{CSSxRef("margin")}} (mot-clé logical {{Experimental_Inline}})
    • {{CSSxRef("margin-block")}} {{Experimental_Inline}}
    • {{CSSxRef("margin-block-end")}} {{Experimental_Inline}}
    • {{CSSxRef("margin-block-start")}} {{Experimental_Inline}}
    • {{CSSxRef("margin-inline")}} {{Experimental_Inline}}
    • {{CSSxRef("margin-inline-end")}} {{Experimental_Inline}}
    • {{CSSxRef("margin-inline-start")}} {{Experimental_Inline}}
      • -
    • {{CSSxRef("padding")}} (mot-clé logical {{Experimental_Inline}})
      • +
    • {{CSSxRef("padding")}} (mot-clé logical {{Experimental_Inline}})
    • {{CSSxRef("padding-block")}} {{Experimental_Inline}}
    • {{CSSxRef("padding-block-end")}} {{Experimental_Inline}}
    • {{CSSxRef("padding-block-start")}} {{Experimental_Inline}}
      • @@ -91,14 +88,12 @@ translation_of: Web/CSS/CSS_Logical_Properties
    • {{CSSxRef("padding-inline-end")}} {{Experimental_Inline}}
    • {{CSSxRef("padding-inline-start")}} {{Experimental_Inline}}
    -

    Propriétés relatives aux flottements et au positionnement

    -
      -
    • {{CSSxRef("clear")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
      • -
    • {{CSSxRef("float")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
      • +
    • {{CSSxRef("clear")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
      • +
    • {{CSSxRef("float")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
    • {{CSSxRef("inset")}} {{Experimental_Inline}}
    • {{CSSxRef("inset-block")}} {{Experimental_Inline}}
    • {{CSSxRef("inset-block-end")}} {{Experimental_Inline}}
      • @@ -107,38 +102,33 @@ translation_of: Web/CSS/CSS_Logical_Properties
    • {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}}
    • {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}}
    -

    Autres propriétés

    -
      -
    • {{CSSxRef("caption-side")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
      • +
    • {{CSSxRef("caption-side")}} (mots-clés inline-end {{Experimental_Inline}} et inline-start {{Experimental_Inline}})
    • {{CSSxRef("overflow-block")}} {{Experimental_Inline}}
    • {{CSSxRef("overflow-inline")}} {{Experimental_Inline}}
      • -
    • {{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés block {{Experimental_Inline}} et inline {{Experimental_Inline}})
      • -
    • {{CSSxRef("text-align")}} (mots-clés end {{Experimental_Inline}} et start {{Experimental_Inline}})
      • +
    • {{CSSxRef("resize")}} {{Experimental_Inline}} (mots-clés block {{Experimental_Inline}} et inline {{Experimental_Inline}})
      • +
    • {{CSSxRef("text-align")}} (mots-clés end {{Experimental_Inline}} et start {{Experimental_Inline}})
    -

    Propriétés dépréciées

    -
      -
    • {{CSSxRef("offset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})
      • -
    • {{CSSxRef("offset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})
      • -
    • {{CSSxRef("offset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})
      • -
    • {{CSSxRef("offset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})
      • +
    • {{CSSxRef("inset-block-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-end")}} {{Experimental_Inline}})
      • +
    • {{CSSxRef("inset-block-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-block-start")}} {{Experimental_Inline}})
      • +
    • {{CSSxRef("inset-inline-end")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-end")}} {{Experimental_Inline}})
      • +
    • {{CSSxRef("inset-inline-start")}} {{Non-standard_Inline}} {{Deprecated_Inline}} (désormais {{CSSxRef("inset-inline-start")}} {{Experimental_Inline}})
    -

    Guides

    Spécifications

    diff --git a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html index 82b2995802..cf45a45e67 100644 --- a/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html +++ b/files/fr/web/css/css_logical_properties/margins_borders_padding/index.html @@ -11,7 +11,7 @@ original_slug: >- ---

    {{CSSRef}}

    -

    La spécification sur les propriétés et valeurs logiques définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (padding) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.

    +

    La spécification sur les propriétés et valeurs logiques définit des correspondances pour les propriétés servant à définir les marges, les bordures et les remplissages (padding) et les propriétés raccourcies associées. Dans ce guide, nous verrons comment utiliser ces propriétés logiques.

    Si vous avez consulté la page principale sur les propriétés et valeurs logiques, vous avez pu voir une grande quantité de propriétés. Cela est principalement du au fait que pour chaque marge, bordure et remplissage, il y a quatre propriétés détaillées et une propriété raccourcie.

    @@ -227,7 +227,7 @@ original_slug: >- margin-block: 5px 10px; } -
    +

    Note : Ces propriétés raccourcies, margin-inline et margin-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

    @@ -253,7 +253,7 @@ original_slug: >- padding-block: 5px 10px; } -
    +

    Note : Ces propriétés raccourcies, padding-inline et padding-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

    @@ -276,7 +276,7 @@ original_slug: >- border-inline-color: rebeccapurple; } -
    +

    Note : Ces propriétés raccourcies, border-inline et border-block, ont été implémentées avec Firefox 66. Elles restent relativement nouvelles et mieux vaut donc vérifier la compatibilité navigateur avant de les utiliser.

    diff --git a/files/fr/web/css/css_logical_properties/sizing/index.html b/files/fr/web/css/css_logical_properties/sizing/index.html index 4b5c4dd892..2ede7d1bca 100644 --- a/files/fr/web/css/css_logical_properties/sizing/index.html +++ b/files/fr/web/css/css_logical_properties/sizing/index.html @@ -10,7 +10,7 @@ original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement ---
    {{CSSRef}}
    -

    Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.

    +

    Dans ce guide, nous verrons les correspondances entre les propriétés physiques et les propriétés logiques qui peuvent être utilisées afin de dimensionner des éléments au sein d'un document.

    Lorsqu'on définit la taille d'un objet, la spécification sur les propriétés et les valeurs logiques permet de définir le dimensionnement en fonction du flux du texte (le mode d'écriture et son orientation) plutôt que relativement aux dimensions physiques du support (haut / bas / gauche / droite). Bien que ce premier fonctionnement, utilisant des propriétés et des valeurs logiques, puisse devenir la méthode par défaut à l'avenir, on peut tout à fait avoir besoin d'utiliser des propriétés et des valeurs physiques en combinaison avec ces propriétés et ces valeurs logiques.

    @@ -85,6 +85,6 @@ original_slug: Web/CSS/CSS_Logical_Properties/Dimensionnement

    {{EmbedGHLiveSample("css-examples/logical/size-resize.html", "100%", 700)}}

    -
    -

    Attention ! À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour resize.

    +
    +

    Attention : À l'heure actuelle (décembre 2018), seul Firefox prend en charge les valeurs logiques pour resize.

    -- cgit v1.2.3-54-g00ecf