deactivate CSS “user-select” globally - css

I’ve just come across a site using a CSS property -moz-user-select,
set to none, as an anti-user measure:
#content {
-moz-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none
}
How can user-select be disabled completely in Firefox? I’m looking
for a permanent, unconditional and non-overridable solution like a
compile flag or a configuration setting that is guaranteed to be
effective. The expected behavior is that the browser treat all text
as selectable again, as if the property didn’t exist in the first place.

Try using this extension, which explicitly states a feature of "Add Custom JavaScript Codes or Styles (CSS) to an specific page or all pages."
If you add the following CSS to all pages, it should undo the effects, unless the dev (for some reason) used !important on one of their declarations.
* {
-webkit-user-select: unset;
-moz-user-select: unset;
-ms-user-select: unset;
user-select: unset;
}
You could naturally put in a better selector if any specific site is giving you trouble - just increase the specificity.
Full disclosure: I have never used the extension I linked, so I can't vouch for it. I'm just going off what it claims to do.

You can achieve this by adding a custom style in the browser. I use Stylus addon. It's a fork of chrome extension Stylish.
Install the addon
Click Manage
Write a new style
Add these lines in the code section
* {
-webkit-user-select: auto;
-moz-user-select: auto;
-ms-user-select: auto;
user-select: auto;
}
You don't have to add !important rule. The extension forces to apply the custom style by default.

Related

What is the purpose of postcss-autoreset and postcss-initial

What is the purpose for:
PostCSS Autoreset
PostCSS Initial
The documentation is very sparse on both and doesn't really explain why one should use them and what there purpose is.
I've tried autoreset. It seems to place all: initial on every element you style. This seems very wasteful when looking at the output.
How is it any different from:
* {
all: initial,
font-family: "Roboto"
}
Looking at the code for autoreset it seems to do just that: https://github.com/maximkoretskiy/postcss-autoreset/blob/master/src/resetRules.es6
I don't get why this is better than using *
postcss-autoreset protects your from inherited properties in CSS.
Imagine that you wrote a component and publish it to npm. You used BEM or CSS Modules, so selectors are isolated. But some developer took your component to webpage with:
* {
box-sizing: border-box;
line-height: 2
}
Because of non-default box-sizing all your sizes become broken. Because os non-standard line-height text become bigger and broke design.
Here is a real example of such issue in EmojiMart component.
postcss-autoreset will put a all: initial to every selector in your component CSS:
.component {
all: initial; /* added by postcss-autoreset, you didn’t write it */
width: 100px;
padding: 10px;
}
.component_title {
all: initial; /* added by postcss-autoreset, you didn’t write it */
height: 20px;
}
As result this auto-inserted all: initial disable user box-sizing and line-height in your component and your component looks in same way in user website.
This is better than * when you want to create isolable component, meaning component that you can integrate in other people app or website like a plug-in or add-on.

Prevent selection in Firefox in CSS

I want to disallow element selection using only CSS (selection either with the mouse or with CRTL+A). I tried the following:
element {
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
}
element::-moz-selection {
background: transparent;
}
and it does not work correctly in Firefox 20. It works in webkit though. I am able to select images and canvas with CTRL+A even with the above CSS rules.
Is there a way, using CSS only (without JS), to disallow the selection (or at least not show it).
I don't want to stop the user from copying text, I just want to hide the selection on some elements.
I tried the codes in this answer, but it does not seem to work in Firefox 20.
Thanks for your help.
I've tried it in FF20 with the following fiddle: http://jsfiddle.net/ADGsA/
p.noselect { -moz-user-select:none; }
p.recolor::-moz-selection { color: yellow; background: red; }
All behaviours with mouse are as expected, but I can indeed select the text with ctrl-A still. I'm pretty sure this is a bug in Gecko, but it's also quite possibly not one they're going to solve, judging by the MDN reference page:
Note: user-select is not currently part of any W3C CSS specification.
As such, there are minor differences between the browser
implementations. Be sure to test your application across browsers.
Non-standardized, so unpredictable. Take what you get and be lucky with it I guess, you might consider raising a bug on Bugzilla for it since I really think they didn't intend this, as the mentioned page also says:
Controls the appearance (only) of selection.
That would indicate that ctrl-A also should not be able to select it.
EDIT:
It's been a known issue since November 2008. Don't hold your breath for a fix, upvote it and pray.

How to Disable Keyboard Key with CSS?

Can we disable keyboard key (Ctrl+A/Ctrl+C) with CSS, so that nobody can use select all shortcut using keyboard in my website?
No, CSS cannot affect the browser's response to the keyboard. JavaScript can, but JavaScript can also be turned off.
In other words: you can't do that, and even if you do then you can't count on it.
Not with CSS, however it's possible using JavaScript if the browser doesn't have the feature disabled.
Try this css
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
(from an answer to this question)
Though the original question was about selecting text with the mouse, this css seems to disable the ctrl+a / ctrl+c capability as well (at least in a quick test on a sample project)
Might not exactly be the functionality you're looking for, but if it's a small number of elements where you want to exclude a user from focusing, you can go into the html and add tabindex="-1" on that element, which removes it from the keyboard focus list
<div tabindex="-1">element text</div>
and also use this css
.disable{
pointer-events:none;
background:#e9ecef;
}

CSS 3.0 user-select property replacement

I am using CSS 3.0 and it is complaining that the "user-select" property doesn't exist. Does anyone know what the appropriate substitute or replacement is?
user-select is back in the specification for CSS Basic User Interface Module Level 4. It is supported by most modern browsers (according to MDN), either prefixed or unprefixed.
#something {
user-select: none;
-ms-user-select: none;
-moz-user-select: none;
-webkit-user-select: none;
}
user-select was defined as part of User Interface for CSS3, which was later superseded by CSS3 Basic User Interface Module. However, the latter document does not include specification of user-select. After searching recently, I was unable to find any discussion on why it might have been removed from the spec.
See also: my answer on disabling text selection is not working in IE using jquery.

injecting CSS changes with chrome extension

I'm writing some custom chrome extensions to reformat certain sites. I'm having lots of luck with simply hiding things, however I've run into a problem trying to adjust a right-margin on something. Viewing the HTML results in the following:
<div id="bodyContent2" class="en">
In the styles area of the Chrome development tools I see
#bodyContent2.en {
margin-right: 330px;
min-height: 920px;
width: auto;
}
If I manually change that to margin-right: 0px; with Chrome it does exactly what I want. However, the following lines of CSS do not work when called from my manifest.json file in my extension:
#bodyContent2 {margin-right:0px;}
[id='bodyContent2']{margin-right:0px;}
#bodyContent2 .en {margin-right:0px;}
.en {margin-right:0px;}
None of them work and I don't understand why not. I literally just started working with chrome extensions today. Help is much appreciated. In the individual attempts I see the following CSS striked through in the chrome dev tools:
#bodyContent2 {
<strike>margin-right: 0px;</strike>
}
.en {
<strike>margin-right: 0px;</strike>
}
Add !important to your rules to give them higher priority:
margin-right:0px !important;
If you want to understand the order in which css rules are applied read about selector specificity.

Resources