The Print Layer of app.onepassapps.com: One Button, Two Print Media Queries, and 314 Elements That Vanish

I work on OnePassApps, so this is our own site's own print layer. Every number below was measured on app.onepassapps.com on 9 November 2026: the stylesheet and the page HTML with plain HTTPS, and the layout with one real Chrome on our own desktop, switching the tab into print media through the browser's own emulation.

We have already written about the head, the JSON-LD, the headers and the compression of these pages. This one is about what happens to our pages when somebody prints them.

What I measured

• The stylesheet our terms page links: /assets/index-D4M6hlLQ.css, 255,426 bytes
• Every media query in that file, including the two that only apply to print
• The served HTML of all 56 URLs in our sitemap.xml, looking for print-related markers
• Six pages opened one at a time in Chrome, then switched into print media and read again

Two print rules in one stylesheet

That stylesheet contains exactly two print media queries. Here they are, byte for byte from the file:

@media print{.gd{width:auto;padding-top:0}.gd-top{width:auto;height:auto;padding-top:0;position:static}} 

@media print{:root:has([data-public-info-page]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root body:has([data-public-info-page]) :not(:has([data-public-info-page]),[data-public-info-page],[data-public-info-page] *){display:none}:root:has([data-public-info-page]){block-size:auto;min-block-size:max-content;max-block-size:none;inline-size:auto;box-shadow:none;background:0 0;border:0;margin:0;padding:0;display:block;position:static;overflow:visible}[data-public-info-page],[data-public-info-page] [data-slot=reader-layout]{padding:0;display:block}[data-public-info-page] [data-slot=toc-pane],[data-public-info-page] [data-slot=toc-bar],[data-public-info-page] [data-policy-print-control]{display:none}[data-public-info-page] *{max-block-size:none;box-shadow:none;color:#000;background:0 0;border-color:#0000;transition:none;overflow:visible}[data-public-info-page] [data-policy-section]{break-inside:auto}[data-public-info-page] h2{break-after:avoid}} 

The first rule belongs to the guide pages: it unpins the fixed guide header and drops the top padding. The second belongs to the one policy page: it hides everything that is not inside the policy article, and it sets the policy text to black on white.

Neither rule lives in a page's HTML. Both live in the stylesheet, and the policy rule is keyed to an attribute the page only gets after JavaScript has run.

The one button, and what it calls

Of the six pages I opened, exactly one carries a print control: the terms page. Its label is "Print or save these terms". It is a button inside a span carrying the data-policy-print-control marker and the class "contents", and its click handler is one call to window.print().

The other two apps that print do it their own way, with their own buttons: the Label and Card Maker offers "Print sheets", the Calendar Maker offers "Print / save PDF". Neither uses the policy marker. The plans page and the vote board have no print button at all.

Here is the handler, out of the one JavaScript file that carries it - /assets/App-ClDc4c2D.js, 157,904 bytes:

(0,J.jsx)(`span`,{"data-policy-print-control":``,className:`contents`,children:(0,J.jsx)(p,{icon:kt,label:qa,onClick:()=>window.print()})}) 

That was the only one of the 109 distinct JavaScript files those six page loads fetched that contains the label, the marker or the call.

The terms page, before and after print

The served HTML of our terms page is 74,495 bytes and carries twelve data-policy-section markers - but no policy page marker and no print control, because both are added by React after the page loads. In the live DOM the page has one policy article, one print control, twelve policy sections, fourteen headings, a table-of-contents pane, a table-of-contents bar, a reader layout and twelve buttons.

Switching that same tab into print media changes it like this:

314 of the page's 695 elements are display:none once print media is on, and none of them are hidden with visibility instead. The policy article's own text and its headings turn black, while the outer main element keeps its light text colour.

One detail worth being precise about: the root element's own computed colour-scheme still reads "dark" in print, even though the print rule declares a light scheme for the policy page. The black text comes from the rule's own colour declaration, not from the scheme flipping.

The guide pages

The guide rule is much smaller, and it hides nothing. On our word counter guide the guide container measures 1600px wide with 100px of top padding on screen; in print it is 1590px with no top padding, and the fixed guide header becomes static, 1568px wide, with its 16px of top padding removed. The number of visible elements does not change at all: 177 before, 177 after. The same holds on the CV builder guide, 165 before and 165 after.

So printing a guide page keeps the site's chrome and simply unpins the header. Nothing on a guide page is hidden by the print rules, and the guide pages carry no print control of their own.

Which pages reach a print rule

The terms page is the only policy page. Our privacy path redirects to /terms#privacy, our refunds path to /terms#payments, our legal path to /terms, and our support path is an ordinary page of its own.

Of the 56 URLs in our sitemap, 23 carry the guide marker gd-top - the guides index and 22 guides. Exactly one carries the policy section markers, the terms page. No sitemap URL serves the policy print marker in its HTML at all.

What I did not measure

I emulated print media; I never printed anything to paper and never produced a PDF, so I cannot tell you how these pages paginate, how many sheets they take, or whether a heading lands badly at a page break. I did not open the browser's own print dialog. I opened two of the 23 guide pages, not all of them. I did not test a second browser, a phone's share-to-print, or a dark-mode print. One build, one browser, one day.

If you want to look for yourself, open the terms page, ask the browser for a print preview, and compare it with the screen: the table of contents, the print button and the chrome around the article are gone, and the terms are black on white.

Our terms page: https://app.onepassapps.com/terms?utm_source=devto&utm_medium=community&utm_campaign=print-layer&utm_content=terms-link

Our guides: https://app.onepassapps.com/guides?utm_source=devto&utm_medium=community&utm_campaign=print-layer&utm_content=guides-link