Cómo romper la herencia de CSS?

He creado un widget web. Que mi cliente puso en sus sitios web. Básicamente, en la carga, llama al servicio web y carga datos específicos al cliente.Cómo romper la herencia de CSS?

Como resultado se ve como:

<div class="widget"> 
    <div class="container"> 
    </div> 
</div>

dinámicamente que aplicar estilos CSS a mi clase de widgets. Para ser consistente con nuestro estilo corporativo.

El problema es cuando estilos aplicación cliente sobreescriben el estilo apliqué tiempo de ejecución.

Por ejemplo si el cliente tiene, sobrescribe mis estilos:

body { 
    margin: 0 auto; 
    padding: 0; 
    width: 90%; 
    font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman"; 
}

¿Hay alguna manera de romper la herencia? Solo para decir que cualquier div con estilos de widget de clase no hereda estilos parentales.

Fuente

2012-08-07 German

Es posible que desee probar la etiqueta! Importante en cada pieza de su CSS. Sobrescribirá cualquier cosa que no sea importante. – ntgCleaner

Simplemente ejecute el widget en un iframe – Esailija

no creo que se puede interrumpir la herencia CSS por decir, pero se puede tratar de eludir siguiendo las reglas de la especificidad de CSS.

Un buen artículo Especificidad

http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Trate de añadir !important de estilos en el widget para darle una mayor especificidad que los estilos predeterminados.

#myWidget{ 
    font: 100%/1 "Times New Roman", Serif !important; 
}

EDITAR

Si el cliente también está utilizando !important que podría causar problemas. Si pudieras configurar jsFiddle.com con un ejemplo, podríamos ayudar a encontrar el problema.

Espero que ayude!

Edit2

Nota, pasando la ruta de añadir !important debe ser un último recurso, ya que es la 'carta de triunfo' de las reglas de estilo.

Fuente

2012-08-07 17:03:23 jmbertucci

Intenté agregar la etiqueta importante a mis estilos, pero aún así los estilos del cliente tienen prioridad sobre los míos. – German

Esto aún podría reducirse a problemas de especificidad. Actualizaré mi respuesta un poco con más explicaciones. Pero recomendaría darle a ese artículo una lectura rápida. Le ayudará a calcular la especificidad de sus archivos CSS y hacerlo más alto que los estilos del cliente. – jmbertucci

No se puede romper herencia de estilos como tal, pero puede asegurarse de que sus estilos son ya sea más importante o cargada en el orden correcto por lo suyo viene a la cabeza.

Tener un vistazo a la etiqueta !important.

Alternativamente si carga sus hojas de estilo después de ellos el suyo tendrá prioridad (a menos que la suya es en línea). Puedes usar Javascript para cargar tus estilos después de que el cuerpo se haya cargado (Pero entonces obtendrías un efecto de "parpadeo").

Fuente

2012-08-07 17:03:09

Intenté agregar etiquetas importantes para mis estilos, pero aún así los estilos de los clientes tienen prioridad sobre los míos. – German

Si también están usando la etiqueta importante, entonces no tengo suerte, me temo que sin usar JavaScript para eliminar sus estilos. –

No se puede obligar a los elementos a NO heredar estilos principales.

Sin embargo, puede anular todos los estilos posibles que usted no desea que se modifique. Si su especificidad CSS es más alta que la especificidad del cliente, sus estilos serán dominados/expresados en la página.

Ver:

CSS Specificity via css-tricks.com

por tu ejemplo con el siguiente código sería más específico que la declaración body y por lo tanto anular:

.widget .container { 
    font-family: Arial; 
}

Fuente

2012-08-07 17:08:48 PJH

También puede probar inline styling. El estilo en línea tiene la más alta prioridad. Esto funcionará si las anulaciones del cliente usan una hoja de estilo importada.

Como otros han mencionado, otra opción es !important.

También puede consultar las especificaciones relevantes en http://www.w3.org/TR/CSS2/cascade.html donde describen exactamente cómo se conectan en cascada. Si los trucos mencionados anteriormente no funcionan, tal vez las especificaciones le darán una pista o sabrá con certeza que esto no es posible.

Fuente

2012-08-07 17:10:40 Nasir

El uso del atributo! Css importante se considera una mala práctica. Porque introduce el potencial de conflictos de precedencia y hace que sea extremadamente difícil solucionar problemas de CSS a largo plazo.

Un enfoque menos intrusivo a este problema es delimitar el widget con un id, y en su hoja de estilo, para restablecer algunas de las declaraciones de estilo más importantes usando el selector de "universal", como por ejemplo:

#myWidget *{ 
    margin: 0; 
    padding: 0; 
    background: none; 
    border: none; 
}

Por ejemplo. Luego, defina sus reemplazos específicamente.

Fuente

2015-10-22 07:49:05 Argo

Cómo romper la herencia de CSS?

Respuesta

Cuestiones relacionadas