Don't select that!

Sometimes you don't want a user to be able to select a part of your website, look at the below? You may not be able to select the h1 element:

Don't Select!

This is achieved by the following:

<style type="text/css">
h1{
 -moz-user-select:none;
 -moz-user-focus:ignore;
 cursor:pointer;  /* There's no point in having a 
text cursor if you can't select the text */
}
h1::selection{
 background:inherit;
 color:inherit;
}
</style>

The above works in two ways. First off, if the users browser uses a gecko layout engine, then -moz-user-select:none prevents the user from selection text, and -moz-user-focus prevents the dragging of the text in firefox 3.

In other browsers (*i think* KHTML and/or webkit) if the users browser supports the CSS 3 psuedo selector ::selection, e.g. Apple Safari browser, then the colour of the text which is selected is the same as the colour when it is not selected(this is due to the color property being set to inherit). This is the same for the background property.

Just a note, notice it is ::selection, not :selection. This is because ::selection is a CSS 3 psuedo elements, and it has been decided within the CSS 3 specification that psuedo elements are identified by two colons (::).

Furthermore it is now a good time to point out that if a psuedo element is used which a browser does not recognise, e.g. ::-moz-selection (gecko equivalent to the ::selection) in a non-gecko browser, then the whole block is ignored, for instance:

h1::-moz-selection, h1::selection {}

this will result in the whole block being ignored by all browsers [that support the selection psuedo], due to the fact that they will only support one or the other, and W3C specs say that this is the case.

Finally, getting the no select to work in IE. Internet explorer doesn't support any of the above selection-preventing CSS, so instead we have to use IE specific events:

ondragstart

 and

onselectstart

.

To these events, we add "

return false

", so we have:

<h1 ondragstart="return false" onselectstart="return false">
 Don't Select!</h1>

Outline

When users click links, like this, depending on the browser an outline will be rendered around the link. This is great for accessibility, however graphic intense components of web pages can look poor when user clicks of them, for example navigation bars. To get around this, you can use the following CSS:

a:focus, a:active{
   outline:none;
}

This works in mozilla firefox, and although I haven't checked it should work in opera too.

Why am I making this blog

In my spare time, I sometimes do some web developing, and in doing so I come across some good tips and tricks and create new, helpful codes that many people will find useful. So in this I will share some (hopefully useful) stuff you can use on your site.