Caution: This version is a BETA.
Stable version checklist:
-
Support all modern Browser and IE 9+ -
Support CSS parse on server side - no malfunction of the code
CSSC is a CSS Controller to manage your Cascading Style Sheets.
CSSC can be used to define Cascading Style Sheets (CSS) in your browser, to change/show/delete allready defined CSS.
The controller object (CSSC) is a function to get handler object or to import new style sheets.
- get handler object
var h = CSSC(".className"); //get handler object with all CSS objects are defined as .className h = CSSC([".className1", ".className2"]); //get handler object with .className1 and .className2 h = CSSC(/\.className[0-9]{,1}/); //get handler obejct with objects matched to regular expression h = CSSC(); //get handler object with all defined CSS objects
- define CSS (import)
//define new style sheets in browser CSSC({ ".className": { border: "1px solid #000" }, ".className1": { border: "1px dotted #000" }, ".className2": function(){ //updatable object return { border: "none" }; } });
init is a method to initialize allready defined CSS. After init you can change, show or delete CSS.
.init(initObj)
initObj- DOM "<style>", "<link>" element, an other CSSC object, StyleSheet object or Array containing it.
Return value - Controller object (CSSC)
// init all defined CSS rules in
// '<style id="style-sheet">...</style>' element
CSSC.init(document.getElementById("style-sheet"));
// init all CSS rules in all
// '<style>...</style>' elements
CSSC.init(document.querySelectorAll("style")); import is a meth 9E88 od to import JS objects to the CSS Controller.
.import(importObj)
importObj- an object with style sheets
Return value - Controller object (CSSC)
var importObj = {
body: {
margin: 1
},
p: {
width: 500,
margin: "auto",
"span.first": { // generate CSS rule "p span.first"
"font-size": 25
},
"@media screen and (max-width: 500px)": { // generate media rule with "p" rule
width: "100%"
}
},
".updatable": function(){ // generate updatable class
return {
'font-size': 10 + (Math.random() * 10),
};
}
};
CSSC.import(importObj); //alternativly can be used simply CSSC(importObj);update is a method for updating CSS properties which have been defined via functions
.update([selector])
selector[optional] - a selector as String or RegEx or Array of Strings
Return value - Controller object (CSSC)
CSSC.update(); // update all CSS rules which were defined through functions
// or
CSSC.update(".updatable"); // update CSS rule .updatable when it was defined through functionexport is a method to export defined CSS as String, Object or Array
.export([exportType])
exportType[optional] - String with export type (default: "object")"css"- export as CSS String"min"- export as minified CSS String"obj"- export as JS-Object"arr"- export as array"object"- the same as "obj""objNMD"- export as not multidimensional object"array"- the same as "arr"
Return value - Mixed
CSSC({
body: {
margin: 1
},
p: {
width: 500,
margin: "auto",
"span.first": { // generate CSS rule "p span.first"
"font-size": 25
},
"@media screen and (max-width: 500px)": { // generate media rule with "p" rule
width: "100%"
}
},
".updatable": function(){ // generate updatable class
return {
'font-size': 10 + (Math.random() * 10),
};
}
});
var exportObject = CSSC.export(); // or CSSC.export("obj") or CSSC.export("object")
console.log(JSON.stringify(exportObject, true, 4));
/*
{
"body": {
"margin": "1px"
},
"p": {
"width": "500px",
"margin": "auto",
"span.first": {
"font-size": "25px"
},
"@media screen and (max-width: 500px)": {
"width": "100%"
}
},
".updatable": {
"font-size": "18.34px"
}
}
*/
exportObject = CSSC.export("css");
console.log(exportObject);
/*
body {
margin: 1px;
}
p {
width: 500px;
margin: auto;
}
p span.first {
font-size: 25px;
}
@media screen and (max-width: 500px) {
p {
width: 100%;
}
}
.updatable {
font-size: 18.34px;
}
*/
exportObject = CSSC.export("min");
console.log(exportObject);
/*
body{margin:1px;}p{width:500px;margin:auto;}p span.first{font-size:25px;}@media screen and (max-width:500px){p{width:100%;}}.updatable{font-size:18.34px;}
*/
exportObject = CSSC.export("objNMD");
console.log(JSON.stringify(exportObject, true, 4));
/*
{
"body": {
"margin": "1px"
},
"p": {
"width": "500px",
"margin": "auto"
},
"p span.first": {
"font-size": "25px"
},
"@media screen and (max-width: 500px)": {
"p": {
"width": "100%"
}
},
".updatable": {
"font-size": "18.34px"
}
}
*/
exportObject = CSSC.export("array");
console.log(JSON.stringify(exportObject, true, 4));
/*
[
{
"body": {
"margin": "1px"
}
},
{
"p": {
"width": "500px",
"margin": "auto"
}
},
{
"p span.first": {
"font-size": "25px"
}
},
{
"@media screen and (max-width: 500px)": [
{
"p": {
"width": "100%"
}
}
]
},
{
".updatable": {
"font-size": "18.34px"
}
}
]
*/parse is a method to parse defined CSS. This method is identical to .export(CSSC.type_export.css) or export(CSSC.type_export.min)
.parse([min])
min[optional] - Boolean, if true return a minified CSS (default: false)
Return value - String with CSS
/*
this method returns the same result as .export("css") or .export("min");
*/
exportObject = CSSC.parse(); // or .parse(false)
console.log(exportObject);
/*
body {
margin: 1px;
}
p {
width: 500px;
margin: auto;
}
p span.first {
font-size: 25px;
}
@media screen and (max-width: 500px) {
p {
width: 100%;
}
}
.updatable {
font-size: 18.34px;
}
*/
exportObject = CSSC.parse(true);
console.log(exportObject);
/*
body{margin:1px;}p{width:500px;margin:auto;}p span.first{font-size:25px;}@media screen and (max-width:500px){p{width:100%;}}.updatable{font-size:18.34px;}
*/new is a method to get a new CSS Controller (CSSC)
.new()
Return value - New Controller object (CSSC)
var newCSSC = CSSC.new();
newCSSC({
".myClass": {
"margin-top": 10
}
});conf is a method to set or get configurations.
.conf([conf[, value]])
conf[optional] - An object with key-value pair to set, Array of Strings to get or key as String to set/getvalue[optional] - if conf a String becomes value to set
Return value - Mixed -> Controller object (CSSC) if set or object key-value pair or configuration value
CSSC.conf({ // set as object
style_id: "my-style-sheets", // [String] Document element ID
view_err: true, // [Boolean] Show errors in console
parse_tab_len: 4 // [Integer] Length of space characters by export
});
CSSC.conf("style_id", "cssc-sheet"); // set with key String
CSSC.conf("style_id"); // get with key String
CSSC.conf(["style_id", "parse_tab_len"]); // get with Array of strings, return an object as key-value pair
CSSC.conf(); // get all defined configurationsvars is a method to set or get variables. If you need to use variable keys, you can use this method.
.vars([var[, value]])
var[optional] - An object with key-value pair to set, Array of Strings to get or key as String to set/getvalue[optional] - if conf a String becomes value to set
Return value - Mixed -> Controller object (CSSC) if set or object key-value pair or variable value
//The principle of set and get vars is the same as with conf method.
CSSC.vars({
T: "-top", // use String / Integer / Float
R: "-right",
B: "-bottom",
L: "-left",
box: { // use Objects or Arrays
m: "margin",
p: "padding"
},
media: function(a, b) // use Functions
{
return "@media "+a+" and (max-width: "+b+"px)";
},
MT: "$box.m$T", // use vars in vars
});
// begin the var with "$" character
CSSC({
body: {
"$box.m": 10,
"$box.p$T": 15,
"$media(screen, 500)": {
"$box.m$B": 20,
$MT: 25
}
}
});
console.log(CSSC.parse());
/*
body {
margin: 10px;
padding-top: 15px;
}
@media screen and (max-width: 500px) {
body {
margin-bottom: 20px;
margin-top: 25px;
}
}
*/this method is a helper function, can be used to test your vars.
.parseVars(text[, vars])
text- A String, the text to parsevars[optional] - An object with variables as key-value pair
Return value - Parsed string
CSSC.vars({
myVar: "my variable text",
});
var val = CSSC.parseVars("this is $myVar");
console.log(val);
/*
this is my variable text
*/
val = CSSC.parseVars("this is $myVar", {myVar: "my temporarily overwritten text"});
console.log(val);
/*
this is my temporarily overwritten text
*/
val = CSSC.parseVars("this var $notExists");
console.log(val);
/*
this var $notExists
*/this method is a helper function, can be used to parse CSS from simple object
.cssFromObj(obj[, min[, tabLen]])
obj- A simple object to parsemin[optional] - a Boolean if the value true, return value is a minified CSS String (default: false)tabLen[optional] - an Integer to define the length of tab (default: 2)
Return value - Parsed string
var cssString = CSSC.cssFromObj({body:{margin: "20px"}});
console.log(cssString);
/*
body {
margin: 20px;
}
*/
cssString = CSSC.cssFromObj({body:{margin: "20px"}}, true);
console.log(cssString);
/*
body{margin:20px;}
*/
cssString = CSSC.cssFromObj({body:{margin: "20px"}}, false, 8);
console.log(cssString);
/*
body {
margin: 20px;
}
*/this method is a helper function, can be used to generate an object from a css string.
.objFromCss(css)
css- A CSS String
Return value - Generated object
var cssObj = CSSC.objFromCss("body{margin:20px;}");
console.log(JSON.stringify(cssObj, true, 4));
/*
{
"margin": "20px"
}
*/version is a String with version number of CSS Controller
console.log(CSSC.version);
/*
1.0b
*/type is an object with CSS type definitions
console.log(JSON.stringify(CSSC.type, true, 4));
/*
{
"rule": 1,
"charset": 2,
"import": 3,
"media": 4,
"fontFace": 5,
"page": 6,
"keyframes": 7,
"keyframe": 8,
"namespace": 10,
"counterStyle": 11,
"supports": 12,
"fontFeatureValues": 14,
"viewport": 15
}
*/type_export is an object with CSS Controller export-type definitions
console.log(JSON.stringify(CSSC.type_export, true, 4));
/*
{
"css": "css",
"min": "min",
"obj": "obj",
"arr": "arr",
"object": "object",
"notMDObject": "objNMD",
"array": "array"
}
*/_conf is an object with default CSSC configurations
console.log(JSON.stringify(CSSC._conf, true, 4));
/*
{
"style_id": "cssc-style", // [String] ID of the "<style>" element
"view_err": true, // [Boolean] if true, the errors are displayed in console
"parse_tab_len": 2, // [Integer] Length of space characters by export
"parse_unit_default": "px", // [String] default unit to set on values if integer or float given
"parse_vars_limit": 100 // [Integer] limit to max parse variables
}
*/The Handler object is an object to get, set, delete, update and export defined CSS properties. You get this object from the controller object
var h = CSSC(".className"); //get a handler object with all CSS objects are defined as .className
h = CSSC([".className1", ".className2"]); //get a handler object with .className1 and .className2
h = CSSC(/\.className[0-9]{,1}/); //get a handler obejct with objects matched to regular expression
h = CSSC(); //get a handler object with all defined CSS objectsget is a method to get CSS properties
.get([propertie[, returnAll]])
propertie[optional] - A String with property name. If this value is not given, return this method an object with all properies of the Handler objectreturnAll[optional] - A Boolean. If true, the return value is an Array with all found properties; if false, the return value is the last definition of property in the Handler object (default: false)
Return value - Mixed -> Object, String or Array of Strings, depending on how the parameters were set
CSSC({
body: [{
margin: 10,
padding: 5,
},{
border: "1 solid #ccc",
padding: 7
}]
});
var val = CSSC("body").get("padding");
console.log(val);
/*
7px
*/
val = CSSC("body").get("padding", true);
console.log(JSON.stringify(val, true, 4));
/*
[
"5px",
"7px"
]
*/
val = CSSC("body").get();
console.log(JSON.stringify(val, true, 4));
/*
{
"body": [
{
"margin": "10px",
"padding": "5px"
},
{
"border": "1px solid #ccc",
"padding": "7px"
}
]
}
*/set is a method to set CSS properties
.set(toSet[, value])
toSet- A property to set as String, an object to set with key-value pair, a function that returns the values to set, or Array containing an object or function with key-value.value[optional] - use this whentoSeta String. A value to set as String/Integer/Float, a function that returns the values to set, an object to create a new CSS rule or an Array with objects to create new rules.
Return value - Handler object.
CSSC({
body: {
margin: 10,
padding: 5,
}
});
CSSC("body").set("border", "1 solid red");
console.log(CSSC.parse());
/*
body {
margin: 10px;
padding: 5px;
border: 1px solid red;
}
*/
CSSC("body").set({margin: 20, padding: 0});
console.log(CSSC.parse());
/*
body {
margin: 20px;
padding: 0px;
border: 1px solid red;
}
*/
CSSC("body").set(".newClass",{margin: "5 0 0 10", float: "left"});
console.log(CSSC.parse());
/*
body {
margin: 20px;
padding: 0px;
border: 1px solid red;
}
body .newClass {
margin: 5px 0px 0px 10px;
float: left;
}
*/
CSSC("body .newClass").set({border: "1 solid #ccc", "/.class1":{float: "none"}});
console.log(CSSC.parse());
/*
body {
margin: 20px;
padding: 0px;
border: 1px solid red;
}
body .newClass {
margin: 5px 0px 0px 10px;
float: left;
border: 1px solid #ccc;
}
body .newClass.class1 {
float: none;
}
*/delete is a method to delete a CSS property or a CSS rule
.delete([property])
property[optional] - A property name to delete. If this value not given, the method deletes the complete rule(s)
Return value - Handler object.
CSSC({
body: [{
margin: 10,
padding: 5,
},{
border: "1 solid #ccc",
padding: 7
}]
});
var parsed = CSSC.parse();
console.log(parsed);
/*
body {
margin: 10px;
padding: 5px;
}
body {
border: 1px solid #ccc;
padding: 7px;
}
*/
// delete property
CSSC("body").delete("padding");
parsed = CSSC.parse();
console.log(parsed);
/*
body {
margin: 10px;
}
body {
border: 1px solid #ccc;
}
*/
//delete rule
CSSC("body").first().delete();
parsed = CSSC.parse();
console.log(parsed);
/*
body {
border: 1px solid #ccc;
}
*/update is a method to update updatable properties or rules
.update()
Return value - Handler object.
CSSC({
'.updatable1': function(){
return {
width: Math.random()*100+100,
height: Math.random()*100+100,
};
},
'.updatable2': {
width: 20,
height: function(){ return Math.random()*10+10; }
}
});
var parsed = CSSC.parse();
console.log(parsed);
/*
.updatable1 {
width: 166.16px;
height: 147.66px;
}
.updatable2 {
width: 20px;
height
DB5E
: 16.13px;
}
*/
CSSC(".updatable1").update();
parsed = CSSC.parse();
console.log(parsed);
/*
.updatable1 {
width: 101.4px;
height: 143.95px;
}
.updatable2 {
width: 20px;
height: 16.13px;
}
*/
CSSC(/\.updatable[12]/).update();
parsed = CSSC.parse();
console.log(parsed);
/*
.updatable1 {
width: 117.66px;
height: 198.24px;
}
.updatable2 {
width: 20px;
height: 10.94px;
}
*/export is a method to export defined CSS as String, Object or Array
.export([exportType])
exportType[optional] - String with export type (default: "object")"css"- export as CSS String"min"- export as minified CSS String"obj"- export as JS-Object"arr"- export as array"object"- the same as "obj""objNMD"- export as not multidimensional object"array"- the same as "arr"
Return value - Mixed
CSSC({
body: {
margin: 1
},
p: {
width: 500,
margin: "auto",
"span.first": {
"font-size": 25
},
"@media screen and (max-width: 500px)": {
width: "100%"
}
}
});
var exportObject = CSSC("p").export(); // or CSSC.export("obj") or CSSC.export("object")
console.log(JSON.stringify(exportObject, true, 4));
/*
{
"p": {
"width": "500px",
"margin": "auto",
"span.first": {
"font-size": "25px"
},
"@media screen and (max-width: 500px)": {
"width": "100%"
}
}
}
*/
exportObject = CSSC("p").export("css");
console.log(exportObject);
/*
p {
width: 500px;
margin: auto;
}
*/parse is a method to parse defined CSS. This method is identical to .export(CSSC.type_export.css) or .export(CSSC.type_export.min)
.parse([min])
- *
min[optional]* - Boolean, if true return a minified CSS (default: false)
Return value - String with CSS
/*
this method returns the same result as .export("css") or .export("min");
*/
exportObject = CSSC("p").parse(true);
console.log(exportObject);
/*
p{width:500px;margin:auto;}
*/pos is a method to get a Handler object with style element of the given position
.pos(position)
position- Integer, the position of found style elements. If the position is negative, count the position from last.
Return value - Handler object with style element of the given position
CSSC({
p: [{
height: 100
},{
width: 500
},{
color: "green"
}]
});
var handler = CSSC("p");
console.log(handler.e.length);
/*
3
*/
console.log(handler.parse());
/*
p {
height: 100px;
}
p {
width: 500px;
}
p {
color: green;
}
*/
console.log(handler.pos(0).parse());
/*
p {
height: 100px;
}
*/
console.log(handler.pos(1).parse());
/*
p {
width: 500px;
}
*/
console.log(handler.pos(-1).parse());
/*
p {
color: green;
}
*/first is a method to get a Handler object with first style element. This method is equivalent to .pos(0)
.first()
Return value - Handler object with first style element
CSSC({
p: [{ height: 100 },{ width: 500 },{ color: 0xff00 }]
});
console.log(CSSC("p").first().parse());
/*
p {
height: 100px;
}
*/last is a method to get a Handler object with last style element. This method is equivalent to .pos(-1)
.last()
Return value - Handler object with last style element
CSSC({
p: [{ height: 100 },{ width: 500 },{ color: 0xff00 }]
});
console.log(CSSC("p").last().parse());
/*
p {
color: rgb(0, 255, 0);
}
*/e is an Array with CSS Objects
CSSC({
".className": {
border: "1px solid #000"
},
".className1": {
border: "1px dotted 0x0"
},
".className2": {
border: "none"
}
});
CSSC(".className").e
CSSC(/\.className/).e