A pseudo-class for when an element is stickily (spec term) positioned


#21

Trying the hopefully-more-palatable event-based route:


#22

Couldn’t we just ignore position: inside :sticky-pseudo-class? We already ignore content: outside of pseudo-selectors anyway.


#23

Another way of tackling this issue would be to create a stuck at-rule that accepts a white-listed set of properties:

thead {
    position: sticky;
    top: 0;
    @stuck {
        /* White-Listed: */
        box-shadow: 0 0.25rem 0.25rem hsl(0deg 0% 0% / 0.5);
        /* Not White-Listed (Does Nothing): */
        position: static;
    }
}

#24

An at-rule doesn’t change anything to the circular dependency.

Why this is not something that can be added to CSS is covered in the CSSWG’s FAQ: https://wiki.csswg.org/FAQ


#25

Why we can’t detect cycles when the style is computing, and just drop those rules that causing cycling + warn user in console?


#26

Detecting cycles can get very tricky once you add in a couple selectors. I don’t have examples on hand, but I’ve seen many in the mailing list.


#27

If only a single pass is allowed for “style dependent pseudo class” the loop would become wide and be in the same situation as :hover.

What this would mean is that

:stuck {
  position: static;
}

would evaluate as position: sticky due to

  1. Do what already happens to find out that the element is sticky and stuck
  2. Evaluate :stuck and find out that the element is now static
  3. As the :stuck rule no longer holds, the element is sticky and stuck
  4. We are not allowed to evaluate :stuck again in this style recalculation, the element finishes as sticky and stuck

and if a another “style dependent pseudo class” were added, lets say :background-color() in this example just to have something.

.someClass {
  position: sticky;
  color: green;
  background-color: red;
}
.someClass:stuck {
  background-color: white;
}
.someClass:background-color(red) {
  color: white;
}
.someClass:background-color(white) {
  color: blue;
}

Would end up with

color: green;
background-color: white;

due to

  1. Do what already happens to find out that the element is sticky and stuck
  2. Evaluate :stuck and :background-color(red) and find out that the element is now white with white text
  3. As the :background-color(red) rule no longer holds, the element is has color: green
  4. We are not allowed to evaluate :background-color(white) in this style recalculation, the element finishes as white with green text.

The :background-color(white)selector would only match it someClass got a white background color due to a another mean than a “style dependent pseudo class”

This would maybe be surprising to some users but much less surprising than not being able to to what seems like an obvious feature.