MooTools: Set Style Per Media

By  on  

I'd bet one of the most used MooTools methods is the setStyle() method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools' setStyle() method is that it sets the specific style for all medias. What if I want to set a style for only a specific media type? I've created a setStile() method that allows you to specify the media for which a style is set.

The MooTools JavaScript

Element.implement({
	'setStile': function(key,value,media) {
		var style = $$('style[media=' + media + ']')[0];
		if(!style) {
			style = new Element('style',{
				'type': 'text/css',
				'media': media
			});
			style.inject(document.head);
		}
		if(!this.get('id')) {
			this.set('id',$uid(this));
		}
		style.set('text',style.get('text') + '#' + this.get('id') + '{ ' + key + ':' + value + '; }');
		return this;
	},
	
	'setStiles': function(keyvalhash,media) {
		for(var key in keyvalhash) {
			this.setStile(key,keyvalhash[key],media);
		}
		return this;
	}
});

Example Usages

$('nonoprint').setStile('color','#f00','print');
$('nonoprint').setStile('display','inline','print');
$('nonoprint').setStile('border','1px solid #00f','print');
$('nonoprint').setStiles({
	'background-color': '#fffea1',
	'font-weight': 'bold',
	'opacity': '.5'
},'print');

The Post-Use HTML View

<style type="text/css" media="print">
#nonoprint{ color:#f00; }
#nonoprint{ display:inline; }
#nonoprint{ border:1px solid #00f; }
#nonoprint{ background-color:#fffea1; }
#nonoprint{ font-weight:bold; }
#nonoprint{ opacity:.5; }
</style>

Obviously, as you can see from the Post-Use HTML, this isn't an elegant solution but it works in all browsers I tested except Internet Explorer. Hopefully a better solution is presented in the future.

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    Write Simple, Elegant and Maintainable Media Queries with Sass

    I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...

Incredible Demos

Discussion

  1. I’ve noticed that this code no longer works in IE8. This line seems to be causing the problems:

    style.set('text',style.get('text') + '#' + this.get('id') + '{ ' + key + ':' + value + '; }');
    

    Any ideas?

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!