Baseline-source - Propriété CSS

Schéma de la syntaxe de baseline-source.

Description de la propriété baseline-source.

La propriété baseline-source définit si un élément inline susceptible de comporter plusieurs lignes doit être aligné suivant sa première ligne ou suivant sa dernière ligne. Cela concerne donc les éléments affichés en inline-block, inline-flex, inline-grid.

baseline-source est une propriété d'autant plus importante que les éléments inline ne s'alignent pas tous de la même façon par défaut. Par exemple, les éléments inline-block s'alignent sur leur dernière ligne par défaut, tandis que les éléments inline-flex s'alignent sur leur première ligne.

Valeurs pour baseline-source.

• baseline-source: auto;

  Les éléments s'alignent conformément à leur fonctionnement par défaut, suivant leur type :

  • inline-block : alignement sur leur dernière ligne.
  • inline-flex : alignement sur leur première ligne.
  • inline-grid : alignement sur leur première ligne.
  Élément inline-block
  comportant deux lignes de texte

  Élément inline-block
  comportant trois lignes
  de texte

  
  

  Élément inline-flex
  comportant deux lignes de texte

  Élément inline-flex
  comportant trois lignes
  de texte

  
  

  Élément inline-grid
  comportant deux lignes de texte

  Élément inline-grid
  comportant trois lignes
  de texte
• baseline-source: first;

  L'élément s'aligne sur sa première ligne quelque soit son mode d'affichage.

  Élément inline-block
  comportant deux lignes de texte

  Élément inline-block
  comportant trois lignes
  de texte

  
  

  Élément inline-flex
  comportant deux lignes de texte

  Élément inline-flex
  comportant trois lignes
  de texte

  
  

  Élément inline-grid
  comportant deux lignes de texte

  Élément inline-grid
  comportant trois lignes
  de texte
• baseline-source: last;

  L'élément s'aligne sur sa dernière ligne quelque soit son mode d'affichage.

  Élément inline-block
  comportant deux lignes de texte

  Élément inline-block
  comportant trois lignes
  de texte

  
  

  Élément inline-flex
  comportant deux lignes de texte

  Élément inline-flex
  comportant trois lignes
  de texte

  
  

  Élément inline-grid
  comportant deux lignes de texte

  Élément inline-grid
  comportant trois lignes
  de texte
• baseline-source: initial; (auto) baseline-source: inherit; baseline-source: revert; baseline-source: revertLayer; baseline-source: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Accéder à la propriété baseline-source par programme.

Avec Javascript, modifier la valeur de baseline-source.

En Javascript, voici comment modifier la valeur de baseline-source. Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule au début des mots).

let el = document.getElementById('id'); el.style['baseline-source'] = 'first'; // ou let el = document.getElementById('id'); el.style.baselineSource = 'first';

Avec Javascript, lire la valeur de baseline-source.

Ce code retrouve la valeur de baseline-source lorsque la propriété a été affectée directement à l'élément lui-même via son attribut style, et non pas en passant par un sélecteur.

let el = document.getElementById('id'); let value = el.style['baseline-source']; // ou let el = document.getElementById('id'); let value = el.style.baselineSource;

Avec Javascript, lire la valeur calculée de baseline-source.

La valeur calculée est celle qui résulte soit de la cascade des héritages, soit ce sera la valeur initiale, c'est à dire auto dans le cas de baseline-source.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('baseline-source');

Avec JQuery, modifier la valeur de baseline-source.


$('#id').css('baseline-source', 'first');
// ou
$('#id').css('baselineSource', 'first');


Avec JQuery, lire la valeur calculée de baseline-source.

let value = $('#id').css('baseline-source');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété baseline-source et affichent ensuite la valeur telle qu'elle a été appliquée, ou la valeur calculée. Dans le cas de baseline-source ce sera la même chose.

Exemple interactif avec la propriété baseline-source.

Compatibilité des navigateurs avec baseline-source.

La propriété baseline-source est récente. Sa définition n'est pas encore stabilisée (2022). Il est préférable d'attendre une spécification plus stable pour utiliser cette propriété.

1

Propriété
baseline-source

Estimation de la prise en charge globale.

76%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Chrome

Safari

Firefox

Safari sur IOS

Edge

Chrome pour Androïd

Samsung Internet

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété baseline-source.

• Module CSS - Mise en page en ligne - Niveau 3

  Prenant la suite des faibles possibilités d'alignement de CSS2, ce module de spécification précise et enrichit les possibilités de positionnement par rapport à la ligne de base.
  De nombreuses propriétés sont ajoutées, dont baseline-source.
  

  18 Décembre 2014

  Document de travail.

  

  

  

Voir aussi, concernant les dispositions en ligne.

Le module de spécification dénommé "Module CSS - Mise en page en ligne", ou CSS Inline Layout Module en anglais, définit ce qui est relatif à la disposition des éléments par rapport à la ligne, que ce soit dans un objet SVG ou dans un document HTML. La propriété baseline-source est décrite dans ce module, ainsi que les suivantes :

Propriétés :