Calendar

September 2017
Mo Tu We Th Fr Sa Su
<< >>
123
45678910
11121314151617
18192021222324
252627282930

Langs

HSS 1.2 Available !

Posted on Feb 18 2011

In case you don't know it, HSS is a small CSS compiler I wrote some time ago.

I took some time to add support for a few new CSS properties that modern browser support, and that will now be much more usable thanks to HSS :

  • opacity : will also generate the corresponding IE filter alpha
  • border-radius (and border-top-left-radius, etc) : will also generate -moz-border-radius and -webkit-border-radius for Firefox and Chrome/Safari support
  • box-shadow : will also generate both -moz-box-shadow and -webkit-box-shadow for Firefor and Chrome/Safari support
  • text-shadow : supported by HSS, but doesn't show anything on IE6-8
  • display : inline-block : will add a IE fix to get correct support
  • color : rgba(r,g,b,a) : will add a solid color default value for browsers which don't support rgba
  • background-color : rgba(r,g,b,a) : will add a solid color default value for browsers which don't support rgba, and also add some IE6-8 hacks that correctly display the transparent background color. The only drawback is that the block background image will display below the background color.
  • hss-width and hss-height : will generate width and height from which will be subtracted the padding and border values declared in the current block.

HSS 1.2 also adds support for operations (such as 20px + 15px or #FF0000 * 0.4). You can read the whole HSS documentation and download it from the HSS Project Page.

6 comments
  • mrHk
    Feb 18, 2011 at 15:58

    Hail to the new HSS !

  • Feb 19, 2011 at 04:19

    Sounds cool!
    Can it be run inside the neko emulator from hxformat?

  • Feb 19, 2011 at 09:26

    That's an interesting question :)

    I would say no for two reasons :

    a) neko emulator does only run temploc2 compiled templates so far, which only do very basic things (function calls, string buffers, and few basic operations)

    b) neko emulator does not provide a way to access the filesystem, which is needed by HSS

    You're welcome to contribute patches ;)

  • Ken
    Aug 24, 2011 at 03:45

    Any plans to continue this project and to add an "extends" (like xCSS) or mixins (like SASS or LESS)?

    I like the quickness and syntax of hss better than other things out there, but the ability to do mixins is attractive....

  • Aug 25, 2011 at 06:44

    @Ken : is not the same as HSS "Block Variables" ?

  • Eugene
    Feb 29, 2012 at 12:42

    Hi, I'm very happy, that I found this project. The project is a simple and powerful tools.

    Thanks,
    but I have a comment:
    I would like to have opportunity insert vars inside to the no standart properties, like:

    filter: CSS("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + $startColor + "', endColorstr='" + $endColor + "'");

    and will be very-very happy if:

    var gradient-type-1 = {
    filter: CSS("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='" + $startColor + "', endColorstr=" + $endColor + "'"),
    //and etc. for others browers
    }

    because, too much properties, that you can forget/

Name : Email : Website : Message :