Syntactically Awesome StyleSheets

Roy Tomeij — Fri, 16 Jan 2009 17:12:16 +0000

Syntactically Awesome StyleSheets, or simply “Sass” is a great way of structuring your CSS using Ruby syntax. It spices up writing your CSS in several ways (use constants, do calculations, etc), with the most notable feature being the ability to use nested rules. This turns this:

#main
  :width 97%

  p, div
    :font-size 2em
    a
      :font-weight bold

  pre
    :font-size 3em

into

#main {
  width: 97%; }
  #main p, #main div {
    font-size: 2em; }
    #main p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

Just save your Sass file as public/stylesheets/sass/application.sass (filename may vary), and Sass will generate a public/stylesheets/application.css. This file will be re-generated after making changes to your *.sass file. Don’t forget to set an ignore property on your *.css files, since you don’t want to have those under version control.

We decided to use it for all our new projects, which has boosted our CSS productivity. Because of the structured syntax, also the not-so-CSS-savvy programmers can easily find what they are looking for in the CSS file. Highly recommended! See the above mentioned website for detailed installation and usage instructions.

Tip: to convert your plain old CSS to Sass, use the “css2sass” command line tool (included with haml): css2sass oldfile.css newfile.sass.

IE8 version targeting

Roy Tomeij — Wed, 23 Jan 2008 21:28:22 +0000

A lot has been written about it on a lot of blogs, but as a standards aware front-end developer I just have to comment on the matter. Although pretty much everything has been said about it, both pro and con (mostly con).

For those of you who don’t know what it’s all about (I can’t imagine you missed it), I’ll sumarize it. On the IEBlog the IE development team announced how IE8 will handle backwards (and forwards) compatibility. Credit where credit is due, the IE development team has been doing a great job lately with IE8 even passing the Acid 2 test. But, only if you set the special element. IE8 will render pages by default using the IE7 rendering engine, because MS doesn’t want to break websites with every new version of IE. Quote: “We realized that “Don’t Break the Web” should really be translated to “Don’t change what developers expect IE to do for current pages that are already deployed.’”. And that’s just what most standards aware developers have a problem with, since it encourages mediocre developers to keep developing the way they are used to. If IE8 would just render according to web standards by default, much like Firefox or Safari, those developers would need to work on their skills and thus making websites render correctly in all browsers. This would make “the internet” more accessible as a whole. All websites that have been developed “recently” probably follow web standards anyway, so only the antique websites might look broken when viewed in IE8 with standards mode enabled.

I do understand that for instance some intranet applications dictate the use of IE6. I have no problem with that for such a controlled environment. This could be solved easily if users could just have IE6/7 and IE8 installed on the same Windows installation. In my opinion, websites that may be viewed within a variety of browsers should render pages according to the web standards if possible. For IE8 it’s possible, but optional.

This new “feature” will no doubt keep the world of front-end developers and bloggers busy for a while. I’m curious if there will be new arguments in favor of these recent developments to change my mind. By the way: using the future HTML5 doctype will automatically force IE8 into “edge” mode (being the most recent rendering engine).

UPDATE: The IE team actually listened to the community and decided to turn the thing around: IE8 rendering is used by default, unless stated otherwise by the code.

80beans » HTML, CSS & JavaScript

Syntactically Awesome StyleSheets

IE8 version targeting