Repository navigation
Use root class prefixes instead of @scope - #3941
Closed
SimonHeybrock wants to merge 1 commit into
Closed
SimonHeybrock wants to merge 1 commit into
SimonHeybrock wants to merge 1 commit into
Conversation
The repr stylesheets are embedded in pages we do not control, so they must parse in whatever browser the host site is viewed with. @scope requires Firefox 128+ and Safari 17.4+; below that the entire block is dropped and the repr renders unstyled. Prefixing every selector with .sc-root / .dg-root gives identical specificity and cascade behavior without depending on a recent CSS feature. Declarations are unchanged: the !important declarations, not the containment mechanism, are what keeps host themes from overriding the layout.
Member
Author
|
Closed after f2f discussion: #3939 was already manually verified and 2023 browser features are probably fine to use. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Alternative to #3939, which replaces
@scopewith CSS nesting. Same goal, one fewer dependency on a recent CSS feature.The repr stylesheets are embedded in pages we do not control, so they have to parse in whatever browser and HTML post-processor the host site uses. Support floors for the three ways of expressing containment:
@scopeNesting needs the relaxed syntax because many selectors start with a type (
ul.sc-sections,pre.sc-var-data,input.dg-header-in,dl.sc-attrs). Where that is unsupported, those rules are dropped while the class-only ones survive, leaving a partially styled repr, which is the failure mode the stylesheet exists to prevent. Firefox ESR 115, still common on institutional Linux, supports neither feature.The containment mechanism does no cascade work here. mkdocs Material's competing rules carry no
!important(.md-typeset ul:not([hidden]){display:flow-root}; there are six!importantdeclarations in the whole Material stylesheet, none of which match a scipp element), so what fixes #3921 is our!importantdeclarations. A selector prefix yields the same specificity@scopeand nesting do, so all three behave identically where they parse.Declarations are byte-identical to
main; only selectors change.Test plan
main: identical for both files.DataArray,Dataset,DataGroupandshow()output regenerated and inspected; minifier inresources.pyproduces balanced, comment-free CSS.DataGrouprepr embedded; the inline<style>survives the build verbatim.