html - para - selectores css
Recupere las propiedades predeterminadas después de aplicar un restablecimiento global de CSS (3)
Algún código heredado sobre el que tengo que basar, realmente me hace sentir los inconvenientes del restablecimiento global de CSS .
Tengo el viejo foo.css que comienza con
* {margin:0; padding:0;}
y solía copiarlo en un archivo diferente bar.css , modificarlo también mis necesidades ( con el restablecimiento de CSS ), y usarlo para reemplazar 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 heredé el restablecimiento de CSS.
¿Hay alguna forma (†) de restablecer las propiedades de margin y padding de algunos elementos (encabezados, listas, etc.) a sus valores predeterminados, es decir, antes de aplicar el restablecimiento?
(†) aparte de configurar manualmente cada propiedad a su valor inicial, tal como se define en las especificaciones de CSS .
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.
Existe el valor inicial propuesto 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, querrás establecer, por ejemplo, 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 de navegador predeterminada, 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 verificar el Apéndice D de la especificación CSS 2.1 y usar los valores que allí se dan. Para cosas como los márgenes, esto crearía principalmente el efecto de usar los valores predeterminados del navegador.
En lugar de desear poder volver a los valores predeterminados del navegador, ¿por qué no establecer los tuyos?
Todo lo que tendría que hacer es agregar sus declaraciones en su restablecimiento global de CSS:
* { margin: 0; }
h1 { margin: 10px 0; }
El h1 tiene prioridad sobre el selector global * .
Esto ayudaría a normalizar tu CSS .