2009-06-12 18 views
17

¿Es posible crear pseudo styles en línea?¿Es posible crear pseudo styles en línea?

Por ejemplo, ¿puedo hacer algo como lo siguiente?

<a href="#" style="background-color:green;{hover:background-color:red;}">Coding Horror</a> 

La razón detrás de esto es que estoy desarrollando una biblioteca .NET que crea los elementos de interfaz de usuario. Quiero producir elementos HTML que pueden tener su estado de desplazamiento sin el uso de una hoja de estilo externa.

+1

@robbotic: Supongamos que tiene una función foo (cadena u, cadena color1, cadena color2) cuya salida es Coding Horror El uso de estilos de desplazamiento en línea es más simple. ¿Es esta una buena idea? Prefiero tener una función que tenga un estilo ... pero esto obliga a las personas que usan mi clase a usar css, lo que hace que la implementación sea un poco más útil a corto plazo. – Brian

+1

@Brian Intento evitar los estilos en línea siempre que sea posible. Sé que son más rápidos de configurar, pero creo que perderás si alguna vez necesitas duplicar el mismo estilo en otro lugar. Prefiero tener un gran archivo CSS (o múltiples archivos CSS) con todos los estilos en mi sitio. De esta forma, puedo acceder fácilmente a cualquiera que quiera y puedo hacer un cambio y afectar todo lo que quiero en todo mi sitio. –

+0

¿Cuál es exactamente el propósito de esto? El estilo en línea es una violación tóxica de separación de preocupaciones. Déjalo en CSS. – annakata

Respuesta

13

Desafortunadamente no, no puede implementar efectos de desplazamiento usando CSS en línea.

A (mala) trabajo en torno a este problema es tener sus controles hacen que los bloques de estilo cuando se quedaban. Por ejemplo, el control podría representar como:

<style type="text/css"> 
    .custom-class { background-color:green; } 
    .custom-class:hover { background-color:Red; } 
</style> 
<a href="#" class="custom-class">Coding Horror</a> 

Si usted podría forzar a los usuarios a dejar caer un "control de estilo" en la parte superior de sus páginas que podrían hacer todas las clases personalizadas allí en vez de hacerlos junto a cada control, que sería algo muy, muy malo (los navegadores reiniciarán la representación cada vez que se encuentren con un bloque de estilo, tener muchos bloques de estilo dispersos por la página provocará un renderizado lento).

Desafortunadamente no hay una solución elegante para este problema.

+0

¿Por qué es esto una 'solución' pobre '... no es exactamente la razón por la que existen los pseudo styles css? – dsdsdsdsd

-1

O puede utilizar jQuery 's hover función y establecer el color de fondo.

+1

sí, porque esto requiere una solución JS:/ – annakata

5

Esto es una especie de situación de Catch-22.

Por un lado, se puede añadir un bloque de la derecha el estilo antes de que se inserta el elemento en la página, pero Chris Pebble señala los problemas con eso. (Si decide hacerlo, asegúrese de elegir identificadores únicos para sus Elementos para que sus selectores no seleccionen ni personalicen nada accidentalmente).

Por otro lado, se podría hacer algo como esto:

<a href="#" onmouseover="this.style.color=red;" onmouseout="this.style.color='blue';">...</a> 

Pero, eso es desagradable en sí mismo, ya que une el marcado, la presentación, comportamiento, y un montón de otras cosas.

También podría inyectar una hoja de estilos en la página escribiendo una etiqueta de enlace o manipular document.styleSheets, pero eso va a provocar una descarga.

Normalmente he visto el primer método (agregar un bloque de estilo) hecho en grande. Los portales "modulares" hacen este tipo de cosas, así que tal vez sea el estándar de facto (¿es al menos más legible y tal vez más fácil de mantener que incluir JavaScript aquí?). El método de JavaScript parece tener el menor impacto en el DOM y en la página general, ya que te estás reservando la presentación.

Este es uno de esos pantanos dev front-end, donde cada respuesta que elija está mal en alguna medida, por lo que sopesar las opciones y elegir lo que es más fácil para que usted pueda construir y mantener.

+0

Sí, creo que su último párrafo lo resume :) –

0

me gustaría crear dinámicamente un archivo CSS como yo analizo todos los controles, y me gustaría añadir un atributo del lado del servidor a los controles que contenían los otros estilos pseudoclass vuelo estacionario o.

<a style="color:blue" styleHover="color:blue" id="a1">Click!</a> 

El código puede buscar estos atributos y generar un archivo CSS sobre la marcha

#a1:hover { 
    color:blue 
} 

No sé si .NET permite que usted pueda hacer este tipo de análisis de los atributos, pero hago algo similar en un marco que creé para php.

Cuestiones relacionadas