Sprints: CSS Functional Notations - New URL Naming Convention
URL(s)
All the articles in:
https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functionals
Request type
- [ ] New documentation
- [x] Correction or update
Details
In https://github.com/mdn/sprints/issues/3838 we created an index of over 100 CSS functions. And I'm sure there are many more functions I've missed. But the important thing is that now we have a page listing all the CSS functions.
While working on this page I've noticed that some functions use the same name as data-types and/or pseudo elements/classes. I think we need to adopt a new naming convention for CSS functions on MDN to distinguish them from other articles. Basically changing the URLs.
Example:
https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/image
https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/imagefunction ( should be image() instead of imagefunction )
both links above represent an image. The first is image data-type, the second is an image() function. My proposal is to rename all the function URLs to include brackets (), like this article:
https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/url() (the URL ends with () as this is a function article)
URL Naming Conventions:
- At Rule URLs start with
@ - Pseudo-classes URLs start with
: - Pseudo-elements URLs start with
:: - Data Types URLs don't have any naming convention
- Functional Notations URLs should end with
()
ramiy
All 13 comments
Reviewed. I've made a few tweaks, moved the page to https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions, and added the sidebar, but overall looks like a great start!
chrisdavidmills
on 3 Nov 2020
@chrisdavidmills What do you think about the URLs?
OLD: https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/attr
NEW: https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/attr()
OLD: https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/calc
NEW: https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/calc()
OLD: https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/var
NEW: https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/var()
I want to change the URL structure for all the CSS functions.
ramiy
on 3 Nov 2020
@ramiy I've moved these pages to the new URLs (and all of their translations).
My justification here is that this sems to be what we've done in the past — it's the closest we have to the convention right now — and I think it makes sense to have these consistent.
If we decide later on that we want to do something else, then it'll be trivial to do a mass edit and change them once the Yari platform goes live.
chrisdavidmills
on 4 Nov 2020
@chrisdavidmills You moved only 3 URLs, there are 56 more functions at:
https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/CSS_Functions#Index
As for Yari, you can do it using the new CLI. But I'm not sure it's ready yet. Check the CSS folder it's not updated yet.
In any case, ping when you finish. I need to change to new URLs in all the articles.
ramiy
on 4 Nov 2020
@ramiy I'll have to do this another day. In the current wiki system, moving pages takes a long time; moving the other 53 function pages and all their translations would take a good few hours.
This is one reason why I am so excited about Yari! ;-)
chrisdavidmills
on 4 Nov 2020
New function pages moved today:
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/clamp()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient()
(I'm going to try to do a few each day until they are all moved).
chrisdavidmills
on 5 Nov 2020
New function pages moved today:
chrisdavidmills
on 9 Nov 2020
New pages moved today:
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/element()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/env()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale()
I also corrected the fit-content() link — it was pointing to the keyword page, but the function page now exists.
chrisdavidmills
on 10 Nov 2020
I've missed a few days, so I did quite a few today:
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/image()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/image-set()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix3d()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/max()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/min()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/minmax()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/paint()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/perspective()
chrisdavidmills
on 16 Nov 2020
Did some more today:
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/repeat()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/repeating-radial-gradient()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/repeating-conic-gradient()
chrisdavidmills
on 18 Nov 2020
And some more:
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate3d()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateX()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateY()
chrisdavidmills
on 19 Nov 2020
OK, this is the last lot of them done:
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotateZ()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale3d()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleX()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleZ()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewX()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skewY()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/symbols()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateZ()
- https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/url()
chrisdavidmills
on 30 Nov 2020
@chrisdavidmills
Great work Chris, now we need to fix #3885
ramiy
on 30 Nov 2020
Related issues
Elchi3
·
8Comments
EduardoPazz
·
3Comments
ramiy
·
6Comments
ExE-Boss
·
3Comments
bershanskiy
·
4Comments