AprilSylph/mediaTest.html

## mediaTest.html
<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        writing-mode: horizontal-tb;
      }

      body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        width: 100vw;
        padding: 0;
        margin: 0;

        background-color: black;
      }

      body::before,
      body::after {
        font-size: 96px;
        font-weight: bold;
        text-align: center;
      }

      @media (max-width: 1000px) {
        body::before {
          content: "Under 1000px";
          color: blue;
        }
      }

      @media (min-width: 1000px) {
        body::after {
          content: "Over 1000px";
          color: red;
        }
      }

      [data-inline-size]::after {
        position: fixed;
        bottom: 1ch;
        right: 50%;
        transform: translateX(50%);

        content: "Viewport width: " attr(data-inline-size) "px";
        color: white;
        font-size: 16px;
      }
    </style>
    <script>
      const callback = entries => entries.forEach(({
        target,
        borderBoxSize: [{ inlineSize }],
      }) => Object.assign(target.dataset, { inlineSize }));

      const observer = new ResizeObserver(callback);
      observer.observe(document.documentElement);
    </script>
  </head>
  <body></body>
</html>

## results.md

      
    Raw
  

              results.md
            
          
    In Firefox, a page at exactly 1000px will display both body pseudo-elements.
However, depending on your device and display settings, getting your viewport to exactly 1000px - even using Responsive Design Mode - may be impossible. Firefox is very eager to report non-integer viewport widths, resulting in the illusion that min-width is exclusive while max-width is inclusive when believing that Responsive Design Mode allows you to set whole pixel dimensions.
We could, of course, make max-width almost exclusive, by specifying 999.99px instead of 1000px. Though from the ResizeObserver, you can see Firefox reporting the viewport width up to 13 decimal places, so technically the correct thing to do is @media (max-width: 999.9999999999999px).
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	:root {
	writing-mode: horizontal-tb;
	}

	body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	width: 100vw;
	padding: 0;
	margin: 0;

	background-color: black;
	}

	body::before,
	body::after {
	font-size: 96px;
	font-weight: bold;
	text-align: center;
	}

	@media (max-width: 1000px) {
	body::before {
	content: "Under 1000px";
	color: blue;
	}
	}

	@media (min-width: 1000px) {
	body::after {
	content: "Over 1000px";
	color: red;
	}
	}

	[data-inline-size]::after {
	position: fixed;
	bottom: 1ch;
	right: 50%;
	transform: translateX(50%);

	content: "Viewport width: " attr(data-inline-size) "px";
	color: white;
	font-size: 16px;
	}
	</style>
	<script>
	const callback = entries => entries.forEach(({
	target,
	borderBoxSize: [{ inlineSize }],
	}) => Object.assign(target.dataset, { inlineSize }));

	const observer = new ResizeObserver(callback);
	observer.observe(document.documentElement);
	</script>
	</head>
	<body></body>
	</html>