commit f5de228419d9a1b9725bbd0077c9893a7734b879 parent 2fb3147ab5669020e435601b3b18a34c0f40f4aa Author: Nicolas Chevobbe <nchevobbe@mozilla.com> Date: Thu, 27 Nov 2025 16:21:17 +0000 Bug 2002268 - [devtools] Update MDN Web/CSS urls in documentation. r=devtools-reviewers,jdescottes Differential Revision: https://phabricator.services.mozilla.com/D274285 Diffstat:
18 files changed, 79 insertions(+), 79 deletions(-)
diff --git a/devtools/docs/user/migrating_from_firebug/index.rst b/devtools/docs/user/migrating_from_firebug/index.rst @@ -150,13 +150,13 @@ The Rules side panel of the DevTools is smarter when it comes to pasting CSS int Toggle pseudo-classes --------------------- -Firebug lets you toggle the CSS `pseudo-classes <https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes>`_ `:hover <https://developer.mozilla.org/en-US/docs/Web/CSS/:hover>`_, `:active <https://developer.mozilla.org/en-US/docs/Web/CSS/:active>`_ and `:focus <https://developer.mozilla.org/en-US/docs/Web/CSS/:focus>`_ for an element via the options menu of the Style side panel. In the DevTools there are two ways to do the same. The first one is to toggle them via the pseudo-class panel within the Rules side panel. The second one is to right-click and element within the node view and toggle the pseudo-classes via the :ref:`context menu <page_inspector_how_to_examine_and_edit_html_context_menu_reference>`. +Firebug lets you toggle the CSS `pseudo-classes <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-classes>`_ `:hover <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:hover>`_, `:active <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:active>`_ and `:focus <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus>`_ for an element via the options menu of the Style side panel. In the DevTools there are two ways to do the same. The first one is to toggle them via the pseudo-class panel within the Rules side panel. The second one is to right-click and element within the node view and toggle the pseudo-classes via the :ref:`context menu <page_inspector_how_to_examine_and_edit_html_context_menu_reference>`. Examine CSS shorthand properties -------------------------------- -CSS `shorthand properties <https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties>`_ can be split into their related longhand properties by setting the option *Expand Shorthand Properties* within the Style side panel. The DevTools' Rules panel is a bit smarter and allows you to expand individual shorthand properties by clicking the twisty besides them. +CSS `shorthand properties <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties>`_ can be split into their related longhand properties by setting the option *Expand Shorthand Properties* within the Style side panel. The DevTools' Rules panel is a bit smarter and allows you to expand individual shorthand properties by clicking the twisty besides them. Only show applied styles diff --git a/devtools/docs/user/page_inspector/3-pane_mode/index.rst b/devtools/docs/user/page_inspector/3-pane_mode/index.rst @@ -48,7 +48,7 @@ Press the toggle control to toggle between the 2- and 3-pane views. :class: border -With the 3-pane mode enabled, you can observe live changes in CSS features as you edit the rules applied to the page. For example, you could edit a `CSS Grid <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>`_ property and observe the change immediately in the :doc:`Grid Inspector <../how_to/examine_grid_layouts/index>`. +With the 3-pane mode enabled, you can observe live changes in CSS features as you edit the rules applied to the page. For example, you could edit a `CSS Grid <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout>`_ property and observe the change immediately in the :doc:`Grid Inspector <../how_to/examine_grid_layouts/index>`. .. raw:: html diff --git a/devtools/docs/user/page_inspector/how_to/debug_scrollable_overflow/index.rst b/devtools/docs/user/page_inspector/how_to/debug_scrollable_overflow/index.rst @@ -2,7 +2,7 @@ Debug scrollable overflow ========================= -A `scroll container <https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container>`_ is created by applying `overflow: scroll <https://developer.mozilla.org/en-US/docs/Web/CSS/overflow>`_ to a container, or `overflow: auto <https://developer.mozilla.org/en-US/docs/Web/CSS/overflow>`_ when there is enough content to cause overflow. The Firefox DevTools make it easy to discover both scrollable elements and any elements that are causing overflow. +A `scroll container <https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container>`_ is created by applying `overflow: scroll <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow>`_ to a container, or `overflow: auto <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/overflow>`_ when there is enough content to cause overflow. The Firefox DevTools make it easy to discover both scrollable elements and any elements that are causing overflow. In the :ref:`HTML Pane <page_inspector_ui_tour_html_pane>`, ascrollable element has the ``scroll`` badge next to it, as shown in the following image: diff --git a/devtools/docs/user/page_inspector/how_to/edit_css_filters/index.rst b/devtools/docs/user/page_inspector/how_to/edit_css_filters/index.rst @@ -2,7 +2,7 @@ Edit CSS filters ================ -`CSS filter <https://developer.mozilla.org/en-US/docs/Web/CSS/filter>`_ properties in the :ref:`Rules view <page_inspector_ui_tour_rules_view>` have a circular gray and white swatch next to them: +`CSS filter <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/filter>`_ properties in the :ref:`Rules view <page_inspector_ui_tour_rules_view>` have a circular gray and white swatch next to them: .. image:: click_to_edit_filter.png :class: border diff --git a/devtools/docs/user/page_inspector/how_to/edit_css_shapes/index.rst b/devtools/docs/user/page_inspector/how_to/edit_css_shapes/index.rst @@ -2,7 +2,7 @@ Edit Shape Paths in CSS ======================= -The Shape Path Editor is a tool that helps you see and edit shapes created using `clip-path <https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path>`_ and also the CSS `shape-outside <https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside>`_ property and `<basic-shape> <https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape>`_ values. This guide walks you through all of the available options. +The Shape Path Editor is a tool that helps you see and edit shapes created using `clip-path <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path>`_ and also the CSS `shape-outside <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside>`_ property and `<basic-shape> <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/basic-shape>`_ values. This guide walks you through all of the available options. Activate / deactivate the Shape Path Editor @@ -30,7 +30,7 @@ Once you have selected a shape on your page, the Shape Path Editor will draw lin - **A solid line** shows the outline of the shape that is wrapping the text. This is your shape. If the shape is clipped by the margin box then the margin box will make up part of this line. -- **A dashed line** demonstrates the outline of the shape which extends past the margin box reference; this is the area that will be clipped by the margin box. To understand the margin box, and other boxes used by CSS Shapes see our guide to `Shapes from box values <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/From_box_values>`_. +- **A dashed line** demonstrates the outline of the shape which extends past the margin box reference; this is the area that will be clipped by the margin box. To understand the margin box, and other boxes used by CSS Shapes see our guide to `Shapes from box values <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/From_box_values>`_. .. image:: clipped-margin-box.png :class: center @@ -44,7 +44,7 @@ The options given to you by the tool will differ depending on the type of basic circle() -------- -If the value of ``shape-outside`` is ``circle()``, you are creating a `circle basic shape <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#circle()>`_. Clicking on the shapes icon next to the value of ``circle()`` will highlight the shape, and also give you the option to resize the circle or move its center. If you move or resize the circle past the margin box, the edges become clipped by it. +If the value of ``shape-outside`` is ``circle()``, you are creating a `circle basic shape <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Using_shape-outside#circle>`_. Clicking on the shapes icon next to the value of ``circle()`` will highlight the shape, and also give you the option to resize the circle or move its center. If you move or resize the circle past the margin box, the edges become clipped by it. .. image:: clipped-margin-box.png :class: center @@ -56,7 +56,7 @@ In the Rules Panel you can see the values for ``circle()`` change as you edit th ellipse() --------- -If the value of ``shape-outside`` is ``ellipse()`` then you are using the `ellipse basic shape <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#ellipse()>`_. The ``ellipse()`` value works in much the same way as ``circle()`` in the Shape Path Editor. An ellipse is a squashed circle and therefore has the option to resize horizontally and vertically when you click on the shapes icon. +If the value of ``shape-outside`` is ``ellipse()`` then you are using the `ellipse basic shape <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Using_shape-outside#ellipse>`_. The ``ellipse()`` value works in much the same way as ``circle()`` in the Shape Path Editor. An ellipse is a squashed circle and therefore has the option to resize horizontally and vertically when you click on the shapes icon. .. image:: ellipse.png :class: center @@ -65,7 +65,7 @@ If the value of ``shape-outside`` is ``ellipse()`` then you are using the `ellip inset() ------- -If the value of ``shape-outside`` is ``inset()`` then you are using the `inset basic shape <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#inset()>`_, which enables the creation of offset values pulling the content in from the margin box. +If the value of ``shape-outside`` is ``inset()`` then you are using the `inset basic shape <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Using_shape-outside#inset>`_, which enables the creation of offset values pulling the content in from the margin box. Each side of the rectangle can be targeted after clicking on the shapes icon to activate the Shape Path Editor, and dragging each side will update the values for the top, right, bottom, and left offset values. @@ -76,7 +76,7 @@ Each side of the rectangle can be targeted after clicking on the shapes icon to polygon() --------- -If the value of ``shape-outside`` is ``polygon()`` then you are using the `polygon basic shape <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#polygon()>`_. This is the most complex of the basic shape values, therefore the tool gives you more options when editing these: +If the value of ``shape-outside`` is ``polygon()`` then you are using the `polygon basic shape <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Shapes/Using_shape-outside#polygon>`_. This is the most complex of the basic shape values, therefore the tool gives you more options when editing these: - Clicking on the shapes icon will activate the Shapes Path Editor and give you the option to move any of the points of your polygon shape. @@ -101,4 +101,4 @@ If your shape is a polygon, you also get the ability to rotate it around an axis Browser support *************** -The Shape Path Editor currently works for shapes generated via `clip-path <https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path>`_ and `shape-outside <https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside>`_. +The Shape Path Editor currently works for shapes generated via `clip-path <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path>`_ and `shape-outside <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/shape-outside>`_. diff --git a/devtools/docs/user/page_inspector/how_to/edit_fonts/index.rst b/devtools/docs/user/page_inspector/how_to/edit_fonts/index.rst @@ -60,7 +60,7 @@ For standard (static) fonts, you will be able to change the settings listed belo Size ---- -The `font-size <https://developer.mozilla.org/en-US/docs/Web/CSS/font-size>`_ for the inspected element. +The `font-size <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-size>`_ for the inspected element. .. image:: font-size_cropped.png :class: border @@ -80,7 +80,7 @@ Example: If ``1rem`` is equivalent to 10 pixels, when you change the unit of mea Line height ----------- -The `line-height <https://developer.mozilla.org/en-US/docs/Web/CSS/line-height>`_ of the inspected element. +The `line-height <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/line-height>`_ of the inspected element. .. image:: line-height_cropped.png :class: border @@ -96,7 +96,7 @@ Example: If the font is 20 pixels high and the line-height is ``1.5em``, when yo Weight ------ -The `font-weight <https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight>`_ for the inspected element. +The `font-weight <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-weight>`_ for the inspected element. .. image:: font-weight_cropped.png :alt: Font weight setting @@ -106,13 +106,13 @@ The `font-weight <https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight>` You can select values using the slider or enter a numeric value directly into the text box. For non-variable fonts the slider ranges from 100 to 900 in increments of 100. .. note:: - For `variable fonts <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide>`_ (see below) that define a ``wght`` variation axis, this range is custom. + For `variable fonts <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts>`_ (see below) that define a ``wght`` variation axis, this range is custom. Italic ------ -The `font-style <https://developer.mozilla.org/en-US/docs/Web/CSS/font-style>`_ for the inspected element. +The `font-style <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-style>`_ for the inspected element. .. image:: font-italic_cropped.png :class: border @@ -141,7 +141,7 @@ Each font listed in this section shows you: - The ``font-family`` identifier and full name of the font. - The URL to the font file in the case of web fonts not available on your system, or "System" in the case of fonts loaded from your computer (either default system fonts, or web fonts that you've also got installed on your system). You can copy the URL to the font file by clicking on the icon to the right of the URL. -- The `@font-face <https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face>`_ descriptor that loads the font into the page, in the case of web fonts. The descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet. +- The `@font-face <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@font-face>`_ descriptor that loads the font into the page, in the case of web fonts. The descriptor is expandable — when opened it shows its full syntax as defined in the stylesheet. - A text sample, to give you an idea of what the font looks like when rendered. The default text for the sample is "Abc" but the preview text can be edited by clicking on the input field at the top of the section and entering a new value. Once entered, all of the sample text will be set to the same custom value. @@ -153,13 +153,13 @@ You can editing the properties of variable fonts in the Font Editor. What are variable fonts? ------------------------ -`Variable Fonts <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide>`_, or **OpenType Font Variations**, define a new font file format that allows the font designer to include multiple variations of a typeface inside a single font file. That means you no longer have to apply several different web fonts to a single page to represent a complete typeface for which a variable font is available, provided it includes the desired values for the different characteristics you want to vary. +`Variable Fonts <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts>`_, or **OpenType Font Variations**, define a new font file format that allows the font designer to include multiple variations of a typeface inside a single font file. That means you no longer have to apply several different web fonts to a single page to represent a complete typeface for which a variable font is available, provided it includes the desired values for the different characteristics you want to vary. -Variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by **axes of variation** (see `Introducing the 'variation axis' <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide#introducing_the_'variation_axis'>`_ for more information). For example, `font-weight <https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight>`_ can be set to any value between 1 and 1000 in variable fonts (although it is not guaranteed that a variable font will support this entire range). +Variable fonts make it easy to vary font characteristics in a much more granular fashion because their allowable ranges are defined by **axes of variation** (see `Introducing the 'variation axis' <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Fonts/Variable_fonts#introducing_the_variation_axis>`_ for more information). For example, `font-weight <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-weight>`_ can be set to any value between 1 and 1000 in variable fonts (although it is not guaranteed that a variable font will support this entire range). There are several registered axes. Although it isn't required that these axes be defined for every font, if the font designer *does* implement a registered axis, its behavior *must* follow the defined behavior. -All variable font axes have a four-character axis tag. The CSS `font-variation-settings <https://developer.mozilla.org/en-US/docs/Web/CSS/font-variation-settings>`_ property uses the tag as part of the key-value pair. For example, to set `font-weight <https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight>`_ using ``font-variation-settings``, you could do something like this: +All variable font axes have a four-character axis tag. The CSS `font-variation-settings <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-variation-settings>`_ property uses the tag as part of the key-value pair. For example, to set `font-weight <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-weight>`_ using ``font-variation-settings``, you could do something like this: .. code-block:: css @@ -184,19 +184,19 @@ Here are the registered axes along with their corresponding CSS properties: - CSS Property * - "wght" - - `font-weight <https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight>`_ + - `font-weight <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-weight>`_ * - "wdth" - - `font-stretch <https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch>`_ + - `font-stretch <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-stretch>`_ * - "slnt" (slant) - - `font-style <https://developer.mozilla.org/en-US/docs/Web/CSS/font-style>`_: ``oblique + angle`` + - `font-style <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-style>`_: ``oblique + angle`` * - "ital" - - `font-style <https://developer.mozilla.org/en-US/docs/Web/CSS/font-style>`_: ``italic`` + - `font-style <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-style>`_: ``italic`` * - "opsz" - - `font-optical-sizing <https://developer.mozilla.org/en-US/docs/Web/CSS/font-optical-sizing>`_ + - `font-optical-sizing <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-optical-sizing>`_ Any axis that is not on the list of registered axes is considered a custom axis. Custom axes do not have corresponding CSS font properties. Font designers can define whatever axis they want; each one needs to be given a unique four-character tag. The axis name and its range is up to the font designer. @@ -245,7 +245,7 @@ Finally, here are a few tips for making effective use of the Fonts tab: - When using the Page Inspector's :doc:`3-pane mode <../../3-pane_mode/index>`, you can view the CSS rules for the inspected element simultaneously alongside the Fonts tab. -- If you hover over the `font-family <https://developer.mozilla.org/en-US/docs/Web/CSS/font-family>`_ property in the Rules view, a tooltip shows a sample of the font: +- If you hover over the `font-family <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/font-family>`_ property in the Rules view, a tooltip shows a sample of the font: .. image:: fonts_62_tooltip_cropped.png :class: border diff --git a/devtools/docs/user/page_inspector/how_to/examine_and_edit_css/index.rst b/devtools/docs/user/page_inspector/how_to/examine_and_edit_css/index.rst @@ -86,9 +86,9 @@ It displays each rule as in a stylesheet, with a list of selectors followed by a .. |image1| image:: screen_shot_2016-12-16_at_10.51.15_am.png :width: 20 -If the element has a `display: grid <https://developer.mozilla.org/en-US/docs/Web/CSS/display>`_ declaration, then it gets a grid icon next to it, like this: |image1|. Click that icon to display the grid overlaid on the page, including grid lines and tracks. See :doc:`Examine grid layouts <../examine_grid_layouts/index>` for more on this. +If the element has a `display: grid <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display>`_ declaration, then it gets a grid icon next to it, like this: |image1|. Click that icon to display the grid overlaid on the page, including grid lines and tracks. See :doc:`Examine grid layouts <../examine_grid_layouts/index>` for more on this. -To view `user-agent styles <https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade>`_ (*i.e.,* browser-default CSS rules), enable "Inspector > Show Browser Styles" under the :doc:`developer tool settings <../../../settings/index>` panel. (Note that this setting is independent of the "Browser styles" checkbox in the :ref:`Computed view <page_inspector_how_to_examine_and_edit_css_examine_computed_css>`.) +To view `user-agent styles <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction>`_ (*i.e.,* browser-default CSS rules), enable "Inspector > Show Browser Styles" under the :doc:`developer tool settings <../../../settings/index>` panel. (Note that this setting is independent of the "Browser styles" checkbox in the :ref:`Computed view <page_inspector_how_to_examine_and_edit_css_examine_computed_css>`.) User-agent styles are displayed against a different background, and the link to the filename and line number contains the prefix ``(user agent)``: @@ -140,7 +140,7 @@ Click the "X" at the end of the search box to remove the filter. Strict search ~~~~~~~~~~~~~ -By default, the search box highlights all declarations which contain any part of the string. For example, searching for "color" will highlight declarations containing `border-bottom-color <https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color>`_ and `background-color <https://developer.mozilla.org/en-US/docs/Web/CSS/background-color>`_ as well as just `color <https://developer.mozilla.org/en-US/docs/Web/CSS/color>`_: +By default, the search box highlights all declarations which contain any part of the string. For example, searching for "color" will highlight declarations containing `border-bottom-color <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/border-bottom-color>`_ and `background-color <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-color>`_ as well as just `color <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/color>`_: .. image:: filter_rules_2.png :class: border @@ -154,13 +154,13 @@ If you enclose the search query in backticks, like this: `color`, the search is Expanding shorthand properties ------------------------------ -`Shorthand properties <https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties>`_ can be expanded to display their related longhand properties by clicking the arrow besides them. +`Shorthand properties <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Shorthand_properties>`_ can be expanded to display their related longhand properties by clicking the arrow besides them. Displaying pseudo-elements -------------------------- -The Rule view displays the following `pseudo-elements <https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements>`_, if they are applied to the selected element: +The Rule view displays the following `pseudo-elements <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/Pseudo-elements>`_, if they are applied to the selected element: - ``::after`` - ``::backdrop`` @@ -204,7 +204,7 @@ There's a button to the right of the filter box: :class: border -Click the button to see checkboxes that you can use to enable the `:hover <https://developer.mozilla.org/en-US/docs/Web/CSS/:hover>`_, `:active <https://developer.mozilla.org/en-US/docs/Web/CSS/:active>`_ and `:focus <https://developer.mozilla.org/en-US/docs/Web/CSS/:focus>`_, `:focus-within <https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within>`_, `:focus-visible <https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible>`_, `:visited <https://developer.mozilla.org/en-US/docs/Web/CSS/:visited>`_, and `:target <https://developer.mozilla.org/en-US/docs/Web/CSS/:target>`_ pseudo-classes for the selected element: +Click the button to see checkboxes that you can use to enable the `:hover <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:hover>`_, `:active <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:active>`_ and `:focus <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus>`_, `:focus-within <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-within>`_, `:focus-visible <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible>`_, `:visited <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:visited>`_, and `:target <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:target>`_ pseudo-classes for the selected element: .. image:: show_pseudo_classes_hover.png @@ -276,7 +276,7 @@ When on, any rules defined for printing the page will be displayed similar to th View @media rules for prefers-color-scheme ------------------------------------------ -The color scheme simulator buttons can be used to test the rendering of styles based on the `prefers-color-scheme <https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme>`_ media query (if any are defined for the page). There are two buttons, which enable the light and dark preference, respectively. Selecting either button deselects the other. If neither button is selected then the simulator does not set a preference, and the browser renders using the default feature value set by the operating system. +The color scheme simulator buttons can be used to test the rendering of styles based on the `prefers-color-scheme <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme>`_ media query (if any are defined for the page). There are two buttons, which enable the light and dark preference, respectively. Selecting either button deselects the other. If neither button is selected then the simulator does not set a preference, and the browser renders using the default feature value set by the operating system. .. |image3| image:: color_scheme_null.png @@ -314,7 +314,7 @@ The color scheme simulator buttons can be used to test the rendering of styles b Note that if the operating system mode is set to a particular mode, then simulating that mode will not change page rendering (i.e. simulating dark mode when the operating system is using dark mode will not change the display). .. note:: - If ``privacy.resistFingerprinting`` has been set **true**, the `prefers-color-scheme <https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme>`_ preference is forced to ``light``. You must set``privacy.resistFingerprinting`` to **false** in order to use this feature. + If ``privacy.resistFingerprinting`` has been set **true**, the `prefers-color-scheme <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme>`_ preference is forced to ``light``. You must set``privacy.resistFingerprinting`` to **false** in order to use this feature. .. _page_inspector_how_to_examine_and_edit_css_examine_computed_css: @@ -368,7 +368,7 @@ While you're editing CSS, the context menu you'll see is the normal one for work CSS variable autocompletion --------------------------- -`CSS variable names <https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties>`_ will auto-complete depending on the variables defined in the CSS. If you enter ``var(`` into a property value and then type a dash (``-``), any variables you have declared in your CSS will then appear in an autocomplete list, which shows a color swatch so you can see exactly what color each variable choice is storing (`bug 1451211 <https://bugzilla.mozilla.org/show_bug.cgi?id=1451211>`_) +`CSS variable names <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascading_variables/Using_custom_properties>`_ will auto-complete depending on the variables defined in the CSS. If you enter ``var(`` into a property value and then type a dash (``-``), any variables you have declared in your CSS will then appear in an autocomplete list, which shows a color swatch so you can see exactly what color each variable choice is storing (`bug 1451211 <https://bugzilla.mozilla.org/show_bug.cgi?id=1451211>`_) .. image:: edit_rule_var_autocomplete.png :class: border diff --git a/devtools/docs/user/page_inspector/how_to/examine_and_edit_html/index.rst b/devtools/docs/user/page_inspector/how_to/examine_and_edit_html/index.rst @@ -79,7 +79,7 @@ The rest of the pane shows you the page's HTML as a tree (this UI is also called Moving the mouse over a node in the tree highlights that element in the page. -Nodes that are not visible are shown faded/desaturated. This can happen for different reasons such as using `display: none <https://developer.mozilla.org/en-US/docs/Web/CSS/display>`_ or that the element doesn't have any dimensions. +Nodes that are not visible are shown faded/desaturated. This can happen for different reasons such as using `display: none <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display>`_ or that the element doesn't have any dimensions. .. |image1| image:: child-node-indicator.png :width: 20 @@ -102,22 +102,22 @@ Markers ("badges") are displayed to the right of some nodes. The table below exp - The element has one or several event listeners attached to it. Clicking the marker opens a tooltip listing the event listeners and allows you for each listener to switch to the line of JavaScript code in the :doc:`Debugger <../../../debugger/index>` where the listener is defined. * - ``scroll`` - - The element is a `scroll container <https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container>`_, i.e. it has either ``overflow: scroll`` applied, or ``overflow: auto`` and sufficient content to cause `scrollable overflow <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Overflow>`_. |br| |br| If preference ``devtools.overflow.debugging.enabled`` is ``true``, toggling the ``scroll`` badge will highlight any elements causing the overflow, and these nodes will additionally display the ``overflow`` badge. + - The element is a `scroll container <https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container>`_, i.e. it has either ``overflow: scroll`` applied, or ``overflow: auto`` and sufficient content to cause `scrollable overflow <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Overflow>`_. |br| |br| If preference ``devtools.overflow.debugging.enabled`` is ``true``, toggling the ``scroll`` badge will highlight any elements causing the overflow, and these nodes will additionally display the ``overflow`` badge. * - ``overflow`` - - The element is causing `scrollable overflow <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Overflow>`_ in a `scroll container <https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container>`_ (either the current node or a parent node—the affected nodewill display the ``scroll`` badge). + - The element is causing `scrollable overflow <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Overflow>`_ in a `scroll container <https://developer.mozilla.org/en-US/docs/Glossary/Scroll_container>`_ (either the current node or a parent node—the affected nodewill display the ``scroll`` badge). * - ``grid`` - - The element is a `grid container <https://developer.mozilla.org/en-US/docs/Glossary/Grid_Container>`_, i.e. it has `display: grid <https://developer.mozilla.org/en-US/docs/Web/CSS/display>`_ applied to it. Clicking the marker enables the grid highlighter. + - The element is a `grid container <https://developer.mozilla.org/en-US/docs/Glossary/Grid_Container>`_, i.e. it has `display: grid <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display>`_ applied to it. Clicking the marker enables the grid highlighter. * - ``flex`` - - The element is a `flex container <https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container>`_, i.e. it has `display: flex <https://developer.mozilla.org/en-US/docs/Web/CSS/display>`_ applied to it. Clicking the marker enables the flexbox highlighter. + - The element is a `flex container <https://developer.mozilla.org/en-US/docs/Glossary/Flex_Container>`_, i.e. it has `display: flex <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display>`_ applied to it. Clicking the marker enables the flexbox highlighter. * - ``inline-grid`` - - The element is an inline grid container, i.e. it has `display: inline-grid <https://developer.mozilla.org/en-US/docs/Web/CSS/display>`_ or ``display: inline grid`` applied to it. Clicking the marker enables the grid highlighter. + - The element is an inline grid container, i.e. it has `display: inline-grid <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display>`_ or ``display: inline grid`` applied to it. Clicking the marker enables the grid highlighter. * - ``inline-flex`` - - The element is an inline flex container, i.e. it has `display: inline-flex <https://developer.mozilla.org/en-US/docs/Web/CSS/display>`_ or ``display: inline flex`` applied to it. Clicking the marker enables the flexbox highlighter. + - The element is an inline flex container, i.e. it has `display: inline-flex <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display>`_ or ``display: inline flex`` applied to it. Clicking the marker enables the flexbox highlighter. * - ``custom…`` - The element is a custom element. Clicking the marker switches to the line of JavaScript code in the Debugger where the custom element got defined. @@ -131,7 +131,7 @@ Markers ("badges") are displayed to the right of some nodes. The table below exp ::before and ::after -------------------- -You can inspect pseudo-elements added using `::before <https://developer.mozilla.org/en-US/docs/Web/CSS/::before>`_ and `::after <https://developer.mozilla.org/en-US/docs/Web/CSS/::after>`_ +You can inspect pseudo-elements added using `::before <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::before>`_ and `::after <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::after>`_ .. raw:: html @@ -167,7 +167,7 @@ Web developers don’t write all their code in just one line of text. They use w Usually this white space seems to have no effect and no visual output, but in fact, when a browser parses HTML it will automatically generate anonymous text nodes for elements not contained in a node. This includes white space (which is after all a type of text). -If these auto generated text nodes are `inline level <https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model#inline-level_elements_and_inline_boxes>`_, browsers will give them a non-zero width and height. Then you will find strange gaps between elements, even if you haven’t set any margin or padding on them. +If these auto generated text nodes are `inline level <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Display/Visual_formatting_model#inline-level_elements_and_inline_boxes>`_, browsers will give them a non-zero width and height. Then you will find strange gaps between elements, even if you haven’t set any margin or padding on them. .. |image2| image:: new-whitespace-text-indicator.png :width: 20 @@ -378,19 +378,19 @@ Context menu reference - (only when invoked over a URL) Copy the URL. * - (Change Pseudo-class) hover - - Set the `:hover <https://developer.mozilla.org/en-US/docs/Web/CSS/:hover>`_ CSS pseudo-class. + - Set the `:hover <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:hover>`_ CSS pseudo-class. * - (Change Pseudo-class) active - - Set the `:active <https://developer.mozilla.org/en-US/docs/Web/CSS/:active>`_ CSS pseudo-class. + - Set the `:active <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:active>`_ CSS pseudo-class. * - (Change Pseudo-class) focus - - Set the `:focus <https://developer.mozilla.org/en-US/docs/Web/CSS/:focus>`_ CSS pseudo-class. + - Set the `:focus <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus>`_ CSS pseudo-class. * - (Change Pseudo-class) focus-visible - - Set the `:focus-visible <https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible>`_ CSS pseudo-class. + - Set the `:focus-visible <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible>`_ CSS pseudo-class. * - (Change Pseudo-class) focus-within - - Set the `:focus-within <https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within>`_ CSS pseudo-class. + - Set the `:focus-within <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-within>`_ CSS pseudo-class. * - (Change Pseudo-class) visited - Set the :visited CSS pseudo-class. diff --git a/devtools/docs/user/page_inspector/how_to/examine_and_edit_the_box_model/index.rst b/devtools/docs/user/page_inspector/how_to/examine_and_edit_the_box_model/index.rst @@ -5,7 +5,7 @@ Examine and edit the box model Viewing the box model ********************* -With the :ref:`Select Element button <page_inspector_select_element_button>` pressed, if you hover over an element in the page, the `box model <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model>`_ for the element is shown overlaid on the page: +With the :ref:`Select Element button <page_inspector_select_element_button>` pressed, if you hover over an element in the page, the `box model <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Box_model/Introduction>`_ for the element is shown overlaid on the page: .. raw:: html diff --git a/devtools/docs/user/page_inspector/how_to/examine_flexbox_layouts/index.rst b/devtools/docs/user/page_inspector/how_to/examine_flexbox_layouts/index.rst @@ -2,13 +2,13 @@ CSS Flexbox Inspector: Examine Flexbox layouts ============================================== -The **Flexbox Inspector** allows you to examine `CSS Flexbox Layouts <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout>`_ using the Firefox DevTools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more. +The **Flexbox Inspector** allows you to examine `CSS Flexbox Layouts <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Flexible_box_layout>`_ using the Firefox DevTools, which is useful for discovering flex containers on a page, examining and modifying them, debugging layout issues, and more. Discovering Flex Containers *************************** -When an HTML element on your page has `display: flex <https://developer.mozilla.org/en-US/docs/Web/CSS/display>`_ applied to it, a number of features are made available in the DevTools to provide easy access to Flexbox layout features. +When an HTML element on your page has `display: flex <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display>`_ applied to it, a number of features are made available in the DevTools to provide easy access to Flexbox layout features. In the HTML pane @@ -54,7 +54,7 @@ In the CSS pane .. |image1| image:: flexbox_icon.gif :width: 20 -In the :ref:`CSS pane <page_inspector_ui_tour_rules_view>`'s Rules view, any instance of a `display: flex <https://developer.mozilla.org/en-US/docs/Web/CSS/display>`_ declaration gets a small Flexbox icon |image1| next to the word ``flex``. +In the :ref:`CSS pane <page_inspector_ui_tour_rules_view>`'s Rules view, any instance of a `display: flex <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display>`_ declaration gets a small Flexbox icon |image1| next to the word ``flex``. .. image:: css-pane.png :alt: The CSS pane of the Firefox devtools, showing the CSS for a flex container with an icon to toggle the Flexbox overly diff --git a/devtools/docs/user/page_inspector/how_to/examine_grid_layouts/index.rst b/devtools/docs/user/page_inspector/how_to/examine_grid_layouts/index.rst @@ -2,17 +2,17 @@ CSS Grid Inspector: Examine grid layouts ======================================== -The **Grid Inspector** allows you to examine `CSS Grid Layouts <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>`_ using the Firefox DevTools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more. +The **Grid Inspector** allows you to examine `CSS Grid Layouts <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout>`_ using the Firefox DevTools, discovering grids present on a page, examining and modifying them, debugging layout issues, and more. .. note:: - The examples shown in the screenshots appearing in this article are Jen Simmons' `Futurismo <https://labs.jensimmons.com/2016/examples/futurismo-1.html>`_ and `Variations on a grid <https://labs.jensimmons.com/2017/01-003.html>`_ experiments, and a `live named grid area example <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#naming_a_grid_area>`_ from Rachel Andrew. + The examples shown in the screenshots appearing in this article are Jen Simmons' `Futurismo <https://labs.jensimmons.com/2016/examples/futurismo-1.html>`_ and `Variations on a grid <https://labs.jensimmons.com/2017/01-003.html>`_ experiments, and a `live named grid area example <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Grid_template_areas#naming_a_grid_area>`_ from Rachel Andrew. Discovering CSS grids ********************* -When an HTML element on your page has `display: grid <https://developer.mozilla.org/en-US/docs/Web/CSS/display>`_ applied to it, a number of features are made available in the DevTools to provide easy access to grid features. +When an HTML element on your page has `display: grid <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display>`_ applied to it, a number of features are made available in the DevTools to provide easy access to grid features. In the HTML pane @@ -31,7 +31,7 @@ In the CSS pane .. |image1| image:: screen_shot_2016-12-16_at_10.51.15_am.png :width: 20 -In the :ref:`CSS pane <page_inspector_ui_tour_rules_view>`'s Rules view, any instance of a `display: grid <https://developer.mozilla.org/en-US/docs/Web/CSS/display>`_ declaration gets a grid icon included within it: |image1|. +In the :ref:`CSS pane <page_inspector_ui_tour_rules_view>`'s Rules view, any instance of a `display: grid <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/display>`_ declaration gets a grid icon included within it: |image1|. .. image:: css-pane.png :alt: The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid @@ -186,4 +186,4 @@ See also - `labs.jensimmons.com <https://labs.jensimmons.com/>`_ — lots of interesting grid examples. - `Grid by Example <https://gridbyexample.com/>`_ — CSS Grid learning resources from Rachel Andrew. -- `CSS Grid Layout <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout>`_ — MDN CSS Grid Layout references and tutorials. +- `CSS Grid Layout <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout>`_ — MDN CSS Grid Layout references and tutorials. diff --git a/devtools/docs/user/page_inspector/how_to/reposition_elements_in_the_page/index.rst b/devtools/docs/user/page_inspector/how_to/reposition_elements_in_the_page/index.rst @@ -4,7 +4,7 @@ Reposition elements in the page You can move absolutely positioned elements by dragging them around the page. -If an element has its `position <https://developer.mozilla.org/en-US/docs/Web/CSS/Position>`_ property set to ``absolute``, ``relative`` or ``fixed`` and one or more of the `top <https://developer.mozilla.org/en-US/docs/Web/CSS/top>`_, `bottom <https://developer.mozilla.org/en-US/docs/Web/CSS/bottom>`_ , `left <https://developer.mozilla.org/en-US/docs/Web/CSS/left>`_ or `right <https://developer.mozilla.org/en-US/docs/Web/CSS/right>`_ properties, :ref:`Box Model view <page_inspector_ui_tour_computed_view>` displays a button: +If an element has its `position <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/Position>`_ property set to ``absolute``, ``relative`` or ``fixed`` and one or more of the `top <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/top>`_, `bottom <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/bottom>`_ , `left <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/left>`_ or `right <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/right>`_ properties, :ref:`Box Model view <page_inspector_ui_tour_computed_view>` displays a button: .. image:: box-model-reposition.png :class: center diff --git a/devtools/docs/user/page_inspector/how_to/view_background_images/index.rst b/devtools/docs/user/page_inspector/how_to/view_background_images/index.rst @@ -2,7 +2,7 @@ View background images ====================== -In the :ref:`Rules view <page_inspector_ui_tour_rules_view>`, you can see a preview of images specified using `background-image <https://developer.mozilla.org/en-US/docs/Web/CSS/background-image>`_. Just hover over the rule: +In the :ref:`Rules view <page_inspector_ui_tour_rules_view>`, you can see a preview of images specified using `background-image <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/background-image>`_. Just hover over the rule: .. image:: css-image-preview.png :class: center diff --git a/devtools/docs/user/page_inspector/how_to/visualize_transforms/index.rst b/devtools/docs/user/page_inspector/how_to/visualize_transforms/index.rst @@ -2,7 +2,7 @@ Visualize transforms ==================== -If you hover over a `transform <https://developer.mozilla.org/en-US/docs/Web/CSS/transform>`_ property in the :ref:`Rules view <page_inspector_ui_tour_rules_view>`, you'll see the transformation overlaid in the page: +If you hover over a `transform <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform>`_ property in the :ref:`Rules view <page_inspector_ui_tour_rules_view>`, you'll see the transformation overlaid in the page: .. image:: transform.png :class: center diff --git a/devtools/docs/user/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.rst b/devtools/docs/user/page_inspector/how_to/work_with_animations/animation_inspector_example_colon__css_transitions/index.rst @@ -5,7 +5,7 @@ Animation inspector example: CSS transitions Firefox Logo Animation ********************** -Example animation using `CSS transitions <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions>`_. +Example animation using `CSS transitions <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Transitions/Using>`_. HTML Content ------------ diff --git a/devtools/docs/user/page_inspector/how_to/work_with_animations/index.rst b/devtools/docs/user/page_inspector/how_to/work_with_animations/index.rst @@ -19,7 +19,7 @@ Animation inspector The Page Inspector's :ref:`Animations view <page_inspector_ui_tour_animations_view>` displays animations in the page synchronized along a timeline, with a draggable widget you can use to move to any point in the timeline and see the page at that point. -It displays animations created using `CSS transitions <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions>`_, `CSS @keyframes rules <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations>`_, or the `Web Animations API <https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API>`_, including animations applied to the `::before <https://developer.mozilla.org/en-US/docs/Web/CSS/::before>`_ and `::after <https://developer.mozilla.org/en-US/docs/Web/CSS/::after>`_ pseudo-elements. +It displays animations created using `CSS transitions <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Transitions>`_, `CSS @keyframes rules <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using>`_, or the `Web Animations API <https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API>`_, including animations applied to the `::before <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::before>`_ and `::after <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/::after>`_ pseudo-elements. To see how it works, we'll walk through an example. The box below contains a grayscale icon, representing `Firefox Developer Edition <https://www.mozilla.org/en-US/firefox/developer/>`_. If you click the icon, it enlarges and changes to color, and the name of the browser appears. Click the icon again to reverse the effect. @@ -57,8 +57,8 @@ Animation bars Each animation or transition is shown as a horizontal bar laid across the timeline. The bar is: -- blue if a `transition <https://developer.mozilla.org/en-US/docs/Web/CSS/transition>`_) was used to animate a property -- orange if a `@keyframes animation <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations>`_ was used +- blue if a `transition <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition>`_ was used to animate a property +- orange if a `@keyframes animation <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@keyframes>`_ was used - green if the `Web Animations API <https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API>`_ was used .. |image1| image:: compositor.png @@ -106,7 +106,7 @@ If you click one of the bars, you'll see details of all the properties that were :class: border -This is telling us that two properties were modified: `filter <https://developer.mozilla.org/en-US/docs/Web/CSS/filter>`_ and `transform <https://developer.mozilla.org/en-US/docs/Web/CSS/transform>`_. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. ``filter`` was given a value at 250ms and ``transform`` at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline: +This is telling us that two properties were modified: `filter <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/filter>`_ and `transform <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform>`_. Each dot represents an entry for that property in the set of keyframes used for the animation. Both properties were initialized at 0ms and finalized at 750ms. ``filter`` was given a value at 250ms and ``transform`` at 500ms. If you hover over a dot, you'll see the value assigned to that property at that point in the timeline: .. image:: animation_icon_scale.png :class: border @@ -134,14 +134,14 @@ Applying all this to our example, we can see that: - The animation involved two elements, ``span#note`` and ``img#icon``. Hovering over these selectors, we can see that those elements are, respectively, the browser name "Firefox Developer Edition" and the browser icon. - The ``img#icon`` animation: - - animated the `filter <https://developer.mozilla.org/en-US/docs/Web/CSS/filter>`_ and `transform <https://developer.mozilla.org/en-US/docs/Web/CSS/transform>`_ properties, to scale the icon and color it + - animated the `filter <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/filter>`_ and `transform <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform>`_ properties, to scale the icon and color it - lasted 750ms, had an ``endDelay`` of 100ms - used the compositor thread - was given an `easing <https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect>`_ value of ``ease-in``: you can see this by the concave shape of the green bar. - The ``span#note`` animation: - - animated the `width <https://developer.mozilla.org/en-US/docs/Web/CSS/width>`_ and `opacity <https://developer.mozilla.org/en-US/docs/Web/CSS/opacity>`_ properties, to make the name gradually appear + - animated the `width <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/width>`_ and `opacity <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/opacity>`_ properties, to make the name gradually appear - lasted 500ms, and had a ``delay`` of 150ms - was given an `easing <https://developer.mozilla.org/en-US/docs/Web/API/KeyframeEffect/KeyframeEffect>`_ value of ``ease-out``: you can see this by the convex shape of the green bar. @@ -163,7 +163,7 @@ Finally, if you click inside the bar at the top of the timeline, you get a scrub Further information about animation compositing ----------------------------------------------- -If you open `animation-inspector-compositing.html <https://firefox-devtools.github.io/devtools-examples/animation-inspector/animation-inspector-compositing.html>`_ and click the red rectangle, a simple `opacity <https://developer.mozilla.org/en-US/docs/Web/CSS/opacity>`_ animation will start. If you look at this in the Animation Inspector, you'll see that: +If you open `animation-inspector-compositing.html <https://firefox-devtools.github.io/devtools-examples/animation-inspector/animation-inspector-compositing.html>`_ and click the red rectangle, a simple `opacity <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/opacity>`_ animation will start. If you look at this in the Animation Inspector, you'll see that: - The white lightning bolt icon now indicates whether all the animation properties have been optimized by running them through the compositor, where possible. @@ -174,7 +174,7 @@ If you open `animation-inspector-compositing.html <https://firefox-devtools.gith .. image:: animation_swoosh_01.png :class: border -Let's now look at `animation-inspector-compositing-silly.html <https://firefox-devtools.github.io/devtools-examples/animation-inspector/animation-inspector-compositing-silly.html>`_ — this is the same example, except that now once the red rectangle is clicked we animate both the `left <https://developer.mozilla.org/en-US/docs/Web/CSS/left>`_ and `transform <https://developer.mozilla.org/en-US/docs/Web/CSS/transform>`_ (with a translation) properties at the same time as `opacity <https://developer.mozilla.org/en-US/docs/Web/CSS/opacity>`_. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the ``transform`` property is deliberately not handed over to the compositor to handle. The Animation Inspector will tell you this — look at it now and you'll see that: +Let's now look at `animation-inspector-compositing-silly.html <https://firefox-devtools.github.io/devtools-examples/animation-inspector/animation-inspector-compositing-silly.html>`_ — this is the same example, except that now once the red rectangle is clicked we animate both the `left <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/left>`_ and `transform <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform>`_ (with a translation) properties at the same time as `opacity <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/opacity>`_. It doesn't make much sense to try to animate a geometric property and a translation at the same time — the two effects won't be synchronized — so the ``transform`` property is deliberately not handed over to the compositor to handle. The Animation Inspector will tell you this — look at it now and you'll see that: - The white lightning bolt icon in the bar has been replaced with a grey lightning bolt icon, to indicate that only some of the relevant properties are being optimized by the compositor. @@ -191,7 +191,7 @@ Let's now look at `animation-inspector-compositing-silly.html <https://firefox-d Edit @keyframes *************** -Any `@keyframes rules <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations>`_ associated with the currently selected element are displayed in the :ref:`Rules view <page_inspector_ui_tour_rules_view>` and are editable: +Any `@keyframes rules <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@keyframes>`_ associated with the currently selected element are displayed in the :ref:`Rules view <page_inspector_ui_tour_rules_view>` and are editable: .. raw:: html @@ -205,9 +205,9 @@ Any `@keyframes rules <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Anim Edit timing functions ********************* -When you `create a CSS animation <https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations>`_ you can specify a `timing function <https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function>`_: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve. +When you `create a CSS animation <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Animations/Using>`_ you can specify a `timing function <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/animation-timing-function>`_: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve. -Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag `P1 and P2 <https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function#the_cubic-bezier()_class_of_timing-functions>`_, and see the results in the page: +Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag `P1 and P2 <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/easing-function/cubic-bezier>`_, and see the results in the page: .. raw:: html diff --git a/devtools/docs/user/settings/index.rst b/devtools/docs/user/settings/index.rst @@ -95,7 +95,7 @@ Inspector --------- *Show browser styles* - A setting to control whether styles applied by the browser (`user-agent styles <https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade>`_) should be displayed in the Inspector's :doc:`Rules view <../page_inspector/how_to/examine_and_edit_css/index>`. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's :ref:`Computed view <page_inspector_how_to_examine_and_edit_css_examine_computed_css>`. + A setting to control whether styles applied by the browser (`user-agent styles <https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Cascade/Introduction>`_) should be displayed in the Inspector's :doc:`Rules view <../page_inspector/how_to/examine_and_edit_css/index>`. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's :ref:`Computed view <page_inspector_how_to_examine_and_edit_css_examine_computed_css>`. *Truncate DOM attributes* By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference ``devtools.markup.collapseAttributes``. To change the threshold at which attributes are truncated, you can edit the about:config preference ``devtools.markup.collapseAttributeLength``. diff --git a/devtools/docs/user/style_editor/index.rst b/devtools/docs/user/style_editor/index.rst @@ -63,10 +63,10 @@ The At-rules sidebar The Style Editor displays a sidebar on the right-hand side whenever the current sheet contains any of the following At-rules: -- `@media <https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries>`_ -- `@supports <https://developer.mozilla.org/en-US/docs/Web/CSS/@supports>`_ -- `@layer <https://developer.mozilla.org/en-US/docs/Web/CSS/@layer>`_ -- `@container <https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries>`_ +- `@media <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media>`_ +- `@supports <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@supports>`_ +- `@layer <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@layer>`_ +- `@container <https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container>`_ The sidebar lists the rules and provides a link to the line of the sheet where the rule is defined. Click an item to jump to that rule in the sheet. For ``@media`` rules, the condition text of the rule is greyed-out if the media query doesn’t currently apply.