cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1> JavaScript and inline &lt;style&gt;s done <em>right</em></h1>

<p>Where did these styles come from? They aren't in the CSS! Is this some newfangled Aphrodite library or CSSX tool? </p>

<p>No. it's the CSSOM, fool. All I created was a small utility called <code>JSCSS</code> that enables you to easily create a style block and add rules to it.</p>

<h2>What makes this different than those other utilities?</h2>
<p>those other utilities go about adding entirely too much information to the DOM. Once you've created a <code>&lt;style&gt;</code>, and added it to the DOM, that's all you need. You don't need to add a load of rules to that styleblock at all (thus cluttering the DOM). All you really need is the <code>CSSStyleSheet</code> object pulled from <code>document.styleSheets</code>. Once you have that, you can manipulate styles without ever writing them inside of a <code> &lt;style&gt;</code>. That's the magic of the CSSOM.</p>
<section class="api">
<h1>The tool </h1>
	<h2>Getting a stylesheet </h2>
	<code>JSCSS.getStyleSheet(title)</code>
	<h3>Parameters</h3>
	<ul><li><code>title</code></title>:required. string.</li></ul>
	<h3>Return value</h3>
<p>A <code>CSSStyleSheet</code> object</p>
	<h2>Creating a stylesheet </h2>
<code> JSCSS.createStyleSheet(title);</code>
	<h3>Parameters</h3>
	<ul><li><code>title</code>: string. optional</li></ul>
	<h3>Return Value </h3>
	<p>the CSSStyleSheet object for the stylesheet you have created</p>
<h2>Removing a stylesheet </h2>
<code>JSCSS.removeStyleSheet(title)</code>
<h3>Parameters</h3>
<ul><li><code>title</code>: string. required</li></ul>
<h1>Methods added to a <code>CSSStyleSheet</code></h1>
<h2><code>findRulesBySelector(selector, isFuzzy)</code></h2>
<h3>Parameters </h3>
<ul>
	<li><code>selector</code>: string. required. Full text of the selector that should be matched </li>
	<li><code>isFuzzy</code>: boolean. optional. Whether the selector  is an exact match or a regular expression</li>
	
</ul>
<h3>Returns </h3>
<ul>
	<li>Array of  CSSStyleRule Objects</li>
</ul>

	
</section>

            
          
!
            
              console.clear();
JSCSS = {} || JCSS;

JSCSS._insertRules = function (rules) {
	let rulesArray = rules.split('}');
	
  	rulesArray.forEach((rule)=>{
    	if (rule.indexOf('{') !== -1) this.insertRule(rule, 0);  
  	});
};

JSCSS._findBySelector = function (selector, isFuzzy = false) {
	let rules = this.rules;
	let results = [];
	for (let rule of rules) {
		if (isFuzzy && rule.selectorText.search(selector) !== -1) {
			results.push(rule);
		}
		if (!isFuzzy && rule.selectorText === selector) {
			results.push(rule);
		}
	}
	return results;
};

JSCSS.getStyleSheet = function (title) {
	var styleSheet;
 	
	for (var i = 0; i < document.styleSheets.length; i++) {
  		if (document.styleSheets[i].title === title) styleSheet = document.styleSheets[i];
 	}
	return styleSheet;
};

JSCSS.addStyleSheet = function (title = "jscss" + Date.now()) {
	var styleSheet = document.createElement('style');
	
	styleSheet.title = title;
	document.body.append(styleSheet);
	
	var CSSStyleSheet =  this.getStyleSheet(title);
	CSSStyleSheet.insertRules = this._insertRules.bind(CSSStyleSheet);
	CSSStyleSheet.findRulesBySelector = this._findBySelector.bind(CSSStyleSheet);
	return CSSStyleSheet;
}

JSCSS.removeStyleSheet = function (title) {
	let sheetNode;
	for (let styleSheet in document.styleSheets) {
		
		if (document.styleSheets[styleSheet].title && document.styleSheets[styleSheet].title === title) {
			sheetNode = document.styleSheets[styleSheet].ownerNode;
			sheetNode.remove(sheetNode);
		}
	}
}

JSCSS.preferStyleSheet = function (title) {
	for (let styleSheet in document.styleSheets) {
		if (document.styleSheets[styleSheet].title && !document.styleSheets.title === 'title') {
			document.styleSheets[styleSheet].rel = document.styleSheets[styleSheet].rel + ' alternate';
		}
	}
}

JSCSS.unPreferStyleSheet = function (title) {
		for (let styleSheet in document.styleSheets) {
		if (document.styleSheets[styleSheet].rel && !document.styleSheets.rel.indexOf('alternate')!== -1 ) {
			document.styleSheets[styleSheet].rel.replace(' alternate', '');
		}
	}
}

var MyStyleSheet = JSCSS.addStyleSheet();

var styleRule1 = `body {font-family: Helvetica; font-size: 2em; color: #333}`;
var styleRules = `.api {
					--borderColor: #333;
					--fontSize: .75em;
					font-size: var(--fontSize);
					margin: 1em; 
					padding: 1em;
					background: rgba(200,200,200,.4);
					border: 1px solid #333;
				}
				h2 {
					color: #333
				}
				h3 {
					font-size: .75em;
				}`;
var pseudoRule = `
 .api:before {
  content: 'This text was inserted with a pseudo element';
 }
`;


MyStyleSheet.insertRule(styleRule1, 0);
MyStyleSheet.insertRules(styleRules,0);
MyStyleSheet.insertRules(pseudoRule, 5)

console.log(MyStyleSheet);
            
          
!
999px
Loading ..................

Console