1330580 - Update 3D transform properties and functions to refer to CSS Transforms Level 2

Status: RESOLVED FIXED

(Developer Documentation Graveyard :: CSS, defect)

Description

[Sebastian Zartner [:sebo]]

The 3D transform properties and functions were just deferred to level 2 of the CSS Transforms spec.[1]

So, the related pages need to be updated accordingly to point to the level 2 spec. I have already added the level 2 spec. to the spec2 and specname macros in https://github.com/mozilla/kumascript/pull/89, meaning 'CSS Transforms 2' should be used as spec. name.

Sebastian

[1] https://github.com/w3c/csswg-drafts/pull/890

Comment 1

[komalbharadiya]

Hi Sebastian,
 I am novice to open source but really interested in contributing for this organization. Is this issue still open? If at all, can I work on this?

Comment 2

[Sebastian Zartner [:sebo]]

Sure, you can work on this. Just to be clear, this is about updating the documentation of the properties and values mentioned in the CSS Transforms Module Level 2 specification[1] on MDN.

I skimmed through the pages for the properties and values and it seems most of them are already referring to the level 2 specification, but there are still a few that need to be updated. Especially the transform functions like e.g. matrix3d()[2] are currently still missing a specifications table, others may need to be updated to refer to level 2 of the specification instead of level 1.

So, if you want to work on this, you should go through all the properties and values mentioned in [1], find the related pages on MDN like 'perspective-origin'[3], for example, and add or update their 'Specifications' section to point to the level 2 spec.

Feel free to ask me if you have any questions.

Sebastian

[1] https://drafts.csswg.org/css-transforms-2/#property-index
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d
[3] https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin

Comment 3

[komalbharadiya]

Thanks Sebastian! I'll check it out!

Comment 4

[komalbharadiya]

Hey Sebastian, so I was going through the links. I am just confused. Is there any github repository for this where I have to make changes in the code or I directly have to use the edit option on web pages? And apart from this, the bug looks like I only have to change the links wherever level 1 is present, is that so?

Comment 5

[komalbharadiya]

Hey Sebastian, so I have made the required changes, wherever I found the mistakes. Can you please review me, and acknowledge with the improvements needed, if any?
Thanking you in anticipation!

Comment 6

[Sebastian Zartner [:sebo]]

In most cases you simply have to replace 'CSS3 Transforms' by 'CSS Transforms 2', yes. Unfortunately, the two changes you made are not correct, though. The 'transform-box' property is defined in level 1 of the spec.[1], not in level 2. And the <transform-function> value exists in both levels[2][3], the difference is that level 2 extends it by 3D functions. I have fixed those two pages.

I have checked all the properties now and saw that they are already correctly referring to level 2. Though I saw that the specifications are missing in the transform functions pages, also for the ones that are defined in level 1.
I've made two examples for a level 1 and level 2 transform function, so you can see what needs to be done:

https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate (level 1)
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d (level 2)

The transform functions you need to change are linked to from https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function. Please check [2] and [3] to see which one is defined in level 1 and which one in level 2.

Also, please note that you should link 

Sebastian

[1] https://drafts.csswg.org/css-transforms/#propdef-transform-box
[2] https://drafts.csswg.org/css-transforms/#transform-functions
[3] https://drafts.csswg.org/css-transforms-2/#transform-functions

Comment 7

[komalbharadiya]

Thank you so much,Sebastian! I think I have done the task. Please review it!

Comment 8

[Sebastian Zartner [:sebo]]

Very good! Now all the functions have proper specification links. There were just a few little mistakes, I've now corrected, which were related to incorrectly linking to the specifications. You may see what was wrong by checking my changes.[1]

Here are some tips for future edits:
1. The editor has a preview button (next to the save buttons) in the toolbar allowing you to check your changes for mistakes. E.g. this allows to click the specification links and see whether they are correct.
2. Carefully check the specification anchors. Sometimes you linked to a property instead of the function.[2] That's probably because there are a few with equal or similar name like 'translate' (the property) and 'translate()' (the 'transform' function).
3. You may switch to the source view of the page (first button in the toolbar) to check whether your changes are syntactically correct.
4. There's an extension called MDN documentation linter, which helps identifying errors while editing.[3]
5. When saving a change you may also add a comment explaining what has changed, by entering something into the 'Revision Comment' field. You can also refer to bugs as I did[1], which automatically links them to Bugzilla. This helps others to comprehend your changes without having to see the changed sources.

Thanks a lot for your contribution!

Sebastian

[1] https://developer.mozilla.org/en-US/dashboards/revisions?locale=&user=Sebastianz&topic=&start_date=&end_date=&preceding_period=&authors=0&page=1
[2] https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate$compare?locale=en-US&to=1448090&from=1448049
[3] https://addons.mozilla.org/de/firefox/addon/mdn-documentation-linter/

Comment 9

[komalbharadiya]

Thank you Sebastian!!I went through the pointers, will definitely follow them in the future edits!