Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Akhter Rasool
Akhter Rasool
8,597 Points
Posted by Akhter Rasool
Akhter Rasool
8,597 Points

Removing styles in Developer Tools

Is there any way to prevent a user to deselect/uncheck a style in css in chrome developer tools?? Because the styles i've chosen should be fixed and shouldnt be modified by anyone.

4 Answers

Cena Mayo
Cena Mayo
55,236 Points
Cena Mayo
Cena Mayo
55,236 Points

No. :) But keep in mind that any fiddling around the user does on your site with dev tools only affects their view of your site, and only for the length of time that they've got dev tools open. Any changes they make don't affect any other users.

Tommy Gebru
Tommy Gebru
30,164 Points
Tommy Gebru
Tommy Gebru
30,164 Points

It is a separately controlled environment ;)

Akhter Rasool
Akhter Rasool
8,597 Points
Akhter Rasool
Akhter Rasool
8,597 Points

i want to keep some styles permanent so that even if the user attempts to disable it shouldn't disable, is this method possible??

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Ultimately the user has control over the html, css, js

They can change whatever styles they want in dev tools or they can even make their own user stylesheet which can override all your styles if they use !important in their declarations. Dev tools is easier but a user style sheet is more permanent.

Generally users would change the styles on your site due to disabilities. They might bump up the font size or change the colors if your chosen color combinations are bad for them.

Or maybe another developer wants to see how you did something and maybe change a few styles to see the effect.

I'm not sure why you want to have this much control over your users.

Kevin Korte
Kevin Korte
28,147 Points
Kevin Korte
Kevin Korte
28,147 Points

Again, no there is nothing you can do. JavaScript won't work, cause I as the user can turn it off or modify it. There is nothing that can be done to prevent me as the user from modifying any of the HTML or css on a page long enough for a screenshot.

But as mentioned, anyone who modifies or turns styles off with the developer tools are only able to affect their view for as long as the page is open. Once they refresh or leave those changes are lost. No one can view them.

Can I ask why it's so important?

Akhter Rasool
Akhter Rasool
8,597 Points
Akhter Rasool
Akhter Rasool
8,597 Points

I actually am working on a project, in which students will have to type their college assignments on a website and submit it to professor there and then itself, but most of the students will copy the assignment of others,(either by taking screenshot or by taking a photo, and sending that image to other friends who will directly copy from that image) and i want to prevent students from copying. I thought of displaying the textarea to none, and when the mouse is hovered over the body element, the textarea is shown ,and disabling keyboard shortcuts through jQuery, Is this possible ??

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Students are only hurting themselves when they cheat.

If cheating is that pervasive where most students are going to do it then maybe online assignments is not the best way to go.

If you try to implement these things then you're only going to make it a hassle for the honest students and slightly harder for the dishonest ones to cheat.

If you change the display to none then I can go into developer tools and change it to something else as others have already mentioned.

If you add an event handler to respond to keyup events like this

$('element').on("keyup", function() {
  // some code to prevent cheating
});

then all I have to do in the console is run

$('element').off();

and that will remove all event handlers attached to that element, not just "keyup".

This stops your code from running.