Obtener propiedades predeterminadas después de aplicar un restablecimiento de CSS global

Question

Algún código heredado sobre el que tengo que basar, realmente me hace sentir the cons of global CSS reset.

tengo la edad foo.css que comienza con

* {margin:0; padding:0;} 

y solía copiarlo en un archivo diferente bar.css, ajustar también mis necesidades (a cabo con la CSS restablecer), y lo utilizan para reemplace foo.css solo en el código que estoy escribiendo. Hago esto para no preocuparme por la compatibilidad con versiones anteriores del sitio.

Ahora esto es bastante engorroso: para los cambios globales tengo que acordarme de modificar ambos archivos. Así que ahora mi bar.css está extendiendo foo.css, comenzando con:

@import url("style.css"); 

El problema es que ahora también heredarán el restablecimiento de CSS.

¿Hay alguna manera (†) para llevar a los margin & padding propiedades de algunos elementos (encabezados, listas, etc.) a sus valores por defecto - los antes de aplicar el reajuste?

(†) que no sea el ajuste manual de cada propiedad a su valor inicial, tal como se define en las especificaciones de CSS.

Answer 1

Existe el valor propuesto initial para establecer una propiedad a su valor inicial, sin encontrar el valor explícito. Pero todavía está en fase de borrador y apenas se implementa en ningún navegador.

Además, probablemente eso no sea lo que te gustaría lograr. Si te entiendo correctamente, te gustaría configurar, p. los márgenes superior e inferior de los elementos h2 en el valor predeterminado del navegador. No creo que haya siquiera una forma propuesta de hacerlo en CSS. Las especificaciones no definen los valores predeterminados del navegador. El valor inicial de, por ejemplo, la propiedad de margen es 0. La razón por la cual los encabezados tienen el margen superior e inferior por defecto es que el navegador aplica, al menos conceptualmente, una hoja de estilo del navegador. Las especificaciones de CSS sugieren una hoja de estilo predeterminada del navegador pero no requieren una, y el navegador puede (y realmente lo hace) desviarse de las sugerencias.

En la práctica, la mejor toma en la situación dada sería comprobar Appendix D de la especificación CSS 2.1 y utilizar los valores que figuran allí. Para cosas como los márgenes, esto crearía principalmente el efecto de usar los valores predeterminados del navegador.

Answer 2

Creo que * {margin: auto} restablecería el margen (o h1 {margin: auto} si solo ese elemento se está restableciendo), pero esto no funcionará para el relleno. Técnicamente, la especificación es para que el relleno ya sea cero, sin embargo, si un navegador lo implementa de otra manera, no creo que haya una manera de restablecerlo.

Answer 3

En lugar de desear poder volver a los valores predeterminados del navegador, ¿por qué no establecer el suyo?

Todo lo que tendría que hacer es añadir sus declaraciones de conformidad con el CSS reset mundial:

* { margin: 0; } 
h1 { margin: 10px 0; } 

El h1 tiene prioridad sobre el selector mundial *.

Esto ayudaría normalize your CSS.