Skip to content

viewport segment pseudo element #11131

@Zhang-Junzhi

Description

@Zhang-Junzhi

It's very useful when we want to place some positioned elements associated with a specific viewport segment.

@media (horizontal-viewport-segments: 1) {
  html {
    anchor-name: --viewport-0-0;
  }
}

@media (horizontal-viewport-segments: 2) {
  ::viewport(0, 0) {
    anchor-name: --viewport-0-0;
  }
}

.taskbar {
  position: absolute;
  position-anchor: --viewport-0-0;
  top: 10px;
  justify-self: safe anchor-center;
}

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions