Hide & Protect CSS Code

You can hide CSS code or protect CSS code to a certain degree. It's common for web developers and software engineers to reverse engineer stuff. An experienced software engineer can look into whatever you are trying to hide by implementing certain techniques.

So these techniques are not fool proof but can give anybody tough time to figure out. One way is to use CSS import method. If you view page source for any page, you can view the attached CSS file where all CSS code is visible. You can hide it by importing it by using another CSS file.

import statement for CSS file will do the job.

After that when we see the HTML source, CSS code will be hidden and all you will see in file will be name of CSS file that is being imported. You can minify CSS code. I am using SCSS file and that is being converted into CSS via Live SASS compiler Visual Studio Code extension. That extension is also converting CSS into minified code. Minified code is not easy to recognize or make sense of. However you can unminify it easily.

If you don't work with SCSS or 'live sass compiler', you can use another visual studio code extension that is 'minify'. After installing and enabling this extension, open CSS file, hit F1 and select minify, and your CSS file will be minified. So minification also can protect your CSS code.

You can obfuscate code or modify code in a way that it becomes hard to figure out. Use any online tool to obfuscate CSS code. I have cssobfuscator tool. After code conversion, CSS code is even more hard to make sense of. More complicated than CSS minified code. So this technique can also be used to hide or protect CSS code.

But as I mentioned, these techniques are not fool proof. So please keep this in mind.

✅ How to Hide JavaScript Code
   • How To Hide / Protect JavaScript Code | Ja...  

✅ Hide CSS Code
   • Hide & Protect CSS Code  
✅ Smooth Scroll with CSS Only
   • Smooth Scroll to DIV on Different Page usi...  
✅ Lazy Load with Only CSS
   • Lazy Load HTML Elements (Pure CSS) | Lazy ...  
✅ CSS Only Custom Radio Buttons and Checkboxes
   • CSS Only Radio Button, Checkbox & Form Sty...  
✅ Extend Content Beyond Container | Full Width Content in Container | Break Out of Container
   • Extend Content Beyond Container | Full Wid...  
✅ Break Out of Container for Half Screen Width | CSS Tutorial
   • Break Out of Container for Half Screen Wid...  
✅ CSS Only Toggle Divs
   • CSS Only Toggle Divs | Pure CSS Toggle Sho...  
✅ CSS Only Accordion
   • CSS Only Accordion Tutorial | Pure CSS Acc...  
✅ ONE LINE CSS Code for Smooth Transition Effects in Whole Site | Easy & Smooth Transitions
   • ONE LINE CSS Code for Smooth Transition Ef...  
✅ CSS Only Two Liner Toggle
   • CSS Only Two Liner Toggle Show Hide | Togg...  
✅ More CSS Tutorials:
   • CSS  

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

Channel:    / webstylepress  
Website: https://www.webstylepress.com
FaceBook:   / webstylepress  
Twitter:   / webstylepress  
Instagram:   / webstylepress  
LinkedIn:   / webstylepress  
GitHub: https://github.com/webstylepress
#css #tutorials #security #csstutorial #coder #code #webstylepress #webdevelopment