diff --git a/files/en-us/web/css/guides/animations/using/index.md b/files/en-us/web/css/guides/animations/using/index.md index 8283ccc2113b83e..625e6bc4fded143 100644 --- a/files/en-us/web/css/guides/animations/using/index.md +++ b/files/en-us/web/css/guides/animations/using/index.md @@ -10,7 +10,7 @@ sidebar: cssref There are three key advantages to CSS animations over traditional script-driven animation techniques: -1. They're easy to use for basic animations; you can create them without even having to know JavaScript. +1. With just a few lines of you define basic animations; you can create them without even having to know JavaScript. 2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible. 3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible. diff --git a/files/en-us/web/css/guides/box_alignment/overview/index.md b/files/en-us/web/css/guides/box_alignment/overview/index.md index 710c85d7024552a..bd8ba00b9d16d60 100644 --- a/files/en-us/web/css/guides/box_alignment/overview/index.md +++ b/files/en-us/web/css/guides/box_alignment/overview/index.md @@ -36,7 +36,7 @@ When aligning items on the block axis you will use the properties that begin wit - {{cssxref("align-self")}} - {{cssxref("align-content")}} -Flexbox adds an additional complication in that the above is true when {{cssxref("flex-direction")}} is set to `row`. The properties are swapped when flexbox is set to `column`. Therefore, when working with flexbox it is easier to think about the main and cross axis rather than inline and block. The `justify-` properties are always used to align on the main axis, the `align-` properties on the cross axis. +Flexbox adds an additional complication in that the above is true when {{cssxref("flex-direction")}} is set to `row`. The properties are swapped when flexbox is set to `column`. Therefore, when working with flexbox it is generally easier to think about the main and cross axis rather than inline and block. The `justify-` properties are always used to align on the main axis, the `align-` properties on the cross axis. ### The alignment subject diff --git a/files/en-us/web/css/guides/colors/color_values/index.md b/files/en-us/web/css/guides/colors/color_values/index.md index 4c6c203cd697e02..11f4e68ff4029f3 100644 --- a/files/en-us/web/css/guides/colors/color_values/index.md +++ b/files/en-us/web/css/guides/colors/color_values/index.md @@ -145,7 +145,7 @@ The color functions that have a [``](/en-US/docs/Web/CSS/Reference/Values/h ### HSL functional notation -The `hsl()` CSS color function was the first hue-based color function to be supported in browsers. `hsl()` is more intuitive than `rgb()` — it is easier to determine the effect of varying hue (`h`), saturation (`s`), and lightness (`l`) values than it is to declare specific colors via red, green, and blue channel values. In addition, HSL is similar to the HSB (hue, saturation, and brightness) color picker in Photoshop, which made it immediately familiar to many people when first supported. +The `hsl()` CSS color function was the first hue-based color function to be supported in browsers. `hsl()` is more intuitive than `rgb()` — it is generally easier to determine the effect of varying hue (`h`), saturation (`s`), and lightness (`l`) values than it is to declare specific colors via red, green, and blue channel values. In addition, HSL is similar to the HSB (hue, saturation, and brightness) color picker in Photoshop, which made it immediately familiar to many people when first supported. The `hsl()` and `hwb()` sRGB color functions are both cylindrical. Hue defines the color as an [``](/en-US/docs/Web/CSS/Reference/Values/angle) on a circular {{glossary("color wheel")}}. The diagram below shows an HSL color cylinder. Saturation is a percentage that defines how far the color is along a scale between completely grayscale and having the maximum possible amount of the given hue. As the value of lightness increases, the color transitions from the darkest to the lightest possible color (from black to white). diff --git a/files/en-us/web/css/guides/colors/using_relative_colors/index.md b/files/en-us/web/css/guides/colors/using_relative_colors/index.md index ec2da21190b6daf..64149dde00ea9c4 100644 --- a/files/en-us/web/css/guides/colors/using_relative_colors/index.md +++ b/files/en-us/web/css/guides/colors/using_relative_colors/index.md @@ -5,7 +5,7 @@ page-type: guide sidebar: cssref --- -The [CSS colors module](/en-US/docs/Web/CSS/Guides/Colors) defines **relative color syntax**, which allows a CSS {{cssxref("<color>")}} value to be defined relative to another color. This is a powerful feature that enables easy creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation. +The [CSS colors module](/en-US/docs/Web/CSS/Guides/Colors) defines **relative color syntax**, which allows a CSS {{cssxref("<color>")}} value to be defined relative to another color. This is a powerful feature that enables the programmatic creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation. This article explains relative color syntax, shows what the different options are, and looks at some illustrative examples. @@ -373,7 +373,7 @@ This example allows you to choose a base color and a color palette type. The bro The full HTML is included below for reference. The most interesting parts are as follows: -- The `--base-color` custom property is stored as an inline [`style`](/en-US/docs/Web/HTML/Reference/Global_attributes/style) on the {{htmlelement("div")}} element with the ID of `container`. We've placed it there so it is easy to update the value using JavaScript. We've provided an initial value of `#ff0000` (`red`) to show a color palette based on that value when the example loads. Note that normally we'd probably set this on the {{htmlelement("html")}} element, but the MDN live sample was removing it when rendering. +- The `--base-color` custom property is stored as an inline [`style`](/en-US/docs/Web/HTML/Reference/Global_attributes/style) on the {{htmlelement("div")}} element with the ID of `container`. We've placed it there so we can update the value using JavaScript. We've provided an initial value of `#ff0000` (`red`) to show a color palette based on that value when the example loads. Note that normally we'd probably set this on the {{htmlelement("html")}} element, but the MDN live sample was removing it when rendering. - The base color picker is created using an [``](/en-US/docs/Web/HTML/Reference/Elements/input/color) control. When a new value is set in this control, the `--base-color` custom property is set to this value using JavaScript, which in turn generates a new color palette. All the displayed colors are relative colors based on `--base-color`. - The set of [``](/en-US/docs/Web/HTML/Reference/Elements/input/radio) controls enables choosing a color palette type to generate. When a new value is chosen here, JavaScript is used to set a new class on the `container` `
` to represent the chosen palette. In the CSS, descendant selectors are used to target the child `
`s (e.g., `.comp :nth-child(1)`) so they can have the correct colors applied to them and hide the unused `
` nodes. - The `container` `
` containing the child `
`s that display the colors of the generated palette. Note that an initial class of `comp` is set on it, so that the page will display a complementary color scheme when first loaded. diff --git a/files/en-us/web/css/guides/counter_styles/using_counters/index.md b/files/en-us/web/css/guides/counter_styles/using_counters/index.md index 445886e5e26cecc..999a08948af0567 100644 --- a/files/en-us/web/css/guides/counter_styles/using_counters/index.md +++ b/files/en-us/web/css/guides/counter_styles/using_counters/index.md @@ -131,7 +131,7 @@ A reversed counter is one that is intended to count down (decrement) rather than Reversed counters are created using the `reversed()` function notation when naming the counter in {{cssxref("counter-reset")}}. Reversed counters have a default initial value equal to the number of elements (unlike normal counters, which have a default value of 0). -This makes it easy to implement a counter that counts from the number of elements down to one. +This enables implementing a counter that counts from the number of elements down to one. For example, to create a reversed counter named `section` with a default initial value, you would use the following syntax: diff --git a/files/en-us/web/css/guides/display/block_and_inline_layout/index.md b/files/en-us/web/css/guides/display/block_and_inline_layout/index.md index 6a53d450c43be91..7cbb9c996021c1e 100644 --- a/files/en-us/web/css/guides/display/block_and_inline_layout/index.md +++ b/files/en-us/web/css/guides/display/block_and_inline_layout/index.md @@ -255,7 +255,7 @@ strong { ## Summary -In this guide, we have looked at how elements display in normal flow, as block and inline elements. Due to the default behavior of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will find layout easier, as you understand the starting point for making changes to how elements are displayed. +In this guide, we have looked at how elements display in normal flow, as block and inline elements. Due to the default behavior of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will better understand layout, which is an important starting point when making changes to how elements are displayed. ## See also diff --git a/files/en-us/web/css/guides/display/flow_layout_and_overflow/index.md b/files/en-us/web/css/guides/display/flow_layout_and_overflow/index.md index 2c3857d24b86614..3050889b881134d 100644 --- a/files/en-us/web/css/guides/display/flow_layout_and_overflow/index.md +++ b/files/en-us/web/css/guides/display/flow_layout_and_overflow/index.md @@ -263,7 +263,7 @@ This is useful in the situation where you have a listing of articles, for exampl ## Summary -Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox. +Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. When you understand how overflow works in normal flow, you will be better able to understand the implications of overflow content in layout methods such as grid and flexbox. ## See also diff --git a/files/en-us/web/css/guides/display/flow_layout_and_writing_modes/index.md b/files/en-us/web/css/guides/display/flow_layout_and_writing_modes/index.md index 8e21cd502e02842..19d0d39fe9bb48d 100644 --- a/files/en-us/web/css/guides/display/flow_layout_and_writing_modes/index.md +++ b/files/en-us/web/css/guides/display/flow_layout_and_writing_modes/index.md @@ -177,7 +177,7 @@ body { {{EmbedLiveSample("inline-change-mode", "", "240px")}} -A block-level box will establish a new block formatting context, meaning that if its inner display type would be `flow`, it will get a computed display type of `flow-root`. This is shown in the next example where the box which displays as `horizontal-tb` contains a float which is contained due to its parent establishing a new BFC. +A block-level box will establish a new [block formatting context (BFC)](/en-US/docs/Web/CSS/Guides/Display/Block_formatting_context), meaning that if its inner display type would be `flow`, it will get a computed display type of `flow-root`. This is shown in the next example where the box which displays as `horizontal-tb` contains a float which is contained due to its parent establishing a new BFC. ```html live-sample___block-change-mode
@@ -288,7 +288,7 @@ body { {{EmbedLiveSample("width")}} -Therefore, we have new properties of {{cssxref("block-size")}} and {{cssxref("inline-size")}}. If we give our block an `inline-size` of 100px, it doesn't matter whether we are in a horizontal or a vertical writing mode, `inline-size` will always mean the size in the inline direction. +Therefore, we have the properties of {{cssxref("block-size")}} and {{cssxref("inline-size")}}. If we give our block an `inline-size` of 100px, it doesn't matter whether we are in a horizontal or a vertical writing mode, `inline-size` will always mean the size in the inline direction. ```html live-sample___inline-size
@@ -321,7 +321,7 @@ The [CSS logical properties and values](/en-US/docs/Web/CSS/Guides/Logical_prope ## Summary -In most cases, flow layout works as you would expect it to when changing the writing mode of the document or parts of the document. This can be used to properly typeset vertical languages or for creative reasons. CSS is making this easier by way of introducing logical properties and values so that when working in a vertical writing mode sizing can be based on element's inline and block size. This will be useful when creating components which can work in different writing-modes. +In most cases, flow layout works as you would expect it to when changing the writing mode of the document or parts of the document. This can be used to properly typeset vertical languages or for creative reasons. With CSS logical properties and values, vertical writing mode sizing can be based on element's inline and block size. This is useful when creating components which can work in different writing-modes. ## See also diff --git a/files/en-us/web/css/guides/flexible_box_layout/relationship_with_other_layout_methods/index.md b/files/en-us/web/css/guides/flexible_box_layout/relationship_with_other_layout_methods/index.md index 2c4e0c40764e97b..a04a898f25eb5be 100644 --- a/files/en-us/web/css/guides/flexible_box_layout/relationship_with_other_layout_methods/index.md +++ b/files/en-us/web/css/guides/flexible_box_layout/relationship_with_other_layout_methods/index.md @@ -181,7 +181,7 @@ The `contents` value of the {{cssxref("display")}} property is described in the > "The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree." -This value of `display` controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is much easier to see with an example. +This value of `display` controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is easier to see with an example. In the following live example, we have a flex container containing three flex items. One has two elements nested inside it, which would not ordinarily participate in flex layout. Flex layout only applies to the direct children of a flex container. diff --git a/files/en-us/web/css/guides/flexible_box_layout/use_cases/index.md b/files/en-us/web/css/guides/flexible_box_layout/use_cases/index.md index a01daa03433159e..2fc4622ebd8d79b 100644 --- a/files/en-us/web/css/guides/flexible_box_layout/use_cases/index.md +++ b/files/en-us/web/css/guides/flexible_box_layout/use_cases/index.md @@ -374,7 +374,7 @@ img { Flexbox is particularly useful when it comes to styling form controls. Forms have several small elements that we typically want to align with each other. A common pattern is to have a {{htmlelement("label")}} and {{htmlelement("input")}} pair combined with a {{htmlelement("button")}}, perhaps for a search form or a newsletter sign-up form where you want your visitor to enter their email address. -Flexbox makes this type of layout easy to achieve. The `