Sprites need :hover, bad for mobile?

[deeper]

Hi,
I want to insert three social buttons in my Wordpress headernavigation on the right.

Similar like it is described at [diythemes.com...]

As far as I understand a sprite (comprehending 3 icons in my case) in menu items, they unavoidably need some CSS-styling. Part of this CSS is :hover and mobile devices usually don't deal with :hover properly.

A lot of people praise sprites for their merits, especially saving loading time, but what about the mobile user?

[lucy24]

Is it hotter in New York than in the summer? *

Sprites and pseudo-classes (such as :hover) have nothing to do with each other. A sprite requires some CSS because it's built around backgrounds-- primarily size and position. Everything else, such as switching backgrounds in response to a hover event, is an optional extra.

:: wondering how and why chopped images got to be called "sprites" in the first place ::


* Answer: Yes.

[deeper]

So it would work and the only disadvantage mobile-user will notice is the same as they (almost) always are faced with: no mouseover-effect?

[not2easy]

Mobiles can have several mouse events, mouseover is one. It depends on the device. They are referred to as touch events rather than hover for setting response effects.

[Planet13]

*Technically, the answer was "Wednesday"...

[deeper]

O.K., no special problems for mobile user and so I tried to establish my button-sprite in my Wordpress navigation.

1. Created three menu items, each with a its own class ("fb-profil", "gplus-profil", "xing-profil"). Anchors are FB, G+ and X. I'd like to leave the anchor field in WP empty, because actually they are not needed, but then the whole menu item disappears after saving.

2. Uploaded the sprite-image, file "headnav-sprite.png", class "headnav-sprite".

The following CSS-code does not work, i.e. the sprite does not appear. URL is correct. Where is the mistake?

.block-type-navigation ul.menu li.fb-profil, .gplus, .xing {
background-image:url(headnav-sprite.png) no-repeat;
width: 25px;
height: 25px;
}
#fb-profil { background-position: 0 0; }
#gplus-profil { background-position: 30px 0; }
#xing-profil { background-position: 60px 0; }

[lucy24]

Before anything else: change that URL to site-absolute form (leading slash) unless you're certain that the page and the CSS will always and only live in the same directory.

.block-type-navigation ul.menu li.fb-profil, .gplus, .xing

So this code is meant to apply to
#1 li class "fb-profil" when it comes inside ul class "menu" when this in turn comes inside anything of class ".block-type-navigation" (sounds overconstrained to me)
#2 anything of class "gplus"
#3 anything of class "xing"
And you've got a classname "fb-profil" as well as an id name "fb-profil"? And you've got classes "gplus" and "xing" alongside ids called "gplus-profil" and "xing-profil"? Sounds like a recipe for mass confusion :)

[not2easy]

2. Uploaded the sprite-image, file "headnav-sprite.png", class "headnav-sprite".

If you used WP instead of ftp to upload your image you will need to use a full path to the image. If you can ftp that image to the same folder where your css resides /themes/your theme/css/ maybe..

[deeper]

Sounds like a recipe for mass confusion :)

It's enough to be confused myself I think :)

The following CSS lets the icon-sprite appear, but twice, one below the other.
Further the CSS editor is not happy about the text-indent, saying "set direction for that item to ltr." ?

.fb-profil a {
display:block; height:25px; width:25px; padding:0; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url('headnav-sprite.png'); background-position:0 0;
}

.gplus-profil a {
display:block; height:25px; width:25px; padding:0; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url('headnav-sprite.png'); background-position:-30px 0;
}

.xing-profil a {
display:block; height:25px; width:25px; padding:0; margin-left:6px; outline:none; text-indent:-9999px;
background-image:url('headnav-sprite.png'); background-position:-60px 0;
}

[lucy24]

The following CSS lets the icon-sprite appear, but twice, one below the other.

I'm getting a headache myself ;) but I'll guess it's because you're applying the same background to two different elements which happen to occur one inside the other.

Further the CSS editor is not happy about the text-indent, saying "set direction for that item to ltr." ?

? indeed. What direction is the rest of your text in? Did they change German to rtl when I wasn't looking? Seriously: why on earth are you setting the text-indent to a vast negative number? I assume you're trying to achieve something, but there's got to be a more straightforward way.

[deeper]

@not2easy:
Thanks for your hint.

@lucy24:
Double icons are solved by adding "no-repeat":
background-image:url("sprite.png");
background-repeat: no-repeat;

why on earth are you setting the text-indent to a vast negative number

Ts, ts, ts, you're confusing me...:), never heard of the most popular image replacement method?
All menu items need to have a "label" (anchor/text, img, whatever): screenreader, HTML-validation (? not sure), Google (does not punish this or consider as spam, but ignores hidden content then completely due to JM); Wordpress doesn't accept empty menu items, after saving without label, the item is gone.

Text-indent makes the text (FB, G+ and X in my case) invisible, but it's still there.
I'm not able to rate and compare other options, but may be you or other tech-savvy webmaster can und will let us know then their opinion:
[nicolasgallagher.com...]
[stackoverflow.com...]

[lucy24]

All menu items need to have a "label"

Can't you just say   ?

HTML-validation (? not sure)

I remember that a few versions back, Safari didn't recognize empty anchors, like <a name = "blahblah" id = "blahblah"></a>, so you had to make sure the <a> was wrapped around something. But at this point it's probably just a legacy in the CMS.

[deeper]

Can't you just say &nbsp; ?

Good idea. The guys here say "yes":
[stackoverflow.com...]
Blind user will not be very happy, but I guess they still can read the title attribute of the menu item and I can give the sprite an alt.

Wordpress does not delete the item (it does if you have a completely empty label).

No problems with Google and even no risk to become suspicious.

CSS-ways:
[css-tricks.com...]

[deeper]

Unfortunately responsive-function of my theme shows a navigation-dropdown for smartphones only with text-anchors, i.e., there are now three "empty" items (invisible & nbsp;, no buttons).