Skip to content

johnnytisdale/random-css

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Random CSS

Randomize your style.

What's New?

Typescript

We are now using TypeScript. The upside is that we can use interfaces and abstract classes. The downside is that we are using TypeScript.

Content Security Policy

Random CSS is now compatible with a strict Content Security Policy, i.e., one that forbids the use of inline CSS. The root component has an unsafe prop which defaults to false. If you pass true to this prop, then it will use inline CSS. Otherwise it will use external CSS and you must be sure to link to the CSS file in your <head>.

While using external CSS is considered safer, it comes with a tradeoff: It significantly limits the number of possible values supported for some CSS properties, particularly color properties.

To use an external stylesheet, we have to create a rule for every value that we want to support for a given property. This means that using rgb() is pretty much out of the question. rgb() accepts three integers, each ranging from 0 to 255. So to support every possible combination, we would have to create 2563 = 16,777,216 rules for each color property. Creating that many rules for just one property results in a stylesheet that is over 1GB in size.

So when using external CSS, we use the color keywords, of which there are only 142.

Testing

  1. npm install
  2. npm run watch
  3. Open index.html in browser.

Authors

License

This project is licensed under the ISC License. See LICENSE.md for details.

Acknowledgements

About

Customizable hyperdynamic styling!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published