From dbc32052ef186252a1211d296ff60a9b5e3e8d74 Mon Sep 17 00:00:00 2001 From: Brian Smith Date: Wed, 27 Nov 2024 15:18:52 +0100 Subject: [PATCH 01/14] chore(css): Move CSS examples - Shapes, transforms, transition, display (#36740) * chore(css): Move CSS examples - Basic shapes with shape-outside * chore(css): Move CSS examples - Shapes from box values * chore(css): Move CSS examples - Overview of shapes * chore(css): Move CSS examples - Shapes from images * chore(css): Move CSS examples - CSS transforms * chore(css): Move CSS examples - Using CSS transitions * chore(css): Move CSS examples - Using the multi-keyword syntax with CSS display * chore(css): Move CSS examples - Fix shared assets URL * chore(css): Fixes following reviewer feedback --- .../web/css/css_shapes/basic_shapes/index.md | 242 ++++++- .../css/css_shapes/from_box_values/index.md | 191 +++++- .../css_shapes/overview_of_shapes/index.md | 245 ++++++- .../css_shapes/shapes_from_images/index.md | 214 +++++- files/en-us/web/css/css_transforms/index.md | 643 +++++++++++++++++- .../using_css_transitions/index.md | 60 +- .../multi-keyword_syntax_of_display/index.md | 114 +++- 7 files changed, 1659 insertions(+), 50 deletions(-) diff --git a/files/en-us/web/css/css_shapes/basic_shapes/index.md b/files/en-us/web/css/css_shapes/basic_shapes/index.md index 9141a813997492d..0a792c66afb0619 100644 --- a/files/en-us/web/css/css_shapes/basic_shapes/index.md +++ b/files/en-us/web/css/css_shapes/basic_shapes/index.md @@ -80,11 +80,81 @@ The above rules can therefore also be written as: In the example below we have an `inset()` shape used to pull content over the floated element. Change the offset values to see how the shape changes. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset.html", '100%', 800)}} +```html live-sample___inset +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___inset +body { + font: 1.2em sans-serif; +} + +.shape { + float: left; + width: 150px; + height: 100px; + shape-outside: inset(20px 50px 10px 0 round 50px); + background-color: rebeccapurple; + border: 2px solid black; + border-radius: 10px; + margin: 20px; + padding: 20px; +} +``` + +{{EmbedLiveSample("inset", "", "250px")}} You can also add a box value as an alternative reference box. In the example below, try changing the reference box from `margin-box` to `border-box`, `padding-box`, or `content-box` to see how the reference box used as the starting point changes before offsets are calculated. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/inset-box.html", '100%', 800)}} +```html hidden live-sample___inset-box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___inset-box +body { + font: 1.2em sans-serif; +} + +.shape { + float: left; + width: 150px; + height: 100px; + shape-outside: inset(20px 50px 10px 0 round 50px) margin-box; + background-color: rebeccapurple; + border: 2px solid black; + border-radius: 10px; + margin: 20px; + padding: 20px; +} +``` + +{{EmbedLiveSample("inset-box", "", "250px")}} You can also create rectangles based on distances from the top and left edges of the reference box with the [`rect()`](/en-US/docs/Web/CSS/basic-shape/rect) function, or by width and height with the [`xywh()`](/en-US/docs/Web/CSS/basic-shape/xywh) function; both of these also support optional rounded corners. @@ -100,13 +170,74 @@ The second argument is a `position`, which accepts a one- or two-keyword [`` means the radius is `125px`. The position value is set to `30%`, which is `30%` from the left and at the default vertical `center`. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle.html", '100%', 800)}} +```html live-sample___circle +
+ An orange hot air balloon as seen from below +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___circle +body { + font: 1.2em sans-serif; +} + +img { + float: left; + shape-outside: circle(50% at 30%); + margin: 20px; +} +``` + +{{EmbedLiveSample("circle", "", "250px")}} Play with increasing or decreasing the size of the circle by changing the size of the radius, moving the circle around with the position value, or setting a reference box as we did for `inset()`. The below example combines generated content with a `circle()` function that uses the keywords `top left` for position. This creates a quarter circle shape in the top left corner of the page for text to flow around. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/circle-generated.html", '100%', 700)}} +```html live-sample___circle-generated +
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___circle-generated +body { + font: 1.2em sans-serif; +} + +.box::before { + content: ""; + float: left; + width: 250px; + height: 250px; + shape-outside: circle(50% at top left); +} +``` + +{{EmbedLiveSample("circle-generated", "", "300px")}} ### The shape will be clipped by the margin box @@ -127,11 +258,72 @@ An ellipse is a squashed circle. As such, the [`ellipse()`](/en-US/docs/Web/CSS/ These may then be followed by one or two `` values, as with `circle()`, to define the location of the center of the ellipse. In the example below, we have an ellipse with an `x` radius of `40%`, a `y` radius of `50%` and the `` set to `left`. This means that the center of the ellipse is at the center of the left edge of the reference box. This creates a half ellipse shape around which the text will wrap. You can change these values to see how the ellipse changes. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse.html", '100%', 800)}} +```html live-sample___ellipse +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___ellipse +body { + font: 1.2em sans-serif; +} +.shape { + float: left; + shape-outside: ellipse(40% 50% at left); + margin: 20px; + width: 100px; + height: 200px; +} +``` + +{{EmbedLiveSample("ellipse", "", "300px")}} The keyword values of `closest-side` and `farthest-side` are useful in creating a quick ellipse based on the size of the floated element reference box. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/ellipse-keywords.html", '100%', 800)}} +```html hidden live-sample___ellipse-keywords +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___ellipse-keywords +body { + font: 1.2em sans-serif; +} + +.shape { + float: left; + shape-outside: ellipse(closest-side farthest-side at 30%); + margin: 20px; + width: 100px; + height: 140px; +} +``` + +{{EmbedLiveSample("ellipse-keywords", "", "250px")}} ## polygon() @@ -139,7 +331,43 @@ The [`polygon()`](/en-US/docs/Web/CSS/basic-shape/polygon) function is more comp The example below creates a shape for text to follow using the `polygon()` function. Try changing the coordinate values to see how the shape changes. -{{EmbedGHLiveSample("css-examples/shapes/basic-shape/polygon.html", '100%', 800)}} +```html hidden live-sample___polygon +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___polygon +body { + font: 1.2em sans-serif; +} + +.shape { + float: left; + shape-outside: polygon( + 0px 0px, + 0px 189px, + 100.48% 94.71%, + 200px 120px, + 80.67% 37.17% + ); + width: 200px; + height: 200px; +} +``` + +{{EmbedLiveSample("polygon", "", "250px")}} To create even more complex shapes, you can define the outline of any shape with the [`path()`](/en-US/docs/Web/CSS/basic-shape/path) or [`shape()`](/en-US/docs/Web/CSS/basic-shape/shape) functions. diff --git a/files/en-us/web/css/css_shapes/from_box_values/index.md b/files/en-us/web/css/css_shapes/from_box_values/index.md index 2678f28b983e0ab..c285b52019365c5 100644 --- a/files/en-us/web/css/css_shapes/from_box_values/index.md +++ b/files/en-us/web/css/css_shapes/from_box_values/index.md @@ -31,7 +31,39 @@ The `margin-box` is the shape defined by the outside margin edge and includes th In the example below, we have a circular purple item which is a {{htmlelement("div")}} with a height, width, and background color. The `border-radius` property has been used to create a circle by setting `border-radius: 50%`. As the element has a margin, you can see that the content is flowing around the circular shape and the margin applied to it. -{{EmbedGHLiveSample("css-examples/shapes/box/margin-box.html", '100%', 800)}} +```html live-sample___margin-box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

+
+``` + +```css live-sample___margin-box +body { + font: 1.2em sans-serif; +} + +.shape { + background-color: rebeccapurple; + height: 80px; + width: 80px; + padding: 20px; + margin: 20px; + border: 10px solid black; + border-radius: 50%; + float: left; + shape-outside: margin-box; +} +``` + +{{EmbedLiveSample("margin-box", "", "200px")}} ### border-box @@ -39,19 +71,124 @@ The `border-box` value is the shape defined by the outside border edge. This sha In the example below, you can see how the text now follows the line created by the border. Change the border size, and the content will follow it. -{{EmbedGHLiveSample("css-examples/shapes/box/border-box.html", '100%', 800)}} +```html hidden live-sample___border-box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

+
+``` + +```css live-sample___border-box +body { + font: 1.2em sans-serif; +} +.box { + width: 70%; +} + +.shape { + background-color: rebeccapurple; + height: 80px; + width: 80px; + padding: 20px; + margin: 20px; + border: 10px solid black; + border-radius: 50%; + float: left; + shape-outside: border-box; +} +``` + +{{EmbedLiveSample("border-box", "", "240px")}} ### padding-box The `padding-box` value defines the shape enclosed by the outside padding edge. This shape follows all of the normal border radius shaping rules for the inside of the border. If you have no padding then `padding-box` is the same as `content-box`. -{{EmbedGHLiveSample("css-examples/shapes/box/padding-box.html", '100%', 800)}} +```html hidden live-sample___padding-box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

+
+``` + +```css live-sample___padding-box +body { + font: 1.2em / 1.2 sans-serif; +} +.box { + width: 70%; +} + +.shape { + background-color: rebeccapurple; + height: 80px; + width: 80px; + padding: 20px; + margin: 20px; + border: 10px solid black; + border-radius: 50%; + float: left; + shape-outside: padding-box; +} +``` + +{{EmbedLiveSample("padding-box", "", "260px")}} ### content-box The `content-box` value defines the shape enclosed by the outside content edge. Each corner radius of this box is the `border-radius` less the `border-width` and `padding`, or `0`, whichever is larger. This means that it is impossible to have a negative value here. -{{EmbedGHLiveSample("css-examples/shapes/box/content-box.html", '100%', 800)}} +```html hidden live-sample___content-box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

+
+``` + +```css live-sample___content-box +body { + font: 1.2em / 1.2 sans-serif; +} +.box { + width: 70%; +} + +.shape { + background-color: rebeccapurple; + height: 80px; + width: 80px; + padding: 20px; + margin: 20px; + border: 10px solid black; + border-radius: 50%; + float: left; + shape-outside: content-box; +} +``` + +{{EmbedLiveSample("content-box", "", "250px")}} ## When to use box values @@ -59,6 +196,50 @@ Using box values is a simple way to create shapes; however, this is by nature on With just this basic technique, you can create some interesting effects. In my final example of this section, I have floated two elements left and right, giving each a border radius of 100% in the direction closest to the text. -{{EmbedGHLiveSample("css-examples/shapes/box/bottom-margin-box.html", '100%', 800)}} +```html live-sample___bottom-margin-box +
+
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. +

+
+``` + +```css live-sample___bottom-margin-box +body { + font: 1.2em / 1.5 sans-serif; +} + +.box { + text-align: justify; +} + +.shape-left, +.shape-right { + height: 100px; + width: 100px; +} + +.shape-left { + margin: 0 20px 20px 0; + border-bottom-right-radius: 100%; + float: left; + shape-outside: margin-box; +} +.shape-right { + margin: 0 20px 20px; + border-bottom-left-radius: 100%; + float: right; + shape-outside: margin-box; +} +``` + +{{EmbedLiveSample("bottom-margin-box", "", "240px")}} For more complex shapes, you will need to use one of the [basic shapes](/en-US/docs/Web/CSS/CSS_shapes/Basic_shapes) as a value, or define your shape from an image as covered in other guides in this section. diff --git a/files/en-us/web/css/css_shapes/overview_of_shapes/index.md b/files/en-us/web/css/css_shapes/overview_of_shapes/index.md index abb0ef00316ec9e..d9b838ec9eefaf9 100644 --- a/files/en-us/web/css/css_shapes/overview_of_shapes/index.md +++ b/files/en-us/web/css/css_shapes/overview_of_shapes/index.md @@ -26,7 +26,37 @@ The `shape-outside` property allows us to define a shape. It takes a variety of In the following example, an image is floated to the left. We apply the `shape-outside` property with a `circle(50%)` value. The result is that the content now curves around the circular shape rather than following the rectangle created by the box of the image. -{{EmbedGHLiveSample("css-examples/shapes/overview/circle.html", '100%', 720)}} +```html live-sample___circle +
+ An orange hot air balloon as seen from below +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___circle +body { + font: 1.2em / 1.4 sans-serif; +} + +img { + float: left; + shape-outside: circle(50%); +} +``` + +{{EmbedLiveSample("circle", "", "280px")}} Here we used the {{cssxref("basic-shape/circle", "circle()")}} function, which is supported across all modern browsers. If we used a newer shape type that doesn't have full support, users of non-supporting browsers would see the content flowing around the sides of a rectangular, due to the image being floated. Shapes are a visual progressive enhancement. @@ -60,7 +90,41 @@ Shapes can also be created around the box value. Therefore, you could create you In the example below, you can change the value `border-box` to any of the other allowed values to see how the shape moves closer or further away from the box. -{{EmbedGHLiveSample("css-examples/shapes/overview/box.html", '100%', 810)}} +```html live-sample___box +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___box +body { + font: 1.2em / 1.4 sans-serif; +} + +.shape { + background-color: rebeccapurple; + height: 150px; + width: 150px; + padding: 20px; + margin: 20px; + border-radius: 50%; + float: left; + shape-outside: border-box; +} +``` + +{{EmbedLiveSample("box", "", "320px")}} To explore the box values in more detail, see our guide covering [Shapes from box values](/en-US/docs/Web/CSS/CSS_shapes/From_box_values). @@ -72,7 +136,37 @@ Note that images used in this way must be [CORS compatible](/en-US/docs/Web/HTTP In this next example, we have an image with a fully transparent area, and we are using an image as the URL value for `shape-outside`. The shape is created around the opaque area — the image of the balloon. -{{EmbedGHLiveSample("css-examples/shapes/overview/image.html", '100%', 800)}} +```html live-sample___image +
+ An orange hot air balloon as seen from below +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___image +body { + font: 1.2em / 1.4 sans-serif; +} + +img { + float: left; + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/round-balloon.png); +} +``` + +{{EmbedLiveSample("image", "", "280px")}} #### `shape-image-threshold` @@ -80,7 +174,49 @@ The `shape-image-threshold` property is used to set the threshold of image trans You can see the threshold in action if we use a gradient as the image on which to define our shape. In the example below, if you change the threshold the path that the shape takes changes based on the level of opacity you have selected. -{{EmbedGHLiveSample("css-examples/shapes/overview/threshold.html", '100%', 820)}} +```html live-sample___threshold +
+
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___threshold +body { + font: 1.2em / 1.4 sans-serif; +} + +.shape { + float: left; + width: 200px; + height: 200px; + background-image: linear-gradient( + 45deg, + rebeccapurple, + transparent 80%, + transparent + ); + shape-outside: linear-gradient( + 45deg, + rebeccapurple, + transparent 80%, + transparent + ); + shape-image-threshold: 0.4; +} +``` + +{{EmbedLiveSample("threshold", "", "280px")}} To learn more about creating shapes from images, see the [Shapes from images](/en-US/docs/Web/CSS/CSS_shapes/Shapes_from_images) guide. @@ -90,7 +226,37 @@ The {{cssxref("shape-margin")}} property adds a margin to `shape-outside`. This In the example below we have added a `shape-margin` to a basic shape. Change the margin to push the text further away from the path the shape would take by default. -{{EmbedGHLiveSample("css-examples/shapes/overview/shape-margin.html", '100%', 800)}} +```html live-sample___shape-margin +
+ An orange hot air balloon as seen from below +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___shape-margin +body { + font: 1.2em / 1.4 sans-serif; +} +img { + float: left; + shape-outside: circle(50%); + shape-margin: 5px; +} +``` + +{{EmbedLiveSample("shape-margin", "", "280px")}} ## Using Generated Content as the floated item @@ -98,7 +264,41 @@ In the examples above, we have used images or a visible element to define the sh In this example, we use generated content to insert an element with a height and width of 150px. We can then use basic shapes, box values, or even the alpha channel of an image to create a shape for the text to wrap around. -{{EmbedGHLiveSample("css-examples/shapes/overview/generated-content.html", '100%', 850)}} +```html live-sample___generated-content +
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___generated-content +body { + font: 1.2em sans-serif; +} + +.box::before { + content: ""; + display: block; + height: 150px; + width: 150px; + padding: 20px; + margin: 20px; + border-radius: 50%; + float: left; + shape-outside: border-box; +} +``` + +{{EmbedLiveSample("generated-content", "", "260px")}} ## Relationship to `clip-path` @@ -106,7 +306,38 @@ The basic shapes and box values used to create shapes are the same as those used The image below is a square image with a blue background. We have defined a shape using `shape-outside: ellipse(40% 50%);` and also used `clip-path: ellipse(40% 50%);` to clip away the same area that we used to define the shape. -{{EmbedGHLiveSample("css-examples/shapes/overview/clip-path.html", '100%', 800)}} +```html live-sample___clip-path +
+ An orange hot air balloon as seen from below +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___clip-path +body { + font: 1.2em / 1.4 sans-serif; +} + +img { + float: left; + shape-outside: ellipse(40% 50%); + clip-path: ellipse(40% 50%); +} +``` + +{{EmbedLiveSample("clip-path", "", "280px")}} ## Developer Tools for Shapes diff --git a/files/en-us/web/css/css_shapes/shapes_from_images/index.md b/files/en-us/web/css/css_shapes/shapes_from_images/index.md index 9572afdd43a3235..8a62652d585f4a4 100644 --- a/files/en-us/web/css/css_shapes/shapes_from_images/index.md +++ b/files/en-us/web/css/css_shapes/shapes_from_images/index.md @@ -14,11 +14,71 @@ To use an image for creating a shape, the image needs to have an Alpha Channel, In the example below, there is an image of a star with a solid red area and an area that is fully transparent. The path to the image file is used as the value for the {{cssxref("shape-outside")}} property. The content now wraps around the star shape. -{{EmbedGHLiveSample("css-examples/shapes/image/simple-example.html", '100%', 800)}} +```html live-sample___simple-example +
+ A red star +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___simple-example +body { + font: 1.2em / 1.5 sans-serif; +} +img { + float: left; + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png); +} +``` + +{{EmbedLiveSample("simple-example", "", "340px")}} You can use {{cssxref("shape-margin")}} to move the text away from the shape, giving a margin around the created shape and the text. -{{EmbedGHLiveSample("css-examples/shapes/image/margin.html", '100%', 800)}} +```html hidden live-sample___margin +
+ A red star +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___margin +body { + font: 1.2em / 1.5 sans-serif; +} + +img { + float: left; + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png); + shape-margin: 20px; +} +``` + +{{EmbedLiveSample("margin", "", "340px")}} ## CORS compatibility @@ -32,9 +92,40 @@ DevTools can help you to identify CORS errors. In Chrome the Console will alert The {{cssxref("shape-image-threshold")}} property enables the creation of shapes from areas which are not fully transparent. If the value of `shape-image-threshold` is `0.0` (which is the initial value) then the area must be fully transparent. If the value is `1.0` then it is fully opaque. Values in between mean that you can set a semi-transparent area as the defining area. -In the example below I am using a similar image to the initial example, however, in this image the background of the star is not fully transparent, it has a 20% opacity as created in my graphics program. If I set `shape-image-threshold` to `0.3` then I see the shape, if I set it to something smaller than `0.2` I do not get the shape. +In the example below, the background of the star is not fully transparent, it has a 20% opacity as created in my graphics program. If I set `shape-image-threshold` to `0.2` or greater, then I see the shape, if I set it to something smaller than `0.2` I do not get the shape. -{{EmbedGHLiveSample("css-examples/shapes/image/threshold.html", '100%', 800)}} +```html hidden live-sample___threshold +
+ A red star +

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___threshold +body { + font: 1.2em / 1.5 sans-serif; +} + +img { + float: left; + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-red-20.png); + shape-image-threshold: 0.2; +} +``` + +{{EmbedLiveSample("threshold", "", "340px")}} ## Using images with generated content @@ -42,7 +133,38 @@ In the above example, I have both used the image as the value of {{cssxref("shap You do need something to float, but that could be some generated content as in the below example. I am floating generated content and using a larger star image to shape my content without displaying any image on the page. -{{EmbedGHLiveSample("css-examples/shapes/image/generated-content.html", '100%', 800)}} +```html live-sample___generated-content +
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___generated-content +body { + font: 1.2em / 1.5 sans-serif; +} + +.box::before { + content: ""; + float: left; + width: 400px; + height: 300px; + shape-outside: url(https://mdn.github.io/shared-assets/images/examples/star-shape.png); + shape-image-threshold: 0.3; +} +``` + +{{EmbedLiveSample("generated-content", "", "420px")}} ## Creating shapes using a gradient @@ -52,10 +174,88 @@ The next example uses generated content. The content has been floated, giving it You could also try removing the background image completely, thus using the gradient purely to create the shape and not displaying it on the page at all. -{{EmbedGHLiveSample("css-examples/shapes/image/gradient.html", '100%', 800)}} +```html live-sample___gradient +
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___gradient +body { + font: 1.2em / 1.5 sans-serif; +} + +.box::before { + content: ""; + float: left; + height: 250px; + width: 400px; + background-image: linear-gradient( + to bottom right, + rebeccapurple, + transparent + ); + shape-outside: linear-gradient(to bottom right, rebeccapurple, transparent); + shape-image-threshold: 0.3; +} +``` + +{{EmbedLiveSample("gradient", "", "400px")}} The next example uses a radial gradient with an ellipse, once again using a transparent part of the gradient to create the shape. -{{EmbedGHLiveSample("css-examples/shapes/image/radial-gradient.html", '100%', 800)}} +```html hidden live-sample___radial-gradient +
+

+ One November night in the year 1782, so the story runs, two brothers sat + over their winter fire in the little French town of Annonay, watching the + grey smoke-wreaths from the hearth curl up the wide chimney. Their names + were Stephen and Joseph Montgolfier, they were papermakers by trade, and + were noted as possessing thoughtful minds and a deep interest in all + scientific knowledge and new discovery. Before that night—a memorable night, + as it was to prove—hundreds of millions of people had watched the rising + smoke-wreaths of their fires without drawing any special inspiration from + the fact. +

+
+``` + +```css live-sample___radial-gradient +body { + font: 1.2em / 1.5 sans-serif; +} + +.box::before { + content: ""; + float: left; + height: 250px; + width: 400px; + background-image: radial-gradient( + ellipse closest-side, + rebeccapurple, + blue 50%, + transparent + ); + shape-outside: radial-gradient( + ellipse closest-side, + rebeccapurple, + blue 50%, + transparent + ); + shape-image-threshold: 0.3; +} +``` + +{{EmbedLiveSample("radial-gradient", "", "400px")}} You can experiment directly in these live examples to see how changing the gradient will change the path of your shape. diff --git a/files/en-us/web/css/css_transforms/index.md b/files/en-us/web/css/css_transforms/index.md index 31dfcf04cbcd533..77dca67a2b67d28 100644 --- a/files/en-us/web/css/css_transforms/index.md +++ b/files/en-us/web/css/css_transforms/index.md @@ -13,9 +13,646 @@ The **CSS transforms** module defines how elements styled with CSS can be transf ## CSS transforms in action -Use the sliders in the frame below to modify the translation, rotation, scale, and skew CSS transform properties of the cube in 3D space. As you move the cube through 3D space, notice the way it interacts with the element labelled `z:0px`, which is located at the 3D position `(0, 0, 0)`. +Use the sliders in the example below to modify the translation, rotation, scale, and skew CSS transform properties of the cube in 3D space. As you move the cube through 3D space, notice the way it interacts with the element labelled `z:0px`, which is located at the 3D position `(0, 0, 0)`. -{{EmbedGHLiveSample("css-examples/modules/transforms.html", '100%', 900)}} +```html hidden live-sample___transforms +
+
+ + Transform settings + + +
+
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ +
+
+
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
z:0px
+
+
+
+
+``` + +```css hidden live-sample___transforms +#allTransformFieldset { + border: none; + padding: 0; + margin-bottom: 4px; + accent-color: blue; /* or any color */ + font-family: Inter, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, + "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; +} + +#allTransformFieldset > legend { + margin-bottom: 4px; +} + +fieldset { + margin: 0; +} + +legend { + font-weight: bold; + padding: 0; +} + +#fieldsetSection { + display: flex; + flex-wrap: wrap; + align-items: start; + gap: 8px; +} + +#outputSection { + width: 100%; + min-height: 400px; + background: linear-gradient(skyblue, khaki); + display: flex; + justify-content: center; + align-items: center; + position: relative; + overflow: clip; +} + +#outputContainer { + position: absolute; + width: 100%; + height: 100%; + perspective: 200px; + display: flex; + justify-content: center; + align-items: center; + transform-style: preserve-3d; + pointer-events: none; +} + +#z0 { + width: 50px; + height: 50px; + background: linear-gradient( + to right bottom, + rgb(223 223 223), + rgb(190 190 190) + ); + transform: translateZ(0px); + position: absolute; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + color: black; + border-radius: 50%; + outline: 1px solid rgb(0 0 0 / 0.35); + pointer-events: all; +} + +#perspectiveDot { + width: 4px; + height: 4px; + border-radius: 50%; + background-color: rgb(240 0 0 / 0.5); + transform: translate3d(-2px, -2px, 0px); + position: absolute; +} + +#cube { + width: 100px; + height: 100px; + transform-style: preserve-3d; + transition: all 0.075s ease-out; + position: absolute; + pointer-events: all; +} + +.face { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + position: absolute; + backface-visibility: inherit; + font-size: 60px; + color: white; +} + +.front { + background: rgb(90 90 90 / 0.7); + transform: translateZ(50px); +} + +.back { + background: rgb(0 210 0 / 0.7); + transform: rotateY(180deg) translateZ(50px); +} + +.right { + background: rgb(210 0 0 / 0.7); + transform: rotateY(90deg) translateZ(50px); +} + +.left { + background: rgb(0 0 210 / 0.7); + transform: rotateY(-90deg) translateZ(50px); +} + +.top { + background: rgb(210 210 0 / 0.7); + transform: rotateX(90deg) translateZ(50px); +} + +.bottom { + background: rgb(210 0 210 / 0.7); + transform: rotateX(-90deg) translateZ(50px); +} + +.transformFieldset { + margin: 0; +} + +.controlsContainer { + display: flex; + flex-direction: column; + align-items: start; + gap: 4px; +} + +.controlsContainer { + width: 100%; +} + +.controlsContainer > div { + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; +} + +.controlsContainer > div > label { + display: flex; + flex-direction: row; + align-items: center; + gap: 4px; +} + +button { + font-size: 18px; + border-radius: 50%; + border: #ccc solid 1px; + padding: 0; + width: 26px; + height: 26px; + margin-left: 4px; +} + +input[type="range"] { + width: 172px; +} + +output { + width: 3em; +} +``` + +```js hidden live-sample___transforms +allTransformFieldset + .querySelectorAll("input[type='range']") + .forEach((rangeInput) => { + // Event listeners for when the range inputs change + rangeInput.addEventListener("input", (el) => { + updateTransform(); + }); + + // Reset the relevant transform setting when the range input is double clicked + rangeInput.addEventListener("dblclick", (el) => { + resetInput(el.target); + updateTransform(); + }); + }); + +// Event listeners for when checkbox inputs change +allTransformFieldset + .querySelectorAll("input[type='checkbox']") + .forEach((checkboxInput) => { + checkboxInput.addEventListener("input", (el) => { + updateTransform(); + }); + }); + +// "Reset All" button event listener +resetAllButton.addEventListener("click", () => { + allTransformFieldset.querySelectorAll("input").forEach((input) => { + resetInput(input); + }); + updateTransform(); +}); + +// Section reset button event listeners +allTransformFieldset + .querySelectorAll(".resetSectionButton") + .forEach((resetSectionButton) => { + resetSectionButton.addEventListener("click", (el) => { + let allRanges = el.target.parentElement.parentElement.querySelectorAll( + "input[type='range']", + ); + allRanges.forEach((range) => { + resetInput(range); + }); + + let allCheckboxes = + el.target.parentElement.parentElement.querySelectorAll( + "input[type='checkbox']", + ); + allCheckboxes.forEach((check) => { + resetInput(check); + }); + + updateTransform(); + }); + }); + +const resetInput = (inputEl) => { + if (!inputEl) { + console.warn(`inputEl \`${inputEl}\` is falsy!`); + console.trace(); + return; + } + + const defaultValue = inputEl.getAttribute("data-default"); + if (inputEl.getAttribute("type") === "checkbox") { + inputEl.checked = defaultValue === "checked"; + } else { + inputEl.value = defaultValue || "0"; + } +}; + +const updateOutputs = () => { + translateXOutput.value = `${parseInt(translateXRange.value)}px`; + translateYOutput.value = `${parseInt(translateYRange.value)}px`; + translateZOutput.value = `${parseInt(translateZRange.value)}px`; + + rotateXOutput.value = `${parseInt(rotateXRange.value)}°`; + rotateYOutput.value = `${parseInt(rotateYRange.value)}°`; + rotateZOutput.value = `${parseInt(rotateZRange.value)}°`; + + scaleXOutput.value = `${parseFloat(scaleXRange.value)}x`; + scaleYOutput.value = `${parseFloat(scaleYRange.value)}x`; + scaleZOutput.value = `${parseFloat(scaleZRange.value)}x`; + + skewXOutput.value = `${parseFloat(skewXRange.value)}°`; + skewYOutput.value = `${parseFloat(skewYRange.value)}°`; + + perspectiveOutput.value = `${parseInt(perspectiveRange.value)}px`; + + perspectiveOriginXOutput.value = `${parseInt(perspectiveOriginXRange.value)}%`; + perspectiveOriginYOutput.value = `${parseInt(perspectiveOriginYRange.value)}%`; +}; + +const updateTransform = () => { + updateOutputs(); + + cube.style.transform = `translate3d(${translateXRange.value}px, + ${translateYRange.value}px, + ${translateZRange.value}px) + rotateX(${rotateXRange.value}deg) + rotateY(${rotateYRange.value}deg) + rotateZ(${rotateZRange.value}deg) + scale3d(${scaleXRange.value}, + ${scaleYRange.value}, + ${scaleZRange.value}) + skewX(${skewXRange.value}deg) + skewY(${skewYRange.value}deg)`; + cube.style.backfaceVisibility = `${backfaceVisibilityCheckbox.checked ? "visible" : "hidden"}`; + + outputContainer.style.perspective = `${perspectiveRange.value}px`; + outputContainer.style.perspectiveOrigin = `${perspectiveOriginXRange.value}% ${perspectiveOriginYRange.value}%`; + + perspectiveDot.style.top = `${perspectiveOriginYRange.value}%`; + perspectiveDot.style.left = `${perspectiveOriginXRange.value}%`; +}; +updateTransform(); +``` + +{{EmbedLiveSample("transforms", "", "850px")}} You can also use the `perspective` slider to modify the [`perspective`](/en-US/docs/Web/CSS/perspective) property of the cube's container, which determines the distance between you and the `z=0` plane. @@ -28,8 +665,6 @@ The cube in the above example is comprised of six `
` elements, all of which > [!NOTE] > The order in which transformations, including 3D rotations, are applied affects the resultant transformation. In the above example, transforms are translated, scaled, rotated, then skewed. The rotations are applied in the order X → Y → Z. -You can [view this example's source on GitHub](https://github.com/mdn/css-examples/blob/main/modules/transforms.html). - ## Reference ### Properties diff --git a/files/en-us/web/css/css_transitions/using_css_transitions/index.md b/files/en-us/web/css/css_transitions/using_css_transitions/index.md index 5f0318d71e73e8e..3b0c40b7867f394 100644 --- a/files/en-us/web/css/css_transitions/using_css_transitions/index.md +++ b/files/en-us/web/css/css_transitions/using_css_transitions/index.md @@ -300,28 +300,56 @@ The code renders as follows: Transitions are a great tool to make things look much smoother without having to do anything to your JavaScript functionality. Take the following example. -```html +```html live-sample___js-transitions

Click anywhere to move the ball

+ + ``` -Using JavaScript you can make the effect of moving the ball to a certain position happen: +With CSS, you can smooth the styles applied through JavaScript. Add a transition to the element and any change will happen smoothly: -```js -const f = document.getElementById("foo"); -document.addEventListener( - "click", - (ev) => { - f.style.transform = `translateY(${ev.clientY - 25}px)`; - f.style.transform += `translateX(${ev.clientX - 25}px)`; - }, - false, -); -``` +```css hidden live-sample___js-transitions +body { + background-color: #fff; + color: #333; + font: + 1.2em / 1.5 Helvetica Neue, + Helvetica, + Arial, + sans-serif; + padding: 0; + margin: 0; +} -With CSS you can make it smooth without any extra effort. Add a transition to the element and any change will happen smoothly: +p { + margin-top: 3em; +} -```css +main { + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + max-width: 660px; + height: 400px; + border: 1px solid #ccc; + padding: 20px; +} +``` + +```css live-sample___js-transitions .ball { border-radius: 25px; width: 50px; @@ -334,7 +362,7 @@ With CSS you can make it smooth without any extra effort. Add a transition to th } ``` -{{EmbedGHLiveSample("css-examples/transitions/js-transitions.html", '100%', 500)}} +{{EmbedLiveSample("js-transitions", "", "400px")}} ### Detecting the start and completion of a transition diff --git a/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md b/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md index bf412ce4e88c353..91f373bc877ef2f 100644 --- a/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md +++ b/files/en-us/web/css/display/multi-keyword_syntax_of_display/index.md @@ -29,11 +29,50 @@ As an example, when we use `display: flex` we create a block-level container, wi The live example below has a `` with `display: flex` applied. It has become a block-level box taking up all available space in the inline direction. You can now use `justify-content: space-between` to put this space between the two flex items. -{{EmbedGHLiveSample("css-examples/display/multi-keyword/span-flex.html", '100%', 440)}} +```html live-sample___span-flex + Some text emphasized text +``` + +```css live-sample___span-flex +body { + font: 1.2em / 1.5 sans-serif; +} +.flex { + border: 5px solid #ccc; + display: flex; + justify-content: space-between; +} +``` + +{{EmbedLiveSample("span-flex")}} It's also possible to create inline flex containers. If you use the single value `inline-flex` you will have an inline-level box with flex children. The children behave in the same way as the flex children of a block-level container. The only thing that has changed is that the parent is now an inline-level box. It therefore behaves like other inline-level things, and doesn't take up the full width (or size in the inline dimension) that a block-level box does. This means that some following text could come up alongside the flex container. -{{EmbedGHLiveSample("css-examples/display/multi-keyword/inline-flex.html", '100%', 440)}} +```html live-sample___inline-flex +
+
One
+
Two
+
+Text following the flex container. +``` + +```css live-sample___inline-flex +body { + font: 1.2em / 1.5 sans-serif; +} +.flex > div { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.flex { + border: 5px solid #ccc; + display: inline-flex; +} +``` + +{{EmbedLiveSample("inline-flex")}} The same is true when working with grid layout. Using `display: grid` will give you a block-level box, which creates a grid formatting context for the direct children. Using `display: inline-grid` will create an inline-level box, which creates a grid formatting context for the children. @@ -43,7 +82,50 @@ As you can see from the above explanation, the `display` property has considerab This means that instead of setting `display: flex` to create a block-level box with flex children, we use `display: block flex`. Instead of `display: inline-flex` to create an inline-level box with flex children, we use `display: inline flex`. The example below demonstrates these values. -{{EmbedGHLiveSample("css-examples/display/multi-keyword/multi-keyword-flex.html", '100%', 640)}} +```html live-sample___multi-keyword-flex +

Multiple values for display

+ +
+
Item One
+
Item Two
+
Item Three
+
+ +

The first example is a block element with flex children.

+ +
+
Item One
+
Item Two
+
Item Three
+
+The second example is an inline element with flex children. +``` + +```css live-sample___multi-keyword-flex +body { + font: 1.2em / 1.5 sans-serif; +} +.flex { + border: 5px solid #ccc; + gap: 10px; +} + +.flex > * { + border: 2px solid rgb(96 139 168); + border-radius: 5px; + background-color: rgb(96 139 168 / 0.2); +} + +.flex1 { + display: block flex; +} + +.flex2 { + display: inline flex; +} +``` + +{{EmbedLiveSample("multi-keyword-flex", "", "300px")}} There are mappings for all of the existing values of `display`; the most common ones are listed in the table below. To see a full list take a look at the table found in the [`display` property specification](https://drafts.csswg.org/css-display/#display-value-summary). @@ -149,7 +231,31 @@ This is why `display: flow-root` can be written using the multi-keyword syntax ` The value `display: inline-block` has been around since the early days of CSS. The reason we tend to use it is to allow padding to push inline items away from an element, when creating navigation items for example, or when wanting to add a background with padding to an inline element as in the example below. -{{EmbedGHLiveSample("css-examples/display/multi-keyword/inline-block.html", '100%', 440)}} +```html live-sample___inline-block +

+ This paragraph has a span with padding it is + an inline-block so the padding is contained and pushes the other line boxes + away. +

+``` + +```css live-sample___inline-block +body { + font: 1.2em / 1.5 sans-serif; +} +p { + border: 2px dashed; + width: 300px; +} +.inline-block { + background-color: rgb(0 0 0 / 0.4); + color: #fff; + padding: 10px; + display: inline-block; +} +``` + +{{EmbedLiveSample("inline-block", "", "200px")}} An element with `display: inline-block` however, will also contain floats. It contains everything inside the inline-level box. Therefore `display: inline-block` does exactly what `display: flow-root` does, but with an inline-level, rather than a block-level box. The two-value syntax accurately describes what is happening with this value. In the example above, you can change `display: inline-block` to `display: inline flow-root` and get the same result. From c3d2d7174dd51ade22910c9e2575dfa0aa801694 Mon Sep 17 00:00:00 2001 From: Dave Letorey Date: Wed, 27 Nov 2024 15:40:47 +0000 Subject: [PATCH 02/14] added the release note for viewport interactive-widget (#37001) --- files/en-us/mozilla/firefox/releases/133/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/firefox/releases/133/index.md b/files/en-us/mozilla/firefox/releases/133/index.md index db3e2242bc4ae7d..32adf14bdce2355 100644 --- a/files/en-us/mozilla/firefox/releases/133/index.md +++ b/files/en-us/mozilla/firefox/releases/133/index.md @@ -12,7 +12,7 @@ This article provides information about the changes in Firefox 133 that affect d ### HTML -No notable changes +- The [`viewport ` tag](/en-US/docs/Web/HTML/Viewport_meta_tag) now supports the [`interactive-widgets`](/en-US/docs/Web/HTML/Viewport_meta_tag#the_effect_of_interactive_ui_widgets) attribute, this influences the size of the viewport when common UI widgets, such as virtual keyboards, are added to the screen. ([Firefox bug 1831649](https://bugzil.la/1831649) and [Firefox bug 1920755](https://bugzil.la/1920755)). ### CSS From 66fa0acf565a240c390418f588d571d6e650514d Mon Sep 17 00:00:00 2001 From: Mathew Hodson Date: Wed, 27 Nov 2024 15:25:41 -0500 Subject: [PATCH 03/14] Remove duplicate line from Firefox 133 release notes (#37005) --- files/en-us/mozilla/firefox/releases/133/index.md | 1 - 1 file changed, 1 deletion(-) diff --git a/files/en-us/mozilla/firefox/releases/133/index.md b/files/en-us/mozilla/firefox/releases/133/index.md index 32adf14bdce2355..b1ced2de508eb5a 100644 --- a/files/en-us/mozilla/firefox/releases/133/index.md +++ b/files/en-us/mozilla/firefox/releases/133/index.md @@ -41,7 +41,6 @@ No notable changes - The [`onwaitingforkey`](/en-US/docs/Web/API/HTMLMediaElement/waitingforkey_event) content attribute can now be specified on {{htmlelement("audio")}}/{{htmlelement("video")}} elements to set an inline event handler for the `waitingforkey` event. ([Firefox bug 1925952](https://bugzil.la/1925952)). - {{domxref("ServiceWorkerContainer")}} is now exposed in all worker contexts via {{domxref("WorkerNavigator.serviceWorker")}}, allowing workers to inspect and manage the {{domxref("ServiceWorkerRegistration","service worker registrations","","nocode")}} associated with the current origin. Previously `ServiceWorkerContainer` was only available in the main thread, via {{domxref("Navigator.serviceWorker")}}. ([Firefox bug 1113522](https://bugzil.la/1113522)). -- The {{domxref("ImageDecoder")}}, {{domxref("ImageTrackList")}}, and {{domxref("ImageTrack")}} interfaces of the [WebCodecs API](/en-US/docs/Web/API/WebCodecs_API) are now supported, enabling the decoding images from the main and worker threads. ([Firefox bug 1923755](https://bugzil.la/1923755)). - The [`name`](/en-US/docs/Web/API/PerformanceNavigationTiming#performanceentry.name) property of `PerformanceNavigationTiming` now omits [text fragments](/en-US/docs/Web/URI/Fragment/Text_fragments) from the returned URL, matching the specification. This kind of {{domxref("PerformanceResourceTiming")}} object is returned by {{domxref("Performance.getEntries()")}} for entries with an {{domxref("PerformanceEntry/entryType", "entryType")}} of `navigation`. ([Firefox bug 1919565](https://bugzil.la/1919565)). #### Removals From 73eeba4ecd149e9a322e64369c0451b460dbb8c1 Mon Sep 17 00:00:00 2001 From: Anton Date: Wed, 27 Nov 2024 23:37:45 +0100 Subject: [PATCH 04/14] browsingData.removeCache: removalOptions is not optional (#36812) Co-authored-by: rebloor --- .../webextensions/api/browsingdata/removecache/index.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md b/files/en-us/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md index 61573a0a3bd25ab..a37475301b57519 100644 --- a/files/en-us/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/api/browsingdata/removecache/index.md @@ -9,7 +9,7 @@ browser-compat: webextensions.api.browsingData.removeCache Clears the browser's cache. -Note that although this function can take a {{WebExtAPIRef("browsingData.RemovalOptions")}} object, it will be ignored. The entire cache is always cleared when using this function. +Note that this function requires a {{WebExtAPIRef("browsingData.RemovalOptions")}} object, but all options are ignored. The entire cache is always cleared when using this function. This is an asynchronous function that returns a [`Promise`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise). @@ -23,8 +23,8 @@ let removing = browser.browsingData.removeCache( ### Parameters -- `removalOptions` {{optional_inline}} - - : `object`. A {{WebExtAPIRef("browsingData.RemovalOptions")}} object. This parameter has no effect. +- `removalOptions` + - : `object`. A {{WebExtAPIRef("browsingData.RemovalOptions")}} object. This parameter must be set but has no effect. ### Return value From e040996475ed4fda1ec6e027c5696295d1c38ad5 Mon Sep 17 00:00:00 2001 From: wbamberg Date: Wed, 27 Nov 2024 17:45:36 -0800 Subject: [PATCH 05/14] Delete Window.updateCommands (#36996) --- files/en-us/_redirects.txt | 9 +++-- files/en-us/_wikihistory.json | 17 -------- .../web/api/window/updatecommands/index.md | 40 ------------------- 3 files changed, 5 insertions(+), 61 deletions(-) delete mode 100644 files/en-us/web/api/window/updatecommands/index.md diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 8dc5ede0af51001..c7deb5b7a80f5a3 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -2230,7 +2230,7 @@ /en-US/docs/DOM/window.toolbar /en-US/docs/Web/API/Window/toolbar /en-US/docs/DOM/window.top /en-US/docs/Web/API/Window/top /en-US/docs/DOM/window.unescape /en-US/docs/Web/JavaScript/Reference/Global_Objects/unescape -/en-US/docs/DOM/window.updateCommands /en-US/docs/Web/API/Window/updateCommands +/en-US/docs/DOM/window.updateCommands /en-US/docs/Web/API/Window /en-US/docs/DOM/window.window /en-US/docs/Web/API/Window/window /en-US/docs/DOM:CDATASection /en-US/docs/Web/API/CDATASection /en-US/docs/DOM:CSS /en-US/docs/Web/CSS/Reference @@ -2652,7 +2652,7 @@ /en-US/docs/DOM:window.toolbar /en-US/docs/Web/API/Window/toolbar /en-US/docs/DOM:window.top /en-US/docs/Web/API/Window/top /en-US/docs/DOM:window.unescape /en-US/docs/Web/JavaScript/Reference/Global_Objects/unescape -/en-US/docs/DOM:window.updateCommands /en-US/docs/Web/API/Window/updateCommands +/en-US/docs/DOM:window.updateCommands /en-US/docs/Web/API/Window /en-US/docs/DOM:window.window /en-US/docs/Web/API/Window/window /en-US/docs/DOMParser /en-US/docs/Web/API/DOMParser /en-US/docs/DOMTokenList.supports() /en-US/docs/Web/API/DOMTokenList/supports @@ -3369,7 +3369,7 @@ /en-US/docs/Document_Object_Model_(DOM)/window.statusbar /en-US/docs/Web/API/Window/statusbar /en-US/docs/Document_Object_Model_(DOM)/window.toolbar /en-US/docs/Web/API/Window/toolbar /en-US/docs/Document_Object_Model_(DOM)/window.unescape /en-US/docs/Web/JavaScript/Reference/Global_Objects/unescape -/en-US/docs/Document_Object_Model_(DOM)/window.updateCommands /en-US/docs/Web/API/Window/updateCommands +/en-US/docs/Document_Object_Model_(DOM)/window.updateCommands /en-US/docs/Web/API/Window /en-US/docs/Document_Object_Model_(DOM)/window.window /en-US/docs/Web/API/Window/window /en-US/docs/Domain_name /en-US/docs/Glossary/Domain_name /en-US/docs/DragDrop /en-US/docs/Web/API/HTML_Drag_and_Drop_API @@ -10205,6 +10205,7 @@ /en-US/docs/Web/API/Window/transitionend_event /en-US/docs/Web/API/Element/transitionend_event /en-US/docs/Web/API/Window/transitionrun_event /en-US/docs/Web/API/Element/transitionrun_event /en-US/docs/Web/API/Window/transitionstart_event /en-US/docs/Web/API/Element/transitionstart_event +/en-US/docs/Web/API/Window/updateCommands /en-US/docs/Web/API/Window /en-US/docs/Web/API/Window/vrdisplayblur_event /en-US/docs/Web/API/Window /en-US/docs/Web/API/Window/vrdisplayfocus_event /en-US/docs/Web/API/Window /en-US/docs/Web/API/Window/vrdisplaypointerrestricted_event /en-US/docs/Web/API/Window @@ -10933,7 +10934,7 @@ /en-US/docs/Web/API/window.toolbar /en-US/docs/Web/API/Window/toolbar /en-US/docs/Web/API/window.top /en-US/docs/Web/API/Window/top /en-US/docs/Web/API/window.unescape /en-US/docs/Web/JavaScript/Reference/Global_Objects/unescape -/en-US/docs/Web/API/window.updateCommands /en-US/docs/Web/API/Window/updateCommands +/en-US/docs/Web/API/window.updateCommands /en-US/docs/Web/API/Window /en-US/docs/Web/API/window.window /en-US/docs/Web/API/Window/window /en-US/docs/Web/API/window/onscroll /en-US/docs/Web/API/Element/scroll_event /en-US/docs/Web/API/window/onscroll-temp /en-US/docs/Web/API/Element/scroll_event diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index aa4e7911a32b797..0688969f6e05346 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -69300,23 +69300,6 @@ "louisremi" ] }, - "Web/API/Window/updateCommands": { - "modified": "2020-10-15T21:15:49.672Z", - "contributors": [ - "mfuji09", - "lucian95", - "SphinxKnight", - "forivall", - "fscholz", - "MHasan", - "teoli", - "iamanupmenon", - "utkarsh_shah", - "Sheppy", - "Mgjbot", - "Maian" - ] - }, "Web/API/Window/visualViewport": { "modified": "2020-10-15T21:57:59.692Z", "contributors": ["chrisdavidmills", "connorshea", "jpmedley"] diff --git a/files/en-us/web/api/window/updatecommands/index.md b/files/en-us/web/api/window/updatecommands/index.md deleted file mode 100644 index 121d80aa19d7b15..000000000000000 --- a/files/en-us/web/api/window/updatecommands/index.md +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: "Window: updateCommands() method" -short-title: updateCommands() -slug: Web/API/Window/updateCommands -page-type: web-api-instance-method -status: - - non-standard -browser-compat: api.Window.updateCommands ---- - -{{ApiRef}}{{Non-standard_Header}} - -Updates the state of commands of the current chrome window (UI). - -## Syntax - -```js-nolint -updateCommands(commandName) -``` - -### Parameters - -- `commandName` - - : A string which describes what kind of update event this is (e.g. whether we are in bold right now). - -### Return value - -None ({{jsxref("undefined")}}). - -## Notes - -This enables or disables items (setting or clearing the "disabled" attribute on the command node as appropriate), or ensures that the command state reflects the state of the selection by setting current state information in the "state" attribute of the XUL command nodes. - -## Specifications - -DOM Level 0. Not part of specification. - -## Browser compatibility - -{{Compat}} From 0bf15d029fb052d3b20a2f249d4a6de8e29ea774 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 27 Nov 2024 17:49:49 -0800 Subject: [PATCH 06/14] New pages: HTMLTrackElement API properties (#36913) --- .../web/api/htmltrackelement/default/index.md | 36 +++++++++++++ .../web/api/htmltrackelement/kind/index.md | 52 +++++++++++++++++++ .../web/api/htmltrackelement/label/index.md | 36 +++++++++++++ .../api/htmltrackelement/readystate/index.md | 41 +++++++++++++++ .../web/api/htmltrackelement/src/index.md | 8 +-- .../web/api/htmltrackelement/srclang/index.md | 41 +++++++++++++++ .../web/api/htmltrackelement/track/index.md | 36 +++++++++++++ 7 files changed, 247 insertions(+), 3 deletions(-) create mode 100644 files/en-us/web/api/htmltrackelement/default/index.md create mode 100644 files/en-us/web/api/htmltrackelement/kind/index.md create mode 100644 files/en-us/web/api/htmltrackelement/label/index.md create mode 100644 files/en-us/web/api/htmltrackelement/readystate/index.md create mode 100644 files/en-us/web/api/htmltrackelement/srclang/index.md create mode 100644 files/en-us/web/api/htmltrackelement/track/index.md diff --git a/files/en-us/web/api/htmltrackelement/default/index.md b/files/en-us/web/api/htmltrackelement/default/index.md new file mode 100644 index 000000000000000..8b6d510f70e8393 --- /dev/null +++ b/files/en-us/web/api/htmltrackelement/default/index.md @@ -0,0 +1,36 @@ +--- +title: "HTMLTrackElement: default property" +short-title: default +slug: Web/API/HTMLTrackElement/default +page-type: web-api-instance-property +browser-compat: api.HTMLTrackElement.default +--- + +{{ApiRef("HTML DOM")}} + +The **`default`** property of the {{domxref("HTMLTrackElement")}} interface represents whether the track will be enabled if the user's preferences do not indicate that another track would be more appropriate. It reflects the {{htmlelement("track")}} element's boolean [`default`](/en-US/docs/Web/HTML/Element/track#default) attribute, returning `true` if present and `false` otherwise. + +## Value + +A Boolean. + +## Example + +```js +const trackElement = document.getElementById("exampleTrack"); +console.log(trackElement.default); +trackElement.default = true; +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTrackElement.kind")}} +- {{domxref("HTMLTrackElement.label")}} diff --git a/files/en-us/web/api/htmltrackelement/kind/index.md b/files/en-us/web/api/htmltrackelement/kind/index.md new file mode 100644 index 000000000000000..8ffc10a9bfb4fae --- /dev/null +++ b/files/en-us/web/api/htmltrackelement/kind/index.md @@ -0,0 +1,52 @@ +--- +title: "HTMLTrackElement: kind property" +short-title: kind +slug: Web/API/HTMLTrackElement/kind +page-type: web-api-instance-property +browser-compat: api.HTMLTrackElement.kind +--- + +{{ApiRef("HTML DOM")}} + +The **`kind`** property of the {{domxref("HTMLTrackElement")}} interface represents the type of track, or how the text track is meant to be used. It reflects the {{htmlelement("track")}} element's enumerated [`kind`](/en-US/docs/Web/HTML/Element/track#kind) attribute. + +If no `kind` is set, `subtitles` is used. If the attribute is not set to one of the valid enumerated values, it is invalid and `metadata` is used. Other valid values include `captions`, `descriptions`, and `chapters`. + +## Value + +A string; lowercase `captions`, `descriptions`, `chapters`, `subtitles` or `metadata`. + +## Example + +Given the following: + +```html + +``` + +We get the following results: + +```js +const trackElement = document.getElementById("exampleTrack"); +// missing value +console.log(trackElement.kind); // "subtitles" +trackElement.kind = "INVALID"; +// invalid value +console.log(trackElement.kind); // "metadata" +trackElement.kind = "CAPTIONS"; +// valid value +console.log(trackElement.kind); // "captions" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTrackElement.track")}} +- {{domxref("HTMLTrackElement.label")}} diff --git a/files/en-us/web/api/htmltrackelement/label/index.md b/files/en-us/web/api/htmltrackelement/label/index.md new file mode 100644 index 000000000000000..8accf12c074cac8 --- /dev/null +++ b/files/en-us/web/api/htmltrackelement/label/index.md @@ -0,0 +1,36 @@ +--- +title: "HTMLTrackElement: label property" +short-title: label +slug: Web/API/HTMLTrackElement/label +page-type: web-api-instance-property +browser-compat: api.HTMLTrackElement.label +--- + +{{ApiRef("HTML DOM")}} + +The **`label`** property of the {{domxref("HTMLTrackElement")}} represents the user-readable title displayed when listing subtitle, caption, and audio descriptions for a track. It reflects the {{htmlelement("track")}} element's [`label`](/en-US/docs/Web/HTML/Element/track#label) attribute. + +## Value + +A string. + +## Example + +```js +const trackElement = document.getElementById("exampleTrack"); +console.log(`Track's label: ${trackElement.label}`); +trackElement.label = "Updated label"; +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTrackElement.track")}} +- {{domxref("HTMLTrackElement.kind")}} diff --git a/files/en-us/web/api/htmltrackelement/readystate/index.md b/files/en-us/web/api/htmltrackelement/readystate/index.md new file mode 100644 index 000000000000000..210b3f0d6f308d2 --- /dev/null +++ b/files/en-us/web/api/htmltrackelement/readystate/index.md @@ -0,0 +1,41 @@ +--- +title: "HTMLTrackElement: readyState property" +short-title: readyState +slug: Web/API/HTMLTrackElement/readyState +page-type: web-api-instance-property +browser-compat: api.HTMLTrackElement.readyState +--- + +{{APIRef("HTML DOM")}} + +The readonly **`readyState`** property of the {{domxref("HTMLTrackElement")}} interface returns a number representing the {{HTMLElement("track")}} element's text track readiness state: + +0. NONE: The text track not loaded state. +1. LOADING: The text track loading state. +2. LOADED: The text track loaded state. +3. ERROR: The text track failed to load state. + +## Value + +A number; `0`, `1`, `2`, or `3`. + +## Example + +```js +const trackElement = document.getElementById("exampleTrack"); +console.log(trackElement.readyState); // 0, 1, 2, or 3 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTrackElement")}} +- {{domxref("HTMLMediaElement.readyState")}} +- {{HTMLElement("track")}} diff --git a/files/en-us/web/api/htmltrackelement/src/index.md b/files/en-us/web/api/htmltrackelement/src/index.md index dd7672f8064ff67..a252e81ce474228 100644 --- a/files/en-us/web/api/htmltrackelement/src/index.md +++ b/files/en-us/web/api/htmltrackelement/src/index.md @@ -8,7 +8,7 @@ browser-compat: api.HTMLTrackElement.src {{APIRef("HTML DOM")}} -The **`HTMLTrackElement.src`** property reflects the value of +The **`src`** property of the {{domxref("HTMLTrackElement")}} interface reflects the value of the {{HTMLElement("track")}} element's [`src`](/en-US/docs/Web/HTML/Element/track#src) attribute, which indicates the URL of the text track's data. @@ -19,7 +19,9 @@ A string containing the URL of the text track data. ## Example ```js -// coming soon +const trackElement = document.getElementById("exampleTrack"); +console.log(`Track's URL: ${trackElement.src}`); +trackElement.src = "newTrack.vtt"; ``` ## Specifications @@ -32,5 +34,5 @@ A string containing the URL of the text track data. ## See also -- {{domxref("HTMLTrackElement")}}: Interface used to define the `HTMLTrackElement.src` property +- {{domxref("HTMLTrackElement")}} - {{HTMLElement("track")}} diff --git a/files/en-us/web/api/htmltrackelement/srclang/index.md b/files/en-us/web/api/htmltrackelement/srclang/index.md new file mode 100644 index 000000000000000..c7292b54bcee044 --- /dev/null +++ b/files/en-us/web/api/htmltrackelement/srclang/index.md @@ -0,0 +1,41 @@ +--- +title: "HTMLTrackElement: srclang property" +short-title: srclang +slug: Web/API/HTMLTrackElement/srclang +page-type: web-api-instance-property +browser-compat: api.HTMLTrackElement.srclang +--- + +{{APIRef("HTML DOM")}} + +The **`srclang`** property of the {{domxref("HTMLTrackElement")}} interface reflects the value of +the {{HTMLElement("track")}} element's [`srclang`](/en-US/docs/Web/HTML/Element/track#srclang) attribute or the empty string if not defined. + +The `srclang` attribute is a [BCP 47 language tag](/en-US/docs/Web/HTML/Global_attributes/lang#language_tag_syntax) +indicating the language of the text track's data. + +## Value + +A string. + +## Example + +```js +const trackElement = document.getElementById("exampleTrack"); +console.log(`Track's language: ${trackElement.srclang}`); +trackElement.srclang = "en-US"; +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTrackElement")}} +- {{HTMLElement("track")}} +- [`lang` syntax](/en-US/docs/Web/HTML/Global_attributes/lang#language_tag_syntax) diff --git a/files/en-us/web/api/htmltrackelement/track/index.md b/files/en-us/web/api/htmltrackelement/track/index.md new file mode 100644 index 000000000000000..8bdd4099719226e --- /dev/null +++ b/files/en-us/web/api/htmltrackelement/track/index.md @@ -0,0 +1,36 @@ +--- +title: "HTMLTrackElement: track property" +short-title: track +slug: Web/API/HTMLTrackElement/track +page-type: web-api-instance-property +browser-compat: api.HTMLTrackElement.track +--- + +{{APIRef("HTML DOM")}} + +The readonly **`track`** property of the {{domxref("HTMLTrackElement")}} interface returns a {{DOMxRef("TextTrack")}} object corresponding to the text track of the {{HTMLElement("track")}} element. + +## Value + +A {{DOMxRef("TextTrack")}} object. + +## Example + +```js +const trackElement = document.getElementById("exampleTrack"); +console.dir(trackElement.track); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLTrackElement")}} +- {{domxref("textTrack")}} +- {{HTMLElement("track")}} From f5af74a36ba658c85548b28c460079fa0e510668 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 27 Nov 2024 17:55:58 -0800 Subject: [PATCH 07/14] New pages: getSVGDocument() method pages (#36986) --- .../htmliframeelement/getsvgdocument/index.md | 34 +++++++++++++++++++ .../en-us/web/api/htmliframeelement/index.md | 5 ++- .../htmlobjectelement/getsvgdocument/index.md | 34 +++++++++++++++++++ .../en-us/web/api/htmlobjectelement/index.md | 2 ++ 4 files changed, 74 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/api/htmliframeelement/getsvgdocument/index.md create mode 100644 files/en-us/web/api/htmlobjectelement/getsvgdocument/index.md diff --git a/files/en-us/web/api/htmliframeelement/getsvgdocument/index.md b/files/en-us/web/api/htmliframeelement/getsvgdocument/index.md new file mode 100644 index 000000000000000..3493191273a11b9 --- /dev/null +++ b/files/en-us/web/api/htmliframeelement/getsvgdocument/index.md @@ -0,0 +1,34 @@ +--- +title: "HTMLIframeElement: getSVGDocument() method" +short-title: getSVGDocument +slug: Web/API/HTMLIframeElement/getSVGDocument +page-type: web-api-instance-method +browser-compat: api.HTMLIframeElement.getSVGDocument +--- + +{{APIRef("HTML DOM")}} + +The **`getSVGDocument()`** method of the {{domxref("HTMLIframeElement")}} interface returns the {{domxref("Document")}} object of the embedded SVG. + +## Value + +A {{domxref("Document")}}. + +## Examples + +```js +const svgDoc = document.getElementById("el").getSVGDocument(); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLEmbedElement.getSVGDocument")}} +- {{domxref("HTMLObjectElement.getSVGDocument")}} diff --git a/files/en-us/web/api/htmliframeelement/index.md b/files/en-us/web/api/htmliframeelement/index.md index bf222bb4895941d..e6544a0b5d0aa90 100644 --- a/files/en-us/web/api/htmliframeelement/index.md +++ b/files/en-us/web/api/htmliframeelement/index.md @@ -65,7 +65,10 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}_. ## Instance methods -_Inherits methods from its parent, {{domxref("HTMLElement")}}_. +_Also inherits methods from its parent interface, {{domxref("HTMLElement")}}._ + +- {{domxref("HTMLIframeElement.getSVGDocument()")}} + - : Returns the embedded SVG as a {{domxref("Document")}}. ## Specifications diff --git a/files/en-us/web/api/htmlobjectelement/getsvgdocument/index.md b/files/en-us/web/api/htmlobjectelement/getsvgdocument/index.md new file mode 100644 index 000000000000000..0f15c12088488f9 --- /dev/null +++ b/files/en-us/web/api/htmlobjectelement/getsvgdocument/index.md @@ -0,0 +1,34 @@ +--- +title: "HTMLObjectElement: getSVGDocument() method" +short-title: getSVGDocument +slug: Web/API/HTMLObjectElement/getSVGDocument +page-type: web-api-instance-method +browser-compat: api.HTMLObjectElement.getSVGDocument +--- + +{{APIRef("HTML DOM")}} + +The **`getSVGDocument()`** method of the {{domxref("HTMLObjectElement")}} interface returns the {{domxref("Document")}} object of the embedded SVG. + +## Value + +A {{domxref("Document")}}. + +## Examples + +```js +const svg = document.getElementById("el").getSVGDocument(); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLIFrameElement.getSVGDocument")}} +- {{domxref("HTMLEmbedElement.getSVGDocument")}} diff --git a/files/en-us/web/api/htmlobjectelement/index.md b/files/en-us/web/api/htmlobjectelement/index.md index 4c8238e86ccb4ea..20ada56929dbb0b 100644 --- a/files/en-us/web/api/htmlobjectelement/index.md +++ b/files/en-us/web/api/htmlobjectelement/index.md @@ -66,6 +66,8 @@ _Inherits methods from its parent, {{domxref("HTMLElement")}}._ - {{domxref("HTMLObjectElement.checkValidity()")}} - : Always returns `true` because {{HTMLElement("object")}} elements are never candidates for constraint validation. +- {{domxref("HTMLObjectElement.getSVGDocument()")}} + - : Returns the embedded SVG as a {{domxref("Document")}}. - {{domxref("HTMLObjectElement.reportValidity()")}} - : Always returns `true` because {{HTMLElement("object")}} elements are never candidates for constraint validation. - {{domxref("HTMLObjectElement.setCustomValidity()")}} From 14f1c1d688d7194495daedb4c009a400d3f01d3b Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 27 Nov 2024 17:57:02 -0800 Subject: [PATCH 08/14] New page: HTMLLinkElement.sizes (#36995) --- .../web/api/htmllinkelement/sizes/index.md | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 files/en-us/web/api/htmllinkelement/sizes/index.md diff --git a/files/en-us/web/api/htmllinkelement/sizes/index.md b/files/en-us/web/api/htmllinkelement/sizes/index.md new file mode 100644 index 000000000000000..b4c03b185378b52 --- /dev/null +++ b/files/en-us/web/api/htmllinkelement/sizes/index.md @@ -0,0 +1,55 @@ +--- +title: "HTMLLinkElement: sizes property" +short-title: sizes +slug: Web/API/HTMLLinkElement/sizes +page-type: web-api-instance-property +browser-compat: api.HTMLLinkElement.sizes +--- + +{{APIRef("HTML DOM")}} + +The readonly **`sizes`** property of the {{domxref("HTMLLinkElement")}} interfaces defines the sizes of the icons for visual media contained in the resource. It reflects the {{HTMLElement("link")}} element's [`sizes`](/en-US/docs/Web/HTML/Element/link#sizes) attribute, which takes a list of space-separated sizes, each in the format `x`, or the keyword `any`. + +It is only relevant if the {{domxref("HTMLLinkElement.rel", "rel")}} is `icon` or a non-standard type like `apple-touch-icon`. + +## Value + +A {{domxref("DOMTokenList")}} + +## Examples + +```html + +``` + +```js +const link = document.querySelector("[rel=icon],[rel=apple-touch-icon]"); +console.dir(link.sizes); /* output: + DOMTokenList [ "72x72", "114x114" ] + 0: "72x72" + 1: "114x114" + length: 2 + value: "72x72 114x114" + */ +console.log(link.sizes.value); // output: '72x72 114x114' +console.log(link.sizes.length); // output: 2' +console.log(link.sizes[0]); // output: '72x72' +console.log(link.sizes[1]); // output: '114x114' +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLLinkElement.rel")}} +- {{domxref("HTMLLinkElement.relList")}} +- {{domxref("HTMLLinkElement.type")}} +- {{domxref("HTMLLinkElement.href")}} +- {{HTMLElement("link")}} +- [`rel`](/en-US/docs/Web/HTML/Attributes/rel) attribute From 64088e3a95e2cc9c8cf44d1338d0be21f1fadfed Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Wed, 27 Nov 2024 17:59:55 -0800 Subject: [PATCH 09/14] New pages: HTMLEmbedElement property and method (#36985) --- .../htmlembedelement/getsvgdocument/index.md | 34 +++++++++++++++++ files/en-us/web/api/htmlembedelement/index.md | 5 ++- .../web/api/htmlembedelement/type/index.md | 37 +++++++++++++++++++ 3 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 files/en-us/web/api/htmlembedelement/getsvgdocument/index.md create mode 100644 files/en-us/web/api/htmlembedelement/type/index.md diff --git a/files/en-us/web/api/htmlembedelement/getsvgdocument/index.md b/files/en-us/web/api/htmlembedelement/getsvgdocument/index.md new file mode 100644 index 000000000000000..7025a42956c1d84 --- /dev/null +++ b/files/en-us/web/api/htmlembedelement/getsvgdocument/index.md @@ -0,0 +1,34 @@ +--- +title: "HTMLEmbedElement: getSVGDocument() method" +short-title: getSVGDocument +slug: Web/API/HTMLEmbedElement/getSVGDocument +page-type: web-api-instance-method +browser-compat: api.HTMLEmbedElement.getSVGDocument +--- + +{{APIRef("HTML DOM")}} + +The **`getSVGDocument()`** method of the {{domxref("HTMLEmbedElement")}} interface returns the {{domxref("Document")}} object of the embedded SVG. + +## Value + +A {{domxref("Document")}}. + +## Examples + +```js +const svg = document.getElementById("el").getSVGDocument(); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLIFrameElement.getSVGDocument")}} +- {{domxref("HTMLObjectElement.getSVGDocument")}} diff --git a/files/en-us/web/api/htmlembedelement/index.md b/files/en-us/web/api/htmlembedelement/index.md index 3d97aa993ca104d..6a4bc07484b1cde 100644 --- a/files/en-us/web/api/htmlembedelement/index.md +++ b/files/en-us/web/api/htmlembedelement/index.md @@ -33,7 +33,10 @@ _Inherits properties from its parent, {{domxref("HTMLElement")}}._ ## Instance methods -_No specific method; inherits methods from its parent, {{domxref("HTMLElement")}}._ +_Also inherits methods from its parent interface, {{domxref("HTMLElement")}}._ + +- {{domxref("HTMLEmbedElement.getSVGDocument()")}} + - : Returns the embedded SVG as a {{domxref("Document")}}. ## Specifications diff --git a/files/en-us/web/api/htmlembedelement/type/index.md b/files/en-us/web/api/htmlembedelement/type/index.md new file mode 100644 index 000000000000000..42fe8e691f0cba0 --- /dev/null +++ b/files/en-us/web/api/htmlembedelement/type/index.md @@ -0,0 +1,37 @@ +--- +title: "HTMLEmbedElement: type property" +short-title: type +slug: Web/API/HTMLEmbedElement/type +page-type: web-api-instance-property +browser-compat: api.HTMLEmbedElement.type +--- + +{{APIRef("HTML DOM")}} + +The **`type`** property of the {{domxref("HTMLEmbedElement")}} interface returns a string that reflects the `type` attribute of the {{HTMLElement("embed")}} element, indicating the {{glossary("MIME type")}} of the resource. It reflects the {{htmlelement("embed")}} element's [`type`](/en-US/docs/Web/HTML/Element/embed#type) attribute + +## Value + +A string; the MIME type of the resource. + +## Examples + +```js +const el = document.getElementById("el"); +console.log(el.type); // Output: "video/webp" +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLObjectElement.type")}} +- {{domxref("HTMLSourceElement.type")}} +- [Media types found on the web](/en-US/docs/Web/Media/Formats) +- [Important MIME types for web developers](/en-US/docs/Web/HTTP/MIME_types#important_mime_types_for_web_developers) From 5045ba92ac9503b2a00ec85efae4b7d613a64b58 Mon Sep 17 00:00:00 2001 From: 720 <71604450+T34-active@users.noreply.github.com> Date: Thu, 28 Nov 2024 11:02:52 +0800 Subject: [PATCH 10/14] fix typo (#37009) --- files/en-us/web/api/request/clone/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/request/clone/index.md b/files/en-us/web/api/request/clone/index.md index 1a3878ee5b2c4b1..aad74772aea7e59 100644 --- a/files/en-us/web/api/request/clone/index.md +++ b/files/en-us/web/api/request/clone/index.md @@ -54,6 +54,6 @@ const newRequest = myRequest.clone(); // a copy of the request is now stored in ## See also -- [ServiceWorker API](/en-US/docs/Web/API/Service_Worker_API) +- [Service Worker API](/en-US/docs/Web/API/Service_Worker_API) - [HTTP access control (CORS)](/en-US/docs/Web/HTTP/CORS) - [HTTP](/en-US/docs/Web/HTTP) From 1f11fb41a86e51f2411f909b50f252a509522d19 Mon Sep 17 00:00:00 2001 From: MDN Web Docs GitHub Bot <108879845+mdn-bot@users.noreply.github.com> Date: Thu, 28 Nov 2024 04:26:55 +0100 Subject: [PATCH 11/14] fix: auto-cleanup by bot (#37008) chore: auto-fix Markdownlint, Prettier, and front-matter issues --- files/en-us/web/css/css_transforms/index.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/files/en-us/web/css/css_transforms/index.md b/files/en-us/web/css/css_transforms/index.md index 77dca67a2b67d28..e597e3ade23a949 100644 --- a/files/en-us/web/css/css_transforms/index.md +++ b/files/en-us/web/css/css_transforms/index.md @@ -358,8 +358,8 @@ Use the sliders in the example below to modify the translation, rotation, scale, padding: 0; margin-bottom: 4px; accent-color: blue; /* or any color */ - font-family: Inter, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, - "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; + font-family: Inter, "system-ui", "Segoe UI", Roboto, Oxygen, Ubuntu, + Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } #allTransformFieldset > legend { From 801556b40e45c735bf7f74e6db7d10864173e44a Mon Sep 17 00:00:00 2001 From: Chunhui Fu Date: Thu, 28 Nov 2024 13:24:35 +0800 Subject: [PATCH 12/14] fix: delete non-existent anchor point (#36881) * fix: delete non-existent anchor points * update content --- .../web/api/fencedframeconfig/setsharedstoragecontext/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/fencedframeconfig/setsharedstoragecontext/index.md b/files/en-us/web/api/fencedframeconfig/setsharedstoragecontext/index.md index d5a4266a9d0da75..52a2068cc78d126 100644 --- a/files/en-us/web/api/fencedframeconfig/setsharedstoragecontext/index.md +++ b/files/en-us/web/api/fencedframeconfig/setsharedstoragecontext/index.md @@ -22,7 +22,7 @@ setSharedStorageContext(context) ### Parameters - `context` - - : A string representing the contextual data to pass in to shared storage. Once set, this will be stored in the [internal config](/en-US/docs/Web/API/FencedFrameConfig#internal_config) `storageContext` property. + - : A string representing the contextual data to pass into shared storage. Once set, this will be stored in the {{domxref("FencedFrameConfig")}} instance's internal config. ### Return value From 4cb35b4ffa24bc1eb6b1a41a7304075ccd469769 Mon Sep 17 00:00:00 2001 From: Kristy <58140450+kristy-hu@users.noreply.github.com> Date: Thu, 28 Nov 2024 14:42:52 +0800 Subject: [PATCH 13/14] Correct the drop-shadow value in the editor to match with its desc (#37011) Update index.md Correct dropshadow in the editor --- files/en-us/web/css/filter-function/drop-shadow/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/filter-function/drop-shadow/index.md b/files/en-us/web/css/filter-function/drop-shadow/index.md index 283202927579acd..f49dfa86720ab15 100644 --- a/files/en-us/web/css/filter-function/drop-shadow/index.md +++ b/files/en-us/web/css/filter-function/drop-shadow/index.md @@ -92,7 +92,7 @@ div:nth-child(3) { } div:nth-child(4) { - filter: drop-shadow(-16px -6px red); + filter: drop-shadow(-16px -16px red); } ``` From e6e9826543106c62d07a294ab1c6e6d5716a83ad Mon Sep 17 00:00:00 2001 From: Vadim Makeev Date: Thu, 28 Nov 2024 14:28:38 +0100 Subject: [PATCH 14/14] Improve MathML examples (#36925) * Improve MathML examples * Format TeX * Remove spaces from --- .../deriving_the_quadratic_formula/index.md | 60 +++++++--- .../mathml_pythagorean_theorem/index.md | 112 +++++++++++++++++- 2 files changed, 155 insertions(+), 17 deletions(-) diff --git a/files/en-us/web/mathml/examples/deriving_the_quadratic_formula/index.md b/files/en-us/web/mathml/examples/deriving_the_quadratic_formula/index.md index 92abd55265150d1..8f527cfca9ceed7 100644 --- a/files/en-us/web/mathml/examples/deriving_the_quadratic_formula/index.md +++ b/files/en-us/web/mathml/examples/deriving_the_quadratic_formula/index.md @@ -6,14 +6,20 @@ page-type: guide {{MathMLRef}} -This page outlines the derivation of the [Quadratic Formula](https://en.wikipedia.org/wiki/Quadratic_formula). +This page outlines the derivation of the [Quadratic Formula](https://en.wikipedia.org/wiki/Quadratic_formula). Nine equations are organized in the {{MathMLElement("mtable")}} element to align the steps of the derivation by the equal sign. Some steps are annotated with colored text. The derivation is also represented in [LaTeX](https://www.latex-project.org/) format in the {{MathMLElement("annotation")}} element. -We take a quadratic equation in its general form, and solve for x: +## Derivation + +We take a quadratic equation in its general form, and solve for x. + +{{ EmbedLiveSample("Derivation", "", "400px") }} +```html + @@ -21,7 +27,8 @@ We take a quadratic equation in its general form, and solve for x: a - ⁢ + + ⁢ x 2 @@ -29,7 +36,8 @@ We take a quadratic equation in its general form, and solve for x: + b - ⁢ + + ⁢ x + @@ -44,12 +52,14 @@ We take a quadratic equation in its general form, and solve for x: 0 + a - ⁢ + + ⁢ x 2 @@ -57,7 +67,8 @@ We take a quadratic equation in its general form, and solve for x: + b - ⁢ + + ⁢ x @@ -69,6 +80,7 @@ We take a quadratic equation in its general form, and solve for x: c + @@ -101,10 +113,11 @@ We take a quadratic equation in its general form, and solve for x: - Divide out leading coefficient. + Divide out leading coefficient. + @@ -186,10 +199,11 @@ We take a quadratic equation in its general form, and solve for x: - Complete the square. + Complete the square. + @@ -249,10 +263,11 @@ We take a quadratic equation in its general form, and solve for x: - Discriminant revealed. + Discriminant revealed. + @@ -304,10 +319,11 @@ We take a quadratic equation in its general form, and solve for x: - + + @@ -356,10 +372,11 @@ We take a quadratic equation in its general form, and solve for x: - + + x @@ -408,10 +425,11 @@ We take a quadratic equation in its general form, and solve for x: - There's the vertex formula. + There's the vertex formula. + x @@ -449,12 +467,26 @@ We take a quadratic equation in its general form, and solve for x: - + - TODO + + + \begin{aligned} + ax^2 + bx + c &= 0 \\ + ax^2 + bx &= -c \\ + x^2 + \frac{b}{a}x &= -\frac{c}{a} & \text{\color{red} \small Divide out leading coefficient.} \\ + x^2 + \frac{b}{a}x + \left(\frac{b}{2a}\right)^2 &= \frac{-c(4a)}{a(4a)} + \frac{b^2}{4a^2} & \text{\color{red} \small Complete the square.} \\ + \left(x + \frac{b}{2a}\right)\left(x + \frac{b}{2a}\right) &= \frac{b^2 - 4ac}{4a^2} & \text{\color{red} \small Discriminant revealed.} \\ + \left(x + \frac{b}{2a}\right)^2 &= \frac{b^2 - 4ac}{4a^2} \\ + x + \frac{b}{2a} &= \sqrt{\frac{b^2 - 4ac}{4a^2}} \\ + x &= \frac{-b}{2a} \pm \{C\} \sqrt{\frac{b^2 - 4ac}{4a^2}} & \text{\color{red} \small There's the vertex formula.} \\ + x &= \frac{-b \pm \{C\}\sqrt{b^2 - 4ac}}{2a} + \end{aligned} + +``` diff --git a/files/en-us/web/mathml/examples/mathml_pythagorean_theorem/index.md b/files/en-us/web/mathml/examples/mathml_pythagorean_theorem/index.md index 1886fd43f7fe3c2..560aaf029276c91 100644 --- a/files/en-us/web/mathml/examples/mathml_pythagorean_theorem/index.md +++ b/files/en-us/web/mathml/examples/mathml_pythagorean_theorem/index.md @@ -6,14 +6,120 @@ page-type: guide {{MathMLRef}} -We will now prove the [Pythagorean theorem](https://en.wikipedia.org/wiki/Pythagorean_theorem): +This page outlines the proof of the [Pythagorean theorem](https://en.wikipedia.org/wiki/Pythagorean_theorem). Three equations are organized in the {{MathMLElement("mtable")}} element to align the steps of the proof by the equal sign. The proof is also represented in [LaTeX](https://www.latex-project.org/) format in the {{MathMLElement("annotation")}} element. -**Statement**: In a right triangle, the square of the hypotenuse is equal to the sum of the squares of the other two sides. Specifically, if a and b are the legs and c is the hypotenuse, then a2+b2=c2a^2 + b^2 = c^2. +## Proof + +**Statement:** In a right triangle, the square of the hypotenuse is equal to the sum of the squares of the other two sides. Specifically, if a and b are the legs and c is the hypotenuse, then a2+b2=c2a^2 + b^2 = c^2. **Proof:** We can prove the theorem algebraically by showing that on [this figure](https://www.cut-the-knot.org/pythagoras/proof31.gif) the area of the big square equals the area of the inner square (hypotenuse squared) plus the area of the four triangles: +{{ EmbedLiveSample("Proof", "", "100px") }} + +```html - (a+b)2=c2+4⋅(12ab)a2+2ab+b2=c2+2aba2+b2=c2\begin{align*} (a + b)^2 &= c^2 + 4 \cdot \left( \frac{1}{2} ab \right) \\ a^2 + 2ab + b^2 &= c^2 + 2ab \\ a^2 + b^2 &= c^2 \end{align*} + + + + + + + + ( + a + + + b + ) + + 2 + + + + = + + + + c + 2 + + + + 4 + ⋅ + ( + + 1 + 2 + + a + b + ) + + + + + + + a + 2 + + + + 2 + a + b + + + + b + 2 + + + + = + + + + c + 2 + + + + 2 + a + b + + + + + + + a + 2 + + + + + b + 2 + + + + = + + + + c + 2 + + + + + + + \begin{aligned} + (a + b)^2 &= c^2 + 4 \cdot \left( \frac{1}{2} ab \right) \\ + a^2 + 2ab + b^2 &= c^2 + 2ab \\ + a^2 + b^2 &= c^2 + \end{aligned} + + +```