I had hoped CSS3 would bring about custom CSS properties that could be readable to JavaScript, and affect elements behavior. JavaScript libraries like jQuery UI pass styling options through JavaScript API, just like ASP.NET controls e.g. It should bother serious developers who have AOP in mind. Why is it not considered useful to have CSS custom properties e.g. "-ui-resizable-handles:e se;" or in whatever format. AOP is what CSS is all about, is it not?
3 Answers
You can borrow an existing property that takes an arbitrary string for its value. Ones that come to mind are font-family
, counter-reset
and counter-increment
, or animation-name
. Using counter-reset
you can do things like:
CSS
* {counter-reset: inherit;} /* by default, counter-reset does NOT inherit */
HTML
<div style="counter-reset: my-value; "> <!-- want to set value here -->
<p id="para">Some text.</p> <!-- and retrieve result of cascade here -->
</div>
JS
var p_styles = window.getComputedValue(document.getElementById("para"),null);
var p_reset_value = p_styles.counterReset;
var p_myvalue = p_reset_value.split(" ")[0]; /* computed value will be 'my-value 0' */
The only possible compatibility issue here, in the unlikely event that you are actually using counters in your code, is the unwanted side-effects of the CSS rule. Also, notice that the value must fit the CSS definition of an "identifier". If you give a value with spaces it will be interpreted as two different counters, and if you enclose it in quotes the CSS value will be considered invalid.
Using -webkit-locale
If you're real brave, you could also use -webkit-locale
. Since it inherits and takes a single string value, it eliminates the need for much of the above, including the CSS rule and the JS to split apart the computed value, and eliminates the restriction that the value be a CSS "identifer":
HTML
<div style="-webkit-locale: 'bar foo'; "> <!-- want to set value here -->
<p id="para">Some text.</p> <!-- and retrieve result of cascade here -->
</div>
JS
var style = window.getComputedValue(document.getElementById("para"),null);
var prop = style.webkitLocale; // "bar foo"
Hopefully in the near future we will have CSS cascading variables and this hackery will no longer be necessary.
-
+1 purely because I needed to hack some functionality into an existing site (changing as little as possible) and needed to store a clickable url against an image, but in CSS. I used
font-family
and now the person who looks after the site can change both the image url and the clickthrough url (I just made a script to wrap images with a link tag, if they have a font-family value). Brilliant - thanks :) Jan 6, 2014 at 15:24
Perhaps not quite what you mean, but does allow one to save a lot of time, and provides much more flexibility!
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
-
Not exactly what I was looking for, but interesting nevertheless. I think this is along the same lines with ern0's suggestion, i.e. to generate CSS with more flexibility, but doesn't solve the problem of letting CSS provide styling beyond its canned set of properties. I often think css pseudo classes like :hover as after thoughts and drop-in-a-bucket effort in solving a much larger problem. IE's CSS "behavior" wasn't the best implementation but there may be a point to it, i.e. extensibility of CSS. Jun 8, 2011 at 17:10
-
Does not answer the question.– user663031Dec 8, 2012 at 5:14
Yep, good idea, but I think there's a more natural way of creating enhanced CSS stylesheets: generate CSS with PHP (ASP, JSP etc., whatever you use), on server-side, just in case of HTML. So, then it's up to you, what CSS you generate from what kind of source.
All webpage use dynamically generated HTML pages (before AJAX, it was the only way to build an app), but static CSS styles. Why?
-
I had that thought before it sure would make generating dynamic CSS rules easier. The problem raised here is different, I'm hoping to have a way to separate concerns, such that a JS (say jQuery plug-in) coder doesn't need to take styling commands in JS API, such as {height: "fill"}. Jun 8, 2011 at 17:20
-
I see. Also, server-side-generated/JS-manipulated CSS is a "child" of a common "parent" myth: the CSS is holy and untouchable, it must be edited and stored in the final form... while we have 1000 templating engines for server side HTML construction and 600 JS framework for client side HTML (DOM) manipulation.– ern0Jun 9, 2011 at 6:51
-
Lots of sites generate CSS on the fly. However, this does not address the need of the OP to find a way to cascade custom CSS properties.– user663031Dec 8, 2012 at 5:15