CODEWITHSUNDEEP
css
dan gibson
dan gibson

Reputation: 3665

Is it possible to create a new css property?

Is it possible to create a new property in CSS? For example, say you're developing a control that displays a photo and you want to add a property to css to control what style frame to have around the photo. Something like:

#myphoto { frame-style: fancy }

Is there some way to do this in a cross browser compatible manner, and how would you define whether the style inherits or not?

EDIT: It's a custom control - your JS code would deal with the style - I'm not expecting the browser to magically know what to do. I want the user to be able to style the control with CSS instead of JS.

Upvotes: 12

Views: 4823

Answers (3)

ifugu
ifugu

Reputation: 658

If you'd prefer a straight JavaScript solution that uses no JS libraries, you could use the query string of a background-image to keep "custom properties" inside your CSS.

HTML

<div id="foo">hello</div>

CSS

#foo {
   background: url('images/spacer.gif?bar=411');
}

JavaScript

getCustomCSSProperty('foo', 'bar');

Supporting JavaScript Functions

function getCustomCSSProperty(elId, propName)
{
    var obj = document.getElementById(elId);
    var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image');
    var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi);
    return getParameterByName(propName, biurl[1]);
}

function getParameterByName(name, qs) {
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs);
    return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}

Demo: http://jsfiddle.net/t2DYk/1/

Explanation: http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html

I've tested the solution in IE 5.5-9, Chrome, Firefox, Opera, and Safari.

Upvotes: 1

BoltClock
BoltClock

Reputation: 723398

You can't. Browsers interpret CSS based on how their layout engines are coded to do so.

Unless you took an existing open source engine like WebKit or Gecko, added custom code to handle your custom CSS and made a browser that used your customized layout engine. But then only your implementation would understand your custom CSS.

Re your edit: it'd depend on whether you're able to read that style somehow. Typically browsers just instantly discard any properties they don't recognize, and CSS is not normally reachable by JavaScript because CSS code is not part of the DOM.

Or you could look at Jordan's answer.

Upvotes: 4

Jordan
Jordan

Reputation: 32522

Sure, why not. Check this out as an example: http://bililite.com/blog/2009/01/16/jquery-css-parser/

You may also be able to get away with using CSS classes instead of properties. Not sure if that works for what you're doing.

Upvotes: 12

Related Questions