Remove ElementCSSInlineStyle mixin #5556

foolip · 2021-06-01T22:17:17Z

Redirect ElementCSSInlineStyle.style to HTMLElement.style, as that's
seemingly what many of these instances pointed at originally, and it's
the most common case when used in examples/explanations.

Of the six pages that should exist here, only HTMLElement.style actually
exists.

BCD cleanup: mdn/browser-compat-data#10686

github-actions · 2021-06-01T22:19:43Z

Preview URLs

Flaws

Note! 8 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
Title: Manipulating documents
on GitHub
Flaw count: 1

broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript
Title: Handling common JavaScript problems
on GitHub
Flaw count: 5

broken_links:
- Can't resolve /en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
- Can't resolve /en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla
- Can't resolve /en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_6_support_in_Mozilla
- Can't resolve /en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla
- Link points to the page it's already on

URL: /en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
Title: Implementing feature detection
on GitHub
Flaw count: 1

broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
Title: Handling common HTML and CSS problems
on GitHub
Flaw count: 1

broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontsize
Title: String.prototype.fontsize()
on GitHub
Flaw count: 1

broken_links:
- Can't resolve /en-US/docs/Web/Guide/HTML/HTML5

URL: /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor
Title: String.prototype.fontcolor()
on GitHub
Flaw count: 1

broken_links:
- Can't resolve /en-US/docs/Web/Guide/HTML/HTML5

URL: /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/big
Title: String.prototype.big()
on GitHub
Flaw count: 1

broken_links:
- Can't resolve /en-US/docs/Web/Guide/HTML/HTML5

URL: /en-US/docs/Web/API/CSS_Typed_OM_API
Title: CSS Typed Object Model API
on GitHub
Flaw count: 4

heading_links:
- h3 heading contains an <a> tag
- h3 heading contains an <a> tag
- h3 heading contains an <a> tag
- h3 heading contains an <a> tag

URL: /en-US/docs/Web/API/CSS_Typed_OM_API/Guide
Title: Using the CSS Typed Object Model
on GitHub
Flaw count: 2

macros:
- /en-US/docs/Web/API/Object/toString does not exist
broken_links:
- Link points to the page it's already on

URL: /en-US/docs/Web/API/Window/getComputedStyle
Title: Window.getComputedStyle()
on GitHub
Flaw count: 5

macros:
- /en-us/docs/web/api/globalcrypto (url: /en-US/docs/Web/API/GlobalCrypto) does not exist
- /en-us/docs/web/api/speechsynthesisgetter (url: /en-US/docs/Web/API/SpeechSynthesisGetter) does not exist
- /en-us/docs/web/api/windowmodal (url: /en-US/docs/Web/API/WindowModal) does not exist
- /en-us/docs/web/api/onerroreventhandlerforwindow (url: /en-US/docs/Web/API/OnErrorEventHandlerForWindow) does not exist
- /en-us/docs/web/api/chromewindow (url: /en-US/docs/Web/API/ChromeWindow) does not exist

URL: /en-US/docs/Web/API/StylePropertyMap/append
Title: StylePropertyMap.append()
on GitHub
Flaw count: 1

macros:
- /en-US/docs/Web/API/HTMLElement/attributeStyleMap does not exist

URL: /en-US/docs/Web/API/SVGElement
Title: SVGElement
on GitHub
Flaw count: 14

macros:
- /en-US/docs/Web/API/DocumentAndElementEventHandlers does not exist
- /en-US/docs/Web/API/SVGElementInstance does not exist
- /en-US/docs/Web/API/SVGElement/attributeStyleMap does not exist
- /en-US/docs/Web/API/SVGElement/dataset redirects to /en-US/docs/Web/API/HTMLOrForeignElement/dataset
- /en-US/docs/Web/API/HTMLElement/dataset redirects to /en-US/docs/Web/API/HTMLOrForeignElement/dataset
- and 7 more flaws omitted
broken_links:
- Can't resolve /en-US/docs/Web/Guide/HTML/Using_data_attributes
- Can't resolve /en-US/docs/Web/Guide/HTML/Using_data_attributes

URL: /en-US/docs/Web/API/CSS_Object_Model
Title: CSS Object Model (CSSOM)
on GitHub
Flaw count: 7

macros:
- /en-US/docs/Web/API/CSSCharsetRule does not exist
- /en-US/docs/Web/API/CSSFontFeatureValuesMap does not exist
- /en-US/docs/Web/API/CSSFontFeatureValuesRule does not exist
- /en-US/docs/Web/API/CSSMarginRule does not exist
- /en-US/docs/Web/API/CSSVariablesMap does not exist
- and 2 more flaws omitted

URL: /en-US/docs/Web/API/HTMLElement
Title: HTMLElement
on GitHub
Flaw count: 47

macros:
- /en-US/docs/Web/API/DocumentAndElementEventHandlers does not exist
- /en-US/docs/Web/API/TouchEventHandlers does not exist
- /en-US/docs/Web/API/HTMLElement/attributeStyleMap does not exist
- wrong xref macro used (consider changing which macro you use)
- /en-US/docs/Web/API/HTMLElement/draggable does not exist
- and 29 more flaws omitted
bad_bcd_links:
- no explanation!
- no explanation!
- no explanation!
- no explanation!
- no explanation!
- and 8 more flaws omitted

URL: /en-US/docs/Web/API/Document_Object_Model/Introduction
Title: Introduction to the DOM
on GitHub
Flaw count: 2

macros:
- /en-US/docs/Web/API/Attribute does not exist
- /en-US/docs/Web/API/Attribute does not exist

URL: /en-US/docs/Web/API/CSSStyleDeclaration
Title: CSSStyleDeclaration
on GitHub
Flaw count: 2

macros:
- /en-US/docs/Web/API/CSSStyleDeclaration/named_properties does not exist
bad_bcd_links:
- no explanation!

URL: /en-US/docs/Web/API/MathMLElement
Title: MathMLElement
on GitHub
Flaw count: 4

macros:
- /en-US/docs/Web/API/DocumentAndElementEventHandlers does not exist
- /en-US/docs/Web/API/MathMLElement/attributeStyleMap does not exist
- /en-US/docs/Web/API/MathMLElement/style does not exist
- /en-US/docs/Web/API/DocumentAndElementEventHandlers does not exist

External URLs

URL: /en-US/docs/Learn/JavaScript/Building_blocks/Events
Title: Introduction to events
on GitHub

No new external URLs

URL: /en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
Title: Manipulating documents
on GitHub

No new external URLs

URL: /en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript
Title: Handling common JavaScript problems
on GitHub

No new external URLs

URL: /en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
Title: Implementing feature detection
on GitHub

No new external URLs

URL: /en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
Title: Handling common HTML and CSS problems
on GitHub

No new external URLs

URL: /en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
Title: CSP: style-src
on GitHub

No new external URLs

URL: /en-US/docs/Web/HTTP/Headers/Referrer-Policy
Title: Referrer-Policy
on GitHub

No new external URLs

URL: /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontsize
Title: String.prototype.fontsize()
on GitHub

No new external URLs

URL: /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fontcolor
Title: String.prototype.fontcolor()
on GitHub

No new external URLs

URL: /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/big
Title: String.prototype.big()
on GitHub

No new external URLs

URL: /en-US/docs/Web/JavaScript/Reference/Global_Objects/String/small
Title: String.prototype.small()
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/CSS_Typed_OM_API
Title: CSS Typed Object Model API
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/CSS_Typed_OM_API/Guide
Title: Using the CSS Typed Object Model
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/Window/getComputedStyle
Title: Window.getComputedStyle()
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/StylePropertyMap/append
Title: StylePropertyMap.append()
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/SVGElement
Title: SVGElement
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/CSS_Object_Model
Title: CSS Object Model (CSSOM)
on GitHub

https://drafts.css-houdini.org/css-paint-api-1/ (1 time)
https://drafts.css-houdini.org/css-typed-om-1/ (1 time)
https://drafts.csswg.org/css-animations-1/ (1 time)
https://drafts.csswg.org/css-conditional-3/ (1 time)
https://drafts.csswg.org/css-counter-styles-3/ (1 time)
https://drafts.csswg.org/css-device-adapt/ (1 time)
https://drafts.csswg.org/css-fonts-3/ (1 time)
https://drafts.csswg.org/css-transitions/ (1 time)
https://drafts.csswg.org/cssom-view/ (1 time)
https://drafts.csswg.org/cssom/ (1 time)
https://w3c.github.io/screen-orientation/ (1 time)
https://www.w3.org/TR/DOM-Level-2-Style/ (1 time)
https://www.w3.org/TR/css-variables-1/ (1 time)

URL: /en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information
Title: Using dynamic styling information
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/HTMLElement
Title: HTMLElement
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/HTMLElement/style
Title: HTMLElement.style
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/Document_Object_Model/Introduction
Title: Introduction to the DOM
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/CSSStyleDeclaration
Title: CSSStyleDeclaration
on GitHub

No new external URLs

URL: /en-US/docs/Web/API/MathMLElement
Title: MathMLElement
on GitHub

No new external URLs

URL: /en-US/docs/Web/HTML/Global_attributes/style
Title: style
on GitHub

No new external URLs

URL: /en-US/docs/Web/Houdini
Title: CSS Houdini
on GitHub

No new external URLs

(this comment was updated 2021-06-07 18:03:59.475773)

foolip · 2021-06-01T22:20:26Z

files/en-us/web/api/mathmlelement/index.html

+
+<dl>
+  <dt>{{DOMxRef("MathMLElement.attributeStyleMap")}} {{ReadOnlyInline}}</dt>
+  <dd>A {{DOMxRef("StylePropertyMap")}} representing the declarations of an element's style.</dd>


It's most obvious here, but for all three interfaces the descriptions for attributeStyleMap and style are exactly the same. I'm really not sure how to describe these in a way that makes the right distinction. Halp?

@andruud might know :)

The attributeStyleMap and style properties are two different views of exactly the same thing. The distinction is apparent in the return value type (StylePropertyMap vs CSSStyleDeclaration), and it seems fine to me that the description should be the same beyond that. 🤷‍♂️

I see. So is it accurate to say what https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style currently does, that it represents the style content attribute? I edited that out in this PR because it's possible to modify element.style and I thought such modifications aren't reflected in the style content attributes, but it looks like actually I'm wrong. These are both complicated reflected attributes, then?

Regardless of whether or not it's possible to be more accurate (we want to be a bit more "humane" here than in CSS specifications, right?), saying that [attributeStyleMap, style property] represents the style attribute sounds appropriate to me.

reflected attributes

Not sure if that's a HTML spec term or something, but yes, attributeStyleMap, the style property and the style attribute all access and represent the same underlying inline style.

Yes, this need not pedantically match what the spec says. These aren't reflected attributes in the sense of https://html.spec.whatwg.org/multipage/common-dom-interfaces.html#reflecting-content-attributes-in-idl-attributes, but that's just because it's a more complicated value and not just the element.attribute = value pattern.

So I'll put back the mention of the style content attributes, which was accurate then.

files/en-us/web/api/htmlelement/style/index.html

Rumyra · 2021-06-07T12:00:09Z

Hi @foolip happy to approve & merge once conflicts have been resolved - lmk 👍

Redirect ElementCSSInlineStyle.style to HTMLElement.style, as that's seemingly what many of these instances pointed at originally, and it's the most common case when used in examples/explanations. Of the six pages that should exist here, only HTMLElement.style actually exists. BCD cleanup: mdn/browser-compat-data#10686

foolip · 2021-06-07T18:12:30Z

@Rumyra, this is rebased now, thanks for your help!

foolip requested review from a team as code owners June 1, 2021 22:17

foolip requested a review from a team June 1, 2021 22:17

foolip requested a review from a team as a code owner June 1, 2021 22:17

foolip requested review from Rumyra and chrisdavidmills and removed request for a team June 1, 2021 22:17

foolip mentioned this pull request Jun 1, 2021

Demix ElementCSSInlineStyle mdn/browser-compat-data#10686

Merged

foolip commented Jun 1, 2021

View reviewed changes

files/en-us/web/api/htmlelement/style/index.html Show resolved Hide resolved

foolip force-pushed the rm-ElementCSSInlineStyle branch from 3b062a7 to 48e7965 Compare June 7, 2021 17:34

foolip force-pushed the rm-ElementCSSInlineStyle branch from 48e7965 to a8bffff Compare June 7, 2021 18:02

sideshowbarker approved these changes Jun 8, 2021

View reviewed changes

sideshowbarker merged commit e65944b into mdn:main Jun 8, 2021

foolip deleted the rm-ElementCSSInlineStyle branch June 8, 2021 12:57

github-actions bot locked as resolved and limited conversation to collaborators Sep 11, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Remove ElementCSSInlineStyle mixin #5556

Remove ElementCSSInlineStyle mixin #5556

foolip commented Jun 1, 2021

github-actions bot commented Jun 1, 2021 •

edited

Loading

foolip Jun 1, 2021

andruud Jun 2, 2021

foolip Jun 2, 2021

andruud Jun 3, 2021

foolip Jun 3, 2021

Rumyra commented Jun 7, 2021

foolip commented Jun 7, 2021

Remove ElementCSSInlineStyle mixin #5556

Remove ElementCSSInlineStyle mixin #5556

Conversation

foolip commented Jun 1, 2021

github-actions bot commented Jun 1, 2021 • edited Loading

Preview URLs

Flaws

External URLs

foolip Jun 1, 2021

Choose a reason for hiding this comment

andruud Jun 2, 2021

Choose a reason for hiding this comment

foolip Jun 2, 2021

Choose a reason for hiding this comment

andruud Jun 3, 2021

Choose a reason for hiding this comment

foolip Jun 3, 2021

Choose a reason for hiding this comment

Rumyra commented Jun 7, 2021

foolip commented Jun 7, 2021

github-actions bot commented Jun 1, 2021 •

edited

Loading