Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The whole technique described seems problematic to me. </p> <p>Jennifer's points:</p> <ol> <li>You can’t attach alternate text to divs for accessibility purposes</li> <li>CSS Spriting and the IE6 PNG fix are incompatible</li> <li>The images will not print out on printouts unless the client option to print background images is selected (this is bad for logos and menus, etc)</li> <li>For images in pages (that are not actually background images), it seems semantically bad to hide the image in CSS.</li> </ol> <p>On 1, given that these are background images and not semantically images in their own right I think the correct approach is to put that text directly in the markup and hide it with CSS, rather than the other way around.</p> <p>Number 2 is valid, but not the end of the world. To act on 3 is an abuse imho - if the user doesn't want to print background images, why are you forcing this? Again this comes back to semantic interpretation.</p> <p>Number 4 I completely agree with, but then if you're just hiding the image in the conglomeration of a sprite'd image anyway what do you gain? You could debate this, but an <code>&lt;img&gt;</code> has a semantic meaning representing a resource with a URI and as such that URI should be distinct, not dependant on interpreted CSS. View/Copy/Save Image is going to be negatively affected by this.</p> <p>It also seems to react quite slowly in my FF (which admittedly is subject to tab abuse), I imagine the clipping maths is taking a not inconsiderable effort.</p> <p>Long story short, I think the existing background-image/position technique is superior.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload