From 07e4a2dafe248280b5610f8c7d09b0f30b530f54 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Mon, 10 Jun 2024 09:41:25 -0400 Subject: Initial modifications to rebuilt only changed files based on mod date, performance updates --- build/posts/user-select/index.html | 75 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 build/posts/user-select/index.html (limited to 'build/posts/user-select') diff --git a/build/posts/user-select/index.html b/build/posts/user-select/index.html new file mode 100644 index 0000000..55b94f4 --- /dev/null +++ b/build/posts/user-select/index.html @@ -0,0 +1,75 @@ + + + + + + + + Using User-Select + + + + + + + +
+

Using User-Select

+

2019-06-04

+

Highlighting text in order to copy, cut or paste content is a staple action across the web. Now, what if I told you the ability to control what a user can select is configurable with a single CSS property?

+

Introducing the CSS property

+

Simply put, the user-select property is defined as follows:

+
+

user-select controls whether the user can select text (cursor or otherwise)

+
+

The CSS

+

The property’s available attributes are very straightforward (just remember to target specific browsers for full support!)

+
/* Default */
+p.default {
+    user-select: auto;
+    -moz-user-select: auto;
+    -webkit-user-select: auto;
+}
+
+/* Disable the user from selecting text */
+p.no-select {
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
+/* Select all text when user clicks */
+p.select-all {
+    user-select: all;
+    -moz-user-select: all;
+    -webkit-user-select: all;
+}
+
+

Let’s see it in action

+

Try selecting the separate paragraph elements in the CodePen below:

+

Live CodePen Example

+

Browser Support

+

The great news is user-select is fully supported across all modern browsers (even as far back as IE10!)

+ \ No newline at end of file -- cgit v1.2.3-54-g00ecf