The Web Dev

To use .otf fonts on web browsers with CSS, we use the @font-face rule.

For instance, we write

@font-face {
  font-family: GraublauWeb;
  src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
  font-family: GraublauWeb;
  font-weight: bold;
  src: url("path/GraublauWebBold.otf") format("opentype");
}

to add the fonts with the @font-face rule.

We add the fonts by setting the src property to the font URL.

To prevent body scrolling but allow overlay scrolling with CSS, we set the overscroll-behavior property.

For instance, we write

.overlay {
  overscroll-behavior: contain;
}

to add overscroll-behavior: contain; to prevent body scrolling but allow overlay scrolling with CSS.

To set width/height as a percentage minus pixels with CSS, we use calc.

For instance, we write

div {
  height: calc(100% - 18px);
}

to set the div’s height to 100% minus 18px with calc.

To center a position: fixed element with CSS, we set the transform property.

For instance, we write

div {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

to set the left and top to 50% to move the element near the center.

Then we add transform: translate(-50%, -50%); to move the div to the center.

To hide an element when printing a web page with CSS, we use the @media print query.

For instance, we write

@media print {
  .no-print,
  .no-print * {
    display: none !important;
  }
}

to hide elements with class .no-print and everything inside them with display: none when the page is being printed with the @media print rule.