Issue with "CSS Functional Notation": links in the index lead to nowhere

[sjagoori]

MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions

What information was incorrect, unhelpful, or incomplete?

The links listed in the index lead to nowhere,

Specific section or headline?

Section, the index.

What did you expect to see?

Information regarding the selected CSS function.

Did you test this? If so, how?

Tried several links, it always returns Sorry, the page /en-US/docs/Web/CSS/<CSS function> could not be found.. Given the lack of results from the search, I assume that this content is removed or moved to relevant pages.

MDN Content page report details

• Folder: en-us/web/css/css_functions
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/css/css_functions/index.html
• Last commit: 2d423bd
• Document last modified: 2021-01-09T13:41:23.000Z

[wbamberg]

Some of these pages do exist and the links work: some and perhaps even all of the transform and filter ones, for example. The complete list of pages that are tagged "CSS Function":

/en-us/web/css/min()
/en-us/web/css/attr()
/en-us/web/css/minmax()
/en-us/web/css/linear-gradient()
/en-us/web/css/repeat()
/en-us/web/css/repeating-conic-gradient()
/en-us/web/css/env()
/en-us/web/css/shape
/en-us/web/css/path()
/en-us/web/css/clamp()
/en-us/web/css/counter()
/en-us/web/css/transform-function/translatez()
/en-us/web/css/transform-function/scale()
/en-us/web/css/transform-function/translatey()
/en-us/web/css/transform-function/rotatex()
/en-us/web/css/transform-function/translate()
/en-us/web/css/transform-function/skewy()
/en-us/web/css/transform-function/matrix()
/en-us/web/css/transform-function/scalex()
/en-us/web/css/transform-function/rotatey()
/en-us/web/css/transform-function/perspective()
/en-us/web/css/transform-function/scale3d()
/en-us/web/css/transform-function/skewx()
/en-us/web/css/transform-function/rotate()
/en-us/web/css/transform-function/scaley()
/en-us/web/css/transform-function/rotatez()
/en-us/web/css/transform-function/rotate3d()
/en-us/web/css/transform-function/skew()
/en-us/web/css/transform-function/matrix3d()
/en-us/web/css/transform-function/translate3d()
/en-us/web/css/transform-function/scalez()
/en-us/web/css/transform-function/translatex
/en-us/web/css/cross-fade()
/en-us/web/css/var()
/en-us/web/css/filter-function/drop-shadow()
/en-us/web/css/filter-function/invert()
/en-us/web/css/filter-function/blur()
/en-us/web/css/filter-function/opacity()
/en-us/web/css/filter-function/grayscale()
/en-us/web/css/filter-function/contrast()
/en-us/web/css/filter-function/sepia()
/en-us/web/css/filter-function/hue-rotate()
/en-us/web/css/filter-function/brightness()
/en-us/web/css/filter-function/saturate()
/en-us/web/css/repeating-radial-gradient()
/en-us/web/css/url()
/en-us/web/css/-moz-image-rect
/en-us/web/css/css_functions  -> incorrectly tagged
/en-us/web/css/element()
/en-us/web/css/radial-gradient()
/en-us/web/css/max()
/en-us/web/css/calc()
/en-us/web/css/counters()
/en-us/web/css/fit-content()
/en-us/web/css/repeating-linear-gradient()
/en-us/web/css/image-set()
/en-us/web/css/conic-gradient()
/en-us/web/css/paint()
/en-us/web/css/image()

Others, like hsl(), are documented but not as separate pages. They should probably be split into separate pages. Then there are others still that aren't documented at all and should get new pages.

---

(Also, it seems weird that some of these are under the root and some are under a CSS property page. We should perhaps consider whether CSS function pages should all live in the same place, either directly under Web/CSS (which is the convention in our CSS docs, although I don't think it should be) or maybe even under this css_functions page. But that's a different thing and would take more careful thought.)

[rachelandrew]

I'll take a look at this.

[rachelandrew]

I'm just looking through this and am going to tidy up that page and bring it into line with other overview pages I've worked on.

I think in terms of where these functions live in our docs, it makes sense for CSS-wide functions to live directly under CSS and for things which only relate to one data type (for example the transform-function) values to stay as a subpage of that data type. Which essentially means that those things defined in the Values and Units spec, stay under CSS.

I think that is pretty much how things are now anyway. There are a few breaking the rule, for example repeat() which is only valid in a track-listing.

As for the missing docs, I think some of these may not have browser support yet which is probably why they are not documented. Not sure what we want to do in that case. I could add a short page for each which we could flesh out with examples once they do have support.

I'll raise separate issues for things which do need creating, for example the hsl() notation.

cc: @chrisdavidmills

[chrisdavidmills]

All sounds reasonable to me, @rachelandrew . I do wonder whether it is worth defining pages for all functions. For example, hsl() and other color-related notations are all defined on https://developer.mozilla.org/en-US/docs/Web/CSS/color_value, and it seems to make sense to have all of them defined on the same page, rather than expecting readers to go around to all manner of different pages to find them, which means that we could perhaps link to those sections on that page instead.

Then again, that page is very long...what do you think about that case?

[rachelandrew]

I think in terms of being able to easily link to these things, and to be able to describe them properly there is a benefit in them having their own page. Otherwise, as you say, the pages get very long. If hsl() for example is properly described somewhere then the color value page can more succinctly explain the basics.

In general the functional notations do stuff, which is why they are functions, and so having somewhere to explain the subtleties seems useful.

[rachelandrew]

Found a case where data type specific values are under CSS - https://developer.mozilla.org/en-US/docs/Web/CSS/gradient

To bring this into line with filter-function and transform-function values, the gradient values (linear-gradient) etc. should relaly be under gradient.

[chrisdavidmills]

I agree with your reasoning here, and am happy for you to update the pages as needed.

[rachelandrew]

@chrisdavidmills I've just opened a PR with the work I did yesterday on that Functions page, plus a whole bunch of issues which have shown up above.

Would appreciate opinions on #2852

[sideshowbarker]

I believe that given the changes that were made in multiple PRs relevant to this, we can consider it resolved. There are still some links to pages that haven’t actually been written yet — but those now clearly show up in red with a squiggly underline.

There’s otherwise nothing unique about this page having links to other pages that don’t exist yet — we have many other pages with such links. And I don’t think we want to raise an issue for every single page we have that links to other pages which don’t exist yet — and we would not want to keep issues open indefinitely for such cases.

So I’m going ahead and closing this for now. If anyone disagrees — if this case of has-links-to-yet-unwritten-pages is a special case that merits keeping an issue open for it — then please go ahead and re-open it.