diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 447037c1d945623..f9e85f8e511e64d 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -566,7 +566,7 @@ /en-US/docs/CSS/Using_the_CSS_multi-column_layout /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/CSS/Value_definition_syntax /en-US/docs/Web/CSS/Value_definition_syntax /en-US/docs/CSS/Visual_formatting_model /en-US/docs/Web/CSS/Visual_formatting_model -/en-US/docs/CSS/actual_value /en-US/docs/Web/CSS/actual_value +/en-US/docs/CSS/actual_value /en-US/docs/Web/CSS/CSS_cascade/actual_value /en-US/docs/CSS/align-content /en-US/docs/Web/CSS/align-content /en-US/docs/CSS/align-items /en-US/docs/Web/CSS/align-items /en-US/docs/CSS/align-self /en-US/docs/Web/CSS/align-self @@ -663,7 +663,7 @@ /en-US/docs/CSS/column-span /en-US/docs/Web/CSS/column-span /en-US/docs/CSS/column-width /en-US/docs/Web/CSS/column-width /en-US/docs/CSS/columns /en-US/docs/Web/CSS/columns -/en-US/docs/CSS/computed_value /en-US/docs/Web/CSS/computed_value +/en-US/docs/CSS/computed_value /en-US/docs/Web/CSS/CSS_cascade/computed_value /en-US/docs/CSS/content /en-US/docs/Web/CSS/content /en-US/docs/CSS/counter /en-US/docs/Web/CSS/counter /en-US/docs/CSS/counter-increment /en-US/docs/Web/CSS/counter-increment @@ -713,10 +713,10 @@ /en-US/docs/CSS/image-orientation /en-US/docs/Web/CSS/image-orientation /en-US/docs/CSS/image-rendering /en-US/docs/Web/CSS/image-rendering /en-US/docs/CSS/inherit /en-US/docs/Web/CSS/inherit -/en-US/docs/CSS/inheritance /en-US/docs/Web/CSS/Inheritance -/en-US/docs/CSS/inherited_and_non-inherited_properties /en-US/docs/Web/CSS/Inheritance +/en-US/docs/CSS/inheritance /en-US/docs/Web/CSS/CSS_cascade/Inheritance +/en-US/docs/CSS/inherited_and_non-inherited_properties /en-US/docs/Web/CSS/CSS_cascade/Inheritance /en-US/docs/CSS/initial /en-US/docs/Web/CSS/initial -/en-US/docs/CSS/initial_value /en-US/docs/Web/CSS/initial_value +/en-US/docs/CSS/initial_value /en-US/docs/Web/CSS/CSS_cascade/initial_value /en-US/docs/CSS/integer /en-US/docs/Web/CSS/integer /en-US/docs/CSS/justify-content /en-US/docs/Web/CSS/justify-content /en-US/docs/CSS/left /en-US/docs/Web/CSS/left @@ -786,7 +786,7 @@ /en-US/docs/CSS/scroll /en-US/docs/Web/CSS/overflow /en-US/docs/CSS/shape /en-US/docs/Web/CSS/shape /en-US/docs/CSS/shape-rendering /en-US/docs/Web/SVG/Attribute/shape-rendering -/en-US/docs/CSS/specified_value /en-US/docs/Web/CSS/specified_value +/en-US/docs/CSS/specified_value /en-US/docs/Web/CSS/CSS_cascade/specified_value /en-US/docs/CSS/static /en-US/docs/Web/CSS/position /en-US/docs/CSS/stop-color /en-US/docs/Web/SVG/Attribute/stop-color /en-US/docs/CSS/stop-opacity /en-US/docs/Web/SVG/Attribute/stop-opacity @@ -833,7 +833,7 @@ /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_value -/en-US/docs/CSS/used_value /en-US/docs/Web/CSS/used_value +/en-US/docs/CSS/used_value /en-US/docs/Web/CSS/CSS_cascade/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 /en-US/docs/CSS/vertical-align /en-US/docs/Web/CSS/vertical-align @@ -997,7 +997,7 @@ /en-US/docs/CSS:clip /en-US/docs/Web/CSS/clip /en-US/docs/CSS:color /en-US/docs/Web/CSS/color /en-US/docs/CSS:color_value /en-US/docs/Web/CSS/color_value -/en-US/docs/CSS:computed_value /en-US/docs/Web/CSS/computed_value +/en-US/docs/CSS:computed_value /en-US/docs/Web/CSS/CSS_cascade/computed_value /en-US/docs/CSS:content /en-US/docs/Web/CSS/content /en-US/docs/CSS:counter /en-US/docs/Web/CSS/counter /en-US/docs/CSS:counter-increment /en-US/docs/Web/CSS/counter-increment @@ -1019,10 +1019,10 @@ /en-US/docs/CSS:height /en-US/docs/Web/CSS/height /en-US/docs/CSS:hidden /en-US/docs/Web/CSS/visibility /en-US/docs/CSS:inherit /en-US/docs/Web/CSS/inherit -/en-US/docs/CSS:inheritance /en-US/docs/Web/CSS/Inheritance -/en-US/docs/CSS:inherited_and_non-inherited_properties /en-US/docs/Web/CSS/Inheritance +/en-US/docs/CSS:inheritance /en-US/docs/Web/CSS/CSS_cascade/Inheritance +/en-US/docs/CSS:inherited_and_non-inherited_properties /en-US/docs/Web/CSS/CSS_cascade/Inheritance /en-US/docs/CSS:initial /en-US/docs/Web/CSS/initial -/en-US/docs/CSS:initial_value /en-US/docs/Web/CSS/initial_value +/en-US/docs/CSS:initial_value /en-US/docs/Web/CSS/CSS_cascade/initial_value /en-US/docs/CSS:integer /en-US/docs/Web/CSS/integer /en-US/docs/CSS:left /en-US/docs/Web/CSS/left /en-US/docs/CSS:length /en-US/docs/Web/CSS/length @@ -9894,10 +9894,14 @@ /en-US/docs/Web/API/RTCOfferAnswerOptions/voiceActivityDetection /en-US/docs/Web/API/RTCPeerConnection/createAnswer /en-US/docs/Web/API/RTCOfferOptions /en-US/docs/Web/API/RTCPeerConnection/createOffer /en-US/docs/Web/API/RTCOfferOptions/iceRestart /en-US/docs/Web/API/RTCPeerConnection/createOffer +/en-US/docs/Web/API/RTCOutboundRtpStreamStats/averageRtcpInterval /en-US/docs/Web/API/RTCOutboundRtpStreamStats /en-US/docs/Web/API/RTCOutboundRtpStreamStats/firCount /en-US/docs/Web/API/RTCOutboundRtpStreamStats /en-US/docs/Web/API/RTCOutboundRtpStreamStats/lastPacketSentTimestamp /en-US/docs/Web/API/RTCOutboundRtpStreamStats -/en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsReceived /en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsSent +/en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsReceived /en-US/docs/Web/API/RTCOutboundRtpStreamStats +/en-US/docs/Web/API/RTCOutboundRtpStreamStats/perDscpPacketsSent /en-US/docs/Web/API/RTCOutboundRtpStreamStats /en-US/docs/Web/API/RTCOutboundRtpStreamStats/pliCount /en-US/docs/Web/API/RTCOutboundRtpStreamStats +/en-US/docs/Web/API/RTCOutboundRtpStreamStats/sliCount /en-US/docs/Web/API/RTCOutboundRtpStreamStats +/en-US/docs/Web/API/RTCOutboundRtpStreamStats/trackId /en-US/docs/Web/API/RTCOutboundRtpStreamStats /en-US/docs/Web/API/RTCPeerConnection.addStream /en-US/docs/Web/API/RTCPeerConnection/addStream /en-US/docs/Web/API/RTCPeerConnection.close /en-US/docs/Web/API/RTCPeerConnection/close /en-US/docs/Web/API/RTCPeerConnection.getIdentityAssertion /en-US/docs/Web/API/RTCPeerConnection/getIdentityAssertion @@ -10557,6 +10561,7 @@ /en-US/docs/Web/API/Window/animationend_event /en-US/docs/Web/API/Element/animationend_event /en-US/docs/Web/API/Window/animationiteration_event /en-US/docs/Web/API/Element/animationiteration_event /en-US/docs/Web/API/Window/animationstart_event /en-US/docs/Web/API/Element/animationstart_event +/en-US/docs/Web/API/Window/console /en-US/docs/Web/API/console /en-US/docs/Web/API/Window/content /en-US/docs/Web/API/Window /en-US/docs/Web/API/Window/convertPointFromNodeToPage /en-US/docs/Web/API/Window/webkitConvertPointFromNodeToPage /en-US/docs/Web/API/Window/convertPointFromPageToNode /en-US/docs/Web/API/Window/webkitConvertPointFromPageToNode @@ -11908,9 +11913,11 @@ /en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes /en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes /en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Box_Values /en-US/docs/Web/CSS/CSS_shapes/From_box_values /en-US/docs/Web/CSS/CSS_Text/Wrapping_text /en-US/docs/Web/CSS/CSS_text/Wrapping_breaking_text +/en-US/docs/Web/CSS/CSS_Types /en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types /en-US/docs/Web/CSS/CSS_Types/display-inside /en-US/docs/Web/CSS/display-inside /en-US/docs/Web/CSS/CSS_Types/display-outside /en-US/docs/Web/CSS/display-outside /en-US/docs/Web/CSS/CSS_User_Interface /en-US/docs/Web/CSS/CSS_basic_user_interface +/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_Types /en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types /en-US/docs/Web/CSS/CSS_Variables /en-US/docs/Web/CSS/CSS_cascading_variables /en-US/docs/Web/CSS/CSS_Viewport /en-US/docs/Web/CSS /en-US/docs/Web/CSS/CSS_animations/Tips /en-US/docs/Web/API/Web_Animations_API/Tips @@ -11956,6 +11963,7 @@ /en-US/docs/Web/CSS/General_sibling_combinator /en-US/docs/Web/CSS/Subsequent-sibling_combinator /en-US/docs/Web/CSS/General_sibling_selectors /en-US/docs/Web/CSS/Subsequent-sibling_combinator /en-US/docs/Web/CSS/Grouping_selectors /en-US/docs/Web/CSS/Selector_list +/en-US/docs/Web/CSS/Inheritance /en-US/docs/Web/CSS/CSS_cascade/Inheritance /en-US/docs/Web/CSS/Interactive /en-US/docs/Web/CSS/@media /en-US/docs/Web/CSS/Layout_cookbook/Recipe:_Media_Objects /en-US/docs/Web/CSS/Layout_cookbook/Media_objects /en-US/docs/Web/CSS/List_of_Proprietary_CSS_Features /en-US/docs/Web/CSS/Reference @@ -11994,6 +12002,7 @@ /en-US/docs/Web/CSS/Using_the_CSS_multi-column_layout /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/Web/CSS/_image /en-US/docs/Web/CSS/image/image /en-US/docs/Web/CSS/abs() /en-US/docs/Web/CSS/abs +/en-US/docs/Web/CSS/actual_value /en-US/docs/Web/CSS/CSS_cascade/actual_value /en-US/docs/Web/CSS/additive-symbols /en-US/docs/Web/CSS/@counter-style/additive-symbols /en-US/docs/Web/CSS/align-tracks /en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout /en-US/docs/Web/CSS/attr() /en-US/docs/Web/CSS/attr @@ -12027,6 +12036,7 @@ /en-US/docs/Web/CSS/color_value/rgba() /en-US/docs/Web/CSS/color_value/rgb /en-US/docs/Web/CSS/color_value/system-color /en-US/docs/Web/CSS/system-color /en-US/docs/Web/CSS/color_value/system_color_keywords /en-US/docs/Web/CSS/system-color +/en-US/docs/Web/CSS/computed_value /en-US/docs/Web/CSS/CSS_cascade/computed_value /en-US/docs/Web/CSS/conic-gradient /en-US/docs/Web/CSS/gradient/conic-gradient /en-US/docs/Web/CSS/conic-gradient() /en-US/docs/Web/CSS/gradient/conic-gradient /en-US/docs/Web/CSS/counter() /en-US/docs/Web/CSS/counter @@ -12078,7 +12088,8 @@ /en-US/docs/Web/CSS/image/image-set() /en-US/docs/Web/CSS/image/image-set /en-US/docs/Web/CSS/image/paint() /en-US/docs/Web/CSS/image/paint /en-US/docs/Web/CSS/imagefunction /en-US/docs/Web/CSS/image/image -/en-US/docs/Web/CSS/inherited_and_non-inherited_properties /en-US/docs/Web/CSS/Inheritance +/en-US/docs/Web/CSS/inherited_and_non-inherited_properties /en-US/docs/Web/CSS/CSS_cascade/Inheritance +/en-US/docs/Web/CSS/initial_value /en-US/docs/Web/CSS/CSS_cascade/initial_value /en-US/docs/Web/CSS/inset-area /en-US/docs/Web/CSS/position-area /en-US/docs/Web/CSS/inset-area_value /en-US/docs/Web/CSS/position-area_value /en-US/docs/Web/CSS/justify-tracks /en-US/docs/Web/CSS/CSS_grid_layout/Masonry_layout @@ -12135,6 +12146,7 @@ /en-US/docs/Web/CSS/sign_function /en-US/docs/Web/CSS/sign /en-US/docs/Web/CSS/single-transition-timing-function /en-US/docs/Web/CSS/easing-function /en-US/docs/Web/CSS/speak-as /en-US/docs/Web/CSS/@counter-style/speak-as +/en-US/docs/Web/CSS/specified_value /en-US/docs/Web/CSS/CSS_cascade/specified_value /en-US/docs/Web/CSS/static /en-US/docs/Web/CSS/position /en-US/docs/Web/CSS/suffix /en-US/docs/Web/CSS/@counter-style/suffix /en-US/docs/Web/CSS/symbols() /en-US/docs/Web/CSS/symbols @@ -12168,6 +12180,7 @@ /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/used_value /en-US/docs/Web/CSS/CSS_cascade/used_value /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 diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 57cbbf21b1907ae..17f7bb6f8edb95b 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -53902,10 +53902,6 @@ "modified": "2020-10-15T22:17:14.806Z", "contributors": ["Sheppy"] }, - "Web/API/RTCOutboundRtpStreamStats/averageRtcpInterval": { - "modified": "2020-10-15T22:17:15.805Z", - "contributors": ["Sheppy"] - }, "Web/API/RTCOutboundRtpStreamStats/framesEncoded": { "modified": "2020-10-15T22:17:15.823Z", "contributors": ["Sheppy"] @@ -53914,10 +53910,6 @@ "modified": "2020-10-15T22:17:14.809Z", "contributors": ["Sheppy"] }, - "Web/API/RTCOutboundRtpStreamStats/perDscpPacketsSent": { - "modified": "2020-10-15T22:17:15.897Z", - "contributors": ["Sheppy"] - }, "Web/API/RTCOutboundRtpStreamStats/qpSum": { "modified": "2020-10-15T22:17:16.058Z", "contributors": ["Sheppy"] @@ -53930,14 +53922,6 @@ "modified": "2020-10-15T22:17:16.621Z", "contributors": ["Sheppy"] }, - "Web/API/RTCOutboundRtpStreamStats/sliCount": { - "modified": "2020-10-15T22:17:16.518Z", - "contributors": ["Sheppy"] - }, - "Web/API/RTCOutboundRtpStreamStats/trackId": { - "modified": "2020-10-15T22:17:16.946Z", - "contributors": ["Sheppy"] - }, "Web/API/RTCPeerConnection": { "modified": "2020-12-14T09:30:15.422Z", "contributors": [ @@ -66288,10 +66272,6 @@ "JesseW" ] }, - "Web/API/Window/console": { - "modified": "2020-01-26T11:16:36.044Z", - "contributors": ["alattalatta", "Zearin_Galaurum", "tjcrowder", "Sheppy"] - }, "Web/API/Window/copy_event": { "modified": "2020-10-15T22:16:13.286Z", "contributors": ["mfuji09", "wbamberg"] @@ -75982,23 +75962,6 @@ "CitizenK" ] }, - "Web/CSS/CSS_Types": { - "modified": "2020-12-11T13:13:56.675Z", - "contributors": [ - "rachelandrew", - "chrisdavidmills", - "ramiy", - "mfuji09", - "wbamberg", - "jswisher", - "estelle", - "Sheppy", - "mfluehr", - "david_ross", - "CarloMartini", - "mantou" - ] - }, "Web/CSS/CSS_Values_and_Units": { "modified": "2020-10-29T16:36:56.704Z", "contributors": [ @@ -76016,6 +75979,23 @@ "chrisdavidmills" ] }, + "Web/CSS/CSS_Values_and_Units/CSS_data_types": { + "modified": "2020-12-11T13:13:56.675Z", + "contributors": [ + "rachelandrew", + "chrisdavidmills", + "ramiy", + "mfuji09", + "wbamberg", + "jswisher", + "estelle", + "Sheppy", + "mfluehr", + "david_ross", + "CarloMartini", + "mantou" + ] + }, "Web/CSS/CSS_animated_properties": { "modified": "2020-12-14T07:30:52.556Z", "contributors": [ @@ -76270,6 +76250,30 @@ "teoli" ] }, + "Web/CSS/CSS_cascade/Inheritance": { + "modified": "2020-09-16T06:00:09.005Z", + "contributors": [ + "mfuji09", + "OtterOne", + "Malvoz", + "Sheppy", + "mfluehr", + "GiS91", + "kscarfone", + "teoli", + "shitface", + "FredB", + "sloppy_4455", + "miken32", + "Marsf", + "Zearin", + "Mgjbot", + "Killerowski", + "Bedi", + "Fredchat", + "DBaron" + ] + }, "Web/CSS/CSS_cascade/Specificity": { "modified": "2020-11-14T16:01:00.890Z", "contributors": [ @@ -76323,6 +76327,114 @@ "jwalker" ] }, + "Web/CSS/CSS_cascade/actual_value": { + "modified": "2020-07-14T09:14:02.638Z", + "contributors": [ + "mfuji09", + "wbamberg", + "mfluehr", + "sergio-vb", + "Sebastianz", + "teoli", + "kscarfone", + "ethertank", + "Sheppy", + "FredB", + "ziyunfei", + "McGurk" + ] + }, + "Web/CSS/CSS_cascade/computed_value": { + "modified": "2020-08-10T14:01:43.680Z", + "contributors": [ + "mfuji09", + "wbamberg", + "hinell", + "mfluehr", + "Cath_kb", + "Sebastianz", + "Sheppy", + "Urgot", + "Dholbert", + "kscarfone", + "ethertank", + "trevorh", + "mmjyu", + "FredB", + "teoli", + "Jürgen Jeka", + "Mgjbot", + "Marsf", + "Fredchat", + "DBaron" + ] + }, + "Web/CSS/CSS_cascade/initial_value": { + "modified": "2020-07-07T12:36:02.958Z", + "contributors": [ + "wbamberg", + "gerfolder", + "mfluehr", + "CannedYerins", + "kscarfone", + "Sheppy", + "FredB", + "teoli", + "ethertank", + "kyleb", + "Marsf", + "Mgjbot", + "Kohei", + "Pastelgrim", + "Killerowski", + "Bedi", + "Fredchat", + "DBaron" + ] + }, + "Web/CSS/CSS_cascade/specified_value": { + "modified": "2020-08-10T14:28:31.353Z", + "contributors": [ + "mfuji09", + "wbamberg", + "hinell", + "mfluehr", + "asteroidb612", + "Sheppy", + "BychekRU", + "Sebastianz", + "McGurk" + ] + }, + "Web/CSS/CSS_cascade/used_value": { + "modified": "2020-07-07T12:48:07.054Z", + "contributors": [ + "wbamberg", + "mfuji09", + "myf", + "hinell", + "FumiyaShibusawa", + "Tuman", + "shogunsea", + "mfluehr", + "Loadmaster", + "Mori", + "david_ross", + "DecadeCode", + "azoorob3", + "fcard", + "Syle91", + "kscarfone", + "phil_nist", + "Kritz", + "Dholbert", + "teoli", + "ethertank", + "Sheppy", + "FredB", + "yonathan" + ] + }, "Web/CSS/CSS_cascading_variables": { "modified": "2020-07-07T12:03:44.891Z", "contributors": ["wbamberg", "mfluehr"] @@ -78103,30 +78215,6 @@ "miken32" ] }, - "Web/CSS/Inheritance": { - "modified": "2020-09-16T06:00:09.005Z", - "contributors": [ - "mfuji09", - "OtterOne", - "Malvoz", - "Sheppy", - "mfluehr", - "GiS91", - "kscarfone", - "teoli", - "shitface", - "FredB", - "sloppy_4455", - "miken32", - "Marsf", - "Zearin", - "Mgjbot", - "Killerowski", - "Bedi", - "Fredchat", - "DBaron" - ] - }, "Web/CSS/Inline_formatting_context": { "modified": "2020-04-27T22:33:13.546Z", "contributors": ["pans9", "chrisdavidmills", "rachelandrew"] @@ -78776,23 +78864,6 @@ "ziyunfei" ] }, - "Web/CSS/actual_value": { - "modified": "2020-07-14T09:14:02.638Z", - "contributors": [ - "mfuji09", - "wbamberg", - "mfluehr", - "sergio-vb", - "Sebastianz", - "teoli", - "kscarfone", - "ethertank", - "Sheppy", - "FredB", - "ziyunfei", - "McGurk" - ] - }, "Web/CSS/align-content": { "modified": "2020-12-02T11:02:36.210Z", "contributors": [ @@ -82589,31 +82660,6 @@ "brianloveswords" ] }, - "Web/CSS/computed_value": { - "modified": "2020-08-10T14:01:43.680Z", - "contributors": [ - "mfuji09", - "wbamberg", - "hinell", - "mfluehr", - "Cath_kb", - "Sebastianz", - "Sheppy", - "Urgot", - "Dholbert", - "kscarfone", - "ethertank", - "trevorh", - "mmjyu", - "FredB", - "teoli", - "Jürgen Jeka", - "Mgjbot", - "Marsf", - "Fredchat", - "DBaron" - ] - }, "Web/CSS/contain": { "modified": "2020-12-09T11:47:29.070Z", "contributors": [ @@ -85268,29 +85314,6 @@ "Ruggero" ] }, - "Web/CSS/initial_value": { - "modified": "2020-07-07T12:36:02.958Z", - "contributors": [ - "wbamberg", - "gerfolder", - "mfluehr", - "CannedYerins", - "kscarfone", - "Sheppy", - "FredB", - "teoli", - "ethertank", - "kyleb", - "Marsf", - "Mgjbot", - "Kohei", - "Pastelgrim", - "Killerowski", - "Bedi", - "Fredchat", - "DBaron" - ] - }, "Web/CSS/inline-size": { "modified": "2020-10-16T08:11:57.577Z", "contributors": [ @@ -88616,20 +88639,6 @@ "rebeccahauck" ] }, - "Web/CSS/specified_value": { - "modified": "2020-08-10T14:28:31.353Z", - "contributors": [ - "mfuji09", - "wbamberg", - "hinell", - "mfluehr", - "asteroidb612", - "Sheppy", - "BychekRU", - "Sebastianz", - "McGurk" - ] - }, "Web/CSS/string": { "modified": "2020-10-15T21:10:29.888Z", "contributors": [ @@ -90231,35 +90240,6 @@ "estelle" ] }, - "Web/CSS/used_value": { - "modified": "2020-07-07T12:48:07.054Z", - "contributors": [ - "wbamberg", - "mfuji09", - "myf", - "hinell", - "FumiyaShibusawa", - "Tuman", - "shogunsea", - "mfluehr", - "Loadmaster", - "Mori", - "david_ross", - "DecadeCode", - "azoorob3", - "fcard", - "Syle91", - "kscarfone", - "phil_nist", - "Kritz", - "Dholbert", - "teoli", - "ethertank", - "Sheppy", - "FredB", - "yonathan" - ] - }, "Web/CSS/user-modify": { "modified": "2020-10-15T21:08:22.012Z", "contributors": [ diff --git a/files/en-us/glossary/value/index.md b/files/en-us/glossary/value/index.md index 8847f8f0d961db4..3d915f6dacfc4fa 100644 --- a/files/en-us/glossary/value/index.md +++ b/files/en-us/glossary/value/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition In the context of data or an object **{{Glossary("Wrapper", "wrapper")}}** around that data, the value is the **{{Glossary("Primitive","primitive value")}}** that the object wrapper contains. In the context of a **{{Glossary("Variable","variable")}}** or **{{Glossary("Property","property")}}**, the value can be either a primitive or an **{{Glossary("Object reference","object reference")}}**. -In the context of CSS property values, there are specified, computed, and actual values. The final value for every CSS property applied to every element and pseudo-element is the result of a four-step calculation: the value is determined through specification (the "[specified value](/en-US/docs/Web/CSS/specified_value)", then resolved into a value that is used for inheritance (the "[computed value](/en-US/docs/Web/CSS/computed_value)"), then converted into an absolute value if necessary (the "[used value](/en-US/docs/Web/CSS/used_value)"), and finally transformed according to the limitations of the local environment (the "[actual value](/en-US/docs/Web/CSS/actual_value)"). +In the context of CSS property values, there are specified, computed, and actual values. The final value for every CSS property applied to every element and pseudo-element is the result of a four-step calculation: the value is determined through specification (the "[specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value)", then resolved into a value that is used for inheritance (the "[computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value)"), then converted into an absolute value if necessary (the "[used value](/en-US/docs/Web/CSS/CSS_cascade/used_value)"), and finally transformed according to the limitations of the local environment (the "[actual value](/en-US/docs/Web/CSS/CSS_cascade/actual_value)"). For CSS data types, see [CSS values and units](/en-US/docs/Web/CSS/CSS_Values_and_Units). diff --git a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md index f8c8e5125e90ecd..d1e2327bd43c64d 100644 --- a/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md +++ b/files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md @@ -43,7 +43,7 @@ CSS stands for **Cascading Style Sheets**, and that first word _cascading_ is in At some point, you will be working on a project and you will find that the CSS you thought should be applied to an element is not working. Often, the problem is that you create two rules that apply different values of the same property to the same element. [**Cascade**](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and the closely-related concept of [**specificity**](/en-US/docs/Web/CSS/CSS_cascade/Specificity) are mechanisms that control which rule applies when there is such a conflict. The rule that's styling your element may not be the one you expect, so you need to understand how these mechanisms work. -Also significant here is the concept of [**inheritance**](/en-US/docs/Web/CSS/Inheritance), which means that some CSS properties by default inherit values set on the current element's parent element and some don't. This can also cause some behavior that you might not expect. +Also significant here is the concept of [**inheritance**](/en-US/docs/Web/CSS/CSS_cascade/Inheritance), which means that some CSS properties by default inherit values set on the current element's parent element and some don't. This can also cause some behavior that you might not expect. Let's start by taking a quick look at the key things we are dealing with, then we'll look at each in turn and see how they interact with each other and your CSS. These can seem like a tricky set of concepts to understand. As you get more practice writing CSS, the way it works will become more obvious to you. @@ -191,7 +191,7 @@ CSS provides five special universal property values for controlling inheritance. - {{cssxref("inherit")}} - : Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance". - {{cssxref("initial")}} - - : Sets the property value applied to a selected element to the [initial value](/en-US/docs/Web/CSS/initial_value) of that property. + - : Sets the property value applied to a selected element to the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) of that property. - {{cssxref("revert")}} - : Resets the property value applied to a selected element to the browser's default styling rather than the defaults applied to that property. This value acts like {{cssxref("unset")}} in many cases. - {{cssxref("revert-layer")}} diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md index 2f385741f960270..28b8a6bbc7c1870 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/page_type_key/index.md @@ -69,7 +69,7 @@ This section lists `page-type` values for pages under [Web/CSS](/en-US/docs/Web/ - `css-pseudo-element`: a [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements), like {{cssxref("::before")}}. - `css-selector`: a [basic selector](/en-US/docs/Web/CSS/CSS_selectors/Selectors_and_combinators#basic_selectors), like the [class selector](/en-US/docs/Web/CSS/Class_selectors). - `css-shorthand-property`: a [shorthand property](/en-US/docs/Web/CSS/Shorthand_properties), like {{cssxref("background")}}. -- `css-type`: a [data type](/en-US/docs/Web/CSS/CSS_Types), like [``](/en-US/docs/Web/CSS/color_value). +- `css-type`: a [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types), like [``](/en-US/docs/Web/CSS/color_value). ### Glossary page types diff --git a/files/en-us/mdn/writing_guidelines/page_structures/syntax_sections/index.md b/files/en-us/mdn/writing_guidelines/page_structures/syntax_sections/index.md index bdd8649384a3a3f..c5f6ab2a90e8ab9 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/syntax_sections/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/syntax_sections/index.md @@ -248,11 +248,10 @@ Next, you should include a "Values" section — this contains a description list #### Formal syntax -The last section, "Formal syntax", is automatically generated from the data included in the [MDN data repo](https://github.com/mdn/data)'s CSS directory. You just need to include a `CSSSyntax` macro call below the title, and it will take care of the rest. +The last section, "Formal syntax", is automatically generated using the `\{{CSSSyntax}}` macro. This macro fetches data from the CSS specifications using the [@webref/css npm package](https://www.npmjs.com/package/@webref/css). To include the formal syntax in your document: -The only complication arises from making sure the data you need is present. The [properties.json](https://github.com/mdn/data/blob/main/css/properties.json) file needs to contain an entry for the property you are documenting, and the [types.json](https://github.com/mdn/data/blob/main/css/types.json) file needs to contain an entry for all of the value types used in the property's value. - -You need to do this by forking the [MDN data repo](https://github.com/mdn/data), cloning your fork locally, making the changes in a new branch, then submitting a pull request against the upstream repo. You can [find more details about using Git here](/en-US/docs/MDN/Writing_guidelines/Page_structures/Compatibility_tables). +1. Add a heading like: `## Formal syntax`. +2. Place the `\{{CSSSyntax}}` macro directly below this heading. ### Selectors diff --git a/files/en-us/mozilla/firefox/experimental_features/index.md b/files/en-us/mozilla/firefox/experimental_features/index.md index f655d44d4124eb1..02ec11963003687 100644 --- a/files/en-us/mozilla/firefox/experimental_features/index.md +++ b/files/en-us/mozilla/firefox/experimental_features/index.md @@ -908,46 +908,6 @@ None. ## JavaScript -### Intl.DurationFormat - -{{jsxref("Intl.DurationFormat")}} enables locale-sensitive formatting of durations. ([Firefox bug 1648139](https://bugzil.la/1648139)). - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Release channelVersion addedEnabled by default?
Nightly134Yes
Developer Edition134No
Beta134No
Release134No
Preference nameNA
- ### Temporal API The [Temporal object](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Temporal) aims to simplify working with dates and times in various scenarios, with built-in time zone and calendar representations ([Firefox bug 1912511](https://bugzil.la/1912511)). diff --git a/files/en-us/mozilla/firefox/releases/119/index.md b/files/en-us/mozilla/firefox/releases/119/index.md index f7fc00a142c3880..4995a66c5c22fe9 100644 --- a/files/en-us/mozilla/firefox/releases/119/index.md +++ b/files/en-us/mozilla/firefox/releases/119/index.md @@ -28,7 +28,7 @@ This article provides information about the changes in Firefox 119 that affect d ### SVG -- The [SVG attributes](/en-US/docs/Web/SVG/Attribute) that accept a [``](/en-US/docs/Web/SVG/Content_type#length) value now support [level 3](https://www.w3.org/TR/css-values-3/#lengths) {{cssxref("length")}} [CSS data types](/en-US/docs/Web/CSS/CSS_Types) for all SVG elements. This enables the sizing of SVG elements based on font sizes (`cap`, `rem`, etc.), viewport (`vh`, `vw`, `vmin`, etc.), or absolute lengths (`px`, `cm`, etc.), e.g. ``. (See [Firefox bug 1287054](https://bugzil.la/1287054) for more details). +- The [SVG attributes](/en-US/docs/Web/SVG/Attribute) that accept a [``](/en-US/docs/Web/SVG/Content_type#length) value now support [level 3](https://www.w3.org/TR/css-values-3/#lengths) {{cssxref("length")}} [CSS data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) for all SVG elements. This enables the sizing of SVG elements based on font sizes (`cap`, `rem`, etc.), viewport (`vh`, `vw`, `vmin`, etc.), or absolute lengths (`px`, `cm`, etc.), e.g. ``. (See [Firefox bug 1287054](https://bugzil.la/1287054) for more details). ### HTTP diff --git a/files/en-us/mozilla/firefox/releases/136/index.md b/files/en-us/mozilla/firefox/releases/136/index.md index 5a81a527ead03b9..49bc8980bbc111c 100644 --- a/files/en-us/mozilla/firefox/releases/136/index.md +++ b/files/en-us/mozilla/firefox/releases/136/index.md @@ -22,6 +22,8 @@ This article provides information about the changes in Firefox 136 that affect d ### JavaScript +- {{jsxref("Intl.DurationFormat")}} is now supported, enabling locale-sensitive formatting of durations. ([Firefox bug 1933303](https://bugzil.la/1933303)). + #### Removals ### SVG diff --git a/files/en-us/web/api/animation/commitstyles/index.md b/files/en-us/web/api/animation/commitstyles/index.md index 024347115f95712..c2dd929dac0a8f2 100644 --- a/files/en-us/web/api/animation/commitstyles/index.md +++ b/files/en-us/web/api/animation/commitstyles/index.md @@ -8,7 +8,7 @@ browser-compat: api.Animation.commitStyles {{APIRef("Web Animations")}} -The `commitStyles()` method of the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)'s {{domxref("Animation")}} interface writes the [computed values](/en-US/docs/Web/CSS/computed_value) of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute. `commitStyles()` works even if the animation has been [automatically removed](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations). +The `commitStyles()` method of the [Web Animations API](/en-US/docs/Web/API/Web_Animations_API)'s {{domxref("Animation")}} interface writes the [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of the animation's current styles into its target element's [`style`](/en-US/docs/Web/HTML/Global_attributes/style) attribute. `commitStyles()` works even if the animation has been [automatically removed](/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API#automatically_removing_filling_animations). `commitStyles()` can be used in combination with `fill` to cause the final state of an animation to persist after the animation ends. The same effect could be achieved with `fill` alone, but [using indefinitely filling animations is discouraged](https://drafts.csswg.org/web-animations-1/#fill-behavior). Animations [take precedence over all static styles](/en-US/docs/Web/CSS/CSS_cascade/Cascade#cascading_order), so an indefinite filling animation can prevent the target element from ever being styled normally. diff --git a/files/en-us/web/api/console/index.md b/files/en-us/web/api/console/index.md index 6b8343068a852eb..1cecb4eb48d85c1 100644 --- a/files/en-us/web/api/console/index.md +++ b/files/en-us/web/api/console/index.md @@ -11,7 +11,7 @@ The **`console`** object provides access to the debugging console (e.g., the [We Implementations of the console API may differ between runtimes. In particular, some console methods may work differently or not work at all in some online editors and IDEs. To see the behavior described in this documentation, try the methods in your browser's developer tools, although even here, there are some differences between browsers. -The `console` object can be accessed from any global object. {{domxref("Window")}} on browsing scopes and {{domxref("WorkerGlobalScope")}} as specific variants in workers via the property console. It's exposed as {{domxref("Window.console")}}, and can be referenced as `console`. For example: +The `console` object is available in any global scope. For example: ```js console.log("Failed to open the specified link"); diff --git a/files/en-us/web/api/element/shadowroot/index.md b/files/en-us/web/api/element/shadowroot/index.md index 6fbde10f864e745..aa56bff43764637 100644 --- a/files/en-us/web/api/element/shadowroot/index.md +++ b/files/en-us/web/api/element/shadowroot/index.md @@ -19,6 +19,8 @@ A {{DOMxRef("ShadowRoot")}} object instance, or `null` if the associated shadow root was attached with its {{DOMxRef("ShadowRoot.mode", "mode")}} set to `closed`. (See {{DOMxRef("Element.attachShadow()")}} for further details). +Some built-in elements, such as {{HTMLElement("input")}} and {{HTMLElement("img")}}, have user-agent shadow roots that are closed to script. Therefore, their `shadowRoot` property is always `null`. + ## Examples The following snippets are taken from our [life-cycle-callbacks](https://github.com/mdn/web-components-examples/tree/main/life-cycle-callbacks) diff --git a/files/en-us/web/api/htmlanchorelement/hash/index.md b/files/en-us/web/api/htmlanchorelement/hash/index.md index 47ead42cba324f9..944775f4ce1d025 100644 --- a/files/en-us/web/api/htmlanchorelement/hash/index.md +++ b/files/en-us/web/api/htmlanchorelement/hash/index.md @@ -8,9 +8,9 @@ browser-compat: api.HTMLAnchorElement.hash {{ APIRef("HTML DOM") }} -The **`HTMLAnchorElement.hash`** property returns a string containing a `'#'` followed by the fragment identifier of the URL. +The **`hash`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing a `"#"` followed by the fragment identifier of the `` element's `href`. If the URL does not have a fragment identifier, this property contains an empty string, `""`. -The fragment is [percent-encoded](/en-US/docs/Glossary/Percent-encoding). If the URL does not have a fragment identifier, this property contains an empty string, `""`. +See {{domxref("URL.hash")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlanchorelement/host/index.md b/files/en-us/web/api/htmlanchorelement/host/index.md index f74d062ef725b5b..594ab76b1d87340 100644 --- a/files/en-us/web/api/htmlanchorelement/host/index.md +++ b/files/en-us/web/api/htmlanchorelement/host/index.md @@ -8,10 +8,9 @@ browser-compat: api.HTMLAnchorElement.host {{ApiRef("HTML DOM")}} -The **`HTMLAnchorElement.host`** property is a -string containing the host, that is the _hostname_, and then, -if the _port_ of the URL is nonempty, a `':'`, and the _port_ -of the URL. +The **`host`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the host, which is the {{domxref("HTMLAnchorElement.hostname", "hostname")}}, and then, if the {{glossary("port")}} of the URL is nonempty, a `":"`, followed by the {{domxref("HTMLAnchorElement.port", "port")}} of the URL. If the URL does not have a `hostname`, this property contains an empty string, `""`. + +See {{domxref("URL.host")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlanchorelement/hostname/index.md b/files/en-us/web/api/htmlanchorelement/hostname/index.md index 79dc0ccd432d5b0..84f264e0ed0b38b 100644 --- a/files/en-us/web/api/htmlanchorelement/hostname/index.md +++ b/files/en-us/web/api/htmlanchorelement/hostname/index.md @@ -8,8 +8,9 @@ browser-compat: api.HTMLAnchorElement.hostname {{ApiRef("HTML DOM")}} -The **`HTMLAnchorElement.hostname`** property is a -string containing the domain of the URL. +The **`hostname`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing either the {{glossary("domain name")}} or {{glossary("IP address")}} of the `` element's `href`. If the URL does not have a hostname, this property contains an empty string, `""`. IPv4 and IPv6 addresses are normalized, such as stripping leading zeros, and domain names are converted to [IDN](https://en.wikipedia.org/wiki/Internationalized_domain_name). + +See {{domxref("URL.hostname")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlanchorelement/origin/index.md b/files/en-us/web/api/htmlanchorelement/origin/index.md index d560d27fc2edfac..2777a7799272462 100644 --- a/files/en-us/web/api/htmlanchorelement/origin/index.md +++ b/files/en-us/web/api/htmlanchorelement/origin/index.md @@ -8,21 +8,17 @@ browser-compat: api.HTMLAnchorElement.origin {{APIRef("HTML DOM")}} -The -**`HTMLAnchorElement.origin`** read-only property is a -string containing the Unicode serialization of the origin of the -represented URL. - -That is: - -- for URL using the `http` or `https`, the scheme followed by - `'://'`, followed by the domain, followed by `':'`, followed by - the port (the default port, `80` and `443` respectively, if - explicitly specified); -- for URL using `file:` scheme, the value is browser dependent; -- for URL using the `blob:` scheme, the origin of the URL following - `blob:`. E.g. `"blob:https://mozilla.org"` will have - `"https://mozilla.org".` +The **`origin`** read-only property of the {{domxref("HTMLAnchorElement")}} interface returns a string containing the Unicode serialization of the origin of the `` element's `href`. + +The exact structure varies depending on the type of URL: + +- For URLs using the `ftp:`, `http:`, `https:`, `ws:`, and `wss:` schemes, the {{domxref("HTMLAnchorElement.protocol", "protocol")}} followed by `//`, followed by the {{domxref("HTMLAnchorElement.host", "host")}}. Same as `host`, the {{domxref("HTMLAnchorElement.port", "port")}} is only included if it's not the default for the protocol. +- For URLs using `file:` scheme, the value is browser dependent. +- For URLs using the `blob:` scheme, the origin of the URL following `blob:`, but only if that URL uses the `http:`, `https:`, or `file:` scheme. For example, `blob:https://mozilla.org` will have `https://mozilla.org`. + +For all other cases, the string `"null"` is returned. + +See {{domxref("URL.origin")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlanchorelement/password/index.md b/files/en-us/web/api/htmlanchorelement/password/index.md index 22bbb82927bd7d6..e812fa0bc6a5dd7 100644 --- a/files/en-us/web/api/htmlanchorelement/password/index.md +++ b/files/en-us/web/api/htmlanchorelement/password/index.md @@ -8,12 +8,13 @@ browser-compat: api.HTMLAnchorElement.password {{ApiRef("HTML DOM")}} -The **`HTMLAnchorElement.password`** property is a -string containing the password specified before the domain name. +The **`password`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the password component of the `` element's `href`. If the URL does not have a password, this property contains an empty string, `""`. -If it is set without first setting the -[`username`](/en-US/docs/Web/API/HTMLAnchorElement/username) -property, it silently fails. +This property can be set to change the password of the URL. If the URL has no {{domxref("HTMLAnchorElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect. + +The password is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. + +See {{domxref("URL.password")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlanchorelement/port/index.md b/files/en-us/web/api/htmlanchorelement/port/index.md index aed679bcd1a47c1..6b0bed38042d727 100644 --- a/files/en-us/web/api/htmlanchorelement/port/index.md +++ b/files/en-us/web/api/htmlanchorelement/port/index.md @@ -8,10 +8,11 @@ browser-compat: api.HTMLAnchorElement.port {{ApiRef("HTML DOM")}} -The **`port`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the port number of the URL, or the empty string if the port is the default for the protocol. +The **`port`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the port number of the `` element's `href`. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`. -> [!NOTE] -> If the {{domxref("HTMLAnchorElement")}} object refers to a URL that doesn't contain an explicit port number (e.g., `https://localhost`) or contains a port number that's the default port number corresponding to the protocol part of the URL (e.g., `https://localhost:443`), then the `port` property will be the empty string: `''`. +This property can be set to change the port of the URL. If the URL has no {{domxref("HTMLAnchorElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect. It also silently ignores invalid port numbers. + +See {{domxref("URL.port")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlanchorelement/protocol/index.md b/files/en-us/web/api/htmlanchorelement/protocol/index.md index 7db2ae8759dc5a7..da8203f85c3c17c 100644 --- a/files/en-us/web/api/htmlanchorelement/protocol/index.md +++ b/files/en-us/web/api/htmlanchorelement/protocol/index.md @@ -8,10 +8,11 @@ browser-compat: api.HTMLAnchorElement.protocol {{ApiRef("HTML DOM")}} -The -**`HTMLAnchorElement.protocol`** -property is a string representing the protocol scheme of the URL, -including the final `':'`. +The **`protocol`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the protocol or scheme of the `` element's `href`, including the final `":"`. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`. + +This property can be set to change the protocol of the URL. A `":"` is appended to the provided string if not provided. The provided scheme has to be compatible with the rest of the URL to be considered valid. + +See {{domxref("URL.protocol")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlanchorelement/search/index.md b/files/en-us/web/api/htmlanchorelement/search/index.md index 87bbe85cad04cc1..b1b582f11961166 100644 --- a/files/en-us/web/api/htmlanchorelement/search/index.md +++ b/files/en-us/web/api/htmlanchorelement/search/index.md @@ -8,9 +8,11 @@ browser-compat: api.HTMLAnchorElement.search {{ApiRef("HTML DOM")}} -The **`HTMLAnchorElement.search`** property is a search -string, also called a _query string_, that is a string containing -a `'?'` followed by the parameters of the URL. +The **`search`** property of the {{domxref("HTMLAnchorElement")}} interface is a search string, also called a _query string_, that is a string containing a `"?"` followed by the parameters of the `` element's `href`. If the URL does not have a search query, this property contains an empty string, `""`. + +This property can be set to change the query string of the URL. When setting, a single `"?"` prefix is added to the provided value, if not already present. Setting it to `""` removes the query string. + +The query is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. Modern browsers provide [`URLSearchParams`](/en-US/docs/Web/API/URLSearchParams/get#examples) @@ -18,6 +20,8 @@ and [`URL.searchParams`](/en-US/docs/Web/API/URL/searchParams#examples) to make it easy to parse out the parameters from the query string. +See {{domxref("URL.search")}} for more information. + ## Value A string. diff --git a/files/en-us/web/api/htmlanchorelement/username/index.md b/files/en-us/web/api/htmlanchorelement/username/index.md index 1e922b7d266069e..8e8c8718f2a04b7 100644 --- a/files/en-us/web/api/htmlanchorelement/username/index.md +++ b/files/en-us/web/api/htmlanchorelement/username/index.md @@ -8,8 +8,13 @@ browser-compat: api.HTMLAnchorElement.username {{ApiRef("HTML DOM")}} -The **`HTMLAnchorElement.username`** property is a -string containing the username specified before the domain name. +The **`username`** property of the {{domxref("HTMLAnchorElement")}} interface is a string containing the username component of the `` element's `href`. If the URL does not have a username, this property contains an empty string, `""`. + +This property can be set to change the username of the URL. If the URL has no {{domxref("HTMLAnchorElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect. + +The username is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. + +See {{domxref("URL.username")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlareaelement/hash/index.md b/files/en-us/web/api/htmlareaelement/hash/index.md index c99b863596e455f..df0e357ffd11943 100644 --- a/files/en-us/web/api/htmlareaelement/hash/index.md +++ b/files/en-us/web/api/htmlareaelement/hash/index.md @@ -8,9 +8,9 @@ browser-compat: api.HTMLAreaElement.hash {{ APIRef("HTML DOM") }} -The **`HTMLAreaElement.hash`** property returns a string containing a `'#'` followed by the fragment identifier of the URL. +The **`hash`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing a `"#"` followed by the fragment identifier of the `` element's `href`. If the URL does not have a fragment identifier, this property contains an empty string, `""`. -The fragment is not {{Glossary("Percent-encoding", "percent-encoded")}}. If the URL does not have a fragment identifier, this property contains an empty string, `""`. +See {{domxref("URL.hash")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlareaelement/host/index.md b/files/en-us/web/api/htmlareaelement/host/index.md index 5a2a8b2e023dcd4..3e118441eb8011a 100644 --- a/files/en-us/web/api/htmlareaelement/host/index.md +++ b/files/en-us/web/api/htmlareaelement/host/index.md @@ -8,10 +8,9 @@ browser-compat: api.HTMLAreaElement.host {{ApiRef("HTML DOM")}} -The **`HTMLAreaElement.host`** property is a -string containing the host, that is the _hostname_, and then, -if the _port_ of the URL is nonempty, a `':'`, and the _port_ -of the URL. +The **`host`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the host, which is the {{domxref("HTMLAreaElement.hostname", "hostname")}}, and then, if the {{glossary("port")}} of the URL is nonempty, a `":"`, followed by the {{domxref("HTMLAreaElement.port", "port")}} of the URL. If the URL does not have a `hostname`, this property contains an empty string, `""`. + +See {{domxref("URL.host")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlareaelement/hostname/index.md b/files/en-us/web/api/htmlareaelement/hostname/index.md index b85c3b8ff6a066e..8ef1de461dd9d65 100644 --- a/files/en-us/web/api/htmlareaelement/hostname/index.md +++ b/files/en-us/web/api/htmlareaelement/hostname/index.md @@ -8,7 +8,9 @@ browser-compat: api.HTMLAreaElement.hostname {{ApiRef("HTML DOM")}} -The **`HTMLAreaElement.hostname`** property is a string containing the domain of the URL. +The **`hostname`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing either the {{glossary("domain name")}} or {{glossary("IP address")}} of the `` element's URL. If the URL does not have a hostname, this property contains an empty string, `""`. IPv4 and IPv6 addresses are normalized, such as stripping leading zeros, and domain names are converted to [IDN](https://en.wikipedia.org/wiki/Internationalized_domain_name). + +See {{domxref("URL.hostname")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlareaelement/origin/index.md b/files/en-us/web/api/htmlareaelement/origin/index.md index 8f004d3a473cb3a..1b6a982544893d8 100644 --- a/files/en-us/web/api/htmlareaelement/origin/index.md +++ b/files/en-us/web/api/htmlareaelement/origin/index.md @@ -8,21 +8,17 @@ browser-compat: api.HTMLAreaElement.origin {{APIRef("HTML DOM")}} -The -**`HTMLAreaElement.origin`** read-only property is a -string containing the Unicode serialization of the origin of the -represented URL. - -That is: - -- for URL using the `http` or `https`, the scheme followed by - `'://'`, followed by the domain, followed by `':'`, followed by - the port (the default port, `80` and `443` respectively, if - explicitly specified); -- for URL using `file:` scheme, the value is browser dependent; -- for URL using the `blob:` scheme, the origin of the URL following - `blob:`. E.g. `"blob:https://mozilla.org"` will have - `"https://mozilla.org".` +The **`origin`** read-only property of the {{domxref("HTMLAreaElement")}} interface returns a string containing the Unicode serialization of the origin of the `` element's `href`. + +The exact structure varies depending on the type of URL: + +- For URLs using the `ftp:`, `http:`, `https:`, `ws:`, and `wss:` schemes, the {{domxref("HTMLAnchorElement.protocol", "protocol")}} followed by `//`, followed by the {{domxref("HTMLAnchorElement.host", "host")}}. Same as `host`, the {{domxref("HTMLAnchorElement.port", "port")}} is only included if it's not the default for the protocol. +- For URLs using `file:` scheme, the value is browser dependent. +- For URLs using the `blob:` scheme, the origin of the URL following `blob:`, but only if that URL uses the `http:`, `https:`, or `file:` scheme. For example, `blob:https://mozilla.org` will have `https://mozilla.org`. + +For all other cases, the string `"null"` is returned. + +See {{domxref("URL.origin")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlareaelement/password/index.md b/files/en-us/web/api/htmlareaelement/password/index.md index 168571a1f1c8ac8..ec76187d8d614b1 100644 --- a/files/en-us/web/api/htmlareaelement/password/index.md +++ b/files/en-us/web/api/htmlareaelement/password/index.md @@ -8,12 +8,13 @@ browser-compat: api.HTMLAreaElement.password {{ApiRef("HTML DOM")}} -The **`HTMLAreaElement.password`** property is a -string containing the password specified before the domain name. +The **`password`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the password component of the `` element's `href`. If the URL does not have a password, this property contains an empty string, `""`. -If it is set without first setting the -[`username`](/en-US/docs/Web/API/HTMLAreaElement/username) -property, it silently fails. +This property can be set to change the password of the URL. If the URL has no {{domxref("HTMLAreaElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect. + +The password is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. + +See {{domxref("URL.password")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlareaelement/pathname/index.md b/files/en-us/web/api/htmlareaelement/pathname/index.md index 354d90151a5dfe4..eeb51a4ba59cbfe 100644 --- a/files/en-us/web/api/htmlareaelement/pathname/index.md +++ b/files/en-us/web/api/htmlareaelement/pathname/index.md @@ -13,6 +13,8 @@ string containing an initial `'/'` followed by the path of the URL not including the query string or fragment (or the empty string if there is no path). +The pathname is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when read. + ## Value A string. diff --git a/files/en-us/web/api/htmlareaelement/port/index.md b/files/en-us/web/api/htmlareaelement/port/index.md index ee4a631f87c5b59..5426e70500141d8 100644 --- a/files/en-us/web/api/htmlareaelement/port/index.md +++ b/files/en-us/web/api/htmlareaelement/port/index.md @@ -8,10 +8,11 @@ browser-compat: api.HTMLAreaElement.port {{ApiRef("HTML DOM")}} -The **`port`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the port number of the URL, or the empty string if the port is the default for the protocol. +The **`port`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the port number of the `` element's `href`. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`. -> [!NOTE] -> If the {{domxref("HTMLAreaElement")}} object refers to a URL that doesn't contain an explicit port number (e.g., `https://localhost`) or contains a port number that's the default port number corresponding to the protocol part of the URL (e.g., `https://localhost:443`), then the `port` property will be the empty string: `''`. +This property can be set to change the port of the URL. If the URL has no {{domxref("HTMLAnchorElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect. It also silently ignores invalid port numbers. + +See {{domxref("URL.port")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlareaelement/protocol/index.md b/files/en-us/web/api/htmlareaelement/protocol/index.md index 8692885ed81aadd..492665973290fc0 100644 --- a/files/en-us/web/api/htmlareaelement/protocol/index.md +++ b/files/en-us/web/api/htmlareaelement/protocol/index.md @@ -8,10 +8,11 @@ browser-compat: api.HTMLAreaElement.protocol {{ApiRef("HTML DOM")}} -The -**`HTMLAreaElement.protocol`** -property is a string representing the protocol scheme of the URL, -including the final `':'`. +The **`protocol`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the protocol or scheme of the `` element's `href`, including the final `":"`. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`. + +This property can be set to change the protocol of the URL. A `":"` is appended to the provided string if not provided. The provided scheme has to be compatible with the rest of the URL to be considered valid. + +See {{domxref("URL.protocol")}} for more information. ## Value diff --git a/files/en-us/web/api/htmlareaelement/search/index.md b/files/en-us/web/api/htmlareaelement/search/index.md index 91a229bb0031b18..a2158578d995635 100644 --- a/files/en-us/web/api/htmlareaelement/search/index.md +++ b/files/en-us/web/api/htmlareaelement/search/index.md @@ -8,9 +8,11 @@ browser-compat: api.HTMLAreaElement.search {{ApiRef("HTML DOM")}} -The **`HTMLAreaElement.search`** property is a search -string, also called a _query string_, that is a string containing -a `'?'` followed by the parameters of the URL. +The **`search`** property of the {{domxref("HTMLAreaElement")}} interface is a search string, also called a _query string_, that is a string containing a `"?"` followed by the parameters of the `` element's `href`. If the URL does not have a search query, this property contains an empty string, `""`. + +This property can be set to change the query string of the URL. When setting, a single `"?"` prefix is added to the provided value, if not already present. Setting it to `""` removes the query string. + +The query is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. Modern browsers provide [`URLSearchParams`](/en-US/docs/Web/API/URLSearchParams/get#examples) @@ -18,6 +20,8 @@ and [`URL.searchParams`](/en-US/docs/Web/API/URL/searchParams#examples) to make it easy to parse out the parameters from the query string. +See {{domxref("URL.search")}} for more information. + ## Value A string. diff --git a/files/en-us/web/api/htmlareaelement/username/index.md b/files/en-us/web/api/htmlareaelement/username/index.md index f08eebb873d4c90..102224cf76db283 100644 --- a/files/en-us/web/api/htmlareaelement/username/index.md +++ b/files/en-us/web/api/htmlareaelement/username/index.md @@ -8,8 +8,13 @@ browser-compat: api.HTMLAreaElement.username {{ApiRef("HTML DOM")}} -The **`HTMLAreaElement.username`** property is a -string containing the username specified before the domain name. +The **`username`** property of the {{domxref("HTMLAreaElement")}} interface is a string containing the username component of the `` element's `href`. If the URL does not have a username, this property contains an empty string, `""`. + +This property can be set to change the username of the URL. If the URL has no {{domxref("HTMLAreaElement.host", "host")}} or its scheme is `file:`, then setting this property has no effect. + +The username is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. + +See {{domxref("URL.username")}} for more information. ## Value diff --git a/files/en-us/web/api/htmldialogelement/showmodal/index.md b/files/en-us/web/api/htmldialogelement/showmodal/index.md index fa1192568e1edcb..7af071fd8a80c9c 100644 --- a/files/en-us/web/api/htmldialogelement/showmodal/index.md +++ b/files/en-us/web/api/htmldialogelement/showmodal/index.md @@ -11,8 +11,7 @@ browser-compat: api.HTMLDialogElement.showModal The **`showModal()`** method of the {{domxref("HTMLDialogElement")}} interface displays the dialog as a modal, over the top of any other dialogs that might be present. It displays in the {{glossary("top layer")}}, along with a -{{cssxref('::backdrop')}} pseudo-element. Interaction outside the dialog is blocked and -the content outside it is rendered inert. +{{cssxref('::backdrop')}} pseudo-element. Elements inside the same document as the dialog, except the dialog and its descendants, become _inert_ (as if the [`inert`](/en-US/docs/Web/HTML/Global_attributes/inert) attribute is specified). Only the containing document becomes blocked; if the dialog is rendered inside an iframe, the rest of the page remains interactive. ## Syntax diff --git a/files/en-us/web/api/htmlelement/inert/index.md b/files/en-us/web/api/htmlelement/inert/index.md index 54729e820fa5cf2..9cbc1215f16e879 100644 --- a/files/en-us/web/api/htmlelement/inert/index.md +++ b/files/en-us/web/api/htmlelement/inert/index.md @@ -10,8 +10,7 @@ browser-compat: api.HTMLElement.inert The {{domxref("HTMLElement")}} property **`inert`** reflects the value of the element's [`inert`](/en-US/docs/Web/HTML/Global_attributes/inert) attribute. It is a boolean value that, when present, makes the browser "ignore" user input events for the element, including focus events and events from assistive technologies. The browser may also ignore page search and text selection in the element. This can be useful when building UIs such as modals where you would want to "trap" the focus inside the modal when it's visible. -> [!NOTE] -> Do not nest interactive elements or important content within elements with the `inert` attribute as inert content and their descendants are neither focusable nor perceivable by all users. +Note that if the `inert` attribute is unspecified, the element itself may still inherit inertness from its parent. However, that inherited inertness is not reflected by this property's value. ## Value diff --git a/files/en-us/web/api/htmlelement/lang/index.md b/files/en-us/web/api/htmlelement/lang/index.md index 141f3f2ea3b765f..78059142c268e97 100644 --- a/files/en-us/web/api/htmlelement/lang/index.md +++ b/files/en-us/web/api/htmlelement/lang/index.md @@ -8,21 +8,13 @@ browser-compat: api.HTMLElement.lang {{ APIRef("HTML DOM") }} -The **`HTMLElement.lang`** property gets or sets the base -language of an element's attribute values and text content. +The **`lang`** property of the {{domxref("HTMLElement")}} interface indicates the base language of an element's attribute values and text content, in the form of a {{RFC(5646, "BCP 47 language identifier tag")}}. It reflects the element's [`lang`](/en-US/docs/Web/HTML/Global_attributes/lang) attribute; the `xml:lang` attribute does not affect this property. -The language code returned by this property is defined in {{RFC(5646, "Tags for Identifying Languages (also known as BCP 47)")}}. -Common examples include "en" for English, "ja" for -Japanese, "es" for Spanish and so on. The default value of this attribute is -`unknown`. Note that this attribute, though valid at the individual element -level described here, is most often specified for the root element of the document. - -This also only works with the `lang` attribute and not with -`xml:lang`. +Note that if the `lang` attribute is unspecified, the element itself may still inherit the language from its parent. However, that inherited language is not reflected by this property's value. ## Value -A string. +A string. Common examples include "en" for English, "ja" for Japanese, "es" for Spanish and so on. If unspecified, the value is an empty string. ## Examples diff --git a/files/en-us/web/api/location/hash/index.md b/files/en-us/web/api/location/hash/index.md index bc65ae59d99a7ee..70a4eee5ba8b443 100644 --- a/files/en-us/web/api/location/hash/index.md +++ b/files/en-us/web/api/location/hash/index.md @@ -8,9 +8,9 @@ browser-compat: api.Location.hash {{ APIRef("Location") }} -The **`hash`** property of the {{domxref("Location")}} interface returns a string containing a `'#'` followed by the fragment identifier of the URL — the ID on the page that the URL is trying to target. +The **`hash`** property of the {{domxref("Location")}} interface is a string containing a `"#"` followed by the fragment identifier of the location URL. If the URL does not have a fragment identifier, this property contains an empty string, `""`. -The fragment is not {{Glossary("Percent-encoding", "percent-encoded")}}. If the URL does not have a fragment identifier, this property contains an empty string, `""`. +See {{domxref("URL.hash")}} for more information. ## Value diff --git a/files/en-us/web/api/location/host/index.md b/files/en-us/web/api/location/host/index.md index 410a53bbf0a4d0d..ec9bb7afccf7a15 100644 --- a/files/en-us/web/api/location/host/index.md +++ b/files/en-us/web/api/location/host/index.md @@ -8,10 +8,9 @@ browser-compat: api.Location.host {{ApiRef("Location")}} -The **`host`** property of the {{domxref("Location")}} -interface is a string containing the host, that is the -_hostname_, and then, if the _port_ of the URL is nonempty, a -`':'`, and the _port_ of the URL. +The **`host`** property of the {{domxref("Location")}} interface is a string containing the host, which is the {{domxref("Location.hostname", "hostname")}}, and then, if the {{glossary("port")}} of the URL is nonempty, a `":"`, followed by the {{domxref("Location.port", "port")}} of the URL. If the URL does not have a `hostname`, this property contains an empty string, `""`. + +See {{domxref("URL.host")}} for more information. ## Value diff --git a/files/en-us/web/api/location/hostname/index.md b/files/en-us/web/api/location/hostname/index.md index ab43ba36115e618..ef01a9f5f72288b 100644 --- a/files/en-us/web/api/location/hostname/index.md +++ b/files/en-us/web/api/location/hostname/index.md @@ -8,8 +8,9 @@ browser-compat: api.Location.hostname {{ApiRef("URL API")}} -The **`hostname`** property of the {{domxref("Location")}} -interface is a string containing the {{glossary("domain name")}} of the URL. +The **`hostname`** property of the {{domxref("Location")}} interface is a string containing either the {{glossary("domain name")}} or {{glossary("IP address")}} of the location URL. If the URL does not have a hostname, this property contains an empty string, `""`. IPv4 and IPv6 addresses are normalized, such as stripping leading zeros, and domain names are converted to [IDN](https://en.wikipedia.org/wiki/Internationalized_domain_name). + +See {{domxref("URL.hostname")}} for more information. ## Value diff --git a/files/en-us/web/api/location/origin/index.md b/files/en-us/web/api/location/origin/index.md index 018c40b207e7df8..4290cf9a7a84b93 100644 --- a/files/en-us/web/api/location/origin/index.md +++ b/files/en-us/web/api/location/origin/index.md @@ -8,13 +8,17 @@ browser-compat: api.Location.origin {{APIRef("Location")}} {{AvailableInWorkers}} -The **`origin`** read-only property of the {{domxref("Location")}} interface is a string containing the Unicode serialization of the origin of the represented URL. +The **`origin`** read-only property of the {{domxref("Location")}} interface returns a string containing the Unicode serialization of the origin of the location's URL. The exact structure varies depending on the type of URL: -- For URL using the `http:` or `https:` schemes, the scheme followed by `//`, followed by the domain, followed by `:`, followed by the port (the default port, `80` and `443` respectively, if explicitly specified). -- For URL using `file:` scheme, the value is browser dependent. -- For URL using the `blob:` scheme, the origin of the URL following `blob:`. For example, `blob:https://mozilla.org` will have `https://mozilla.org`. +- For URLs using the `ftp:`, `http:`, `https:`, `ws:`, and `wss:` schemes, the {{domxref("Location.protocol", "protocol")}} followed by `//`, followed by the {{domxref("Location.host", "host")}}. Same as `host`, the {{domxref("Location.port", "port")}} is only included if it's not the default for the protocol. +- For URLs using `file:` scheme, the value is browser dependent. +- For URLs using the `blob:` scheme, the origin of the URL following `blob:`, but only if that URL uses the `http:`, `https:`, or `file:` scheme. For example, `blob:https://mozilla.org` will have `https://mozilla.org`. + +For all other cases, the string `"null"` is returned. + +See {{domxref("URL.origin")}} for more information. ## Value diff --git a/files/en-us/web/api/location/port/index.md b/files/en-us/web/api/location/port/index.md index ceb39684e334ba6..1df04697a9a42b3 100644 --- a/files/en-us/web/api/location/port/index.md +++ b/files/en-us/web/api/location/port/index.md @@ -8,10 +8,11 @@ browser-compat: api.Location.port {{ApiRef("Location")}} -The **`port`** property of the {{domxref("Location")}} interface is a string containing the port number of the URL, or the empty string if the port is the default for the protocol. +The **`port`** property of the {{domxref("Location")}} interface is a string containing the port number of the location's URL. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`. -> [!NOTE] -> If the {{domxref("Location")}} object refers to a URL that doesn't contain an explicit port number (e.g., `https://localhost`) or contains a port number that's the default port number corresponding to the protocol part of the URL (e.g., `https://localhost:443`), then the `port` property will be the empty string: `''`. +This property can be set to change the port of the URL. If the URL has no {{domxref("Location.host", "host")}} or its scheme is `file:`, then setting this property has no effect. It also silently ignores invalid port numbers. + +See {{domxref("URL.port")}} for more information. ## Value diff --git a/files/en-us/web/api/location/protocol/index.md b/files/en-us/web/api/location/protocol/index.md index a68052d7064a930..dc8c198aaac87f0 100644 --- a/files/en-us/web/api/location/protocol/index.md +++ b/files/en-us/web/api/location/protocol/index.md @@ -8,9 +8,11 @@ browser-compat: api.Location.protocol {{ApiRef("Location")}} -The **`protocol`** property of the {{domxref("Location")}} -interface is a string representing the protocol scheme of the URL, -including the final `':'`. +The **`protocol`** property of the {{domxref("Location")}} interface is a string containing the protocol or scheme of the location's URL, including the final `":"`. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`. + +This property can be set to change the protocol of the URL. A `":"` is appended to the provided string if not provided. The provided scheme has to be compatible with the rest of the URL to be considered valid. + +See {{domxref("URL.protocol")}} for more information. ## Value diff --git a/files/en-us/web/api/location/search/index.md b/files/en-us/web/api/location/search/index.md index 76cc1c5fba7c947..b881d5994991567 100644 --- a/files/en-us/web/api/location/search/index.md +++ b/files/en-us/web/api/location/search/index.md @@ -8,10 +8,11 @@ browser-compat: api.Location.search {{ApiRef("Location")}} -The **`search`** property of the {{domxref("Location")}} -interface is a search string, also called a _query string_; that is, a -string containing a `'?'` followed by the parameters of the -URL. +The **`search`** property of the {{domxref("Location")}} interface is a search string, also called a _query string_, that is a string containing a `"?"` followed by the parameters of the location's URL. If the URL does not have a search query, this property contains an empty string, `""`. + +This property can be set to change the query string of the URL. When setting, a single `"?"` prefix is added to the provided value, if not already present. Setting it to `""` removes the query string. + +The query is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. Modern browsers provide [`URLSearchParams`](/en-US/docs/Web/API/URLSearchParams/get#examples) @@ -19,6 +20,8 @@ and [`URL.searchParams`](/en-US/docs/Web/API/URL/searchParams#examples) to make it easy to parse out the parameters from the querystring. +See {{domxref("URL.search")}} for more information. + ## Value A string. diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/active/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/active/index.md new file mode 100644 index 000000000000000..d76c065838540f8 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/active/index.md @@ -0,0 +1,26 @@ +--- +title: "RTCOutboundRtpStreamStats: active property" +short-title: active +slug: Web/API/RTCOutboundRtpStreamStats/active +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.active +--- + +{{APIRef("WebRTC")}} + +The **`active`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary is a boolean that indicates whether this RTP stream is configured to be sent, or is disabled. + +For example, this would be be `false` if the track corresponding to the the stream had its {{domxref("MediaStreamTrack.enabled")}} property set to `false`. +Note that an active stream may still not be sending if, for example, the stream is limited by network conditions. + +## Value + +`true` if the stream is enabled for sending, `false` otherwise. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/averagertcpinterval/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/averagertcpinterval/index.md deleted file mode 100644 index f44dc78b4ac87ab..000000000000000 --- a/files/en-us/web/api/rtcoutboundrtpstreamstats/averagertcpinterval/index.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: "RTCOutboundRtpStreamStats: averageRtcpInterval property" -short-title: averageRtcpInterval -slug: Web/API/RTCOutboundRtpStreamStats/averageRtcpInterval -page-type: web-api-instance-property -browser-compat: api.RTCOutboundRtpStreamStats.averageRtcpInterval ---- - -{{APIRef("WebRTC")}} - -The **`averageRtcpInterval`** property -of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary is a floating-point value -indicating the average time that should pass between transmissions of -{{Glossary("RTCP")}} packets on this stream. - -## Value - -A floating-point value indicating the average interval, in seconds, between -transmissions of RTCP packets. This interval is computed following the formula outlined -in {{RFC(1889, "A.7")}}. - -Because the interval's value is determined in part by the number of active senders, it -will be different for each user of a service. Since this value is also used to determine -the number of seconds after a stream starts to flow before the first RTCP packet should -be sent, the result is that if many users try to start using the service at the same -time, the server won't be flooded with RTCP packets coming in all at once. - -The sending endpoint computes this value when sending compound RTCP packets, which must -contain at least an RTCP RR or SR packet and an SDES packet with the CNAME item. - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/bytessent/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/bytessent/index.md new file mode 100644 index 000000000000000..a8f419668955975 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/bytessent/index.md @@ -0,0 +1,26 @@ +--- +title: "RTCOutboundRtpStreamStats: bytesSent property" +short-title: bytesSent +slug: Web/API/RTCOutboundRtpStreamStats/bytesSent +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.bytesSent +--- + +{{APIRef("WebRTC")}} + +The **`bytesSent`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary indicates the total number of payload bytes sent on this stream ({{domxref("RTCDataChannel")}}). + +The value includes bytes in retransmitted payload bytes. +It does not include headers or padding. + +## Value + +A positive integer. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/frameheight/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/frameheight/index.md new file mode 100644 index 000000000000000..192754546b7643b --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/frameheight/index.md @@ -0,0 +1,28 @@ +--- +title: "RTCOutboundRtpStreamStats: frameHeight property" +short-title: frameHeight +slug: Web/API/RTCOutboundRtpStreamStats/frameHeight +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.frameHeight +--- + +{{APIRef("WebRTC")}} + +The **`frameHeight`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary is a positive integer that indicates the height of the last encoded frame, in pixels. + +Note that the resolution of the encoded frame may be lower than that of the media source, which is provided in {{domxref("RTCVideoSourceStats.height")}}. + +> [!NOTE] +> The property is undefined for audio streams, and before the first frame is encoded. + +## Value + +A positive integer. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/framespersecond/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/framespersecond/index.md new file mode 100644 index 000000000000000..8bb94c82e50365f --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/framespersecond/index.md @@ -0,0 +1,28 @@ +--- +title: "RTCOutboundRtpStreamStats: framesPerSecond property" +short-title: framesPerSecond +slug: Web/API/RTCOutboundRtpStreamStats/framesPerSecond +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.framesPerSecond +--- + +{{APIRef("WebRTC")}} + +The **`framesPerSecond`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary indicates the number of encoded frames sent in the last second. + +Note that this may be lower than the media source frame rate, which is provided in {{domxref("RTCVideoSourceStats.framesPerSecond")}}. + +> [!NOTE] +> The value does not exist for audio, or before the first second of encoding. + +## Value + +A positive number. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/framessent/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/framessent/index.md new file mode 100644 index 000000000000000..eb9004bf413c91a --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/framessent/index.md @@ -0,0 +1,28 @@ +--- +title: "RTCOutboundRtpStreamStats: framesSent property" +short-title: framesSent +slug: Web/API/RTCOutboundRtpStreamStats/framesSent +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.framesSent +--- + +{{APIRef("WebRTC")}} + +The **`framesSent`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary indicates the total number of encoded frames sent on this RTP stream over its lifetime. + +Note that this may be lower than the total number of media source frames, which is provided in {{domxref("RTCVideoSourceStats.frames")}}. + +> [!NOTE] +> The value does not exist for audio. + +## Value + +A positive number. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/framewidth/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/framewidth/index.md new file mode 100644 index 000000000000000..37303741b5d9c13 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/framewidth/index.md @@ -0,0 +1,28 @@ +--- +title: "RTCOutboundRtpStreamStats: frameWidth property" +short-title: frameWidth +slug: Web/API/RTCOutboundRtpStreamStats/frameWidth +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.frameWidth +--- + +{{APIRef("WebRTC")}} + +The **`frameWidth`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary is a positive integer that indicates the width of the last encoded frame, in pixels. + +Note that the resolution of the encoded frame may be lower than that of the media source, which is provided in {{domxref("RTCVideoSourceStats.width")}}. + +> [!NOTE] +> The value does not exist for audio, or before the first frame is encoded. + +## Value + +A positive integer. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/headerbytessent/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/headerbytessent/index.md new file mode 100644 index 000000000000000..961d04c9e180d7f --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/headerbytessent/index.md @@ -0,0 +1,25 @@ +--- +title: "RTCOutboundRtpStreamStats: headerBytesSent property" +short-title: headerBytesSent +slug: Web/API/RTCOutboundRtpStreamStats/headerBytesSent +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.headerBytesSent +--- + +{{APIRef("WebRTC")}} + +The **`headerBytesSent`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary indicates the total number of RTP header and padding bytes sent for this [synchronization source (SSRC)](/en-US/docs/Web/API/RTCOutboundRtpStreamStats/ssrc). + +Note that the total number of bytes sent as payload over the transport is equal to: `headerBytesSent` + {{domxref("RTCOutboundRtpStreamStats.bytesSent","bytesSent")}}. + +## Value + +A positive integer. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/index.md index a9ca25b1da57859..595da4f6715e6ce 100644 --- a/files/en-us/web/api/rtcoutboundrtpstreamstats/index.md +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/index.md @@ -13,45 +13,78 @@ The statistics can be obtained by iterating the {{domxref("RTCStatsReport")}} re ## Instance properties -- {{domxref("RTCOutboundRtpStreamStats.averageRtcpInterval", "averageRtcpInterval")}} - - : A floating-point value indicating the average {{Glossary("RTCP")}} interval between two consecutive compound RTCP packets. +- {{domxref("RTCOutboundRtpStreamStats.active", "active")}} + - : A boolean that indicates whether this RTP stream is configured to be sent, or is disabled. +- {{domxref("RTCOutboundRtpStreamStats.frameHeight", "frameHeight")}} + - : An integer indicating the height of the last encoded frame, in pixels. + _Undefined for audio streams._ +- {{domxref("RTCOutboundRtpStreamStats.frameWidth", "frameWidth")}} + - : An integer indicating the width of the last encoded frame, in pixels. + _Undefined for audio streams._ - {{domxref("RTCOutboundRtpStreamStats.framesEncoded", "framesEncoded")}} - - : The number of frames that have been successfully encoded so far for sending on this RTP stream. _Only valid for video streams._ -- {{domxref("RTCOutboundRtpStreamStats.perDscpPacketsSent", "perDscpPacketsSent")}} - - : A record of key-value pairs with strings as the keys mapped to 32-bit integer values, each indicating the total number of packets this `RTCRtpSender` has transmitted for this source for each Differentiated Services Code Point (DSCP). + - : The number of frames that have been successfully encoded so far for sending on this RTP stream. + _Undefined for audio streams._ +- {{domxref("RTCOutboundRtpStreamStats.framesPerSecond", "framesPerSecond")}} + - : A number that represents the encoded frames sent in the last second. + _Undefined for audio streams._ +- {{domxref("RTCOutboundRtpStreamStats.framesSent", "framesSent")}} + - : A positive integer that represents the total number of encoded frames sent on this RTP stream. + _Undefined for audio streams._ +- {{domxref("RTCOutboundRtpStreamStats.headerBytesSent", "headerBytesSent")}} + - : A positive integer that represents the total number of RTP header and padding bytes sent for this SSRC. +- {{domxref("RTCOutboundRtpStreamStats.keyFramesEncoded", "keyFramesEncoded")}} + - : A positive integer that represents the total number of key frames successfully encoded in this RTP media stream. + _Undefined for audio streams._ +- {{domxref("RTCOutboundRtpStreamStats.mediaSourceId", "mediaSourceId")}} + - : A string that represents the id of the stats object of the track currently attached to the sender of this stream. +- {{domxref("RTCOutboundRtpStreamStats.mid", "mid")}} + - : A string that uniquely identifies the pairing of source and destination of the transceiver's stream. + This is the value of the corresponding {{domxref("RTCRtpTransceiver.mid")}} unless that is null, in which case the statistic property is not present. +- {{domxref("RTCOutboundRtpStreamStats.nackCount", "nackCount")}} + - : An integer value indicating the total number of Negative ACKnowledgement (NACK) packets this `RTCRtpSender` has received from the remote {{domxref("RTCRtpReceiver")}}. + This locally-computed value provides an indication of the error resiliency of the connection. +- {{domxref("RTCOutboundRtpStreamStats.qpSum", "qpSum")}} + - : A 64-bit value containing the sum of the QP values for every frame encoded by this {{domxref("RTCRtpSender")}}. + This locally-computed value provides an indication of how heavily compressed the data is. + _Undefined for audio streams._ - {{domxref("RTCOutboundRtpStreamStats.qualityLimitationDurations", "qualityLimitationDurations")}} {{experimental_inline}} - - : A record mapping each of the quality limitation reasons in the {{domxref("RTCRemoteInboundRtpStreamStats")}} enumeration to a floating-point value indicating the number of seconds the stream has spent with its quality limited for that reason. + - : A map of the reasons that a media stream's resolution or framerate has been reduced, and the time that the quality was reduced for each reason. + _Undefined for audio streams._ - {{domxref("RTCOutboundRtpStreamStats.qualityLimitationReason", "qualityLimitationReason")}} {{experimental_inline}} - - : One of the string `none`, `cpu`, `bandwidth`, or `other`, explaining why the resolution and/or frame rate is being limited for this RTP stream. _Valid only for video streams_. + - : A string indicating the reason why the stream is being quality-limited. + One of: `none`, `cpu`, `bandwidth`, or `other`. + _Undefined for audio streams._ - {{domxref("RTCOutboundRtpStreamStats.remoteId", "remoteId")}} - - : A string which identifies the {{domxref("RTCRemoteInboundRtpStreamStats")}} object that provides statistics for the remote peer for this same SSRC. This ID is stable across multiple calls to `getStats()`. + - : A string which identifies the {{domxref("RTCRemoteInboundRtpStreamStats")}} object that provides statistics for the remote peer for this same SSRC. + This ID is stable across multiple calls to `getStats()`. - {{domxref("RTCOutboundRtpStreamStats.retransmittedBytesSent", "retransmittedBytesSent")}} - - : The total number of bytes that have been retransmitted for this source as of the time the statistics were sampled. These retransmitted bytes comprise the packets included in the value returned by {{domxref("RTCInboundRtpStreamStats.retransmittedPacketsSent", "retransmittedPacketsSent")}}. + - : A positive integer that represents the total number of payload bytes retransmitted for the source associated with this stream. - {{domxref("RTCOutboundRtpStreamStats.retransmittedPacketsSent", "retransmittedPacketsSent")}} - - : The total number of packets that have needed to be retransmitted for this source as of the time the statistics were sampled. These retransmitted packets are included in the value returned by {{domxref("RTCInboundRtpStreamStats.packetsSent", "packetsSent")}}. -- {{domxref("RTCOutboundRtpStreamStats.senderId", "senderId")}} - - : The {{domxref("RTCOutboundRtpStreamStats.id", "id")}} of the {{domxref("RTCAudioSenderStats")}} or {{domxref("RTCVideoSenderStats")}} object containing statistics about this stream's {{domxref("RTCRtpSender")}}. -- {{domxref("RTCOutboundRtpStreamStats.sliCount", "sliCount")}} - - : An integer indicating the number of times this sender received a Slice Loss Indication (SLI) frame from the remote peer, indicating that one or more consecutive video macroblocks have been lost or corrupted. Available only for video streams. + - : A positive integer that represents the total number of packets retransmitted for the source associated with this stream. +- {{domxref("RTCOutboundRtpStreamStats.rid", "rid")}} + - : A string that indicates the RTP stream ID for a corresponding video stream. +- {{domxref("RTCOutboundRtpStreamStats.scalabilityMode", "scalabilityMode")}} + - : A string that represents the scalability mode for the RTP stream, if one has been configured. - {{domxref("RTCOutboundRtpStreamStats.targetBitrate", "targetBitrate")}} - - : A value indicating the bit rate the `RTCRtpSender`'s codec is configured to attempt to achieve in its output media. -- {{domxref("RTCOutboundRtpStreamStats.totalEncodedBytesTarget", "totalEncodedBytesTarget")}} {{experimental_inline}} - - : A cumulative sum of the _target_ frame sizes (the targeted maximum size of the frame in bytes when the codec is asked to compress it) for all of the frames encoded so far. This will likely differ from the total of the _actual_ frame sizes. + - : A number that represents the bit rate that the `RTCRtpSender`'s codec is currently attempting to achieve for the stream. - {{domxref("RTCOutboundRtpStreamStats.totalEncodeTime", "totalEncodeTime")}} - - : A floating-point value indicating the total number of seconds that have been spent encoding the frames encoded so far by this {{domxref("RTCRtpSender")}}. -- {{domxref("RTCOutboundRtpStreamStats.trackId", "trackId")}} - - : The {{domxref("RTCOutboundRtpStreamStats.id", "id")}} of the {{domxref("RTCSenderAudioTrackAttachmentStats")}} or {{domxref("RTCSenderVideoTrackAttachmentStats")}} object containing the current track attachment to the {{domxref("RTCRtpSender")}} responsible for this stream. + - : A number that represents the total number of seconds that have been spent encoding the frames encoded for this stream {{domxref("RTCRtpSender")}}. + _Undefined for audio streams._ +- {{domxref("RTCOutboundRtpStreamStats.totalEncodedBytesTarget", "totalEncodedBytesTarget")}} {{experimental_inline}} + - : A cumulative sum of the _target_ frame sizes for all of the frames encoded so far. + This will likely differ from the total of the _actual_ frame sizes. + _Undefined for audio streams._ +- {{domxref("RTCOutboundRtpStreamStats.totalPacketSendDelay", "totalPacketSendDelay")}} + - : A number that represents the total time in seconds that packets have spent buffered locally before being transmitted. -### Local-only measurements +### Sent RTP stream statistics -These properties are computed locally, and are only available to the device receiving the media stream. -Their primary purpose is to examine the error resiliency of the connection, as they provide information about lost packets, lost frames, and how heavily compressed the data is. + -- {{domxref("RTCOutboundRtpStreamStats.nackCount", "nackCount")}} - - : An integer value indicating the total number of Negative ACKnowledgement (NACK) packets this `RTCRtpSender` has received from the remote {{domxref("RTCRtpReceiver")}}. -- {{domxref("RTCOutboundRtpStreamStats.qpSum", "qpSum")}} - - : A 64-bit value containing the sum of the QP values for every frame encoded by this {{domxref("RTCRtpSender")}}. - _Valid only for video streams._ +- {{domxref("RTCOutboundRtpStreamStats.bytesSent", "bytesSent")}} {{optional_inline}} + - : A positive integer indicating the total number of bytes sent for this SSRC, including retransmissions. +- {{domxref("RTCOutboundRtpStreamStats.packetsSent", "packetsSent")}} {{optional_inline}} + - : A positive integer indicating the total number of RTP packets sent for this SSRC, including retransmissions. ### Common RTP stream statistics diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/keyframesencoded/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/keyframesencoded/index.md new file mode 100644 index 000000000000000..dda04f416422752 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/keyframesencoded/index.md @@ -0,0 +1,29 @@ +--- +title: "RTCOutboundRtpStreamStats: keyFramesEncoded property" +short-title: keyFramesEncoded +slug: Web/API/RTCOutboundRtpStreamStats/keyFramesEncoded +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.keyFramesEncoded +--- + +{{APIRef("WebRTC")}} + +The **`keyFramesEncoded`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary represents the total number of key frames successfully encoded in this RTP media stream. +This includes, for example, key frames in VP8 ({{rfc("6386")}}) or IDR-frames in H.264 ({{rfc("6184")}}). + +Note that the number of delta frames is calculated by subtracting this value from the total number of frames ({{domxref("RTCOutboundRtpStreamStats.framesEncoded","framesEncoded")}} - `keyFramesEncoded`). + +> [!NOTE] +> The value does not exist for audio. + +## Value + +A positive integer. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/mediasourceid/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/mediasourceid/index.md new file mode 100644 index 000000000000000..89a1b9a76c64a74 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/mediasourceid/index.md @@ -0,0 +1,25 @@ +--- +title: "RTCOutboundRtpStreamStats: mediaSourceId property" +short-title: mediaSourceId +slug: Web/API/RTCOutboundRtpStreamStats/mediaSourceId +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.mediaSourceId +--- + +{{APIRef("WebRTC")}} + +The **`mediaSourceId`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary represents the ID of the statistics object of the track currently attached to the sender of this stream. + +This can then be used to obtain the corresponding {{domxref("RTCVideoSourceStats")}} or {{domxref("RTCAudioSourceStats")}}. + +## Value + +A string containing the ID of a media source statistics object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/mid/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/mid/index.md new file mode 100644 index 000000000000000..809237284a1edda --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/mid/index.md @@ -0,0 +1,24 @@ +--- +title: "RTCOutboundRtpStreamStats: mid property" +short-title: mid +slug: Web/API/RTCOutboundRtpStreamStats/mid +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.mid +--- + +{{APIRef("WebRTC")}} + +The **`mid`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary is a string that contains the media ID negotiated between the local and remote peers. +This uniquely identifies the pairing of source and destination for the transceiver's stream. + +## Value + +The value of the corresponding {{domxref("RTCRtpTransceiver.mid")}}, unless that value is null, in which case this statistic property is not present. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/packetssent/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/packetssent/index.md new file mode 100644 index 000000000000000..11bf8e5f74abb4e --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/packetssent/index.md @@ -0,0 +1,23 @@ +--- +title: "RTCOutboundRtpStreamStats: packetsSent property" +short-title: packetsSent +slug: Web/API/RTCOutboundRtpStreamStats/packetsSent +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.packetsSent +--- + +{{APIRef("WebRTC")}} + +The **`packetsSent`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary represents the total number of RTP packets sent on this stream, including retransmissions. + +## Value + +A positive integer. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/perdscppacketssent/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/perdscppacketssent/index.md deleted file mode 100644 index 70a0ea848be587d..000000000000000 --- a/files/en-us/web/api/rtcoutboundrtpstreamstats/perdscppacketssent/index.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: "RTCOutboundRtpStreamStats: perDscpPacketsSent property" -short-title: perDscpPacketsSent -slug: Web/API/RTCOutboundRtpStreamStats/perDscpPacketsSent -page-type: web-api-instance-property -browser-compat: api.RTCOutboundRtpStreamStats.perDscpPacketsSent ---- - -{{APIRef("WebRTC")}} - -The **`perDscpPacketsSent`** property -of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary is a record comprised of -key/value pairs in which each key is a string representation of a Differentiated -Services Code Point and the value is the number of packets sent for that DCSP. - -> [!NOTE] -> Not all operating systems make data available on a per-DSCP -> basis, so this property shouldn't be relied upon on those systems. - -## Value - -A record comprised of string/value pairs. Each key is the string representation of a -single Differentiated Services Code Point (DSCP)'s ID number. - -> [!NOTE] -> Due to network bleaching and remapping, the numbers seen on -> this record are not necessarily going to match the values as they were when the data -> was sent. - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- {{RFC(2474)}}: The Differentiated Service field in IPv4 and IPv6 headers diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/qualitylimitationdurations/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/qualitylimitationdurations/index.md new file mode 100644 index 000000000000000..3ff38979537305f --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/qualitylimitationdurations/index.md @@ -0,0 +1,73 @@ +--- +title: "RTCOutboundRtpStreamStats: qualityLimitationDurations property" +short-title: qualityLimitationDurations +slug: Web/API/RTCOutboundRtpStreamStats/qualityLimitationDurations +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.qualityLimitationDurations +--- + +{{APIRef("WebRTC")}} + +The **`qualityLimitationDurations`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary is a map of the reasons that a media stream's quality has been reduced by a codec during encoding, and the time during which the quality was reduced for each reason. + +This quality reduction may include changes such as reduced frame rate or resolution, or an increase in compression factor. +The information can be used to diagnose throughput issues and optimize performance. + +> [!NOTE] +> This property only exists for video media. + +## Value + +A {{jsxref("Map")}} of quality limitation reasons to a number which represents the time in seconds that the stream has been quality limited for that reason. + +The allowed quality limitation reason values are the strings: + +- `none` + - : The quality is not limited. +- `cpu` + - : The quality is primarily limited due to CPU load. +- `bandwidth` + - : The quality is primarily limited due to congestion cues during bandwidth estimation, such as inter-arrival time and round-trip time. +- `other` + - : The quality is primarily limited for a reason other than the above. + +## Examples + +### Get total time the stream has been quality limited + +The sum of all entries except `qualityLimitationDurations["none"]` gives the total time that the stream has been limited. + +```js +// Get the outbound RTP stream stats +pc.getStats().then((stats) => { + stats.forEach((report) => { + if (report.type === "outbound-rtp") { + const qualityLimitations = report.qualityLimitationDurations; + if (qualityLimitations) { + let totalTimeLimited = 0; + + console.log("Quality Limitations:"); + qualityLimitations.forEach((duration, reason) => { + console.log(`- ${reason}: ${duration} seconds`); + if (reason !== "none") { + totalTimeLimited += duration; + } + }); + console.log(`Total time limited: ${totalTimeLimited}`); + } + } + }); +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("RTCOutboundRtpStreamStats.qualityLimitationDurations")}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/qualitylimitationreason/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/qualitylimitationreason/index.md index e6c57bc22f2a31d..3c818f7eee12a0e 100644 --- a/files/en-us/web/api/rtcoutboundrtpstreamstats/qualitylimitationreason/index.md +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/qualitylimitationreason/index.md @@ -10,23 +10,29 @@ browser-compat: api.RTCStatsReport.type_outbound-rtp.qualityLimitationReason {{APIRef("WebRTC")}}{{SeeCompatTable}} -The **`qualityLimitationReason`** -property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary is a string -indicating the reason why the media quality in the stream is currently being reduced -by the codec during encoding, or `none` if no quality reduction is being -performed. +The **`qualityLimitationReason`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary is a string indicating the reason why the media quality in the stream is currently being reduced by the codec during encoding, or `none` if no quality reduction is being performed. -This quality reduction may include changes such as reduced frame -rate or resolution, or an increase in compression factor. +This quality reduction may include changes such as reduced frame rate or resolution, or an increase in compression factor. +Note that the user agent report the most limiting factor. +If the most limiting factor cannot be determined the result will be reported using the priority order: "bandwidth", "cpu", "other". -The amount of time the encoded media has had its quality reduced in each of the -potential ways that can be done can be found in -{{domxref("RTCOutboundRtpStreamStats.qualityLimitationDurations", "qualityLimitationDurations")}}. +The amount of time the encoded media has had its quality reduced in each of the potential ways that can be done can be found in {{domxref("RTCOutboundRtpStreamStats.qualityLimitationDurations", "qualityLimitationDurations")}}. + +> [!NOTE] +> The property is undefined for audio streams. ## Value -A {{jsxref("Map")}} whose keys are strings whose values are `none`, `cpu`, `bandwidth`, or `other`, and whose values are the -duration of the media, in seconds, whose quality was reduced for that reason. +A string with one of the following values: + +- `none` + - : The quality is not limited. +- `cpu` + - : The quality is primarily limited due to CPU load. +- `bandwidth` + - : The quality is primarily limited due to congestion cues during bandwidth estimation, such as inter-arrival time and round-trip time. +- `other` + - : The quality is primarily limited for a reason other than the above. ## Examples diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/remoteid/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/remoteid/index.md index dff6bcdc41ea40e..809fcbd97430f20 100644 --- a/files/en-us/web/api/rtcoutboundrtpstreamstats/remoteid/index.md +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/remoteid/index.md @@ -8,18 +8,11 @@ browser-compat: api.RTCStatsReport.type_outbound-rtp.remoteId {{APIRef("WebRTC")}} -The **`remoteId`** property of the -{{domxref("RTCOutboundRtpStreamStats")}} dictionary specifies the -{{domxref("RTCOutboundRtpStreamStats.id", "id")}} of the {{domxref("RTCRemoteInboundRtpStreamStats")}} -object representing the remote peer's {{domxref("RTCRtpReceiver")}} which is sending -the media to the local peer for this SSRC. +The **`remoteId`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary specifies the {{domxref("RTCOutboundRtpStreamStats.id", "id")}} of the {{domxref("RTCRemoteInboundRtpStreamStats")}} object representing the remote peer's {{domxref("RTCRtpReceiver")}} which is sending the media to the local peer for this SSRC. ## Value -A string containing the ID of the -{{domxref("RTCRemoteInboundRtpStreamStats")}} object that represents the remote peer's -{{domxref("RTCRtpReceiver")}} for the synchronization source represented by this stats -object. +A string containing the ID of the {{domxref("RTCRemoteInboundRtpStreamStats")}} object that represents the remote peer's {{domxref("RTCRtpReceiver")}} for the synchronization source represented by this stats object. ## Specifications diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/retransmittedbytessent/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/retransmittedbytessent/index.md new file mode 100644 index 000000000000000..ad5b6c83bfd7b29 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/retransmittedbytessent/index.md @@ -0,0 +1,29 @@ +--- +title: "RTCOutboundRtpStreamStats: retransmittedBytesSent property" +short-title: retransmittedBytesSent +slug: Web/API/RTCOutboundRtpStreamStats/retransmittedBytesSent +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.retransmittedBytesSent +--- + +{{APIRef("WebRTC")}} + +The **`retransmittedBytesSent`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary represents the total number of payload bytes retransmitted for the source associated with this stream. + +RTX (Retransmission) is one of several mechanisms that WebRTC uses for retransmitting lost payload bytes, and broadly refers to support for the special packets defined in {{rfc("4588")}}. +RTX has to be negotiated between the sender and receiver during initial handshake. +If RTX has not been negotiated the retransmitted bytes will be sent over the same SSRC; otherwise the bytes are sent on a separate SSRC but are still accounted for in this property. + +The retransmitted bytes sent are included in the count reported by {{domxref("RTCOutboundRtpStreamStats .bytesSent", "bytesSent")}}. + +## Value + +A positive integer indicating the number of retransmitted payload bytes for the source. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/retransmittedpacketssent/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/retransmittedpacketssent/index.md new file mode 100644 index 000000000000000..22cf7df798b2d2c --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/retransmittedpacketssent/index.md @@ -0,0 +1,29 @@ +--- +title: "RTCOutboundRtpStreamStats: retransmittedPacketsSent property" +short-title: retransmittedPacketsSent +slug: Web/API/RTCOutboundRtpStreamStats/retransmittedPacketsSent +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.retransmittedPacketsSent +--- + +{{APIRef("WebRTC")}} + +The **`retransmittedPacketsSent`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary represents the total number of packets retransmitted for the source associated with this stream. + +RTX (Retransmission) is one of several mechanisms that WebRTC uses for retransmitting lost payload bytes, and broadly refers to support for the special packets defined in {{rfc("4588")}}. +RTX has to be negotiated between the sender and receiver during initial handshake. +If RTX has not been negotiated the retransmitted packets will be sent over the same SSRC; otherwise the bytes are sent on a separate SSRC but are still accounted for in this property. + +The retransmitted packets are included in the count reported by {{domxref("RTCOutboundRtpStreamStats.packetsSent", "packetsSent")}}. + +## Value + +A positive integer indicating the number of retransmitted packets for the source. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/rid/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/rid/index.md new file mode 100644 index 000000000000000..f878db850b47e99 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/rid/index.md @@ -0,0 +1,30 @@ +--- +title: "RTCOutboundRtpStreamStats: rid property" +short-title: rid +slug: Web/API/RTCOutboundRtpStreamStats/rid +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.rid +--- + +{{APIRef("WebRTC")}} + +The **`rid`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary is a string that specifies the RTP stream ID, if defined. + +The property is only defined where the `rid` has been set for the corresponding {{domxref("RTCRtpSender")}}. +If set, this value will be present regardless of whether the RID RTP header extension has been negotiated. + +## Value + +The value of the [`encodings.rid`](/en-US/docs/Web/API/RTCRtpSender/setParameters#rid) argument passed to {{domxref("RTCRtpSender.setParameters()")}}, if any, when the corresponding transceiver is created. +The property is undefined if the stream ID was not set. + +> [!NOTE] +> The property is undefined for audio streams. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/scalabilitymode/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/scalabilitymode/index.md new file mode 100644 index 000000000000000..d924836e977c389 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/scalabilitymode/index.md @@ -0,0 +1,35 @@ +--- +title: "RTCOutboundRtpStreamStats: scalabilityMode property" +short-title: scalabilityMode +slug: Web/API/RTCOutboundRtpStreamStats/scalabilityMode +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.scalabilityMode +--- + +{{APIRef("WebRTC")}} + +The **`scalabilityMode`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary represents the scalability mode for the RTP stream, if one has been configured. +If not configured, the property is undefined. + +The mode is used in [Scalable Video Coding (SVC)](https://www.w3.org/TR/webrtc-svc/) to define how define how a video stream may be encoded to allow for adaptation to different network conditions and receiver capabilities. +Different codecs allow for various kinds of scalability, such as providing different resolution, different frame rates, or different quality levels for a particular video. + +The mode may be configured, for example, by specifying the scalability mode as a parameter option in {{domxref("VideoEncoder.configure()")}}, {{domxref("RTCRtpSender.setParameters()")}}, or {{domxref("RTCPeerConnection.addTransceiver()")}}. + +> [!NOTE] +> The property is undefined for audio streams. + +## Value + +A string indicating the configured scalability mode, such as "L1T1". +If no mode has been configured, the property is undefined. + +The set of allowed modes are defined in [Scalable Video Coding (SVC) Extension for WebRTC](https://w3c.github.io/webrtc-svc/#scalabilitymodes*) (w3c.github.io/webrtc-svc). + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/slicount/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/slicount/index.md deleted file mode 100644 index 4e888ae933ed2e7..000000000000000 --- a/files/en-us/web/api/rtcoutboundrtpstreamstats/slicount/index.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: "RTCOutboundRtpStreamStats: sliCount property" -short-title: sliCount -slug: Web/API/RTCOutboundRtpStreamStats/sliCount -page-type: web-api-instance-property -browser-compat: api.RTCOutboundRtpStreamStats.sliCount ---- - -{{APIRef("WebRTC")}} - -The **`sliCount`** property of the -{{domxref("RTCOutboundRtpStreamStats")}} dictionary indicates how many **Slice -Loss Indication** (**SLI**) packets the -{{domxref("RTCRtpSender")}} received from the remote {{domxref("RTCRtpReceiver")}} for -the RTP stream described by this object. - -An SLI packet is used by a decoder to let the encoder (the sender) know that it's -detected corruption of one or more consecutive macroblocks, in scan order, in the -received media. In general, what's usually of interest is that the higher this number is, -the more the stream data is becoming corrupted between the sender and the receiver, -causing the receiver to request retransmits or to drop frames entirely. - -## Value - -An unsigned integer indicating the number of SLI packets the sender received from the -receiver due to lost runs of macroblocks. A high value of `sliCount` may be -an indication of an unreliable network. - -This is a very technical part of how video codecs work. For details, see {{RFC(4585, "6.3.2")}}. - -> [!NOTE] -> This value is only present for video media. - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- {{RFC(4585, "", "6.3.2")}}: Definition of "Slice Loss Indication" in the document - _Extended RTP Profile for Real-time Transport Control Protocol (RTCP)-Based - Feedback (RTP/AVPF)_. diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/targetbitrate/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/targetbitrate/index.md new file mode 100644 index 000000000000000..1fd4c3cfd11ff9b --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/targetbitrate/index.md @@ -0,0 +1,32 @@ +--- +title: "RTCOutboundRtpStreamStats: targetBitrate property" +short-title: targetBitrate +slug: Web/API/RTCOutboundRtpStreamStats/targetBitrate +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.targetBitrate +--- + +{{APIRef("WebRTC")}} + +The **`targetBitrate`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary represents the current target bitrate of the codec in use by the stream. + +The value is dynamic, reflecting the encoder settings and other factors such as network conditions and available bandwidth. +It should correlate closely to the payload bytes sent per second (excluding retransmissions). + +## Value + +A number representing the target rate in bits per second. +This is defined in the same way as the {{rfc("3890","Transport Independent Application Specific (TIAS)")}} bitrate. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("RTCOutboundRtpStreamStats.bytesSent")}} +- {{domxref("RTCOutboundRtpStreamStats.retransmittedBytesSent")}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/totalencodedbytestarget/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/totalencodedbytestarget/index.md new file mode 100644 index 000000000000000..7b20154fee83bd2 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/totalencodedbytestarget/index.md @@ -0,0 +1,33 @@ +--- +title: "RTCOutboundRtpStreamStats: totalEncodedBytesTarget property" +short-title: totalEncodedBytesTarget +slug: Web/API/RTCOutboundRtpStreamStats/totalEncodedBytesTarget +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.totalEncodedBytesTarget +--- + +{{APIRef("WebRTC")}} + +The **`totalEncodedBytesTarget`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary represents the sum of the target frame sizes for all of the frames encoded so far. + +The codec has a target maximum size for each frame that it is asked to compress, in bytes. +This property indicates the cumulative total of the target sizes for each frame at the current time. +This will probably differ from the total of the actual frame sizes. +You can compare to {{domxref("RTCOutboundRtpStreamStats/bytesSent","bytesSent")}} in order to estimate how closely the codec is matching its target. + +The value increases every time {{domxref("RTCOutboundRtpStreamStats/framesEncoded","framesEncoded")}} goes up. + +> [!NOTE] +> The property is undefined for audio streams. + +## Value + +The sum of the target frame sizes in bytes, represented as a positive integer. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/totalencodetime/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/totalencodetime/index.md new file mode 100644 index 000000000000000..452098f1bf025b3 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/totalencodetime/index.md @@ -0,0 +1,30 @@ +--- +title: "RTCOutboundRtpStreamStats: totalEncodeTime property" +short-title: totalEncodeTime +slug: Web/API/RTCOutboundRtpStreamStats/totalEncodeTime +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.totalEncodeTime +--- + +{{APIRef("WebRTC")}} + +The **`totalEncodeTime`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary represents the total number of seconds spent encoding the {{domxref("RTCOutboundRtpStreamStats/framesEncoded","framesEncoded")}} frames for this stream ({{domxref("RTCRtpSender")}}). + +The average encode time can be calculated by dividing this value by `framesEncoded`. +The time it takes to encode one frame is the time between sending the encoder a frame and the encoder returning encoded data for that frame. +It does not include any time spent packetizing the resulting data. + +> [!NOTE] +> The property is undefined for audio streams. + +## Value + +A number representing the total time spent encoding frames, in seconds. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/totalpacketsenddelay/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/totalpacketsenddelay/index.md new file mode 100644 index 000000000000000..fd493ca10aa6386 --- /dev/null +++ b/files/en-us/web/api/rtcoutboundrtpstreamstats/totalpacketsenddelay/index.md @@ -0,0 +1,29 @@ +--- +title: "RTCOutboundRtpStreamStats: totalPacketSendDelay property" +short-title: totalPacketSendDelay +slug: Web/API/RTCOutboundRtpStreamStats/totalPacketSendDelay +page-type: web-api-instance-property +browser-compat: api.RTCStatsReport.type_outbound-rtp.totalPacketSendDelay +--- + +{{APIRef("WebRTC")}} + +The **`totalPacketSendDelay`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary represents the total time in seconds that packets have spent buffered locally before being transmitted. + +The individual packet delay is the time between a packet being emitted from the RTP packetizer and it being handed over to the OS network socket. +The individual delay is added to `totalPacketSendDelay` when {{domxref("RTCOutboundRtpStreamStats/framesEncoded","packetsSent")}} is incremented. + +> [!NOTE] +> The property is undefined for audio streams. + +## Value + +The delay in seconds, represented as a number. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} diff --git a/files/en-us/web/api/rtcoutboundrtpstreamstats/trackid/index.md b/files/en-us/web/api/rtcoutboundrtpstreamstats/trackid/index.md deleted file mode 100644 index 133a034d2ad7dac..000000000000000 --- a/files/en-us/web/api/rtcoutboundrtpstreamstats/trackid/index.md +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: "RTCOutboundRtpStreamStats: trackId property" -short-title: trackId -slug: Web/API/RTCOutboundRtpStreamStats/trackId -page-type: web-api-instance-property -browser-compat: api.RTCOutboundRtpStreamStats.trackId ---- - -{{APIRef("WebRTC")}} - -The **`trackId`** property of the {{domxref("RTCOutboundRtpStreamStats")}} dictionary indicates the {{domxref("RTCOutboundRtpStreamStats.id", "id")}} of the {{domxref("RTCSenderAudioTrackAttachmentStats")}} or {{domxref("RTCSenderVideoTrackAttachmentStats")}} object representing the {{domxref("MediaStreamTrack")}} which is being sent on this stream. - -## Value - -A string containing the ID of the {{domxref("RTCSenderAudioTrackAttachmentStats")}} or {{domxref("RTCSenderVideoTrackAttachmentStats")}} object representing the track which is the source of the media being sent on this stream. - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} diff --git a/files/en-us/web/api/url/hash/index.md b/files/en-us/web/api/url/hash/index.md index 98b3d73b755ccae..3fd16f90bd7293a 100644 --- a/files/en-us/web/api/url/hash/index.md +++ b/files/en-us/web/api/url/hash/index.md @@ -8,9 +8,11 @@ browser-compat: api.URL.hash {{ APIRef("URL API") }} {{AvailableInWorkers}} -The **`hash`** property of the {{domxref("URL")}} interface is a string containing a `'#'` followed by the fragment identifier of the URL. +The **`hash`** property of the {{domxref("URL")}} interface is a string containing a `"#"` followed by the fragment identifier of the URL. If the URL does not have a fragment identifier, this property contains an empty string, `""`. -The fragment is not {{Glossary("Percent-encoding", "percent-encoded")}}. If the URL does not have a fragment identifier, this property contains an empty string — `""`. +This property can be set to change the fragment identifier of the URL. When setting, a single `"#"` prefix is added to the provided value, if not already present. Setting it to `""` removes the fragment identifier. + +The fragment is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. ## Value diff --git a/files/en-us/web/api/url/host/index.md b/files/en-us/web/api/url/host/index.md index b18c6de276b44da..00f63bd69939823 100644 --- a/files/en-us/web/api/url/host/index.md +++ b/files/en-us/web/api/url/host/index.md @@ -8,9 +8,12 @@ browser-compat: api.URL.host {{ApiRef("URL API")}} {{AvailableInWorkers}} -The **`host`** property of the {{domxref("URL")}} interface is -a string containing the host, that is the {{domxref("URL.hostname", "hostname")}}, and then, if the {{glossary("port")}} of the URL is nonempty, a -`':'`, followed by the {{domxref("URL.port", "port")}} of the URL. +The **`host`** property of the {{domxref("URL")}} interface is a string containing the host, which is the {{domxref("URL.hostname", "hostname")}}, and then, if the {{glossary("port")}} of the URL is nonempty, a `":"`, followed by the {{domxref("URL.port", "port")}} of the URL. If the URL does not have a `hostname`, this property contains an empty string, `""`. + +This property can be set to change both the hostname and the port of the URL. If the URL's scheme is not [hierarchical](https://www.rfc-editor.org/rfc/rfc3986#section-1.2.3) (which the URL standard calls "[special schemes](https://url.spec.whatwg.org/#special-scheme)"), then it has no concept of a host and setting this property has no effect. + +> [!NOTE] +> If the given value for the `host` setter lacks a `port`, the URL's `port` will not change. This can be unexpected as the `host` getter does return a URL-port string, so one might have assumed the setter to always "reset" both. ## Value diff --git a/files/en-us/web/api/url/hostname/index.md b/files/en-us/web/api/url/hostname/index.md index fcede56bbf8b47e..99071c342d597bf 100644 --- a/files/en-us/web/api/url/hostname/index.md +++ b/files/en-us/web/api/url/hostname/index.md @@ -8,8 +8,11 @@ browser-compat: api.URL.hostname {{ApiRef("URL API")}} {{AvailableInWorkers}} -The **`hostname`** property of the {{domxref("URL")}} interface -is a string containing the {{glossary("domain name")}} of the URL. +The **`hostname`** property of the {{domxref("URL")}} interface is a string containing either the {{glossary("domain name")}} or {{glossary("IP address")}} of the URL. If the URL does not have a hostname, this property contains an empty string, `""`. IPv4 and IPv6 addresses are normalized, such as stripping leading zeros, and domain names are converted to [IDN](https://en.wikipedia.org/wiki/Internationalized_domain_name). + +This property can be set to change the hostname of the URL. If the URL's scheme is not [hierarchical](https://www.rfc-editor.org/rfc/rfc3986#section-1.2.3) (which the URL standard calls "[special schemes](https://url.spec.whatwg.org/#special-scheme)"), then it has no concept of a host and setting this property has no effect. + +The hostname is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. ## Value @@ -22,6 +25,9 @@ const url = new URL( "https://developer.mozilla.org/en-US/docs/Web/API/URL/hostname", ); console.log(url.hostname); // Logs: 'developer.mozilla.org' + +url.hostname = "你好.com"; +console.log(url.hostname); // Logs: 'xn--6qq79v.com' ``` ## Specifications diff --git a/files/en-us/web/api/url/origin/index.md b/files/en-us/web/api/url/origin/index.md index e66278bf2f14fb3..1fa63ffd476c8ae 100644 --- a/files/en-us/web/api/url/origin/index.md +++ b/files/en-us/web/api/url/origin/index.md @@ -12,9 +12,11 @@ The **`origin`** read-only property of the {{domxref("URL")}} interface returns The exact structure varies depending on the type of URL: -- For URL using the `http:` or `https:` schemes, the scheme followed by `//`, followed by the domain, followed by `:`, followed by the port (the default port, `80` and `443` respectively, if explicitly specified). -- For URL using `file:` scheme, the value is browser dependent. -- For URL using the `blob:` scheme, the origin of the URL following `blob:`. For example, `blob:https://mozilla.org` will have `https://mozilla.org`. +- For URLs using the `ftp:`, `http:`, `https:`, `ws:`, and `wss:` schemes, the {{domxref("URL.protocol", "protocol")}} followed by `//`, followed by the {{domxref("URL.host", "host")}}. Same as `host`, the {{domxref("URL.port", "port")}} is only included if it's not the default for the protocol. +- For URLs using `file:` scheme, the value is browser dependent. +- For URLs using the `blob:` scheme, the origin of the URL following `blob:`, but only if that URL uses the `http:`, `https:`, or `file:` scheme. For example, `blob:https://mozilla.org` will have `https://mozilla.org`. + +For all other cases, the string `"null"` is returned. ## Value diff --git a/files/en-us/web/api/url/password/index.md b/files/en-us/web/api/url/password/index.md index d592c188a410d00..42e164078bb6cd7 100644 --- a/files/en-us/web/api/url/password/index.md +++ b/files/en-us/web/api/url/password/index.md @@ -8,8 +8,11 @@ browser-compat: api.URL.password {{ApiRef("URL API")}} {{AvailableInWorkers}} -The **`password`** property of the {{domxref("URL")}} interface -is a string containing the password specified before the domain name. +The **`password`** property of the {{domxref("URL")}} interface is a string containing the password component of the URL. If the URL does not have a password, this property contains an empty string, `""`. + +This property can be set to change the password of the URL. If the URL has no {{domxref("URL.host", "host")}} or its scheme is `file:`, then setting this property has no effect. + +The password is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. ## Value diff --git a/files/en-us/web/api/url/port/index.md b/files/en-us/web/api/url/port/index.md index 67e1facd2165dcb..15e49c3f4eaf9c3 100644 --- a/files/en-us/web/api/url/port/index.md +++ b/files/en-us/web/api/url/port/index.md @@ -8,10 +8,9 @@ browser-compat: api.URL.port {{ApiRef("URL API")}} {{AvailableInWorkers}} -The **`port`** property of the {{domxref("URL")}} interface is a string containing the port number of the URL, or the empty string if the port is the default for the protocol. +The **`port`** property of the {{domxref("URL")}} interface is a string containing the port number of the URL. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`. -> [!NOTE] -> If the {{domxref("URL")}} object refers to a URL that doesn't contain an explicit port number (e.g., `https://localhost`) or contains a port number that's the default port number corresponding to the protocol part of the URL (e.g., `https://localhost:443`), then the value of the `port` property will be the empty string: `''`. +This property can be set to change the port of the URL. If the URL has no {{domxref("URL.host", "host")}} or its scheme is `file:`, then setting this property has no effect. It also silently ignores invalid port numbers. ## Value diff --git a/files/en-us/web/api/url/protocol/index.md b/files/en-us/web/api/url/protocol/index.md index 7936699cf27ffd6..b46d2a3dc9e95d2 100644 --- a/files/en-us/web/api/url/protocol/index.md +++ b/files/en-us/web/api/url/protocol/index.md @@ -8,9 +8,9 @@ browser-compat: api.URL.protocol {{ApiRef("URL API")}} {{AvailableInWorkers}} -The **`protocol`** property of the {{domxref("URL")}} interface -is a string representing the protocol scheme of the URL, including the -final `':'`. +The **`protocol`** property of the {{domxref("URL")}} interface is a string containing the protocol or scheme of the URL, including the final `":"`. If the port is the default for the protocol (`80` for `ws:` and `http:`, `443` for `wss:` and `https:`, and `21` for `ftp:`), this property contains an empty string, `""`. + +This property can be set to change the protocol of the URL. A `":"` is appended to the provided string if not provided. The provided scheme has to be compatible with the rest of the URL to be considered valid. ## Value diff --git a/files/en-us/web/api/url/search/index.md b/files/en-us/web/api/url/search/index.md index b600fd3a8feeb20..7800e9bef77fbaf 100644 --- a/files/en-us/web/api/url/search/index.md +++ b/files/en-us/web/api/url/search/index.md @@ -8,10 +8,11 @@ browser-compat: api.URL.search {{ApiRef("URL API")}} {{AvailableInWorkers}} -The **`search`** property of the {{domxref("URL")}} interface -is a search string, also called a _query string_, that is a -string containing a `'?'` followed by the parameters of the -URL. +The **`search`** property of the {{domxref("URL")}} interface is a search string, also called a _query string_, that is a string containing a `"?"` followed by the parameters of the URL. If the URL does not have a search query, this property contains an empty string, `""`. + +This property can be set to change the query string of the URL. When setting, a single `"?"` prefix is added to the provided value, if not already present. Setting it to `""` removes the query string. + +The query is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. Modern browsers provide the {{domxref("URL.searchParams")}} property to make it easy to parse out the parameters from the query string. diff --git a/files/en-us/web/api/url/username/index.md b/files/en-us/web/api/url/username/index.md index b17a6e643f26503..29af45afe9b46e1 100644 --- a/files/en-us/web/api/url/username/index.md +++ b/files/en-us/web/api/url/username/index.md @@ -8,8 +8,11 @@ browser-compat: api.URL.username {{ApiRef("URL API")}} {{AvailableInWorkers}} -The **`username`** property of the {{domxref("URL")}} interface -is a string containing the username specified before the domain name. +The **`username`** property of the {{domxref("URL")}} interface is a string containing the username component of the URL. If the URL does not have a username, this property contains an empty string, `""`. + +This property can be set to change the username of the URL. If the URL has no {{domxref("URL.host", "host")}} or its scheme is `file:`, then setting this property has no effect. + +The username is {{Glossary("Percent-encoding", "percent-encoded")}} when setting but not percent-decoded when reading. ## Value diff --git a/files/en-us/web/api/window/console/index.md b/files/en-us/web/api/window/console/index.md deleted file mode 100644 index fd2bea19013d2fc..000000000000000 --- a/files/en-us/web/api/window/console/index.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: "Window: console property" -short-title: console -slug: Web/API/Window/console -page-type: web-api-instance-property -spec-urls: https://console.spec.whatwg.org/ ---- - -{{APIRef}} - -The **`Window.console`** property returns a reference to the {{domxref("console")}} object, which provides methods for logging information to the browser's console. These methods are intended for debugging purposes only and should not be relied on for presenting information to end users. - -## Examples - -### Logging to console - -The first example logs text to the console. - -```js -console.log("An error occurred while loading the content"); -``` - -The next example logs an object to the console, with the object's fields expandable using disclosure widgets: - -```js -console.dir(someObject); -``` - -For more examples, see the [Examples](/en-US/docs/Web/API/console#examples) section of the [`console`](/en-US/docs/Web/API/console) article. - -## Specifications - -{{Specifications}} - -> [!NOTE] -> Currently there are many implementation differences among browsers, but work is being done to bring them together and make them more consistent with one another. diff --git a/files/en-us/web/api/window/external/index.md b/files/en-us/web/api/window/external/index.md index b4941a6020540c4..77d5b596fc1a169 100644 --- a/files/en-us/web/api/window/external/index.md +++ b/files/en-us/web/api/window/external/index.md @@ -24,7 +24,7 @@ The `External` object has the following methods: - AddSearchProvider(descriptionURL) + AddSearchProvider(descriptionURL) Dummy function; does nothing. See @@ -37,6 +37,10 @@ The `External` object has the following methods: IsSearchProviderInstalled() Dummy function; does nothing. + + getHostEnvironmentValue(name) {{non-standard_inline}} + Microsoft Edge proprietary API. See Microsoft docs for more information. + diff --git a/files/en-us/web/api/window/getcomputedstyle/index.md b/files/en-us/web/api/window/getcomputedstyle/index.md index 233fc6b1cbdf2a1..c2edc314bd6bb0d 100644 --- a/files/en-us/web/api/window/getcomputedstyle/index.md +++ b/files/en-us/web/api/window/getcomputedstyle/index.md @@ -152,9 +152,9 @@ Java. using array or [dot notation](/en-US/docs/Learn_web_development/Core/Scripting/Object_basics#dot_notation) such as `obj['z-index']` or `obj.zIndex`. - The values returned by `getComputedStyle` are [resolved values](/en-US/docs/Web/CSS/resolved_value). These are usually the same as CSS 2.1's - [computed values](/en-US/docs/Web/CSS/computed_value), but for some older properties + [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value), but for some older properties like `width`, `height`, or `padding`, they are - instead the same as [used values](/en-US/docs/Web/CSS/used_value). Originally, CSS + instead the same as [used values](/en-US/docs/Web/CSS/CSS_cascade/used_value). Originally, CSS 2.0 defined the _computed values_ as the "ready to be used" final values of properties after cascading and inheritance, but CSS 2.1 redefined them as pre-layout, and _used values_ as post-layout. For CSS 2.0 properties, diff --git a/files/en-us/web/api/window/getdefaultcomputedstyle/index.md b/files/en-us/web/api/window/getdefaultcomputedstyle/index.md index be756037711436e..ee58e7ca9fa4dec 100644 --- a/files/en-us/web/api/window/getdefaultcomputedstyle/index.md +++ b/files/en-us/web/api/window/getdefaultcomputedstyle/index.md @@ -10,7 +10,7 @@ browser-compat: api.Window.getDefaultComputedStyle {{APIRef("CSSOM")}}{{Non-standard_Header}} -The **`getDefaultComputedStyle()`** method gives the default [computed values](/en-US/docs/Web/CSS/computed_value) of all the CSS +The **`getDefaultComputedStyle()`** method gives the default [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of all the CSS properties of an element, ignoring author styling. That is, only user-agent and user styles are taken into account. diff --git a/files/en-us/web/api/window/index.md b/files/en-us/web/api/window/index.md index 5d45e3a512497b1..8bc6d70d377600a 100644 --- a/files/en-us/web/api/window/index.md +++ b/files/en-us/web/api/window/index.md @@ -31,8 +31,6 @@ Note that properties which are objects (e.g., for overriding the prototype of bu - : An alias for {{domxref("Window.navigator")}}. - {{domxref("Window.closed")}} {{ReadOnlyInline}} - : This property indicates whether the current window is closed or not. -- {{domxref("Window.console")}} {{ReadOnlyInline}} - - : Returns a reference to the console object which provides access to the browser's debugging console. - {{domxref("Window.cookieStore")}} {{ReadOnlyInline}} {{SecureContext_Inline}} - : Returns a reference to the {{domxref("CookieStore")}} object for the current document context. - {{domxref("Window.credentialless")}} {{ReadOnlyInline}} {{Experimental_Inline}} diff --git a/files/en-us/web/api/workerglobalscope/index.md b/files/en-us/web/api/workerglobalscope/index.md index 980808951b8355f..33a6f619eba72e4 100644 --- a/files/en-us/web/api/workerglobalscope/index.md +++ b/files/en-us/web/api/workerglobalscope/index.md @@ -19,8 +19,6 @@ _This interface inherits properties from the {{domxref("EventTarget")}} interfac - {{domxref("WorkerGlobalScope.caches")}} {{ReadOnlyInline}} {{SecureContext_Inline}} - : Returns the {{domxref("CacheStorage")}} object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests. -- {{domxref("console")}} {{ReadOnlyInline}} {{Non-standard_inline}} - - : Returns the {{domxref("console")}} associated with the worker. - {{domxref("WorkerGlobalScope.crossOriginIsolated")}} {{ReadOnlyInline}} - : Returns a boolean value that indicates whether the website is in a cross-origin isolation state. - {{domxref("WorkerGlobalScope.crypto")}} {{ReadOnlyInline}} diff --git a/files/en-us/web/api/xmlhttprequest/abort/index.md b/files/en-us/web/api/xmlhttprequest/abort/index.md index 46c134dbfaab661..62d03dd5e4ac0c5 100644 --- a/files/en-us/web/api/xmlhttprequest/abort/index.md +++ b/files/en-us/web/api/xmlhttprequest/abort/index.md @@ -14,6 +14,8 @@ it has already been sent. When a request is aborted, its `XMLHttpRequest.UNSENT` (0) and the request's {{domxref("XMLHttpRequest.status", "status")}} code is set to 0. +If the request is still in progress (its `readyState` is not `XMLHttpRequest.DONE` or `XMLHttpRequest.UNSENT`), a {{domxref("XMLHttpRequest/readystatechange_event", "readystatechange")}} event, {{domxref("XMLHttpRequest/abort_event", "abort")}}, and a {{domxref("XMLHttpRequest/loadend_event", "loadend")}} event are dispatched, in that order. For synchronous requests, no events are dispatched and an error is thrown instead. + ## Syntax ```js-nolint diff --git a/files/en-us/web/css/-webkit-mask-box-image/index.md b/files/en-us/web/css/-webkit-mask-box-image/index.md index 8745c8697694bd2..5bbeecd34f4ea4c 100644 --- a/files/en-us/web/css/-webkit-mask-box-image/index.md +++ b/files/en-us/web/css/-webkit-mask-box-image/index.md @@ -78,10 +78,10 @@ Border repeat styles, when included, are interpreted in the order of ` ## Formal definition -- [Initial value](/en-US/docs/Web/CSS/initial_value): `none` +- [Initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value): `none` - Applies to: all elements -- [Inherited](/en-US/docs/Web/CSS/Inheritance): no -- [Computed value](/en-US/docs/Web/CSS/computed_value): as specified +- [Inherited](/en-US/docs/Web/CSS/CSS_cascade/Inheritance): no +- [Computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value): as specified ## Formal syntax diff --git a/files/en-us/web/css/@counter-style/index.md b/files/en-us/web/css/@counter-style/index.md index 25fc5c9be6b0766..139d39c6ed66023 100644 --- a/files/en-us/web/css/@counter-style/index.md +++ b/files/en-us/web/css/@counter-style/index.md @@ -31,7 +31,7 @@ The `@counter-style` at-rule is identified by a [counter style name](#counter_st - `` - - : Provides a name for your counter style. It is specified as a case-sensitive {{cssxref("custom-ident")}} without quotes. The value should not be equal to `none`. Like all custom identifiers, the value of your counter style can't be a [CSS-wide keyword](/en-US/docs/Web/CSS/CSS_Types#css-wide_keywords). Avoid other enumerated CSS property values, including values of [list](/en-US/docs/Web/CSS/CSS_lists#properties) and [counter style](/en-US/docs/Web/CSS/CSS_counter_styles#properties) properties. The name of your counter can't be the case-insensitive {{cssxref("list-style-type")}} property values of `decimal`, `disc`, `square`, `circle`, `disclosure-open`, and `disclosure-closed`. + - : Provides a name for your counter style. It is specified as a case-sensitive {{cssxref("custom-ident")}} without quotes. The value should not be equal to `none`. Like all custom identifiers, the value of your counter style can't be a [CSS-wide keyword](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types#css-wide_keywords). Avoid other enumerated CSS property values, including values of [list](/en-US/docs/Web/CSS/CSS_lists#properties) and [counter style](/en-US/docs/Web/CSS/CSS_counter_styles#properties) properties. The name of your counter can't be the case-insensitive {{cssxref("list-style-type")}} property values of `decimal`, `disc`, `square`, `circle`, `disclosure-open`, and `disclosure-closed`. > [!NOTE] > The non-overridable counter style names `decimal`, `disc`, `square`, `circle`, `disclosure-open`, and `disclosure-closed` cannot be used as the name of a custom counter. However, they are valid in other contexts where the `` data type is expected, such as in `system: extends `. diff --git a/files/en-us/web/css/absolute-size/index.md b/files/en-us/web/css/absolute-size/index.md index 9a76f7c91fce8f9..c726849039e4a25 100644 --- a/files/en-us/web/css/absolute-size/index.md +++ b/files/en-us/web/css/absolute-size/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-fonts/#valdef-font-size-absolute-size {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes the absolute size keywords. This data type is used in the {{cssxref("font")}} shorthand and {{cssxref("font-size")}} properties. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) describes the absolute size keywords. This data type is used in the {{cssxref("font")}} shorthand and {{cssxref("font-size")}} properties. The font size keywords are mapped to the deprecated HTML `size` attribute. See the [HTML size attribute](#html_size_attribute) section below). diff --git a/files/en-us/web/css/actual_value/index.md b/files/en-us/web/css/actual_value/index.md deleted file mode 100644 index f78f3d3ffd23117..000000000000000 --- a/files/en-us/web/css/actual_value/index.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Actual value -slug: Web/CSS/actual_value -page-type: guide -spec-urls: https://www.w3.org/TR/CSS22/cascade.html#actual-value ---- - -{{CSSRef}} - -The **actual value** of a [CSS](/en-US/docs/Web/CSS) property is the [used value](/en-US/docs/Web/CSS/used_value) of that property after any necessary approximations have been applied. For example, a {{glossary("user agent")}} that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer. - -## Calculating a property's actual value - -The {{glossary("user agent")}} performs four steps to calculate a property's actual (final) value: - -1. First, the [specified value](/en-US/docs/Web/CSS/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/CSS_cascade/Cascade), [inheritance](/en-US/docs/Web/CSS/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/initial_value). -2. Next, the [computed value](/en-US/docs/Web/CSS/computed_value) is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`). -3. Then, layout is calculated, resulting in the [used value](/en-US/docs/Web/CSS/used_value). -4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value. - -## Specifications - -{{Specifications}} - -## See also - -- CSS key concepts: - - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - - [At-rules](/en-US/docs/Web/CSS/At-rule) - - [Comments](/en-US/docs/Web/CSS/Comments) - - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - - [Inheritance](/en-US/docs/Web/CSS/Inheritance) - - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - - Values - - [Initial values](/en-US/docs/Web/CSS/initial_value) - - [Computed values](/en-US/docs/Web/CSS/computed_value) - - [Used values](/en-US/docs/Web/CSS/used_value) - - [Resolved values](/en-US/docs/Web/CSS/resolved_value) - - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/all/index.md b/files/en-us/web/css/all/index.md index 83de851acd9d2a6..00c22b330f538a1 100644 --- a/files/en-us/web/css/all/index.md +++ b/files/en-us/web/css/all/index.md @@ -31,15 +31,15 @@ The `all` property is specified as one of the CSS global keyword values. Note th ### Values - {{cssxref("initial")}} - - : Specifies that all the element's properties should be changed to their [initial values](/en-US/docs/Web/CSS/initial_value). + - : Specifies that all the element's properties should be changed to their [initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value). - {{cssxref("inherit")}} - - : Specifies that all the element's properties should be changed to their [inherited values](/en-US/docs/Web/CSS/Inheritance). + - : Specifies that all the element's properties should be changed to their [inherited values](/en-US/docs/Web/CSS/CSS_cascade/Inheritance). - {{cssxref("unset")}} - : Specifies that all the element's properties should be changed to their inherited values if they inherit by default, or to their initial values if not. - {{cssxref("revert")}} - : Specifies behavior that depends on the stylesheet origin to which the declaration belongs: - - If the rule belongs to the [author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user level, so that the [specified values](/en-US/docs/Web/CSS/specified_value) are calculated as if no author-level rules were specified for the element. For purposes of `revert`, the author origin includes the Override and Animation origins. - - If the rule belongs to the [user origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user-agent level, so that the [specified values](/en-US/docs/Web/CSS/specified_value) are calculated as if no author-level or user-level rules were specified for the element. + - If the rule belongs to the [author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user level, so that the [specified values](/en-US/docs/Web/CSS/CSS_cascade/specified_value) are calculated as if no author-level rules were specified for the element. For purposes of `revert`, the author origin includes the Override and Animation origins. + - If the rule belongs to the [user origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets), the `revert` value rolls back the [cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) to the user-agent level, so that the [specified values](/en-US/docs/Web/CSS/CSS_cascade/specified_value) are calculated as if no author-level or user-level rules were specified for the element. - If the rule belongs to the [user-agent origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets), the `revert` value acts like `unset`. - {{cssxref("revert-layer")}} - : Specifies that all the element's properties should roll back the cascade to a previous [cascade layer](/en-US/docs/Web/CSS/@layer), if one exists. If no other cascade layer exists, the element's properties will roll back to the matching rule, if one exists, in the current layer or to a previous [style origin](/en-US/docs/Glossary/Style_origin). diff --git a/files/en-us/web/css/alpha-value/index.md b/files/en-us/web/css/alpha-value/index.md index 19e6aa2b2de1a59..1cda9a69260bf85 100644 --- a/files/en-us/web/css/alpha-value/index.md +++ b/files/en-us/web/css/alpha-value/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-color/#typedef-color-alpha-value {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}}, specifying the **{{Glossary("alpha", "alpha channel")}}** or **transparency** of a color. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a value that can be either a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}}, specifying the **{{Glossary("alpha", "alpha channel")}}** or **transparency** of a color. ## Syntax @@ -54,6 +54,6 @@ shape-image-threshold: 0.7; ## See also - [Learn: Fundamental text and font styling](/en-US/docs/Learn_web_development/Core/Text_styling/Fundamentals) -- [CSS data types](/en-US/docs/Web/CSS/CSS_Types) +- [CSS data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) - [CSS Color](/en-US/docs/Web/CSS/CSS_colors) - [``](/en-US/docs/Web/CSS/color_value) diff --git a/files/en-us/web/css/angle-percentage/index.md b/files/en-us/web/css/angle-percentage/index.md index 2c650e4d4e09310..414208895e912b6 100644 --- a/files/en-us/web/css/angle-percentage/index.md +++ b/files/en-us/web/css/angle-percentage/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.angle-percentage {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{Cssxref("angle")}} or a {{Cssxref("percentage")}}. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a value that can be either a {{Cssxref("angle")}} or a {{Cssxref("percentage")}}. Where an `` is specified as an allowable type, this means that the percentage resolves to an angle and therefore can be used in a {{Cssxref("calc", "calc()")}} expression. @@ -29,6 +29,6 @@ Refer to the documentation for {{Cssxref("angle")}} and {{Cssxref("percentage")} ## See also -- [CSS data types](/en-US/docs/Web/CSS/CSS_Types) +- [CSS data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) - [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) - [`conic-gradient()`](/en-US/docs/Web/CSS/gradient/conic-gradient) and [`repeating-conic-gradient()`](/en-US/docs/Web/CSS/gradient/repeating-conic-gradient) diff --git a/files/en-us/web/css/angle/index.md b/files/en-us/web/css/angle/index.md index b156ce649a8864d..a50ccc1ded0f807 100644 --- a/files/en-us/web/css/angle/index.md +++ b/files/en-us/web/css/angle/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.angle {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in {{cssxref("<gradient>")}}s and in some {{cssxref("transform")}} functions. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents an angle value expressed in degrees, gradians, radians, or turns. It is used, for example, in {{cssxref("<gradient>")}}s and in some {{cssxref("transform")}} functions. {{EmbedInteractiveExample("pages/css/type-angle.html")}} @@ -84,7 +84,7 @@ Optionally, it may be preceded by a single `+` or `-` sign. Positive numbers rep ## See also -- [CSS data types](/en-US/docs/Web/CSS/CSS_Types) +- [CSS data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) - The [``](/en-US/docs/Web/CSS/gradient) type - CSS rotation transforms: [`rotate()`](/en-US/docs/Web/CSS/transform-function/rotate), [`rotate3d()`](/en-US/docs/Web/CSS/transform-function/rotate3d), [`rotateX()`](/en-US/docs/Web/CSS/transform-function/rotateX), [`rotateY()`](/en-US/docs/Web/CSS/transform-function/rotateY), and [`rotateZ()`](/en-US/docs/Web/CSS/transform-function/rotateZ) - [CSS transforms](/en-US/docs/Web/CSS/CSS_transforms) diff --git a/files/en-us/web/css/at-rule/index.md b/files/en-us/web/css/at-rule/index.md index f017195befbf064..8421362f33f8e28 100644 --- a/files/en-us/web/css/at-rule/index.md +++ b/files/en-us/web/css/at-rule/index.md @@ -105,4 +105,4 @@ Block at-rules end in a `{}`-block that contain nested rules, other at-rules, or - [CSS conditional rules](/en-US/docs/Web/CSS/CSS_conditional_rules) module - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Inheritance](/en-US/docs/Web/CSS/Inheritance) +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) diff --git a/files/en-us/web/css/attr/index.md b/files/en-us/web/css/attr/index.md index 7a5723fe4c7fec4..7668c03a09a5eb5 100644 --- a/files/en-us/web/css/attr/index.md +++ b/files/en-us/web/css/attr/index.md @@ -57,7 +57,7 @@ The parameters are: attr(data-name string, "stranger") ``` - - The `type()` function takes a `` as its argument that specifies what [data type](/en-US/docs/Web/CSS/CSS_Types) to parse the value into. The `` can be {{CSSxRef("<angle>")}}, {{CSSxRef("<color>")}}, {{CSSxRef("<custom-ident>")}}, {{CSSxRef("<image>")}}, {{CSSxRef("<integer>")}}, {{CSSxRef("<length>")}}, {{CSSxRef("<length-percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<resolution>")}}, {{CSSxRef("<string>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<transform-function>")}}, or a combination thereof. + - The `type()` function takes a `` as its argument that specifies what [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) to parse the value into. The `` can be {{CSSxRef("<angle>")}}, {{CSSxRef("<color>")}}, {{CSSxRef("<custom-ident>")}}, {{CSSxRef("<image>")}}, {{CSSxRef("<integer>")}}, {{CSSxRef("<length>")}}, {{CSSxRef("<length-percentage>")}}, {{CSSxRef("<number>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<resolution>")}}, {{CSSxRef("<string>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<transform-function>")}}, or a combination thereof. ```css attr(id type(), none) diff --git a/files/en-us/web/css/basic-shape/ellipse/index.md b/files/en-us/web/css/basic-shape/ellipse/index.md index d3c361ebb6b19ba..58d79cb91f8f211 100644 --- a/files/en-us/web/css/basic-shape/ellipse/index.md +++ b/files/en-us/web/css/basic-shape/ellipse/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.ellipse {{CSSRef}} -The **`ellipse()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Types). +The **`ellipse()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types). {{EmbedInteractiveExample("pages/css/function-ellipse.html")}} diff --git a/files/en-us/web/css/basic-shape/index.md b/files/en-us/web/css/basic-shape/index.md index 359fd5b6834a603..bd3890485f28bce 100644 --- a/files/en-us/web/css/basic-shape/index.md +++ b/files/en-us/web/css/basic-shape/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a shape used in the {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, and {{cssxref("offset-path")}} properties. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a shape used in the {{cssxref("clip-path")}}, {{cssxref("shape-outside")}}, and {{cssxref("offset-path")}} properties. {{EmbedInteractiveExample("pages/css/type-basic-shape.html")}} diff --git a/files/en-us/web/css/basic-shape/inset/index.md b/files/en-us/web/css/basic-shape/inset/index.md index 8bbf615b643abff..5610d99302aa97c 100644 --- a/files/en-us/web/css/basic-shape/inset/index.md +++ b/files/en-us/web/css/basic-shape/inset/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.inset {{CSSRef}} -The **`inset()`** [CSS](/en-US/docs/Web/CSS) function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Types). +The **`inset()`** [CSS](/en-US/docs/Web/CSS) function defines a rectangle at the specified inset distances from each side of the reference box. It is a basic shape function used to define one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types). {{EmbedInteractiveExample("pages/css/function-inset.html")}} diff --git a/files/en-us/web/css/basic-shape/polygon/index.md b/files/en-us/web/css/basic-shape/polygon/index.md index f7ff3db545766d2..18c9be2e3641d38 100644 --- a/files/en-us/web/css/basic-shape/polygon/index.md +++ b/files/en-us/web/css/basic-shape/polygon/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.polygon {{CSSRef}} -The **`polygon()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Types). It's used to draw a [polygon](https://en.wikipedia.org/wiki/Polygon) by providing one or more pairs of coordinates, each of which represents a vertex of the shape. +The **`polygon()`** [CSS](/en-US/docs/Web/CSS) function is one of the {{cssxref("<basic-shape>")}} [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types). It's used to draw a [polygon](https://en.wikipedia.org/wiki/Polygon) by providing one or more pairs of coordinates, each of which represents a vertex of the shape. {{EmbedInteractiveExample("pages/css/function-polygon.html")}} diff --git a/files/en-us/web/css/basic-shape/rect/index.md b/files/en-us/web/css/basic-shape/rect/index.md index 0cdecac039adf6e..e4216683ad89cb7 100644 --- a/files/en-us/web/css/basic-shape/rect/index.md +++ b/files/en-us/web/css/basic-shape/rect/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.rect {{CSSRef}} -The **`rect()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle at the specified distance from the top and left edges of the containing block. It is a basic shape function of the {{cssxref("<basic-shape>")}} [data type](/en-US/docs/Web/CSS/CSS_Types). You can use the `rect()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region. +The **`rect()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle at the specified distance from the top and left edges of the containing block. It is a basic shape function of the {{cssxref("<basic-shape>")}} [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types). You can use the `rect()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region. ## Syntax diff --git a/files/en-us/web/css/basic-shape/xywh/index.md b/files/en-us/web/css/basic-shape/xywh/index.md index 253247a636c289b..817ca98d2d5d43d 100644 --- a/files/en-us/web/css/basic-shape/xywh/index.md +++ b/files/en-us/web/css/basic-shape/xywh/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.basic-shape.xywh {{CSSRef}} -The **`xywh()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle using the specified distances from the left (`x`) and top (`y`) edges of the containing block and the specified width (`w`) and height (`h`) of the rectangle. It is a basic shape function of the {{cssxref("<basic-shape>")}} [data type](/en-US/docs/Web/CSS/CSS_Types). You can use the `xywh()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region. +The **`xywh()`** [CSS](/en-US/docs/Web/CSS) function creates a rectangle using the specified distances from the left (`x`) and top (`y`) edges of the containing block and the specified width (`w`) and height (`h`) of the rectangle. It is a basic shape function of the {{cssxref("<basic-shape>")}} [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types). You can use the `xywh()` function in CSS properties such as {{cssxref("offset-path")}} to create the rectangular path along which an element moves and in {{cssxref("clip-path")}} to define the shape of the clipping region. ## Syntax diff --git a/files/en-us/web/css/blend-mode/index.md b/files/en-us/web/css/blend-mode/index.md index d350f0e4a56a222..59cff26034ea93f 100644 --- a/files/en-us/web/css/blend-mode/index.md +++ b/files/en-us/web/css/blend-mode/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.blend-mode {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes how colors should appear when elements overlap. It is used in the {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}} properties. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) describes how colors should appear when elements overlap. It is used in the {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}} properties. ## Syntax diff --git a/files/en-us/web/css/border-image/index.md b/files/en-us/web/css/border-image/index.md index d752790b70d4017..7aa30113c8d19f7 100644 --- a/files/en-us/web/css/border-image/index.md +++ b/files/en-us/web/css/border-image/index.md @@ -50,7 +50,7 @@ border-image: unset; The `border-image` property may be specified with anywhere from one to five of the values listed below. > [!NOTE] -> If the [computed value](/en-US/docs/Web/CSS/computed_value) of {{cssxref("border-image-source")}} is `none`, or if the image cannot be displayed, the {{cssxref("border-style")}} will be displayed instead. +> If the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of {{cssxref("border-image-source")}} is `none`, or if the image cannot be displayed, the {{cssxref("border-style")}} will be displayed instead. ### Values diff --git a/files/en-us/web/css/border/index.md b/files/en-us/web/css/border/index.md index 564e9dbe3433e1f..c038978c0f82ab0 100644 --- a/files/en-us/web/css/border/index.md +++ b/files/en-us/web/css/border/index.md @@ -58,7 +58,7 @@ The `border` property may be specified using one, two, or three of the values li ## Description -As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/initial_value). Importantly, `border` cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., `none`. +As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value). Importantly, `border` cannot be used to specify a custom value for {{cssxref("border-image")}}, but instead sets it to its initial value, i.e., `none`. The `border` shorthand is especially useful when you want all four borders to be the same. To make them different from each other, however, you can use the longhand {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, and {{Cssxref("border-color")}} properties, which accept different values for each side. Alternatively, you can target one border at a time with the physical (e.g., {{Cssxref("border-top")}} ) and logical (e.g., {{Cssxref("border-block-start")}}) border properties. diff --git a/files/en-us/web/css/calc-keyword/index.md b/files/en-us/web/css/calc-keyword/index.md index 5cf6b27a8efbf7b..a764e26ee705156 100644 --- a/files/en-us/web/css/calc-keyword/index.md +++ b/files/en-us/web/css/calc-keyword/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.calc-keyword {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents well-defined constants such as `e` and `pi`. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents well-defined constants such as `e` and `pi`. Rather than require authors to manually type out several digits of these mathematical constants or calculate them, a few of them are provided directly by CSS for convenience. ## Syntax diff --git a/files/en-us/web/css/calc-sum/index.md b/files/en-us/web/css/calc-sum/index.md index 69d3cdb40cfda1f..2dd23d7a07fde6c 100644 --- a/files/en-us/web/css/calc-sum/index.md +++ b/files/en-us/web/css/calc-sum/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.calc-sum {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents an expression which performs a calculation in any [CSS math function](/en-US/docs/Web/CSS/CSS_Functions#math_functions). The expression executes a basic arithmetic operation of addition and subtraction between two values. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents an expression which performs a calculation in any [CSS math function](/en-US/docs/Web/CSS/CSS_Functions#math_functions). The expression executes a basic arithmetic operation of addition and subtraction between two values. ## Syntax diff --git a/files/en-us/web/css/color-interpolation-method/index.md b/files/en-us/web/css/color-interpolation-method/index.md index f05915a62b4ad8a..694946fb08638c0 100644 --- a/files/en-us/web/css/color-interpolation-method/index.md +++ b/files/en-us/web/css/color-interpolation-method/index.md @@ -8,7 +8,7 @@ spec-urls: https://drafts.csswg.org/css-color/#interpolation-space {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the [color space](/en-US/docs/Glossary/Color_space) used for interpolation between {{CSSXref("<color>")}} values. It can be used to override the default interpolation color space for color-related functional notations such as {{CSSXref("color_value/color-mix", "color-mix()")}} and {{CSSXref("gradient/linear-gradient", "linear-gradient()")}}. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents the [color space](/en-US/docs/Glossary/Color_space) used for interpolation between {{CSSXref("<color>")}} values. It can be used to override the default interpolation color space for color-related functional notations such as {{CSSXref("color_value/color-mix", "color-mix()")}} and {{CSSXref("gradient/linear-gradient", "linear-gradient()")}}. When interpolating `` values, the interpolation color space defaults to Oklab. diff --git a/files/en-us/web/css/color_value/index.md b/files/en-us/web/css/color_value/index.md index f63c02f38fb8c0e..49dd8d8fa8117b6 100644 --- a/files/en-us/web/css/color_value/index.md +++ b/files/en-us/web/css/color_value/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.color {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a color. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a color. A `` may also include an [alpha-channel](https://en.wikipedia.org/wiki/Alpha_compositing) _transparency value_, indicating how the color should [composite](https://www.w3.org/TR/compositing-1/#simplealphacompositing) with its background. > [!NOTE] @@ -114,7 +114,7 @@ background-color: hsl(0deg 100% 50%); Color interpolation happens with [gradients](/en-US/docs/Web/CSS/gradient), [transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions), and [animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations). -When interpolating `` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/computed_value) are interpolated linearly, with interpolation's speed being determined by the [easing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through {{CSSXref("<color-interpolation-method>")}} in some color-related functional notations. +When interpolating `` values, they are first converted to a given color space, and then each component of the [computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) are interpolated linearly, with interpolation's speed being determined by the [easing function](/en-US/docs/Web/CSS/easing-function) in transitions and animations. The interpolation color space defaults to Oklab, but can be overridden through {{CSSXref("<color-interpolation-method>")}} in some color-related functional notations. ### Interpolation with missing components diff --git a/files/en-us/web/css/comments/index.md b/files/en-us/web/css/comments/index.md index 81ca041cf90b5ce..4e3aa4dd8b9a719 100644 --- a/files/en-us/web/css/comments/index.md +++ b/files/en-us/web/css/comments/index.md @@ -53,8 +53,8 @@ The `/* */` comment syntax is used for both single and multiline comments. There - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [CSS error handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Inheritance](/en-US/docs/Web/CSS/Inheritance) +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module -- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values +- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values diff --git a/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md b/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md index 1a10afc9d02e42c..0384576962ce448 100644 --- a/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md +++ b/files/en-us/web/css/css_box_model/introduction_to_the_css_box_model/index.md @@ -48,15 +48,15 @@ Finally, note that for non-replaced inline elements, the amount of space taken u - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - - [Inheritance](/en-US/docs/Web/CSS/Inheritance) + - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - Values - - [Initial values](/en-US/docs/Web/CSS/initial_value) - - [Computed values](/en-US/docs/Web/CSS/computed_value) - - [Used values](/en-US/docs/Web/CSS/used_value) - - [Actual values](/en-US/docs/Web/CSS/actual_value) + - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) + - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) + - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) + - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md b/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md index 4de90c0aee3c5b3..c4d8756587d3b32 100644 --- a/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md +++ b/files/en-us/web/css/css_box_model/mastering_margin_collapsing/index.md @@ -77,15 +77,15 @@ p { - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - - [Inheritance](/en-US/docs/Web/CSS/Inheritance) + - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - Values - - [Initial values](/en-US/docs/Web/CSS/initial_value) - - [Computed values](/en-US/docs/Web/CSS/computed_value) - - [Used values](/en-US/docs/Web/CSS/used_value) - - [Actual values](/en-US/docs/Web/CSS/actual_value) + - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) + - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) + - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) + - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/css_cascade/actual_value/index.md b/files/en-us/web/css/css_cascade/actual_value/index.md new file mode 100644 index 000000000000000..50e2ba07bfccd00 --- /dev/null +++ b/files/en-us/web/css/css_cascade/actual_value/index.md @@ -0,0 +1,46 @@ +--- +title: Actual value +slug: Web/CSS/CSS_cascade/actual_value +page-type: guide +spec-urls: + - https://www.w3.org/TR/CSS22/cascade.html#actual-value + - https://drafts.csswg.org/css-cascade-5/#actual-value +--- + +{{CSSRef}} + +The **actual value** of a [CSS](/en-US/docs/Web/CSS) property is the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) of that property after any necessary approximations have been applied. For example, a {{glossary("user agent")}} that can only render borders with a whole-number pixel width may round the thickness of the border to the nearest integer. + +## Calculating a property's actual value + +The {{glossary("user agent")}} performs four steps to calculate a property's actual (final) value: + +1. First, the [specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) is determined based on the result of [cascading](/en-US/docs/Web/CSS/CSS_cascade/Cascade), [inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance), or using the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value). +2. Next, the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) is calculated according to the specification (for example, a `span` with `position: absolute` will have its computed `display` changed to `block`). +3. Then, layout is calculated, resulting in the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value). +4. Finally, the used value is transformed according to the limitations of the local environment, resulting in the actual value. + +## Specifications + +{{Specifications}} + +## See also + +- CSS key concepts: + - [CSS syntax](/en-US/docs/Web/CSS/Syntax) + - [At-rules](/en-US/docs/Web/CSS/At-rule) + - [Comments](/en-US/docs/Web/CSS/Comments) + - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) + - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) + - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) + - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) + - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) + - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) + - Values + - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) + - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) + - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) + - [Resolved values](/en-US/docs/Web/CSS/resolved_value) + - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) + - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) + - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/css_cascade/cascade/index.md b/files/en-us/web/css/css_cascade/cascade/index.md index 23512a8daf1d480..b81f48a7aa18a3d 100644 --- a/files/en-us/web/css/css_cascade/cascade/index.md +++ b/files/en-us/web/css/css_cascade/cascade/index.md @@ -419,6 +419,6 @@ After your content has finished altering styles, it may find itself in a situati - [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Inheritance](/en-US/docs/Web/CSS/Inheritance) +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [At-rules](/en-US/docs/Web/CSS/At-rule) -- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values +- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values diff --git a/files/en-us/web/css/computed_value/index.md b/files/en-us/web/css/css_cascade/computed_value/index.md similarity index 79% rename from files/en-us/web/css/computed_value/index.md rename to files/en-us/web/css/css_cascade/computed_value/index.md index 67e43a2bec46739..c4c23b5f0084155 100644 --- a/files/en-us/web/css/computed_value/index.md +++ b/files/en-us/web/css/css_cascade/computed_value/index.md @@ -1,23 +1,25 @@ --- title: Computed value -slug: Web/CSS/computed_value +slug: Web/CSS/CSS_cascade/computed_value page-type: guide -spec-urls: https://www.w3.org/TR/CSS22/cascade.html#computed-value +spec-urls: + - https://www.w3.org/TR/CSS22/cascade.html#computed-value + - https://drafts.csswg.org/css-cascade-5/#computed-value --- {{CSSRef}} -The **computed value** of a [CSS](/en-US/docs/Web/CSS) property is the value that is transferred from parent to child during inheritance. It is calculated from the [specified value](/en-US/docs/Web/CSS/specified_value) by: +The **computed value** of a [CSS](/en-US/docs/Web/CSS) property is the value that is transferred from parent to child during inheritance. It is calculated from the [specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) by: 1. Handling the special values {{cssxref("inherit")}}, {{cssxref("initial")}}, {{cssxref("revert")}}, {{cssxref("revert-layer")}}, and {{cssxref("unset")}}. 2. Doing the computation needed to reach the value described in the "Computed value" line in the property's definition table. The computation needed to reach a property's computed value typically involves converting relative values (such as those in `em` units or percentages) to absolute values. For example, if an element has specified values `font-size: 16px` and `padding-top: 2em`, then the computed value of `padding-top` is `32px` (double the font size). -However, for some properties (those where percentages are relative to something that may require layout to determine, such as `width`, `margin-right`, `text-indent`, and `top`), percentage-specified values turn into percentage-computed values. Additionally, unitless numbers specified on the `line-height` property become the computed value, as specified. The relative values that remain in the computed value become absolute when the [used value](/en-US/docs/Web/CSS/used_value) is determined. +However, for some properties (those where percentages are relative to something that may require layout to determine, such as `width`, `margin-right`, `text-indent`, and `top`), percentage-specified values turn into percentage-computed values. Additionally, unitless numbers specified on the `line-height` property become the computed value, as specified. The relative values that remain in the computed value become absolute when the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) is determined. > [!NOTE] -> The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the [resolved value](/en-US/docs/Web/CSS/resolved_value), which may either be the computed value or the [used value](/en-US/docs/Web/CSS/used_value), depending on the property. +> The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the [resolved value](/en-US/docs/Web/CSS/resolved_value), which may either be the computed value or the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value), depending on the property. ## Specifications @@ -31,16 +33,16 @@ However, for some properties (those where percentages are relative to something - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - - [Inheritance](/en-US/docs/Web/CSS/Inheritance) + - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - Values - - [Initial values](/en-US/docs/Web/CSS/initial_value) - - [Used values](/en-US/docs/Web/CSS/used_value) + - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) + - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) - [Resolved values](/en-US/docs/Web/CSS/resolved_value) - - [Actual values](/en-US/docs/Web/CSS/actual_value) + - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/css_cascade/index.md b/files/en-us/web/css/css_cascade/index.md index cc85a6624e08d31..ab8fd4cf01db94b 100644 --- a/files/en-us/web/css/css_cascade/index.md +++ b/files/en-us/web/css/css_cascade/index.md @@ -46,25 +46,22 @@ The opposite also occurs. Sometimes there are no declarations defining the value - {{DOMXRef("CSSLayerStatementRule")}} - {{DOMXRef("CSSRule")}} -### Key concepts and definitions - -- [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Cascade origin and importance](/en-US/docs/Web/CSS/CSS_cascade/Cascade) -- [Values](/en-US/docs/Web/CSS/Value_definition_syntax) - - [actual value](/en-US/docs/Web/CSS/actual_value) - - [computed value](/en-US/docs/Web/CSS/computed_value) - - [initial value](/en-US/docs/Web/CSS/initial_value) - - [resolved value](/en-US/docs/Web/CSS/resolved_value) - - [specified value](/en-US/docs/Web/CSS/specified_value) - - [used value](/en-US/docs/Web/CSS/used_value) -- [Origin types](/en-US/docs/Web/CSS/CSS_cascade/Cascade#origin_types) - - [user-agent origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets) - - [author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets) - - [user origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets) -- [Declaring layers](/en-US/docs/Web/CSS/@import#importing_css_rules_into_a_cascade_layer) - - [named layer](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_statement_at-rule_for_named_layers) - - [anonymous layer](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_block_at-rule_for_named_and_anonymous_layers) -- Glossary: {{glossary("style origin")}} +### Glossary and definitions + +- [Actual value](/en-US/docs/Web/CSS/CSS_cascade/actual_value) +- [Anonymous layer](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_block_at-rule_for_named_and_anonymous_layers) +- [Author origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#author_stylesheets) +- [Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) +- [Computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) +- [Initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) +- [Named layer](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#the_layer_statement_at-rule_for_named_layers) +- [Resolved value](/en-US/docs/Web/CSS/resolved_value) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) +- [Specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) +- {{glossary("style origin")}} +- [Used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) +- [User origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user_stylesheets) +- [User-agent origin](/en-US/docs/Web/CSS/CSS_cascade/Cascade#user-agent_stylesheets) ## Guides @@ -72,6 +69,10 @@ The opposite also occurs. Sometimes there are no declarations defining the value - : Guide to the cascade algorithm that defines how user agents combine property values originating from different sources. +- [CSS inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) + + - : A guide to CSS inheritance. + - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - : The most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved. @@ -80,14 +81,12 @@ The opposite also occurs. Sometimes there are no declarations defining the value - : Introduction to [cascade layers](/en-US/docs/Web/CSS/@layer), a more advanced feature that builds on the fundamental concepts of the [CSS cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) and [CSS specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). -- [CSS inheritance](/en-US/docs/Web/CSS/Inheritance) - - : A guide to CSS inheritance. - ## Related concepts - [Element-attached styles](/en-US/docs/Web/HTML/Global_attributes/style) - [Inline styles and the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade#inline_styles) - [Conditional rules for @imports](/en-US/docs/Web/CSS/@import#importing_css_rules_conditional_on_media_queries) +- [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) ## Specifications diff --git a/files/en-us/web/css/inheritance/index.md b/files/en-us/web/css/css_cascade/inheritance/index.md similarity index 83% rename from files/en-us/web/css/inheritance/index.md rename to files/en-us/web/css/css_cascade/inheritance/index.md index b5c40bde91c9823..5aaf88523fe2aed 100644 --- a/files/en-us/web/css/inheritance/index.md +++ b/files/en-us/web/css/css_cascade/inheritance/index.md @@ -1,7 +1,8 @@ --- title: Inheritance -slug: Web/CSS/Inheritance +slug: Web/CSS/CSS_cascade/Inheritance page-type: guide +spec-urls: https://drafts.csswg.org/css-cascade-5/#css-inheritance --- {{CSSRef}} @@ -10,14 +11,14 @@ In CSS, **inheritance** controls what happens when no value is specified for a p CSS properties can be categorized in two types: -- **inherited properties**, which by default are set to the [computed value](/en-US/docs/Web/CSS/computed_value) of the parent element -- **non-inherited properties**, which by default are set to [initial value](/en-US/docs/Web/CSS/initial_value) of the property +- **inherited properties**, which by default are set to the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of the parent element +- **non-inherited properties**, which by default are set to [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) of the property Refer to [any CSS property](/en-US/docs/Web/CSS/Reference#index) definition to see whether a specific property inherits by default ("Inherited: yes") or not ("Inherited: no"). ## Inherited properties -When no value for an **inherited property** has been specified on an element, the element gets the [computed value](/en-US/docs/Web/CSS/computed_value) of that property on its parent element. Only the root element of the document gets the [initial value](/en-US/docs/Web/CSS/initial_value) given in the property's summary. +When no value for an **inherited property** has been specified on an element, the element gets the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of that property on its parent element. Only the root element of the document gets the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) given in the property's summary. A typical example of an inherited property is the [`color`](/en-US/docs/Web/CSS/color) property. Consider the following style rules and the markup: @@ -37,7 +38,7 @@ The words "emphasized text" will appear green, since the `em` element has inheri ## Non-inherited properties -When no value for a **non-inherited property** has been specified on an element, the element gets the [initial value](/en-US/docs/Web/CSS/initial_value) of that property (as specified in the property's summary). +When no value for a **non-inherited property** has been specified on an element, the element gets the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) of that property (as specified in the property's summary). A typical example of a non-inherited property is the {{ Cssxref("border") }} property. Consider the following style rules and the markup: @@ -104,6 +105,6 @@ We can see here another border around the word "emphasized text". - [CSS syntax](/en-US/docs/Web/CSS/Syntax) guide - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module - [At-rules](/en-US/docs/Web/CSS/At-rule) -- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values +- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [CSS nesting module](/en-US/docs/Web/CSS/CSS_nesting) diff --git a/files/en-us/web/css/initial_value/index.md b/files/en-us/web/css/css_cascade/initial_value/index.md similarity index 59% rename from files/en-us/web/css/initial_value/index.md rename to files/en-us/web/css/css_cascade/initial_value/index.md index 89301b51c656f93..24e2f3a98093af8 100644 --- a/files/en-us/web/css/initial_value/index.md +++ b/files/en-us/web/css/css_cascade/initial_value/index.md @@ -1,16 +1,18 @@ --- title: Initial value -slug: Web/CSS/initial_value +slug: Web/CSS/CSS_cascade/initial_value page-type: guide -spec-urls: https://www.w3.org/TR/CSS22/cascade.html#specified-value +spec-urls: + - https://www.w3.org/TR/CSS22/cascade.html#specified-value + - https://drafts.csswg.org/css-cascade-5/#specified-value --- {{CSSRef}} The **initial value** of a [CSS](/en-US/docs/Web/CSS) property is its default value, as listed in its definition table in the specification. The usage of the initial value depends on whether a property is inherited or not: -- For [inherited properties](/en-US/docs/Web/CSS/Inheritance#inherited_properties), the initial value is used on the _root element only_, as long as no [specified value](/en-US/docs/Web/CSS/specified_value) is supplied. -- For [non-inherited properties](/en-US/docs/Web/CSS/Inheritance#non-inherited_properties), the initial value is used on _all elements_, as long as no [specified value](/en-US/docs/Web/CSS/specified_value) is supplied. +- For [inherited properties](/en-US/docs/Web/CSS/CSS_cascade/Inheritance#inherited_properties), the initial value is used on the _root element only_, as long as no [specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) is supplied. +- For [non-inherited properties](/en-US/docs/Web/CSS/CSS_cascade/Inheritance#non-inherited_properties), the initial value is used on _all elements_, as long as no [specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) is supplied. You can explicitly specify the initial value by using the {{cssxref("initial")}} keyword. @@ -29,16 +31,16 @@ You can explicitly specify the initial value by using the {{cssxref("initial")}} - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - - [Inheritance](/en-US/docs/Web/CSS/Inheritance) + - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - Values - - [Computed values](/en-US/docs/Web/CSS/computed_value) - - [Used values](/en-US/docs/Web/CSS/used_value) + - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) + - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) - [Resolved values](/en-US/docs/Web/CSS/resolved_value) - - [Actual values](/en-US/docs/Web/CSS/actual_value) + - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/css_cascade/specificity/index.md b/files/en-us/web/css/css_cascade/specificity/index.md index 7ec7cd0dff83db2..1182ac98738ae77 100644 --- a/files/en-us/web/css/css_cascade/specificity/index.md +++ b/files/en-us/web/css/css_cascade/specificity/index.md @@ -499,8 +499,8 @@ A few things to remember about specificity: - [CSS syntax](/en-US/docs/Web/CSS/CSS_syntax) module - [CSS error handling](/en-US/docs/Web/CSS/CSS_syntax/Error_handling) - [At-rules](/en-US/docs/Web/CSS/At-rule) -- [Inheritance](/en-US/docs/Web/CSS/Inheritance) -- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) +- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) diff --git a/files/en-us/web/css/specified_value/index.md b/files/en-us/web/css/css_cascade/specified_value/index.md similarity index 77% rename from files/en-us/web/css/specified_value/index.md rename to files/en-us/web/css/css_cascade/specified_value/index.md index 043429f4d9dea55..375e644b69e416b 100644 --- a/files/en-us/web/css/specified_value/index.md +++ b/files/en-us/web/css/css_cascade/specified_value/index.md @@ -1,8 +1,10 @@ --- title: Specified value -slug: Web/CSS/specified_value +slug: Web/CSS/CSS_cascade/specified_value page-type: guide -spec-urls: https://www.w3.org/TR/CSS22/cascade.html#specified-value +spec-urls: + - https://www.w3.org/TR/CSS22/cascade.html#specified-value + - https://drafts.csswg.org/css-cascade-5/#specified-value --- {{CSSRef}} @@ -11,7 +13,7 @@ The **specified value** of a [CSS](/en-US/docs/Web/CSS) property is the value it 1. If the document's style sheet explicitly specifies a value for the property, the given value will be used. 2. If the document's style sheet doesn't specify a value but it is an inherited property, the value will be taken from the parent element. -3. If none of the above apply, the element's [initial value](/en-US/docs/Web/CSS/initial_value) will be used. +3. If none of the above apply, the element's [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) will be used. ## Examples @@ -58,14 +60,14 @@ p { ## See also - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Inheritance](/en-US/docs/Web/CSS/Inheritance) +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) -- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values +- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/used_value/index.md b/files/en-us/web/css/css_cascade/used_value/index.md similarity index 86% rename from files/en-us/web/css/used_value/index.md rename to files/en-us/web/css/css_cascade/used_value/index.md index 1bbcb80e0457f81..87687b5b69be7a2 100644 --- a/files/en-us/web/css/used_value/index.md +++ b/files/en-us/web/css/css_cascade/used_value/index.md @@ -1,18 +1,20 @@ --- title: Used value -slug: Web/CSS/used_value +slug: Web/CSS/CSS_cascade/used_value page-type: guide -spec-urls: https://www.w3.org/TR/CSS22/cascade.html#used-value +spec-urls: + - https://www.w3.org/TR/CSS22/cascade.html#used-value + - https://drafts.csswg.org/css-cascade-5/#used-value --- {{CSSRef}} -The **used value** of a [CSS](/en-US/docs/Web/CSS) property is its value after all calculations have been performed on the [computed value](/en-US/docs/Web/CSS/computed_value). +The **used value** of a [CSS](/en-US/docs/Web/CSS) property is its value after all calculations have been performed on the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value). After the {{glossary("user agent")}} has finished its calculations, every CSS property has a used value. The used values of dimensions (e.g., {{cssxref("width")}}, {{cssxref("line-height")}}) are in pixels. The used values of shorthand properties (e.g., {{cssxref("background")}}) are consistent with those of their component properties (e.g., {{cssxref("background-color")}} or {{cssxref("background-size")}}) and with {{cssxref("position")}} and {{cssxref("float")}}. > [!NOTE] -> The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the [resolved value](/en-US/docs/Web/CSS/resolved_value), which may either be the [computed value](/en-US/docs/Web/CSS/computed_value) or the used value, depending on the property. +> The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API returns the [resolved value](/en-US/docs/Web/CSS/resolved_value), which may either be the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) or the used value, depending on the property. ## Example @@ -106,16 +108,16 @@ CSS 2.0 defined only _computed value_ as the last step in a property's calculati - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [Comments](/en-US/docs/Web/CSS/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - - [Inheritance](/en-US/docs/Web/CSS/Inheritance) + - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - Values - - [Initial values](/en-US/docs/Web/CSS/initial_value) - - [Computed values](/en-US/docs/Web/CSS/computed_value) + - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) + - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) - [Resolved values](/en-US/docs/Web/CSS/resolved_value) - - [Actual values](/en-US/docs/Web/CSS/actual_value) + - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md b/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md index 979546dc91cdff2..3851ca341632f8e 100644 --- a/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md +++ b/files/en-us/web/css/css_cascading_variables/using_css_custom_properties/index.md @@ -465,7 +465,7 @@ However, when the values of custom properties are parsed, the browser doesn't ye Unfortunately, these valid values can be used, via the `var()` functional notation, in a context where they might not make sense. Properties and custom variables can lead to invalid CSS statements, leading to the concept of _valid at computed time_. -When the browser encounters an invalid `var()` substitution, then the [initial](/en-US/docs/Web/CSS/initial_value) or [inherited](/en-US/docs/Web/CSS/Inheritance) value of the property is used. +When the browser encounters an invalid `var()` substitution, then the [initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value) or [inherited](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) value of the property is used. This example is just like the last one, except we use a custom property. The browser substitutes the value of `--text-color` in place of `var(--text-color)`, but `16px` is not a valid property value for {{cssxref("color")}}. diff --git a/files/en-us/web/css/css_display/block_formatting_context/index.md b/files/en-us/web/css/css_display/block_formatting_context/index.md index 7ba276efb843663..8dc38c47e3b53d0 100644 --- a/files/en-us/web/css/css_display/block_formatting_context/index.md +++ b/files/en-us/web/css/css_display/block_formatting_context/index.md @@ -229,11 +229,11 @@ In this example, we wrap the second `
` in an outer `
`, and create a ne - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Inheritance](/en-US/docs/Web/CSS/Inheritance) +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) -- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used values](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values +- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used values](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/css_display/containing_block/index.md b/files/en-us/web/css/css_display/containing_block/index.md index 5a935af1656006e..5ac3346007e3a90 100644 --- a/files/en-us/web/css/css_display/containing_block/index.md +++ b/files/en-us/web/css/css_display/containing_block/index.md @@ -265,6 +265,6 @@ p { - [Block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) - [Stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) -- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values +- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) - {{glossary("Intrinsic size")}} diff --git a/files/en-us/web/css/css_functions/index.md b/files/en-us/web/css/css_functions/index.md index 8f9ff12a86a3cc4..a0c4caef778be9a 100644 --- a/files/en-us/web/css/css_functions/index.md +++ b/files/en-us/web/css/css_functions/index.md @@ -6,7 +6,7 @@ page-type: guide {{CSSRef}} -**CSS value functions** are statements that invoke special data processing or calculations to return a [CSS](/en-US/docs/Web/CSS) [value](/en-US/docs/Web/CSS/CSS_Values_and_Units) for a CSS property. CSS value functions represent more complex [data types](/en-US/docs/Web/CSS/CSS_Types) and they may take some input arguments to calculate the return value. +**CSS value functions** are statements that invoke special data processing or calculations to return a [CSS](/en-US/docs/Web/CSS) [value](/en-US/docs/Web/CSS/CSS_Values_and_Units) for a CSS property. CSS value functions represent more complex [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) and they may take some input arguments to calculate the return value. ## Syntax @@ -25,7 +25,7 @@ Functions can take multiple arguments, which are formatted similarly to CSS prop ## Transform functions -The {{CSSxRef("<transform-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) represent appearance transformation. It is used as a value of {{CSSxRef("transform")}} property. +The {{CSSxRef("<transform-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represent appearance transformation. It is used as a value of {{CSSxRef("transform")}} property. ### Translate functions @@ -157,7 +157,7 @@ Each of the pages below contains detailed information about a math function's sy ## Filter functions -The {{CSSxRef("<filter-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) represents a graphical effect that can change the appearance of an input image. It is used in the {{CSSxRef("filter")}} and {{CSSxRef("backdrop-filter")}} properties. +The {{CSSxRef("<filter-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a graphical effect that can change the appearance of an input image. It is used in the {{CSSxRef("filter")}} and {{CSSxRef("backdrop-filter")}} properties. - {{CSSxRef("filter-function/blur", "blur()")}} - : Increases the image gaussian blur. @@ -182,7 +182,7 @@ The {{CSSxRef("<filter-function>")}} CSS [data type](/en-US/docs/Web/CSS/C ## Color functions -The {{CSSxRef("color_value","<color>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) specifies different color representations. +The {{CSSxRef("color_value","<color>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) specifies different color representations. - {{CSSxRef("color_value/rgb", "rgb()")}} - : Defines a given color according to its red, green, blue and alpha (transparency) components. @@ -209,7 +209,7 @@ The {{CSSxRef("color_value","<color>")}} CSS [data type](/en-US/docs/Web/C ## Image functions -The {{CSSxRef("<image>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) provides graphical representation of images or gradients. +The {{CSSxRef("<image>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) provides graphical representation of images or gradients. ### Gradient functions @@ -252,7 +252,7 @@ CSS counter functions are generally used with the {{CSSxRef("content")}} propert ## Shape functions -The {{CSSxRef("<basic-shape>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) represents a graphical shape. It is used in the {{CSSxRef("clip-path")}}, {{CSSxRef("offset-path")}}, and {{CSSxRef("shape-outside")}} properties. +The {{CSSxRef("<basic-shape>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a graphical shape. It is used in the {{CSSxRef("clip-path")}}, {{CSSxRef("offset-path")}}, and {{CSSxRef("shape-outside")}} properties. - {{CSSxRef("basic-shape/circle","circle()")}} - : Defines a circle shape. @@ -316,7 +316,7 @@ CSS font functions are used with the {{CSSxRef("font-variant-alternates")}} prop ## Easing functions -The {{CSSxRef("<easing-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Types) represents a mathematical function. It is used in transition and animation properties: +The {{CSSxRef("<easing-function>")}} CSS [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a mathematical function. It is used in transition and animation properties: - {{cssxref("easing-function/linear", "linear()")}} - : Easing function that interpolates linearly between its points. diff --git a/files/en-us/web/css/css_syntax/error_handling/index.md b/files/en-us/web/css/css_syntax/error_handling/index.md index 6f0e6268fe80645..693bf984e3bb2fd 100644 --- a/files/en-us/web/css/css_syntax/error_handling/index.md +++ b/files/en-us/web/css/css_syntax/error_handling/index.md @@ -171,7 +171,7 @@ Custom properties are generally considered valid when declared, but may create i Generally, when a property value is invalid, the declaration is ignored and the property falls back to the last valid value. Invalid computed custom property values, however, work slightly differently. -When a `var()` substitution is invalid, the declaration is not ignored and the [initial](/en-US/docs/Web/CSS/initial_value) or [inherited](/en-US/docs/Web/CSS/Inheritance) value of the property is used instead. The property is set to a new value, but possibly not the expected one. +When a `var()` substitution is invalid, the declaration is not ignored and the [initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value) or [inherited](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) value of the property is used instead. The property is set to a new value, but possibly not the expected one. Let's look at an example to illustrate this behavior: diff --git a/files/en-us/web/css/css_syntax/index.md b/files/en-us/web/css/css_syntax/index.md index 16fc1bca2356a62..ff04a16592edbc9 100644 --- a/files/en-us/web/css/css_syntax/index.md +++ b/files/en-us/web/css/css_syntax/index.md @@ -9,7 +9,7 @@ spec-urls: https://drafts.csswg.org/css-syntax The **CSS syntax** module describes, in general terms, the structure and syntax of cascading stylesheets, or CSS. It defines CSS as the language for describing the rendering of structured documents (such as HTML and XML), on the web and elsewhere. -This module doesn't define any properties, [data types](/en-US/docs/Web/CSS/CSS_Types), [functions](/en-US/docs/Web/CSS/CSS_Functions), or [at-rules](/en-US/docs/Web/CSS/At-rule). Rather, it elaborates on how all of these features should be defined and how user agents should parse CSS. +This module doesn't define any properties, [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types), [functions](/en-US/docs/Web/CSS/CSS_Functions), or [at-rules](/en-US/docs/Web/CSS/At-rule). Rather, it elaborates on how all of these features should be defined and how user agents should parse CSS. ## At-rules @@ -66,11 +66,11 @@ This module doesn't define any properties, [data types](/en-US/docs/Web/CSS/CSS_ - {{cssxref("@import")}} at-rule - {{cssxref("important")}} flag -- [Initial values](/en-US/docs/Web/CSS/initial_value) -- [Computed values](/en-US/docs/Web/CSS/computed_value) -- [Used values](/en-US/docs/Web/CSS/used_value) -- [Actual values](/en-US/docs/Web/CSS/actual_value) -- [CSS inheritance](/en-US/docs/Web/CSS/Inheritance) +- [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) +- [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) +- [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) +- [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) +- [CSS inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - {{Glossary("Property/CSS", "CSS property")}} [CSS custom properties for cascading variables](/en-US/docs/Web/CSS/CSS_cascading_variables) module: diff --git a/files/en-us/web/css/css_types/index.md b/files/en-us/web/css/css_values_and_units/css_data_types/index.md similarity index 99% rename from files/en-us/web/css/css_types/index.md rename to files/en-us/web/css/css_values_and_units/css_data_types/index.md index 77810445ec76127..89c839285fcf179 100644 --- a/files/en-us/web/css/css_types/index.md +++ b/files/en-us/web/css/css_values_and_units/css_data_types/index.md @@ -1,6 +1,6 @@ --- title: CSS data types -slug: Web/CSS/CSS_Types +slug: Web/CSS/CSS_Values_and_Units/CSS_data_types page-type: guide spec-urls: https://drafts.csswg.org/css-values/ --- diff --git a/files/en-us/web/css/css_values_and_units/index.md b/files/en-us/web/css/css_values_and_units/index.md index 52cb46fd2506eb6..a0d8138bb588016 100644 --- a/files/en-us/web/css/css_values_and_units/index.md +++ b/files/en-us/web/css/css_values_and_units/index.md @@ -326,6 +326,6 @@ Some legacy functional notations, such as legacy syntax for `rgb()`, `rgba()`, ` ## See also -- [CSS Basic Data Types](/en-US/docs/Web/CSS/CSS_Types) +- [CSS Basic Data Types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) - [Learn: Values and units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units) - [Trigonometric functions in CSS](https://web.dev/articles/css-trig-functions) diff --git a/files/en-us/web/css/custom-ident/index.md b/files/en-us/web/css/custom-ident/index.md index d8a99868c3a3b18..80e15aa0f023018 100644 --- a/files/en-us/web/css/custom-ident/index.md +++ b/files/en-us/web/css/custom-ident/index.md @@ -11,7 +11,7 @@ spec-urls: {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) denotes an arbitrary user-defined string used as an {{glossary("identifier")}}. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) denotes an arbitrary user-defined string used as an {{glossary("identifier")}}. It is case-sensitive, and certain values are forbidden in various contexts to prevent ambiguity. ## Syntax diff --git a/files/en-us/web/css/dashed-ident/index.md b/files/en-us/web/css/dashed-ident/index.md index b0d2c914d2231ad..1459614c464e82a 100644 --- a/files/en-us/web/css/dashed-ident/index.md +++ b/files/en-us/web/css/dashed-ident/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-values/#dashed-idents {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) denotes an arbitrary string used as an {{glossary("identifier")}}. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) denotes an arbitrary string used as an {{glossary("identifier")}}. ## Syntax diff --git a/files/en-us/web/css/dimension/index.md b/files/en-us/web/css/dimension/index.md index 7b8d9a7ff3543e9..91283d153228bbd 100644 --- a/files/en-us/web/css/dimension/index.md +++ b/files/en-us/web/css/dimension/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.dimension {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a {{CSSxRef("<number>")}} with a unit attached to it, for example `10px`. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a {{CSSxRef("<number>")}} with a unit attached to it, for example `10px`. CSS uses dimensions to specify distances ({{CSSxRef("<length>")}}), durations ({{CSSxRef("<time>")}}), frequencies ({{CSSxRef("<frequency>")}}), resolutions ({{CSSxRef("<resolution>")}}), and other quantities. @@ -47,6 +47,6 @@ The syntax of `` is a {{CSSxRef("<number>")}} immediately follo ## See also -- [CSS data types](/en-US/docs/Web/CSS/CSS_Types) +- [CSS data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) - [Learn to style HTML using CSS](/en-US/docs/Learn_web_development/Core/Styling_basics) - CSS distances ({{CSSxRef("<length>")}}), durations ({{CSSxRef("<time>")}}), frequencies ({{CSSxRef("<frequency>")}}), and resolutions ({{CSSxRef("<resolution>")}}) diff --git a/files/en-us/web/css/direction/index.md b/files/en-us/web/css/direction/index.md index 2da05fbf22ef670..fe7fbe964cc2980 100644 --- a/files/en-us/web/css/direction/index.md +++ b/files/en-us/web/css/direction/index.md @@ -10,17 +10,17 @@ browser-compat: css.properties.direction > [!WARNING] > Where possible, authors are encouraged to avoid using the `direction` CSS property and use the HTML [`dir`](/en-US/docs/Web/HTML/Global_attributes/dir) global attribute instead. -The **`direction`** [CSS](/en-US/docs/Web/CSS) property sets the direction of text, table columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages). +The **`direction`** [CSS](/en-US/docs/Web/CSS) property sets the direction of text, table and grid columns, and horizontal overflow. Use `rtl` for languages written from right to left (like Hebrew or Arabic), and `ltr` for those written from left to right (like English and most other languages). {{EmbedInteractiveExample("pages/css/direction.html")}} Note that text direction is usually defined within a document (e.g., with [HTML's `dir` attribute](/en-US/docs/Web/HTML/Global_attributes/dir)) rather than through direct use of the `direction` property. -The property sets the base text direction of block-level elements and the direction of embeddings created by the {{Cssxref("unicode-bidi")}} property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table row. +The property sets the base text direction of block-level elements and the direction of embeddings created by the {{Cssxref("unicode-bidi")}} property. It also sets the default alignment of text, block-level elements, and the direction that cells flow within a table or grid row. Unlike the `dir` attribute in HTML, the `direction` property is not inherited from table columns into table cells, since CSS inheritance follows the document tree, and table cells are inside of rows but not inside of columns. -The `direction` and {{cssxref("unicode-bidi")}} properties are the two only properties which are not affected by the {{cssxref("all")}} shorthand property. +The `direction` and {{cssxref("unicode-bidi")}} properties are the only two properties which are not affected by the {{cssxref("all")}} shorthand property. ## Syntax diff --git a/files/en-us/web/css/easing-function/index.md b/files/en-us/web/css/easing-function/index.md index 4e1c2cb5667c93d..b5b5766c02df146 100644 --- a/files/en-us/web/css/easing-function/index.md +++ b/files/en-us/web/css/easing-function/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.easing-function {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a mathematical function that describes the rate at which a value changes. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a mathematical function that describes the rate at which a value changes. This transition between two values may be applied in different situations. It may be used to describe how fast values change during animations. This lets you vary the animation's speed over the course of its duration. You can specify an easing function for CSS [transition](/en-US/docs/Web/CSS/transition-timing-function) and [animation](/en-US/docs/Web/CSS/animation-timing-function) properties. diff --git a/files/en-us/web/css/filter-function/index.md b/files/en-us/web/css/filter-function/index.md index 65991210b960baf..b7dd1edff5663bb 100644 --- a/files/en-us/web/css/filter-function/index.md +++ b/files/en-us/web/css/filter-function/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.filter-function {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a graphical effect that can change the appearance of an input image. It is used in the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a graphical effect that can change the appearance of an input image. It is used in the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties. ## Syntax diff --git a/files/en-us/web/css/flex_value/index.md b/files/en-us/web/css/flex_value/index.md index 62202603bb863fd..82babff399589eb 100644 --- a/files/en-us/web/css/flex_value/index.md +++ b/files/en-us/web/css/flex_value/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.flex {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) denotes a flexible length within a grid container. It is used in {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} and other related properties. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) denotes a flexible length within a grid container. It is used in {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}} and other related properties. ## Syntax diff --git a/files/en-us/web/css/forced-color-adjust/index.md b/files/en-us/web/css/forced-color-adjust/index.md index 5d1b9f9c76362df..88b7203172a5ab8 100644 --- a/files/en-us/web/css/forced-color-adjust/index.md +++ b/files/en-us/web/css/forced-color-adjust/index.md @@ -33,7 +33,7 @@ The `forced-color-adjust` property's value must be one of the following keywords - `none` - : The element's colors are not automatically adjusted by the {{Glossary("user agent")}} in forced colors mode. - `preserve-parent-color` - - : In forced colors mode, if the {{cssxref("color")}} property inherits from its parent (i.e. there is no [cascaded value](/en-US/docs/Web/CSS/CSS_cascade/Cascade) or the cascaded value is `currentcolor`, {{cssxref("inherit")}}, or another keyword that inherits from the parent), then it computes to the [used color](/en-US/docs/Web/CSS/used_value) of its parent's `color` property. In all other cases, it behaves the same as `none`. + - : In forced colors mode, if the {{cssxref("color")}} property inherits from its parent (i.e. there is no [cascaded value](/en-US/docs/Web/CSS/CSS_cascade/Cascade) or the cascaded value is `currentcolor`, {{cssxref("inherit")}}, or another keyword that inherits from the parent), then it computes to the [used color](/en-US/docs/Web/CSS/CSS_cascade/used_value) of its parent's `color` property. In all other cases, it behaves the same as `none`. ## Usage notes diff --git a/files/en-us/web/css/frequency-percentage/index.md b/files/en-us/web/css/frequency-percentage/index.md index b3bf7c41e632a3e..e07eb5ea47ba899 100644 --- a/files/en-us/web/css/frequency-percentage/index.md +++ b/files/en-us/web/css/frequency-percentage/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-values/#typedef-frequency-percentage {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{Cssxref("frequency")}} or a {{Cssxref("percentage")}}. Frequency values, e.g. the pitch of a speaking voice, are not currently used in any CSS properties. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a value that can be either a {{Cssxref("frequency")}} or a {{Cssxref("percentage")}}. Frequency values, e.g. the pitch of a speaking voice, are not currently used in any CSS properties. ## Syntax @@ -67,7 +67,7 @@ No browser currently supports this feature. ## See also -- [CSS data types](/en-US/docs/Web/CSS/CSS_Types) +- [CSS data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) - [CSS Values and Units](/en-US/docs/Web/CSS/CSS_Values_and_Units) - Related CSS data types: diff --git a/files/en-us/web/css/frequency/index.md b/files/en-us/web/css/frequency/index.md index 5fa4dde4179e5ec..191d923c8783957 100644 --- a/files/en-us/web/css/frequency/index.md +++ b/files/en-us/web/css/frequency/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-values/#frequency-value {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a frequency dimension, such as the pitch of a speaking voice. It is not currently used in any CSS properties. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a frequency dimension, such as the pitch of a speaking voice. It is not currently used in any CSS properties. ## Syntax diff --git a/files/en-us/web/css/generic-family/index.md b/files/en-us/web/css/generic-family/index.md index 03798f6fdf35770..eab016af98a2255 100644 --- a/files/en-us/web/css/generic-family/index.md +++ b/files/en-us/web/css/generic-family/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-fonts/#generic-font-families {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the keyword values for generic font families used in the {{cssxref("font")}} shorthand and {{cssxref("font-family")}} longhand properties. The `` represents one or more locally-installed fonts belonging to that category of fonts. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents the keyword values for generic font families used in the {{cssxref("font")}} shorthand and {{cssxref("font-family")}} longhand properties. The `` represents one or more locally-installed fonts belonging to that category of fonts. ## Syntax diff --git a/files/en-us/web/css/gradient/index.md b/files/en-us/web/css/gradient/index.md index 23125a207a0e71b..9399c1a32f634d0 100644 --- a/files/en-us/web/css/gradient/index.md +++ b/files/en-us/web/css/gradient/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.gradient {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) is a special type of {{cssxref("<image>")}} that consists of a progressive transition between two or more colors. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) is a special type of {{cssxref("<image>")}} that consists of a progressive transition between two or more colors. {{EmbedInteractiveExample("pages/css/type-gradient.html")}} @@ -188,6 +188,6 @@ span { - [Using CSS gradients](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) - Gradient functions: {{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()")}}, {{cssxref("gradient/conic-gradient", "conic-gradient()")}}, {{cssxref("gradient/repeating-conic-gradient", "repeating-conic-gradient()")}} -- [CSS Basic Data Types](/en-US/docs/Web/CSS/CSS_Types) +- [CSS Basic Data Types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) - [CSS Units and Values](/en-US/docs/Web/CSS/CSS_Values_and_Units) - [Learn: Values and Units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units) diff --git a/files/en-us/web/css/hex-color/index.md b/files/en-us/web/css/hex-color/index.md index 80389cf64ce349e..9307e5faf0b19f1 100644 --- a/files/en-us/web/css/hex-color/index.md +++ b/files/en-us/web/css/hex-color/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.color.rgb_hexadecimal_notation {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) is a notation for describing the _hexadecimal color syntax_ of an [sRGB](/en-US/docs/Glossary/RGB) color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) is a notation for describing the _hexadecimal color syntax_ of an [sRGB](/en-US/docs/Glossary/RGB) color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency. A `` value can be used everywhere where a [``](/en-US/docs/Web/CSS/color_value) can be used. diff --git a/files/en-us/web/css/hue-interpolation-method/index.md b/files/en-us/web/css/hue-interpolation-method/index.md index 17f78f814393228..e18948d219a102c 100644 --- a/files/en-us/web/css/hue-interpolation-method/index.md +++ b/files/en-us/web/css/hue-interpolation-method/index.md @@ -15,7 +15,7 @@ spec-urls: https://drafts.csswg.org/css-color/#hue-interpolation {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the algorithm used for interpolation between {{CSSXref("<hue>")}} values. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents the algorithm used for interpolation between {{CSSXref("<hue>")}} values. The interpolation method specifies how to find a midpoint between two hue values based on a color wheel. It is used as a component of the {{CSSXref("<color-interpolation-method>")}} data type. diff --git a/files/en-us/web/css/hue/index.md b/files/en-us/web/css/hue/index.md index 1b2737c0c7e6835..5aaf5ee87beb353 100644 --- a/files/en-us/web/css/hue/index.md +++ b/files/en-us/web/css/hue/index.md @@ -12,7 +12,7 @@ spec-urls: https://drafts.csswg.org/css-color/#typedef-hue {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents the hue angle of a color. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents the hue angle of a color. It is used in the color functions that accept hue expressed as a single value, specifically [`hsl()`](/en-US/docs/Web/CSS/color_value/hsl), [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb), [`lch()`](/en-US/docs/Web/CSS/color_value/lch), and [`oklch()`](/en-US/docs/Web/CSS/color_value/oklch) functional notations. ## Syntax diff --git a/files/en-us/web/css/hypot/index.md b/files/en-us/web/css/hypot/index.md index aa453116003bff2..629563ec129ed25 100644 --- a/files/en-us/web/css/hypot/index.md +++ b/files/en-us/web/css/hypot/index.md @@ -9,7 +9,7 @@ browser-compat: css.types.hypot The **`hypot()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) is an exponential function that returns the [square root](https://en.wikipedia.org/wiki/Square_root) of the sum of squares of its parameters. -While {{CSSxRef("pow")}} and {{CSSxRef("sqrt")}} only work on unitless numbers, `hypot()` accepts values with units, but they all must have the same [type](/en-US/docs/Web/CSS/CSS_Types). +While {{CSSxRef("pow")}} and {{CSSxRef("sqrt")}} only work on unitless numbers, `hypot()` accepts values with units, but they all must have the same [type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types). ## Syntax diff --git a/files/en-us/web/css/ident/index.md b/files/en-us/web/css/ident/index.md index 859c071d2937367..2f5f29c93072c96 100644 --- a/files/en-us/web/css/ident/index.md +++ b/files/en-us/web/css/ident/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-values/#typedef-ident {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) denotes an arbitrary string used as an {{glossary("identifier")}}. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) denotes an arbitrary string used as an {{glossary("identifier")}}. ## Syntax diff --git a/files/en-us/web/css/image/index.md b/files/en-us/web/css/image/index.md index fd7ca48ad73a6b2..6e9798dda2bbd84 100644 --- a/files/en-us/web/css/image/index.md +++ b/files/en-us/web/css/image/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.image {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a two-dimensional image. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a two-dimensional image. ## Syntax diff --git a/files/en-us/web/css/index.md b/files/en-us/web/css/index.md index 773250251e09a09..4bb34eb0a387724 100644 --- a/files/en-us/web/css/index.md +++ b/files/en-us/web/css/index.md @@ -28,14 +28,14 @@ After CSS 2.1, the scope of the specification increased significantly and the pr The [CSS reference](/en-US/docs/Web/CSS/Reference) is an exhaustive reference for seasoned Web developers, describing every property and concept of CSS, including: - The [syntax and forms of the language](/en-US/docs/Web/CSS/Syntax) -- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity), [inheritance](/en-US/docs/Web/CSS/Inheritance), and [the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) +- [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity), [inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance), and [the cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [CSS selectors](/en-US/docs/Web/CSS/CSS_selectors), including [pseudo-elements](/en-US/docs/Web/CSS/CSS_pseudo-elements), [nesting](/en-US/docs/Web/CSS/CSS_nesting), [scoping](/en-US/docs/Web/CSS/CSS_scoping) and [shadow parts](/en-US/docs/Web/CSS/CSS_shadow_parts) - [CSS at-rules](/en-US/docs/Web/CSS/At-rule), including [media](/en-US/docs/Web/CSS/CSS_media_queries) and [container](/en-US/docs/Web/CSS/CSS_containment) queries - [CSS units and values](/en-US/docs/Web/CSS/CSS_Values_and_Units) and [functional notations](/en-US/docs/Web/CSS/CSS_Functions) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) and [margin collapse](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - The [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) - [Stacking](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context) and [block-formatting](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) contexts -- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values +- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values - [CSS shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [CSS flexible box](/en-US/docs/Web/CSS/CSS_flexible_box_layout), [multi-column](/en-US/docs/Web/CSS/CSS_multicol_layout) and [grid](/en-US/docs/Web/CSS/CSS_grid_layout) layout - [Animation](/en-US/docs/Web/CSS/CSS_animations), [transitions](/en-US/docs/Web/CSS/CSS_transitions), and [transforms](/en-US/docs/Web/CSS/CSS_transforms) diff --git a/files/en-us/web/css/inherit/index.md b/files/en-us/web/css/inherit/index.md index b361b23ab4587de..c44dc3470f7ce9c 100644 --- a/files/en-us/web/css/inherit/index.md +++ b/files/en-us/web/css/inherit/index.md @@ -7,9 +7,9 @@ browser-compat: css.types.global_keywords.inherit {{CSSRef}} -The **`inherit`** CSS keyword causes the element to take the [computed value](/en-US/docs/Web/CSS/computed_value) of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property {{cssxref("all")}}. +The **`inherit`** CSS keyword causes the element to take the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property {{cssxref("all")}}. -For [inherited properties](/en-US/docs/Web/CSS/Inheritance#inherited_properties), this reinforces the default behavior, and is only needed to override another rule. +For [inherited properties](/en-US/docs/Web/CSS/CSS_cascade/Inheritance#inherited_properties), this reinforces the default behavior, and is only needed to override another rule. > [!NOTE] > Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block. @@ -50,7 +50,7 @@ Then, it would be blue. ## See also -- [Inheritance](/en-US/docs/Web/CSS/Inheritance) +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - Use the {{cssxref("initial")}} keyword to set a property to its initial value. - Use the {{cssxref("revert")}} keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist). - Use the {{cssxref("revert-layer")}} keyword to reset a property to the value established in a previous cascade layer. diff --git a/files/en-us/web/css/initial/index.md b/files/en-us/web/css/initial/index.md index c11f472ac497cf6..d82e40638c0f4f2 100644 --- a/files/en-us/web/css/initial/index.md +++ b/files/en-us/web/css/initial/index.md @@ -7,9 +7,9 @@ browser-compat: css.types.global_keywords.initial {{CSSRef}} -The **`initial`** CSS keyword applies the [initial (or default) value](/en-US/docs/Web/CSS/initial_value) of a property to an element. It can be applied to any CSS property, including the CSS shorthand property {{cssxref("all")}}. With `all` set to `initial`, all CSS properties can be restored to their respective initial values in one go instead of restoring each one separately. +The **`initial`** CSS keyword applies the [initial (or default) value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) of a property to an element. It can be applied to any CSS property, including the CSS shorthand property {{cssxref("all")}}. With `all` set to `initial`, all CSS properties can be restored to their respective initial values in one go instead of restoring each one separately. -On [inherited properties](/en-US/docs/Web/CSS/Inheritance#inherited_properties), the initial value may be unexpected. You should consider using the {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}, or {{cssxref("revert-layer")}} keywords instead. +On [inherited properties](/en-US/docs/Web/CSS/CSS_cascade/Inheritance#inherited_properties), the initial value may be unexpected. You should consider using the {{cssxref("inherit")}}, {{cssxref("unset")}}, {{cssxref("revert")}}, or {{cssxref("revert-layer")}} keywords instead. ## Examples diff --git a/files/en-us/web/css/integer/index.md b/files/en-us/web/css/integer/index.md index 123c8c2e4670d3d..9c70038af06a189 100644 --- a/files/en-us/web/css/integer/index.md +++ b/files/en-us/web/css/integer/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.integer {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) is a special type of {{cssxref("number")}} that represents a positive or negative whole number. Integers can be used in numerous CSS properties and descriptors, such as the {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, and {{cssxref("z-index")}} properties and the {{cssxref("@counter-style/range", "range")}} descriptor. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) is a special type of {{cssxref("number")}} that represents a positive or negative whole number. Integers can be used in numerous CSS properties and descriptors, such as the {{cssxref("column-count")}}, {{cssxref("counter-increment")}}, {{cssxref("grid-column")}}, {{cssxref("grid-row")}}, and {{cssxref("z-index")}} properties and the {{cssxref("@counter-style/range", "range")}} descriptor. ## Syntax diff --git a/files/en-us/web/css/justify-content/index.md b/files/en-us/web/css/justify-content/index.md index 29de2fa6a4b4e3a..b08e4e2c99eaa61 100644 --- a/files/en-us/web/css/justify-content/index.md +++ b/files/en-us/web/css/justify-content/index.md @@ -58,12 +58,12 @@ justify-content: unset; - `flex-start` - - : The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-start side. + - : The items are packed flush to each other toward the start edge of the alignment container on the flex container's main-start side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `start`. - `flex-end` - - : The items are packed flush to each other toward the edge of the alignment container depending on the flex container's main-end side. + - : The items are packed flush to each other at the end edge of the alignment container on the flex container's main-end side. This only applies to flex layout items. For items that are not children of a flex container, this value is treated like `end`. - `center` @@ -72,7 +72,7 @@ justify-content: unset; - `left` - - : The items are packed flush with each other toward the left edge of the alignment container. When the property's horizontal axis is not parallel with the inline axis, such as when [`flex-direction: column;`](/en-US/docs/Web/CSS/flex-direction) is set, this value behaves like `start`. + - : The items are packed flush to each other toward the left edge of the alignment container. When the property's horizontal axis is not parallel with the inline axis, such as when [`flex-direction: column;`](/en-US/docs/Web/CSS/flex-direction) is set, this value behaves like `start`. - `right` diff --git a/files/en-us/web/css/layout_mode/index.md b/files/en-us/web/css/layout_mode/index.md index 48aef3cee552e84..05db363db8ecff7 100644 --- a/files/en-us/web/css/layout_mode/index.md +++ b/files/en-us/web/css/layout_mode/index.md @@ -26,15 +26,15 @@ A [CSS](/en-US/docs/Web/CSS) **layout mode**, sometimes called _layout_, is an a - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - - [Inheritance](/en-US/docs/Web/CSS/Inheritance) + - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - Values - - [Initial values](/en-US/docs/Web/CSS/initial_value) - - [Computed values](/en-US/docs/Web/CSS/computed_value) - - [Used values](/en-US/docs/Web/CSS/used_value) - - [Actual values](/en-US/docs/Web/CSS/actual_value) + - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) + - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) + - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) + - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/length-percentage/index.md b/files/en-us/web/css/length-percentage/index.md index 7fb24ac24af1a15..71eb3244ea1d94a 100644 --- a/files/en-us/web/css/length-percentage/index.md +++ b/files/en-us/web/css/length-percentage/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.length-percentage {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{Cssxref("length")}} or a {{Cssxref("percentage")}}. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a value that can be either a {{Cssxref("length")}} or a {{Cssxref("percentage")}}. ## Syntax diff --git a/files/en-us/web/css/length/index.md b/files/en-us/web/css/length/index.md index 7810f3a33be059b..e3f7ba60fecf843 100644 --- a/files/en-us/web/css/length/index.md +++ b/files/en-us/web/css/length/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.length {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a distance value. Lengths can be used in numerous CSS properties, such as {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, and {{Cssxref("text-shadow")}}. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a distance value. Lengths can be used in numerous CSS properties, such as {{Cssxref("width")}}, {{Cssxref("height")}}, {{Cssxref("margin")}}, {{Cssxref("padding")}}, {{Cssxref("border-width")}}, {{Cssxref("font-size")}}, and {{Cssxref("text-shadow")}}. > [!NOTE] > Although {{cssxref("<percentage>")}} values are usable in some of the same properties that accept `` values, they are not themselves `` values. See {{cssxref("<length-percentage>")}}. @@ -19,7 +19,7 @@ The `` data type consists of a {{cssxref("<number>")}} followed by > [!NOTE] > Some properties allow negative `` values, while others do not. -The [specified value](/en-US/docs/Web/CSS/specified_value) of a length (_specified length_) is represented by its quantity and unit. The [computed value](/en-US/docs/Web/CSS/computed_value) of a length (_computed length_) is the specified length resolved to an absolute length, and its unit is not distinguished. +The [specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) of a length (_specified length_) is represented by its quantity and unit. The [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of a length (_computed length_) is the specified length resolved to an absolute length, and its unit is not distinguished. The `` units can be relative or absolute. Relative lengths represent a measurement in terms of some other distance. Depending on the unit, this distance can be the size of a specific character, the [line height](/en-US/docs/Web/CSS/line-height), or the size of the {{Glossary("viewport")}}. Style sheets that use relative length units can more easily scale from one output environment to another. diff --git a/files/en-us/web/css/max-height/index.md b/files/en-us/web/css/max-height/index.md index a700ed28070c4dc..29ae4ba2416b60a 100644 --- a/files/en-us/web/css/max-height/index.md +++ b/files/en-us/web/css/max-height/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.max-height {{CSSRef}} -The **`max-height`** [CSS](/en-US/docs/Web/CSS) property sets the maximum height of an element. It prevents the [used value](/en-US/docs/Web/CSS/used_value) of the {{cssxref("height")}} property from becoming larger than the value specified for `max-height`. +The **`max-height`** [CSS](/en-US/docs/Web/CSS) property sets the maximum height of an element. It prevents the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) of the {{cssxref("height")}} property from becoming larger than the value specified for `max-height`. {{EmbedInteractiveExample("pages/css/max-height.html")}} diff --git a/files/en-us/web/css/max-width/index.md b/files/en-us/web/css/max-width/index.md index d213d12d0679080..a433464529605ec 100644 --- a/files/en-us/web/css/max-width/index.md +++ b/files/en-us/web/css/max-width/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.max-width {{CSSRef}} -The **`max-width`** [CSS](/en-US/docs/Web/CSS) property sets the maximum width of an element. It prevents the [used value](/en-US/docs/Web/CSS/used_value) of the {{cssxref("width")}} property from becoming larger than the value specified by `max-width`. +The **`max-width`** [CSS](/en-US/docs/Web/CSS) property sets the maximum width of an element. It prevents the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) of the {{cssxref("width")}} property from becoming larger than the value specified by `max-width`. {{EmbedInteractiveExample("pages/css/max-width.html")}} diff --git a/files/en-us/web/css/min-height/index.md b/files/en-us/web/css/min-height/index.md index d23179960a2081a..71ffc70b1a92e0e 100644 --- a/files/en-us/web/css/min-height/index.md +++ b/files/en-us/web/css/min-height/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.min-height {{CSSRef}} -The **`min-height`** [CSS](/en-US/docs/Web/CSS) property sets the minimum height of an element. It prevents the [used value](/en-US/docs/Web/CSS/used_value) of the {{cssxref("height")}} property from becoming smaller than the value specified for `min-height`. +The **`min-height`** [CSS](/en-US/docs/Web/CSS) property sets the minimum height of an element. It prevents the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) of the {{cssxref("height")}} property from becoming smaller than the value specified for `min-height`. {{EmbedInteractiveExample("pages/css/min-height.html")}} diff --git a/files/en-us/web/css/min-width/index.md b/files/en-us/web/css/min-width/index.md index b4cce0990861e79..8f49214a5ecd26e 100644 --- a/files/en-us/web/css/min-width/index.md +++ b/files/en-us/web/css/min-width/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.min-width {{CSSRef}} -The **`min-width`** [CSS](/en-US/docs/Web/CSS) property sets the minimum width of an element. It prevents the [used value](/en-US/docs/Web/CSS/used_value) of the {{cssxref("width")}} property from becoming smaller than the value specified for `min-width`. +The **`min-width`** [CSS](/en-US/docs/Web/CSS) property sets the minimum width of an element. It prevents the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) of the {{cssxref("width")}} property from becoming smaller than the value specified for `min-width`. {{EmbedInteractiveExample("pages/css/min-width.html")}} diff --git a/files/en-us/web/css/named-color/index.md b/files/en-us/web/css/named-color/index.md index d0ad4518fdda630..22addf15c21adca 100644 --- a/files/en-us/web/css/named-color/index.md +++ b/files/en-us/web/css/named-color/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.color.named-color {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) is the name of a color, such as `red`, `blue`, `black`, or `lightseagreen`. Syntactically, a `` is an [``](/en-US/docs/Web/CSS/ident). +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) is the name of a color, such as `red`, `blue`, `black`, or `lightseagreen`. Syntactically, a `` is an [``](/en-US/docs/Web/CSS/ident). A `` value can be used anywhere a [``](/en-US/docs/Web/CSS/color_value) can be used. diff --git a/files/en-us/web/css/number/index.md b/files/en-us/web/css/number/index.md index 1c6bbe63f0bbf60..23cad0056d37016 100644 --- a/files/en-us/web/css/number/index.md +++ b/files/en-us/web/css/number/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.number {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a number, being either an integer or a number with a fractional component. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a number, being either an integer or a number with a fractional component. ## Syntax diff --git a/files/en-us/web/css/outline/index.md b/files/en-us/web/css/outline/index.md index 5f6f3c9e8ed54df..5d3ecf600dbf9da 100644 --- a/files/en-us/web/css/outline/index.md +++ b/files/en-us/web/css/outline/index.md @@ -42,7 +42,7 @@ outline: revert-layer; outline: unset; ``` -The `outline` property may be specified using one, two, or three of the values listed below. The order of the values does not matter. As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/initial_value). +The `outline` property may be specified using one, two, or three of the values listed below. The order of the values does not matter. As with all shorthand properties, any omitted sub-values will be set to their [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value). > [!NOTE] > The outline will be invisible for many elements if its style is not defined. This is because the style defaults to `none`. A notable exception is `input` elements, which are given default styling by browsers. diff --git a/files/en-us/web/css/percentage/index.md b/files/en-us/web/css/percentage/index.md index 4cdc00ce34c010f..06efb0034dc104e 100644 --- a/files/en-us/web/css/percentage/index.md +++ b/files/en-us/web/css/percentage/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.percentage {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("margin")}}, {{CSSxRef("padding")}}, and {{CSSxRef("font-size")}}. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a percentage value. It is often used to define a size as relative to an element's parent object. Numerous properties can use percentages, such as {{CSSxRef("width")}}, {{CSSxRef("height")}}, {{CSSxRef("margin")}}, {{CSSxRef("padding")}}, and {{CSSxRef("font-size")}}. > [!NOTE] > Only calculated values can be inherited. Thus, even if a percentage value is used on the parent property, a real value (such as a width in pixels for a {{CSSxRef("<length>")}} value) will be accessible on the inherited property, not the percentage value. diff --git a/files/en-us/web/css/position-area_value/index.md b/files/en-us/web/css/position-area_value/index.md index 9b7463a0287da60..e3b7eb7f28037d4 100644 --- a/files/en-us/web/css/position-area_value/index.md +++ b/files/en-us/web/css/position-area_value/index.md @@ -9,7 +9,7 @@ browser-compat: css.properties.position-area {{CSSRef}}{{SeeCompatTable}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) defines the cell or spanned cells of a **position-area grid**, a 3x3 grid whose center cell is an anchor element. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) defines the cell or spanned cells of a **position-area grid**, a 3x3 grid whose center cell is an anchor element. The `` keyword values can be set as the value of the {{cssxref("position-area")}} property to place an anchor-positioned element in a specific location relative to its associated anchor element. diff --git a/files/en-us/web/css/position/index.md b/files/en-us/web/css/position/index.md index 62d922e3a4da3f1..ec20242a8b7a623 100644 --- a/files/en-us/web/css/position/index.md +++ b/files/en-us/web/css/position/index.md @@ -63,10 +63,10 @@ position: unset; ### Types of positioning -- A **positioned element** is an element whose [computed](/en-US/docs/Web/CSS/computed_value) `position` value is either `relative`, `absolute`, `fixed`, or `sticky`. (In other words, it's anything except `static`.) -- A **relatively positioned element** is an element whose [computed](/en-US/docs/Web/CSS/computed_value) `position` value is `relative`. The {{Cssxref("top")}} and {{Cssxref("bottom")}} properties specify the vertical offset from its normal position; the {{Cssxref("left")}} and {{Cssxref("right")}} properties specify the horizontal offset. -- An **absolutely positioned element** is an element whose [computed](/en-US/docs/Web/CSS/computed_value) `position` value is `absolute` or `fixed`. The {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, and {{Cssxref("left")}} properties specify offsets from the edges of the element's [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block). (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC) for its contents. -- A **stickily positioned element** is an element whose [computed](/en-US/docs/Web/CSS/computed_value) `position` value is `sticky`. It's treated as relatively positioned until its [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) crosses a specified threshold (such as setting {{Cssxref("top")}} to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block). +- A **positioned element** is an element whose [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value) `position` value is either `relative`, `absolute`, `fixed`, or `sticky`. (In other words, it's anything except `static`.) +- A **relatively positioned element** is an element whose [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value) `position` value is `relative`. The {{Cssxref("top")}} and {{Cssxref("bottom")}} properties specify the vertical offset from its normal position; the {{Cssxref("left")}} and {{Cssxref("right")}} properties specify the horizontal offset. +- An **absolutely positioned element** is an element whose [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value) `position` value is `absolute` or `fixed`. The {{Cssxref("top")}}, {{Cssxref("right")}}, {{Cssxref("bottom")}}, and {{Cssxref("left")}} properties specify offsets from the edges of the element's [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block). (The containing block is the ancestor relative to which the element is positioned.) If the element has margins, they are added to the offset. The element establishes a new [block formatting context](/en-US/docs/Web/CSS/CSS_display/Block_formatting_context) (BFC) for its contents. +- A **stickily positioned element** is an element whose [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value) `position` value is `sticky`. It's treated as relatively positioned until its [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block) crosses a specified threshold (such as setting {{Cssxref("top")}} to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its [containing block](/en-US/docs/Web/CSS/CSS_display/Containing_block). Most of the time, absolutely positioned elements that have {{Cssxref("height")}} and {{Cssxref("width")}} set to `auto` are sized so as to fit their contents. However, non-[replaced](/en-US/docs/Web/CSS/Replaced_element), absolutely positioned elements can be made to fill the available vertical space by specifying both {{Cssxref("top")}} and {{Cssxref("bottom")}} and leaving {{Cssxref("height")}} unspecified (that is, `auto`). They can likewise be made to fill the available horizontal space by specifying both {{Cssxref("left")}} and {{Cssxref("right")}} and leaving {{Cssxref("width")}} as `auto`. diff --git a/files/en-us/web/css/position_value/index.md b/files/en-us/web/css/position_value/index.md index b55fdbc3f8f0c5f..794da846581e950 100644 --- a/files/en-us/web/css/position_value/index.md +++ b/files/en-us/web/css/position_value/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.position {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) denotes a two-dimensional coordinate used to set a location relative to an element box. It is used in the {{cssxref("background-position")}}, {{cssxref("object-position")}}, {{cssxref("mask-position")}} {{cssxref("offset-position")}}, {{cssxref("offset-anchor")}} and {{cssxref("transform-origin")}} properties. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) denotes a two-dimensional coordinate used to set a location relative to an element box. It is used in the {{cssxref("background-position")}}, {{cssxref("object-position")}}, {{cssxref("mask-position")}} {{cssxref("offset-position")}}, {{cssxref("offset-anchor")}} and {{cssxref("transform-origin")}} properties. > [!NOTE] > The final position described by the `` value does not need to be inside the element's box. diff --git a/files/en-us/web/css/ratio/index.md b/files/en-us/web/css/ratio/index.md index bd0ab8aaf7da196..5cb9e2b2b2618da 100644 --- a/files/en-us/web/css/ratio/index.md +++ b/files/en-us/web/css/ratio/index.md @@ -8,7 +8,7 @@ spec-urls: https://drafts.csswg.org/css-values-4/#ratio-value {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes the proportional relationship between two values. It mostly represents the aspect ratio, which relates width to height. For example, the `` is used as a value for the `aspect-ratio` media feature in {{cssxref("@media")}} media queries, the `aspect-ratio` size feature in {{cssxref("@container")}} container queries, and as a value for the CSS {{cssxref("aspect-ratio")}} property. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) describes the proportional relationship between two values. It mostly represents the aspect ratio, which relates width to height. For example, the `` is used as a value for the `aspect-ratio` media feature in {{cssxref("@media")}} media queries, the `aspect-ratio` size feature in {{cssxref("@container")}} container queries, and as a value for the CSS {{cssxref("aspect-ratio")}} property. ## Syntax diff --git a/files/en-us/web/css/reference/index.md b/files/en-us/web/css/reference/index.md index a2a1152ea295002..9b268234ee8c64a 100644 --- a/files/en-us/web/css/reference/index.md +++ b/files/en-us/web/css/reference/index.md @@ -6,7 +6,7 @@ page-type: landing-page {{CSSRef}} -Use this **CSS reference** to browse an [alphabetical index](#index) of all of the standard [CSS](/en-US/docs/Web/CSS) properties, [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes), [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements), [data types](/en-US/docs/Web/CSS/CSS_Types), [functional notations](/en-US/docs/Web/CSS/CSS_Functions) and [at-rules](/en-US/docs/Web/CSS/At-rule). You can also browse [key CSS concepts](#concepts) and a list of [selectors organized by type](#selectors). Also included is a brief [DOM-CSS / CSSOM reference](#dom-css_cssom). +Use this **CSS reference** to browse an [alphabetical index](#index) of all of the standard [CSS](/en-US/docs/Web/CSS) properties, [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes), [pseudo-elements](/en-US/docs/Web/CSS/Pseudo-elements), [data types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types), [functional notations](/en-US/docs/Web/CSS/CSS_Functions) and [at-rules](/en-US/docs/Web/CSS/At-rule). You can also browse [key CSS concepts](#concepts) and a list of [selectors organized by type](#selectors). Also included is a brief [DOM-CSS / CSSOM reference](#dom-css_cssom). ## Basic rule syntax @@ -114,7 +114,7 @@ Combinators are selectors that establish a relationship between two or more simp - [Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Comments](/en-US/docs/Web/CSS/Comments) - [Descriptor](/en-US/docs/Glossary/CSS_Descriptor) -- [Inheritance](/en-US/docs/Web/CSS/Inheritance) +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) @@ -123,12 +123,12 @@ Combinators are selectors that establish a relationship between two or more simp ### Values -- [Actual value](/en-US/docs/Web/CSS/actual_value) -- [Computed value](/en-US/docs/Web/CSS/computed_value) -- [Initial value](/en-US/docs/Web/CSS/initial_value) +- [Actual value](/en-US/docs/Web/CSS/CSS_cascade/actual_value) +- [Computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) +- [Initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) - [Resolved value](/en-US/docs/Web/CSS/resolved_value) -- [Specified value](/en-US/docs/Web/CSS/specified_value) -- [Used value](/en-US/docs/Web/CSS/used_value) +- [Specified value](/en-US/docs/Web/CSS/CSS_cascade/specified_value) +- [Used value](/en-US/docs/Web/CSS/CSS_cascade/used_value) ### Layout diff --git a/files/en-us/web/css/relative-size/index.md b/files/en-us/web/css/relative-size/index.md index 0c58c83b3bda13e..f677d677a8303d7 100644 --- a/files/en-us/web/css/relative-size/index.md +++ b/files/en-us/web/css/relative-size/index.md @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-fonts/#valdef-font-size-relative-size {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) describes relative size keywords. The `` keywords define a size relative to the computed size of the parent element. This data type is used in the {{cssxref("font")}} shorthand and {{cssxref("font-size")}} properties. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) describes relative size keywords. The `` keywords define a size relative to the computed size of the parent element. This data type is used in the {{cssxref("font")}} shorthand and {{cssxref("font-size")}} properties. ## Syntax diff --git a/files/en-us/web/css/replaced_element/index.md b/files/en-us/web/css/replaced_element/index.md index 5b6c79c516ddcc3..235ae746be1bf1b 100644 --- a/files/en-us/web/css/replaced_element/index.md +++ b/files/en-us/web/css/replaced_element/index.md @@ -57,15 +57,15 @@ Certain CSS properties can be used to specify how the object contained within th - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Comments](/en-US/docs/Web/CSS/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - - [Inheritance](/en-US/docs/Web/CSS/Inheritance) + - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - Values - - [Initial values](/en-US/docs/Web/CSS/initial_value) - - [Computed values](/en-US/docs/Web/CSS/computed_value) - - [Used values](/en-US/docs/Web/CSS/used_value) - - [Actual values](/en-US/docs/Web/CSS/actual_value) + - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) + - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) + - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) + - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) diff --git a/files/en-us/web/css/resolution/index.md b/files/en-us/web/css/resolution/index.md index 10e03b671d039a4..b8a3b96f6ecaaa3 100644 --- a/files/en-us/web/css/resolution/index.md +++ b/files/en-us/web/css/resolution/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.resolution {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types), used for describing [resolutions](/en-US/docs/Web/CSS/@media/resolution) in [media queries](/en-US/docs/Web/CSS/CSS_media_queries), denotes the pixel density of an output device, i.e., its resolution. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types), used for describing [resolutions](/en-US/docs/Web/CSS/@media/resolution) in [media queries](/en-US/docs/Web/CSS/CSS_media_queries), denotes the pixel density of an output device, i.e., its resolution. On screens, the units are related to _CSS_ inches, centimeters, or pixels, not physical values. diff --git a/files/en-us/web/css/resolved_value/index.md b/files/en-us/web/css/resolved_value/index.md index ed115b52a90ad49..b18568cab7501aa 100644 --- a/files/en-us/web/css/resolved_value/index.md +++ b/files/en-us/web/css/resolved_value/index.md @@ -9,9 +9,9 @@ spec-urls: https://drafts.csswg.org/cssom/#resolved-values The **resolved value** of a [CSS](/en-US/docs/Web/CSS) property is the value after applying active stylesheets and resolving any basic computation those values may contain. The {{domxref("Window.getComputedStyle", "getComputedStyle()")}} method returns a live {{domxref("CSSStyleDeclaration")}} object containing the resolved values of all CSS properties applied to a specified element. -Historically, `getComputedStyle()` returned the [computed value](/en-US/docs/Web/CSS/computed_value) of an element or pseudo-element. As CSS evolved, so did the concept of "computed value", but the values returned by `getComputedStyle()` had to remain the same for backward compatibility with deployed scripts. These values are the "resolved values". +Historically, `getComputedStyle()` returned the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) of an element or pseudo-element. As CSS evolved, so did the concept of "computed value", but the values returned by `getComputedStyle()` had to remain the same for backward compatibility with deployed scripts. These values are the "resolved values". -For most properties, the resolved value is the [computed value](/en-US/docs/Web/CSS/computed_value), but for a few legacy properties (including {{cssxref("width")}} and {{cssxref("height")}}), it is the [used value](/en-US/docs/Web/CSS/used_value). See the specification link below for some per-property details. +For most properties, the resolved value is the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value), but for a few legacy properties (including {{cssxref("width")}} and {{cssxref("height")}}), it is the [used value](/en-US/docs/Web/CSS/CSS_cascade/used_value). See the specification link below for some per-property details. ## Specifications @@ -22,13 +22,13 @@ For most properties, the resolved value is the [computed value](/en-US/docs/Web/ - {{domxref("window.getComputedStyle")}} - {{domxref("CSSStyleDeclaration.getPropertyValue")}} - Values - - [Initial values](/en-US/docs/Web/CSS/initial_value) - - [Computed values](/en-US/docs/Web/CSS/computed_value) - - [Used values](/en-US/docs/Web/CSS/used_value) - - [Actual values](/en-US/docs/Web/CSS/actual_value) + - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) + - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) + - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) + - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Inheritance](/en-US/docs/Web/CSS/Inheritance) +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) diff --git a/files/en-us/web/css/revert-layer/index.md b/files/en-us/web/css/revert-layer/index.md index 4c8a0e3519707e3..af9d95129bf4462 100644 --- a/files/en-us/web/css/revert-layer/index.md +++ b/files/en-us/web/css/revert-layer/index.md @@ -7,9 +7,9 @@ browser-compat: css.types.global_keywords.revert-layer {{CSSRef}} -The **`revert-layer`** [CSS-wide keyword](/en-US/docs/Web/CSS/CSS_Types#css-wide_keywords) rolls back the value of a property in a [cascade layer](/en-US/docs/Web/CSS/@layer) to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of a property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer. +The **`revert-layer`** [CSS-wide keyword](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types#css-wide_keywords) rolls back the value of a property in a [cascade layer](/en-US/docs/Web/CSS/@layer) to the value of the property in a CSS rule matching the element in a previous cascade layer. The value of a property with this keyword is recalculated as if no rules were specified on the target element in the current cascade layer. -If there is no other cascade layer to revert to for the matching CSS rule, the property value rolls back to the [computed value](/en-US/docs/Web/CSS/computed_value) derived from the current layer. Furthermore, if there is no matching CSS rule in the current layer, the property value for the element rolls back to the style defined in a previous [style origin](/en-US/docs/Glossary/Style_origin). +If there is no other cascade layer to revert to for the matching CSS rule, the property value rolls back to the [computed value](/en-US/docs/Web/CSS/CSS_cascade/computed_value) derived from the current layer. Furthermore, if there is no matching CSS rule in the current layer, the property value for the element rolls back to the style defined in a previous [style origin](/en-US/docs/Glossary/Style_origin). This keyword can be applied to any CSS property, including the CSS shorthand property {{cssxref("all")}}. diff --git a/files/en-us/web/css/revert/index.md b/files/en-us/web/css/revert/index.md index 992868f73ff7ab3..1b4876f23593ebe 100644 --- a/files/en-us/web/css/revert/index.md +++ b/files/en-us/web/css/revert/index.md @@ -23,9 +23,9 @@ Revert will not affect rules applied to children of an element you reset (but wi > Revert is just a value. It is still possible to override the `revert` value using [specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity). > [!NOTE] -> The `revert` keyword is different from and should not be confused with the {{cssxref("initial")}} keyword, which uses the [initial value](/en-US/docs/Web/CSS/initial_value) defined on a per-property basis by the CSS specifications. In contrast, user-agent stylesheets set default values on the basis of CSS selectors. +> The `revert` keyword is different from and should not be confused with the {{cssxref("initial")}} keyword, which uses the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) defined on a per-property basis by the CSS specifications. In contrast, user-agent stylesheets set default values on the basis of CSS selectors. > -> For example, the [initial value](/en-US/docs/Web/CSS/initial_value) for the [`display`](/en-US/docs/Web/CSS/display#formal_definition) property is `inline`, whereas a normal user-agent stylesheet sets the default {{cssxref("display")}} value of {{HTMLElement("div")}}s to `block`, of {{HTMLElement("table")}}s to `table`, etc. +> For example, the [initial value](/en-US/docs/Web/CSS/CSS_cascade/initial_value) for the [`display`](/en-US/docs/Web/CSS/display#formal_definition) property is `inline`, whereas a normal user-agent stylesheet sets the default {{cssxref("display")}} value of {{HTMLElement("div")}}s to `block`, of {{HTMLElement("table")}}s to `table`, etc. ## Examples diff --git a/files/en-us/web/css/shape/index.md b/files/en-us/web/css/shape/index.md index 3149af6e7aabd6f..0dbca97954d888d 100644 --- a/files/en-us/web/css/shape/index.md +++ b/files/en-us/web/css/shape/index.md @@ -9,7 +9,7 @@ browser-compat: css.types.shape {{CSSRef}}{{deprecated_header}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) defines the specific form (shape) of a region. The region represents the part of an element to which the {{cssxref("clip")}} property applies. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) defines the specific form (shape) of a region. The region represents the part of an element to which the {{cssxref("clip")}} property applies. > **Note:** `` and `rect()` work in conjunction with {{cssxref("clip")}}, which has been deprecated in favor of {{cssxref("clip-path")}}. When possible, use `clip-path` and the {{cssxref("<basic-shape>")}} data type instead. diff --git a/files/en-us/web/css/shorthand_properties/index.md b/files/en-us/web/css/shorthand_properties/index.md index 83e0d7a094a087f..a8d2380b4e973db 100644 --- a/files/en-us/web/css/shorthand_properties/index.md +++ b/files/en-us/web/css/shorthand_properties/index.md @@ -248,11 +248,11 @@ See [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/H - [CSS syntax](/en-US/docs/Web/CSS/Syntax) - [At-rules](/en-US/docs/Web/CSS/At-rule) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) -- [Inheritance](/en-US/docs/Web/CSS/Inheritance) +- [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Introducing the CSS Cascade](/en-US/docs/Web/CSS/CSS_cascade/Cascade) - [Learn: Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) - [Learn: Cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers) - [CSS cascading and inheritance](/en-US/docs/Web/CSS/CSS_cascade) module - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) -- [Initial](/en-US/docs/Web/CSS/initial_value), [computed](/en-US/docs/Web/CSS/computed_value), [used](/en-US/docs/Web/CSS/used_value), and [actual](/en-US/docs/Web/CSS/actual_value) values +- [Initial](/en-US/docs/Web/CSS/CSS_cascade/initial_value), [computed](/en-US/docs/Web/CSS/CSS_cascade/computed_value), [used](/en-US/docs/Web/CSS/CSS_cascade/used_value), and [actual](/en-US/docs/Web/CSS/CSS_cascade/actual_value) values - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) diff --git a/files/en-us/web/css/string/index.md b/files/en-us/web/css/string/index.md index dd3c8493c107ee5..dc640a2765ae5f9 100644 --- a/files/en-us/web/css/string/index.md +++ b/files/en-us/web/css/string/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.string {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a sequence of characters. Strings are used in numerous CSS properties, such as {{CSSxRef("content")}}, {{CSSxRef("font-family")}}, and {{CSSxRef("quotes")}}. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a sequence of characters. Strings are used in numerous CSS properties, such as {{CSSxRef("content")}}, {{CSSxRef("font-family")}}, and {{CSSxRef("quotes")}}. ## Syntax @@ -59,5 +59,5 @@ awesome string" ## See also - [CSS Units and Values](/en-US/docs/Web/CSS/CSS_Values_and_Units) -- [CSS Basic Data Types](/en-US/docs/Web/CSS/CSS_Types) +- [CSS Basic Data Types](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) - [Introduction to CSS: Values and units](/en-US/docs/Learn_web_development/Core/Styling_basics/Values_and_units) diff --git a/files/en-us/web/css/syntax/index.md b/files/en-us/web/css/syntax/index.md index 9e9c0799a2efccf..6c38a52ff922571 100644 --- a/files/en-us/web/css/syntax/index.md +++ b/files/en-us/web/css/syntax/index.md @@ -78,16 +78,16 @@ There is another group of statements – the **nested statements**. These are st - **CSS syntax** - [Comments](/en-US/docs/Web/CSS/Comments) - [Specificity](/en-US/docs/Web/CSS/CSS_cascade/Specificity) - - [Inheritance](/en-US/docs/Web/CSS/Inheritance) + - [Inheritance](/en-US/docs/Web/CSS/CSS_cascade/Inheritance) - [Box model](/en-US/docs/Web/CSS/CSS_box_model/Introduction_to_the_CSS_box_model) - [Layout modes](/en-US/docs/Web/CSS/Layout_mode) - [Visual formatting models](/en-US/docs/Web/CSS/Visual_formatting_model) - [Margin collapsing](/en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing) - Values - - [Initial values](/en-US/docs/Web/CSS/initial_value) - - [Computed values](/en-US/docs/Web/CSS/computed_value) - - [Used values](/en-US/docs/Web/CSS/used_value) - - [Actual values](/en-US/docs/Web/CSS/actual_value) + - [Initial values](/en-US/docs/Web/CSS/CSS_cascade/initial_value) + - [Computed values](/en-US/docs/Web/CSS/CSS_cascade/computed_value) + - [Used values](/en-US/docs/Web/CSS/CSS_cascade/used_value) + - [Actual values](/en-US/docs/Web/CSS/CSS_cascade/actual_value) - [Value definition syntax](/en-US/docs/Web/CSS/Value_definition_syntax) - [Shorthand properties](/en-US/docs/Web/CSS/Shorthand_properties) - [Replaced elements](/en-US/docs/Web/CSS/Replaced_element) diff --git a/files/en-us/web/css/system-color/index.md b/files/en-us/web/css/system-color/index.md index b80234b63985d84..c77e856968afa70 100644 --- a/files/en-us/web/css/system-color/index.md +++ b/files/en-us/web/css/system-color/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.color.system-color {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) usually reflects the default color choices used for the different parts of a web page. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) usually reflects the default color choices used for the different parts of a web page. However, user agents can provide an accessibility feature called _forced colors mode_, in which colors are restricted into a user- and user agent-defined palette, overriding the author's choice of colors in certain properties. In forced colors mode, `` exposes the chosen colors, so that the rest of the page can integrate with them. An example of forced colors mode is [high contrast mode on Windows](https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/). diff --git a/files/en-us/web/css/time-percentage/index.md b/files/en-us/web/css/time-percentage/index.md index 474d91551964468..e70e6f0bc22f3f1 100644 --- a/files/en-us/web/css/time-percentage/index.md +++ b/files/en-us/web/css/time-percentage/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.time-percentage {{CSSRef}} -The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Types) represents a value that can be either a {{Cssxref("time")}} or a {{Cssxref("percentage")}}. +The **``** [CSS](/en-US/docs/Web/CSS) [data type](/en-US/docs/Web/CSS/CSS_Values_and_Units/CSS_data_types) represents a value that can be either a {{Cssxref("time")}} or a {{Cssxref("percentage")}}. ## Syntax diff --git a/files/en-us/web/css/time/index.md b/files/en-us/web/css/time/index.md index 73462544c9406f4..5d7382895825774 100644 --- a/files/en-us/web/css/time/index.md +++ b/files/en-us/web/css/time/index.md @@ -7,7 +7,7 @@ browser-compat: css.types.time {{CSSRef}} -The **`