¿Es posible crear una nueva propiedad css?

¿Es posible crear una nueva propiedad en CSS? Por ejemplo, supongamos que está desarrollando un control que muestra una foto y desea agregar una propiedad a css para controlar qué marco de estilo debe tener alrededor de la foto. Algo así como:¿Es posible crear una nueva propiedad css?

#myphoto { frame-style: fancy }

¿Hay alguna manera de hacer esto de una manera compatible con navegadores, y cómo definiría si el estilo hereda o no?

EDITAR: Es un control personalizado, su código JS se ocuparía del estilo. No estoy esperando que el navegador sepa mágicamente qué hacer. Quiero que el usuario pueda diseñar el control con CSS en lugar de JS.

Fuente

2011-04-26 dan gibson

su ejemplo es como de la especificación CSS real :) – galymzhan

Claro, ¿por qué no? Mira esto como un ejemplo: http://bililite.com/blog/2009/01/16/jquery-css-parser/

También puedes salirte con la suya usando clases CSS en lugar de propiedades. No estoy seguro si eso funciona para lo que estás haciendo.

Fuente

2011-04-26 08:11:30 Jordan

¿Qué no puede hacer jQuery? : O – BoltClock

Parece que no puede evitar que me vaya a la cama a horas ridículas de la noche. – Jordan

No puede. Los navegadores interpretan CSS en función de cómo están codificados sus layout engines para hacerlo.

A menos que haya utilizado un motor de código abierto existente como WebKit o Gecko, haya agregado un código personalizado para manejar su CSS personalizado y haya creado un navegador que use su motor de diseño personalizado. Pero solo su implementación entendería su CSS personalizado.

Vuelva a editar: dependerá de si puede leer ese estilo de alguna manera. Normalmente, los navegadores descartan al instante cualquier propiedad que no reconocen, y CSS no suele ser accesible mediante JavaScript porque el código CSS no forma parte del DOM.

O podría mirar Jordan's answer.

Fuente

2011-04-26 08:06:31 BoltClock

Estoy bastante seguro de que esto responde mi pregunta.Noté que las soluciones para distribuir elementos proporcionados horizontalmente por flex carecen de cierto comportamiento deseado. space-around se acerca más a él, pero si desea que los elementos más externos estén a la misma distancia del contenedor, ya que cada elemento interior está uno del otro, entonces parece que no tiene suerte. - Me propuse escribir el comportamiento en javascript, pero si lo que dices es cierto, no podría implementarse de todos modos. – Musixauce3000

Si prefiere una solución de JavaScript directa que no utiliza bibliotecas JS, puede usar la cadena de consulta de una imagen de fondo para mantener "propiedades personalizadas" dentro de su CSS.

HTML

<div id="foo">hello</div>

CSS

#foo { 
    background: url('images/spacer.gif?bar=411'); 
}

JavaScript

getCustomCSSProperty('foo', 'bar');

apoyo a las funciones de JavaScript

function getCustomCSSProperty(elId, propName) 
{ 
    var obj = document.getElementById(elId); 
    var bi = obj.currentStyle ? obj.currentStyle.backgroundImage : document.defaultView.getComputedStyle(obj, null).getPropertyValue('background-image'); 
    var biurl = RegExp('url\\(["\\\']?([^"\\\']+)["\\\']?\\)').exec(bi); 
    return getParameterByName(propName, biurl[1]); 
} 

function getParameterByName(name, qs) { 
    var match = RegExp('[?&]' + name + '=([^&]*)').exec(qs); 
    return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); 
}

Demostración: http://jsfiddle.net/t2DYk/1/

Explicación: http://refactorer.blogspot.com/2011/08/faking-custom-css-properties.html

He probado la solución en IE 5.5-9, Chrome, Firefox, Opera, y Safari

Fuente

2011-08-17 00:29:12 ifugu

¿Es posible crear una nueva propiedad css?

Respuesta

Cuestiones relacionadas