diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/add-a-class-to-me-styles-cls.png b/microsoft-edge/devtools-guide-chromium/css/index-images/add-a-class-to-me-styles-cls.png new file mode 100644 index 0000000000..cdc5c7ea52 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/add-a-class-to-me-styles-cls.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/add-background-color-to-me-styles-p.png b/microsoft-edge/devtools-guide-chromium/css/index-images/add-background-color-to-me-styles-p.png new file mode 100644 index 0000000000..ddccd630dc Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/add-background-color-to-me-styles-p.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/change-my-margin-styles-margin-edit.png b/microsoft-edge/devtools-guide-chromium/css/index-images/change-my-margin-styles-margin-edit.png new file mode 100644 index 0000000000..2d354b0877 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/change-my-margin-styles-margin-edit.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/change-my-margin-styles-padding.png b/microsoft-edge/devtools-guide-chromium/css/index-images/change-my-margin-styles-padding.png new file mode 100644 index 0000000000..9686d6da1b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/change-my-margin-styles-padding.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-add-a-class-to-me-styles-cls.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-add-a-class-to-me-styles-cls.png deleted file mode 100644 index 2b0b1d3354..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-add-a-class-to-me-styles-cls.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-add-background-color-to-me-styles-p.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-add-background-color-to-me-styles-p.png deleted file mode 100644 index de0ad2edfa..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-add-background-color-to-me-styles-p.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-change-my-margin-styles-margin-edit.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-change-my-margin-styles-margin-edit.png deleted file mode 100644 index 2acd63f95f..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-change-my-margin-styles-margin-edit.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-change-my-margin-styles-padding.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-change-my-margin-styles-padding.png deleted file mode 100644 index b789b18cca..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-change-my-margin-styles-padding.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-hover-over-me-styles-hov-hover.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-hover-over-me-styles-hov-hover.png deleted file mode 100644 index 927a742fb1..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-hover-over-me-styles-hov-hover.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-inspect-me-styles.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-inspect-me-styles.png deleted file mode 100644 index c4d827cf94..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-inspect-me-styles.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-inspect-me.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-inspect-me.png deleted file mode 100644 index 5ad3cc0ee3..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-inspect-me.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-open-device-toolbar.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-open-device-toolbar.png deleted file mode 100644 index ece50f68c5..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-open-device-toolbar.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-reveal-in-sources.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-reveal-in-sources.png deleted file mode 100644 index c533567893..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-reveal-in-sources.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-select-bar.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-select-bar.png deleted file mode 100644 index 591871103a..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-select-bar.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-showing-mq.png b/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-showing-mq.png deleted file mode 100644 index 8112669030..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/css/index-images/css-elements-media-queries-showing-mq.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/hover-over-me-styles-hov-hover.png b/microsoft-edge/devtools-guide-chromium/css/index-images/hover-over-me-styles-hov-hover.png new file mode 100644 index 0000000000..3a6d8704f0 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/hover-over-me-styles-hov-hover.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/inspect-me-styles.png b/microsoft-edge/devtools-guide-chromium/css/index-images/inspect-me-styles.png new file mode 100644 index 0000000000..42a6ac33cb Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/inspect-me-styles.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/inspect-me.png b/microsoft-edge/devtools-guide-chromium/css/index-images/inspect-me.png new file mode 100644 index 0000000000..1b7d015052 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/inspect-me.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-open-device-toolbar.png b/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-open-device-toolbar.png new file mode 100644 index 0000000000..787aca9bd5 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-open-device-toolbar.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-reveal-in-sources.png b/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-reveal-in-sources.png new file mode 100644 index 0000000000..de95643697 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-reveal-in-sources.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-select-bar.png b/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-select-bar.png new file mode 100644 index 0000000000..fc0e596eac Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-select-bar.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-showing-mq.png b/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-showing-mq.png new file mode 100644 index 0000000000..842b70f49b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/media-queries-showing-mq.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index-images/more-options-icon.png b/microsoft-edge/devtools-guide-chromium/css/index-images/more-options-icon.png new file mode 100644 index 0000000000..1be8a8076e Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/css/index-images/more-options-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/css/index.md b/microsoft-edge/devtools-guide-chromium/css/index.md index 1d6a3cb7e2..6b37fa7807 100644 --- a/microsoft-edge/devtools-guide-chromium/css/index.md +++ b/microsoft-edge/devtools-guide-chromium/css/index.md @@ -5,7 +5,7 @@ author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.prod: microsoft-edge -ms.date: 11/16/2022 +ms.date: 10/19/2023 --- # Get started viewing and changing CSS -Follow the interactive tutorial sections in this article to learn the basics of using DevTools to view and change the CSS for a page. +To learn the basics of using DevTools to view and change the CSS for a page, follow the interactive tutorial sections in this article. ## View the CSS for an element -1. Open the [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo page in a new window or tab. To open the examples, right-click the link, or press and hold **Ctrl** (for Windows, Linux) or **Command** (for macOS) and then click the link. +1. Open the [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo page in a new window or tab. (To open a link in a new window or tab, right-click the link. Or, press and hold **Ctrl** (for Windows, Linux) or **Command** (for macOS) and then click the link.) 1. Right-click the `Inspect Me!` text, and then select **Inspect**. - In the **DOM Tree** panel under the **Elements tool**, the `Inspect Me!` element is highlighted. + In the **DOM Tree** panel under the **Elements tool**, the `Inspect Me!` element is highlighted: - ![The inspected element is highlighted in the DOM Tree](./index-images/css-elements-inspect-me.png) + ![The inspected element is highlighted in the DOM Tree](./index-images/inspect-me.png) 1. In the `Inspect Me!` element, find the value of the `data-message` attribute and copy it. -1. On the page view, enter the `data-message` value that you copied in the **Value of data-message:** text box. +1. On the page view, enter the `data-message` value that you copied in the **Value of data-message** text box. 1. Right-click the `Inspect Me!` text, and then select **Inspect**. @@ -48,11 +48,11 @@ Follow the interactive tutorial sections in this article to learn the basics of 1. In the `Inspect Me!` element, find the `aloha` class rule. This rule is displayed, because it's being applied to the `Inspect Me!` element. -1. In the `aloha` class, find the value for the `padding` style and copy it. +1. In the `aloha` class, find the value for the `padding` style and copy it: - ![CSS class applied to the inspected element is highlighted in the Styles panel](./index-images/css-elements-inspect-me-styles.png) + ![CSS class applied to the inspected element is highlighted in the Styles panel](./index-images/inspect-me-styles.png) -1. On the page view, paste the `padding` value in the **Value of padding:** text box. +1. On the page view, paste the `padding` value in the **Value of padding** text box. @@ -70,11 +70,11 @@ Use the **Styles** panel when you want to change or add CSS declarations to an e 1. Type `background-color` or select it from the drop-down list and then press **Enter**. -1. Type `honeydew` or select it from the drop-down list of colors and then press **Enter**. After you pick a color, an inline style declaration that's applied to the element is displayed In the **DOM Tree**, +1. Type `honeydew` or select it from the drop-down list of colors and then press **Enter**. After you pick a color, an inline style declaration that's applied to the element is displayed in the **DOM Tree**. The `background-color:honeydew` declaration is applied to the element using the `element.style` section of the **Styles** panel: - ![Add a CSS declaration to the element using the Styles panel](./index-images/css-elements-add-background-color-to-me-styles-p.png) + ![Add a CSS declaration to the element by using the Styles panel](./index-images/add-background-color-to-me-styles-p.png) @@ -88,13 +88,13 @@ To display how an element looks when a CSS class is applied to or removed from a 1. Right-click the `Add A Class To Me!` text, and then select **Inspect**. -1. Click **.cls**. DevTools shows a text box where you can add CSS classes to the page element that you're inspecting. +1. Click the **Element Classes** (**.cls**) button. DevTools shows a text box where you can add CSS classes to the page element that you're inspecting. -1. Type `color_me` in the **Add new class** text box and then press **Enter**. A checkbox appears below the **Add new class** text box, where you can toggle the class on and off. If the `Add A Class To Me!` element has any other classes applied to it, you can also toggle each class from here. +1. Type `color_me` in the **Add new class** text box, and then press **Enter**. A checkbox appears below the **Add new class** text box, where you can toggle the class on and off. If the `Add A Class To Me!` element has any other classes applied to it, you can also toggle each class from here. The `color_me` class is applied to the element using the **.cls** section of the **Styles** panel: - ![Apply the color_me class to the element](./index-images/css-elements-add-a-class-to-me-styles-cls.png) + ![Apply the color_me class to the element](./index-images/add-a-class-to-me-styles-cls.png) @@ -106,17 +106,17 @@ Use the **Styles** panel to permanently apply a CSS pseudostate to an element. 1. Open the [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo page in a new window or tab. -1. Hover on the `Hover Over Me!` text. The background color changes. +1. Hover over the `Hover Over Me!` text. The background color changes. 1. Right-click the `Hover Over Me!` text, and then select **Inspect**. -1. In the **Styles** panel, click **:hov**. +1. In the **Styles** panel, click the **Toggle Element State** (**:hov**) button. 1. Select the **:hover** checkbox. The background color changes like it did in the first step, even though you aren't actually hovering over the element. The next screenshot shows the result of toggling the `:hover` pseudostate on an element. - ![Toggling the hover pseudostate on an element](./index-images/css-elements-hover-over-me-styles-hov-hover.png) + ![Toggling the hover pseudostate on an element](./index-images/hover-over-me-styles-hov-hover.png) @@ -130,7 +130,7 @@ Use the **Box Model** interactive diagram in the **Styles** panel to change the 1. Right-click the `Change My Margin!` text, and then select **Inspect**. -1. In the **Box Model** diagram in the **Styles** panel, hover on **padding**. The element's padding is highlighted in the viewport. +1. In the **Box Model** diagram in the **Styles** panel, hover over **padding**. The element's padding is highlighted in the viewport. Depending on the size of your DevTools window, you may need to scroll to the bottom of the **Styles** panel to display the **Box Model**. @@ -140,43 +140,45 @@ Use the **Box Model** interactive diagram in the **Styles** panel to change the Hovering over the element's padding: - ![Hovering over the element's padding](./index-images/css-elements-change-my-margin-styles-padding.png) + ![Hovering over the element's padding](./index-images/change-my-margin-styles-padding.png) Changing the element's left margin: - ![Changing the element's left margin](./index-images/css-elements-change-my-margin-styles-margin-edit.png) + ![Changing the element's left margin](./index-images/change-my-margin-styles-margin-edit.png) -## Debugging media queries +## Debug media queries CSS [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries/Using_media_queries) are a way to make your website react to changes in the configuration settings for each user. The most common use case is to give your page a different CSS layout depending on the dimensions of the viewport. Using separate layouts allows for a one-column layout for mobile devices and multi-column layouts when there's more screen real estate available. -Use the following steps to debug or test the media queries that you defined in your CSS. +To debug or test the media queries that you defined in your CSS: -1. To open DevTools, you can right-click in a webpage and then select **Inspect**. +1. Open the [CSS Examples](https://microsoftedge.github.io/Demos/devtools-css-get-started/) demo page in a new window or tab. + +1. To open DevTools, right-click in the webpage and then select **Inspect**. 1. Click the **Toggle device emulation** (![Device Emulation icon](./index-images/device-emulation-icon-light-theme.png)) button. Or, when DevTools has focus, press **Ctrl+Shift+M** (Windows, Linux) or **Command+Shift+M** (macOS). - + The device toolbar opens in the webpage, and the webpage is now rendered within the Device Emulation pane: - ![Opening the device toolbar](./index-images/css-elements-media-queries-open-device-toolbar.png) + ![Opening the device toolbar](./index-images/media-queries-open-device-toolbar.png) -1. With the device toolbar open, click the **...** menu on the top-right and then select **Show media queries**: +1. With the device toolbar open, click the **More options** (![The more options icon](./index-images/more-options-icon.png)) button on the top-right, and then select **Show media queries**: - ![Showing media queries in the Device Toolbar](./index-images/css-elements-media-queries-showing-mq.png) + ![Showing media queries in the Device Toolbar](./index-images/media-queries-showing-mq.png) The colored bars above the webpage represent the different media queries. -1. Hover on the boundaries in the bars to display the values of the different media queries. Click each media query value to resize the web page to match. +1. Hover over the boundaries in the bars to display the values of the different media queries. Click each media query value to resize the web page to match. - ![Selecting a media query from the preview bar](./index-images/css-elements-media-queries-select-bar.png) + ![Selecting a media query from the preview bar](./index-images/media-queries-select-bar.png) -1. To debug media queries and open the CSS file in the **Sources** editor, right-click a bar segment, and then select **Reveal in source code**: +1. To open the CSS file that contains your media queries and edit their source code, right-click one of the colored bars and then select **Reveal in source code**. The **Sources** tool appears, and the corresponding media query is highlighted in the CSS file: - ![Showing media queries in the editor in the Sources tool](./index-images/css-elements-media-queries-reveal-in-sources.png) + ![Showing media queries in the editor in the Sources tool](./index-images/media-queries-reveal-in-sources.png) diff --git a/microsoft-edge/devtools-guide-chromium/device-mode/index.md b/microsoft-edge/devtools-guide-chromium/device-mode/index.md index 483d97fb4f..d368f9be3e 100644 --- a/microsoft-edge/devtools-guide-chromium/device-mode/index.md +++ b/microsoft-edge/devtools-guide-chromium/device-mode/index.md @@ -108,7 +108,7 @@ To show media query breakpoints above the viewport: 1. To go to the corresponding `@media` declaration in the code for the webpage, right-click between breakpoint vertical bars, and then select **Reveal in source code**. DevTools opens the **Sources** tool and displays the corresponding `@media` line in the **Editor**. See also: -* [Debugging media queries](../css/index.md#debugging-media-queries) in _Get started viewing and changing CSS_. +* [Debug media queries](../css/index.md#debug-media-queries) in _Get started viewing and changing CSS_.