CSS Logical Properties

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.

Dimension de bloc ou de ligne

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
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
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).

Référence

Propriétés relatives au dimensionnement

  • block-size This is an experimental API that should not be used in production code.
  • inline-size This is an experimental API that should not be used in production code.
  • max-block-size This is an experimental API that should not be used in production code.
  • max-inline-size This is an experimental API that should not be used in production code.
  • min-block-size This is an experimental API that should not be used in production code.
  • min-inline-size This is an experimental API that should not be used in production code.

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

  • border-block This is an experimental API that should not be used in production code.
  • border-block-color This is an experimental API that should not be used in production code.
  • border-block-end This is an experimental API that should not be used in production code.
  • border-block-end-color This is an experimental API that should not be used in production code.
  • border-block-end-style This is an experimental API that should not be used in production code.
  • border-block-end-width This is an experimental API that should not be used in production code.
  • border-block-start This is an experimental API that should not be used in production code.
  • border-block-start-color This is an experimental API that should not be used in production code.
  • border-block-start-style This is an experimental API that should not be used in production code.
  • border-block-start-width This is an experimental API that should not be used in production code.
  • border-block-style This is an experimental API that should not be used in production code.
  • border-block-width This is an experimental API that should not be used in production code.
  • border-color (mot-clé logical This is an experimental API that should not be used in production code. )
  • border-inline This is an experimental API that should not be used in production code.
  • border-inline-color This is an experimental API that should not be used in production code.
  • border-inline-end This is an experimental API that should not be used in production code.
  • border-inline-end-color This is an experimental API that should not be used in production code.
  • border-inline-end-style This is an experimental API that should not be used in production code.
  • border-inline-end-width This is an experimental API that should not be used in production code.
  • border-inline-start This is an experimental API that should not be used in production code.
  • border-inline-start-color This is an experimental API that should not be used in production code.
  • border-inline-start-style This is an experimental API that should not be used in production code.
  • border-inline-start-width This is an experimental API that should not be used in production code.
  • border-inline-style This is an experimental API that should not be used in production code.
  • border-inline-width This is an experimental API that should not be used in production code.
  • border-start-start-radius This is an experimental API that should not be used in production code.
  • border-start-end-radius This is an experimental API that should not be used in production code.
  • border-end-start-radius This is an experimental API that should not be used in production code.
  • border-end-end-radius This is an experimental API that should not be used in production code.
  • border-style (mot-clé logical This is an experimental API that should not be used in production code. )
  • border-width (mot-clé logical This is an experimental API that should not be used in production code. )
  • margin (mot-clé logical This is an experimental API that should not be used in production code. )
  • margin-block This is an experimental API that should not be used in production code.
  • margin-block-end This is an experimental API that should not be used in production code.
  • margin-block-start This is an experimental API that should not be used in production code.
  • margin-inline This is an experimental API that should not be used in production code.
  • margin-inline-end This is an experimental API that should not be used in production code.
  • margin-inline-start This is an experimental API that should not be used in production code.
  • padding (mot-clé logical This is an experimental API that should not be used in production code. )
  • padding-block This is an experimental API that should not be used in production code.
  • padding-block-end This is an experimental API that should not be used in production code.
  • padding-block-start This is an experimental API that should not be used in production code.
  • padding-inline This is an experimental API that should not be used in production code.
  • padding-inline-end This is an experimental API that should not be used in production code.
  • padding-inline-start This is an experimental API that should not be used in production code.

Propriétés relatives aux flottements et au positionnement

  • clear (mots-clés inline-end This is an experimental API that should not be used in production code. et inline-start This is an experimental API that should not be used in production code. )
  • float (mots-clés inline-end This is an experimental API that should not be used in production code. et inline-start This is an experimental API that should not be used in production code. )
  • inset This is an experimental API that should not be used in production code.
  • inset-block This is an experimental API that should not be used in production code.
  • inset-block-end This is an experimental API that should not be used in production code.
  • inset-block-start This is an experimental API that should not be used in production code.
  • inset-inline This is an experimental API that should not be used in production code.
  • inset-inline-end This is an experimental API that should not be used in production code.
  • inset-inline-start This is an experimental API that should not be used in production code.

Autres propriétés

  • caption-side (mots-clés inline-end This is an experimental API that should not be used in production code. et inline-start This is an experimental API that should not be used in production code. )
  • overflow-block This is an experimental API that should not be used in production code.
  • overflow-inline This is an experimental API that should not be used in production code.
  • resize This is an experimental API that should not be used in production code. (mots-clés block This is an experimental API that should not be used in production code. et inline This is an experimental API that should not be used in production code. )
  • text-align (mots-clés end This is an experimental API that should not be used in production code. et start This is an experimental API that should not be used in production code. )

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

  • offset-block-end Cette API n'a pas été standardisée. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. (désormais inset-block-end This is an experimental API that should not be used in production code. )
  • offset-block-start Cette API n'a pas été standardisée. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. (désormais inset-block-start This is an experimental API that should not be used in production code. )
  • offset-inline-end Cette API n'a pas été standardisée. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. (désormais inset-inline-end This is an experimental API that should not be used in production code. )
  • offset-inline-start Cette API n'a pas été standardisée. Cette API obsolète ne doit plus être utilisée, mais elle peut continuer à fonctionner. (désormais inset-inline-start This is an experimental API that should not be used in production code. )

Guides

Spécifications

Spécification État Commentaires
CSS Logical Properties and Values Level 1 Brouillon de l'éditeur Définition initiale.

Compatibilité générale

De façon générale :

  • Firefox prend en charge les propriétés logiques lorsqu'il existe une correspondance directe avec les propriétés physiques.
  • Idem pour Chrome à partir de la version 69.
  • Edge ne prend actuellement (décembre 2018) pas en charge ces propriétés.
  • Firefox 66 introduit la prise en charge de deux valeurs raccourcies qui sont également derrière un flag pour Chrome.

Pour des informations précises sur chaque propriété, se référer au tableau de compatibilité des pages des propriétés.