sobrescritura de CSS con la segunda hoja de estilo

Question

Estoy trabajando en un sitio web bastante grande que ya tiene una gran hoja de estilo en el sitio web. Estamos trabajando con esta gran corporación con capacidad limitada para realizar cambios (sin acceso completo).

Aplicaremos algunos estilos nuevos para una sección específica en el sitio web y se nos ha dado luz verde para incluir una segunda hoja de estilo de modificación (además de la global) si es necesario.

Mi pregunta es esta. ¿Hay algún problema de incompatibilidad con el navegador que debemos tener en cuenta si usamos este método? Debido a la popularidad de este sitio web y al número de visitas que reciben diariamente, necesitaremos ser lo más compatibles posible y solo quiero asegurarme de que nuestras modificaciones de CSS para las secciones con las que trabajamos se ejecuten sin una enganche.

He oído hablar de algunos rumores de que IE no puede manejar las anulaciones correctamente. Aquí hay un ejemplo de la naturaleza de los tipos de reemplazos de estilo que haremos ...

si tengo cuerpo {color: blue; } y cuerpo {font-weight: bold; } en el segundo archivo CSS, obtendremos azul y negrita ¿verdad?

Answer 1

Lo que usted está describiendo con su CSS es la herencia, y, esencialmente, que se 'apilar' sus definiciones CSS, de modo que usted hizo el ejemplo de body {color: blue}, body {font-weight: bold; } terminará con ambos valores para el cuerpo a través de la herencia (no reemplazando!)

Para contrarrestar la herencia, necesitaría poner a cero o elminar la definición de las hojas de css principales.

así que si tenía el ejemplo:

body { padding: 5px; color: red } 

y que quería tener un margen 3px con el azul de la fuente de color en la hoja de 2ndary que haría lo siguiente para contrarrestar la herencia

body {padding: 0px; margin: 3px; color: blue } 

De esta forma, pondría a cero el relleno (a 0, si así lo desea, cancelándolo de manera efectiva). El color se sobrescribirá y el margen será el nuevo valor agregado.

Sugeriría (si ya no lo usa) usar Firefox con firebug habilitado (las pantallas duales ayudan mucho aquí, pero no son necesarias). Firebug le mostrará qué líneas se cancelan debido a la herencia y, en esencia, se sobrescriben.

También puede utilizar sus propias clases, y el doble (o más) para arriba en la definición de clase de este modo:

.red { color: red; } 
.center { text-align: center; } 
.w500px { width: 500px; } 

<div class="red center w500px">This text is red and centered</div> 

De esta manera usted acaba de combinar los valores en una sola. Podría darle otra idea sobre cómo hacer algo diferente.

Espero que ayude.

Answer 2

No tengo ningún problema de incompatibilidad con el navegador que yo sepa. Solo asegúrese de estar probando en todos los navegadores que le interesan con cada paso y debería estar bien.

Su ejemplo de 'negrita azul' es correcto. Debería funcionar de esa manera.

Debe tomar un momento y leer sobre la especificidad y herencia de CSS. Estos enlaces explicarán cómo los valores CSS se "fusionan" entre varias reglas en el mismo selector.

• http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/
• http://www.w3.org/TR/CSS2/cascade.html

Answer 3

No creo que haya incompatibilidades. Solo asegúrese de que la especificidad de sus reemplazos es mayor que la del "original" o si tiene la misma especificidad, la anulación se declara después del "original".

Más acerca de la especificidad: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Answer 4

Si hay estilos infligiendo a continuación, se puede utilizar el

body { 
    color: #000 !important; 
} 

anulaciones importantes el estilo!. Lamentablemente, IE no es compatible con esto sin embargo.

Answer 5

Si alguien más está teniendo este problema, aquí hay una solución que he encontrado útil.

Decir que tengo una clase en mi archivo style.css original de este modo:

.menu-bar { width: 100%; } 

que puede anular el siguiente en mi hoja de estilo IE haciendo referencia a cuerpo, entonces, nombre de la clase como tal

body .menu-bar { width: 90%; } 

Intente tomar el div principal y haga referencia a él en la hoja de estilos ie. Pago y envío el siguiente ejemplo

<div class="parent"> 
<div class="children"> 
    <div class="grandchildren"> 
    </div><!-- end grandchildren --> 
</div><!-- end children --> 
</div><!-- end parent --> 

Puede hacer referencia a los padres o abuelos de clase como tal en su hoja de estilo IE

body .parent { css properties here } 
body .parent .children { css properties here } 
body .parent .children .grandchildren { css properties here }