From f44bb82bb93c4721349007b3ffeb0f2a7cdbd517 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 12 Nov 2024 16:05:12 -0800 Subject: [PATCH] Remove simple 3: change to basic --- files/en-us/web/css/attr/index.md | 2 +- files/en-us/web/css/counter/index.md | 2 +- files/en-us/web/css/justify-items/index.md | 4 ++-- files/en-us/web/css/justify-self/index.md | 4 ++-- files/en-us/web/css/place-self/index.md | 4 ++-- files/en-us/web/css/scroll-margin-inline-end/index.md | 6 +++--- files/en-us/web/css/scroll-margin-inline-start/index.md | 6 +++--- files/en-us/web/css/scroll-margin-inline/index.md | 6 +++--- files/en-us/web/css/scroll-margin/index.md | 6 +++--- files/en-us/web/css/shape-outside/index.md | 2 +- files/en-us/web/css/string/index.md | 2 +- files/en-us/web/css/text-indent/index.md | 4 ++-- files/en-us/web/css/text-shadow/index.md | 4 ++-- files/en-us/web/css/text-underline-position/index.md | 6 +++--- files/en-us/web/css/transition-behavior/index.md | 2 +- files/en-us/web/css/tutorials/index.md | 2 +- files/en-us/web/css/url_function/index.md | 2 +- files/en-us/web/css/var/index.md | 2 +- 18 files changed, 33 insertions(+), 33 deletions(-) diff --git a/files/en-us/web/css/attr/index.md b/files/en-us/web/css/attr/index.md index bcf670d6c9e8976..6eec14c19444bb8 100644 --- a/files/en-us/web/css/attr/index.md +++ b/files/en-us/web/css/attr/index.md @@ -17,7 +17,7 @@ The **`attr()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_F ## Syntax ```css -/* Simple usage */ +/* Basic usage */ attr(data-count); attr(title); diff --git a/files/en-us/web/css/counter/index.md b/files/en-us/web/css/counter/index.md index 47f902033e4f37d..6d773dd37628905 100644 --- a/files/en-us/web/css/counter/index.md +++ b/files/en-us/web/css/counter/index.md @@ -16,7 +16,7 @@ The `counter()` function is generally used within [pseudo-element](/en-US/docs/W ## Syntax ```css -/* Simple usage */ +/* Basic usage */ counter(counter-name); /* changing the counter display */ diff --git a/files/en-us/web/css/justify-items/index.md b/files/en-us/web/css/justify-items/index.md index 3bb48b9f4aca18c..2874c0b27f5805d 100644 --- a/files/en-us/web/css/justify-items/index.md +++ b/files/en-us/web/css/justify-items/index.md @@ -118,7 +118,7 @@ This property can take one of four different forms: ## Examples -### Simple demonstration +### Basic demonstration In the following example, we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` (the default), which causes the grid items to stretch across the entire width of their cells. @@ -175,7 +175,7 @@ span { #### Result -{{EmbedLiveSample('Simple_demonstration', '100%', 200)}} +{{EmbedLiveSample('Basic_demonstration', '100%', 200)}} ## Specifications diff --git a/files/en-us/web/css/justify-self/index.md b/files/en-us/web/css/justify-self/index.md index 657c03ab7250ac3..599d95271ce8e33 100644 --- a/files/en-us/web/css/justify-self/index.md +++ b/files/en-us/web/css/justify-self/index.md @@ -119,7 +119,7 @@ This property can take one of three different forms: ## Examples -### Simple demonstration +### Basic demonstration In the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` — the default — which causes the grid items to stretch across the entire width of their cells. @@ -183,7 +183,7 @@ span { #### Result -{{EmbedLiveSample('Simple_demonstration', '100%', 200)}} +{{EmbedLiveSample('Basic_demonstration', '100%', 200)}} ## Specifications diff --git a/files/en-us/web/css/place-self/index.md b/files/en-us/web/css/place-self/index.md index ef95f717b046289..45bb89dccc9d189 100644 --- a/files/en-us/web/css/place-self/index.md +++ b/files/en-us/web/css/place-self/index.md @@ -89,7 +89,7 @@ place-self: unset; ## Examples -### Simple demonstration +### Basic demonstration In the following example we have a simple 2 x 2 grid layout. Initially the grid container has [`justify-items`](/en-US/docs/Web/CSS/justify-items) and [`align-items`](/en-US/docs/Web/CSS/align-items) values of `stretch` — the defaults — which causes the grid items to stretch across the entire width of their cells. @@ -152,7 +152,7 @@ span { #### Result -{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} +{{EmbedLiveSample('Basic_demonstration', '100%', 300)}} ## Specifications diff --git a/files/en-us/web/css/scroll-margin-inline-end/index.md b/files/en-us/web/css/scroll-margin-inline-end/index.md index 4dcd8c4108edd02..8f4e3b5cb54e263 100644 --- a/files/en-us/web/css/scroll-margin-inline-end/index.md +++ b/files/en-us/web/css/scroll-margin-inline-end/index.md @@ -41,7 +41,7 @@ scroll-margin-inline-end: unset; ## Examples -### Simple demonstration +### Basic demonstration This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. @@ -49,7 +49,7 @@ The aim here is to create four horizontally-scrolling blocks, the second and thi #### HTML -The HTML that represents the blocks is very simple: +The HTML includes a scroller with four children: ```html
@@ -120,7 +120,7 @@ This means that when scrolling past the middle child elements, the scrolling wil Try it for yourself: -{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} +{{EmbedLiveSample('Basic_demonstration', '100%', 300)}} ## Specifications diff --git a/files/en-us/web/css/scroll-margin-inline-start/index.md b/files/en-us/web/css/scroll-margin-inline-start/index.md index 136d137d712114b..c0400d5927de94b 100644 --- a/files/en-us/web/css/scroll-margin-inline-start/index.md +++ b/files/en-us/web/css/scroll-margin-inline-start/index.md @@ -41,7 +41,7 @@ scroll-margin-inline-start: unset; ## Examples -### Simple demonstration +### Basic demonstration This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. @@ -49,7 +49,7 @@ The aim here is to create four horizontally-scrolling blocks, the second and thi #### HTML -The HTML that represents the blocks is very simple: +The HTML includes a scroller with four children: ```html
@@ -120,7 +120,7 @@ This means that when scrolling past the middle child elements, the scrolling wil Try it for yourself: -{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} +{{EmbedLiveSample('Basic_demonstration', '100%', 300)}} ## Specifications diff --git a/files/en-us/web/css/scroll-margin-inline/index.md b/files/en-us/web/css/scroll-margin-inline/index.md index 6ae138b90e32696..dca90ceaa677676 100644 --- a/files/en-us/web/css/scroll-margin-inline/index.md +++ b/files/en-us/web/css/scroll-margin-inline/index.md @@ -52,7 +52,7 @@ The scroll-margin values represent outsets defining the scroll snap area that is ## Examples -### Simple demonstration +### Basic demonstration This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. @@ -60,7 +60,7 @@ The aim here is to create four horizontally-scrolling blocks, the second and thi #### HTML -The HTML that represents the blocks is very simple: +The HTML includes a scroller with four children: ```html
@@ -134,7 +134,7 @@ This means that when scrolling past the middle child elements, the scrolling wil Try it for yourself: -{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} +{{EmbedLiveSample('Basic_demonstration', '100%', 300)}} ## Specifications diff --git a/files/en-us/web/css/scroll-margin/index.md b/files/en-us/web/css/scroll-margin/index.md index 91f64220f3c496a..e35ff44d5648ac8 100644 --- a/files/en-us/web/css/scroll-margin/index.md +++ b/files/en-us/web/css/scroll-margin/index.md @@ -56,7 +56,7 @@ Thus, the `scroll-margin` values represent outsets defining the scroll snap area ## Examples -### Simple demonstration +### Basic demonstration This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented. @@ -64,7 +64,7 @@ The aim here is to create four horizontally-scrolling blocks, the second and thi #### HTML -The HTML that represents the blocks is very simple: +The HTML includes a scroller with four children: ```html
@@ -138,7 +138,7 @@ This means that when scrolling past the middle child elements, the scrolling wil Try it for yourself: -{{EmbedLiveSample('Simple_demonstration', '100%', 300)}} +{{EmbedLiveSample('Basic_demonstration', '100%', 300)}} ## Specifications diff --git a/files/en-us/web/css/shape-outside/index.md b/files/en-us/web/css/shape-outside/index.md index 88db83877ea23fc..61e5183db753625 100644 --- a/files/en-us/web/css/shape-outside/index.md +++ b/files/en-us/web/css/shape-outside/index.md @@ -7,7 +7,7 @@ browser-compat: css.properties.shape-outside {{CSSRef}} -The **`shape-outside`** [CSS](/en-US/docs/Web/CSS) property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; `shape-outside` provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes. +The **`shape-outside`** [CSS](/en-US/docs/Web/CSS) property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; `shape-outside` provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than rectangular boxes. {{EmbedInteractiveExample("pages/css/shape-outside.html")}} diff --git a/files/en-us/web/css/string/index.md b/files/en-us/web/css/string/index.md index 05143ac01b7eb58..ab8c910fe3a2f3d 100644 --- a/files/en-us/web/css/string/index.md +++ b/files/en-us/web/css/string/index.md @@ -28,7 +28,7 @@ However, to get new lines, you must also set the {{cssxref("white-space")}} prop ### Examples of valid strings ```css -/* Simple strings */ +/* Basic strings */ "This string is demarcated by double quotes." 'This string is demarcated by single quotes.' diff --git a/files/en-us/web/css/text-indent/index.md b/files/en-us/web/css/text-indent/index.md index d3af93af816efa6..3a1b04e5e0bd039 100644 --- a/files/en-us/web/css/text-indent/index.md +++ b/files/en-us/web/css/text-indent/index.md @@ -58,7 +58,7 @@ text-indent: unset; ## Examples -### Simple indent +### Basic indent #### HTML @@ -84,7 +84,7 @@ p { #### Result -{{ EmbedLiveSample('Simple_indent','100%','100%') }} +{{ EmbedLiveSample('Basic_indent','100%','100%') }} ### Skipping indentation on the first paragraph diff --git a/files/en-us/web/css/text-shadow/index.md b/files/en-us/web/css/text-shadow/index.md index 547cd48a19b8e92..22693c0d5175a1a 100644 --- a/files/en-us/web/css/text-shadow/index.md +++ b/files/en-us/web/css/text-shadow/index.md @@ -65,7 +65,7 @@ This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first ## Examples -### Simple shadow +### Basic shadow ```css .red-text-shadow { @@ -80,7 +80,7 @@ This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first

``` -{{EmbedLiveSample('Simple_shadow', '660px', '90px')}} +{{EmbedLiveSample('Basic_shadow', '660px', '90px')}} ### Multiple shadows diff --git a/files/en-us/web/css/text-underline-position/index.md b/files/en-us/web/css/text-underline-position/index.md index 610b5ab2b7c4664..49a074c693e23d5 100644 --- a/files/en-us/web/css/text-underline-position/index.md +++ b/files/en-us/web/css/text-underline-position/index.md @@ -55,9 +55,9 @@ text-underline-position: unset; ## Examples -### A simple example +### A basic example -Let's take a couple of simple example paragraphs: +We create two example paragraphs: ```html

@@ -99,7 +99,7 @@ In the text with a vertical [`writing-mode`](/en-US/docs/Web/CSS/writing-mode) s The live example looks like this: -{{EmbedLiveSample('A_simple_example', '100%', 600)}} +{{EmbedLiveSample('A_basic_example', '100%', 600)}} ### Setting text-underline-position globally diff --git a/files/en-us/web/css/transition-behavior/index.md b/files/en-us/web/css/transition-behavior/index.md index 060ccb4525ddb52..8cbc33f41c11c70 100644 --- a/files/en-us/web/css/transition-behavior/index.md +++ b/files/en-us/web/css/transition-behavior/index.md @@ -152,7 +152,7 @@ The two properties we want to animate are [`opacity`](/en-US/docs/Web/CSS/opacit Because the animated element is being promoted to the [top layer](/en-US/docs/Glossary/Top_layer) when shown and removed from the top layer when hidden — which also means that its hidden state has [`display: none`](/en-US/docs/Web/CSS/display) set on it — the following properties are added to the list of transitioned elements to get the animation working in both directions. In both cases, `transition-behavior: allow-discrete` is set in the shorthand to enable discrete animation. - `display`: Required so that the animated element is visible (set to `display: block`) throughout both the entry and exit animation. Without this, the exit animation would not be visible; in effect, the popover would just disappear. -- [`overlay`](/en-US/docs/Web/CSS/overlay): Required to make sure that the removal of the element from the top layer is deferred until the animation has been completed. This doesn't make a huge difference for simple animations such as this one, but in more complex cases not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. +- [`overlay`](/en-US/docs/Web/CSS/overlay): Required to make sure that the removal of the element from the top layer is deferred until the animation has been completed. This doesn't make a huge difference for basic animations such as this one, but in more complex cases not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective. In addition, a starting state for the animation is set inside the [`@starting-style`](/en-US/docs/Web/CSS/@starting-style) at-rule. This is needed to avoid unexpected behavior. By default transitions are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type. `@starting-style` allows you to override that default in a specific controlled fashion. Without this, the entry animation would not occur and the popover would just appear. diff --git a/files/en-us/web/css/tutorials/index.md b/files/en-us/web/css/tutorials/index.md index 876b83f82c11096..e5b8668c9e8644e 100644 --- a/files/en-us/web/css/tutorials/index.md +++ b/files/en-us/web/css/tutorials/index.md @@ -22,7 +22,7 @@ They are grouped by complexity so that you can choose the most appropriate for y - : Backgrounds are fundamental for nice styling: CSS allows you to set several of them on each box. This tutorial explains how they interact and how to achieve nice effects. - [Resizing background images](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images) - : CSS allows you to resize images used as an element's background. - This tutorial describes how to achieve this in a simple way. + This tutorial describes how to achieve this. - [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries) - : The size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays. Media queries are the fundamental building blocks in building websites that render everywhere in their best quality. diff --git a/files/en-us/web/css/url_function/index.md b/files/en-us/web/css/url_function/index.md index 5891aea02ee69cb..807982490e3effe 100644 --- a/files/en-us/web/css/url_function/index.md +++ b/files/en-us/web/css/url_function/index.md @@ -15,7 +15,7 @@ The **`url()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Fu > In CSS Level 1, the `url()` functional notation described only true URLs. In CSS Level 2, the definition of `url()` was extended to describe any URI, whether a URL or a URN. Confusingly, this meant that `url()` could be used to create a `` CSS data type. This change was not only awkward but, debatably, unnecessary, since URNs are almost never used in actual CSS. To alleviate the confusion, CSS Level 3 returned to the narrower, initial definition. Now, `url()` denotes only true ``s. ```css -/* Simple usage */ +/* Basic usage */ url("https://example.com/images/myImg.jpg"); url('https://example.com/images/myImg.jpg'); url(https://example.com/images/myImg.jpg); diff --git a/files/en-us/web/css/var/index.md b/files/en-us/web/css/var/index.md index 94ca09431dbd7bb..640bcce5a391ebc 100644 --- a/files/en-us/web/css/var/index.md +++ b/files/en-us/web/css/var/index.md @@ -16,7 +16,7 @@ The `var()` function cannot be used in property names, selectors or anything els ## Syntax ```css -/* Simple usage */ +/* Basic usage */ var(--custom-prop); /* With fallback */