Comments on: Foreground Sprites

By: Andrew Martin

Andrew Martin — Tue, 06 Oct 2009 10:38:52 +0000

Hmmm... I'm not sure why you would want to do this. Surely a block level link with text shifted out (text-indent:-9999px) and a background sprite would be more accessible? Just noticed: this was already said by at least one other person (Jeff L) above.

By: arpita

arpita — Mon, 05 Oct 2009 20:13:55 +0000

hello

I had a question on implementation of hidden text for a given official homepage containing a foreground image. Is it possible to implement it; keeping in mind that Google, Yahoo and other search engines ban the page if they find out that we are using alternative tags to optimize SEO ranking of our page?

Also is it possible to use just a single hidden meta tag for a foreground image without offending the rules put up by Google or Yahoo? Does it make sense to optimize just with a single alternative meta tag?

By: Daniel Skinner

Daniel Skinner — Mon, 17 Mar 2008 17:17:41 +0000

Awesome trick. Thanks!

By: Sebastian Bauer » Webentwicklung: Performance Optimierung durch Image Sprites

Fri, 09 Nov 2007 20:25:59 +0000

[…] Auch wenn die Internetanbindungen immer breitbandiger werden ist die Performance stets ein wichtiges Thema bei der Entwicklung von Webanwendungen. Eine relativ einfache MÃ¶glichkeit fÃ¼r mehr Geschwindigkeit zu sorgen ist die Reduzierung der Zugriffe auf den Web-Server. Das kÃ¶nnte bedeuten, dass man mÃ¶glichst wenige CSS- oder JavaScript-Dateien in seine Seiten einbindet. Aber auch der Einsatz vieler Grafiken kann das Laden stark verlangsamen. Abhilfe schaffen hier Image Sprites. […]

By: lillbra » Om css sprites

lillbra » Om css sprites — Wed, 03 Oct 2007 05:39:52 +0000

[…] Till sist har Martin Kliehm har en intressant lÃ¶sning pÃ¥ hur man anvÃ¤nder sprites fÃ¶r vanliga bilder (inte bara bakgrundsbilder). Det kan anvÃ¤ndas om man t.ex. vill ha en knapp som inte har nÃ¥gon text (en play-knapp eller dylikt). […]

By: Nachlese August 2007 â€” Die Seiten des Monats | Nachlese

Nachlese August 2007 â€” Die Seiten des Monats | Nachlese — Tue, 18 Sep 2007 12:19:11 +0000

[…] CSS: The right sprite. Eine neue Anwendung von CSS Sprites-Technik: um die Anzahl der Angaben in CSS zu minimieren, wird anstelle des background-image-Attributs das margin-Attribut ausgenutzt. Foreground Sprites: gleicher Ansatz, detaillierter erklÃ¤rt. […]

By: Best of August 2007 | Best of the Month

Best of August 2007 | Best of the Month — Tue, 18 Sep 2007 12:18:36 +0000

[…] CSS: The right sprite. There are many ways of using a image sprite. Most ways use a background-image-property that can be moved using CSS. The problem is that this method results in many CSS definitions that are hard to manage. Other approach: bypassing the background-image in CSS and using margin-left or positioning to achieve the same results. The benefit is huge for manageability. Foreground Sprites: the same idea, more detailed explanation. […]

By: Ajaxian » CSS keys, and the search for the right sprite

Ajaxian » CSS keys, and the search for the right sprite — Tue, 14 Aug 2007 02:48:04 +0000

[...] CSS Keys, and the search for the right Sprite Glen Lipka wanted an easier way to manage the “one big matrix image that CSS uses to chop up to display pieces” technique, and wrote about the right sprite where he delves into various cleaner workarounds for the fact that Firefox doesn’t support background-position-x. He ends up with foreground-sprites. [...]

By: Jeff L

Jeff L — Mon, 13 Aug 2007 17:05:46 +0000

Given a similar situation, I would use a background image. In your magnify example, I would have some relevant text..."Magnify" or "Change zoom level" or something, and then use an image replacement technique to show the icon instead. This at least eliminates the need for javascript, and users without styles on will still see the text. Only major issue is folks with CSS on but images off.

By: commadot.com » The right sprite?

commadot.com » The right sprite? — Sat, 11 Aug 2007 15:44:20 +0000

[...] I decided to try out some other methods. I had come up with this idea independently, but to give credit, this guy had a similar idea first. He called it a foreground-sprite. Basically, it meant bypassing the background-image CSS and using margin-left or positioning to achieve the same results. The benefit is huge for manageability. However, there are lots of options. Do you still use CSS to define the positions? Maybe jQuery could help manage. [...]