How can pure CSS prevent users from copying the content of a web page?

Hello everyone, I'm Pinellia 👴, a sand sculpture programmer who has just started writing articles. If you like my articles, you can follow ➕ Like 👍 Add me on WeChat: frontendpicker , learn and communicate front-end together, become a better engineer ~ pay attention to the public No.: Pinellia in front-end , learn more about front-end knowledge! Click me to explore the new world!

Original link ==> http://sylblog.xin/archives/70

foreword

When banging my personal blog, on the details page of the blog, for different content, I want to have different ways of copying. For example, I want readers to copy the code block by clicking, which is convenient for readers to debug locally, and for the text description part, I hope that readers can not be allowed to copy. As a determined extremist who can use CSS and never JS, I finally found user-select in CSS3.

compatibility

user-select

Used to control whether the user can select text. Select all, select some.

select all

In many cases, users may want to copy the complete content at one time, such as a piece of code, password, and some keys.

user-select:all : Allows the user to click to select an element.

Here we demonstrate the effect of three different Html tags.

 h2 {
        user-select: all;
      }

      code {
        user-select: all;
        width: 500px;
        display: block;
        padding: 10px;
        color: #31808c;
        background-color: #f5f4ef;
      }

      div {
        user-select: all;
      }

 <h2>点击试试看</h2>
    <pre>
        <code>
        const num = 1;

        const result = (function () {
          delete num;
          return num;
        })();
        
        console.log(result);
        </code>
    </pre>
    <p>
      const num = 1; const result = (function () { delete num; return num; })();
      console.log(result);
    </p>

But all also has an embarrassing disadvantage. As long as you set all, you can't select some content.

Disable selection

For elements in web pages, you can use user-select: none; to prevent users from selecting content.

Partially selected

Why is there such a statement? For ordinary web pages, we can choose specific content. For example, in the following page, we can partially select the content,

But the title part here mainly refers to the elements that cannot be selected on the opposite side. For example, there is such a tag sup in html, which is mainly used to add corner labels to elements.

 <p>我后面有个角标<sup>1</sup>我前面有角标</p>

When you want to copy this text: I have a corner mark behind me 1 I have a corner mark in front , this corner mark will also be copied.

At this point, we need to set the corner mark, which can also ensure that when your p tag is user-select:all, the copy will also ignore the corner mark!

 sup {
  -webkit-user-select: none;
  user-select: none;
}

Extended: set the selected style

CSS provides the ::selection` pseudo-element to style text selections

You can style the text selection by targeting the ::selection pseudo-element. However, only the following properties can be set:

 color
background-color
cursor
caret-color
outline and its longhands
text-decoration and its associated properties
text-emphasis-color (en-US)
text-shadow

E.g

 p::selection {
  color: #fffaa5;
  background-color: #f38630;
  text-shadow: 2px 2px #31808c;
}

The selected effect is as follows: