Csssytledeclaration setproperty example

[hamishwillee]

Fixes #37268

The example assumed that the CSS it needs to fetch is the second in the page, but the example is rendered in a constructed frame where the example style is the first style definition (or 0th in array).

This fixes the example to work. Note that the first commit is pure layout/template update changes. Only the second commit needs to be reviewed for this.

[github-actions]

Preview URLs (8 pages)

• /en-US/docs/Web/API/CSSLayerBlockRule/name
• /en-US/docs/Web/API/CSSLayerBlockRule
• /en-US/docs/Web/API/CSSLayerStatementRule/nameList
• /en-US/docs/Web/API/CSSLayerStatementRule
• /en-US/docs/Web/API/CSSPageDescriptors
• /en-US/docs/Web/API/CSSPageRule/style
• /en-US/docs/Web/API/CSSStyleDeclaration/setProperty
• /en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information

(comment last updated: 2025-01-06 00:51:50)

[Josh-Cena]

Funnily most examples are still broken because they assume the stylesheet is injected alone, while now the MDN styles are injected before the live sample code within the same <style>. I vastly prefer the original way and think this should be reported as a platform bug instead.

[hamishwillee]

@caugner Please see @Josh-Cena comment above #37285 (comment)

What do you think?
I guess I'm really asking "if we create a platform bug will it be fixed (in a timely manner) or am I better off just assuming it won't be and continuing pushing this fix".

[Josh-Cena]

The problem is, currently there are extra rules inserted before the example code. If you want to get a handle to a certain rule, you either hardcode a weird non-0 index, or you use a find for the selector text, neither of which seems ideal to me.

[Josh-Cena]

Closing in favor of mdn/yari#12809