Interop 2023: CSS Math Functions

[zfox23]

Description

Adds guide content and live sample content pertinent to CSS Math Functions.

Motivation

Interop 2023 documentation improvements

Related issue

mdn/mdn#416

[github-actions]

Preview URLs

• /en-US/docs/Web/CSS/CSS_Functions/Using_CSS_math_functions
• /en-US/docs/Web/CSS/CSS_Functions

External URLs (1)

URL: /en-US/docs/Web/CSS/CSS_Functions/Using_CSS_math_functions
Title: Using CSS math functions

• https://github.com/web-platform-tests/interop/blob/main/2023/README.md (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2023-11-14 15:15:36)

[chrisdavidmills]

Hi @zfox23! Thanks for the contribution. I think it is a really nice idea to provide a deeper look at the CSS functions and how they might be used in practice. However, before providing text-level feedback, I thought it might be a good idea to step back and discuss the high-level form of the article first, to make sure it is going in the right direction.

I've also added @estelle as a reviewer, so she can comment. She knows CSS better than me, and also has more knowledge of the MDN CSS area in general, including plans for the future direction of it.

First, some comments/questions on the general page structure and its template:

1. Did you discuss this tutorial with anyone, or did you just decide to add it? I just wanted to make sure that it fits in with the future plans for the area, and that you aren't wasting your valuable time.
2. Is this supposed to be a simple starting point, with plans to go deeper later? I could see there being several CSS math function guides that explain how to use the different types.
3. (more a question for Estelle) - does it make sense to have a guide hanging off the main functions page like this? I guess it is analogous to the "Using CSS animations" guide hanging off the main module page, so it seem OK to me.
4. I wasn't sure if using interactive examples inside the sections of the guide was the right choice — we usually only use those at the top of reference pages. In a guide page, we usually use live samples, which often show more involved use cases.
   • Search the repo for the EmbedLiveSample macro, and you should get an idea of how to use these; feel free to ask for help if you need it.

Some high-level comments on the actual page content:

1. What's here generally seems to make sense. I am a bit concerned that the examples shown are a bit trivial, and don't really offer much more in terms of learning than the examples already available in the reference pages for those functions. In guides, we try to describe in detail the use cases of the features discussed, and show some real examples of those use cases in live samples
2. It is good to explain the problem first, and then the features that allow us to solve that problem. For example, in your guide, one of the most useful bits is the final thoughts section — you should lead with use cases like these, then show how to realize these with the basic math functions.
3. Don't be afraid to combine multiple functions in one example, for example, show a responsive UI that lays out the main content in a varying number of columns depending on the width of the page. the main content could also have a fixed height that is always 100% of the height, minus the height of the page header, so it always covers the entire screen height. You could also have a logo that adjusts its size automatically to suit the screen size and layout.
4. I don't think it's very useful to list all of the advanced functions at the bottom fo the article. That's already available in the main functions page.
5. Think about other CSS function tutorials you might write in the future as follow-ons. This first one could just discuss basic arithmetic and comparison functions. Then future articles could discuss other function groups and their uses. For example, I've got no idea where you might use trig or exponential CSS functions and would love to read an article showing some concrete use cases and explanations.

Thanks again.

[Rumyra]

Just a note to say - this is part of our interop work - we'll review and discuss more within the Moz team (I've removed @estelle as a reviewer) - thanks for your input @chrisdavidmills I'll give this a proper review and feedback after this next meeting 👍

[chrisdavidmills]

Just a note to say - this is part of our interop work - we'll review and discuss more within the Moz team (I've removed @estelle as a reviewer) - thanks for your input @chrisdavidmills I'll give this a proper review and feedback after this next meeting 👍

@Rumyra got it, no worries at all. I'll leave it in your capable hands.

[dipikabh]

@zfox23 - I've added the tracking issue to the description

[Rumyra]

Great work @zfox23 thank you :D