// ------------------------------------------------------- // Use Macros ("constants" or "set-once variables") in CSS // ------------------------------------------------------- This JavaScript library lets you use macros in your CSS files, using the following CSS-accepted syntax: @macros { macro_1: value_1; macro_2: value_2; macro_3: value_3; macro_4: value_4; } element { some-property: macro_1 } .class { some-property: macro_2; } #id { some-property: macro_3; } *:pseudo-class { some-property: macro_4; } Global macros for cross-stylesheet designs are also supported: @global-macros { macro_1: value_1; macro_2: value_2; macro_3: value_3; ... } These can be declared in any stylesheet and will apply to all stylesheets that exist when the DOMContentLoaded event fires. Browsers that don't support JavaScript stylesheet manipulation, as well as browsers that have scripts disabled, will load CSS files that use macros just fine, but will ignore any rule that uses a macro as property value, so things don't break in older browsers, but you will need to declare fallback rules (preceding the macro override) for any rule that should have some specific value when there is no javascript available (much like how we design modern web pages already anyway). Obvious, changing macro values on the fly using JavaScript is supported. There are new functions on the DOM (specifically, on the CSSStyleSheet and StyleSheetList objects) as well as for jQuery. DOM API: document.styleSheets[n].getMacro("some-property"); document.styleSheets[n].setMacro("some-property","new value"); document.styleSheets.setMacro("style.css", "some-property","new value"); document.styleSheets.setMacroForAll("some-property","new value"); jQuery API: var value = $('list').macro("some-property"); var value = $('list[href="style.css"]').macro("some-property"); $('list').macro("some-property","new value"); $('list[href="style.css"]').macro("some-property", "new value"); A demonstrator page with a more elaborate explanation for this project can be found at: http://pomax.nihongoresources.com/pages/CSSmacros // ------------------------------------------- (c) Mike "Pomax" Kamermans you may use this however you like, including commercially, although a link to the github project page would be appreciated.