Stop People Copying Your Content with only HTML & CSS

Posted on: November 27, 2019
Blog Web

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.

Copy and paste mac

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.

The Importance of User Experience: Boost Sales and Keep Users Happy
The Importance of User Experience: Boost Sales and Keep Users Happy
Posted on: January 22, 2020

We’ve all been there. You visit a website and find it frustratingly difficult to locate what you’re looking for, or it takes so long to load that you give up and go back to…

Read more
Why Upgrade to Magento 2?
Why Upgrade to Magento 2?
Posted on: January 15, 2020

Since being launched in 2008, Magento has built an enviable reputation as the most powerful and flexible eCommerce solution on the market, offering a compelling mix of developer-friendly features and unrivalled scalability. In 2015,…

Read more
Northern Digital Shortlisted
Northern Digital Shortlisted
Posted on: December 6, 2019

Today we’ve been shortlisted for a Northern Digital Award on our work on a current client of ours, Nemesis Now. We couldn’t be happier with the site and neither could Nemesis Now Let’s hope we win. Short and sweet…

Read more