CSS Design Theft - Can it be Stopped?

Methods of protection

[fashezee]

What methods can I use to protect my CSS file?

I have been using Style Master recently for my CSS (thx to this forum), is there a way of
going incognito with my CSS?

[universalis]

What methods can I use to protect my CSS file?

Simple answer: none! This is perhaps not you want to hear... ;)

[fashezee]

Is there anyway to make it harder for one to copy the styles?

[Slade]

This kind of like the "stop right click" threads that go by every week or so...

If you put it on the web, expect it to be stolen. Period, end of statement. There is nothing I've ever heard of to keep it from happening. (Except for exotic file formats, like flash, et al)

[papabaer]

Reality check: there is nothing to "protect."

The W3.org CSS specs are available to all. Anyone with even a moderate working knowledge of CSS can emulate any given style or stylesheet.

I strongly suspect that your 'belief' that CSS is some sort of crytic formula to be 'protected' stems from the use of an EDITOR to create your styles, istead of originating from a honest knowledge of the CSS Specifications.

Here is the best advice I can offer: STOP USING AN EDITOR TO CREATE YOUR STYLES.

You will only, truly begin to comprehend the mechanisms and style-relationships of CSS, once you begin to write your styles by hand.

I honestly cannot even offer the excuse of 'editors-as-time-savers.' Especially not, if you actually care about your code...

- papabaer

Wanna protect your 'styles'?
Write really bad code!

[lukasz]

Why would you protect your CSS?
Does it include sensitive data?
Have you invented something new?
I am really clueless about that.

[fashezee]

Reality check: there is nothing to "protect."

Why would you protect your CSS?

I'd like to avoid my competition looking at my style sheet and figuring out how I shaved
5k to 10k of my page size.

- positioning within table cells
- drop shadow on tables
- assigning body tag attributes
etc...

are all things you can do with CSS that would reduce the code bloat of your document
as well help you avoid using images for design purposes.
With a SEO perspective; code to content ratio and page size are issues that must be addressed.

Maybe at the present time we cannot prevent; however we can alteast make it difficult for
newcomers to copy paste your CSS.

I've analyzed the top sites in my industry; and they are not using CSS to it's full potential,
I would even go as far as saying that they're using 20% of the power of CSS. They would reduce
their code and page size substantially if they began using CSS.

[TGecho]

If they care enough to rip open your style sheet to try and figure out what you did, they could just as easily go to some tutorial site and learn the same stuff. Unless of course you've come up with something truly original.

Trying to hide your code is a waste of time and money.

[Key_Master]

One way to make it more difficult for competitors to figure out your style sheet is to to use javascript to write the style sheet to the browser and encode the javascript.

[lukasz]

however we can alteast make it difficult for
newcomers to copy paste your CSS.

This particular forum is all about making it easier to newcomers to use CSS.

[ShawnR]

Methods of Protection
The tricks for making css harder to steal are pretty much the same as for making javascript harder to steal:

• using obscure class names
  
• using obscure constructs (See papabaer's post: 'write really bad code')
  
• have it included (e.g. with @import). This could be done multiple levels, so that the would-be thief has to go through many steps to down-load it.
  
• etc
  

Just as for javascript, these tricks are only a deterant. They only work against those with superficial knowledge, as previous posters have stated. But those with more advanced kowledge don't need to steal your css.

Note that the philosophy behind CSS is simplicity, and any techniques to hide it subvert that.

Why Bother
I am not surprised that you got more responses to the effect of 'Why would you want to?' compared to 'This is how:'. WebmasterWorld is all about people sharing knowledge and educating each other in an open way, and that is the sort of person who hangs out here, so the responses posted are no surprise. However, I don't agree with some of these responses. An argument like "...The W3.org CSS specs are available to all. Anyone with even a moderate working knowledge of CSS can emulate any given style or stylesheet..." is kind of like arguing that the C++ specs are available for anyone to download, so why bother protecting IPR of a piece of software, any team of software developers can write a program which acts, looks and feels like yours, given enough time. Sure, css is a pretty simple 'language' and can be learnt relatively quickly, but there are many (most?) out there whose skills are still rudimentary (me included), and even advanced proponents can spend considerable amounts of time getting their css designs right. If it took time and effort to create, you have every right to protect it.

What is there to protect? A whole range of things, from the graphic design of the layout to the technical implimentation . Not that obscuring your css will prevent theft, but it can be a deterant.

Not that I'd bother or recommend obscuring css; just thought I'd balance out the views a bit.

Shawn

[Nick_W]

Thanks Shawn, that's an outstanding round up of the issues and points raised.

Personally I agree 100% but I'll add this to it: It's just one of those things fashezee. I'm afraid you'll just have to live with it, and really, it isn't worth worrying about...

Excellent question, thanks!

Nick

[drbrain]

If I wanted to grab your stylesheets, or learn how you did what you've done with them, I would just open up Mozilla's DOM Inspector and look at what you've done. Its a beautiful tool and makes your CSS completly transparent, showing which style sheets are included, how and where the apply to which rules, etc.

In mozilla, you can use data: URIs (RFC 2397) to obfuscate things by inlining your external style sheets (you can use these for any URI in mozilla). With the appropriate levels of indirection you can really ofuscate things, but then, once you know what's going on, its easy to extract them (and just as easy to view them in Mozilla with the DOM Inspector).

(I really don't blabber about the DOM Inspector enough, it really is the best damn tool for playing with CSS you'll ever find.)

[timhisu]

It's actually easy to save any SWF Flash file now too. In IE6, open the URL to any .swf file. Then simply File > Send > Page by Email. When the email message pops up, drag the .swf file from the attachments and onto your desktop.

[trillianjedi]

You can even get decompilers for .swf now that turn them into their component parts and let you edit them.

TJ

[aspr1n]

There is a way - it works for html as well, not very foolproof, but it certainly will stop most except the most determined. Most "viewers" will not realise this is reversible so you may get away with it. The trick is to run the code through a funtion that converts it to its html entities.

Load the code into: [dynamicdrive.com...]

for an example of what the technique can do.

To be honest though, if your competitors don't have enough brain cells to figure out the benefits of CSS for themselves, then I wouldn't consider them much competition!

asp