[csswg-drafts] [css-pseudo-4] Feedback on 6.1 CSSPseudoElement Interface and 6.2. pseudo() method of the Element interface (#10513)

HaluanUskoa has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-pseudo-4] Feedback on 6.1 CSSPseudoElement Interface and 6.2. pseudo() method of the Element interface ==
The editor's draft of the spec for [6.1 CSSPseudoElement Interface](https://drafts.csswg.org/css-pseudo-4/#CSSPseudoElement-interface) and [6.2. pseudo() method of the Element interface](https://drafts.csswg.org/css-pseudo-4/#window-interface) mention that they are looking for feedback relating to use cases and problems:

> This interface is under design development, and this draft is looking for feedback more than implementation. The CSSWG would particularly appreciate hearing about use cases and problems.

This issue isn't to report a bug, but to provide feedback. If this isn't the best place to provide the requested feedback, please let me know.

It would be great to have this implemented, specifically so pseudo-elements can access [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect). This was also mentioned in issue #6689 about three years ago.

This would make it significantly easier to find the location of pseudo-elements relative to the viewport. With a standard element, `getBoundingClientRect` makes this simple:

> The Element.getBoundingClientRect() method returns a [DOMRect](https://developer.mozilla.org/en-US/docs/Web/API/DOMRect) object providing information about the size of an element and its position relative to the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport).

Since pseudo-elements don't have access to this method, their positioning coordinates retrieved via `getComputedStyle` will be relative to the standard element, rather than being relative to the viewport.

For example, consider this element:

```
<div id = 'blue-square'></div>
```

```
#blue-square
{
  height: 100px;
  width: 100px;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  background: blue;
}

#blue-square::before
{
  content: '';
  height: 100px;
  width: 100px;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  background-color: orange;
}
```

This is a blue square centered in the viewport, and an orange square of the same size also centered in the viewport.

Using `getBoundingClientRect` with `div#blue-square` will return positioning coordinates that, once adjusted for half the height and width of the element, will reflect `50%`.

Although the pseudo-element is in the exact same location, `getComputedStyle` will return `0px` for each positioning coordinate. This is useful information to have when determining the pseudo-element's location relative to the standard element, but is generally less useful than knowing where it is relative to the viewport.

There are ways to recreate the information that may have been provided if pseudo-elements had access to `getBoundingClientRect`, but that approach is limited in its own ways.

Is this functionality for pseudo-elements still being considered for implementation? If so, any thoughts on when it may make it into the actual spec?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10513 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 30 June 2024 20:57:24 UTC