max-block-size

Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

 

La propiedad de CSS max-block-size especifica el tamaño máximo de un elemento en la dirección opuesta a la de la dirección de escritura según lo especificado por writing-mode. Esto es, si la dirección de escritura es horizontal, entonces max-block-size es equivalente a max-height; si la dirección de escritura es vertical, max-block-size es lo mismo que max-width.

La longitud máxima de la otra dimensión se especifica usando la propiedad max-inline-size.

Esto es útil porque max-width siempre se utiliza para tamaños horizontales y max-height siempre se usa para tamaños verticales, y si necesitas establecer longitudes en función del tamaño del contenido del texto, debes poder hacerlo con la dirección de escritura en mente.

En cualquier momento usarías normalmente max-heightmax-width, en su lugar deberías usar max-block-sizepara establecer el máximo "height" del contenido (even though this may not be a vertical value) y max-inline-size para establecer el máximo "width" del contenido (aunque esto puede ser más bien vertical en lugar de horizontal). Mira el Example in writing-mode, que muestra los diferentes modos de escritura en acción.

Sintaxis

/* <length> values */
max-block-size: 300px;
max-block-size: 25em;

/* <percentage> values */
max-block-size: 75%;

/* Keyword values */
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fill-available;

/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;
Valor inicial0
Applies tosame as width and height
Heredableno
Percentagesblock-size of containing block
Mediavisual
Valor calculadosame as max-width and max-height
Animation typediscrete
Canonical orderel orden único no-ambigüo definido por la gramática formal

Valores

El valor de la propiedad max-block-size puede ser cualquier valor legal de las popiedades max-width y max-height:

<length>
The maximum width as an absolute value.
<percentage>
The maximum width, expressed as a percentage of the containing block's width.

Keyword values

none
The width has no maximum value.
max-content 
The intrinsic preferred width.
min-content 
The intrinsic minimum width.
fill-available 
The containing block's width minus the horizontal margin, border, and padding. (Note that some browsers implement an ancient name for this keyword, available.)
fit-content 
The same as max-content.

Cómo writing-mode afecta la directionalidad

Los valores de writing-mode afecta la asignación de max-block-size a max-widthmax-height como sigue:

Valores de writing-mode max-block-size es equivalente a
horizontal-tb, lr , lr-tb , rl , rb , rb-rl max-height
vertical-rl, vertical-lr, sideways-rl , sideways-lr , tb , tb-rl max-width

The writing-mode values sideways-lr and sideways-rl were removed from the CSS Writing Modes Level 3 specification late in its design process. They may be restored in Level 4.

The writing modes lr, lr-tb, rl, rb, and rb-tl are no longer allowed in HTML contexts; they may only be used in SVG 1.x contexts.

Sintaxis formal

<'max-width'>

Ejemplo

En este ejemplo, el mismo texto (las oraciones iniciales del Herman Melville's novel Moby-Dick) es presentado en ambos modos de escritura: horizontal-tb y vertical-rl.

Todo lo demás sobre las dos cajas es idéntico, incluidos los valores utilizados para max-block-size.

Contenido HTML 

El HTML simplemente establece los dos bloques <div> que serán presentados con su writing-mode estableciendo el uso de las clases horizontalvertical. Ambas cajas comparten la clase standard-box, que simplemente establece colores, relleno, y sus respectivos valores de max-block-size.

<p>Writing mode <code>horizontal-tb</code> (the default):</p>
<div class="standard-box horizontal">
  Call me Ishmael. Some years ago—never mind how
  long precisely—having little or no money in my
  purse, and nothing particular to interest me on
  shore, I thought I would sail about a little and see
  the watery part of the world. It is a way I have of
  driving off the spleen and regulating the
  circulation.
</div>

<p>Writing mode <code>vertical-rl</code>:</p>
<div class="standard-box vertical">
  Call me Ishmael. Some years ago—never mind how
  long precisely—having little or no money in my
  purse, and nothing particular to interest me on
  shore, I thought I would sail about a little and see
  the watery part of the world. It is a way I have of
  driving off the spleen and regulating the
  circulation.
</div>

Contenido CSS 

El CSS está definido por tres clases. La primera, standard-box, es aplicada a ambas cajas, como se ve arriba. Proporciona un estilo estándar que incluye los tamaños de bloque mínimo y máximo, tamaño de fuente, etc.

Después que vienen las clases horizontal y vertical, que agregan las propiedades writing-mode para la caja, con el valor establecido para horizontal-tbvertical-rl dependiendo en qué clase se usa.

.standard-box {
  padding: 4px;
  background-color: #abcdef;
  color: #000;
  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
  max-block-size: 160px;
  min-block-size: 100px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}

Resultado

Las dos cajas se ven así al final:

Especificación

Especificación Estado Comentario
CSS Logical Properties and Values Level 1
La definición de 'max-block-size' en esta especificación.
Editor's Draft Definición inicial.

Compatibilidad en navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
max-block-sizeChrome Soporte completo 57Edge Sin soporte NoFirefox Soporte completo 41
Soporte completo 41
Sin soporte 38 — 51
Deshabilitado
Deshabilitado From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Sin soporte NoOpera Soporte completo 44Safari Soporte completo 12.1WebView Android Soporte completo 57Chrome Android Soporte completo 57Firefox Android Soporte completo 41
Soporte completo 41
Sin soporte 38 — 51
Deshabilitado
Deshabilitado From version 38 until version 51 (exclusive): this feature is behind the layout.css.vertical-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Soporte completo 43Safari iOS Soporte completo 12.2Samsung Internet Android Soporte completo 5.0
fit-contentChrome Soporte completo 57Edge Sin soporte NoFirefox Sin soporte NoIE Sin soporte NoOpera Soporte completo 44Safari Soporte completo 12.1WebView Android Soporte completo 57Chrome Android Soporte completo 57Firefox Android Sin soporte NoOpera Android Soporte completo 43Safari iOS Soporte completo 12.2Samsung Internet Android Soporte completo 5.0
Nombre alternativo
Soporte completo 5.0
Nombre alternativo
Nombre alternativo Usa un nombre no estandar : -webkit-fill-available
max-contentChrome Soporte completo 57Edge Sin soporte NoFirefox Soporte completo 66
Soporte completo 66
Soporte completo 41
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Sin soporte NoOpera Soporte completo 44Safari Soporte completo 12.1WebView Android Soporte completo 57Chrome Android Soporte completo 57Firefox Android Soporte completo 66
Soporte completo 66
Soporte completo 41
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Opera Android Soporte completo 43Safari iOS Soporte completo 12.2Samsung Internet Android Soporte completo 5.0
min-contentChrome Soporte completo 57Edge Sin soporte NoFirefox Soporte completo 66
Soporte completo 66
Soporte completo 41
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Sin soporte NoOpera Soporte completo 44Safari Soporte completo 12.1WebView Android Soporte completo 57Chrome Android Soporte completo 57Firefox Android Soporte completo 66
Soporte completo 66
Soporte completo 41
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Opera Android Soporte completo 43Safari iOS Soporte completo 12.2Samsung Internet Android Soporte completo 5.0

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
El usuario debe de habilitar explícitamente esta característica.
El usuario debe de habilitar explícitamente esta característica.
Usa un nombre no estandar.
Usa un nombre no estandar.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

Mira también