Is there an alternative to CSS?

Question

Is there a style sheet formatting language alternative to CSS? Or is CSS the current single language for doing Style Sheet formatting type things?

I looked at the wr

Answer 1

I agree that the current state of CSS support is pretty horrible.

I think the best approach is to write CSS according to the standard and then add fixes for all the bits where the various browsers don't properly comply. It's often worth avoiding some bits of CSS if you though (z-levels for example have really mixed levels of support in a lot of browsers).

Answer 2

Wide-spread CSS does not get full support in all browsers...how should an (unknown) alternative reach this goal?

Answer 3

Zoli is right. "xslt is an alternative"

XSLT turns XML into a rendered web page, just like CSS turns HTML into a rendered web page. Just note that you can't mix XSLT with HTML or CSS with XML.

I've used both CSS + XSLT to create rendered web pages.

Answer 4

Yes there is, it's called LESS and it really adresses most CSS's code readability problems.

You can both compile it on the server or on-the-fly client-side with less.js.

For production, I recommend setting up a build script that compiles it (in NodeJS this is piece of cake with Grunt and grunt-contrib-less).

---

Edit: There are also other options worth mentioning, even if I'm using and recommending LESS.

SASS: Ruby folks love this one. It is not a super-set of CSS like LESS, but instead uses its own syntax. To cope up for this, they developed SCSS, which is a CSS super-set and is similar to LESS.

Stylus: like LESS, it is coded in javascript, but this is commonly used from Node.js. I can't vouch for it, since I didn't try it out yet, but it is very mature so if it has a feature you want, definitely go for it.

Turbine: This one was coded in PHP. Not much traction.

Switch CSS: Maybe Python hackers will want to look into this. Even less traction.

If you're feeling even more alternative, there's also CSS Cacheer, CSScaffold, DtCSS, CSSPP and even something by porneL.

---

Other stuff you might want to check out:

Compass: A full-on CSS authoring framework for the Ruby guys.

WinLESS: A drag&drop LESS compiler for Windows, it's super cool and you really should check it out.

LESS Elements, Preboot, LESSHat and even.less: Libraries of mixins and constants for LESS.

Bootstrap: A framework developed by Twitter. Also related: HTML5 Boilerplate.

Normalize.css: an alternative to CSS resets. There are many resets, however, as the developer of one, I have to say: most are crap. If you're not going to make your own, then just use this one.

---

Update: Since 1.4, LESS has @extend too. Be sure to use 1.4+ if possible! This completes the reasons to choose LESS over SASS I think.

Answer 5

Well, CSS 2.1 is pretty well supported by nearly every browser. (except IE6) It's easy to write gracefully-degraded CSS once you know the safe subset. (So that even unsupporting browsers won't totally mess the page up)

See http://www.quirksmode.org for CSS browser compatibility hints.

Answer 6

CSS is the only real option.

Browser support for CSS should not be a major concern (in most cases) once you learn the ins & outs of CSS. The key to understand about CSS is that its purpose is to define the style of an HTML document and it should be separate from the content.

You'll need practice in learning how to make things degrade gracefully in browsers that don't support features. The basic idea here is that you should make the lowest common denominator (Internet Explorer usually) work "good enough" that it doesn't take away from the user experience, and provide the niceties for users with better browsers. Also, don't develop for Internet Explorer first. Leave it until last, then fix its bugs. Doing things the other way around (IE first) is much harder.

You also have the option of using JavaScript to set styles, but that is not recommended because you should avoid applying styles within JavaScript since JavaScript is meant for logic, not styles.

There are 3 (depending how you look at it) components to a web page:

• HTML - for content
• CSS - for styling your content
• JavaScript - for applying additional or dynamic logic to your content