Merge branch 'main' into wasm-tail

mdn · Oct 9, 2024 · eff6da1 · eff6da1
2 parents 8df0205 + 71e5651
commit eff6da1
Show file tree

Hide file tree

Showing 64 changed files with 1,154 additions and 1,148 deletions.
diff --git a/.github/workflows/auto-merge.yml b/.github/workflows/auto-merge.yml
@@ -5,7 +5,7 @@ on: [pull_request_target]
 jobs:
   auto-merge:
     runs-on: ubuntu-latest
-    if: github.actor == 'dependabot[bot]'
+    if: github.event.pull_request.user.login == 'dependabot[bot]'
     steps:
       - uses: actions/checkout@v4
       - uses: ahmadnassri/action-dependabot-auto-merge@v2

diff --git a/.prettierignore b/.prettierignore
@@ -1,3 +1,4 @@
 CHANGELOG.md
 docs/
 live-examples/html-examples/inline-text-semantics/rtc.html
+live-examples/js-examples/statement/statement-empty.js
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,42 @@
 # Changelog
 
+## [2.6.1](https://github.com/mdn/interactive-examples/compare/v2.6.0...v2.6.1) (2024-07-18)
+
+
+### Bug Fixes
+
+* place vendor-prefixed props first in declaration order ([#2812](https://github.com/mdn/interactive-examples/issues/2812)) ([182fa05](https://github.com/mdn/interactive-examples/commit/182fa0526b6415dd14b241ed8b9f750a27a68943))
+
+## [2.6.0](https://github.com/mdn/interactive-examples/compare/v2.5.1...v2.6.0) (2024-07-03)
+
+
+### Features
+
+* update editor recommendations ([#2800](https://github.com/mdn/interactive-examples/issues/2800)) ([7ee5969](https://github.com/mdn/interactive-examples/commit/7ee59696a7437e4d2035189bf8d6ff08b25551f5))
+
+## [2.5.1](https://github.com/mdn/interactive-examples/compare/v2.5.0...v2.5.1) (2024-06-10)
+
+
+### Bug Fixes
+
+* **css:** add cue pseudo element with argument case ([#2787](https://github.com/mdn/interactive-examples/issues/2787)) ([0923c6c](https://github.com/mdn/interactive-examples/commit/0923c6c3a2bde867102704733266afd5b5a009ec))
+
+## [2.5.0](https://github.com/mdn/interactive-examples/compare/v2.4.1...v2.5.0) (2024-05-03)
+
+
+### Features
+
+* Upgrade stylelint to v16.5.0 ([#2770](https://github.com/mdn/interactive-examples/issues/2770)) ([e9dcc1f](https://github.com/mdn/interactive-examples/commit/e9dcc1f361590717238ee4cf550e789af8bef0ab))
+
+## [2.4.1](https://github.com/mdn/interactive-examples/compare/v2.4.0...v2.4.1) (2024-03-06)
+
+
+### Bug Fixes
+
+* `Intl.getCanonicalLocales` error message ([#2741](https://github.com/mdn/interactive-examples/issues/2741)) ([f5a8492](https://github.com/mdn/interactive-examples/commit/f5a8492c5fefbc0bc301163b13b19f8edc0925ba))
+* **ci:** migrate to husky v9 ([#2731](https://github.com/mdn/interactive-examples/issues/2731)) ([dee2d96](https://github.com/mdn/interactive-examples/commit/dee2d96f858a2c1eefda37bf4f840a28e3b0cd22))
+* **js:** ignore formatting empty statement example with code comment ([#2696](https://github.com/mdn/interactive-examples/issues/2696)) ([0b33754](https://github.com/mdn/interactive-examples/commit/0b337543c9ebc4bf0b7d302848b85748c182d167))
+
 ## [2.4.0](https://github.com/mdn/interactive-examples/compare/v2.3.5...v2.4.0) (2024-01-23)
 
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -18,7 +18,7 @@ This guide focuses on contributing examples, although we welcome contributions t
 
 To contribute live examples all you need is a text editor, git, a GitHub account, and Nodejs.
 
-As far as text/code editors go, there are more editors than you can shake a stick at, so it's down to personal preference. [Visual Studio](https://code.visualstudio.com/download) and [Atom](https://atom.io/) are great editors we can definitely recommend.
+As far as text/code editors go, there are more editors than you can shake a stick at, so it's down to personal preference. [Visual Studio Code](https://code.visualstudio.com/download) and [WebStorm](https://www.jetbrains.com/webstorm/) are great editors we can definitely recommend.
 
 For more information on setting up Git on your machine, [read this article](https://help.github.com/articles/set-up-git/).
 

diff --git a/live-examples/css-examples/animation/animation-delay.css b/live-examples/css-examples/animation/animation-delay.css
@@ -25,19 +25,6 @@
   animation-direction: alternate;
 }
 
-@-webkit-keyframes slide {
-  from {
-    background-color: orange;
-    color: black;
-    margin-left: 0;
-  }
-  to {
-    background-color: orange;
-    color: black;
-    margin-left: 80%;
-  }
-}
-
 @keyframes slide {
   from {
     background-color: orange;

diff --git a/live-examples/css-examples/animation/animation-direction.css b/live-examples/css-examples/animation/animation-direction.css
@@ -22,19 +22,6 @@
   font-size: 2rem;
 }
 
-@-webkit-keyframes slide {
-  from {
-    background-color: orange;
-    color: black;
-    margin-left: 0;
-  }
-  to {
-    background-color: orange;
-    color: black;
-    margin-left: 80%;
-  }
-}
-
 @keyframes slide {
   from {
     background-color: orange;

diff --git a/live-examples/css-examples/animation/animation-duration.css b/live-examples/css-examples/animation/animation-duration.css
@@ -22,19 +22,6 @@
   font-size: 2rem;
 }
 
-@-webkit-keyframes slide {
-  from {
-    background-color: orange;
-    color: black;
-    margin-left: 0;
-  }
-  to {
-    background-color: orange;
-    color: black;
-    margin-left: 80%;
-  }
-}
-
 @keyframes slide {
   from {
     background-color: orange;

diff --git a/live-examples/css-examples/animation/animation-fill-mode.css b/live-examples/css-examples/animation/animation-fill-mode.css
@@ -22,19 +22,6 @@
   animation: slide 1s ease-in 1;
 }
 
-@-webkit-keyframes slide {
-  from {
-    background-color: orange;
-    color: black;
-    margin-left: 0;
-  }
-  to {
-    background-color: orange;
-    color: black;
-    margin-left: 80%;
-  }
-}
-
 @keyframes slide {
   from {
     background-color: orange;

diff --git a/live-examples/css-examples/animation/animation-iteration-count.css b/live-examples/css-examples/animation/animation-iteration-count.css
@@ -23,19 +23,6 @@
   animation-timing-function: ease-in;
 }
 
-@-webkit-keyframes slide {
-  from {
-    background-color: orange;
-    color: black;
-    margin-left: 0;
-  }
-  to {
-    background-color: orange;
-    color: black;
-    margin-left: 80%;
-  }
-}
-
 @keyframes slide {
   from {
     background-color: orange;

diff --git a/live-examples/css-examples/animation/animation-name.css b/live-examples/css-examples/animation/animation-name.css
@@ -13,19 +13,6 @@
   width: 150px;
 }
 
-@-webkit-keyframes slide {
-  from {
-    background-color: orange;
-    color: black;
-    margin-left: 0;
-  }
-  to {
-    background-color: orange;
-    color: black;
-    margin-left: 80%;
-  }
-}
-
 @keyframes slide {
   from {
     background-color: orange;
@@ -39,19 +26,6 @@
   }
 }
 
-@-webkit-keyframes bounce {
-  from {
-    background-color: orange;
-    color: black;
-    margin-bottom: 0;
-  }
-  to {
-    background-color: orange;
-    color: black;
-    margin-bottom: 40%;
-  }
-}
-
 @keyframes bounce {
   from {
     background-color: orange;

diff --git a/live-examples/css-examples/animation/animation-play-state.css b/live-examples/css-examples/animation/animation-play-state.css
@@ -17,19 +17,6 @@
   animation-direction: alternate;
 }
 
-@-webkit-keyframes slide {
-  from {
-    background-color: orange;
-    color: black;
-    margin-left: 0;
-  }
-  to {
-    background-color: orange;
-    color: black;
-    margin-left: 80%;
-  }
-}
-
 @keyframes slide {
   from {
     background-color: orange;

diff --git a/live-examples/css-examples/animation/animation-timing-function.css b/live-examples/css-examples/animation/animation-timing-function.css
@@ -21,19 +21,6 @@
   font-size: 2rem;
 }
 
-@-webkit-keyframes slide {
-  from {
-    background-color: orange;
-    color: black;
-    margin-left: 0;
-  }
-  to {
-    background-color: orange;
-    color: black;
-    margin-left: 80%;
-  }
-}
-
 @keyframes slide {
   from {
     background-color: orange;

diff --git a/live-examples/css-examples/animation/animation.css b/live-examples/css-examples/animation/animation.css
@@ -7,15 +7,6 @@
   border-radius: 50%;
 }
 
-@-webkit-keyframes slidein {
-  from {
-    margin-left: -20%;
-  }
-  to {
-    margin-left: 100%;
-  }
-}
-
 @keyframes slidein {
   from {
     margin-left: -20%;

diff --git a/live-examples/css-examples/backgrounds-and-borders/background-clip.html b/live-examples/css-examples/backgrounds-and-borders/background-clip.html
@@ -22,7 +22,6 @@
 
   <div class="example-choice">
     <pre><code class="language-css">background-clip: text;
--webkit-background-clip: text;
 color: transparent;</code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>

diff --git a/live-examples/css-examples/backgrounds-and-borders/border-style.css b/live-examples/css-examples/backgrounds-and-borders/border-style.css
@@ -1,7 +1,6 @@
 #example-element {
   background-color: #eee;
   color: #000;
-  border-color: #a52a2a;
   border: 0.75em solid;
   padding: 0.75em;
   width: 80%;

diff --git a/live-examples/css-examples/box-alignment/align-content.css b/live-examples/css-examples/box-alignment/align-content.css
@@ -3,7 +3,7 @@
   display: grid;
   grid-template-columns: 60px 60px;
   grid-auto-rows: 40px;
-  grid-gap: 10px;
+  column-gap: 10px;
   height: 180px;
 }
 

diff --git a/live-examples/css-examples/box-alignment/justify-content.css b/live-examples/css-examples/box-alignment/justify-content.css
@@ -4,7 +4,7 @@
   display: grid;
   grid-template-columns: 60px 60px;
   grid-auto-rows: 40px;
-  grid-gap: 10px;
+  row-gap: 10px;
 }
 
 #example-element > div {

diff --git a/live-examples/css-examples/box-alignment/place-content.css b/live-examples/css-examples/box-alignment/place-content.css
@@ -3,7 +3,6 @@
   display: grid;
   grid-template-columns: 60px 60px;
   grid-auto-rows: 40px;
-  grid-gap: 10px;
   height: 180px;
   width: 220px;
 }

diff --git a/live-examples/css-examples/flexbox/order.css b/live-examples/css-examples/flexbox/order.css
@@ -19,10 +19,6 @@
 
 #example-element::after {
   content: attr(style);
-  background: #444;
+  outline: 2px dashed;
   font-family: monospace;
 }
-
-code {
-  background: #444;
-}
diff --git a/live-examples/css-examples/fragmentation/box-decoration-break.html b/live-examples/css-examples/fragmentation/box-decoration-break.html
@@ -1,18 +1,19 @@
 <section
   id="example-choice-list"
   class="example-choice-list"
-  data-property="box-decoration-break -webkit-box-decoration-break">
+  data-property="-webkit-box-decoration-break box-decoration-break">
   <div class="example-choice">
-    <pre><code class="language-css">box-decoration-break: slice;
--webkit-box-decoration-break: slice;</code></pre>
+    <pre><code class="language-css">-webkit-box-decoration-break: slice;
+box-decoration-break: slice;
+    </code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>
   </div>
 
   <div class="example-choice">
-    <pre><code class="language-css">box-decoration-break: clone;
--webkit-box-decoration-break: clone;</code></pre>
+    <pre><code class="language-css">-webkit-box-decoration-break: clone;
+box-decoration-break: clone;</code></pre>
     <button type="button" class="copy hidden" aria-hidden="true">
       <span class="visually-hidden">Copy to Clipboard</span>
     </button>

diff --git a/live-examples/css-examples/logical-properties/border-style.css b/live-examples/css-examples/logical-properties/border-style.css
@@ -1,7 +1,6 @@
 #example-element {
   background-color: #eee;
   color: #000;
-  border-color: #a52a2a;
   border: 0.75em solid;
   padding: 0.75em;
   width: 80%;

diff --git a/live-examples/css-examples/pseudo-class/autofill.css b/live-examples/css-examples/pseudo-class/autofill.css
@@ -3,10 +3,6 @@ label {
   margin-top: 1em;
 }
 
-input:autofill {
-  border: 3px solid darkorange;
-}
-
-input:-webkit-autofill {
+input:is(:-webkit-autofill, :autofill) {
   border: 3px solid darkorange;
 }
diff --git a/live-examples/css-examples/pseudo-class/modal.css b/live-examples/css-examples/pseudo-class/modal.css
@@ -10,3 +10,7 @@ button {
   border: 2px solid burlywood;
   border-radius: 5px;
 }
+
+p {
+  color: black;
+}
diff --git a/live-examples/css-examples/pseudo-element/cue.css b/live-examples/css-examples/pseudo-element/cue.css
@@ -1,8 +1,12 @@
 video {
-  width: 250px;
+  width: 100%;
 }
 
 video::cue {
   font-size: 1rem;
   color: yellow;
 }
+
+::cue(u) {
+  color: red;
+}
diff --git a/live-examples/css-examples/svg/pointer-events.html b/live-examples/css-examples/svg/pointer-events.html
@@ -38,7 +38,7 @@
       <p>
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
           <a xlink:href="#">
-            <circle cx="50" cy="50" r="40" stroke="#ffb500" stroke-width="5" fill="#264653" />
+            <circle cx="50" cy="50" r="40" stroke="#ffb500" stroke-width="5" fill="#3E6E84" />
             <text x="50" y="55" text-anchor="middle" fill="white">SVG</text>
           </a>
         </svg>