Category: CSS

Sometimes, we want to disable browser print options (headers, footers, margins) from page with CSS

In this article, we’ll look at how to disable browser print options (headers, footers, margins) from page with CSS.

How to disable browser print options (headers, footers, margins) from page with CSS?

To disable browser print options (headers, footers, margins) from page with CSS, we can set print styles with the @page directive.

For instance, we write

@page {
  size: auto;
  margin: 0mm;
}

html {
  background-color: #ffffff;
  margin: 0px;
}

body {
  border: solid 1px blue;
  margin: 10mm;
}

to set the page size to auto and set margin to 0mm when the page is printed with

@page {
  size: auto;
  margin: 0mm;
}

Then we set styles for the html and body element that applies everywhere below that.

Conclusion

To disable browser print options (headers, footers, margins) from page with CSS, we can set print styles with the @page directive.

Sometimes, we want to add horizontal scrollbar on top and bottom of table with CSS.

In this article, we’ll look at how to add horizontal scrollbar on top and bottom of table with CSS.

How to add horizontal scrollbar on top and bottom of table with CSS?

To add horizontal scrollbar on top and bottom of table with CSS, we rotate the parent and child containers by 180 degrees.

For instance, we write

.parent {
  transform: rotateX(180deg);
  overflow-x: auto;
}

.child {
  transform: rotateX(180deg);
}

to set transform to rotateX(180deg) to rotate the parent and child.

Conclusion

To add horizontal scrollbar on top and bottom of table with CSS, we rotate the parent and child containers by 180 degrees.

Sometimes, we want to make an area unclickable with CSS.

In this article, we’ll look at how to make an area unclickable with CSS.

How to make an area unclickable with CSS?

To make an area unclickable with CSS, we set the pointer-events CSS property to none.

For instance, if we have a link:

<a href='https://example.com'>
  link
</a>

Then we can make it unclickable with:

a {
  pointer-events: none;
}

Conclusion

To make an area unclickable with CSS, we set the pointer-events CSS property to none.

Sometimes, we want to prevent pull-down-to-refresh in Mobile Chrome.

In this article, we’ll look at how to prevent pull-down-to-refresh in Mobile Chrome.

How to prevent pull-down-to-refresh in Mobile Chrome?

To prevent pull-down-to-refresh in Mobile Chrome, we can set the overscroll-behavior-y CSS property to contain.

For instance, we write:

html,
body {
    overscroll-behavior-y: contain;
}

to disable pull to refresh in mobile Chrome for the whole page.

Conclusion

To prevent pull-down-to-refresh in Mobile Chrome, we can set the overscroll-behavior-y CSS property to contain.