¿Qué CSS de restablecimiento de HTML5 usa y por qué? ¿Hay alguno que haya encontrado para cubrir más casos?¿Qué CSS de restablecimiento de HTML5 usa y por qué?
Empecé a usar HTML5 Doctor's: http://html5doctor.com/html-5-reset-stylesheet/ Parece que funciona, pero me pregunto si hay algo mejor por ahí.
* {
margin: 0;
padding: 0;
}
simple pero totalmente efectivo. quizás arroje un:
body {
font-size: small;
}
para una buena medida.
Al cambiar el margen predeterminado y el relleno en los controles de formulario, se pueden producir efectos no deseados y las palabras clave de tamaño de fuente con nombre no tienen un comportamiento totalmente uniforme en todos los navegadores. Esto es demasiado simplista. Tampoco establece estilos para los elementos introducidos en HTML 5, por lo que permanecen 'display: inline'. – Quentin
No estoy de acuerdo. El margen y el relleno son las únicas propiedades impredecibles. La propiedad de tamaño de fuente usa una palabra clave con nombre para dirigirse específicamente a los navegadores que las leen, lo que hace que las escalas de fuente YUI sean efectivas en todos los navegadores principales (http://developer.yahoo.com/yui/examples/fonts/fonts-size_source.html) Tampoco me gustaría imponer el flujo normal de elementos, por lo que dejaría esos elementos HTML 5 solos, solo cambiando su tipo de visualización o posicionamiento según sea necesario. Me doy cuenta de que mi elección es impopular, pero es mucho más elegante que otras soluciones y funciona. – kaikai
¡No, no, no, no! Los elementos HTML5 no tienen configurada la propiedad de visualización, por lo que regresan al "display: inline" por defecto. ¿Alguna vez has visto un diagrama del sitio donde el encabezado, el pie de página, la navegación, las columnas laterales, prácticamente cada sección de página fluye en línea? Lo siento kaikai, pero esto simplemente no es aceptable! –
El modelo reset.css utilizado por Blueprint CSS funciona bien e incluye elementos HTML5. Se incluye en su archivo screen.css.
Blueprint es un recurso útil para el prototipado rápido de nuevos sitios, y su código fuente está bien organizado y vale la pena aprender de él.
La especificación HTML5 incluye recommended CSS declarations para navegadores compatibles con CSS. Por diversión, los tomé y revirtí esos, donde tiene sentido. Puede ver el resultado in this article.
Sin embargo,, no recomiendo usar esto en producción. Es más una prueba de concepto y podría utilizarse mejor para dar pistas que para servir como una hoja de estilo de restablecimiento de uso múltiple. Cualquiera de las otras sugerencias anteriores podría ser una mejor opción.
Eric Meyer también dio a conocer v2 de su restablecimiento CSS (y así lo hizo hace casi un año):
Simple pero eficaz y más rápido que los restablecimientos que se basan en el * selector universal. – tomasz86
charla real: A pesar de las reducciones del precio kaikai es correcto, sólo es necesario para restablecer el relleno * & margen a 0.
Aunque lamentablemente el 99% de nosotros no tiene recursos o mano de obra para mantenerse al día con los cientos de versiones de navegador que hay. Entonces, una hoja de reinicio es esencial para el sitio web típico.
html5reset: (es demasiado interfiriendo)
Me tomó un vistazo a http://html5reset.org/
img,
object,
embed {max-width: 100%;}
Y:
html {overflow-y: scroll;}
Entiendo que tiene buenas intenciones, pero, eso no es el trabajo de una hoja de reinicio. Está haciendo demasiadas suposiciones.
BluePrint Reset: (literalmente un anteproyecto)
body {
line-height: 1.5;
background: white;
}
¿Cuál es hasta con 1,5. Y por qué el fondo blanco (Sé que es para corregir, pero todavía no es necesario)
Normalize.css:? (No normal)
https://github.com/necolas/normalize.css/blob/master/normalize.css
Empezó bien con algunos webkit/IE hacks pero
h1 {
font-size: 2em;
margin: 0.67em 0;
}
h2 {
font-size: 1.5em;
margin: 0.83em 0;
}
h3 {
font-size: 1.17em;
margin: 1em 0;
}
h4 {
font-size: 1em;
margin: 1.33em 0;
}
h5 {
font-size: 0.83em;
margin: 1.67em 0;
}
h6 {
font-size: 0.75em;
margin: 2.33em 0;
}
Cada etiqueta de encabezado está dirigida. & no restablecen la altura de línea del cuerpo.
Estoy seguro de que todo lo anterior funciona bien, pero probablemente se anulará más de lo necesario.
Eric Meyer
YUI
HTML5Boilerplate
Los anteriores son más para los profesionales con la plancha de caldera se inclina hacia un lado (más amigable) Estoy seguro de que, debido a la popularidad. Por el momento, el 80% de mi reseteo personalizado es un estándar.
Voy a ir a través de los tres bit a bit y hacer mi propia, no es ciencia espacial.
Tenga en cuenta que normalize.css ha cambiado por ahora; los tamaños de letra de los encabezados ya no están configurados. –
Vale la pena mencionar que Normalize.css no solo administra navegadores de escritorio sino también navegadores móviles como iOS Safari, Chrome para Android, navegadores estándar, y otros, que son únicos en sí mismos. Por esta razón y otras, Normalize se integra en muchos marcos populares. –
Solía usar 'Eric Meyer' pero ahora uso la hoja de estilo de reinicio 'YUI' por esto: http://danielsokolowski.blogspot.ca/2012/11/a-tip-for-relatively-sized-html-input. html –
Normalize.css es ideal para navegadores de escritorio y dispositivos móviles y se utiliza en muchas plantillas HTML populares.
Pero, ¿qué pasa con el uso de la propiedad CSS all que restablece las propiedades CSS excepto direction y unicode-bidi? De esta manera no es necesario incluir los archivos adicionales:
* { all: unset }
Se admite actualmente en Firefox y es de esperar que otros sigan el ejemplo haciendo que el proceso de restablecimiento muy simple.
Interesante, pero parece ser la solución más lenta y solo compatible con Firefox, por lo que no tiene un uso real (al menos en este momento). – tomasz86
Es cierto que solo Firefox lo está respaldando ahora, pero creo que tiene buenas posibilidades de terminar en soluciones como Modernizr. https://github.com/Modernizr/Modernizr/issues/1219 –
Uso Normalize o el restablecimiento de HTML5 Doctor, y lo modifico para que se ajuste al proyecto en el que estoy trabajando.
BTW es solo el concepto de usar un restablecimiento que se ha convertido en un estándar más o menos.
¿Tiene algún detalle adicional? –
No dejo en elementos que no estoy utilizando un proyecto específico. Por ejemplo, elimino elementos de formulario si no estoy usando formularios. Estoy seguro de que entiendes la idea. No tiene sentido reiniciar los elementos que no está utilizando. – cornishninja
Para respaldar mi punto sobre modificar el reinicio para que se ajuste a mis necesidades: http://www.cssreset.com/which-css-reset-should-i-use/ – cornishninja
Similar a: http://stackoverflow.com/questions/3277671/css-reset-for-html5 –
Es similar, sí, pero estoy más que buscando utilizar alguien más en lugar de modificar uno para hacerlo funcionar tan en una fecha posterior, si es necesario, solo puedo copiar una versión más reciente. –
HTML5! == CSS ... alguna vez. –