CSS block-size A Versatile Tool for Web Design

Introduction

The block-size CSS property is a versatile tool for setting the size of an element’s block, which can be either horizontal or vertical depending on the writing mode. It helps create flexible and responsive web designs by adapting to different text directions.

Specification

The block-size property is defined in the following standards:

1. CSS Logical Properties and Values Level 1
2. CSS Box Sizing Module Level 4

These specifications ensure that block-size behaves consistently across different browsers, making it a reliable tool for web developers.

Description

The block-size property defines the size of an element’s block. When the writing mode is vertical, block-size corresponds to the width. For horizontal writing modes, it corresponds to the height. This flexibility is particularly useful for creating adaptable layouts that handle different text directions.

block-size can take various values, including fixed lengths, percentages, and keywords like auto, min-content, max-content, and fit-content. This makes it easy to create both static and fluid layouts.

Syntax

The syntax for the block-size property is straightforward, allowing for several types of values:

block-size: length | percentage | auto | inherit | initial | unset;

Examples

Length Values

You can define block-size using fixed lengths like pixels (px) or ems (em).

block-size: 300px;
block-size: 25em;

Percentage Values

Percentage values set block-size relative to the containing block.

block-size: 75%;

Keyword Values

Several keyword values offer different ways to control the size of the element.

block-size: max-content;
block-size: min-content;
block-size: fit-content;
block-size: fit-content(20em);
block-size: auto;

Global Values

Global CSS values can also be used to inherit or reset the block-size property.

block-size: inherit;
block-size: initial;
block-size: revert;
block-size: revert-layer;
block-size: unset;

Advanced Syntax

For more complex layouts, you can use advanced syntax like calc() and anchor-size().

Using calc()

The calc() function allows for dynamic calculations.

block-size: calc(100% - 50px);

Using anchor-size()

The anchor-size() function defines block-size based on another element’s size.

block-size: anchor-size(height);
block-size: calc(anchor-size(--myAnchor block) * 0.75);

Values

The block-size property can take various values:

Length Values

Fixed lengths like pixels (px) or ems (em).

block-size: 300px;
block-size: 25em;

Percentage Values

Percentage values are relative to the containing block.

block-size: 75%;

Keyword Values

Keywords like auto, max-content, min-content, and fit-content.

block-size: auto;
block-size: max-content;
block-size: min-content;
block-size: fit-content;
block-size: fit-content(20em);

Global Values

Global CSS values like inherit, initial, revert, revert-layer, and unset.

block-size: inherit;
block-size: initial;
block-size: revert;
block-size: revert-layer;
block-size: unset;

Advanced Values

Advanced syntax like calc() and anchor-size().

Using calc()

Dynamic calculations with calc().

block-size: calc(100% - 50px);

Using anchor-size()

Define block-size based on another element’s size.

block-size: anchor-size(height);
block-size: calc(anchor-size(--myAnchor block) * 0.75);

Formal Definition

The block-size property controls the size of an element’s block, adapting based on the writing mode.

Key Attributes

• Initial Value: auto
• Applies To: Same as width and height
• Inherited: No
• Percentages: Relative to the block size of the containing block
• Computed Value: Same as width and height
• Animation Type: Length, percentage, or calc()

Formal Syntax

block-size = <length> | <percentage> | auto | inherit | initial | unset;

Detailed Formal Syntax

block-size =
  [<'width'>](/en-US/docs/Web/CSS/width)

<width> =
  auto                                      /* Single bar: exactly one of the entities must be present */
  <length-percentage [0,∞]>                 /* Single bar: exactly one of the entities must be present */
  min-content                               /* Single bar: exactly one of the entities must be present */
  max-content                               /* Single bar: exactly one of the entities must be present */
  fit-content( <length-percentage [0,∞]> )  /* Single bar: exactly one of the entities must be present */
  <calc-size()>                             /* Single bar: exactly one of the entities must be present */
  <anchor-size()>

<length-percentage> =
  [<length>](/en-US/docs/Web/CSS/length)      /* Single bar: exactly one of the entities must be present */
  [<percentage>](/en-US/docs/Web/CSS/percentage)     /* Single bar: exactly one of the entities must be present */

<calc-size()> =
  calc-size( <calc-size-basis> , <calc-sum> )

<anchor-size()> =
  anchor-size( [[<anchor-element> || <anchor-size> ]? , <length-percentage>? )

<calc-size-basis> =
  [<intrinsic-size-keyword>](/en-US/docs/Web/CSS/intrinsic-size-keyword)  /* Single bar: exactly one of the entities must be present */
  <calc-size()>             /* Single bar: exactly one of the entities must be present */
  any                       /* Single bar: exactly one of the entities must be present */
  <calc-sum>

<calc-sum> =
  <calc-product> [['+' | '-'] <calc-product> ]*

<anchor-element> =
  [<dashed-ident>](/en-US/docs/Web/CSS/dashed-ident)

<anchor-size> =
  width        /* Single bar: exactly one of the entities must be present */
  height       /* Single bar: exactly one of the entities must be present */
  block        /* Single bar: exactly one of the entities must be present */
  inline       /* Single bar: exactly one of the entities must be present */
  self-block   /* Single bar: exactly one of the entities must be present */
  self-inline

<calc-product> =
  <calc-value> [['*' | '/'] <calc-value> ]*

<calc-value> =
  [<number>](/en-US/docs/Web/CSS/number)        /* Single bar: exactly one of the entities must be present */
  [<dimension>](/en-US/docs/Web/CSS/dimension)     /* Single bar: exactly one of the entities must be present */
  [<percentage>](/en-US/docs/Web/CSS/percentage)    /* Single bar: exactly one of the entities must be present */
  <calc-keyword>  /* Single bar: exactly one of the entities must be present */
  ( <calc-sum> )

<calc-keyword> =
  e          /* Single bar: exactly one of the entities must be present */
  pi         /* Single bar: exactly one of the entities must be present */
  infinity   /* Single bar: exactly one of the entities must be present */
  -infinity  /* Single bar: exactly one of the entities must be present */
  NaN

Understanding the formal definition and syntax of the block-size property is crucial for using it effectively in web development. This property helps control the dimensions of elements, making them adapt to different writing modes and screen sizes, thus enhancing the responsiveness and accessibility of web designs.

Examples with Vertical and Horizontal Text

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS | block-size Property</title>
  <style>
    .verticalText {
      background-color: yellow;
      block-size: 200px;
      writing-mode: vertical-rl;
    }
    .horizontalText {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      color: white;
      background: green;
      block-size: 250px;
    }
    .percentageText {
      background-color: lightblue;
      block-size: 50%;
      writing-mode: vertical-lr;
    }
    .keywordText {
      background-color: lightcoral;
      block-size: fit-content;
      writing-mode: horizontal-tb;
    }
  </style>
</head>
<body>
  <center>
    <h1>Text</h1>
    <b>CSS | block-size Property</b>
    <br><br>
    <div>
      <b class="verticalText">Vertical Text</b>
      <p class="horizontalText">Horizontal Text</p>
      <b class="percentageText">Percentage Text</b>
      <b class="keywordText">Keyword Text</b>
    </div>
  </center>
</body>
</html>

CSS

.verticalText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
}

.horizontalText {
  writing-mode: horizontal-tb;
  background: green;
  block-size: 250px;
}

.percentageText {
  writing-mode: vertical-lr;
  background-color: lightblue;
  block-size: 50%;
}

.keywordText {
  writing-mode: horizontal-tb;
  background-color: lightcoral;
  block-size: fit-content;
}

Browser Compatibility

The block-size property is supported by major browsers, ensuring it works across various devices and platforms.

Compatibility Table

Ensuring Compatibility

• Google Chrome: Supported since version 57.
• Edge: Supported since version 79.
• Mozilla Firefox: Supported since version 41.
• Opera: Supported since version 44.
• Safari: Supported since version 12.1.

Using the block-size property effectively allows you to create flexible and responsive layouts that adapt to different writing modes and screen sizes, enhancing the user experience.

Using the block-size Property

To make sure your use of the block-size property works well across different browsers, it’s a good idea to include fallback styles using the width and height properties. This way, even if a browser doesn’t support block-size, your layout will still look good.

Example Fallback

Here’s how you can include fallback styles for better browser compatibility:

.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 200px;
  width: 200px; /* Fallback for browsers that don't support block-size */
  height: 200px; /* Fallback for browsers that don't support block-size */
}

By including fallback styles, you ensure your web designs work for everyone, no matter what browser they use.

Understanding Related Properties

When working with block-size, you might find these related properties useful:

• width: Sets the horizontal size of an element.
• height: Sets the vertical size of an element.
• writing-mode: Controls the direction of text flow.
• inline-size: Sets the size along the inline axis (perpendicular to the block axis).
• min-width and max-width: Set minimum and maximum widths.
• min-height and max-height: Set minimum and maximum heights.
• box-sizing: Defines how width and height are calculated.
• margin and padding: Control space around and inside an element.
• display: Defines the display behavior of an element.

Browser Compatibility

The block-size property is supported by:

• Google Chrome: Version 57 and later.
• Microsoft Edge: Version 79 and later.
• Mozilla Firefox: Version 41 and later.
• Opera: Version 44 and later.
• Safari: Version 12.1 and later.

Additional Resources

For more details on browser compatibility and the block-size property, check out:

• MDN Web Docs - block-size
• Can I use - block-size

Conclusion

The block-size property is a great tool for controlling the dimensions of elements in different writing modes. With good browser support and simple fallback strategies, you can use it to create responsive and adaptable web layouts that work well across various devices and platforms.

Stay informed about browser compatibility and use the block-size property effectively to create awesome web designs that work seamlessly everywhere.