Is there an alternative to CSS?

Viewed 54208

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 write up of CSS on Wikipedia (http://en.wikipedia.org/wiki/Cascading_Style_Sheets) and a few other comments about CSS and became discouraged about the lack of full support for CSS in the different Layout engines, so I am just curious if there is an alternative or I must learn to also use CSS filters.

Thanks for any insights.

20 Answers

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

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.

Yes.

As everyone else said, CSS is your only real option, but there is another language for "style sheet formatting type things" on the web, called eXtensible Stylesheet Language (XSL), particularly the subset of the spec that became known as XSL-FO (formatting objects).

At one point, depending on who you asked, it was intended to compete or collaborate with CSS.

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

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.

became discouraged about the lack of full support for CSS in the different Layout engines

I think jQuery has some ways to make css more compatible across-browsers, i.e. if you specify some attributes using jQuery then it will try to make sure to use a work-around for browsers that don't support certain features.

There's also a project called CleverCSS, you might want to check it out. It's not an alternative to it though, just a slightly different way to define it.

Nope, CSS is the way to go now. There's nothing wrong with the format itself (I personally quite like it actually), but rather only the browser support for it - especially regarding IE. Once we have all major browsers supporting CSS3, things should be fine - though I'm not too optimistic over when that will happen.

There is no alternative to CSS right now and this is a Good Thing. The browser vendors, W3C, WHATWG etc have a hard enough time agreeing on a single spec as it is, can you imagine what would happen if there was more than one spec?

Anyway I found that once you learn CSS, you gain knowledge of what particular things break what and either learn to work with it or avoid it.

Hope this helps.

I looked at the write up of CSS on Wikipedia (http://en.wikipedia.org/wiki/Cascading_Style_Sheets) and a few other comments about CSS and became discouraged about the lack of full support for CSS in the different Layout engines, so I am just curious if there is an alternative or I must learn to also use CSS filters.

CSS is the standard. There is no alternative.

All browsers support the basic CSS features. Each new version of each of the (four?) main browser lines comes with increased support for the standard, but websites that use these features will be broken to any users in an earlier version. There are two answers to this:

  1. "Graceful degredation" (or its twin, "Progressive enhancement" - google it), in which the page takes advantage of advanced features if they're available, while still continuing to work if they're not.

  2. Who are your audience? If you're lucky enough to know that 99.8% of visitors to your website will be using at least IE7, then you don't need to worry about the CSS features that are broken in IE6. This will depend on your own business though, so check the facts first.

The worst thing you can do is code to the quirks of a single specific browser, because that leads to a page that's broken not only on other browsers, but even on later versions of the same browser.

The only alternative is the deprecated formatting support that HTML itself has, like the <font> tag. But you don't want to do that. 8-)

No (mostly)

If you want to create layouts that work in the maximum number of client machines then you'll have to learn CSS.

If you can limit your users to IE8, Chrome, Safari and Firefox then you can probably get away with CSS2, otherwise you're going to have to learn all the differences with CSS1, along with the myriad broken things - especially in IE5 and 6.

HTML 3.2 includes some formatting tags (such as <font> or <center>) but you can't do much with them.

Why only mostly? - If you can assume that users have either Flash or Silverlight and build web applications for them. Then your layout will be perfect, but it'll need a client side plugin (which not everyone has) in order to work. I'd only go down that route if you need really rich client UI.

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).

Elm-ui is a package for Elm, which is a functional language compiling to HTML/JS/CSS.

It completely rethinks the way we think about layout & style, and I think such a project is long overdue.

The author, Matthew Griffith, talks about Elm-ui here.

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.

xslt is an alternative

It is more powerful than css.

It is more difficult to learn and to use it.

Related