A small selection of little-known techniques for HTML, CSS, and JavaScript.
The frontend is the first line of defense of the website (or, more pr...
For further actions, you may consider blocking this person and/or reporting abuse
There is a special circle in hell for people who disable paste.
A massive security issue as it makes people choose simpler passwords etc. and an even bigger accessibility issue as people with cognitive disabilities may rely on copy and pasting information to fill out forms, authentication etc.
Luckily WCAG 2.2 addresses this fact so it will now mean your site is not WCAG compliant and therefore illegal in about 80% of countries.
w3.org/WAI/WCAG22/Understanding/ac...
So don't fucking do it on inputs or at all preferably.
Oh and while
navigator.connection.downlink;is hopefully going to be useful one day, at the moment it is so unreliable (even if "supported" it doesn't actually report accurate results) you can't use it if you actually want to make decisions based upon it.So 4.5 useful tip and 1 terrible idea! 😋🤣
Either way though the other tips are well worth a ❤ and a 🦄!
p.s.
insetis only 82% coverage on browsers so you will want to polyfill it if you use it on anything important andoverscroll-behavior-ydoesn't work on iPhone (Google or Safari) and only has 75% coverage so you can't really rely on that either, not sure if a polyfill exists for that - still useful things to know but don't just use them blindly.There's at least some valid cases but they are very specific.
For example: a student test/exam where the page doesn't want answers copy & pasted.
I still don't think that would be a valid case, but I can understand why you and José (comment further down) have said that.
For example: what exam could you possibly be taking where copy and pasting an answer would actually be a thing or be useful to you as a student trying to cheat?
If you did that it would just be plagiarising and you would be marked down anyway.
Plus if you were cheating you could just rewrite the answer, I doubt anyone would copy a whole book into an online exam so it would be pretty straight forward to copy an answer by just typing it in manually in so all you did was slow them down a little bit.
Now if someone was dyslexic and liked to use a Word Processor to write in a font that makes it easier for them to read, or adjust the line length so they don't lose their place (as long line lengths can be difficult for certain types of dyslexia), you need copy and paste.
There are other things to consider such as people with poor vision may find it a lot easier to write in a certain program that is already set to their font size and contrast requirements and copy and paste in etc.
The road to hell is paved with good intentions like disabling paste to try and stop cheating, it won't work but it will mean that somebody who isn't cheating will suffer.
do not disable copy and paste, it is that simple. I wouldn't normally be so forceful but people try and justify terrible practices and may read your comment thinking "oh yeah, that is a good idea", without thinking about the consequences (or whether it would actually be effective).
That's not a web problem, it's a "test moderation" problem. There's plenty of other ways to detect or especially prevent cheating.
One really (but I mean REALLY) cool tip - the hidden attribute ... that one alone makes this post worthwhile, even when I don't really care about the rest ... oh and yes disabling copy/paste sounds like the worst idea ever, I can't come up with any use case where it would make sense ...
Why hidden is better than .some{display:none} ?
Great post! I cannot think of any use case for disabling pasting other than annoying the user 😆.
It's annoying indeed. I've seen it in a form where the user had to put their email twice in order to verify it. So it was twice as annoying as both fields had paste disabled.
The perfect way to ensure you enter your email incorrectly… twice…
I think it will come in handy later. I will make a note of it :)
Typing helps reinforcing concepts so it can be used in educational institutes and also in cheat prevention systems in online examinations.
Can't believe I didn't know about the "hidden" attribute!!!
BTW, don't forget to addaria-hidden=truefor accessibility ;)Actually, the
hiddenattribute is a lot less useful than it initially seems. It has a lower order of priority, so any CSS rules which change the display of an element will be able to completely override it. For example:This bit me this week. Changed a div to a font awesome icon, but the fa class overrode the hidden attribute, so the new icon was unexpectedly always visible.
You will likely improve the accessibility of that icon considerably if you use an inline SVG, although not knowing your exact situation, I can't say that with absolute certainty. Font icons typically don't play nicely with screen readers or Braille browsers, so that icon becomes effectively non-existent for people relying on that technology to browse the Web.
From an accessibility context, you can generally add a label to the control in any variety of ways, and show that instead of an icon. Which how I generally use fontawesome.
<button title="GitHub"><i class="fab fa-github"></i></button>
This gives the button a tooltip, which screen readers can read instead.
<button><i class="fab fa-github"></i><span class="visually-hidden">GitHub</span></button>
Or a "hidden" span using Bootstrap 5's utility classes.
Not all screen readers will read out
titleattributes, so you shouldn't be relying on that. You can use ARIA attributes instead, but therse should be used as a last resort.Also, inlining and SVG can be useful to avoid extra HTTP requests, all of which have a negative impact on the performance of the page, especially if the user is on a slow or metered connection (which is most of the world, including a lot of the USA). Again, I'm not saying always do this, but it can be used as part of an overall strategy.
Probably not necessary to include the whole of Bootstrap for what is effectively a 4-5 lines of CSS to set an item to be visually hidden but available to screen readers as well, that will be another performance hit.
Even if you can't inline the SVG, you can make it a background image and add it in as a data URL in the CSS. For icons this is generally fine, as icons are very simple, so the data URL is actually quite small. It's often more performant to do this than have the CSS reference external image files.
Paste disable could be useful for test input, to avoid cheating.
But not good for students with dyslexia, as @inhuofficial said here.
Does anyone know an HTML attribute for tool tips? I swear I read one of these articles that showed a very simple way to do it. But know I want to use this feature and all I can find are very long & involved html/css. I love css and wouldn't mind if it was only a few lines of code but I don't want something very complicated.. Thanks
I was unaware of
overscroll-behavior-y: contain;thanks!About inset you say "inset is a boolean property, it takes into account the email direction". I think you mean it's a logical property, and it respects the flow direction. Following the link you provided to the Mozilla docs, there is no mention of booleans or email.
good poiny
Amazing post!
Hope you found it interesting
Interesting. thanks 🙏
Very awesome! Thank you for sharing your knowledge!
Thank you so much
Hi great stuff
But I would recommend adding that while using the hidden feature you cant do animation on it .
You have to add className any way
Ready
I feel old now. None of them were beknownst to me, except hidden. Nice stuff.
Third one was interesting
Thanks
great tips, thanks for the help
Great Techniques!!!
Thank you <3
I think that the English word to describe your post @ra1nbow1 is: gorgeous.
Na minha língua eu usaria: delicinha
Very useful information. Thank you so much
Thanks a lot
Basically learned 5 out of 6 things. Thanks! 🔥
Dear Mtvey Romanov，may I translate your article into Chinese?I would like to share it with more developers in China. I will give the original author and original source.