Is there an alternative to CSS?

Css

Css Problem Overview


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.

Css Solutions


Solution 1 - Css

You guys are all trying to answer the question from a programmer's perspective. I think the original poster was looking for an alternative which is more graphic-friendly - one that would offer a different concept.

Even if CSS3 gets adopted cross browser, I believe that the CSS way of laying out stuff (inline box, floats, margins, etc) is awful. I am a programmer, but my father is a graphic designer, and I am pretty sure that the layout software they were using 20 years was in some aspects easier and more advanced than CSS.

Solution 2 - Css

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

Solution 3 - Css

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.

Solution 4 - Css

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.

Solution 5 - Css

Grid stylesheets (GSS) : GSS

way better

Solution 6 - Css

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

Solution 7 - Css

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.

Solution 8 - Css

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

Solution 9 - Css

An alternative a long time ago JavaScript Style Sheets (JSSS) was a stylesheet language technology proposed by Netscape , if anyone interested i'll drop you some links http://en.wikipedia.org/wiki/JavaScript_Style_Sheets

here is the proposal http://www.w3.org/Submission/1996/1/WD-jsss-960822 i think this was a good idea but sadly css won, but maybe some parts got integrated with javascript??

Also maybe instead of using css you could use svg for some text effects look at the examples
http://msdn.microsoft.com/en-us/ie/hh410107.aspx
and some animations
http://svg-wow.org/text-effects/text-effects.xhtml
some buttons effects https://www.svgopen.org/2008/papers/86-Achieving_3D_Effects_with_SVG/
here is a cooleer example for styling text you should look at this http://www.hongkiat.com/blog/scalable-vector-graphics-text/

Solution 10 - Css

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.

Solution 11 - Css

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.

Solution 12 - Css

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

Solution 13 - Css

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

Solution 14 - Css

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.

Solution 15 - Css

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

I think the best approach is to write CSS according to http://www.w3.org/TR/CSS2/">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).

Solution 16 - Css

Yes ! sass may be an option

Solution 17 - Css

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.

Solution 18 - Css

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.

Solution 19 - Css

Adobe Postscript is the most likely alternative to CSS. The problem is that it requires Acrobat to view it on the desktop or on the web. It is far superior to CSS and maintains design intent and scales across all devices, including printers, plotters, phones, tablets and just about anything with a Postscript interpreter.

Postscript has a ZERO learning curve, unless you're implementing it for a particular device. It is programmed by millions of programmers, graphic artists, artists, professional printer and even the lowest skilled home computer user. All you need to do is select print or save from any application's menu.It does support linking and field inputs. Is it searchable? It is and PS-based documents frequently appear in Google's search pages.

Although, it can be viewed from a web browser in the form of a PDF, it isn't a native browser language like HTML and CSS. Why isn't it, if it is so easy and powerful? When the web was starting out, Adobe was too shortsighted and greedy open up the language. They wanted to sell licenses to their PS engines and their content creation products. To Adobe, giving away a PS browser was like giving away the Goose and the golden eggs.

Solution 20 - Css

xslt is an alternative

It is more powerful than css.

It is more difficult to learn and to use it.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionJustADudeView Question on Stackoverflow
Solution 1 - CssRolfView Answer on Stackoverflow
Solution 2 - CssDan HerbertView Answer on Stackoverflow
Solution 3 - CssCamilo MartinView Answer on Stackoverflow
Solution 4 - CssPatrick McElhaneyView Answer on Stackoverflow
Solution 5 - CssSam AdamshView Answer on Stackoverflow
Solution 6 - CssScoregraphicView Answer on Stackoverflow
Solution 7 - CssEFraimView Answer on Stackoverflow
Solution 8 - CsshasenView Answer on Stackoverflow
Solution 9 - CssGeomorilloView Answer on Stackoverflow
Solution 10 - CssNoldorinView Answer on Stackoverflow
Solution 11 - CssDarko ZView Answer on Stackoverflow
Solution 12 - CssMarcus DowningView Answer on Stackoverflow
Solution 13 - CssRichieHindleView Answer on Stackoverflow
Solution 14 - CssKeithView Answer on Stackoverflow
Solution 15 - CssJon CageView Answer on Stackoverflow
Solution 16 - CssJaseemView Answer on Stackoverflow
Solution 17 - CssCoredusKView Answer on Stackoverflow
Solution 18 - CssBrian KueckView Answer on Stackoverflow
Solution 19 - CssATL_DEVView Answer on Stackoverflow
Solution 20 - CsslibeakoView Answer on Stackoverflow