Stop People Copying Your Content with only HTML & CSS
Stopping people from copying content from your website isn’t the best idea. But, people do opt to do it. Usually, people will go for the simple approach of using Javascript. But I’m going to tell you of a new way I recently came across.
There are multiple CSS extensions and CSS directives which disabled the user selection of text on an element. Further, you can actually even disable the mouse right-click with an attribute.
So, how do we do this? Firstly, adding an attribute to a page element, seen below will disable the right-click.
oncontextmenu="return false" Or if you’re looking to remove right-click on the whole body:
<body oncontextmenu="return false">The directive in CSS of user-select: none; will disable any highlight and copying on the page or element. It’s supported in modern browsers, with the exception of Safari on iOS and Mac OSX.
Here’s an example with all prefixes. But of course you wont need this if you’re using a compiler.
.nocopy {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}Prefixes listed against browser usage:
| iOS Safari | -webkit-touch-callout: none; |
| Chrome/Safari/Opera | -webkit-user-select: none; |
| Konqueror | -khtml-user-select: none; |
| Firefox | -moz-user-select: none; |
| Internet Explorer/Edge | -ms-user-select: none; |
We wouldn’t ever recommend using this setting in a live or production website as it’s very unfriendly for any user using your site. But, it’s an interesting feature that a few years ago would have only been achievable via Javascript.