Understanding CSS max-block-size for Responsive Design

max-block-size

Baseline

The max-block-size property is well-established and widely supported across many devices and browser versions. It has been available since September 2021, making it a reliable feature for web developers and designers. This broad compatibility ensures that your web designs will work consistently across different platforms and browsers.

Description

The max-block-size CSS property sets the maximum size of an element in the direction opposite to the writing direction. This direction is determined by the writing-mode property. If the writing direction is horizontal, max-block-size acts like max-height. If the writing direction is vertical, max-block-size acts like max-width.

This property is especially useful for creating responsive and adaptable web designs. It allows you to control the maximum size of elements based on the direction of the text content, ensuring that your layouts look good regardless of the writing mode.

Syntax

The syntax for the max-block-size CSS property is straightforward and similar to other CSS size properties. Here is the basic syntax:

/* <length> values */
max-block-size: 300px;
max-block-size: 25em;
max-block-size: anchor-size(--myAnchor self-inline, 250px);
max-block-size: calc(anchor-size(width) / 2);

/* <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: fit-content(20em);

/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: revert;
max-block-size: revert-layer;
max-block-size: unset;

Explanation of Syntax

• <length> values: Specifies the maximum size as an absolute value, such as pixels (px) or ems (em).
• <percentage> values: Sets the maximum size as a percentage of the containing block’s size in the block axis.
• Keyword values:
  • none: No limit on the size of the box.
  • max-content: The intrinsic preferred maximum size.
  • min-content: The intrinsic minimum maximum size.
  • fit-content: Uses the available space, but not more than max-content.
  • fit-content(<length-percentage>): Uses the fit-content formula with the available space replaced by the specified argument.
• Global values:
  • inherit: Inherits the value from the parent element.
  • initial: Sets the property to its initial value.
  • revert: Rolls back the property to the user agent’s default.
  • revert-layer: Rolls back the property to the value set at the previous cascade layer.
  • unset: Resets the property to its natural value, which means it acts as inherit if the property is inherited and initial if it is not.

Anchor Size Values

• anchor-size(): This function can be used to set the maximum size based on the size of another element or anchor.

  max-block-size: anchor-size(--myAnchor self-inline, 250px);

Calculated Values

• calc(): Allows you to calculate the maximum size using a combination of other values.

  max-block-size: calc(anchor-size(width) / 2);

Formal definition

The max-block-size property in CSS is formally defined with specific characteristics and behaviors. Here is a detailed breakdown of its formal definition:

Initial Value

• none: By default, the max-block-size property is set to none, which means there is no limit on the size of the box.

Applies to

• Same as [width]WebsiteUrl and [height]WebsiteUrl: The max-block-size property applies to the same elements as the width and height properties.

Inherited

• No: The max-block-size property is not inherited from the parent element. Each element must have its own max-block-size defined.

Percentages

• Block-size of containing block: When using percentage values, the max-block-size is calculated as a percentage of the containing block’s size in the block axis.

Computed Value

• Same as [max-width]WebsiteUrl and [max-height]WebsiteUrl: The computed value of max-block-size is determined similarly to the max-width and max-height properties.

Animation Type

• Length, percentage, or calc(): The max-block-size property can be animated using length, percentage, or calculated values. This allows for smooth transitions and animations based on the maximum size of the element.

Summary

• Initial Value: none
• Applies to: Same as width and height
• Inherited: No
• Percentages: Block-size of containing block
• Computed Value: Same as max-width and max-height
• Animation Type: Length, percentage, or calc()

Formal syntax

The formal syntax for the max-block-size property in CSS defines how the property can be specified. This syntax includes the various values and combinations that can be used to set the maximum size of an element in the direction opposite to the writing direction. Here is a detailed breakdown of the formal syntax:

/* <length> values */
max-block-size: 300px;
max-block-size: 25em;
max-block-size: anchor-size(--myAnchor self-inline, 250px);
max-block-size: calc(anchor-size(width) / 2);

/* <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: fit-content(20em);

/* Global values */
max-block-size: inherit;
max-block-size: initial;
max-block-size: revert;
max-block-size: revert-layer;
max-block-size: unset;

Explanation of Syntax

• <length> values: Specifies the maximum size as an absolute value, such as pixels (px) or ems (em).
• <percentage> values: Sets the maximum size as a percentage of the containing block’s size in the block axis.
• Keyword values:
  • none: No limit on the size of the box.
  • max-content: The intrinsic preferred maximum size.
  • min-content: The intrinsic minimum maximum size.
  • fit-content: Uses the available space, but not more than max-content.
  • fit-content(<length-percentage>): Uses the fit-content formula with the available space replaced by the specified argument.
• Global values:
  • inherit: Inherits the value from the parent element.
  • initial: Sets the property to its initial value.
  • revert: Rolls back the property to the user agent’s default.
  • revert-layer: Rolls back the property to the value set at the previous cascade layer.
  • unset: Resets the property to its natural value, which means it acts as inherit if the property is inherited and initial if it is not.

Anchor Size Values

• anchor-size(): This function can be used to set the maximum size based on the size of another element or anchor.

  max-block-size: anchor-size(--myAnchor self-inline, 250px);

Calculated Values

• calc(): Allows you to calculate the maximum size using a combination of other values.

  max-block-size: calc(anchor-size(width) / 2);

How writing-mode affects directionality

The writing-mode property in CSS determines the direction of text flow in a block. This property can significantly impact how the max-block-size property behaves. Depending on the value of writing-mode, max-block-size will map to either max-height or max-width.

Understanding Writing Modes

The writing-mode property can have various values that dictate the text direction:

• horizontal-tb: Text flows horizontally from left to right, with lines stacking vertically (top to bottom).
• vertical-rl: Text flows vertically from top to bottom, with lines stacking horizontally from right to left.
• vertical-lr: Text flows vertically from top to bottom, with lines stacking horizontally from left to right.
• sideways-rl: Text is rotated 90 degrees clockwise and flows vertically, with lines stacking horizontally from right to left.
• sideways-lr: Text is rotated 90 degrees counter-clockwise and flows vertically, with lines stacking horizontally from left to right.

Impact on max-block-size

The max-block-size property will behave differently based on these writing modes:

Example Scenarios

1. Horizontal Writing Mode (horizontal-tb):
   • max-block-size acts like max-height.
   • Example: A block of text with horizontal writing mode and a max-block-size of 300px will have a maximum height of 300px.
2. Vertical Writing Mode (vertical-rl):
   • max-block-size acts like max-width.
   • Example: A block of text with vertical writing mode and a max-block-size of 300px will have a maximum width of 300px.

Practical Usage

Using max-block-size appropriately based on the writing mode ensures that your layout adapts seamlessly to different text orientations. This is particularly useful for multilingual websites or applications that need to support various writing systems.

Notes

• Deprecated Values: The writing-mode values sideways-lr and sideways-rl were removed from the CSS Writing Modes Level 3 specification and may be restored in Level 4.
• HTML Contexts: 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.

Examples

Setting max-block-size with different units

HTML

<p>Max-block-size with pixels:</p>
<div class="box px">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<p>Max-block-size with ems:</p>
<div class="box em">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<p>Max-block-size with percentages:</p>
<div class="box percent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

CSS

.box {
  padding: 10px;
  background-color: #abcdef;
  color: #000;
  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
}

.px {
  max-block-size: 200px;
}

.em {
  max-block-size: 12.5em;
}

.percent {
  max-block-size: 50%;
}

Result

This example shows how the max-block-size property can be used with different units to control the maximum size of an element. Using pixels, ems, and percentages allows for precise control over the layout and ensures that your designs are flexible and responsive.

Setting max-block-size with fit-content

HTML

<p>Max-block-size with fit-content:</p>
<div class="fit-content-box">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

CSS

.fit-content-box {
  padding: 10px;
  background-color: #abcdef;
  color: #000;
  font: 16px "Open Sans", "Helvetica", "Arial", sans-serif;
  max-block-size: fit-content(20em);
}

Result

This example demonstrates how the fit-content value can be used to set the max-block-size property. The fit-content value ensures that the element uses the available space but does not exceed the specified maximum size. This is useful for creating flexible and adaptable layouts.

Setting max-block-size with horizontal and vertical text

HTML

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

CSS

.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;
}

Result

This example demonstrates how the max-block-size property adapts to different writing modes. In the horizontal writing mode (horizontal-tb), max-block-size acts like max-height, limiting the height of the text block to 160 pixels. In the vertical writing mode (vertical-rl), max-block-size acts like max-width, limiting the width of the text block to 160 pixels.

By setting the max-block-size property, you ensure that the text blocks do not exceed the specified maximum size, regardless of the writing mode. This is particularly useful for creating responsive designs that adapt to different text orientations and content sizes.

Specifications

The max-block-size property is defined in several CSS specifications that outline its behavior and usage. These specifications provide the formal definitions and guidelines for implementing this property in web browsers.

CSS Logical Properties and Values Level 1

• Specification Link: [CSS Logical Properties and Values Level 1]WebsiteUrl

CSS Box Sizing Module Level 4

• Specification Link: [CSS Box Sizing Module Level 4]WebsiteUrl

These specifications ensure that the max-block-size property is thoroughly defined and can be implemented consistently across different web browsers. By adhering to these specifications, web developers can create reliable and responsive designs that work seamlessly across various devices and platforms.

Browser compatibility

The max-block-size property is well-supported across many modern web browsers, ensuring that your web designs will work consistently across different platforms and devices. Below is a summary of the browser compatibility for this property:

Browser Support

• Chrome: WebsiteUrl
• Firefox: WebsiteUrl
• Safari: WebsiteUrl
• Edge: WebsiteUrl
• Opera: WebsiteUrl

By understanding and using these examples and specifications, you can effectively implement the max-block-size property in your web projects to create responsive and adaptable designs.

Browser Compatibility for max-block-size

• Firefox: Supports max-block-size from version 41.
• Google Chrome: Supports max-block-size from version 57.
• Microsoft Edge: Supports max-block-size from version 79.
• Opera: Supports max-block-size from version 44.
• Safari: Supports max-block-size from version 12.1.

Compatibility Table

Notes

• Firefox 41: Full support for max-block-size.
• Google Chrome 57: Full support for max-block-size.
• Microsoft Edge 79: Full support for max-block-size.
• Opera 44: Full support for max-block-size.
• Safari 12.1: Full support for max-block-size.

This broad compatibility means you can safely use max-block-size in your web projects, knowing it works across a wide range of browsers.

Additional Resources

For detailed browser compatibility, check out:

• [MDN Web Docs - max-block-size Browser Compatibility]WebsiteUrl
• [Can I Use - max-block-size]WebsiteUrl

Related Properties and Resources

To better understand and use max-block-size, check out these related properties and resources:

Related Properties

1. max-width and max-height:
   • These properties control the maximum width and height of an element.
   • [MDN Web Docs - max-width]WebsiteUrl
   • [MDN Web Docs - max-height]WebsiteUrl
2. max-inline-size:
   • Sets the maximum size of an element in the direction of the writing mode.
   • [MDN Web Docs - max-inline-size]WebsiteUrl
3. writing-mode:
   • Defines the direction of text flow in a block, affecting max-block-size.
   • [MDN Web Docs - writing-mode]WebsiteUrl

Additional Resources

1. CSS Logical Properties and Values Level 1:
   • Introduces logical properties and values, including max-block-size.
   • [CSS Logical Properties and Values Level 1]WebsiteUrl
2. CSS Box Sizing Module Level 4:
   • Defines sizing properties, ensuring consistency across implementations.
   • [CSS Box Sizing Module Level 4]WebsiteUrl
3. MDN Web Docs:
   • Extensive documentation on CSS properties, including max-block-size.
   • [MDN Web Docs - CSS]WebsiteUrl
4. Can I Use:
   • Detailed information on browser compatibility for web technologies.
   • [Can I Use - max-block-size]WebsiteUrl

By exploring these resources, you can deepen your understanding of max-block-size and create more flexible, responsive web designs.