We’ve got a new experiment going on over at the Arc90 Lab: JSON CSS.
The goal is to provide a proof of concept of where CSS could go in the future – things like variables, inheritance, browser detection, and syntactical cascading.
The implementation uses the very powerful jQuery and JSON for easy parsability. (We’re friendly with JSON around here.)
Please leave your thoughts in the comments!
Murray Roke said:
I’d almost like to use your proof of concept today, except I’d need a better way to deal with clients that have javascript disabled… perhaps a server side component that can generate plain old CSS from the JSON… for backwards compatibility.
Chris Dary said:
Murray, that’s definitely a problem – and one of the main reasons this is just a proof of concept. ;)
I’ve toyed with the idea of generating plain old CSS, the trouble with that is that a lot of the more advanced stuff would be pretty tricky to implement. (#table tr:odd for example, which would select every odd row of a table, would be impossible to implement in plain old CSS.)
So non-javascript users would still get a diminished experience – I’m not sure if that makes it worth it or not. Thanks for the feedback!
Wim said:
I very much like the idea. Do you guys also have a ProtoType plugin? Great work anyway.
Joseph Francis said:
I like this idea. The standard css implementation leaves alot to be desired.
Note that the variables page does not show the background color in in IE7 and the inheritance demo .. is not big and red in IE7.
Is this something you see growing as a “standard” to be implemented in any library? And if so, are there any issues with building to this “spec” using another library?
Any start of a spec document? Would be nice to assure the various JS implementations are aligned.
Chris Dary said:
I don’t think I saw it as a ‘standard’ quite yet. My real motivation was to examine, live, the places where CSS can go and be effective.
A spec would certainly be fairly easy to implement – I’d just need a little time (which I don’t have much of right now). Joseph, if you’re interested, there’s always The google code project page where you can add your 2 cents (or patches!)
Joseph Francis said:
Thanks – I added a “defect” in the variables demo for IE7. Details include information on what made it work using the latest svn copy.
Also, there was a post on making this work with the ExtJS library on the ExtJS forums. I have ported that port to the ExtJS Core (Free MIT version) but am running it through some testing before posting it anywhere (hence the bug report / fix for JQuery).
Thanks for posting this experiment, interesting to see where it goes.
Chris Dary said:
Joseph, I actually just received an email two days ago from another guy who ported it to ExtJS as well – perhaps from the same forum?
At any rate, I’d love to see it – perhaps this should all go under the google code repository.
Joseph Francis said:
Adding to the google code repository sounds great.
Here is the forum link:
http://www.extjs.com/forum/showthread.php?p=334809#post334809
I’ll post my ExtJSCore version there as well once I feel it is tested. I can send it your way as well if desired.
Mike said:
A couple of ideas to offer.
I’ve done similar things with PHP on the server side – generating CSS as something like a script and doing preg_replace on it to substitute variables.
Server side javascript, especially Aptana’s Jaxer, would allow you to run the Javascript/Json code on the server so the client can have JS turned off without ill effect.
Chris Dary said:
Mike, you just blew my mind. :P
I’ll check that out! Thanks!
Joseph Francis said:
I updated the google code site with another bug report with a fix for IE7. This on was in the inheritance demo and was not hit until the first bug was fixed. Before bug fix 1 – it was just failing quiet due to never getting to that code.
I also updated the post (http://www.extjs.com/forum/showthread.php?p=334974#post334974) with a port that should work with ExtJS 2.x, 3.x and Core .. and for most browsers. See important notice before trying it out if you plan to.
I have yet to really play with it, just mainly getting the demos debugged and working in ExtJS. Next will be to use it some and see how it compares to some other JS overlay techniques (as time permits).
Joseph Francis said:
If you are still doing anything with this. The ExtJS Core is now live and functions with the posts provided in the links above. So if you want take the ExtJS / Debugged version for a run, you can.
ExtJS Core – Released….
http://extjs.com/blog/2009/06/10/building-a-rating-widget-with-ext-core-30-final-and-google-cdn/#comment-64846
Latest version of the ExtJS Core port at:
http://www.extjs.com/forum/showthread.php?p=334809#post334809
aery said:
For the variables, it would be great if it can be dynamic. If I want to implement different themes for my site, I just have to load different variables rather than load entire jsoncss file.
Geoff Pack said:
Javascript + stylesheets?
Check out this blast from the past:
http://en.wikipedia.org/wiki/JavaScript_Style_Sheets
Jey Balachandran said:
An intriguing proof of concept. Having worked on projects with CSS files that drag on for a few thousand lines, I definitely see the advantages of having such features in CSS. From a developers standpoint, this can save a lot of time. Plus, this would make it easier to manage styles and keep CSS styles to one file (in turn reducing # of http requests).
I’m assuming you were just using JavaScript (jQuery) to emulate such features in CSS. I don’t believe JS is the best parsing solution for anyone who actually plans to use this ion their sites. Doing it on the server-side would be much more advantageous.
Chris Dary said:
Thanks for your thoughts, Jey.
And regarding JS being the best parsing solution for it, absolutely true. I really just wanted to see the power of expanded CSS selectors in real time.
That said though, if JS engines get much faster it may be a moot point! jQuery’s common selectors are pretty absurdly fast already.
It was a fun project – glad you found it interesting.
Trevor Norris said:
Thanks for publishing this library. I’ve been working on a project for several months now to make web applications more easily maintainable based on a JSON centric client/server communication schema. Tests have shown so far that your code is quick and light enough to handle loading complex style data in all modern browsers (Luckily, I’m not working under the constraints of needing to maintain accessibility to any machine).
Your library was the “icing on the cake,” if you will. For awhile the styles were all being managed in separate files, and being loaded as needed. As the project expanded, developing and maintaining the styles became almost impossible. Now it’s much easier to keep track of where and why something looks the way it does.
Guess you could say we’re using your proof of concept for one of ours. By using a global data structure, and allowing the client to do more of the work, I’ve been able to estimate an approximate average 30% less CPU need on the server. That’s enough to drop a full core, in some cases, and save money in licensing fees.
Thanks again. If/when the project moves from development to production I’ll definitely let you know. It’s been a huge help.
Derek Anderson said:
Chris, you could style an alternate row with CSS using the nth-child psuedo-class [1] for example : #table tr:nth-child(odd) will style every other odd tr element.
Also you might check out Sass [2] if you haven’t already. It is a new way of writing CSS, which allows for variables, mixins, nested rules, etc… but it compiles to standard CSS. You can even convert from CSS to SASS and back.
[1] – http://www.w3.org/TR/css3-selectors/#nth-child-pseudo
[2] – http://sass-lang.com
Bill Woodruff said:
Hi Chris,
First, thanks for this excellent experimental approach to adding features like variables to CSS !
My sense is … from examining the Google Code site … and the lack of recent comments on the lab.arc90 site … this experiment is now “history,” and I notice the two “defects” reported on the Google Code site have not had their “fix suggestions” folded into the latest code.
Out of curiosity I modified the “browser detection” JSON code (as shown below), and tested with the latest version browsers (but not versions of IE < 9-beta).
The only one I could not get working was the latest release (not beta) of Chrome.
I am going to look into the ExtJS and Sass technologies mentioned in the other comments on this thread, for which I thank J. Francis, and D. Anderson.
best, Bill Woodruff
Chiang Mai, Thailand
… since JSON cannot use any type of comments without hacking (to my knowledge), the double-right-slash preceded comments you see here are only for the text shown in the html page …
// tested 09 21 2010
// okay
// FireFox 3.6.10
"@browser[mozilla]":
{
"background-color": "green"
},
// tested 09 21 2010
// fail
// Chrome 6.0.472.62
// see comments by 'edeiler and others on article at: http://api.jquery.com/jQuery.browser/
// content appears, but no black background on test
// tested with 'chrome, 'chrome-6, 'safari, and 'webkit strings
"@browser[chrome]":
{
"background-color": "black"
},
// tested 09 21 2010
// okay
// Safari 5.02 (7533.18.5)
"@browser[safari]":
{
"background-color": "blue"
},
"@browser[msie-6]":
{
"background-color": "red"
},
"@browser[msie-7]":
{
"background-color": "yellow"
},
"@browser[msie-8]":
{
"background-color": "aqua"
},
// tested 09 21 2010
// okay
// IE 9.0.7930.16406
"@browser[msie-9]":
{
"background-color": "orange"
},
// tested 09 21 2010
// okay
// Opera10.62
"@browser[opera]":
{
"background-color": "purple"
}
–
"It is the mark of an educated mind to be able to entertain a thought without accepting it." Aristotle
Carlos Turpin said:
Hi Chris!,
it seems don´t work with z-index. It´s abug or just me?
ItsLeeOwen said:
I was just wondering why CSS doesn’t support syntax for nesting similar to JSON/HTML.
#myElem
{
width: 100px;
height: 100px;
#myChild: {
color: #fff;
}
#anotherChild
{
color: #000;
}
}
How awesome would that be, instead of so many deep nested selectors.