@view-transition css selector different color

[hawkticehurst]

Testing #244445

Theme: Dark Modern

This selector is not fully supported across all browsers yet (thus the warning), but there's still a difference in syntax highlighting.

Stable:

Insiders:

@view-transition {
  navigation: auto;
}

[hawkticehurst]

Related: A few more @{selector} selectors have the same issue.

@starting-style

Stable:

Insiders:

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

@layer

Stable:

Insiders:

@layer reset {
  * {
    box-sizing: border-box;
    margin: 0;
  }
}

[alexr00]

@starting-style

Stable:

Insiders:

@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

@hawkticehurst, what do you think the coloring of popover-open should be? Is it a tag or a class?

[alexr00]

at rule coloring is fixed by #245656

[hawkticehurst]

:popover-open is a pseudo-class, so we should apply whatever styling/color we use for those

[hawkticehurst]

And for what it's worth popover is an attribute that can be applied to any element to turn it into a popover. Thus the attribute bracket syntax: [popover].

<button popovertarget="my-popover">Toggle popover</button>
<section id="my-popover" popover>
  <p>Content inside the popover</p>
</section>

<button popovertarget="my-other-popover">Toggle popover</button>
<div id="my-other-popover" popover>
  <p>Content inside the popover</p>
</div>

<style>
  [popover] {
    /* Default styling for any element with the popover attribute */
  }

  div[popover] {
    /* Specific styling for any div with the popover attribute */
  }

  :popover-open {
    /* Styles applied to any element in the popover-open state */
    /* Note that this pseudo class can be defined on it's own */
  }
</style>

[alexr00]

Thanks for the details! I think we have the correct scopes/colors now:

[hawkticehurst]

Ooh yes agreed! These scopes/colors look great!