Sunday, May 17, 2015

HTML: Disabling Text Selection


Being able to disable the selection of text can be very helpful, for numerous reasons. You can disable the selection of most of the text on a page, only allowing the parts that are important. Or, you can completely disable selection, which can help prevent plagiarism of your original work.

So how do you work this magic?

You can do it pretty easily with HTML and CSS. However, it's not as easy as just entering a tag or command. Text selection enabling or disabling commands differ depending on the browser being used by the viewer. In order to make sure that you block selection from all browsers, you need to include vendor prefixes with each line of code. (A vendor prefix is a short piece of code that is required by certain commands depending on the browser.)

I borrowed the following code and vendor prefixes from http://basicuse.net.

.no-selection {  
-webkit-touch-callout: none;   
-webkit-user-select: none;  
-khtml-user-select: none;
-moz-user-select: none;   
-ms-user-select: none;   
user-select: none; }

So, in order to disable text selection, all you have to do is paste that code in between the <style> tags at the beginning of your webpage. Then, just apply the "no-selection" class to anything you don't want selected.

This sentence, for example, cannot be selected or copy-and-pasted.

Friday, May 8, 2015

Website... Review? Share? Basic Use

I wanted to share this interesting website with you guys. Although I haven't seen enough of it to give an actual review, it looks very cool.

Here, there are a bunch of cool things you can do with simply HTML5 and CSS3.