An abstract set of custom classes that handle the CSSOM objects in different windows and browsers. What we have here is basically, three classes:
- the list of all style sheets of a window, represented by
g3.css.StyleSheetList - a specific style sheet, represented by
g3.css.StyleSheetand - a specific rule of a style sheet, represented by
g3.css.Rule.
Native properties are exposed as custom object properties defined as accessors. So, setting properties on custom objects results in similar changes at the equivalent native ones. Pay attention though, that the other way round, changes on native style object properties through native code are not reflected in custom objects unless they are rebuilt!
Similarly, reading the properties of the custom objects reflects the real values of the native ones.
- a bug in static method
g3.css.StyleSheetList.filter()was corrected - filter on
declarationpart is possible - custom errors
g3.Errorare thrown instead ofalert().
- now, filtering is capable through simple or chained(!) filters
- user can override the static function
filterthat belongs to classg3.css.StyleSheetList - we can move back and forth between different views of the sheet/rule collection based on filters or not and never re-build anything again(!)
- added the ability to build a full tree of style sheets and rules by passing on construction a second argument,
new g3.css.StyleSheetList(win, infinite)(the first filter withdeep: truewill certainly make a deep re-build if not asked from start but only once during object'sg3.css.StyleSheetListlifetime!) - if you really want to re-built it just call
new g3.css.StyleSheetList(win, infinite) - if you don't want to re-built it just call
g3.css.StyleSheetList.get(win) - inserted rules re-build silently only the specific style sheet they belong to(!)
- complex filtering cases tested with success even with IE8 which interprets rules differently
- late construction of style sheets and rules on user demand still holds
- build-and-forget still holds (call
g3.css.StyleSheetList.get(window)) except if user decides to re-build.
Now, when you create a g3.css.StyleSheetList object, all sub-objects of type g3.css.StyleSheet and g3.css.Rule are created automatically resulting in a 3-level structure and no deeper!
Of course, in reality it can go much deeper but it's very simple to proceed from 4-level and higher with the use of method g3.css.Rule.getNative
On v.0.4 this is done with a second argument true passed during construction: new g3.css.StyleSheetList(win, infinite) or, on the first filter with deep: true.
Imagine an html file:
test-g3css-stub1.html
/ \ <HEAD>
| | ...
L | | <link rel="stylesheet" type="text/css" media="all" href="test-g3css-stub-link1.css" />
E | | <style media="screen,print">...</style>
V / list \ <style media="print">...</style>
E \ / ...
L | | </HEAD>
| | <BODY>
1 | | ...
\ / </BODY>
Level-1 style list object is apparent: var csslist = new g3.css.StyleSheetList(win);
Level-2 objects represent style sheets: var sheet0 = csslist.item(0); ...
test-g3css-stub1.html L / sheet0 \ <link rel="stylesheet" type="text/css" media="all" href="test-g3css-stub-link1.css" /> E | | V / sheet1 \ <style media="screen,print">...</style> E \ / L | sheet2 | <style media="print">...</style> 2 \ /
Level-3 objects represent rules of a style sheet: var rule00 = sheet0.cssRules[0];
test-g3css-stub-link1.css
L / rule00 \ @import url("test-g3css-stub-link2.css") screen,print;
E | |
V / rule01 \ .container_12 {...}
E \ /
L | rule02 | .grid, .grid_12 {...}
3 \ /
And that's it!
Going deeper ============Natively, the mechanism is applied with imported rules as in rule00. So, how can we scan a whole style sheet chain coming from imported links?
Programmatically, we could have added a public property: g3.css.Rule.styleSheet that would be a new custom g3.css.StyleSheet object and that would be enough to start a new circle of Level-2 ==> Level-3 objects!
Instead, they are built on demand as follows: var sheet00 = new g3.css.Rule.styleSheet(rule00.getNative()), i.e. build the style sheet that comes from rule rule00. And that is enough to start a new circle of construction automatically that will stop when the rules of the new sheet are built!
On v.0.4 this is done with a second argument true passed during construction: new g3.css.StyleSheetList(win, infinite) or, on the first filter with deep: true.
test-g3css-stub-link2.css
L / rule000 \ ... {...}
E | |
V / rule001 \ @import url("test-g3css-stub-link3.css");
E \ /
L | rule002 | ... {...}
4 \ /
Levels 4-5 are built on demand. The same applies to 6-7 etc.
Just my.class.js and my custom error class g3Error.js(included).
- Constructor:
var list = new g3.css.StyleSheetList(win, infinite) - Get a style sheet:
list.item(n) - Filter rules with
list.filter(object)whereobject = {deep: <boolean>, href: <uri>, rule: <RegExp|String|Array[String]>, selector: <RegExp|String|Array[String]>, declaration: <RegExp|String|Array[String]>, wordPart: <Boolean>, style: <Boolean>, link: <Boolean>, id: <String>} - Get a 2D array with
list.getFilterRules()where at indexia style sheetlist.get(i)is found with matched ruleslist.get(i).cssRules[j]that have indeces the values of the arraylist.getFilterRules()[i] - Stop filtering and return to full style sheet/rule view with
list.end() - Get a constructed style sheet list with
g3.css.StyleSheetList.get(window, infinite)or, force to create one if not already there, finally, - build a new custom filter at
g3.css.StyleSheetList.filter(text, selectors, wordPart)(see code comments).
- Length of list:
list.length
- Constructor:
var sheet = list.item(n) - Get the native style sheet:
sheet.getNative() - Set a native style property:
sheet.set('media') - Insert a rule at index 3:
sheet.insertRule('.container_12{width: 50%;}', 3) - Delete a rule at index 3:
sheet.deleteRule(3) - Replace a rule at index 3:
sheet.replaceRule('.grid, .grid_12{width: 50%;}', 3)
- The
styleorlinknode:sheet.ownerNode - The
@importrule object:sheet.ownerRule - The type of style sheet:
sheet.type - The css text:
sheet.cssText - An array of
g3.css.Ruleobjects:sheet.cssRules - The length of
sheet.cssRules:sheet.length - The real
cssRulesarray in <=IE8 starts at index higher by (0 for other browsers):sheet.disposition - The disabled property:
sheet.disabled - The href property:
sheet.href - The media property:
sheet.media - The title property:
sheet.title
- Constructor:
var rule = list.item(n).cssRules[m] - Get the native rule:
rule.getNative() - Get a descriptive type name of the type property:
rule.getTypeName()
- The css text:
rule.cssText - The selector part of a rule:
rule.selector - The declaration part of a rule:
rule.declaration - The type property of a rule:
rule.type - The href property of a rule:
rule.href - The media property of a rule:
rule.media
See: g3css
Have fun!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent