max-block-size

Experimental

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
Valor calculadosame as max-width and max-height
Animation typea length, percentage or calc();

Valores

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

<length>
Defines the max-width as an absolute value.
<percentage>
Defines the max-width as a percentage of the containing block's width.
none
No limit on the size of the box.
max-content
The intrinsic preferred max-width.
min-content
The intrinsic minimum max-width.
fit-content(<length-percentage>)
Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)).

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 This deprecated API should no longer be used, but will probably still work. , lr-tb This deprecated API should no longer be used, but will probably still work. , rl This deprecated API should no longer be used, but will probably still work. , rb This deprecated API should no longer be used, but will probably still work. , rb-rl This deprecated API should no longer be used, but will probably still work. max-height
vertical-rl, vertical-lr, sideways-rl This is an experimental API that should not be used in production code. , sideways-lr This is an experimental API that should not be used in production code. , tb This deprecated API should no longer be used, but will probably still work. , tb-rl This deprecated API should no longer be used, but will probably still work. 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

BCD tables only load in the browser

Mira también