fix(css): new pages for <url> and url() (#35486)

use explicit slug names

files/en-us/_redirects.txt

@@ -844,7 +844,7 @@
 /en-US/docs/CSS/transition-property	/en-US/docs/Web/CSS/transition-property
 /en-US/docs/CSS/transition-timing-function	/en-US/docs/Web/CSS/transition-timing-function
 /en-US/docs/CSS/unicode-bidi	/en-US/docs/Web/CSS/unicode-bidi
-/en-US/docs/CSS/uri	/en-US/docs/Web/CSS/url
+/en-US/docs/CSS/uri	/en-US/docs/Web/CSS/url_value
 /en-US/docs/CSS/used_value	/en-US/docs/Web/CSS/used_value
 /en-US/docs/CSS/user-ident	/en-US/docs/Web/CSS/custom-ident
 /en-US/docs/CSS/user-select	/en-US/docs/Web/CSS/user-select
@@ -1085,7 +1085,7 @@
 /en-US/docs/CSS:text-shadow	/en-US/docs/Web/CSS/text-shadow
 /en-US/docs/CSS:text-transform	/en-US/docs/Web/CSS/text-transform
 /en-US/docs/CSS:top	/en-US/docs/Web/CSS/top
-/en-US/docs/CSS:uri	/en-US/docs/Web/CSS/url
+/en-US/docs/CSS:uri	/en-US/docs/Web/CSS/url_value
 /en-US/docs/CSS:vertical-align	/en-US/docs/Web/CSS/vertical-align
 /en-US/docs/CSS:visibility	/en-US/docs/Web/CSS/visibility
 /en-US/docs/CSS:visible	/en-US/docs/Web/CSS/visibility
@@ -11623,7 +11623,7 @@
 /en-US/docs/Web/CSS/filter-function/path()	/en-US/docs/Web/CSS/basic-shape/path
 /en-US/docs/Web/CSS/filter-function/saturate()	/en-US/docs/Web/CSS/filter-function/saturate
 /en-US/docs/Web/CSS/filter-function/sepia()	/en-US/docs/Web/CSS/filter-function/sepia
-/en-US/docs/Web/CSS/filter-function/url	/en-US/docs/Web/CSS/url
+/en-US/docs/Web/CSS/filter-function/url	/en-US/docs/Web/CSS/url_value
 /en-US/docs/Web/CSS/fit-content()	/en-US/docs/Web/CSS/fit-content_function
 /en-US/docs/Web/CSS/flex-align	/en-US/docs/Web/CSS/align-items
 /en-US/docs/Web/CSS/flex-item-align	/en-US/docs/Web/CSS/align-self
@@ -11737,8 +11737,9 @@
 /en-US/docs/Web/CSS/transform-function/translateY()	/en-US/docs/Web/CSS/transform-function/translateY
 /en-US/docs/Web/CSS/transform-function/translateZ()	/en-US/docs/Web/CSS/transform-function/translateZ
 /en-US/docs/Web/CSS/unicode-range	/en-US/docs/Web/CSS/@font-face/unicode-range
-/en-US/docs/Web/CSS/uri	/en-US/docs/Web/CSS/url
-/en-US/docs/Web/CSS/url()	/en-US/docs/Web/CSS/url
+/en-US/docs/Web/CSS/uri	/en-US/docs/Web/CSS/url_value
+/en-US/docs/Web/CSS/url	/en-US/docs/Web/CSS/url_value
+/en-US/docs/Web/CSS/url()	/en-US/docs/Web/CSS/url_function
 /en-US/docs/Web/CSS/user-ident	/en-US/docs/Web/CSS/custom-ident
 /en-US/docs/Web/CSS/var()	/en-US/docs/Web/CSS/var
 /en-US/docs/Web/CSS/visible	/en-US/docs/Web/CSS/visibility

files/en-us/_wikihistory.json

@@ -90642,7 +90642,7 @@
       "teoli"
     ]
   },
-  "Web/CSS/url": {
+  "Web/CSS/url_value": {
     "modified": "2020-12-11T11:18:33.507Z",
     "contributors": [
       "rachelandrew",

files/en-us/mozilla/add-ons/webextensions/api/proxy/requestdetails/index.md

@@ -26,7 +26,7 @@ Values of this type are objects. They contain the following properties:
 - `method`
   - : `string`. Standard HTTP method: for example, "GET" or "POST".
 - `originUrl`
-  - : `string`. URL of the resource that triggered the request. Note that this may not be the same as the URL of the page into which the requested resource will be loaded. For example, if a document triggers a load in a different window through the [target attribute of a link](/en-US/docs/Web/HTML/Element/a#target), or a CSS document includes an image using the [`url()` functional notation](/en-US/docs/Web/CSS/url), then this is the URL of the original document or of the CSS document, respectively.
+  - : `string`. URL of the resource that triggered the request. Note that this may not be the same as the URL of the page into which the requested resource will be loaded. For example, if a document triggers a load in a different window through the [target attribute of a link](/en-US/docs/Web/HTML/Element/a#target), or a CSS document includes an image using the [`url()` functional notation](/en-US/docs/Web/CSS/url_function), then this is the URL of the original document or of the CSS document, respectively.
 - `parentFrameId`
   - : `integer`. ID of the frame that contains the frame that sent the request. Set to -1 if no parent frame exists.
 - `requestId`

files/en-us/web/api/canvasrenderingcontext2d/filter/index.md

@@ -18,8 +18,8 @@ It is similar to the CSS {{cssxref("filter")}} property and accepts the same val
 The `filter` property accepts a value of `"none"` or one or more
 of the following filter functions in a string.
 
-- [`url()`](/en-US/docs/Web/CSS/url)
-  - : A CSS {{cssxref("url", "url()")}}. Takes an IRI pointing to an SVG filter element,
+- [`url()`](/en-US/docs/Web/CSS/url_function)
+  - : A CSS {{cssxref("url_function", "url()")}}. Takes an IRI pointing to an SVG filter element,
     which may be embedded in an external XML file.
 - [`blur()`](/en-US/docs/Web/CSS/filter-function/blur)
   - : A CSS {{cssxref("<length>")}}. Applies a Gaussian blur to the drawing. It

files/en-us/web/api/cssimagevalue/index.md

@@ -9,7 +9,7 @@ browser-compat: api.CSSImageValue
 
 The **`CSSImageValue`** interface of the [CSS Typed Object Model API](/en-US/docs/Web/API/CSS_Object_Model#css_typed_object_model) represents values for properties that take an image, for example {{cssxref('background-image')}}, {{cssxref('list-style-image')}}, or {{cssxref('border-image-source')}}.
 
-The CSSImageValue object represents an [`<image>`](/en-US/docs/Web/CSS/image) that involves a URL, such as [`url()`](/en-US/docs/Web/CSS/url) or [`image()`](/en-US/docs/Web/CSS/image), but not [`linear-gradient()`](/en-US/docs/Web/CSS/gradient/linear-gradient) or [`element()`](/en-US/docs/Web/CSS/element).
+The CSSImageValue object represents an [`<image>`](/en-US/docs/Web/CSS/image) that involves a URL, such as [`url()`](/en-US/docs/Web/CSS/url_function) or [`image()`](/en-US/docs/Web/CSS/image), but not [`linear-gradient()`](/en-US/docs/Web/CSS/gradient/linear-gradient) or [`element()`](/en-US/docs/Web/CSS/element).
 
 {{InheritanceDiagram}}
 

files/en-us/web/css/-webkit-mask-box-image/index.md

@@ -90,7 +90,7 @@ Border repeat styles, when included, are interpreted in the order of `<repeat-x>
 
 Where:
 
-<mask-image-source> = {{cssxref("url", "&lt;uri&gt;")}} | <gradient> | none
+<mask-image-source> = {{cssxref("url_value", "&lt;url&gt;")}} | <gradient> | none
 
 <mask-image-offset> = <length> | <percentage> | <number>
 

files/en-us/web/css/@counter-style/symbols/index.md

@@ -95,5 +95,5 @@ In this example, the list of values for the `symbols` descriptor include letters
 - {{cssxref("@counter-style")}} descriptors: {{cssxref("@counter-style/system","system")}}, {{cssxref("@counter-style/additive-symbols", "additive-symbols")}}, {{cssxref("@counter-style/negative", "negative")}}, {{cssxref("@counter-style/prefix", "prefix")}}, {{cssxref("@counter-style/suffix", "suffix")}}, {{cssxref("@counter-style/range", "range")}}, {{cssxref("@counter-style/pad", "pad")}}, {{cssxref("@counter-style/speak-as", "speak-as")}}, {{cssxref("@counter-style/fallback", "fallback")}}
 - List style properties: {{cssxref("list-style")}}, {{cssxref("list-style-image")}}, {{cssxref("list-style-position")}}
 - {{cssxref("symbols", "symbols()")}} function
-- {{cssxref("url", "url()")}} function
+- {{cssxref("url_value", "<url>")}} type
 - [CSS counter styles](/en-US/docs/Web/CSS/CSS_counter_styles) module

files/en-us/web/css/@import/index.md

@@ -27,7 +27,7 @@ An `@import` rule _must_ be defined at the top of the stylesheet, before any oth
 where:
 
 - _url_
-  - : Is a {{CSSxRef("&lt;string&gt;")}}, a `<url>`, or a {{CSSxRef("url")}} function representing the location of the resource to import. The URL may be absolute or relative.
+  - : Is a {{CSSxRef("string")}} or a {{cssxref("url_value", "&lt;url&gt;")}} type representing the location of the resource to import. The URL may be absolute or relative.
 - _list-of-media-queries_
   - : Is a comma-separated list of [media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries), which specify the media-dependent conditions for applying the CSS rules defined in the linked URL. If the browser does not support any of these queries, it does not load the linked resource.
 - _layer-name_

files/en-us/web/css/@property/syntax/index.md

@@ -40,7 +40,7 @@ A string with a supported syntax as defined by the specification. Supported synt
 - `"<image>"`
   - : Any valid {{cssxref("&lt;image&gt;")}} values.
 - `"<url>"`
-  - : Any valid {{cssxref("url","url()")}} values.
+  - : Any valid {{cssxref("url_value", "&lt;url&gt;")}} values.
 - `"<integer>"`
   - : Any valid {{cssxref("&lt;integer&gt;")}} values.
 - `"<angle>"`

files/en-us/web/css/background-image/index.md

@@ -134,7 +134,7 @@ div {
   - {{cssxref("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}
   - {{cssxref("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}
   - {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
-  - {{cssxref("url", "url()")}}
+  - {{cssxref("url_value", "<url>")}}
 - [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients)
 - [Implementing image sprites in CSS](/en-US/docs/Web/CSS/CSS_images/Implementing_image_sprites_in_CSS)
 - [CSS images](/en-US/docs/Web/CSS/CSS_images) module

files/en-us/web/css/border-image-source/index.md

@@ -70,5 +70,5 @@ border-image-source: unset;
 - {{cssxref("outline")}}
 - {{cssxref("box-shadow")}}
 - {{cssxref("background-image")}}
-- {{cssxref("url", "url()")}} function
+- {{cssxref("url_value", "<url>")}} type
 - [Border images in CSS: A key focus area for Interop 2023](/en-US/blog/border-images-interop-2023/) on MDN blog (2023)

files/en-us/web/css/border-image/index.md

@@ -191,6 +191,6 @@ To match the size of a single diamond, we will use a value of 81 divided by 3, o
 - {{cssxref("outline")}}
 - {{cssxref("box-shadow")}}
 - {{cssxref("background-image")}}
-- {{cssxref("url", "url()")}} function
+- {{cssxref("url_value", "<url>")}} type
 - Gradient functions: {{CSSxRef("gradient/conic-gradient", "conic-gradient()")}}, {{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}, {{CSSxRef("gradient/linear-gradient", "linear-gradient()")}}, {{CSSxRef("gradient/repeating-linear-gradient", "repeating-linear-gradient()")}}, {{CSSxRef("gradient/radial-gradient", "radial-gradient()")}}, {{CSSxRef("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}
 - [Border images in CSS: A key focus area for Interop 2023](/en-US/blog/border-images-interop-2023/) on MDN blog (2023)

files/en-us/web/css/clip-path/index.md

@@ -56,7 +56,7 @@ The `clip-path` property is specified as one or a combination of the values list
 ### Values
 
 - `<clip-source>`
-  - : A {{cssxref("url", "url()")}} referencing an [SVG](/en-US/docs/Web/SVG) {{SVGElement("clipPath")}} element.
+  - : A {{cssxref("url_value", "&lt;url&gt;")}} referencing an [SVG](/en-US/docs/Web/SVG) {{SVGElement("clipPath")}} element.
 - {{cssxref("&lt;basic-shape&gt;")}}
 
   - : A shape whose size and position is defined by the `<geometry-box>` value. If no geometry box is specified, the `border-box` will be used as the reference box. One of:

files/en-us/web/css/content/index.md

@@ -90,7 +90,7 @@ The keywords and data types mentioned above are described in more detail below:
 
 - {{cssxref("<image>")}}
 
-  - : An {{cssxref("<image>")}}, representing an image to display. This can be equal to a {{cssxref("url", "url()")}}, {{cssxref("image/image-set", "image-set()")}}, or {{cssxref("<gradient>")}} data type, or a part of the webpage itself, defined by the {{cssxref("element", "element()")}} function.
+  - : An {{cssxref("<image>")}}, representing an image to display. This can be equal to a {{cssxref("url_value", "<url>")}}, {{cssxref("image/image-set", "image-set()")}}, or {{cssxref("<gradient>")}} data type, or a part of the webpage itself, defined by the {{cssxref("element", "element()")}} function.
 
 - `<counter>`
 
@@ -343,9 +343,9 @@ If using a screen reader, it should speak the word "MOZILLA" when it reaches the
 
 In browsers that don't support the alternative text syntax the whole declaration containing the alt text is invalid. In this case, the previous `content` value will be used, showing the image and "alt text is not supported" text.
 
-### Element replacement with `url()`
+### Element replacement with URL
 
-This example replaces a regular element! The element's contents are replaced with an SVG using the {{cssxref("url", "url()")}} image function.
+This example replaces a regular element! The element's contents are replaced with an SVG using the {{cssxref("url_value", "&lt;url&gt;")}} type.
 
 Pseudo-elements aren't rendered on replaced elements. As this element is replaced, any matching `::after` or `::before` are not generated or applied. To demonstrate this, we include an `::after` declaration block, attempting to add the `id` as generated content. This pseudo-element will not be generated as the element is replaced.
 
@@ -461,7 +461,7 @@ div {
 - {{Cssxref("quotes")}}
 - {{cssxref("gradient", "&lt;gradient&gt;")}}
 - {{cssxref("image/image-set", "image-set()")}}
-- {{cssxref("url", "url()")}}
+- {{cssxref("url_value", "&lt;url&gt;")}}
 - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element)
 - [CSS generated content](/en-US/docs/Web/CSS/CSS_generated_content) module
 - [CSS lists and counters](/en-US/docs/Web/CSS/CSS_lists) module

files/en-us/web/css/cross-fade/index.md

@@ -139,7 +139,7 @@ When using background images, make sure the contrast in color is great enough th
 ## See also
 
 - {{cssxref("image")}}
-- {{cssxref("url")}}
+- {{cssxref("url_value", "<url>")}}
 - {{cssxref("image/image", "image()")}}
 - {{cssxref("image/image-set", "image-set()")}}
 - {{cssxref("element")}}

files/en-us/web/css/css_backgrounds_and_borders/index.md

@@ -122,7 +122,7 @@ To see the code for this sample, [view the source on GitHub](https://github.com/
 - {{cssxref("box-decoration-break")}} property
 - {{cssxref("text-shadow")}} property
 
-- {{cssxref("url", "url()")}} CSS function
+- {{cssxref("url_value", "<url>")}} CSS type
 - [`<color>`](/en-US/docs/Web/CSS/color) data type
 - [`<image>`](/en-US/docs/Web/CSS/image) data type
 - [`<position>`](/en-US/docs/Web/CSS/position) data type

files/en-us/web/css/css_functions/index.md

@@ -229,7 +229,7 @@ The {{CSSxRef("<image>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types)
 ### Image functions
 
 - {{CSSxRef("image/image","image()")}}
-  - : Defines an {{CSSxRef("<image>")}} in a similar fashion to the {{CSSxRef("url", "url()")}} function, but with added functionality including specifying the image's directionality and fallback images for when the preferred image is not supported.
+  - : Defines an {{CSSxRef("<image>")}} in a similar fashion to the {{cssxref("url_value", "<url>")}} type, but with added functionality including specifying the image's directionality and fallback images for when the preferred image is not supported.
 - {{CSSxRef("image/image-set","image-set()")}}
   - : Picks the most appropriate CSS image from a given set, primarily for high pixel density screens.
 - {{CSSxRef("cross-fade", "cross-fade()")}}
@@ -279,7 +279,7 @@ The following functions are used as a value of properties to reference a value d
   - : Uses the attributes defined on HTML element.
 - {{CSSxRef("env", "env()")}}
   - : Uses the user-agent defined as environment variable.
-- {{CSSxRef("url", "url()")}}
+- {{cssxref("url_value", "<url>")}}
   - : Uses a file from the specified URL.
 - {{CSSxRef("var", "var()")}}
   - : Uses the custom property value instead of any part of a value of another property.

files/en-us/web/css/css_images/implementing_image_sprites_in_css/index.md

@@ -24,7 +24,7 @@ Suppose an image is given to every item with class `toolbtn`:
 }
 ```
 
-A background position can be added either as two x, y values after the {{cssxref("url", "url()")}} in the background, or as {{cssxref("background-position")}}. For example:
+A background position can be added either as two x, y values after the {{cssxref("url_value", "<url>")}} in the background, or as {{cssxref("background-position")}}. For example:
 
 ```css
 #btn1 {

files/en-us/web/css/css_images/index.md

@@ -30,7 +30,7 @@ The **CSS images** module defines the types of images that can be used (the {{CS
 - {{CSSxRef("gradient/repeating-radial-gradient", "repeating-radial-gradient()")}}
 - {{CSSxRef("gradient/conic-gradient", "conic-gradient()")}}
 - {{CSSxRef("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}}
-- {{CSSxRef("url", "url()")}}
+- {{cssxref("url_value", "<url>")}}
 - {{CSSxRef("element", "element()")}}
 - {{CSSxRef("image/image", "image()")}}
 - {{CSSxRef("cross-fade", "cross-fade()")}}

files/en-us/web/css/css_namespaces/index.md

@@ -62,7 +62,7 @@ The `@namespace` rule is used for declaring a default namespace and for binding
 ## See also
 
 - [`<a>`](/en-US/docs/Web/SVG/Element/a#example) SVG element
-- [CSS `url()` function](/en-US/docs/Web/CSS/url)
+- [CSS `<url>` type](/en-US/docs/Web/CSS/url_value)
 - [CSS at-rules](/en-US/docs/Web/CSS/At-rule)
 - [CSS at-rule functions](/en-US/docs/Web/CSS/At-rule-functions)
 - [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors)

files/en-us/web/css/css_types/index.md

@@ -45,7 +45,7 @@ These types include keywords and identifiers as well as strings, and URLs.
   - : A `<custom-ident>` with the additional restriction that it must start with two dashes, for example, with [CSS Custom Properties](/en-US/docs/Web/CSS/Using_CSS_custom_properties).
 - {{cssxref("&lt;string&gt;")}}
   - : A quoted string, such as used for a value of the {{cssxref("content")}} property.
-- {{cssxref("&lt;url&gt;", "url()")}}
+- {{cssxref("url_value", "&lt;url&gt;")}}
   - : A pointer to a resource, for example as the value of {{cssxref("background-image")}}.
 
 ## Numeric data types

files/en-us/web/css/css_values_and_units/index.md

@@ -17,7 +17,7 @@ Every CSS declaration includes a property / value pair. Depending on the propert
 - {{cssxref("<custom-ident>")}}
 - Pre-defined keywords as an `<ident>`
 - {{cssxref("&lt;string&gt;")}}
-- {{cssxref("url","url()")}}
+- {{cssxref("url_value", "&lt;url&gt;")}}
 
 Text data types are either `<string>`, a quoted series of characters, or an `<ident>`, a "CSS Identifier" which is an unquoted string. A `<string>` must be quoted with either single or double quotes. CSS Identifiers, listed in the specifications as `<ident>` or `<custom-ident>`, must be unquoted.
 
@@ -87,7 +87,7 @@ In addition to the pre-defined keywords that are part of the specification for a
 
 ### URLs
 
-A {{cssxref("url","url()")}} type uses functional notation, which accepts a `<string>` that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.
+A {{cssxref("url_value", "&lt;url&gt;")}} type uses functional notation, which accepts a `<string>` that is a URL. This may be an absolute URL or a relative URL. For example, if you wanted to include a background image, you might use either of the following.
 
 ```css
 .box {
@@ -99,7 +99,7 @@ A {{cssxref("url","url()")}} type uses functional notation, which accepts a `<st
 }
 ```
 
-The parameter for `url()` can be either quoted or unquoted. If unquoted, it is parsed as a `<url-token>`, which has extra requirements including the escaping of certain characters. See {{cssxref("url","url()")}} for more information.
+The parameter for `url()` can be either quoted or unquoted. If unquoted, it is parsed as a `<url-token>`, which has extra requirements including the escaping of certain characters. See {{cssxref("url_value", "&lt;url&gt;")}} for more information.
 
 ## Numeric data types
 

files/en-us/web/css/cursor/index.md

@@ -59,7 +59,7 @@ Each `<url>` may be optionally followed by a pair of space-separated numbers, wh
 
 - `<url>` {{optional_inline}}
   - : A `url()` or a comma separated list `url(), url(), …`, pointing to an image file.
-    More than one {{cssxref("url", "url()")}} may be provided as fallbacks, in case some cursor image types are not supported.
+    More than one {{cssxref("url_value", "&lt;url&gt;")}} may be provided as fallbacks, in case some cursor image types are not supported.
     A non-URL fallback (one or more of the keyword values) _must_ be at the end of the fallback list.
 - `<x>`, `<y>` {{optional_inline}}
 
@@ -399,4 +399,4 @@ Cursor changes that intersect toolbar areas are commonly blocked to avoid spoofi
 ## See also
 
 - {{cssxref("pointer-events")}}
-- {{cssxref("url", "url()")}} function
+- {{cssxref("url_value", "&lt;url&gt;")}} type