css sprites - que - ¿Todavía necesito rellenar imágenes en un CSS Sprite?
sprite css generator (4)
Básicamente la respuesta es sí. Dos años después del día en que hice esta pregunta veremos el lanzamiento de IE9. IE9 tiene este problema tanto, si no más que cualquier otro navegador ...
Es bastante irritante porque es una cosa tan simple de arreglar.
Con los iPads en aumento de cuota de mercado, es bastante esencial tener al menos una experiencia medio decente con el zoom de cantidades no uniformes.
Voy a tener que colocar un borde de un solo píxel alrededor de cada imagen para que coincida con el color de fondo del elemento adyacente (potencialmente diferente en cada lado). Afortunadamente, yo genero automáticamente todos mis archivos csssprites basados en un archivo .xml, por lo que puedo hacer esto programáticamente sin demasiado apuro. Sigue siendo un gran dolor aunque ...
En CSS Sprites a menudo encontrarás relleno entre cada imagen. Creo que la idea es que si la página se redimensiona, una imagen no sangrará en otra.
Creo que esto depende de los diferentes tipos de zoom del navegador (mejor explicado por Jeff) .
Sin embargo, no he podido ver este comportamiento en mis pruebas. ¿Es esto solo un problema con navegadores antiguos? (No he podido probar con IE6 en el momento actual, así que lo considero como ''antiguo'').
¿Debo todavía preocuparme por dejar espacio? Es una especie de dolor.
Por ejemplo :
Un CSS Sprite que encontré para AOL tiene relleno entre cada imagen: VIEW
pero The Daily Show decidió no molestar: VIEW
Hablando de los navegadores más antiguos (aquellos que usan zoom de texto), no siempre se necesita relleno.
La principal diferencia entre los dos ejemplos es que el sprite Daily Show ya incluye el texto del elemento del menú en la imagen en sí.
Cuando se usa el zoom de texto, los elementos del menú de AOL podrían extenderse verticalmente debido al tamaño de fuente más grande, y el texto del menú podría incluso ajustarse a dos líneas. Para adaptarse a tales eventualidades, esos íconos necesitan un poco de relleno para asegurarse de que no sangren. Por lo general, solo tratas de asegurarte de que no sangra en ninguno de los cinco tamaños de texto de IE6.
Dado que el menú de The Daily Show no contiene ningún texto HTML (visible), su tamaño no se verá afectado por el zoom del texto (aunque es posible que necesite una line-height: 0; o eso es lo que está seguro), por lo que no es necesario Cualquier relleno.
Como ya se mostró en scunliffe , los navegadores que usan el zoom de página pueden necesitar sprites para tener un poco de relleno debido a errores de redondeo.
No debería ser necesario rellenar, pero cuando se amplía, especialmente en IE8 (betas más que en RC), hay sangrado de imagen si no hay relleno.
El mejor ejemplo es ir a Google.com -> Buscar y hacer zoom ... comenzará a ver "subrayados" en la parte inferior derecha de la imagen a medida que el zoom se redondea hacia arriba o hacia abajo.
En teoría, un relleno de 1px en todos los lados de un sprite debería estar bien.
Aquí está el sprite de Google (imágenes) ...
Pero cuando se amplía, los iconos +, -, x sangran en el logotipo principal de Google.
Simon: Mi experiencia es que esto sigue siendo un problema.
En respuesta a su segunda pregunta, ¿por qué no usar relleno transparente? (Quizás todavía estás apoyando ie6 y esto no es trivial, en cuyo caso, lo siento mucho).