feat(css): Update live samples calling window.print(), add 'allow-modals' (#38232)

* feat(css): Update at_page example, add 'allow-modals'

* feat(css): Update page-orientation example, add 'allow-modals'

* feat(css): Update page prop example, add 'allow-modals'

* feat(css): Update :first example, add 'allow-modals'

* feat(css): use proper IDs for livesamples

* Update files/en-us/web/css/@page/index.md

Co-authored-by: Vadim Makeev <[email protected]>

* Update files/en-us/web/css/@page/page-orientation/index.md

Co-authored-by: Vadim Makeev <[email protected]>

---------

Co-authored-by: Vadim Makeev <[email protected]>

Author: bsmth

files/en-us/web/css/@page/index.md

@@ -288,48 +288,38 @@ An example of this can be found on the [`page`](/en-US/docs/Web/CSS/page#example
 ### Using the size property to change the page orientation
 
 This example shows how to split the `<section>`s into individual pages in `landscape` format with each page having a 20% margin when printed.
+Clicking the print button will launch a print dialog with the HTML sections split into individual pages.
 
-#### HTML
-
-```html
-<button>Print Webpage</button>
+```html live-sample___page-size
+<button>Print page</button>
 <article>
   <section>
-    <h2>Header</h2>
-    <p>
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
-      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
-      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
-      velit.
-    </p>
+    <h2>Header one</h2>
+    <p>Paragraph one.</p>
   </section>
   <section>
-    <h2>Header</h2>
-    <p>
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
-      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
-      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
-      velit.
-    </p>
+    <h2>Header two</h2>
+    <p>Paragraph two.</p>
   </section>
   <section>
-    <h2>Header</h2>
-    <p>
-      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consequatur
-      facilis vitae voluptatibus odio consequuntur optio placeat? Id, nam sequi
-      aut in dolorem dolores, laudantium, quasi totam ipsam aliquam quibusdam
-      velit.
-    </p>
+    <h2>Header three</h2>
+    <p>Paragraph three.</p>
   </section>
 </article>
 ```
 
-#### CSS
+```js live-sample___page-size
+const button = document.querySelector("button");
 
-```css
+button.addEventListener("click", () => {
+  window.print();
+});
+```
+
+```css live-sample___page-size
 @page {
   size: landscape;
-  margin: 20%;
+  margin: 2cm;
 }
 
 section {
@@ -344,7 +334,7 @@ section {
 }
 ```
 
-```css hidden
+```css hidden live-sample___page-size
 body {
   font-family: "Helvetica", sans-serif;
   background-color: silver;
@@ -364,30 +354,16 @@ section {
   print-color-adjust: exact;
   -webkit-print-color-adjust: exact;
   margin: 0 auto;
-  margin-block-end: 1.5rem;
+  margin-block-end: 1rem;
   border: 1px dashed;
 }
 ```
 
-#### JavaScript
-
-```js
-const button = document.querySelector("button");
-
-button.addEventListener("click", () => {
-  window.print();
-});
-```
-
-#### Result
-
-Clicking the print button will launch a print dialog with the html sections split into individual pages.
-
-{{EmbedLiveSample('Using the size property to change the page orientation', '100%', 520)}}
+{{EmbedLiveSample('page-size', '100%', '540', , , , , "allow-modals")}}
 
 ### @page pseudo-class examples
 
-Please refer to the various [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) of `@page` for examples.
+See the various [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes) of `@page` for examples.
 
 - {{Cssxref(":blank")}}
 - {{Cssxref(":first")}}
@@ -404,8 +380,8 @@ Please refer to the various [pseudo-classes](/en-US/docs/Web/CSS/Pseudo-classes)
 
 ## See also
 
+- The {{cssxref("page")}} property
 - The `@page` [`size`](/en-US/docs/Web/CSS/@page/size) descriptor
-- The {{Cssxref("page")}} property
-- See the [\[META\] CSS Paged Media Module Level 3](https://bugzil.la/286443) ticket in Bugzilla for tracking progress on the subject (page-based counters, etc.)
 - [CSS paged media](/en-US/docs/Web/CSS/CSS_paged_media) module
-- [Paged.js: W3C paged media polyfill](https://pagedjs.org/documentation/1-the-big-picture/)
+- [Paged.js: W3C paged media polyfill](https://pagedjs.org/documentation/1-the-big-picture/) on pagedjs.org
+- [\[META\] CSS Paged Media Module Level 3](https://bugzil.la/286443) Bugzilla for tracking progress on the subject (page-based counters, etc.)

files/en-us/web/css/@page/page-orientation/index.md

@@ -54,8 +54,64 @@ This descriptor helps with the layout and orientation of printed documents, espe
 ### Rotating printed pages
 
 This example shows how the contents of a print document can be rotated to suit the page content and the page position.
+In this first part of the CSS code, [named pages](/en-US/docs/Web/CSS/@page#named_pages) are set up to define the direction in which to rotate the content.
+
+```css live-sample___rotating-pages
+@page upright {
+  size: portrait;
+  page-orientation: upright;
+}
+
+@page left {
+  size: landscape;
+  page-orientation: rotate-left;
+}
+
+@page right {
+  size: landscape;
+  page-orientation: rotate-right;
+}
+```
+
+```css hidden live-sample___rotating-pages
+fieldset {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  gap: 1rem;
+  width: fit-content;
+}
+p {
+  max-width: 60ch;
+}
+@media print {
+  fieldset {
+    display: none;
+  }
+  section {
+    font-family: Roboto, sans-serif;
+    font-size: 1.5rem;
+  }
+}
+```
+
+The second part of the CSS code declares a named page rule defined above for the selectors, such as `<section class="left">…</section>`.
 
-```html hidden
+```css live-sample___rotating-pages
+@media print {
+  .upright {
+    page: upright;
+  }
+  .left {
+    page: left;
+  }
+  .right {
+    page: right;
+  }
+}
+```
+
+```html hidden live-sample___rotating-pages
 <fieldset id="printStyle">
   <legend>
     Click Print. The page will be laid out in the defined orientation.
@@ -72,29 +128,8 @@ This example shows how the contents of a print document can be rotated to suit t
   page-orientation: upright;
 }
     </pre>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu
-      convallis ligula, tincidunt malesuada tortor. Ut ac turpis erat. Mauris
-      consequat, leo rhoncus venenatis elementum, sem nisl venenatis justo, non
-      mattis diam massa vitae dolor. Aenean ac dolor et leo laoreet tincidunt.
-      Suspendisse tempus risus nibh, a feugiat mauris pharetra a. Nulla mi dui,
-      scelerisque vitae sollicitudin nec, placerat eget purus. Vivamus enim
-      elit, scelerisque id venenatis eu, sodales vel leo. Quisque bibendum
-      feugiat diam, ut feugiat urna suscipit et. Nulla lacinia metus a nisi
-      volutpat interdum. Lorem ipsum dolor sit amet, consectetur adipiscing
-      elit. Vestibulum vitae elit vel orci malesuada bibendum ut vitae enim. Ut
-      ultrices elit nec vestibulum blandit. In eleifend dui. Nam nec aliquet
-      nunc. Praesent convallis ipsum sed fermentum scelerisque.
-    </p>
-    <p>
-      Praesent posuere, neque non fringilla ultricies, purus mi ullamcorper
-      velit, vitae egestas nisl eros at ex. Nulla sed viverra libero. Praesent
-      sed placerat magna, iaculis commodo lectus. Ut gravida ligula sed purus
-      molestie, in accumsan est eleifend. Etiam consectetur nulla pretium
-      blandit iaculis. Nunc semper libero ut mauris faucibus placerat. Cras ac
-      justo ac est laoreet sollicitudin. Aliquam vel sapien ut sapien vestibulum
-      dictum.
-    </p>
+    <p>Paragraph one.</p>
+    <p>Paragraph two.</p>
   </section>
   <section class="left">
     <h2>Section in Landscape/Left</h2>
@@ -291,77 +326,16 @@ This example shows how the contents of a print document can be rotated to suit t
 </div>
 ```
 
-#### CSS
-
-In this first part of the CSS code, [named pages](/en-US/docs/Web/CSS/@page#named_pages) are set up to define the direction in which to rotate the content.
-
-```css
-@page upright {
-  size: portrait;
-  page-orientation: upright;
-}
-
-@page left {
-  size: landscape;
-  page-orientation: rotate-left;
-}
-
-@page right {
-  size: landscape;
-  page-orientation: rotate-right;
-}
-```
-
-```css hidden
-fieldset {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  gap: 1rem;
-  width: fit-content;
-}
-p {
-  max-width: 60ch;
-}
-@media print {
-  fieldset {
-    display: none;
-  }
-  section {
-    font-family: Roboto;
-    font-size: 1.5rem;
-  }
-}
-```
-
-The following second part of the CSS code declares a named page rule defined above for the selectors, such as `<section class="left">…</section>`.
-
-```css
-@media print {
-  .upright {
-    page: upright;
-  }
-  .left {
-    page: left;
-  }
-  .right {
-    page: right;
-  }
-}
-```
-
-```js hidden
+```js hidden live-sample___rotating-pages
 const printButton = document.querySelector("#print");
 printButton.addEventListener("click", () => {
   window.print();
 });
 ```
 
-### Result
-
-Click the print button to see the pages rotated.
+Click the print button to see the page orientation on print.
 
-{{ EmbedLiveSample('Rotating_printed_pages', '100%', 520) }}
+{{EmbedLiveSample('rotating-pages', '100%', '540', , , , , "allow-modals")}}
 
 ## Specifications
 

files/en-us/web/css/_colon_first/index.md

@@ -30,40 +30,36 @@ The **`:first`** [CSS](/en-US/docs/Web/CSS) [pseudo-class](/en-US/docs/Web/CSS/P
 
 ## Examples
 
-### HTML
+### Using `:first` for page print styles
 
-```html
+Press the "Print!" button to print the example. The words on the first page should be somewhere around the center, while other pages will have their contents at the default position:
+
+```html live-sample___colon-first
 <p>First Page.</p>
 <p>Second Page.</p>
 <button>Print!</button>
 ```
 
-### CSS
-
-```css
+```css live-sample___colon-first
 @page :first {
-  margin-left: 50%;
-  margin-top: 50%;
+  size: 8.5in 11in;
+  margin-left: 3in;
+  margin-top: 5in;
 }
 
 p {
   page-break-after: always;
+  font: 1.2em sans-serif;
 }
 ```
 
-### JavaScript
-
-```js
+```js live-sample___colon-first
 document.querySelector("button").addEventListener("click", () => {
   window.print();
 });
 ```
 
-### Result
-
-Press the "Print!" button to print the example. The words on the first page should be somewhere around the center, while other pages will have their contents at the default position.
-
-{{ EmbedLiveSample('Examples', '80%', '150px') }}
+{{EmbedLiveSample('colon-first', '100%', , , , , , "allow-modals")}}
 
 ## Specifications