Understanding CSS Inset-Inline-End A Comprehensive Guide

inset-inline-end CSS Property

The inset-inline-end CSS property defines the logical inline end inset of an element. It helps position elements based on their writing mode, directionality, and text orientation, making it a powerful tool for responsive and adaptable design.

Syntax

Here’s how you can use the inset-inline-end property:

/* Length values */
inset-inline-end: 3px;
inset-inline-end: 2.4em;

/* Percentage values */
inset-inline-end: 10%;

/* Keyword value */
inset-inline-end: auto;

/* Global values */
inset-inline-end: inherit;
inset-inline-end: initial;
inset-inline-end: revert;
inset-inline-end: revert-layer;
inset-inline-end: unset;

Values

• Length Values: Use fixed lengths like pixels (px) or ems (em).
• Percentage Values: Set the inset as a percentage of the containing block’s width or height.
• Keyword Values: auto lets the browser determine the inset.
• Global Values: Use inherit, initial, revert, revert-layer, and unset for inheritance and resetting.

Formal Definition

The inset-inline-end property is part of CSS Logical Properties and Values Level 1, aimed at making CSS more adaptable to different writing modes and directionalities.

• Initial Value: auto
• Applies To: Positioned elements (relative, absolute, fixed, sticky)
• Inherited: No
• Percentages: Calculated based on the logical width of the containing block

Examples

Basic Usage

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}

Vertical Writing Mode

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-rl;
  position: relative;
  inset-inline-end: 20px;
  background-color: #c8c800;
}

Using Percentage Values

HTML:

<div>
  <p class="exampleText">Example text</p>
</div>

CSS:

div {
  background-color: yellow;
  width: 200px;
  height: 100px;
}

.exampleText {
  position: relative;
  inset-inline-end: 10%;
  background-color: #c8c800;
}

Browser Compatibility

The inset-inline-end CSS property is widely supported across modern web browsers, making it a reliable choice for web developers. This property has been available since September 2021, ensuring compatibility with many devices and browser versions.

Supported Browsers

• Google Chrome: Version 87 and above
• Firefox: Version 63 and above
• Microsoft Edge: Version 87 and above
• Opera: Version 73 and above
• Safari: Version 14.1 and above

Browser Compatibility Table

Additional Resources

For a more comprehensive understanding of CSS properties and their usage, you might want to explore the following related properties and resources:

• Other Inset Properties:

  • inset-block-start
  • inset-block-end
  • inset-inline-start

• Mapped Physical Properties:

  • top
  • right
  • bottom
  • left

• Writing Mode and Direction Properties:

  • writing-mode
  • direction
  • text-orientation

• Related Specifications:

  • CSS Logical Properties and Values Level 1

• Additional Resources:

  • MDN Web Docs
  • Can I Use
  • CSS Tricks

These resources will provide you with a deeper understanding of how to use CSS properties effectively, including the inset-inline-end property. By exploring these related properties and resources, you can enhance your web development skills and create more sophisticated and responsive web designs.