From fbc2f87b3f114a928fb327bab75a321f088f99a4 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya <dipika@foss-community.org> Date: Thu, 25 May 2023 13:24:12 -0400 Subject: [PATCH 1/7] letter s module landing page --- files/en-us/_redirects.txt | 3 +- files/en-us/_wikihistory.json | 74 +++++++++---------- .../web/css/css_shapes/basic_shapes/index.md | 4 +- .../css/css_shapes/from_box_values/index.md | 4 +- files/en-us/web/css/css_shapes/index.md | 14 ++-- .../index.md | 2 +- .../css_shapes/shapes_from_images/index.md | 4 +- 7 files changed, 53 insertions(+), 52 deletions(-) rename files/en-us/web/css/css_shapes/{overview_of_css_shapes => overview_of_shapes}/index.md (99%) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index ffbe492f3ad5caa..30de424a2ec257b 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -11340,7 +11340,8 @@ /en-US/docs/Web/CSS/CSS_Scroll_Snap/compat /en-US/docs/Web/CSS/CSS_Scroll_Snap /en-US/docs/Web/CSS/CSS_Scroll_Snap_Points /en-US/docs/Web/CSS/CSS_Scroll_Snap /en-US/docs/Web/CSS/CSS_Selectors/Comparison_with_XPath /en-US/docs/Web/XPath/Comparison_with_CSS_selectors -/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_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_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 diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 9a2498797215356..2f79f247c57a2ab 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -78097,43 +78097,6 @@ "CitizenK" ] }, - "Web/CSS/CSS_Shapes": { - "modified": "2020-07-07T12:26:26.279Z", - "contributors": [ - "wbamberg", - "alattalatta", - "rachelandrew", - "Sheppy", - "chrisdavidmills", - "mfuji09", - "mfluehr", - "TylerH", - "Sebastianz", - "teoli" - ] - }, - "Web/CSS/CSS_Shapes/Basic_Shapes": { - "modified": "2020-04-27T22:31:14.909Z", - "contributors": ["EvanGenest", "mfluehr", "chrisdavidmills", "rachelandrew"] - }, - "Web/CSS/CSS_Shapes/From_box_values": { - "modified": "2020-07-07T12:26:52.049Z", - "contributors": [ - "wbamberg", - "xunzhonglee", - "Sheppy", - "chrisdavidmills", - "rachelandrew" - ] - }, - "Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes": { - "modified": "2020-07-07T12:26:38.388Z", - "contributors": ["wbamberg", "chrisdavidmills", "rachelandrew"] - }, - "Web/CSS/CSS_Shapes/Shapes_From_Images": { - "modified": "2020-04-27T22:31:21.929Z", - "contributors": ["ExE-Boss", "mfuji09", "rachelandrew"] - }, "Web/CSS/CSS_Table": { "modified": "2020-07-07T12:26:58.542Z", "contributors": ["wbamberg", "fscholz", "mfluehr", "Sebastianz", "teoli"] @@ -78864,6 +78827,43 @@ "modified": "2020-07-07T12:15:32.340Z", "contributors": ["wbamberg", "mfluehr"] }, + "Web/CSS/CSS_shapes": { + "modified": "2020-07-07T12:26:26.279Z", + "contributors": [ + "wbamberg", + "alattalatta", + "rachelandrew", + "Sheppy", + "chrisdavidmills", + "mfuji09", + "mfluehr", + "TylerH", + "Sebastianz", + "teoli" + ] + }, + "Web/CSS/CSS_shapes/Basic_shapes": { + "modified": "2020-04-27T22:31:14.909Z", + "contributors": ["EvanGenest", "mfluehr", "chrisdavidmills", "rachelandrew"] + }, + "Web/CSS/CSS_shapes/From_box_values": { + "modified": "2020-07-07T12:26:52.049Z", + "contributors": [ + "wbamberg", + "xunzhonglee", + "Sheppy", + "chrisdavidmills", + "rachelandrew" + ] + }, + "Web/CSS/CSS_shapes/Overview_of_shapes": { + "modified": "2020-07-07T12:26:38.388Z", + "contributors": ["wbamberg", "chrisdavidmills", "rachelandrew"] + }, + "Web/CSS/CSS_shapes/Shapes_from_images": { + "modified": "2020-04-27T22:31:21.929Z", + "contributors": ["ExE-Boss", "mfuji09", "rachelandrew"] + }, "Web/CSS/Cascade": { "modified": "2020-07-27T13:35:05.470Z", "contributors": [ diff --git a/files/en-us/web/css/css_shapes/basic_shapes/index.md b/files/en-us/web/css/css_shapes/basic_shapes/index.md index b259566e4939056..20dbf8610c4b512 100644 --- a/files/en-us/web/css/css_shapes/basic_shapes/index.md +++ b/files/en-us/web/css/css_shapes/basic_shapes/index.md @@ -1,6 +1,6 @@ --- title: Basic shapes -slug: Web/CSS/CSS_Shapes/Basic_Shapes +slug: Web/CSS/CSS_shapes/Basic_shapes page-type: guide --- @@ -21,7 +21,7 @@ The arguments which are accepted vary depending on the shape that you are creati ## The reference box -Understanding the reference box used by CSS Shapes is important when using basic shapes, as it defines each shape's coordinate system. You have already met the reference box in [the guide on creating shapes from Box Values](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values), which directly uses the reference box to create the shape. +Understanding the reference box used by CSS Shapes is important when using basic shapes, as it defines each shape's coordinate system. You have already met the reference box in [the guide on creating shapes from Box Values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values), which directly uses the reference box to create the shape. The Firefox Shapes Inspector helpfully shows the reference box in use when you inspect a shape. In the screenshot below I have created a circle, using `shape-outside: circle(50%)`. The floated element has 20 pixels of padding, border and margin applied, and the Shapes Inspector highlights these reference boxes. When using a basic shape, the reference box used by default is the margin-box. You can see in the screenshot that the shape is being defined with reference to that part of the Box Model. diff --git a/files/en-us/web/css/css_shapes/from_box_values/index.md b/files/en-us/web/css/css_shapes/from_box_values/index.md index fc28a129026772d..5af5548ae917075 100644 --- a/files/en-us/web/css/css_shapes/from_box_values/index.md +++ b/files/en-us/web/css/css_shapes/from_box_values/index.md @@ -1,6 +1,6 @@ --- title: Shapes from box values -slug: Web/CSS/CSS_Shapes/From_box_values +slug: Web/CSS/CSS_shapes/From_box_values page-type: guide --- @@ -61,4 +61,4 @@ You can create some interesting effects however with just this simple technique. {{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}} -For more complex shapes, you will need to use one of the [basic shapes](/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes) as a value, or define your shape from an image as covered in other guides in this section. +For more complex shapes, you will need to use one of the [basic shapes](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) as a value, or define your shape from an image as covered in other guides in this section. diff --git a/files/en-us/web/css/css_shapes/index.md b/files/en-us/web/css/css_shapes/index.md index 6cb4c49381ffb66..dbc8467484a1015 100644 --- a/files/en-us/web/css/css_shapes/index.md +++ b/files/en-us/web/css/css_shapes/index.md @@ -1,13 +1,13 @@ --- -title: CSS Shapes -slug: Web/CSS/CSS_Shapes +title: CSS shapes +slug: Web/CSS/CSS_shapes page-type: css-module spec-urls: https://drafts.csswg.org/css-shapes/ --- {{CSSRef}} -**CSS Shapes** describe geometric shapes for use in CSS. For the [Level 1 specification](https://drafts.csswg.org/css-shapes/), CSS Shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box. +The **CSS shapes** module describes geometric shapes that can be in CSS. For the [Level 1 specification](https://drafts.csswg.org/css-shapes/), CSS shapes can be applied to floating elements. The specification defines a number of different ways to define a shape on a floated element, causing wrapping lines to wrap round the shape rather than following the rectangle of the element's box. ## Basic example @@ -29,10 +29,10 @@ The example below shows an image that has been floated left, and the `shape-outs ## Guides -- [Overview of shapes](/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) -- [Shapes from box values](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values) -- [Basic shapes](/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes) -- [Shapes from images](/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images) +- [Overview of shapes](/en-US/docs/Web/CSS/CSS_shapes/Overview_of_shapes) +- [Shapes from box values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values) +- [Basic shapes](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) +- [Shapes from images](/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images) ## Specifications diff --git a/files/en-us/web/css/css_shapes/overview_of_css_shapes/index.md b/files/en-us/web/css/css_shapes/overview_of_shapes/index.md similarity index 99% rename from files/en-us/web/css/css_shapes/overview_of_css_shapes/index.md rename to files/en-us/web/css/css_shapes/overview_of_shapes/index.md index eb491e564802d11..3250aa111eb0663 100644 --- a/files/en-us/web/css/css_shapes/overview_of_css_shapes/index.md +++ b/files/en-us/web/css/css_shapes/overview_of_shapes/index.md @@ -1,6 +1,6 @@ --- title: Overview of shapes -slug: Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes +slug: Web/CSS/CSS_shapes/Overview_of_shapes page-type: guide --- diff --git a/files/en-us/web/css/css_shapes/shapes_from_images/index.md b/files/en-us/web/css/css_shapes/shapes_from_images/index.md index d7ff13f67b03a2c..9572afdd43a3235 100644 --- a/files/en-us/web/css/css_shapes/shapes_from_images/index.md +++ b/files/en-us/web/css/css_shapes/shapes_from_images/index.md @@ -1,6 +1,6 @@ --- title: Shapes from images -slug: Web/CSS/CSS_Shapes/Shapes_From_Images +slug: Web/CSS/CSS_shapes/Shapes_from_images page-type: guide --- @@ -46,7 +46,7 @@ You do need something to float, but that could be some generated content as in t ## Creating shapes using a gradient -Because a [CSS gradient](/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients) is treated as an image, you can use a gradient to generate a shape by having transparent or semi-transparent areas as part of the gradient. +Because a [CSS gradient](/en-US/docs/Web/CSS/CSS_images/Using_CSS_gradients) is treated as an image, you can use a gradient to generate a shape by having transparent or semi-transparent areas as part of the gradient. The next example uses generated content. The content has been floated, giving it a background image of a linear gradient. I am using that same value as the value of {{cssxref("shape-outside")}}. The linear gradient goes from purple to transparent. By changing the value of {{cssxref("shape-image-threshold")}}, you can decide how transparent the pixels need to be that create the shape. You can play with that value in the example below to see how the diagonal line will move across the shape depending on that value. From f3dbf5f0467a26a4b1a9bd2706564dd1b301b38d Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya <dipika@foss-community.org> Date: Thu, 25 May 2023 13:43:21 -0400 Subject: [PATCH 2/7] letter t module landing pages --- files/en-us/_redirects.txt | 16 +- files/en-us/_wikihistory.json | 344 +++++++++--------- .../index.md | 2 +- files/en-us/web/css/css_table/index.md | 6 +- files/en-us/web/css/css_text/index.md | 6 +- .../index.md | 2 +- .../web/css/css_text_decoration/index.md | 6 +- files/en-us/web/css/css_transforms/index.md | 6 +- .../using_css_transforms/index.md | 2 +- files/en-us/web/css/css_transitions/index.md | 10 +- .../using_css_transitions/index.md | 3 +- 11 files changed, 202 insertions(+), 201 deletions(-) rename files/en-us/web/css/{css_variables => css_cascading_variables}/index.md (91%) rename files/en-us/web/css/css_text/{wrapping_text => wrapping_breaking_text}/index.md (99%) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 30de424a2ec257b..62ebd1ee520b8c5 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -480,7 +480,7 @@ /en-US/docs/CSS/CSS_flex-wrap /en-US/docs/Web/CSS/flex-wrap /en-US/docs/CSS/CSS_percentage_values /en-US/docs/Web/CSS /en-US/docs/CSS/CSS_transform_functions /en-US/docs/Web/CSS/transform -/en-US/docs/CSS/CSS_transitions /en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions +/en-US/docs/CSS/CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions /en-US/docs/CSS/CSS_values_serialization /en-US/docs/Web/CSS /en-US/docs/CSS/CSS_values_syntax /en-US/docs/Web/CSS /en-US/docs/CSS/Cascade /en-US/docs/Web/CSS/Cascade @@ -546,8 +546,8 @@ /en-US/docs/CSS/Tutorials/Using_CSS_flexible_boxes /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox /en-US/docs/CSS/Tutorials/Using_CSS_gradients /en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients /en-US/docs/CSS/Tutorials/Using_CSS_multiple_backgrounds /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds -/en-US/docs/CSS/Tutorials/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms -/en-US/docs/CSS/Tutorials/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions +/en-US/docs/CSS/Tutorials/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms +/en-US/docs/CSS/Tutorials/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions /en-US/docs/CSS/Type_selectors /en-US/docs/Web/CSS/Type_selectors /en-US/docs/CSS/Understanding_CSS_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index /en-US/docs/CSS/Understanding_CSS_z-index/Adding_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index @@ -573,8 +573,8 @@ /en-US/docs/CSS/Using_CSS_media_queries /en-US/docs/Web/CSS/Media_Queries/Using_media_queries /en-US/docs/CSS/Using_CSS_multi-column_layouts /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /en-US/docs/CSS/Using_CSS_multiple_backgrounds /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds -/en-US/docs/CSS/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms -/en-US/docs/CSS/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions +/en-US/docs/CSS/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms +/en-US/docs/CSS/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions /en-US/docs/CSS/Using_CSS_variables /en-US/docs/Web/CSS/Using_CSS_custom_properties /en-US/docs/CSS/Using_media_queries_from_code /en-US/docs/Web/CSS/Media_Queries/Testing_media_queries /en-US/docs/CSS/Using_the_CSS_multi-column_layout /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts @@ -11342,9 +11342,11 @@ /en-US/docs/Web/CSS/CSS_Selectors/Comparison_with_XPath /en-US/docs/Web/XPath/Comparison_with_CSS_selectors /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/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_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_descriptor_definition /en-US/docs/Web/CSS /en-US/docs/Web/CSS/CSS_flex-wrap /en-US/docs/Web/CSS/flex-wrap @@ -11904,8 +11906,8 @@ /en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /en-US/docs/Web/Guide/CSS/Using_CSS_animations /en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations /en-US/docs/Web/Guide/CSS/Using_CSS_gradients /en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients -/en-US/docs/Web/Guide/CSS/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms -/en-US/docs/Web/Guide/CSS/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions +/en-US/docs/Web/Guide/CSS/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms +/en-US/docs/Web/Guide/CSS/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions /en-US/docs/Web/Guide/CSS/Using_flexbox_to_lay_out_web_applications /en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox /en-US/docs/Web/Guide/CSS/Using_multi-column_layouts /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 2f79f247c57a2ab..d3e465c65d7c205 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -78097,174 +78097,6 @@ "CitizenK" ] }, - "Web/CSS/CSS_Table": { - "modified": "2020-07-07T12:26:58.542Z", - "contributors": ["wbamberg", "fscholz", "mfluehr", "Sebastianz", "teoli"] - }, - "Web/CSS/CSS_Text": { - "modified": "2020-07-07T12:27:04.459Z", - "contributors": [ - "wbamberg", - "mfuji09", - "fscholz", - "vnkt66", - "mfluehr", - "Sebastianz", - "teoli" - ] - }, - "Web/CSS/CSS_Text_Decoration": { - "modified": "2020-07-07T12:27:11.406Z", - "contributors": [ - "wbamberg", - "chrisdavidmills", - "fscholz", - "mfluehr", - "teoli", - "Sebastianz" - ] - }, - "Web/CSS/CSS_Transforms": { - "modified": "2020-09-19T15:22:47.585Z", - "contributors": [ - "mfuji09", - "wbamberg", - "rachelandrew", - "fscholz", - "mfluehr", - "erikadoyle", - "Sebastianz", - "Prinz_Rana", - "teoli" - ] - }, - "Web/CSS/CSS_Transforms/Using_CSS_transforms": { - "modified": "2020-11-28T02:41:49.208Z", - "contributors": [ - "mfuji09", - "alattalatta", - "chrisdavidmills", - "Eon-MDN", - "Flaburgan", - "Alterebro", - "ViKomprenas", - "Sheppy", - "mfluehr", - "draccicgeb", - "jwhitlock", - "akshayramdasi", - "teoli", - "tomascot", - "fscholz", - "KamboBlack", - "Keysox", - "techieshark", - "Jeremie", - "kscarfone", - "MartinRinehart", - "Emily_Dirsh", - "jryans", - "FredB", - "ethertank", - "Vaibs", - "matt_basta", - "ajimix", - "louisremi", - "RichardD", - "Landis", - "BenoitL", - "sebmozilla", - "another_sam", - "Jürgen Jeka", - "Taken" - ] - }, - "Web/CSS/CSS_Transitions": { - "modified": "2020-07-07T12:27:26.495Z", - "contributors": [ - "wbamberg", - "fscholz", - "mfluehr", - "erikadoyle", - "Sebastianz", - "teoli" - ] - }, - "Web/CSS/CSS_Transitions/Using_CSS_transitions": { - "modified": "2020-08-17T04:47:17.578Z", - "contributors": [ - "mfuji09", - "estelle", - "fscholz", - "chrisdavidmills", - "stepharr", - "lisza", - "utkarshbhatt12", - "stephaniehobson", - "Nandha13", - "mfluehr", - "jstewart8053", - "Mori", - "Jagadheeswaran007", - "weihanglo", - "gacelperfinian", - "Sheppy", - "andrewhl", - "jsx", - "LongBu", - "LeekAnarchism", - "teoli", - "hweeks", - "Sebastianz", - "jonankabigumira", - "Flimm", - "victormiguez", - "cvrebert", - "aziz_shaik", - "jscape", - "ChrisL", - "amitabha197", - "tagawa", - "Jeremie", - "Sertion", - "dbruant", - "stevenvachon", - "kscarfone", - "ScottMichaud", - "Jeremy Banks", - "enderandpeter", - "terrycloth", - "Emmrargh", - "m_gol", - "BluesM", - "ronj", - "jaffathecake", - "matt_basta", - "iskin", - "anushbmx", - "davezatch", - "Rkovac", - "JohnKarahalis", - "BYK", - "Martndemus", - "codepo8", - "Marcoos", - "Meggin Kearney", - "Jürgen Jeka", - "mechaxl", - "yyss", - "fredrikekelund", - "talldan", - "inma_610", - "borismus", - "grendel", - "paul.irish", - "robodesign", - "sebmozilla", - "Paul", - "Hansschmucker" - ] - }, "Web/CSS/CSS_Types": { "modified": "2020-12-11T13:13:56.675Z", "contributors": [ @@ -78299,10 +78131,6 @@ "chrisdavidmills" ] }, - "Web/CSS/CSS_Variables": { - "modified": "2020-07-07T12:03:44.891Z", - "contributors": ["wbamberg", "mfluehr"] - }, "Web/CSS/CSS_Writing_Modes": { "modified": "2020-07-07T12:31:18.518Z", "contributors": [ @@ -78549,6 +78377,10 @@ "Fredchat" ] }, + "Web/CSS/CSS_cascading_variables": { + "modified": "2020-07-07T12:03:44.891Z", + "contributors": ["wbamberg", "mfluehr"] + }, "Web/CSS/CSS_charsets": { "modified": "2020-10-15T21:38:35.251Z", "contributors": ["wbamberg", "fscholz", "mfluehr", "Sebastianz", "teoli"] @@ -78864,6 +78696,174 @@ "modified": "2020-04-27T22:31:21.929Z", "contributors": ["ExE-Boss", "mfuji09", "rachelandrew"] }, + "Web/CSS/CSS_table": { + "modified": "2020-07-07T12:26:58.542Z", + "contributors": ["wbamberg", "fscholz", "mfluehr", "Sebastianz", "teoli"] + }, + "Web/CSS/CSS_text": { + "modified": "2020-07-07T12:27:04.459Z", + "contributors": [ + "wbamberg", + "mfuji09", + "fscholz", + "vnkt66", + "mfluehr", + "Sebastianz", + "teoli" + ] + }, + "Web/CSS/CSS_text_decoration": { + "modified": "2020-07-07T12:27:11.406Z", + "contributors": [ + "wbamberg", + "chrisdavidmills", + "fscholz", + "mfluehr", + "teoli", + "Sebastianz" + ] + }, + "Web/CSS/CSS_transforms": { + "modified": "2020-09-19T15:22:47.585Z", + "contributors": [ + "mfuji09", + "wbamberg", + "rachelandrew", + "fscholz", + "mfluehr", + "erikadoyle", + "Sebastianz", + "Prinz_Rana", + "teoli" + ] + }, + "Web/CSS/CSS_transforms/Using_CSS_transforms": { + "modified": "2020-11-28T02:41:49.208Z", + "contributors": [ + "mfuji09", + "alattalatta", + "chrisdavidmills", + "Eon-MDN", + "Flaburgan", + "Alterebro", + "ViKomprenas", + "Sheppy", + "mfluehr", + "draccicgeb", + "jwhitlock", + "akshayramdasi", + "teoli", + "tomascot", + "fscholz", + "KamboBlack", + "Keysox", + "techieshark", + "Jeremie", + "kscarfone", + "MartinRinehart", + "Emily_Dirsh", + "jryans", + "FredB", + "ethertank", + "Vaibs", + "matt_basta", + "ajimix", + "louisremi", + "RichardD", + "Landis", + "BenoitL", + "sebmozilla", + "another_sam", + "Jürgen Jeka", + "Taken" + ] + }, + "Web/CSS/CSS_transitions": { + "modified": "2020-07-07T12:27:26.495Z", + "contributors": [ + "wbamberg", + "fscholz", + "mfluehr", + "erikadoyle", + "Sebastianz", + "teoli" + ] + }, + "Web/CSS/CSS_transitions/Using_CSS_transitions": { + "modified": "2020-08-17T04:47:17.578Z", + "contributors": [ + "mfuji09", + "estelle", + "fscholz", + "chrisdavidmills", + "stepharr", + "lisza", + "utkarshbhatt12", + "stephaniehobson", + "Nandha13", + "mfluehr", + "jstewart8053", + "Mori", + "Jagadheeswaran007", + "weihanglo", + "gacelperfinian", + "Sheppy", + "andrewhl", + "jsx", + "LongBu", + "LeekAnarchism", + "teoli", + "hweeks", + "Sebastianz", + "jonankabigumira", + "Flimm", + "victormiguez", + "cvrebert", + "aziz_shaik", + "jscape", + "ChrisL", + "amitabha197", + "tagawa", + "Jeremie", + "Sertion", + "dbruant", + "stevenvachon", + "kscarfone", + "ScottMichaud", + "Jeremy Banks", + "enderandpeter", + "terrycloth", + "Emmrargh", + "m_gol", + "BluesM", + "ronj", + "jaffathecake", + "matt_basta", + "iskin", + "anushbmx", + "davezatch", + "Rkovac", + "JohnKarahalis", + "BYK", + "Martndemus", + "codepo8", + "Marcoos", + "Meggin Kearney", + "Jürgen Jeka", + "mechaxl", + "yyss", + "fredrikekelund", + "talldan", + "inma_610", + "borismus", + "grendel", + "paul.irish", + "robodesign", + "sebmozilla", + "Paul", + "Hansschmucker" + ] + }, "Web/CSS/Cascade": { "modified": "2020-07-27T13:35:05.470Z", "contributors": [ diff --git a/files/en-us/web/css/css_variables/index.md b/files/en-us/web/css/css_cascading_variables/index.md similarity index 91% rename from files/en-us/web/css/css_variables/index.md rename to files/en-us/web/css/css_cascading_variables/index.md index 7d37208b73519d1..ebb8eb1b5937158 100644 --- a/files/en-us/web/css/css_variables/index.md +++ b/files/en-us/web/css/css_cascading_variables/index.md @@ -1,6 +1,6 @@ --- title: CSS Custom Properties for Cascading Variables -slug: Web/CSS/CSS_Variables +slug: Web/CSS/CSS_cascading_variables page-type: css-module spec-urls: https://drafts.csswg.org/css-variables/ --- diff --git a/files/en-us/web/css/css_table/index.md b/files/en-us/web/css/css_table/index.md index 04ffd002755fa1e..720344f2856a800 100644 --- a/files/en-us/web/css/css_table/index.md +++ b/files/en-us/web/css/css_table/index.md @@ -1,13 +1,13 @@ --- -title: CSS Table -slug: Web/CSS/CSS_Table +title: CSS table +slug: Web/CSS/CSS_table page-type: css-module spec-urls: https://www.w3.org/TR/CSS22/tables.html --- {{CSSRef}} -**CSS Table** is a CSS module that defines how to lay out table data. +The **CSS table** module helps you define how to lay out table data. ## Reference diff --git a/files/en-us/web/css/css_text/index.md b/files/en-us/web/css/css_text/index.md index 0bf5b091b81ff47..96b4100cfee0193 100644 --- a/files/en-us/web/css/css_text/index.md +++ b/files/en-us/web/css/css_text/index.md @@ -1,6 +1,6 @@ --- -title: CSS Text -slug: Web/CSS/CSS_Text +title: CSS text +slug: Web/CSS/CSS_text page-type: css-module spec-urls: - https://drafts.csswg.org/css-logical/ @@ -10,7 +10,7 @@ spec-urls: {{CSSRef}} -**CSS Text** is a module of CSS that defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation. +The **CSS text** module defines how to perform text manipulation, like line breaking, justification and alignment, white space handling, and text transformation. ## Reference diff --git a/files/en-us/web/css/css_text/wrapping_text/index.md b/files/en-us/web/css/css_text/wrapping_breaking_text/index.md similarity index 99% rename from files/en-us/web/css/css_text/wrapping_text/index.md rename to files/en-us/web/css/css_text/wrapping_breaking_text/index.md index 8a16468c7d13f93..750d58eb021972e 100644 --- a/files/en-us/web/css/css_text/wrapping_text/index.md +++ b/files/en-us/web/css/css_text/wrapping_breaking_text/index.md @@ -1,6 +1,6 @@ --- title: Wrapping and breaking text -slug: Web/CSS/CSS_Text/Wrapping_Text +slug: Web/CSS/CSS_text/Wrapping_breaking_text page-type: guide --- diff --git a/files/en-us/web/css/css_text_decoration/index.md b/files/en-us/web/css/css_text_decoration/index.md index c0900050cfe8d90..2551e726789e757 100644 --- a/files/en-us/web/css/css_text_decoration/index.md +++ b/files/en-us/web/css/css_text_decoration/index.md @@ -1,13 +1,13 @@ --- -title: CSS Text Decoration -slug: Web/CSS/CSS_Text_Decoration +title: CSS text decoration +slug: Web/CSS/CSS_text_decoration page-type: css-module spec-urls: https://drafts.csswg.org/css-text-decor/ --- {{CSSRef}} -**CSS Text Decoration** is a module of CSS that defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. +The **CSS text decoration** module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. ## Reference diff --git a/files/en-us/web/css/css_transforms/index.md b/files/en-us/web/css/css_transforms/index.md index 7e766d317cd41bc..f4dd2da9629d003 100644 --- a/files/en-us/web/css/css_transforms/index.md +++ b/files/en-us/web/css/css_transforms/index.md @@ -1,13 +1,13 @@ --- -title: CSS Transforms -slug: Web/CSS/CSS_Transforms +title: CSS transforms +slug: Web/CSS/CSS_transforms page-type: css-module spec-urls: https://drafts.csswg.org/css-transforms/ --- {{CSSRef}} -**CSS Transforms** is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space. +The **CSS transforms** module defines how elements styled with CSS can be transformed in two-dimensional or three-dimensional space. ## Reference diff --git a/files/en-us/web/css/css_transforms/using_css_transforms/index.md b/files/en-us/web/css/css_transforms/using_css_transforms/index.md index bcd30bc98dce02b..aa1281c0b17959e 100644 --- a/files/en-us/web/css/css_transforms/using_css_transforms/index.md +++ b/files/en-us/web/css/css_transforms/using_css_transforms/index.md @@ -1,6 +1,6 @@ --- title: Using CSS transforms -slug: Web/CSS/CSS_Transforms/Using_CSS_transforms +slug: Web/CSS/CSS_transforms/Using_CSS_transforms page-type: guide --- diff --git a/files/en-us/web/css/css_transitions/index.md b/files/en-us/web/css/css_transitions/index.md index 34a22011b4b0cb9..5e7b40fa3990008 100644 --- a/files/en-us/web/css/css_transitions/index.md +++ b/files/en-us/web/css/css_transitions/index.md @@ -1,13 +1,13 @@ --- -title: CSS Transitions -slug: Web/CSS/CSS_Transitions +title: CSS transitions +slug: Web/CSS/CSS_transitions page-type: css-module spec-urls: https://drafts.csswg.org/css-transitions/ --- {{CSSRef}} -**CSS Transitions** is a module of CSS that lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes. +The **CSS transitions** module lets you create gradual transitions between the values of specific CSS properties. The behavior of these transitions can be controlled by specifying their timing function, duration, and other attributes. ## Reference @@ -21,7 +21,7 @@ spec-urls: https://drafts.csswg.org/css-transitions/ ## Guides -- [Using CSS transitions](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) +- [Using CSS transitions](/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) - : Step-by-step tutorial about how to create transitions using CSS. This article describes each relevant CSS property and explains how they interact with each other. ## Specifications @@ -30,4 +30,4 @@ spec-urls: https://drafts.csswg.org/css-transitions/ ## See also -- Related to CSS Transitions, [CSS Animations](/en-US/docs/Web/CSS/CSS_Animations) provide finer control over animated properties. +- Related to CSS transitions, [CSS animations](/en-US/docs/Web/CSS/CSS_animations) provide finer control over animated properties. diff --git a/files/en-us/web/css/css_transitions/using_css_transitions/index.md b/files/en-us/web/css/css_transitions/using_css_transitions/index.md index 65ad1fb29e61cb3..9c85e02ea5bf016 100644 --- a/files/en-us/web/css/css_transitions/using_css_transitions/index.md +++ b/files/en-us/web/css/css_transitions/using_css_transitions/index.md @@ -1,8 +1,7 @@ --- title: Using CSS transitions -slug: Web/CSS/CSS_Transitions/Using_CSS_transitions +slug: Web/CSS/CSS_transitions/Using_CSS_transitions page-type: guide -spec-urls: https://drafts.csswg.org/css-transitions/ --- {{CSSRef}} From 970e6cf02dfdc9422e8ab076f2b4372968d50385 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya <dipika@foss-community.org> Date: Thu, 25 May 2023 18:06:48 -0400 Subject: [PATCH 3/7] letters c, m module landing pages --- files/en-us/_redirects.txt | 60 ++- files/en-us/_wikihistory.json | 504 +++++++++--------- .../web/css/css_color_adjustment/index.md | 2 +- .../web/css/css_container_queries/index.md | 8 +- .../index.md | 8 +- .../using_filter_effects/activists.jpg | Bin .../using_filter_effects/flag.jpg | Bin .../using_filter_effects/index.md | 4 +- .../listen_to_black_women.jpg | Bin .../using_filter_effects/mandala.svg | 0 .../index.md | 2 +- .../media-queries.png | Bin .../testing_media_queries/index.md | 6 +- .../using_media_queries/index.md | 6 +- .../index.md | 4 +- .../basic_concepts}/index.md | 8 +- .../index.md | 2 +- .../image-overflow-multicol.png | Bin .../index.md | 4 +- .../index.md | 22 +- .../spanning_balancing_columns}/index.md | 6 +- .../styling_columns/index.md | 6 +- .../using_multicol_layouts}/index.md | 2 +- .../en-us/web/css/css_writing_modes/index.md | 6 +- .../cssom_view/coordinate_systems/index.md | 4 +- files/en-us/web/css/cssom_view/index.md | 10 +- 26 files changed, 348 insertions(+), 326 deletions(-) rename files/en-us/web/css/{filter_effects => css_filter_effects}/index.md (69%) rename files/en-us/web/css/{filter_effects => css_filter_effects}/using_filter_effects/activists.jpg (100%) rename files/en-us/web/css/{filter_effects => css_filter_effects}/using_filter_effects/flag.jpg (100%) rename files/en-us/web/css/{filter_effects => css_filter_effects}/using_filter_effects/index.md (97%) rename files/en-us/web/css/{filter_effects => css_filter_effects}/using_filter_effects/listen_to_black_women.jpg (100%) rename files/en-us/web/css/{filter_effects => css_filter_effects}/using_filter_effects/mandala.svg (100%) rename files/en-us/web/css/{media_queries => css_media_queries}/index.md (99%) rename files/en-us/web/css/{media_queries => css_media_queries}/media-queries.png (100%) rename files/en-us/web/css/{media_queries => css_media_queries}/testing_media_queries/index.md (89%) rename files/en-us/web/css/{media_queries => css_media_queries}/using_media_queries/index.md (97%) rename files/en-us/web/css/{media_queries => css_media_queries}/using_media_queries_for_accessibility/index.md (90%) rename files/en-us/web/css/{css_columns/basic_concepts_of_multicol => css_multicol_layout/basic_concepts}/index.md (91%) rename files/en-us/web/css/{css_columns/handling_content_breaks_in_multicol => css_multicol_layout/handling_content_breaks_in_multicol_layout}/index.md (98%) rename files/en-us/web/css/{css_columns/handling_overflow_in_multicol => css_multicol_layout/handling_overflow_in_multicol_layout}/image-overflow-multicol.png (100%) rename files/en-us/web/css/{css_columns/handling_overflow_in_multicol => css_multicol_layout/handling_overflow_in_multicol_layout}/index.md (92%) rename files/en-us/web/css/{css_columns => css_multicol_layout}/index.md (59%) rename files/en-us/web/css/{css_columns/spanning_columns => css_multicol_layout/spanning_balancing_columns}/index.md (90%) rename files/en-us/web/css/{css_columns => css_multicol_layout}/styling_columns/index.md (92%) rename files/en-us/web/css/{css_columns/using_multi-column_layouts => css_multicol_layout/using_multicol_layouts}/index.md (99%) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 62ebd1ee520b8c5..5f94c5e7b10e08a 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -470,7 +470,7 @@ /en-US/docs/CSS/At-rule /en-US/docs/Web/CSS/At-rule /en-US/docs/CSS/Attribute_selectors /en-US/docs/Web/CSS/Attribute_selectors /en-US/docs/CSS/Aural /en-US/docs/Web/CSS/@media/aural -/en-US/docs/CSS/CSS3_Columns /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/en-US/docs/CSS/CSS3_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/CSS/CSS_Properties_Reference /en-US/docs/Web/CSS/Reference#index /en-US/docs/CSS/CSS_Reference /en-US/docs/Web/CSS/Reference /en-US/docs/CSS/CSS_Reference/Mozilla_Extensions /en-US/docs/Web/CSS/Mozilla_Extensions @@ -526,7 +526,7 @@ /en-US/docs/CSS/Media/TV /en-US/docs/Web/CSS/@media /en-US/docs/CSS/Media/Tactile /en-US/docs/Web/CSS/@media /en-US/docs/CSS/Media/Visual /en-US/docs/Web/CSS/@media -/en-US/docs/CSS/Media_queries /en-US/docs/Web/CSS/Media_Queries/Using_media_queries +/en-US/docs/CSS/Media_queries /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries /en-US/docs/CSS/Multiple_backgrounds /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds /en-US/docs/CSS/Other_Resources /en-US/docs/Web/CSS /en-US/docs/CSS/Paged_Media /en-US/docs/Web/CSS/Paged_Media @@ -566,18 +566,18 @@ /en-US/docs/CSS/Understanding_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /en-US/docs/CSS/Understanding_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /en-US/docs/CSS/Universal_selectors /en-US/docs/Web/CSS/Universal_selectors -/en-US/docs/CSS/Using_CSS_Columns /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/en-US/docs/CSS/Using_CSS_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/CSS/Using_CSS_animations /en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations /en-US/docs/CSS/Using_CSS_flexible_boxes /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox /en-US/docs/CSS/Using_CSS_gradients /en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients -/en-US/docs/CSS/Using_CSS_media_queries /en-US/docs/Web/CSS/Media_Queries/Using_media_queries -/en-US/docs/CSS/Using_CSS_multi-column_layouts /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/en-US/docs/CSS/Using_CSS_media_queries /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries +/en-US/docs/CSS/Using_CSS_multi-column_layouts /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/CSS/Using_CSS_multiple_backgrounds /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds /en-US/docs/CSS/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms /en-US/docs/CSS/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions /en-US/docs/CSS/Using_CSS_variables /en-US/docs/Web/CSS/Using_CSS_custom_properties -/en-US/docs/CSS/Using_media_queries_from_code /en-US/docs/Web/CSS/Media_Queries/Testing_media_queries -/en-US/docs/CSS/Using_the_CSS_multi-column_layout /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/en-US/docs/CSS/Using_media_queries_from_code /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries +/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 @@ -868,7 +868,7 @@ /en-US/docs/CSS/word-wrap /en-US/docs/Web/CSS/overflow-wrap /en-US/docs/CSS/writing-mode /en-US/docs/Web/CSS/writing-mode /en-US/docs/CSS/z-index /en-US/docs/Web/CSS/z-index -/en-US/docs/CSS3_Columns /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/en-US/docs/CSS3_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/CSS:-moz-alias /en-US/docs/Web/CSS/cursor /en-US/docs/CSS:-moz-appearance /en-US/docs/Web/CSS/appearance /en-US/docs/CSS:-moz-background-clip /en-US/docs/Web/CSS/background-clip @@ -1726,7 +1726,7 @@ /en-US/docs/DOM/Using_dynamic_styling_information /en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information /en-US/docs/DOM/Using_full-screen_mode /en-US/docs/Web/API/Fullscreen_API /en-US/docs/DOM/Using_fullscreen_mode /en-US/docs/Web/API/Fullscreen_API -/en-US/docs/DOM/Using_media_queries_from_code /en-US/docs/Web/CSS/Media_Queries/Testing_media_queries +/en-US/docs/DOM/Using_media_queries_from_code /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries /en-US/docs/DOM/Using_the_Page_Visibility_API /en-US/docs/Web/API/Page_Visibility_API /en-US/docs/DOM/Using_web_workers /en-US/docs/Web/API/Web_Workers_API/Using_web_workers /en-US/docs/DOM/ValidityState /en-US/docs/Web/API/ValidityState @@ -11299,7 +11299,7 @@ /en-US/docs/Web/CSS/All_About_The_Containing_Block /en-US/docs/Web/CSS/Containing_block /en-US/docs/Web/CSS/Aural /en-US/docs/Web/CSS/@media/aural /en-US/docs/Web/CSS/Block_formatting_context /en-US/docs/Web/Guide/CSS/Block_formatting_context -/en-US/docs/Web/CSS/CSS3_Columns /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/en-US/docs/Web/CSS/CSS3_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/Web/CSS/CSS_Background_and_Borders /en-US/docs/Web/CSS/CSS_backgrounds_and_borders /en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator /en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator @@ -11310,6 +11310,18 @@ /en-US/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property /en-US/docs/Web/CSS/cursor /en-US/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator /en-US/docs/Web/CSS/CSS_Color /en-US/docs/Web/CSS/CSS_colors +/en-US/docs/Web/CSS/CSS_Columns /en-US/docs/Web/CSS/CSS_multicol_layout +/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol /en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts +/en-US/docs/Web/CSS/CSS_Columns/Basic_concepts /en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts +/en-US/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol /en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout +/en-US/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol_layout /en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout +/en-US/docs/Web/CSS/CSS_Columns/Handling_overflow_in_multicol /en-US/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout +/en-US/docs/Web/CSS/CSS_Columns/Handling_overflow_in_multicol_layout /en-US/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout +/en-US/docs/Web/CSS/CSS_Columns/Spanning_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns +/en-US/docs/Web/CSS/CSS_Columns/Spanning_balancing_columns /en-US/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns +/en-US/docs/Web/CSS/CSS_Columns/Styling_columns /en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns +/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts +/en-US/docs/Web/CSS/CSS_Columns/Using_multicol_layouts /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/Web/CSS/CSS_Device_Adaptation /en-US/docs/Web/CSS /en-US/docs/Web/CSS/CSS_Device_Adaptation/Viewport_Concepts /en-US/docs/Web/CSS/Viewport_concepts /en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Advanced_layouts_with_flexbox /en-US/docs/Web/CSS/CSS_flexible_box_layout/Backwards_compatibility_of_flexbox @@ -11362,13 +11374,19 @@ /en-US/docs/Web/CSS/Descendant_selectors /en-US/docs/Web/CSS/Descendant_combinator /en-US/docs/Web/CSS/Draft_Implementations_of_CSS_Features /en-US/docs/Web/CSS/Mozilla_Extensions /en-US/docs/Web/CSS/FAQ /en-US/docs/Web/CSS -/en-US/docs/Web/CSS/Filters_Effects /en-US/docs/Web/CSS/Filter_Effects +/en-US/docs/Web/CSS/Filter_Effects /en-US/docs/Web/CSS/CSS_filter_effects +/en-US/docs/Web/CSS/Filter_Effects/Using_filter_effects /en-US/docs/Web/CSS/CSS_filter_effects/Using_filter_effects +/en-US/docs/Web/CSS/Filters_Effects /en-US/docs/Web/CSS/CSS_filter_effects /en-US/docs/Web/CSS/Flexbox /en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox /en-US/docs/Web/CSS/General_sibling_selectors /en-US/docs/Web/CSS/General_sibling_combinator /en-US/docs/Web/CSS/Grouping_selectors /en-US/docs/Web/CSS/Selector_list /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 +/en-US/docs/Web/CSS/Media_Queries /en-US/docs/Web/CSS/CSS_media_queries +/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries +/en-US/docs/Web/CSS/Media_Queries/Using_media_queries /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries +/en-US/docs/Web/CSS/Media_Queries/Using_media_queries_for_accessibility /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility /en-US/docs/Web/CSS/Motion_Path /en-US/docs/Web/CSS/CSS_Motion_Path /en-US/docs/Web/CSS/Other_Resources /en-US/docs/Web/CSS /en-US/docs/Web/CSS/Reference/Mozilla_Extensions /en-US/docs/Web/CSS/Mozilla_Extensions @@ -11390,11 +11408,11 @@ /en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 /en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /en-US/docs/Web/CSS/Understanding_CSS_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -/en-US/docs/Web/CSS/Using_CSS_Columns /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts -/en-US/docs/Web/CSS/Using_CSS_media_queries /en-US/docs/Web/CSS/Media_Queries/Using_media_queries +/en-US/docs/Web/CSS/Using_CSS_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts +/en-US/docs/Web/CSS/Using_CSS_media_queries /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries /en-US/docs/Web/CSS/Using_CSS_variables /en-US/docs/Web/CSS/Using_CSS_custom_properties -/en-US/docs/Web/CSS/Using_media_queries_from_code /en-US/docs/Web/CSS/Media_Queries/Testing_media_queries -/en-US/docs/Web/CSS/Using_the_CSS_multi-column_layout /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/en-US/docs/Web/CSS/Using_media_queries_from_code /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries +/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/additive-symbols /en-US/docs/Web/CSS/@counter-style/additive-symbols @@ -11507,7 +11525,7 @@ /en-US/docs/Web/CSS/motion-offset /en-US/docs/Web/CSS/offset-distance /en-US/docs/Web/CSS/motion-path /en-US/docs/Web/CSS/offset-path /en-US/docs/Web/CSS/motion-rotation /en-US/docs/Web/CSS/offset-rotate -/en-US/docs/Web/CSS/mq-boolean /en-US/docs/Web/CSS/Media_Queries/Using_media_queries +/en-US/docs/Web/CSS/mq-boolean /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries /en-US/docs/Web/CSS/negative /en-US/docs/Web/CSS/@counter-style/negative /en-US/docs/Web/CSS/none /en-US/docs/Web/CSS/float /en-US/docs/Web/CSS/normal /en-US/docs/Web/CSS/font-variant @@ -11893,9 +11911,9 @@ /en-US/docs/Web/Guide/CSS/Getting_started/What_is_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS /en-US/docs/Learn/CSS/First_steps/How_CSS_works /en-US/docs/Web/Guide/CSS/Getting_started/Why_use_CSS? /en-US/docs/Learn/CSS/First_steps/How_CSS_works -/en-US/docs/Web/Guide/CSS/Media_queries /en-US/docs/Web/CSS/Media_Queries/Using_media_queries +/en-US/docs/Web/Guide/CSS/Media_queries /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries /en-US/docs/Web/Guide/CSS/Scaling_background_images /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images -/en-US/docs/Web/Guide/CSS/Testing_media_queries /en-US/docs/Web/CSS/Media_Queries/Testing_media_queries +/en-US/docs/Web/Guide/CSS/Testing_media_queries /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries /en-US/docs/Web/Guide/CSS/Understanding_z_index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index /en-US/docs/Web/Guide/CSS/Understanding_z_index/Adding_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index /en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_and_float /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float @@ -11909,7 +11927,7 @@ /en-US/docs/Web/Guide/CSS/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms /en-US/docs/Web/Guide/CSS/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions /en-US/docs/Web/Guide/CSS/Using_flexbox_to_lay_out_web_applications /en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox -/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts /en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts +/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds /en-US/docs/Web/Guide/CSS/Using_the_:target_selector /en-US/docs/Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors /en-US/docs/Web/Guide/CSS/Visual_formatting_model /en-US/docs/Web/CSS/Visual_formatting_model @@ -12596,7 +12614,7 @@ /en-US/docs/Web/MathML/Index /en-US/docs/Web/MathML /en-US/docs/Web/Media/Formats/Guide_to_codecs_for_audio_on_the_web /en-US/docs/Web/Media/Formats/Audio_codecs /en-US/docs/Web/Media/images/aspect_ratio_mapping /en-US/docs/Learn/Performance/Multimedia -/en-US/docs/Web/Media_Queries /en-US/docs/Web/CSS/Media_Queries +/en-US/docs/Web/Media_Queries /en-US/docs/Web/CSS/CSS_media_queries /en-US/docs/Web/Performance/Populating_the_page:_how_browsers_work /en-US/docs/Web/Performance/How_browsers_work /en-US/docs/Web/Performance/Time_to_interactive /en-US/docs/Glossary/Time_to_interactive /en-US/docs/Web/Performance/business_case_for_performance /en-US/docs/Learn/Performance/business_case_for_performance @@ -12618,7 +12636,7 @@ /en-US/docs/Web/Progressive_web_apps/Re-engageable /en-US/docs/Web/Progressive_web_apps /en-US/docs/Web/Progressive_web_apps/Re-engageable_Notifications_Push /en-US/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Re-engageable_Notifications_Push /en-US/docs/Web/Progressive_web_apps/Responsive /en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks -/en-US/docs/Web/Progressive_web_apps/Responsive/Media_types /en-US/docs/Web/CSS/Media_Queries/Using_media_queries +/en-US/docs/Web/Progressive_web_apps/Responsive/Media_types /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries /en-US/docs/Web/Progressive_web_apps/Safe /en-US/docs/Web/Progressive_web_apps /en-US/docs/Web/Progressive_web_apps/Structural_overview /en-US/docs/Web/Progressive_web_apps/Guides/Structural_overview /en-US/docs/Web/Reference /en-US/docs/Web diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index d3e465c65d7c205..f4a4e16c1b7bf1f 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -77156,7 +77156,7 @@ "BijuGC" ] }, - "Web/CSS/CSSOM_View": { + "Web/CSS/CSSOM_view": { "modified": "2020-10-15T21:38:34.242Z", "contributors": [ "wbamberg", @@ -77167,96 +77167,10 @@ "teoli" ] }, - "Web/CSS/CSSOM_View/Coordinate_systems": { + "Web/CSS/CSSOM_view/Coordinate_systems": { "modified": "2020-04-27T22:32:23.815Z", "contributors": ["chrisn", "mfluehr", "JohannesCleve", "Sheppy"] }, - "Web/CSS/CSS_Columns": { - "modified": "2020-07-07T12:23:32.536Z", - "contributors": [ - "wbamberg", - "SphinxKnight", - "Syamsul88", - "estelle", - "rachelandrew", - "mfluehr", - "Sheppy", - "fscholz", - "Sebastianz", - "teoli" - ] - }, - "Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol": { - "modified": "2020-04-27T22:29:38.078Z", - "contributors": ["ExE-Boss", "estelle", "rachelandrew"] - }, - "Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol": { - "modified": "2020-04-27T22:29:41.679Z", - "contributors": ["ExE-Boss", "estelle", "rachelandrew"] - }, - "Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol": { - "modified": "2020-04-27T22:29:44.728Z", - "contributors": ["ExE-Boss", "estelle", "rachelandrew"] - }, - "Web/CSS/CSS_Columns/Spanning_Columns": { - "modified": "2020-04-27T22:29:48.205Z", - "contributors": ["mfuji09", "ExE-Boss", "estelle", "rachelandrew"] - }, - "Web/CSS/CSS_Columns/Styling_Columns": { - "modified": "2020-04-27T22:29:51.331Z", - "contributors": [ - "SphinxKnight", - "StanLindsey", - "mfuji09", - "ExE-Boss", - "ausi", - "estelle", - "rachelandrew" - ] - }, - "Web/CSS/CSS_Columns/Using_multi-column_layouts": { - "modified": "2020-09-10T08:57:56.952Z", - "contributors": [ - "mfuji09", - "KadirTopal", - "Nisarg-Shah", - "ExE-Boss", - "rachelandrew", - "mfluehr", - "Sebastianz", - "JacobyAlley", - "xfq", - "David_Gilbertson", - "chrisdavidmills", - "guilhermemuller", - "duncanmcdonald", - "teoli", - "jigs12", - "fscholz", - "RAMilewski", - "Jeremie", - "kscarfone", - "Sheppy", - "tgrant54", - "astgtciv", - "cpearce", - "sebmozilla", - "Jürgen Jeka", - "miken32", - "Takkaria", - "BijuGC", - "Mgjbot", - "bradipao", - "Jorolo", - "Sebuls", - "Pmsyyz", - "Ptak82", - "Dria", - "BenoitL", - "Staszyna", - "Roc" - ] - }, "Web/CSS/CSS_Flexible_Box_Layout/Controlling_ratios_of_flex_items_along_main_axis": { "modified": "2020-06-24T00:31:19.661Z", "contributors": [ @@ -78131,18 +78045,6 @@ "chrisdavidmills" ] }, - "Web/CSS/CSS_Writing_Modes": { - "modified": "2020-07-07T12:31:18.518Z", - "contributors": [ - "wbamberg", - "fscholz", - "SphinxKnight", - "LiuYanandGithub", - "mfluehr", - "Sebastianz", - "teoli" - ] - }, "Web/CSS/CSS_animated_properties": { "modified": "2020-12-14T07:30:52.556Z", "contributors": [ @@ -78514,6 +78416,10 @@ "teoli" ] }, + "Web/CSS/CSS_filter_effects": { + "modified": "2020-12-02T11:05:43.361Z", + "contributors": ["peterbe", "wbamberg", "fscholz", "mfluehr"] + }, "Web/CSS/CSS_flexible_box_layout": { "modified": "2020-07-07T12:06:27.676Z", "contributors": [ @@ -78659,6 +78565,240 @@ "modified": "2020-07-07T12:15:32.340Z", "contributors": ["wbamberg", "mfluehr"] }, + "Web/CSS/CSS_media_queries": { + "modified": "2020-07-07T12:37:08.835Z", + "contributors": [ + "wbamberg", + "alattalatta", + "mfuji09", + "evaferreira", + "rachelandrew", + "fscholz", + "mfluehr", + "Sheppy", + "chrisdavidmills", + "erikadoyle", + "ibizcox", + "Sebastianz", + "teoli", + "sujeetkalaskar" + ] + }, + "Web/CSS/CSS_media_queries/Testing_media_queries": { + "modified": "2020-10-15T21:07:28.917Z", + "contributors": [ + "RainSlide", + "fscholz", + "BenMansley", + "mfuji09", + "mfluehr", + "Shaderpixel", + "Tigt", + "chrisdavidmills", + "teoli", + "hexalys", + "P0lip", + "Jeremie", + "kscarfone", + "Sheppy", + "kohei.yoshino", + "ethertank", + "caesarschinas", + "robflaherty", + "yyss", + "paul.irish" + ] + }, + "Web/CSS/CSS_media_queries/Using_media_queries": { + "modified": "2020-09-16T07:07:38.822Z", + "contributors": [ + "sideshowbarker", + "Sheppy", + "chrisdavidmills", + "McContax", + "pwign", + "SphinxKnight", + "andronweedQween", + "q.dinar", + "Jürgen Jeka", + "bershanskiy", + "cpmsmith", + "HTMLValidator", + "mfuji09", + "Artoria2e5", + "rachelandrew", + "mfluehr", + "BurhanDaepat", + "zbjornson", + "Jonathan_Watt", + "miket", + "dkocho4", + "samus250", + "AozakiOrenji", + "pepe2016", + "Sebastianz", + "jonathanKingston", + "y0ssar1an", + "lzhoucs", + "vinitm", + "cvrebert", + "naomik", + "Delapouite", + "mrstork", + "malayaleecoder", + "yisibl", + "jsx", + "hashedhyphen", + "wual", + "teoli", + "AlexPl", + "estesmax", + "jwhitlock", + "aram2625", + "asgs", + "jswisher", + "alonepopstone", + "LoTD", + "Minat", + "Penny", + "jensen", + "morello", + "jscape", + "kohei.yoshino", + "amitabha197", + "sainath", + "ryuslash", + "mediumdeviation", + "DavidWalsh", + "wctaiwan", + "Jeremie", + "lauritzt", + "Naesten", + "hexalys", + "martind1", + "jeffbradberry", + "kscarfone", + "ezigo", + "Nightingale", + "timdream", + "mnoorenberghe", + "tregagnon", + "dbs", + "leemark", + "mattbasta", + "FredB", + "mbajoras", + "Snuggypoo", + "Supuhstar", + "openjck", + "myf", + "Mohammed_Hossam", + "jaffathecake", + "lmorchard", + "tw2113", + "caesarschinas", + "trevorh", + "Jez9999", + "inma_610", + "fryn", + "jdm", + "Verruckt", + "Marsf", + "Waldo", + "Kris.shannon", + "BenoitL" + ] + }, + "Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility": { + "modified": "2020-07-07T17:49:27.435Z", + "contributors": ["wbamberg", "evaferreira"] + }, + "Web/CSS/CSS_multicol_layout": { + "modified": "2020-07-07T12:23:32.536Z", + "contributors": [ + "wbamberg", + "SphinxKnight", + "Syamsul88", + "estelle", + "rachelandrew", + "mfluehr", + "Sheppy", + "fscholz", + "Sebastianz", + "teoli" + ] + }, + "Web/CSS/CSS_multicol_layout/Basic_concepts": { + "modified": "2020-04-27T22:29:38.078Z", + "contributors": ["ExE-Boss", "estelle", "rachelandrew"] + }, + "Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout": { + "modified": "2020-04-27T22:29:44.728Z", + "contributors": ["ExE-Boss", "estelle", "rachelandrew"] + }, + "Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout": { + "modified": "2020-04-27T22:29:41.679Z", + "contributors": ["ExE-Boss", "estelle", "rachelandrew"] + }, + "Web/CSS/CSS_multicol_layout/Spanning_balancing_columns": { + "modified": "2020-04-27T22:29:48.205Z", + "contributors": ["mfuji09", "ExE-Boss", "estelle", "rachelandrew"] + }, + "Web/CSS/CSS_multicol_layout/Styling_columns": { + "modified": "2020-04-27T22:29:51.331Z", + "contributors": [ + "SphinxKnight", + "StanLindsey", + "mfuji09", + "ExE-Boss", + "ausi", + "estelle", + "rachelandrew" + ] + }, + "Web/CSS/CSS_multicol_layout/Using_multicol_layouts": { + "modified": "2020-09-10T08:57:56.952Z", + "contributors": [ + "mfuji09", + "KadirTopal", + "Nisarg-Shah", + "ExE-Boss", + "rachelandrew", + "mfluehr", + "Sebastianz", + "JacobyAlley", + "xfq", + "David_Gilbertson", + "chrisdavidmills", + "guilhermemuller", + "duncanmcdonald", + "teoli", + "jigs12", + "fscholz", + "RAMilewski", + "Jeremie", + "kscarfone", + "Sheppy", + "tgrant54", + "astgtciv", + "cpearce", + "sebmozilla", + "Jürgen Jeka", + "miken32", + "Takkaria", + "BijuGC", + "Mgjbot", + "bradipao", + "Jorolo", + "Sebuls", + "Pmsyyz", + "Ptak82", + "Dria", + "BenoitL", + "Staszyna", + "Roc" + ] + }, "Web/CSS/CSS_shapes": { "modified": "2020-07-07T12:26:26.279Z", "contributors": [ @@ -78864,6 +79004,18 @@ "Hansschmucker" ] }, + "Web/CSS/CSS_writing_modes": { + "modified": "2020-07-07T12:31:18.518Z", + "contributors": [ + "wbamberg", + "fscholz", + "SphinxKnight", + "LiuYanandGithub", + "mfluehr", + "Sebastianz", + "teoli" + ] + }, "Web/CSS/Cascade": { "modified": "2020-07-27T13:35:05.470Z", "contributors": [ @@ -79017,10 +79169,6 @@ "Wjjohnst" ] }, - "Web/CSS/Filter_Effects": { - "modified": "2020-12-02T11:05:43.361Z", - "contributors": ["peterbe", "wbamberg", "fscholz", "mfluehr"] - }, "Web/CSS/General_sibling_combinator": { "modified": "2020-10-15T21:04:16.746Z", "contributors": [ @@ -79179,154 +79327,6 @@ "teoli" ] }, - "Web/CSS/Media_Queries": { - "modified": "2020-07-07T12:37:08.835Z", - "contributors": [ - "wbamberg", - "alattalatta", - "mfuji09", - "evaferreira", - "rachelandrew", - "fscholz", - "mfluehr", - "Sheppy", - "chrisdavidmills", - "erikadoyle", - "ibizcox", - "Sebastianz", - "teoli", - "sujeetkalaskar" - ] - }, - "Web/CSS/Media_Queries/Testing_media_queries": { - "modified": "2020-10-15T21:07:28.917Z", - "contributors": [ - "RainSlide", - "fscholz", - "BenMansley", - "mfuji09", - "mfluehr", - "Shaderpixel", - "Tigt", - "chrisdavidmills", - "teoli", - "hexalys", - "P0lip", - "Jeremie", - "kscarfone", - "Sheppy", - "kohei.yoshino", - "ethertank", - "caesarschinas", - "robflaherty", - "yyss", - "paul.irish" - ] - }, - "Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility": { - "modified": "2020-07-07T17:49:27.435Z", - "contributors": ["wbamberg", "evaferreira"] - }, - "Web/CSS/Media_Queries/Using_media_queries": { - "modified": "2020-09-16T07:07:38.822Z", - "contributors": [ - "sideshowbarker", - "Sheppy", - "chrisdavidmills", - "McContax", - "pwign", - "SphinxKnight", - "andronweedQween", - "q.dinar", - "Jürgen Jeka", - "bershanskiy", - "cpmsmith", - "HTMLValidator", - "mfuji09", - "Artoria2e5", - "rachelandrew", - "mfluehr", - "BurhanDaepat", - "zbjornson", - "Jonathan_Watt", - "miket", - "dkocho4", - "samus250", - "AozakiOrenji", - "pepe2016", - "Sebastianz", - "jonathanKingston", - "y0ssar1an", - "lzhoucs", - "vinitm", - "cvrebert", - "naomik", - "Delapouite", - "mrstork", - "malayaleecoder", - "yisibl", - "jsx", - "hashedhyphen", - "wual", - "teoli", - "AlexPl", - "estesmax", - "jwhitlock", - "aram2625", - "asgs", - "jswisher", - "alonepopstone", - "LoTD", - "Minat", - "Penny", - "jensen", - "morello", - "jscape", - "kohei.yoshino", - "amitabha197", - "sainath", - "ryuslash", - "mediumdeviation", - "DavidWalsh", - "wctaiwan", - "Jeremie", - "lauritzt", - "Naesten", - "hexalys", - "martind1", - "jeffbradberry", - "kscarfone", - "ezigo", - "Nightingale", - "timdream", - "mnoorenberghe", - "tregagnon", - "dbs", - "leemark", - "mattbasta", - "FredB", - "mbajoras", - "Snuggypoo", - "Supuhstar", - "openjck", - "myf", - "Mohammed_Hossam", - "jaffathecake", - "lmorchard", - "tw2113", - "caesarschinas", - "trevorh", - "Jez9999", - "inma_610", - "fryn", - "jdm", - "Verruckt", - "Marsf", - "Waldo", - "Kris.shannon", - "BenoitL" - ] - }, "Web/CSS/Mozilla_Extensions": { "modified": "2020-08-09T13:09:17.030Z", "contributors": [ diff --git a/files/en-us/web/css/css_color_adjustment/index.md b/files/en-us/web/css/css_color_adjustment/index.md index eb81ba5628b7f3a..94a4d6e46e6de8b 100644 --- a/files/en-us/web/css/css_color_adjustment/index.md +++ b/files/en-us/web/css/css_color_adjustment/index.md @@ -55,4 +55,4 @@ Together with the {{CSSxRef("@media")}} features {{cssxref("@media/prefers-color ## See also -- [CSS colors module](/en-US/docs/Web/CSS/CSS_Colors) +- [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module diff --git a/files/en-us/web/css/css_container_queries/index.md b/files/en-us/web/css/css_container_queries/index.md index 8b48764ef91a603..02c952b4369f9a3 100644 --- a/files/en-us/web/css/css_container_queries/index.md +++ b/files/en-us/web/css/css_container_queries/index.md @@ -1,13 +1,13 @@ --- -title: CSS Container Queries -slug: Web/CSS/CSS_Container_Queries +title: CSS container queries +slug: Web/CSS/CSS_container_queries page-type: guide --- {{CSSRef}} Container queries enable you to apply styles to an element based on the size of the element's container. If, for example, a container has less space available in the surrounding context, you can hide certain elements or use smaller fonts. -Container queries are an alternative to [media queries](/en-US/docs/Web/CSS/Media_Queries), which apply styles to elements based on viewport size or other device characteristics. +Container queries are an alternative to [media queries](/en-US/docs/Web/CSS/CSS_media_queries), which apply styles to elements based on viewport size or other device characteristics. ![A media query based on the viewport's width, which is the full width of the browser, and a container query based on the width of a container context, which is the width of the container element.](container-query.svg) @@ -157,7 +157,7 @@ If you want to use a single-column layout for devices with a smaller viewport, y ## See also -- [Media queries](/en-US/docs/Web/CSS/Media_Queries) +- [Media queries](/en-US/docs/Web/CSS/CSS_media_queries) - CSS {{Cssxref("@container")}} at-rule - CSS {{Cssxref("contain")}} property - CSS {{Cssxref("container")}} shorthand property diff --git a/files/en-us/web/css/filter_effects/index.md b/files/en-us/web/css/css_filter_effects/index.md similarity index 69% rename from files/en-us/web/css/filter_effects/index.md rename to files/en-us/web/css/css_filter_effects/index.md index 48f45f0b80f93df..c4ce3d4bfcf1ed2 100644 --- a/files/en-us/web/css/filter_effects/index.md +++ b/files/en-us/web/css/css_filter_effects/index.md @@ -1,6 +1,6 @@ --- title: CSS filter effects -slug: Web/CSS/Filter_Effects +slug: Web/CSS/CSS_filter_effects page-type: css-module spec-urls: - https://drafts.fxtf.org/filter-effects-2/ @@ -39,7 +39,7 @@ To see the code for this filter effects sample, [view the source on GitHub](http ## Guides -- [Using CSS filter effects](/en-US/docs/Web/CSS/Filter_Effects/Using_filter_effects) +- [Using CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects/Using_filter_effects) - : Overview of the concepts surrounding CSS filter effects, including properties, filter functions, and SVG filters, with an explanation of filter values, source order, and value interactions. ## Related concepts @@ -61,5 +61,5 @@ To see the code for this filter effects sample, [view the source on GitHub](http ## See also -- Properties in the CSS [compositing and blending](/en-US/docs/Web/CSS/Compositing_and_Blending) module enable blending an element's background layers together and blending an element with its container. -- The SVG {{SVGElement("filter")}} element and the SVG filter primitives, including {{SVGElement("feSpotLight")}}, {{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}}, {{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, and {{SVGElement("feTurbulence")}}. +- Properties in the [CSS compositing and blending](/en-US/docs/Web/CSS/CSS_compositing_and_blending) module enable blending an element's background layers together and blending an element with its container +- The SVG {{SVGElement("filter")}} element and the SVG filter primitives: {{SVGElement("feSpotLight")}}, {{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feDropShadow")}}, {{SVGElement("feFlood")}}, {{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}} diff --git a/files/en-us/web/css/filter_effects/using_filter_effects/activists.jpg b/files/en-us/web/css/css_filter_effects/using_filter_effects/activists.jpg similarity index 100% rename from files/en-us/web/css/filter_effects/using_filter_effects/activists.jpg rename to files/en-us/web/css/css_filter_effects/using_filter_effects/activists.jpg diff --git a/files/en-us/web/css/filter_effects/using_filter_effects/flag.jpg b/files/en-us/web/css/css_filter_effects/using_filter_effects/flag.jpg similarity index 100% rename from files/en-us/web/css/filter_effects/using_filter_effects/flag.jpg rename to files/en-us/web/css/css_filter_effects/using_filter_effects/flag.jpg diff --git a/files/en-us/web/css/filter_effects/using_filter_effects/index.md b/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md similarity index 97% rename from files/en-us/web/css/filter_effects/using_filter_effects/index.md rename to files/en-us/web/css/css_filter_effects/using_filter_effects/index.md index 8a7fa1cc4675534..ff0b110bae73a23 100644 --- a/files/en-us/web/css/filter_effects/using_filter_effects/index.md +++ b/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md @@ -1,6 +1,6 @@ --- title: Using filter effects -slug: Web/CSS/Filter_Effects/Using_filter_effects +slug: Web/CSS/CSS_filter_effects/Using_filter_effects page-type: guide --- @@ -10,7 +10,7 @@ Have you ever hovered over a black-and-white or sepia image and the full-color i ## Advantages of using CSS filter effects -The [Filter effects](/en-US/docs/Web/CSS/Filter_Effects) module in CSS provides properties and functions that let you apply the visual effects described above without using Photoshop or sending extra HTTP requests. The only software required is the user's browser. Moreover, unlike pre-set image effects, CSS filter effects are responsive and animatable. +The [Filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) module in CSS provides properties and functions that let you apply the visual effects described above without using Photoshop or sending extra HTTP requests. The only software required is the user's browser. Moreover, unlike pre-set image effects, CSS filter effects are responsive and animatable. The CSS filter effects module provides the {{cssxref("filter")}} and {{cssxref("backdrop-filter")}} properties that you can use to impact the rendering of text, images, backgrounds, and borders, or any element on which you apply these properties. This module also defines the {{cssxref("<filter-function>")}} data type that lets you add graphical effects such as blurring or color shifting. Using the filter functions, you can not only alter the appearance of an element but also reference an SVG filter using a filter that you create. diff --git a/files/en-us/web/css/filter_effects/using_filter_effects/listen_to_black_women.jpg b/files/en-us/web/css/css_filter_effects/using_filter_effects/listen_to_black_women.jpg similarity index 100% rename from files/en-us/web/css/filter_effects/using_filter_effects/listen_to_black_women.jpg rename to files/en-us/web/css/css_filter_effects/using_filter_effects/listen_to_black_women.jpg diff --git a/files/en-us/web/css/filter_effects/using_filter_effects/mandala.svg b/files/en-us/web/css/css_filter_effects/using_filter_effects/mandala.svg similarity index 100% rename from files/en-us/web/css/filter_effects/using_filter_effects/mandala.svg rename to files/en-us/web/css/css_filter_effects/using_filter_effects/mandala.svg diff --git a/files/en-us/web/css/media_queries/index.md b/files/en-us/web/css/css_media_queries/index.md similarity index 99% rename from files/en-us/web/css/media_queries/index.md rename to files/en-us/web/css/css_media_queries/index.md index 79d99eae24b1885..55d186af4e2147e 100644 --- a/files/en-us/web/css/media_queries/index.md +++ b/files/en-us/web/css/css_media_queries/index.md @@ -1,6 +1,6 @@ --- title: Media queries -slug: Web/CSS/Media_Queries +slug: Web/CSS/CSS_media_queries page-type: css-module spec-urls: - https://drafts.csswg.org/mediaqueries/ diff --git a/files/en-us/web/css/media_queries/media-queries.png b/files/en-us/web/css/css_media_queries/media-queries.png similarity index 100% rename from files/en-us/web/css/media_queries/media-queries.png rename to files/en-us/web/css/css_media_queries/media-queries.png diff --git a/files/en-us/web/css/media_queries/testing_media_queries/index.md b/files/en-us/web/css/css_media_queries/testing_media_queries/index.md similarity index 89% rename from files/en-us/web/css/media_queries/testing_media_queries/index.md rename to files/en-us/web/css/css_media_queries/testing_media_queries/index.md index e6b0acafd557bbe..799d6540232ac4d 100644 --- a/files/en-us/web/css/media_queries/testing_media_queries/index.md +++ b/files/en-us/web/css/css_media_queries/testing_media_queries/index.md @@ -1,13 +1,13 @@ --- title: Testing media queries programmatically -slug: Web/CSS/Media_Queries/Testing_media_queries +slug: Web/CSS/CSS_media_queries/Testing_media_queries page-type: guide browser-compat: api.MediaQueryList --- {{CSSRef}} -The {{Glossary("DOM")}} provides features that can test the results of a [media query](/en-US/docs/Web/CSS/Media_Queries) programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a `MediaQueryList` object, you can check the result of the query or receive notifications when the result changes. +The {{Glossary("DOM")}} provides features that can test the results of a [media query](/en-US/docs/Web/CSS/CSS_media_queries) programmatically, via the {{domxref("MediaQueryList")}} interface and its methods and properties. Once you've created a `MediaQueryList` object, you can check the result of the query or receive notifications when the result changes. ## Creating a media query list @@ -81,7 +81,7 @@ mediaQueryList.removeEventListener("change", handleOrientationChange); ## See also -- [Media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) +- [Media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) - {{domxref("window.matchMedia()")}} - {{domxref("MediaQueryList")}} - {{domxref("MediaQueryListEvent")}} diff --git a/files/en-us/web/css/media_queries/using_media_queries/index.md b/files/en-us/web/css/css_media_queries/using_media_queries/index.md similarity index 97% rename from files/en-us/web/css/media_queries/using_media_queries/index.md rename to files/en-us/web/css/css_media_queries/using_media_queries/index.md index 7d8953bad3f2cb5..9f6984e4979b0ca 100644 --- a/files/en-us/web/css/media_queries/using_media_queries/index.md +++ b/files/en-us/web/css/css_media_queries/using_media_queries/index.md @@ -1,6 +1,6 @@ --- title: Using media queries -slug: Web/CSS/Media_Queries/Using_media_queries +slug: Web/CSS/CSS_media_queries/Using_media_queries page-type: guide --- @@ -11,7 +11,7 @@ Media queries are used for the following: - To conditionally apply styles with the [CSS](/en-US/docs/Web/CSS) {{cssxref("@media")}} and {{cssxref("@import")}} [at-rules](/en-US/docs/Web/CSS/At-rule). - To target specific media for the {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}}, and other [HTML](/en-US/docs/Web/HTML) elements with the `media=` attribute. -- To [test and monitor media states](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) using the {{domxref("Window.matchMedia()")}} and {{domxref("EventTarget.addEventListener()")}} methods. +- To [test and monitor media states](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries) using the {{domxref("Window.matchMedia()")}} and {{domxref("EventTarget.addEventListener()")}} methods. > **Note:** The examples on this page use CSS's `@media` for illustrative purposes, but the basic syntax remains the same for all types of media queries. @@ -295,7 +295,7 @@ For example, the following query tests for devices that have a monochrome displa - [@media](/en-US/docs/Web/CSS/@media) - [Container queries](/en-US/docs/Web/CSS/CSS_Container_Queries) -- [Testing media queries programmatically](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) +- [Testing media queries programmatically](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries) - [CSS Animations Between Media Queries](https://davidwalsh.name/animate-media-queries) - [Extended Mozilla media features](/en-US/docs/Web/CSS/Mozilla_Extensions#media_features) - [Extended WebKit media features](/en-US/docs/Web/CSS/WebKit_Extensions#media_features) diff --git a/files/en-us/web/css/media_queries/using_media_queries_for_accessibility/index.md b/files/en-us/web/css/css_media_queries/using_media_queries_for_accessibility/index.md similarity index 90% rename from files/en-us/web/css/media_queries/using_media_queries_for_accessibility/index.md rename to files/en-us/web/css/css_media_queries/using_media_queries_for_accessibility/index.md index b57bab317b6f869..6a5184f0194da26 100644 --- a/files/en-us/web/css/media_queries/using_media_queries_for_accessibility/index.md +++ b/files/en-us/web/css/css_media_queries/using_media_queries_for_accessibility/index.md @@ -1,10 +1,10 @@ --- title: Using media queries for accessibility -slug: Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility +slug: Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility page-type: guide --- -[**Media Queries**](/en-US/docs/Web/CSS/@media) can be used to help users with disabilities better experience your website. +[**CSS media queries**](/en-US/docs/Web/CSS/CSS_media_queries) can be used to help users with disabilities better experience your website. ## Reduced Motion diff --git a/files/en-us/web/css/css_columns/basic_concepts_of_multicol/index.md b/files/en-us/web/css/css_multicol_layout/basic_concepts/index.md similarity index 91% rename from files/en-us/web/css/css_columns/basic_concepts_of_multicol/index.md rename to files/en-us/web/css/css_multicol_layout/basic_concepts/index.md index 67bb105c5fd3f0b..fef2fbbcdce20d8 100644 --- a/files/en-us/web/css/css_columns/basic_concepts_of_multicol/index.md +++ b/files/en-us/web/css/css_multicol_layout/basic_concepts/index.md @@ -1,16 +1,16 @@ --- title: Basic concepts of multi-column layout -slug: Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol +slug: Web/CSS/CSS_multicol_layout/Basic_concepts page-type: guide --- {{CSSRef}} -Multiple-column layout, usually referred to as multicol, is a specification for laying out content into a set of column boxes much like columns in a newspaper. This guide explains how the specification works with some common use case examples. +Multi-column layout, usually referred to as multicol layout, is a specification for laying out content into a set of column boxes much like columns in a newspaper. This guide explains how the specification works with some common use case examples. ## Key concepts and terminology -Multicol is unlike any of the other layout methods we have in CSS; it fragments the content, including all descendant elements, into columns. This happens in the same way that content is fragmented into pages when we work with [CSS Paged Media](/en-US/docs/Web/CSS/CSS_Pages) by creating a print stylesheet. +Multicol is unlike any of the other layout methods we have in CSS; it fragments the content, including all descendant elements, into columns. This happens in the same way that content is fragmented into pages when we work with [CSS Paged Media](/en-US/docs/Web/CSS/CSS_paged_media) by creating a print stylesheet. The properties defined by the specification are: @@ -91,4 +91,4 @@ This CSS would give the same result as example 3, with both `column-count` and ` ## Next steps -In this guide, we've learned the basic use of multi-column layout. In the next guide, we will look at how much we can [style the columns themselves](/en-US/docs/Web/CSS/CSS_Columns/Styling_Columns). +In this guide, we've learned the basic use of multi-column layout. In the next guide, we will look at how much we can [style the columns themselves](/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns). diff --git a/files/en-us/web/css/css_columns/handling_content_breaks_in_multicol/index.md b/files/en-us/web/css/css_multicol_layout/handling_content_breaks_in_multicol_layout/index.md similarity index 98% rename from files/en-us/web/css/css_columns/handling_content_breaks_in_multicol/index.md rename to files/en-us/web/css/css_multicol_layout/handling_content_breaks_in_multicol_layout/index.md index a5f7fbe3e63026c..489f058bee860a6 100644 --- a/files/en-us/web/css/css_columns/handling_content_breaks_in_multicol/index.md +++ b/files/en-us/web/css/css_multicol_layout/handling_content_breaks_in_multicol_layout/index.md @@ -1,6 +1,6 @@ --- title: Handling content breaks in multi-column layout -slug: Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol +slug: Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout page-type: guide --- diff --git a/files/en-us/web/css/css_columns/handling_overflow_in_multicol/image-overflow-multicol.png b/files/en-us/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/image-overflow-multicol.png similarity index 100% rename from files/en-us/web/css/css_columns/handling_overflow_in_multicol/image-overflow-multicol.png rename to files/en-us/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/image-overflow-multicol.png diff --git a/files/en-us/web/css/css_columns/handling_overflow_in_multicol/index.md b/files/en-us/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md similarity index 92% rename from files/en-us/web/css/css_columns/handling_overflow_in_multicol/index.md rename to files/en-us/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md index 29a98f22f6b8e67..d3230eca73fcd84 100644 --- a/files/en-us/web/css/css_columns/handling_overflow_in_multicol/index.md +++ b/files/en-us/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md @@ -1,6 +1,6 @@ --- title: Handling overflow in multi-column layout -slug: Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol +slug: Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout page-type: guide --- @@ -44,4 +44,4 @@ In the example below, we have used a `min-height` query to check the height befo ## Next steps -In the final guide in this series, we will see [how multicol works with the Fragmentation spec](/en-US/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol) to give us control over how content breaks between columns. +In the final guide in this series, we will see [how multicol works with the Fragmentation spec](/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol) to give us control over how content breaks between columns. diff --git a/files/en-us/web/css/css_columns/index.md b/files/en-us/web/css/css_multicol_layout/index.md similarity index 59% rename from files/en-us/web/css/css_columns/index.md rename to files/en-us/web/css/css_multicol_layout/index.md index f4fe70e4fc8ca33..60390dd4479cf8d 100644 --- a/files/en-us/web/css/css_columns/index.md +++ b/files/en-us/web/css/css_multicol_layout/index.md @@ -1,13 +1,13 @@ --- -title: CSS Multi-column Layout -slug: Web/CSS/CSS_Columns +title: CSS multi-column layout +slug: Web/CSS/CSS_multicol_layout page-type: css-module spec-urls: https://drafts.csswg.org/css-multicol/ --- {{CSSRef("CSS3 Multicol")}} -**CSS Multi-column Layout** is a module of CSS that adds support for multi-column layouts. Support is included for establishing the number of columns in a layout, as well as how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance. +The **CSS multi-column layout** module provides support for multi-column layouts, including support for establishing the number of columns in a layout, how content should flow from column to column, gap sizes between columns, and column dividing lines (known as column rules) along with their appearance. ## Basic example @@ -17,7 +17,7 @@ In the following example, the {{cssxref("column-count")}} property has been appl ## Relationship to fragmentation -Multiple-column layout is closely related to [Paged Media](/en-US/docs/Web/CSS/CSS_Pages), in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore, the properties now defined in the [CSS Fragmentation](/en-US/docs/Web/CSS/CSS_Fragmentation) specification are required to control how content breaks between columns. +Multi-column layout is closely related to [paged media](/en-US/docs/Web/CSS/CSS_paged_media), in that each column box becomes a fragment, much like a printed page becomes a fragment of an overall document. Therefore, the properties now defined in the [CSS fragmentation](/en-US/docs/Web/CSS/CSS_fragmentation) specification are required to control how content breaks between columns. ## Reference @@ -44,15 +44,15 @@ Multiple-column layout is closely related to [Paged Media](/en-US/docs/Web/CSS/C ## Guides -- [Basic concepts of multi-column layout](/en-US/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol) +- [Basic concepts of multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_Concepts_of_Multicol) - : An overview of the Multiple-column Layout specification -- [Styling columns](/en-US/docs/Web/CSS/CSS_Columns/Styling_Columns) +- [Styling columns](/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns) - : How to use column rules and manage the spacing between columns. -- [Spanning and balancing](/en-US/docs/Web/CSS/CSS_Columns/Spanning_Columns) +- [Spanning and balancing](/en-US/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns) - : How to make elements span across all columns and controlling the way columns are filled. -- [Handling overflow in multi-column layout](/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol) +- [Handling overflow in multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout) - : What happens when an item overflows the column it is in and what happens when there is too much columned content to fit a container. -- [Handling content breaks in multi-column layout](/en-US/docs/Web/CSS/CSS_Columns/Handling_content_breaks_in_multicol) +- [Handling content breaks in multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout) - : Introduction to the Fragmentation specification and how to control where column content breaks. ## Specifications @@ -63,5 +63,5 @@ Multiple-column layout is closely related to [Paged Media](/en-US/docs/Web/CSS/C Other CSS layout technologies include: -- [CSS Flexible Box Layout](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout) (CSS flexbox) -- [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout) +- [CSS flexible box layout](/en-US/docs/Web/CSS/CSS_flexible_box_layout) (CSS flexbox) +- [CSS grid layout](/en-US/docs/Web/CSS/CSS_grid_layout) diff --git a/files/en-us/web/css/css_columns/spanning_columns/index.md b/files/en-us/web/css/css_multicol_layout/spanning_balancing_columns/index.md similarity index 90% rename from files/en-us/web/css/css_columns/spanning_columns/index.md rename to files/en-us/web/css/css_multicol_layout/spanning_balancing_columns/index.md index a1e1b335b4aa278..55500d3d96d3526 100644 --- a/files/en-us/web/css/css_columns/spanning_columns/index.md +++ b/files/en-us/web/css/css_multicol_layout/spanning_balancing_columns/index.md @@ -1,6 +1,6 @@ --- title: Spanning and balancing columns -slug: Web/CSS/CSS_Columns/Spanning_Columns +slug: Web/CSS/CSS_multicol_layout/Spanning_balancing_columns page-type: guide --- @@ -42,7 +42,7 @@ Additionally, if a spanning element appears later in the content it can cause un A balanced set of columns is where all columns have approximately the same amount of content. Filling and balancing comes into play when the amount of content does not match the amount of space provided, such as when a height is declared on the container. -The initial value of multicol for {{cssxref("column-fill")}} is `balance`. The value of balance means all columns are as balanced as is possible. In fragmented contexts such as [Paged Media](/en-US/docs/Web/CSS/CSS_Pages), only the last fragment is balanced. This means that on the last page the final set of column boxes will be balanced. +The initial value of multicol for {{cssxref("column-fill")}} is `balance`. The value of balance means all columns are as balanced as is possible. In fragmented contexts, such as [paged media](/en-US/docs/Web/CSS/CSS_paged_media), only the last fragment is balanced. This means that on the last page the final set of column boxes will be balanced. There is a second value for balancing, `balance-all`, which attempts to balance all columns in fragmented contexts and not just the columns on the final fragment. @@ -58,4 +58,4 @@ Note that column balancing is not supported by all browsers. Check that you are ## Next steps -In the next guide, you will learn [how multicol handles overflow](/en-US/docs/Web/CSS/CSS_Columns/Handling_Overflow_in_Multicol), both within columns and where there are more columns than will fit the container. +In the next guide, you will learn [how multicol handles overflow](/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_overflow_in_multicol_layout), both within columns and where there are more columns than will fit the container. diff --git a/files/en-us/web/css/css_columns/styling_columns/index.md b/files/en-us/web/css/css_multicol_layout/styling_columns/index.md similarity index 92% rename from files/en-us/web/css/css_columns/styling_columns/index.md rename to files/en-us/web/css/css_multicol_layout/styling_columns/index.md index 930a805a13bdd34..897f33c1f915358 100644 --- a/files/en-us/web/css/css_columns/styling_columns/index.md +++ b/files/en-us/web/css/css_multicol_layout/styling_columns/index.md @@ -1,6 +1,6 @@ --- title: Styling columns -slug: Web/CSS/CSS_Columns/Styling_Columns +slug: Web/CSS/CSS_multicol_layout/Styling_columns page-type: guide --- @@ -14,7 +14,7 @@ Sadly, column boxes cannot be styled at present. The anonymous boxes that make u ## Column gaps -The gap between columns is controlled using the `column-gap` property. This property was originally defined in the Multi-column Layout specification. However, it is now defined in [Box Alignment](/en-US/docs/Web/CSS/CSS_Box_Alignment) in order to unify gaps between boxes in other specifications such as [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout). +The gap between columns is controlled using the `column-gap` property. This property was originally defined in the Multi-column Layout specification. However, it is now defined in [Box Alignment](/en-US/docs/Web/CSS/CSS_box_alignment) in order to unify gaps between boxes in other specifications such as [CSS Grid Layout](/en-US/docs/Web/CSS/CSS_grid_layout/Box_alignment_in_grid_layout). The initial value of `column-gap` in multicol is `1em`. This means your columns will not run into each other. In other layout methods, the initial value for `column-gap` is 0. If you use the keyword value "normal", the gap will be set to 1em. @@ -42,4 +42,4 @@ The example below uses a very wide rule of 40px and a 10px gap. The rule display ## Next steps -This article details all the current ways in which column boxes can be styled. In the next guide, we will take a look at making elements inside a container [span across all columns](/en-US/docs/Web/CSS/CSS_Columns/Spanning_Columns). +This article details all the current ways in which column boxes can be styled. In the next guide, we will take a look at making elements inside a container [span across all columns](/en-US/docs/Web/CSS/CSS_multicol_layout/Spanning_balancing_columns). diff --git a/files/en-us/web/css/css_columns/using_multi-column_layouts/index.md b/files/en-us/web/css/css_multicol_layout/using_multicol_layouts/index.md similarity index 99% rename from files/en-us/web/css/css_columns/using_multi-column_layouts/index.md rename to files/en-us/web/css/css_multicol_layout/using_multicol_layouts/index.md index 6ecc0d434bc11f1..d40c0477c6a692b 100644 --- a/files/en-us/web/css/css_columns/using_multi-column_layouts/index.md +++ b/files/en-us/web/css/css_multicol_layout/using_multicol_layouts/index.md @@ -1,6 +1,6 @@ --- title: Using multi-column layouts -slug: Web/CSS/CSS_Columns/Using_multi-column_layouts +slug: Web/CSS/CSS_multicol_layout/Using_multicol_layouts page-type: guide --- diff --git a/files/en-us/web/css/css_writing_modes/index.md b/files/en-us/web/css/css_writing_modes/index.md index b0b26abbc45f179..19f3dbd3db8b95e 100644 --- a/files/en-us/web/css/css_writing_modes/index.md +++ b/files/en-us/web/css/css_writing_modes/index.md @@ -1,13 +1,13 @@ --- -title: CSS Writing Modes -slug: Web/CSS/CSS_Writing_Modes +title: CSS writing modes +slug: Web/CSS/CSS_writing_modes page-type: css-module spec-urls: https://drafts.csswg.org/css-writing-modes/ --- {{CSSRef}} -**CSS Writing Modes** is a CSS module that defines various international writing modes, such as left-to-right (e.g. used by Latin and Indic scripts), right-to-left (e.g. used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some Asian scripts). +The **CSS writing modes** module defines various international writing modes, such as left-to-right (e.g., used by Latin and Indic scripts), right-to-left (e.g., used by Hebrew or Arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts), and vertical (e.g., used by some Asian scripts). ## Reference diff --git a/files/en-us/web/css/cssom_view/coordinate_systems/index.md b/files/en-us/web/css/cssom_view/coordinate_systems/index.md index acaaaea1d405e48..2471ad1b2d96777 100644 --- a/files/en-us/web/css/cssom_view/coordinate_systems/index.md +++ b/files/en-us/web/css/cssom_view/coordinate_systems/index.md @@ -1,6 +1,6 @@ --- title: Coordinate systems -slug: Web/CSS/CSSOM_View/Coordinate_systems +slug: Web/CSS/CSSOM_view/Coordinate_systems page-type: guide --- @@ -168,7 +168,7 @@ Here you can see the results in action. As you mouse in and around the blue box, ## See also -- [Using CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms): how to alter a coordinate system +- [Using CSS transforms](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms): how to alter a coordinate system - Coordinates of a mouse event: - {{domxref("MouseEvent.offsetX")}} and {{domxref("MouseEvent.offsetY")}} diff --git a/files/en-us/web/css/cssom_view/index.md b/files/en-us/web/css/cssom_view/index.md index d1e6046dede344c..f36704ed36db61d 100644 --- a/files/en-us/web/css/cssom_view/index.md +++ b/files/en-us/web/css/cssom_view/index.md @@ -1,13 +1,13 @@ --- -title: CSSOM View -slug: Web/CSS/CSSOM_View +title: CSSOM view +slug: Web/CSS/CSSOM_view page-type: css-module browser-compat: css.properties.scroll-behavior --- {{CSSRef}} -**CSSOM View** is a module of CSS that lets you manipulate the visual view of a document, in particular its scrolling behavior. +The **CSSOM view** module lets you manipulate the visual view of a document, in particular its scrolling behavior. ## Reference @@ -20,6 +20,10 @@ browser-compat: css.properties.scroll-behavior - [Coordinate systems](/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems) - : A guide to the coordinate systems used to specify the position of a location in a display context, whether that context is a window on a monitor, a viewport on a mobile device, or a position on a sheet of paper when printing. +## Related concepts + +- {{glossary("cssom")}} glossary term + ## Specifications {{Specifications}} From d3c83cf32beefadedd6517bd9a2b6ff4b3d54071 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya <dipika@foss-community.org> Date: Thu, 25 May 2023 18:36:45 -0400 Subject: [PATCH 4/7] letter p module landing page --- files/en-us/_redirects.txt | 114 +++-- files/en-us/_wikihistory.json | 418 +++++++++--------- .../index.md | 8 +- .../understanding_z-index}/index.md | 16 +- .../stacking_context}/index.md | 20 +- .../understanding_zindex_04.png | Bin .../stacking_context_example_1/index.md | 14 +- .../understanding_zindex_05a.png | Bin .../understanding_zindex_05b.png | Bin .../understanding_zindex_05c.png | Bin .../stacking_context_example_2/index.md | 16 +- .../stacking_context_example_3/index.md | 16 +- .../stacking_floating_elements}/index.md | 18 +- .../stacking_without_z-index/index.md | 14 +- .../using_z-index}/index.md | 18 +- 15 files changed, 346 insertions(+), 326 deletions(-) rename files/en-us/web/css/{css_positioning => css_positioned_layout}/index.md (74%) rename files/en-us/web/css/{css_positioning/understanding_z_index => css_positioned_layout/understanding_z-index}/index.md (61%) rename files/en-us/web/css/{css_positioning/understanding_z_index/the_stacking_context => css_positioned_layout/understanding_z-index/stacking_context}/index.md (83%) rename files/en-us/web/css/{css_positioning/understanding_z_index/the_stacking_context => css_positioned_layout/understanding_z-index/stacking_context}/understanding_zindex_04.png (100%) rename files/en-us/web/css/{css_positioning/understanding_z_index => css_positioned_layout/understanding_z-index}/stacking_context_example_1/index.md (75%) rename files/en-us/web/css/{css_positioning/understanding_z_index => css_positioned_layout/understanding_z-index}/stacking_context_example_1/understanding_zindex_05a.png (100%) rename files/en-us/web/css/{css_positioning/understanding_z_index => css_positioned_layout/understanding_z-index}/stacking_context_example_1/understanding_zindex_05b.png (100%) rename files/en-us/web/css/{css_positioning/understanding_z_index => css_positioned_layout/understanding_z-index}/stacking_context_example_1/understanding_zindex_05c.png (100%) rename files/en-us/web/css/{css_positioning/understanding_z_index => css_positioned_layout/understanding_z-index}/stacking_context_example_2/index.md (65%) rename files/en-us/web/css/{css_positioning/understanding_z_index => css_positioned_layout/understanding_z-index}/stacking_context_example_3/index.md (79%) rename files/en-us/web/css/{css_positioning/understanding_z_index/stacking_and_float => css_positioned_layout/understanding_z-index/stacking_floating_elements}/index.md (71%) rename files/en-us/web/css/{css_positioning/understanding_z_index => css_positioned_layout/understanding_z-index}/stacking_without_z-index/index.md (67%) rename files/en-us/web/css/{css_positioning/understanding_z_index/adding_z-index => css_positioned_layout/understanding_z-index/using_z-index}/index.md (67%) diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 5f94c5e7b10e08a..f73fe57b654672e 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -549,22 +549,22 @@ /en-US/docs/CSS/Tutorials/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms /en-US/docs/CSS/Tutorials/Using_CSS_transitions /en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions /en-US/docs/CSS/Type_selectors /en-US/docs/Web/CSS/Type_selectors -/en-US/docs/CSS/Understanding_CSS_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index -/en-US/docs/CSS/Understanding_CSS_z-index/Adding_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index -/en-US/docs/CSS/Understanding_CSS_z-index/Stacking_and_float /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float -/en-US/docs/CSS/Understanding_CSS_z-index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 -/en-US/docs/CSS/Understanding_CSS_z-index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 -/en-US/docs/CSS/Understanding_CSS_z-index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 -/en-US/docs/CSS/Understanding_CSS_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -/en-US/docs/CSS/Understanding_CSS_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -/en-US/docs/CSS/Understanding_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index -/en-US/docs/CSS/Understanding_z-index/Adding_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index -/en-US/docs/CSS/Understanding_z-index/Stacking_and_float /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float -/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 -/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 -/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 -/en-US/docs/CSS/Understanding_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -/en-US/docs/CSS/Understanding_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +/en-US/docs/CSS/Understanding_CSS_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index +/en-US/docs/CSS/Understanding_CSS_z-index/Adding_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index +/en-US/docs/CSS/Understanding_CSS_z-index/Stacking_and_float /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements +/en-US/docs/CSS/Understanding_CSS_z-index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 +/en-US/docs/CSS/Understanding_CSS_z-index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2 +/en-US/docs/CSS/Understanding_CSS_z-index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3 +/en-US/docs/CSS/Understanding_CSS_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index +/en-US/docs/CSS/Understanding_CSS_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context +/en-US/docs/CSS/Understanding_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index +/en-US/docs/CSS/Understanding_z-index/Adding_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index +/en-US/docs/CSS/Understanding_z-index/Stacking_and_float /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements +/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 +/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2 +/en-US/docs/CSS/Understanding_z-index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3 +/en-US/docs/CSS/Understanding_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index +/en-US/docs/CSS/Understanding_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context /en-US/docs/CSS/Universal_selectors /en-US/docs/Web/CSS/Universal_selectors /en-US/docs/CSS/Using_CSS_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/CSS/Using_CSS_animations /en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations @@ -7295,21 +7295,21 @@ /en-US/docs/URLUtilsReadOnly.origin /en-US/docs/Web/API/WorkerLocation/origin /en-US/docs/USA /en-US/docs/Web/Progressive_web_apps /en-US/docs/USA-redirect-1 /en-US/docs/Web/Progressive_web_apps -/en-US/docs/Understanding_CSS_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index -/en-US/docs/Understanding_CSS_z-index/Adding_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index -/en-US/docs/Understanding_CSS_z-index/Stacking_and_float /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float -/en-US/docs/Understanding_CSS_z-index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 -/en-US/docs/Understanding_CSS_z-index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 -/en-US/docs/Understanding_CSS_z-index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 -/en-US/docs/Understanding_CSS_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -/en-US/docs/Understanding_CSS_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context -/en-US/docs/Understanding_CSS_z-index:Adding_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index -/en-US/docs/Understanding_CSS_z-index:Stacking_and_float /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float -/en-US/docs/Understanding_CSS_z-index:Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 -/en-US/docs/Understanding_CSS_z-index:Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 -/en-US/docs/Understanding_CSS_z-index:Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 -/en-US/docs/Understanding_CSS_z-index:Stacking_without_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -/en-US/docs/Understanding_CSS_z-index:The_stacking_context /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +/en-US/docs/Understanding_CSS_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index +/en-US/docs/Understanding_CSS_z-index/Adding_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index +/en-US/docs/Understanding_CSS_z-index/Stacking_and_float /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements +/en-US/docs/Understanding_CSS_z-index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 +/en-US/docs/Understanding_CSS_z-index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2 +/en-US/docs/Understanding_CSS_z-index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3 +/en-US/docs/Understanding_CSS_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index +/en-US/docs/Understanding_CSS_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context +/en-US/docs/Understanding_CSS_z-index:Adding_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index +/en-US/docs/Understanding_CSS_z-index:Stacking_and_float /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements +/en-US/docs/Understanding_CSS_z-index:Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 +/en-US/docs/Understanding_CSS_z-index:Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2 +/en-US/docs/Understanding_CSS_z-index:Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3 +/en-US/docs/Understanding_CSS_z-index:Stacking_without_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index +/en-US/docs/Understanding_CSS_z-index:The_stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context /en-US/docs/Understanding_URLS /en-US/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL /en-US/docs/Understanding_Underlines /en-US/docs/Learn/CSS/Styling_text/Fundamentals#Font_style_font_weight_text_transform_and_text_decoration /en-US/docs/Updating_Extensions_for_Firefox_4 /en-US/docs/Mozilla/Firefox/Releases/4/Updating_extensions_for_Firefox_4 @@ -11344,6 +11344,26 @@ /en-US/docs/Web/CSS/CSS_Logical_Properties/Logical_properties_for_floating_and_positioning /en-US/docs/Web/CSS/CSS_Logical_Properties/Floating_and_positioning /en-US/docs/Web/CSS/CSS_Logical_Properties/Logical_properties_for_margins,_borders_and_paddin /en-US/docs/Web/CSS/CSS_Logical_Properties/Margins_borders_padding /en-US/docs/Web/CSS/CSS_Masks /en-US/docs/Web/CSS/CSS_Masking +/en-US/docs/Web/CSS/CSS_Positioning /en-US/docs/Web/CSS/CSS_positioned_layout +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z-index/Stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z-index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z-index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2 +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z-index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3 +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z-index/Stacking_floating_elements /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z-index/Using_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2 +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3 +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_floating_elements /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context +/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Using_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index /en-US/docs/Web/CSS/CSS_Properties_Reference /en-US/docs/Web/CSS/Reference#index /en-US/docs/Web/CSS/CSS_Reference /en-US/docs/Web/CSS/Reference /en-US/docs/Web/CSS/CSS_Reference/Mozilla_Extensions /en-US/docs/Web/CSS/Mozilla_Extensions @@ -11400,14 +11420,14 @@ /en-US/docs/Web/CSS/Tools/Border-radius_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator /en-US/docs/Web/CSS/Tools/Box-shadow_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator /en-US/docs/Web/CSS/Tools/ColorPicker_Tool /en-US/docs/Web/CSS/CSS_colors/Color_picker_tool -/en-US/docs/Web/CSS/Understanding_CSS_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index -/en-US/docs/Web/CSS/Understanding_CSS_z-index/Adding_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index -/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_and_float /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float -/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 -/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 -/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 -/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -/en-US/docs/Web/CSS/Understanding_CSS_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +/en-US/docs/Web/CSS/Understanding_CSS_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index +/en-US/docs/Web/CSS/Understanding_CSS_z-index/Adding_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index +/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_and_float /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements +/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 +/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2 +/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3 +/en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index +/en-US/docs/Web/CSS/Understanding_CSS_z-index/The_stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context /en-US/docs/Web/CSS/Using_CSS_Columns /en-US/docs/Web/CSS/CSS_multicol_layout/Using_multicol_layouts /en-US/docs/Web/CSS/Using_CSS_media_queries /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries /en-US/docs/Web/CSS/Using_CSS_variables /en-US/docs/Web/CSS/Using_CSS_custom_properties @@ -11914,14 +11934,14 @@ /en-US/docs/Web/Guide/CSS/Media_queries /en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries /en-US/docs/Web/Guide/CSS/Scaling_background_images /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images /en-US/docs/Web/Guide/CSS/Testing_media_queries /en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries -/en-US/docs/Web/Guide/CSS/Understanding_z_index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index -/en-US/docs/Web/Guide/CSS/Understanding_z_index/Adding_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index -/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_and_float /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float -/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 -/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 -/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 -/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index -/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context /en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +/en-US/docs/Web/Guide/CSS/Understanding_z_index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index +/en-US/docs/Web/Guide/CSS/Understanding_z_index/Adding_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index +/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_and_float /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements +/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_1 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 +/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_2 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2 +/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_context_example_3 /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3 +/en-US/docs/Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index +/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context /en-US/docs/Web/Guide/CSS/Using_CSS_animations /en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations /en-US/docs/Web/Guide/CSS/Using_CSS_gradients /en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients /en-US/docs/Web/Guide/CSS/Using_CSS_transforms /en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index f4a4e16c1b7bf1f..661272f39bd0e24 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -77710,215 +77710,6 @@ "modified": "2020-07-07T12:24:16.035Z", "contributors": ["wbamberg", "fscholz", "mfluehr", "teoli", "cvrebert"] }, - "Web/CSS/CSS_Positioning": { - "modified": "2020-07-07T12:24:21.908Z", - "contributors": [ - "wbamberg", - "fscholz", - "mfluehr", - "davidhbrown", - "cvrebert", - "teoli" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index": { - "modified": "2020-08-24T12:47:16.738Z", - "contributors": [ - "mfuji09", - "mfluehr", - "teoli", - "Jeremie", - "kscarfone", - "Sheppy", - "tregagnon", - "Jürgen Jeka", - "Fredchat", - "Dria", - "Nickolay", - "bradipao", - "Rod Whiteley", - "Wladimir_Palant" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index": { - "modified": "2020-08-24T11:23:24.372Z", - "contributors": [ - "mfuji09", - "mfluehr", - "teoli", - "breeze1990", - "xfq", - "Jeremie", - "Sheppy", - "tregagnon", - "yogi", - "Jürgen Jeka", - "Mozcerize", - "Waltonad0283", - "Pnomolos", - "Mgjbot", - "Nickolay", - "Rod Whiteley", - "bradipao" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float": { - "modified": "2020-09-10T08:45:49.713Z", - "contributors": [ - "hata6502", - "mfuji09", - "chrisdavidmills", - "wbamberg", - "mfluehr", - "edspeedy", - "teoli", - "breeze1990", - "xfq", - "Jeremie", - "Sheppy", - "tregagnon", - "Mgjbot", - "Nickolay", - "Rod Whiteley", - "bradipao" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1": { - "modified": "2020-08-24T12:16:56.733Z", - "contributors": [ - "mfuji09", - "wbamberg", - "duncanmcdonald", - "teoli", - "dima716", - "Jeremie", - "ethertank", - "Sheppy", - "tregagnon", - "Mgjbot", - "Nickolay", - "Rod Whiteley", - "bradipao" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2": { - "modified": "2020-08-24T12:22:25.104Z", - "contributors": [ - "mfuji09", - "wbamberg", - "chrisdavidmills", - "karimcossutti", - "teoli", - "breeze1990", - "Jeremie", - "ethertank", - "Sheppy", - "tregagnon", - "Mgjbot", - "Nickolay", - "Rod Whiteley", - "bradipao" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3": { - "modified": "2020-08-24T12:36:52.767Z", - "contributors": [ - "mfuji09", - "wbamberg", - "chrisdavidmills", - "justtesting111", - "Alien426", - "padulam", - "teoli", - "breeze1990", - "rexona", - "Jeremie", - "ethertank", - "Sheppy", - "tregagnon", - "Mgjbot", - "Nickolay", - "Rod Whiteley", - "bradipao" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index": { - "modified": "2020-08-24T11:01:07.302Z", - "contributors": [ - "mfuji09", - "wbamberg", - "nicokoenig", - "jonjohnjohnson", - "mfluehr", - "SphinxKnight", - "ViktorPalansky", - "javichito", - "duncanmcdonald", - "teoli", - "xfq", - "Jeremie", - "Sheppy", - "tregagnon", - "azatazz", - "deepakjoy", - "Mgjbot", - "Fredchat", - "Nickolay", - "Rod Whiteley", - "bradipao" - ] - }, - "Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context": { - "modified": "2020-08-24T11:51:33.626Z", - "contributors": [ - "mfuji09", - "j9t", - "NickyMeuleman", - "Konrud", - "estelle", - "msobanjo", - "xiaohanyu", - "alattalatta", - "frivoal", - "mfluehr", - "Dolphin_Wood", - "jonjohnjohnson", - "Ende93", - "duncanmcdonald", - "paceaux", - "siirila", - "JDrone_", - "Crispen_Smith", - "teoli", - "yisibl", - "amitabha197", - "eirikurn", - "jsx", - "aav", - "rosca", - "KrijnHoetmer", - "leapoahead", - "skeller88", - "altano", - "Jeremie", - "kscarfone", - "Sheppy", - "ethertank", - "dbruant", - "hurrymaplelad", - "tregagnon", - "julienw", - "Jürgen Jeka", - "Mozcerize", - "Sandwich", - "Mgjbot", - "Patrick Garies", - "Maian", - "Nickolay", - "Rod Whiteley", - "bradipao" - ] - }, "Web/CSS/CSS_Ruby": { "modified": "2020-07-07T12:25:44.800Z", "contributors": [ @@ -78799,6 +78590,215 @@ "Roc" ] }, + "Web/CSS/CSS_positioned_layout": { + "modified": "2020-07-07T12:24:21.908Z", + "contributors": [ + "wbamberg", + "fscholz", + "mfluehr", + "davidhbrown", + "cvrebert", + "teoli" + ] + }, + "Web/CSS/CSS_positioned_layout/Understanding_z-index": { + "modified": "2020-08-24T12:47:16.738Z", + "contributors": [ + "mfuji09", + "mfluehr", + "teoli", + "Jeremie", + "kscarfone", + "Sheppy", + "tregagnon", + "Jürgen Jeka", + "Fredchat", + "Dria", + "Nickolay", + "bradipao", + "Rod Whiteley", + "Wladimir_Palant" + ] + }, + "Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context": { + "modified": "2020-08-24T11:51:33.626Z", + "contributors": [ + "mfuji09", + "j9t", + "NickyMeuleman", + "Konrud", + "estelle", + "msobanjo", + "xiaohanyu", + "alattalatta", + "frivoal", + "mfluehr", + "Dolphin_Wood", + "jonjohnjohnson", + "Ende93", + "duncanmcdonald", + "paceaux", + "siirila", + "JDrone_", + "Crispen_Smith", + "teoli", + "yisibl", + "amitabha197", + "eirikurn", + "jsx", + "aav", + "rosca", + "KrijnHoetmer", + "leapoahead", + "skeller88", + "altano", + "Jeremie", + "kscarfone", + "Sheppy", + "ethertank", + "dbruant", + "hurrymaplelad", + "tregagnon", + "julienw", + "Jürgen Jeka", + "Mozcerize", + "Sandwich", + "Mgjbot", + "Patrick Garies", + "Maian", + "Nickolay", + "Rod Whiteley", + "bradipao" + ] + }, + "Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1": { + "modified": "2020-08-24T12:16:56.733Z", + "contributors": [ + "mfuji09", + "wbamberg", + "duncanmcdonald", + "teoli", + "dima716", + "Jeremie", + "ethertank", + "Sheppy", + "tregagnon", + "Mgjbot", + "Nickolay", + "Rod Whiteley", + "bradipao" + ] + }, + "Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2": { + "modified": "2020-08-24T12:22:25.104Z", + "contributors": [ + "mfuji09", + "wbamberg", + "chrisdavidmills", + "karimcossutti", + "teoli", + "breeze1990", + "Jeremie", + "ethertank", + "Sheppy", + "tregagnon", + "Mgjbot", + "Nickolay", + "Rod Whiteley", + "bradipao" + ] + }, + "Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3": { + "modified": "2020-08-24T12:36:52.767Z", + "contributors": [ + "mfuji09", + "wbamberg", + "chrisdavidmills", + "justtesting111", + "Alien426", + "padulam", + "teoli", + "breeze1990", + "rexona", + "Jeremie", + "ethertank", + "Sheppy", + "tregagnon", + "Mgjbot", + "Nickolay", + "Rod Whiteley", + "bradipao" + ] + }, + "Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements": { + "modified": "2020-09-10T08:45:49.713Z", + "contributors": [ + "hata6502", + "mfuji09", + "chrisdavidmills", + "wbamberg", + "mfluehr", + "edspeedy", + "teoli", + "breeze1990", + "xfq", + "Jeremie", + "Sheppy", + "tregagnon", + "Mgjbot", + "Nickolay", + "Rod Whiteley", + "bradipao" + ] + }, + "Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index": { + "modified": "2020-08-24T11:01:07.302Z", + "contributors": [ + "mfuji09", + "wbamberg", + "nicokoenig", + "jonjohnjohnson", + "mfluehr", + "SphinxKnight", + "ViktorPalansky", + "javichito", + "duncanmcdonald", + "teoli", + "xfq", + "Jeremie", + "Sheppy", + "tregagnon", + "azatazz", + "deepakjoy", + "Mgjbot", + "Fredchat", + "Nickolay", + "Rod Whiteley", + "bradipao" + ] + }, + "Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index": { + "modified": "2020-08-24T11:23:24.372Z", + "contributors": [ + "mfuji09", + "mfluehr", + "teoli", + "breeze1990", + "xfq", + "Jeremie", + "Sheppy", + "tregagnon", + "yogi", + "Jürgen Jeka", + "Mozcerize", + "Waltonad0283", + "Pnomolos", + "Mgjbot", + "Nickolay", + "Rod Whiteley", + "bradipao" + ] + }, "Web/CSS/CSS_shapes": { "modified": "2020-07-07T12:26:26.279Z", "contributors": [ diff --git a/files/en-us/web/css/css_positioning/index.md b/files/en-us/web/css/css_positioned_layout/index.md similarity index 74% rename from files/en-us/web/css/css_positioning/index.md rename to files/en-us/web/css/css_positioned_layout/index.md index f1650bc7efcf149..c19651a4c5d09f1 100644 --- a/files/en-us/web/css/css_positioning/index.md +++ b/files/en-us/web/css/css_positioned_layout/index.md @@ -1,13 +1,13 @@ --- -title: CSS Positioned Layout -slug: Web/CSS/CSS_Positioning +title: CSS positioned layout +slug: Web/CSS/CSS_positioned_layout page-type: css-module spec-urls: https://drafts.csswg.org/css-position/ --- {{CSSRef}} -**CSS Positioned Layout** is a module of CSS that defines how to position elements on the page. +The **CSS positioned layout** module defines how to position elements on a web page. ## Reference @@ -32,7 +32,7 @@ spec-urls: https://drafts.csswg.org/css-position/ ## Guides -- [Understanding CSS z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index) +- [Understanding z-index](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index) - : Presents the notion of stacking context and explains how z-ordering works, with several examples. ## Specifications diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md similarity index 61% rename from files/en-us/web/css/css_positioning/understanding_z_index/index.md rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md index 3df5fa1811481f9..984085c1f15252b 100644 --- a/files/en-us/web/css/css_positioning/understanding_z_index/index.md +++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md @@ -1,6 +1,6 @@ --- title: Understanding CSS z-index -slug: Web/CSS/CSS_Positioning/Understanding_z_index +slug: Web/CSS/CSS_positioned_layout/Understanding_z-index page-type: guide --- @@ -20,13 +20,13 @@ This guide will try to explain those rules, with some simplification and several ## Articles -1. [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. -2. [Stacking with floated blocks](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float): How floating elements are handled with stacking. -3. [Using z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index): How to use `z-index` to change default stacking. -4. [The stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context): Notes on the stacking context. +1. [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. +2. [Stacking floating elements](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements): How floating elements are handled with stacking. +3. [Using z-index](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index): How to use `z-index` to change default stacking. +4. [Stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context): Notes on the stacking context. ## Examples -1. [Stacking context example 1](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level -2. [Stacking context example 2](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels -3. [Stacking context example 3](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level +1. [Stacking context example 1](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level +2. [Stacking context example 2](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels +3. [Stacking context example 3](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md similarity index 83% rename from files/en-us/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md index f761a1bd84ad05d..fbf0bf6d1621c8a 100644 --- a/files/en-us/web/css/css_positioning/understanding_z_index/the_stacking_context/index.md +++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md @@ -1,16 +1,16 @@ --- -title: The stacking context -slug: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context +title: Stacking context +slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context page-type: guide --- {{CSSRef}} -The **stacking context** is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes. +**Stacking context** is a three-dimensional conceptualization of HTML elements along an imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes. ## Description -In the previous article of this guide, [Using z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index), we showed that the rendering order of certain elements is influenced by their `z-index` value. This occurs because these elements have special properties which cause them to form a _stacking context_. +In the previous article of this guide, [Using z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z-index/Adding_z-index), we showed that the rendering order of certain elements is influenced by their `z-index` value. This occurs because these elements have special properties which cause them to form a _stacking context_. A stacking context is formed, anywhere in the document, by any element in the following scenarios: @@ -213,9 +213,9 @@ h1 { ## See also -- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. -- [Stacking with floated blocks](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float): How floating elements are handled with stacking. -- [Using z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index): How to use `z-index` to change default stacking. -- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level -- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels -- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level +- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. +- [Stacking floating elements](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements): How floating elements are handled with stacking. +- [Using z-index](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index): How to use `z-index` to change default stacking. +- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level +- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels +- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/the_stacking_context/understanding_zindex_04.png b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context/understanding_zindex_04.png similarity index 100% rename from files/en-us/web/css/css_positioning/understanding_z_index/the_stacking_context/understanding_zindex_04.png rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context/understanding_zindex_04.png diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md similarity index 75% rename from files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md index ae99f0e39b6fa40..abf75fa7dd2ab8e 100644 --- a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_1/index.md +++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md @@ -1,6 +1,6 @@ --- title: Stacking context example 1 -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1 +slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1 page-type: guide --- @@ -109,9 +109,9 @@ In terms of stacking contexts, DIV #1 and DIV #3 are assimilated into the root e ## See also -- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. -- [Stacking with floated blocks](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float): How floating elements are handled with stacking. -- [Using z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index): How to use `z-index` to change default stacking. -- [The stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context): Notes on the stacking context. -- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels -- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level +- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. +- [Stacking floating elements](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements): How floating elements are handled with stacking. +- [Using z-index](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index): How to use `z-index` to change default stacking. +- [Stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context): Notes on the stacking context. +- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels +- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_1/understanding_zindex_05a.png b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/understanding_zindex_05a.png similarity index 100% rename from files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_1/understanding_zindex_05a.png rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/understanding_zindex_05a.png diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_1/understanding_zindex_05b.png b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/understanding_zindex_05b.png similarity index 100% rename from files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_1/understanding_zindex_05b.png rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/understanding_zindex_05b.png diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_1/understanding_zindex_05c.png b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/understanding_zindex_05c.png similarity index 100% rename from files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_1/understanding_zindex_05c.png rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/understanding_zindex_05c.png diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md similarity index 65% rename from files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md index 4488256c70f0dbb..8b24960f172ce0e 100644 --- a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_2/index.md +++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md @@ -1,6 +1,6 @@ --- title: Stacking context example 2 -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2 +slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2 page-type: guide --- @@ -23,7 +23,7 @@ To better understand the situation, this is the stacking context hierarchy: - DIV #4 (`z-index`: 10) -> **Note:** It is worth remembering that in general the HTML hierarchy is different from the stacking context hierarchy. In the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent. +> **Note:** It is worth remembering that the HTML hierarchy is different from the stacking context hierarchy. In the stacking context hierarchy, elements that do not create a stacking context are collapsed on their parent. ## Example @@ -120,9 +120,9 @@ span.bold { ## See also -- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. -- [Stacking with floated blocks](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float): How floating elements are handled with stacking. -- [Using z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index): How to use `z-index` to change default stacking. -- [The stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context): Notes on the stacking context. -- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level -- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level +- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. +- [Stacking floating elements](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements): How floating elements are handled with stacking. +- [Using z-index](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index): How to use `z-index` to change default stacking. +- [Stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context): Notes on the stacking context. +- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level +- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3): 3-level HTML hierarchy, `z-index` on the second level diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md similarity index 79% rename from files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md index b4688504da33cb8..1e34d3968fea02e 100644 --- a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_context_example_3/index.md +++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md @@ -1,6 +1,6 @@ --- title: Stacking context example 3 -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3 +slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3 page-type: guide --- @@ -156,12 +156,12 @@ div.lev3 { ## See also -- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. -- [Stacking with floated blocks](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float): How floating elements are handled with stacking. -- [Using z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index): How to use `z-index` to change default stacking. -- [The stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context): Notes on the stacking context. -- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level -- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels +- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. +- [Stacking floating elements](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements): How floating elements are handled with stacking. +- [Using z-index](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index): How to use `z-index` to change default stacking. +- [Stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context): Notes on the stacking context. +- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1): 2-level HTML hierarchy, `z-index` on the last level +- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2): 2-level HTML hierarchy, `z-index` on all levels -> **Note:** the reason the sample image looks wrong - with the second level 2 overlapping the level 3 menus - is because level 2 has opacity, which creates a new stacking context. +> **Note:** The sample image looks wrong - with the second level 2 overlapping the level 3 menus - because level 2 has opacity, which creates a new stacking context. > Basically, this whole sample page is incorrect and misleading. diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md similarity index 71% rename from files/en-us/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md index 36adc9608568911..cc419db7bd2cf4c 100644 --- a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_and_float/index.md +++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md @@ -1,12 +1,12 @@ --- -title: Stacking with floated blocks -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float +title: Stacking floating elements +slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements page-type: guide --- {{CSSRef}} -For floated elements, the stacking order is a bit different. Floating elements are placed between non-positioned elements and positioned elements: +For floating elements, the stacking order is a bit different. Floating elements are placed between non-positioned elements and positioned elements: 1. The background and borders of the root element. 2. Descendant non-positioned elements, in order of appearance in the HTML. @@ -118,9 +118,9 @@ strong { ## See also -- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. -- [Using z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index): How to use `z-index` to change default stacking. -- [The stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context): Notes on the stacking context. -- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1): 2-level HTML hierarchy, z-index on the last level -- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2): 2-level HTML hierarchy, z-index on all levels -- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3): 3-level HTML hierarchy, z-index on the second level +- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. +- [Using z-index](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index): How to use `z-index` to change default stacking. +- [Stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context): Notes on the stacking context. +- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1): 2-level HTML hierarchy, z-index on the last level +- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2): 2-level HTML hierarchy, z-index on all levels +- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3): 3-level HTML hierarchy, z-index on the second level diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md similarity index 67% rename from files/en-us/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md index 5c3f80c457bddd4..e8f49a6e130e1a7 100644 --- a/files/en-us/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.md +++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md @@ -1,6 +1,6 @@ --- title: Stacking without the z-index property -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index +slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index page-type: guide --- @@ -110,9 +110,9 @@ div { ## See also -- [Stacking with floated blocks](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float): How floating elements are handled with stacking. -- [Using z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index): How to use `z-index` to change default stacking. -- [The stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context): Notes on the stacking context. -- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1): 2-level HTML hierarchy, z-index on the last level -- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2): 2-level HTML hierarchy, z-index on all levels -- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3): 3-level HTML hierarchy, z-index on the second level +- [Stacking floating elements](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements): How floating elements are handled with stacking. +- [Using z-index](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index): How to use `z-index` to change default stacking. +- [Stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context): Notes on the stacking context. +- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1): 2-level HTML hierarchy, z-index on the last level +- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2): 2-level HTML hierarchy, z-index on all levels +- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3): 3-level HTML hierarchy, z-index on the second level diff --git a/files/en-us/web/css/css_positioning/understanding_z_index/adding_z-index/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md similarity index 67% rename from files/en-us/web/css/css_positioning/understanding_z_index/adding_z-index/index.md rename to files/en-us/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md index 83b2760d93f7d55..cb7ba3e8cf60988 100644 --- a/files/en-us/web/css/css_positioning/understanding_z_index/adding_z-index/index.md +++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/using_z-index/index.md @@ -1,12 +1,12 @@ --- title: Using z-index -slug: Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index +slug: Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index page-type: guide --- {{CSSRef}} -The first article of this guide, [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index), explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a [positioned](/en-US/docs/Web/CSS/position#types_of_positioning) element. +The first article of this guide, [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index), explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a [positioned](/en-US/docs/Web/CSS/position#types_of_positioning) element. The `z-index` property can be specified with an integer value (positive, zero, or negative), which represents the position of the element along an imaginary z-axis. If you are not familiar with the term 'z-axis', imagine the page as a stack of layers, each one having a number. Layers are rendered in numerical order, with larger numbers above smaller numbers (_X_ represents an arbitrary positive integer): @@ -21,7 +21,7 @@ The `z-index` property can be specified with an integer value (positive, zero, o > **Note:** > > - When no `z-index` property is specified, elements are rendered on the default rendering layer (Layer 0). -> - If several elements share the same `z-index` value (i.e., they are placed on the same layer), stacking rules explained in the section [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index) apply. +> - If several elements share the same `z-index` value (i.e., they are placed on the same layer), stacking rules explained in the section [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index) apply. ## Example @@ -127,9 +127,9 @@ strong { ## See also -- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. -- [Stacking with floated blocks](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float): How floating elements are handled with stacking. -- [The stacking context](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context): Notes on the stacking context. -- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_1): 2-level HTML hierarchy, z-index on the last level -- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_2): 2-level HTML hierarchy, z-index on all levels -- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_context_example_3): 3-level HTML hierarchy, z-index on the second level +- [Stacking without the z-index property](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_without_z-index): The stacking rules that apply when `z-index` is not used. +- [Stacking floating elements](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_floating_elements): How floating elements are handled with stacking. +- [Stacking context](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context): Notes on the stacking context. +- [Stacking context example 1](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_1): 2-level HTML hierarchy, z-index on the last level +- [Stacking context example 2](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_2): 2-level HTML hierarchy, z-index on all levels +- [Stacking context example 3](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context_example_3): 3-level HTML hierarchy, z-index on the second level From 1c4ae982f92ca74d89cfa43a532de6e7f2809c5c Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya <dipika@foss-community.org> Date: Thu, 25 May 2023 18:52:59 -0400 Subject: [PATCH 5/7] misc updates --- files/en-us/web/css/css_cascading_variables/index.md | 4 ++-- .../css_multicol_layout/spanning_balancing_columns/index.md | 2 +- .../css/css_positioned_layout/understanding_z-index/index.md | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/files/en-us/web/css/css_cascading_variables/index.md b/files/en-us/web/css/css_cascading_variables/index.md index ebb8eb1b5937158..cfa1e148a091462 100644 --- a/files/en-us/web/css/css_cascading_variables/index.md +++ b/files/en-us/web/css/css_cascading_variables/index.md @@ -1,5 +1,5 @@ --- -title: CSS Custom Properties for Cascading Variables +title: CSS cascading variables slug: Web/CSS/CSS_cascading_variables page-type: css-module spec-urls: https://drafts.csswg.org/css-variables/ @@ -7,7 +7,7 @@ spec-urls: https://drafts.csswg.org/css-variables/ {{CSSRef}} -**CSS Custom Properties for Cascading Variables** is a [CSS](/en-US/docs/Web/CSS) module that allows for the creation of custom properties that can be used over and over. +The **CSS cascading variables** module adds support for cascading variables in all CSS properties and also lets you create custom properties to define these variables. ## Reference diff --git a/files/en-us/web/css/css_multicol_layout/spanning_balancing_columns/index.md b/files/en-us/web/css/css_multicol_layout/spanning_balancing_columns/index.md index 55500d3d96d3526..5daff4367d3d0a3 100644 --- a/files/en-us/web/css/css_multicol_layout/spanning_balancing_columns/index.md +++ b/files/en-us/web/css/css_multicol_layout/spanning_balancing_columns/index.md @@ -42,7 +42,7 @@ Additionally, if a spanning element appears later in the content it can cause un A balanced set of columns is where all columns have approximately the same amount of content. Filling and balancing comes into play when the amount of content does not match the amount of space provided, such as when a height is declared on the container. -The initial value of multicol for {{cssxref("column-fill")}} is `balance`. The value of balance means all columns are as balanced as is possible. In fragmented contexts, such as [paged media](/en-US/docs/Web/CSS/CSS_paged_media), only the last fragment is balanced. This means that on the last page the final set of column boxes will be balanced. +The initial value of multicol for {{cssxref("column-fill")}} is `balance`. The value of balance means all columns are as balanced as is possible. In fragmented contexts such as [paged media](/en-US/docs/Web/CSS/CSS_paged_media), only the last fragment is balanced. This means that on the last page the final set of column boxes will be balanced. There is a second value for balancing, `balance-all`, which attempts to balance all columns in fragmented contexts and not just the columns on the final fragment. diff --git a/files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md index 984085c1f15252b..4df9b4158c20b40 100644 --- a/files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md +++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/index.md @@ -1,5 +1,5 @@ --- -title: Understanding CSS z-index +title: Understanding z-index slug: Web/CSS/CSS_positioned_layout/Understanding_z-index page-type: guide --- From 8d3d9225e9a975f231a2d189a23e45a4d2319167 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya <dipika@foss-community.org> Date: Thu, 25 May 2023 19:07:43 -0400 Subject: [PATCH 6/7] fix broken links --- .../css_filter_effects/using_filter_effects/index.md | 2 +- files/en-us/web/css/css_media_queries/index.md | 10 +++++----- .../css/css_media_queries/using_media_queries/index.md | 2 +- .../handling_overflow_in_multicol_layout/index.md | 2 +- files/en-us/web/css/css_multicol_layout/index.md | 2 +- .../understanding_z-index/stacking_context/index.md | 6 +++--- .../web/css/css_shapes/overview_of_shapes/index.md | 6 +++--- files/en-us/web/css/css_transforms/index.md | 2 +- .../css/css_transforms/using_css_transforms/index.md | 2 +- .../css/css_transitions/using_css_transitions/index.md | 2 +- files/en-us/web/css/cssom_view/index.md | 2 +- 11 files changed, 19 insertions(+), 19 deletions(-) diff --git a/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md b/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md index ff0b110bae73a23..7113c89b3fffe1a 100644 --- a/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md +++ b/files/en-us/web/css/css_filter_effects/using_filter_effects/index.md @@ -312,6 +312,6 @@ The SVG `url()` filter value can be included as the value of the SVG [`<image>`] - {{cssxref("mask")}} - {{cssxref("background-blend-mode")}}, {{cssxref("mix-blend-mode")}} -- [CSS filter effects](/en-US/docs/Web/CSS/Filter_Effects) +- [CSS filter effects](/en-US/docs/Web/CSS/CSS_filter_effects) - SVG {{SVGElement("filter")}} element, SVG {{SVGAttr("filter")}} attribute in [SVG](/en-US/docs/Web/SVG) - [Applying SVG effects to HTML content](/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) diff --git a/files/en-us/web/css/css_media_queries/index.md b/files/en-us/web/css/css_media_queries/index.md index 55d186af4e2147e..3682911e48ddd3e 100644 --- a/files/en-us/web/css/css_media_queries/index.md +++ b/files/en-us/web/css/css_media_queries/index.md @@ -35,7 +35,7 @@ In [JavaScript](/en-US/docs/Web/JavaScript), you can use the {{domxref("Window.m You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of a query changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state. -You can learn more about programmatically using media queries in [Testing media queries](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries). +You can learn more about programmatically using media queries in [Testing media queries](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries). ## Reference @@ -46,11 +46,11 @@ You can learn more about programmatically using media queries in [Testing media ## Guides -- [Using media queries](/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) +- [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) - : Introduces media queries, their syntax, and the operators and media features which are used to construct media query expressions. -- [Testing media queries programmatically](/en-US/docs/Web/CSS/Media_Queries/Testing_media_queries) +- [Testing media queries programmatically](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries) - : Describes how to use media queries in your JavaScript code to determine the state of a device, and to set up listeners that notify your code when the results of media queries change (such as when the user rotates the screen or resizes the browser). -- [Using media queries for accessibility](/en-US/docs/Web/CSS/Media_Queries/Using_Media_Queries_for_Accessibility) +- [Using media queries for accessibility](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries_for_accessibility) - : Learn how Media Queries can help users understand your website better. ## Specifications @@ -59,5 +59,5 @@ You can learn more about programmatically using media queries in [Testing media ## See also -- [Container queries](/en-US/docs/Web/CSS/CSS_Container_Queries) +- [Container queries](/en-US/docs/Web/CSS/CSS_container_queries) - Use {{cssxref("@supports")}} to apply styles that depend on browser support for various CSS technologies. diff --git a/files/en-us/web/css/css_media_queries/using_media_queries/index.md b/files/en-us/web/css/css_media_queries/using_media_queries/index.md index 9f6984e4979b0ca..c502ec2f2d86744 100644 --- a/files/en-us/web/css/css_media_queries/using_media_queries/index.md +++ b/files/en-us/web/css/css_media_queries/using_media_queries/index.md @@ -294,7 +294,7 @@ For example, the following query tests for devices that have a monochrome displa ## See also - [@media](/en-US/docs/Web/CSS/@media) -- [Container queries](/en-US/docs/Web/CSS/CSS_Container_Queries) +- [Container queries](/en-US/docs/Web/CSS/CSS_container_queries) - [Testing media queries programmatically](/en-US/docs/Web/CSS/CSS_media_queries/Testing_media_queries) - [CSS Animations Between Media Queries](https://davidwalsh.name/animate-media-queries) - [Extended Mozilla media features](/en-US/docs/Web/CSS/Mozilla_Extensions#media_features) diff --git a/files/en-us/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md b/files/en-us/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md index d3230eca73fcd84..60554cbf5bcbfa1 100644 --- a/files/en-us/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md +++ b/files/en-us/web/css/css_multicol_layout/handling_overflow_in_multicol_layout/index.md @@ -44,4 +44,4 @@ In the example below, we have used a `min-height` query to check the height befo ## Next steps -In the final guide in this series, we will see [how multicol works with the Fragmentation spec](/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol) to give us control over how content breaks between columns. +In the final guide in this series, we will see [how multicol works with the Fragmentation spec](/en-US/docs/Web/CSS/CSS_multicol_layout/Handling_content_breaks_in_multicol_layout) to give us control over how content breaks between columns. diff --git a/files/en-us/web/css/css_multicol_layout/index.md b/files/en-us/web/css/css_multicol_layout/index.md index 60390dd4479cf8d..40f1ccdfe324284 100644 --- a/files/en-us/web/css/css_multicol_layout/index.md +++ b/files/en-us/web/css/css_multicol_layout/index.md @@ -44,7 +44,7 @@ Multi-column layout is closely related to [paged media](/en-US/docs/Web/CSS/CSS_ ## Guides -- [Basic concepts of multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_Concepts_of_Multicol) +- [Basic concepts of multi-column layout](/en-US/docs/Web/CSS/CSS_multicol_layout/Basic_concepts) - : An overview of the Multiple-column Layout specification - [Styling columns](/en-US/docs/Web/CSS/CSS_multicol_layout/Styling_columns) - : How to use column rules and manage the spacing between columns. diff --git a/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md index fbf0bf6d1621c8a..a14e4db04aca947 100644 --- a/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md +++ b/files/en-us/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md @@ -10,15 +10,15 @@ page-type: guide ## Description -In the previous article of this guide, [Using z-index](/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z-index/Adding_z-index), we showed that the rendering order of certain elements is influenced by their `z-index` value. This occurs because these elements have special properties which cause them to form a _stacking context_. +In the previous article of this guide, [Using z-index](/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Using_z-index), we showed that the rendering order of certain elements is influenced by their `z-index` value. This occurs because these elements have special properties which cause them to form a _stacking context_. A stacking context is formed, anywhere in the document, by any element in the following scenarios: - Root element of the document (`<html>`). - Element with a {{cssxref("position")}} value `absolute` or `relative` and {{cssxref("z-index")}} value other than `auto`. - Element with a {{cssxref("position")}} value `fixed` or `sticky` (sticky for all mobile browsers, but not older desktop browsers). -- Element with a {{container-type}} value `size` or `inline-size` set, intended for [container queries](/en-US/docs/Web/CSS/CSS_Container_Queries). -- Element that is a child of a [flex](/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) container, with {{cssxref("z-index")}} value other than `auto`. +- Element with a {{cssxref("container-type")}} value `size` or `inline-size` set, intended for [container queries](/en-US/docs/Web/CSS/CSS_container_queries). +- Element that is a child of a [flex](/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox) container, with {{cssxref("z-index")}} value other than `auto`. - Element that is a child of a {{cssxref("grid")}} container, with {{cssxref("z-index")}} value other than `auto`. - Element with an {{cssxref("opacity")}} value less than `1` (See [the specification for opacity](https://www.w3.org/TR/css-color-3/#transparency)). - Element with a {{cssxref("mix-blend-mode")}} value other than `normal`. diff --git a/files/en-us/web/css/css_shapes/overview_of_shapes/index.md b/files/en-us/web/css/css_shapes/overview_of_shapes/index.md index 3250aa111eb0663..e206a9cf63f30a0 100644 --- a/files/en-us/web/css/css_shapes/overview_of_shapes/index.md +++ b/files/en-us/web/css/css_shapes/overview_of_shapes/index.md @@ -43,7 +43,7 @@ Using the value `inset()` wraps text around a rectangular shape however you are We have already seen how `circle()` creates a circular shape. An `ellipse()` is essentially a squashed circle. If none of these simple shapes do the trick you can create a `polygon()` and make the shape as complex as you want. -In our [Guide to Basic Shapes](/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes) we explore each of the possible Basic Shapes and how to create them. +In our [Guide to Basic Shapes](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) we explore each of the possible Basic Shapes and how to create them. ### Shapes from the box value @@ -58,7 +58,7 @@ In the example below, you can change the value `border-box` to any of the other {{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}} -To explore the box values in more detail, see our guide covering [Shapes from box values](/en-US/docs/Web/CSS/CSS_Shapes/From_box_values). +To explore the box values in more detail, see our guide covering [Shapes from box values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values). ### Shapes from images @@ -78,7 +78,7 @@ You can see the threshold in action if we use a gradient as the image on which t {{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}} -We take a deeper look at creating shapes from images in the [Shapes from Images](/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images) guide. +We take a deeper look at creating shapes from images in the [Shapes from Images](/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images) guide. ## The `shape-margin` property diff --git a/files/en-us/web/css/css_transforms/index.md b/files/en-us/web/css/css_transforms/index.md index f4dd2da9629d003..ec9ef491f3e0eae 100644 --- a/files/en-us/web/css/css_transforms/index.md +++ b/files/en-us/web/css/css_transforms/index.md @@ -30,7 +30,7 @@ The **CSS transforms** module defines how elements styled with CSS can be transf ## Guides -- [Using CSS transforms](/en-US/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms) +- [Using CSS transforms](/en-US/docs/Web/CSS/CSS_transforms/Using_CSS_transforms) - : Step-by-step tutorial about how to transform elements styled with CSS. ## Specifications diff --git a/files/en-us/web/css/css_transforms/using_css_transforms/index.md b/files/en-us/web/css/css_transforms/using_css_transforms/index.md index aa1281c0b17959e..b1169918f5c15a9 100644 --- a/files/en-us/web/css/css_transforms/using_css_transforms/index.md +++ b/files/en-us/web/css/css_transforms/using_css_transforms/index.md @@ -10,7 +10,7 @@ By modifying the coordinate space, **CSS transforms** change the shape and posit CSS transforms are implemented using a set of CSS properties that let you apply affine linear transformations to HTML elements. These transformations include rotation, skewing, scaling, and translation both in the plane and in the 3D space. -> **Warning:** Only transformable elements can be `transform`ed; that is, all elements whose layout is governed by the CSS [box model](/en-US/docs/Web/CSS/CSS_Box_Model) except for: [non-replaced inline boxes](/en-US/docs/Web/CSS/Visual_formatting_model#inline-level_elements_and_inline_boxes), [table-column boxes](/en-US/docs/Web/HTML/Element/col), and [table-column-group boxes](/en-US/docs/Web/HTML/Element/colgroup). +> **Warning:** Only transformable elements can be `transform`ed; that is, all elements whose layout is governed by the CSS [box model](/en-US/docs/Web/CSS/CSS_box_model) except for: [non-replaced inline boxes](/en-US/docs/Web/CSS/Visual_formatting_model#inline-level_elements_and_inline_boxes), [table-column boxes](/en-US/docs/Web/HTML/Element/col), and [table-column-group boxes](/en-US/docs/Web/HTML/Element/colgroup). ## CSS transforms properties diff --git a/files/en-us/web/css/css_transitions/using_css_transitions/index.md b/files/en-us/web/css/css_transitions/using_css_transitions/index.md index 9c85e02ea5bf016..52e49114c2067ca 100644 --- a/files/en-us/web/css/css_transitions/using_css_transitions/index.md +++ b/files/en-us/web/css/css_transitions/using_css_transitions/index.md @@ -260,4 +260,4 @@ el.addEventListener("transitionstart", signalStart, true); ## See also - The {{domxref("TransitionEvent")}} interface and the {{domxref("Element/transitionend_event", "transitionend")}} event -- [Using CSS animations](/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations) +- [Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) diff --git a/files/en-us/web/css/cssom_view/index.md b/files/en-us/web/css/cssom_view/index.md index f36704ed36db61d..84662fbdef10565 100644 --- a/files/en-us/web/css/cssom_view/index.md +++ b/files/en-us/web/css/cssom_view/index.md @@ -17,7 +17,7 @@ The **CSSOM view** module lets you manipulate the visual view of a document, in ## Guides -- [Coordinate systems](/en-US/docs/Web/CSS/CSSOM_View/Coordinate_systems) +- [Coordinate systems](/en-US/docs/Web/CSS/CSSOM_view/Coordinate_systems) - : A guide to the coordinate systems used to specify the position of a location in a display context, whether that context is a window on a monitor, a viewport on a mobile device, or a position on a sheet of paper when printing. ## Related concepts From 71d42a06785f4aaff0d12849a6679dedf766e834 Mon Sep 17 00:00:00 2001 From: Dipika Bhattacharya <dipika@foss-community.org> Date: Thu, 25 May 2023 19:17:35 -0400 Subject: [PATCH 7/7] fix broken link --- files/en-us/web/css/css_media_queries/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_media_queries/index.md b/files/en-us/web/css/css_media_queries/index.md index 3682911e48ddd3e..d9d0a2523e254df 100644 --- a/files/en-us/web/css/css_media_queries/index.md +++ b/files/en-us/web/css/css_media_queries/index.md @@ -19,7 +19,7 @@ For example, you may have a smaller font size for devices with small screens, in In [CSS](/en-US/docs/Web/CSS), use the {{cssxref("@media")}} [at-rule](/en-US/docs/Web/CSS/At-rule) to conditionally apply part of a style sheet based on the result of a media query. To conditionally apply an entire style sheet, use {{cssxref("@import")}}. -When designing reusable HTML components, you may also use [container queries](/en-US/docs/Web/CSS/CSS_Container_Queries), which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics. +When designing reusable HTML components, you may also use [container queries](/en-US/docs/Web/CSS/CSS_container_queries), which allow you to apply styles based on the size of a containing element rather than the viewport or other device characteristics. ### Media queries in HTML