selectores - selector css
¿Qué CSS de restablecimiento HTML5 usa y por qué? (8)
- Conserva los valores predeterminados útiles, a diferencia de muchos restablecimientos de CSS.
- Normaliza los estilos para una amplia gama de elementos HTML.
- Corrige los errores y las incoherencias comunes del navegador.
- Mejora la usabilidad con mejoras sutiles.
- Explica qué código hace usando comentarios detallados.
¿Qué CSS de restablecimiento HTML5 usa y por qué? ¿Hay alguno que haya encontrado para cubrir más casos?
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í.
Charla real: a pesar de las rebajas, kaikai tiene razón, solo necesitas restablecer * el margen y el margen a 0.
Aunque desafortunadamente el 99% de nosotros no tenemos recursos ni mano de obra para estar al día con los cientos de versiones de navegadores disponibles. Entonces, una hoja de reinicio es esencial para el sitio web típico.
html5reset: (Es demasiado interferente)
Acabo de echar un vistazo a http://html5reset.org/
img,
object,
embed {max-width: 100%;}
Y:
html {overflow-y: scroll;}
Entiendo que tiene buenas intenciones, pero ese no es el trabajo de una hoja de reinicio. Está haciendo demasiadas suposiciones.
Reinicio de BluePrint: (literalmente, un plano)
body {
line-height: 1.5;
background: white;
}
¿Qué pasa con 1.5. ¿Y por qué el fondo blanco? (Sé que es para corregir, pero aún no es necesario)
Normalize.css: (No es normal)
https://github.com/necolas/normalize.css/blob/master/normalize.css
Comenzó bien con algunos webkit / es decir, 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. y no restablecen la altura de línea del cuerpo.
Estoy seguro de que todo lo anterior hace bien el trabajo previsto, pero probablemente será anulado más de lo necesario.
Eric Meyer
YUI
HTML5Boilerplate
Lo anterior es más para profesionales con Boilerplate apoyándose en el (más amigable) lado estoy seguro 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 poco a poco y hacer mi propia, no es ciencia espacial.
El reset.css utilizado por Blueprint CSS Framework funciona bien e incluye elementos HTML5. Se incluye en su archivo screen.css .
Blueprint es un recurso útil para la creación rápida de prototipos de nuevos sitios, y su código fuente está bien organizado y vale la pena aprender de él.
Eric Meyer también lanzó v2 de su restablecimiento de CSS (y lo hizo hace casi un año):
La especificación de HTML5 incluye declaraciones CSS recomendadas para navegadores compatibles con CSS. Por diversión, los tomé y revirtí esos, donde tiene sentido. Puedes ver el resultado en este artículo .
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.
Uso Normalize o el restablecimiento de HTML5 Doctor, y lo modifico para que se ajuste al proyecto en el que estoy trabajando.
Por cierto, solo el concepto de usar un reinicio se ha convertido en un estándar más o menos.
Normalize.css es ideal tanto para los navegadores de escritorio como para los dispositivos móviles y se usa en muchas plantillas HTML populares.
Pero, ¿qué pasa con el uso de la propiedad CSS all que restablece las propiedades de CSS excepto direction y unicode-bidi ? De esta forma no necesita incluir ningún archivo adicional:
* { all: unset }
Actualmente es compatible con Firefox y esperamos que otros hagan lo mismo para que el proceso de reinicio sea muy simple.
* {
margin: 0;
padding: 0;
}
simple pero totalmente efectivo. tal vez arrojar un:
body {
font-size: small;
}
para una buena medida.