Live data from Hacker News

Glue is a simple command line tool to generate CSS sprites

github.com

21–30 of 34 posts

Re: Glue is a simple command line tool to generate CSS sprites

#22

so I am actually wondering why you would even still use a spriting based approach. It seems as if a data-uri based approach would, for all uses I can think of, be more flexible and better, especially if you are using something like compass ( http://compass-style.org/reference/compass/helpers/inline-da... ). for more info: http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-... this stack overflow answer bring…

The number of bytes in a sprited file can be smaller than the sum of the bytes of each file individually. So the best option might be to inline the sprite :)

Re: Glue is a simple command line tool to generate CSS sprites

#23

Checking it out. This should be interesting. CSS Spriting was made way manageable with Lemon, a Compass plugin which later became part of Compass Sprite. The few limitations on the part of Compass Sprite, had always let me do my own sprite, I usually like those tightly packed image sprites.

You should tell us what those limitations are :)

Re: Glue is a simple command line tool to generate CSS sprites

#24

so I am actually wondering why you would even still use a spriting based approach. It seems as if a data-uri based approach would, for all uses I can think of, be more flexible and better, especially if you are using something like compass ( http://compass-style.org/reference/compass/helpers/inline-da... ). for more info: http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-... this stack overflow answer bring…

IE7 doesn't support data-URIs. If you still support IE7 (it's not dead yet), sprites are still your friend. Not to mention, data in the css can get kind of unwieldy if you're encoding many or large images. Keeping it in a sprite keeps it tidy.

you can use mhtml for ie7, see: http://documentcloud.github.com/jammit/#embedding and search for "mhtml" in http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-...

as far as keeping it simple, the sass file that I would write would look like:

  .icon {
    height: 16px;
    width: 16px;
    display: inline-block;
  }
  .checkmark-icon {
    @extend .icon;
    background-image: inline-image('path/to/checkmark.png');
    &:hover { background-image: inline-image('path/to/checkmark-hover.png'); }
  }
  .error-icon {
    @extend .icon;
    background-image: inline-image('path/to/error.png');
    &:hover { background-image: inline-image('path/to/error-hover.png'); }
  }
so you'd never have to manually update the sass file if the image changes and then you can just do some magic to get it to work with ie7 with mhtml if you are going to support it.

Re: Glue is a simple command line tool to generate CSS sprites

#25
post #17

so I am actually wondering why you would even still use a spriting based approach. It seems as if a data-uri based approach would, for all uses I can think of, be more flexible and better, especially if you are using something like compass ( http://compass-style.org/reference/compass/helpers/inline-da... ). for more info: http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-... this stack overflow answer bring…

Caching is probably a good reason for using the sprite approach. Sprites are probably less dynamic than the HTML being generated, so the client will likely be able to just pull up the sprite from Cache.

I am not suggesting putting data-uri's in the html, i am suggesting doing it in a css file. which would cache just as well as any sprite you may be using

Re: Glue is a simple command line tool to generate CSS sprites

#26
post #18

so I am actually wondering why you would even still use a spriting based approach. It seems as if a data-uri based approach would, for all uses I can think of, be more flexible and better, especially if you are using something like compass ( http://compass-style.org/reference/compass/helpers/inline-da... ). for more info: http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-... this stack overflow answer bring…

You limit the number of connections necessary to download the sprites, you avoid having the client 'hickup' in when you show a new button and you only have to have on cache-hit.

again, I am not suggesting doing data-uri's inline in the html. I suggest doing it in a special css file. if done right, in which case the 'hickup' and and extra http requests would not happen.

Re: Glue is a simple command line tool to generate CSS sprites

#27

so I am actually wondering why you would even still use a spriting based approach. It seems as if a data-uri based approach would, for all uses I can think of, be more flexible and better, especially if you are using something like compass ( http://compass-style.org/reference/compass/helpers/inline-da... ). for more info: http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-... this stack overflow answer bring…

The number of bytes in a sprited file can be smaller than the sum of the bytes of each file individually. So the best option might be to inline the sprite :)

so chriseppstein, I would be interested in what you (as the creator of compass), in particular, have to say about which would be better: a "Compass Sprite" ( http://compass-style.org/reference/compass/helpers/sprites/ ) based approach or a compass "inline-image" based approach ( http://compass-style.org/reference/compass/helpers/inline-da... )

edit: oh, so i didn't fully grasp what your comment was saying. are you suggesting that you would use inline-image AND a sprite to put all the images into a sprite AND load that sprite inline with the css?

Re: Glue is a simple command line tool to generate CSS sprites

#28

so I am actually wondering why you would even still use a spriting based approach. It seems as if a data-uri based approach would, for all uses I can think of, be more flexible and better, especially if you are using something like compass ( http://compass-style.org/reference/compass/helpers/inline-da... ). for more info: http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-... this stack overflow answer bring…

The number of bytes in a sprited file can be smaller than the sum of the bytes of each file individually. So the best option might be to inline the sprite :)

[deleted]

Re: Glue is a simple command line tool to generate CSS sprites

#30

so I am actually wondering why you would even still use a spriting based approach. It seems as if a data-uri based approach would, for all uses I can think of, be more flexible and better, especially if you are using something like compass ( http://compass-style.org/reference/compass/helpers/inline-da... ). for more info: http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-... this stack overflow answer bring…

I came here to say this. It seems that data URIs in CSS files is inherently more flexible, performs better and is easier to use (many libraries just handle it automatically for you).

I'm not sure about the slightly larger filesize, but it's worth it for the other benefits.

Post reply on HN