javascript - script - ¿Cuál es la forma preferida de hacer una renovación de CSS?

learn javascript

Question

Al configurar un efecto de renovación en HTML, ¿hay algún beneficio (o trampa) para hacerlo en CSS vs. JavaScript? ¿Hay algún problema de rendimiento o mantenimiento del código que deba tener en cuenta con cualquiera de los enfoques?

Answer 1

¿No hay un mnemónico para recordar la secuencia de declaraciones en CSS?

Answer 2

Debido a que es un aspecto de la presentación, diría que se basa más en estándares para hacerlo con CSS. Solía ​​hacerse en Javascript, simplemente porque no podíamos hacerlo con CSS (los viejos navegadores apestan, y no creo: el hover incluso se agregó hasta CSS 2).

Answer 3

La implementación de un rollover con CSS utiliza la: pseudoclave de desplazamiento para definir el estilo del elemento de destino cuando está sobrevolado. Esto funciona muy bien en muchos navegadores, pero no en IE6, donde solo funciona bien con la etiqueta de anclaje (es decir, a: hover). Usé CSS hover para implementar una barra de navegación con pestañas, pero tuve que usar comportamientos de IE para que funcionase en IE6.

Answer 4

Me quedaría en el lado CSS de la casa, pero he hecho muy poco Javascript.

Parece que CSS es más fácil de estandarizar en todos los navegadores que Javascript, aunque eso puede estar cambiando con el advenimiento del V8 de Chrome y la próxima nueva herramienta de renderizado de Firefox.

Answer 5

Sí, la mejor manera de hacer esto es sprites css . Se produce un problema molesto en IE6, cuando el navegador realiza una solicitud cada vez que se coloca un elemento. Para solucionar esto, mira aquí .

Answer 6

Todavía funcionará en CSS si el navegador tiene Javascript desactivado.

Answer 7

CSS está bien para rollovers. Se implementan básicamente utilizando el :hover de desplazamiento. Aquí hay una implementación realmente simple:

a{
    background-image: url(non-hovered-state.png);
}
a:hover{
    background-image: url(hovered-state.png);
}

Sin embargo, hay algunas cosas que debes tener en cuenta:

• IE6 solo es compatible :hover el <a> sobre las etiquetas <a>
• Las imágenes especificadas en CSS pero no utilizadas en la página no se cargarán inmediatamente (lo que significa que el estado de renovación puede tardar un segundo en aparecer por primera vez)

La restricción de <a> -tags-only no suele ser un problema, ya que suele querer hacer clic en las transferencias. Sin embargo, este último es un problema un poco más. Existe una técnica llamada CSS Sprites que puede evitar este problema; puede encontrar un ejemplo de la técnica en uso para realizar transferencias de datos sin precarga .

Es bastante simple, el principio básico es que crees una imagen más grande que el elemento, configuras la imagen como una imagen de fondo y la colocas usando background-position para que solo el bit que deseas esté visible. Esto significa que, para mostrar el estado de oscilación, solo necesita reposicionar el fondo; no es necesario cargar archivos adicionales. Este es un ejemplo rápido y sucio (este ejemplo asume que tiene un elemento 20px de alto y una imagen de fondo que contiene los estados con y sin fluctuación, uno encima del otro (por lo que la imagen es 40px de alto)):

a{
    background-image: url(rollover-sprites.png);
    background-position: 0 0; /* Added for clarity */
    height: 20px;
}
a:hover{
    background-position: 0 -20px; /* move the image up 20px to show the hovered state below */
}

Tenga en cuenta que el uso de esta técnica ''sprites'' significa que no podrá usar PNG transparentes alfa con IE6 (ya que la única forma en que IE6 tiene que procesar PNG transparentes alfa utiliza un filtro de imagen especial que no admite background-position )