<< Back to Programming Forum   Search

Posts 1 - 4 of 4   
JS add CSS (with webkit, moz, o and ms support): 11/18/2017 04:49:02

DanWL 
Level 62
Report
I got a bit board earlier last night and decided to make it really quick and easy to add CSS. This supports all commonly-used CSS.
If you are quite familiar with CSS, you may have noticed that not all rules work with browsers and browser versions in a standard way. For example, if you wanted wanted something to be displayed as a flexbox, you would standard support and temporary support for this item to ensure that the container was behaving in the correct way. To do this you would place "-webkit-" in front of "flex" to get "display: -webkit-flex;". I found it time consuming to support the temporary versions of browsers that have support for this display mode, so I thought if there was a way to do this faster.

The code can be found at https://greasyfork.org/en/scripts/35370-add-css/code.
Documentation can be found at https://greasyfork.org/en/scripts/35370-add-css/ and in the code.
To use this on a userscript, add this to the metablock:
// @require https://greasyfork.org/scripts/35370-add-css/code/Add_CSS.js?version=231493

To use this on any webpage, add this to the <head>of a HTML file:
<script src = "https://greasyfork.org/scripts/35370-add-css/code/Add_CSS.js?version=231493"></script>


Feel free to use this and suggest features that could be supported. If you've got any questions about how to use it, inform me.
Also, I have noticed that the GM_addStyle functionality is no longer supported (at least by Greasymonkey). Maybe this could replace it.

Edited 11/19/2017 16:55:25
JS add CSS (with webkit, moz, o and ms support): 11/18/2017 05:16:57


knyte 
Level 58
Report
Is this just to speed up the process of writing CSS or specifically for some third-party stuff like userscripts?

For development, while this might be convenient, I don't see the advantage of using this instead of a CSS preprocessor. SCSS mixins seem like a way to do this with about the same amount of (arguably less) work.

What's your intended use-case for this? I think I'm missing something here.

Edited 11/18/2017 05:17:14
JS add CSS (with webkit, moz, o and ms support): 11/18/2017 12:28:39

DanWL 
Level 62
Report
To speed up writing CSS. Never heard of SCSS before. Because of how I made this, you don't need to press as much keys to get the same CSS rules. Sometimes there are JS values such as an object's scrollHeight or width that I need to include in CSS rules - SCSS doesn't support this.
JS add CSS (with webkit, moz, o and ms support): 11/18/2017 20:51:20

DanWL 
Level 62
Report
Changes:

  • Added support to give multiple selectors different rules
  • Supported indented CSS and easy access to media queries
  • Made general usage more readable
Posts 1 - 4 of 4