¿Qué CSS de restablecimiento HTML5 utiliza y por qué? [cerrado]

123

¿Qué CSS de restablecimiento HTML5 utiliza 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í.

Darryl Hein
fuente
Es similar, sí, pero solo busco usar a alguien más en lugar de modificar uno para que funcione, así que en una fecha posterior, si es necesario, puedo copiar una versión más nueva.
Darryl Hein
20
D_N Entiendo eso, pero HTML5 tiene un efecto en el CSS, especialmente en un CSS de reinicio donde ahora necesita incluir otras etiquetas, como nav o de lado.
Darryl Hein

Respuestas:

40

Charla real: a pesar de las rebajas, Kaikai tiene razón, solo necesita restablecer * el relleno y el margen a 0.

Aunque desafortunadamente el 99% de nosotros no tenemos recursos ni mano de obra para mantenerse al día con los cientos de versiones de navegador que existen. Por lo tanto, una hoja de reinicio es esencial para el sitio web típico.

html5reset: (interfiere demasiado)

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 demasiados supuestos.

Restablecimiento de BluePrint: (literalmente un plano)

body {
  line-height: 1.5;
  background: white;
}

¿Qué pasa con 1.5. ¿Y por qué fondo blanco? (Sé que es para corregir pero aún no es necesario)

Normalize.css: (no normal)

https://github.com/necolas/normalize.css/blob/master/normalize.css

Comenzó 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. y no restablecen la altura de la línea del cuerpo.

Estoy seguro de que todo lo anterior hace bien el trabajo previsto, pero probablemente se anulará más de lo necesario.

Eric Meyer

YUI

HTML5Boilerplate

Lo anterior es más para profesionales con Boilerplate inclinado hacia el lado (más amigable), estoy seguro debido a la popularidad. Por el momento, el 80% de mi reinicio personalizado es repetitivo.

Voy a ir aunque los tres poco a poco y hacer el mío, no es ciencia espacial.

Indefinido
fuente
2
Tenga en cuenta que normalize.css ha cambiado por ahora; los tamaños de fuente de los encabezados ya no están configurados.
Ruben Verborgh
2
Vale la pena mencionar que Normalize.css no solo administra los navegadores de escritorio, sino también los navegadores móviles como iOS Safari, Chrome para Android, los navegadores de inventario, etc., que son únicos por derecho propio. Por este motivo y otros, Normalizar se integra en muchos marcos populares.
Matt Smith
Solía ​​usar 'Eric Meyer' pero ahora uso la hoja de estilo de reinicio 'YUI' debido a esto: danielsokolowski.blogspot.ca/2012/11/…
Daniel Sokolowski
19

Normalize.css es ideal para navegadores de escritorio y móviles y se usa en muchas plantillas HTML populares.

Pero, ¿qué pasa con el uso de la allpropiedad CSS que restablece las propiedades CSS excepto directiony unicode-bidi? De esa manera no necesita incluir ningún archivo adicional:

{
    all: unset
}

CSS alltiene un amplio soporte, excepto en IE / Edge. De manera similar con unset.

Matt Smith
fuente
Interesante, pero parece ser la solución más lenta y solo se admite en Firefox, por lo que no tiene un uso real (al menos en este momento).
tomasz86
Es cierto que solo Firefox lo admite en este momento, pero creo que tiene muchas posibilidades de terminar en soluciones como Modernizr. github.com/Modernizr/Modernizr/issues/1219
Matt Smith
6

El reset.css utilizado por el marco Blueprint CSS 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 aprenderlo.

becerro
fuente
4

Eric Meyer también lanzó v2 de su reinicio CSS (y lo hizo hace casi un año):

http://meyerweb.com/eric/tools/css/reset/

Illes Peter
fuente
Simple pero efectivo, y más rápido que los reinicios que dependen del * selector universal.
tomasz86
3
  1. Conserva valores predeterminados útiles, a diferencia de muchos restablecimientos CSS.
  2. Normaliza los estilos para una amplia gama de elementos HTML.
  3. Corrige errores e inconsistencias comunes del navegador.
  4. Mejora la usabilidad con sutiles mejoras.
  5. Explica qué hace el código utilizando comentarios detallados.

normalize.css

zzart
fuente
2
* {
    margin: 0;
    padding: 0;
}

simple pero completamente efectivo. tal vez tirar un:

body {
    font-size: small;
}

para una buena medida.

kaikai
fuente
9
Zapping el margen predeterminado y el relleno en los controles de formulario pueden tener efectos no deseados y las palabras clave de tamaño de fuente con nombre no tienen un comportamiento completamente coherente en todos los navegadores. Esto es demasiado simplista. Tampoco puede establecer estilos para los elementos introducidos en HTML 5, por lo que permanecen display: inline.
Quentin
44
Estoy en desacuerdo. El margen y el relleno son las únicas propiedades impredecibles. La propiedad de tamaño de fuente utiliza una palabra clave con nombre para dirigirse específicamente a los navegadores que los leen, lo que hace que las escalas de fuente YUI sean efectivas en todos los navegadores principales ( developer.yahoo.com/yui/examples/fonts/fonts-size_source.html ). Tampoco querría imponerme al 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
3
¡No no no no no! Los elementos HTML5 no tienen establecida la propiedad de visualización, por lo que vuelven a sus valores predeterminados display: inline. ¿Alguna vez has visto un diagrama del sitio donde el encabezado, pie de página, navegación, columnas laterales, prácticamente cada sección de la página que fluye en línea? Lo siento kaikai, ¡pero esto no es aceptable!
Filip Dupanović
Amigo, ni siquiera soy un gurú HTML5 (todavía) y sé que esta no es la forma correcta de reiniciar.
Icemanind
44
Respuesta absolutamente válida. El único inconveniente podría ser que los *selectores son lentos, escuché.
Anton Strogonoff
2

La especificación HTML5 incluye declaraciones CSS recomendadas para navegadores con capacidad CSS. Por diversión, los tomé y los revertí, donde tiene sentido. Puede 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 usarse mejor para dar pistas que para servir como una hoja de estilo de reinicio de uso múltiple. Cualquiera de las otras sugerencias anteriores podría ser una mejor opción.

Boldewyn
fuente
0

Uso Normalize o el reinicio de HTML5 Doctor, y lo modifico para que se ajuste al proyecto en el que estoy trabajando.

Por cierto, es solo el concepto de usar un reinicio que se ha convertido más o menos en un estándar.

cornishninja
fuente
¿Tienes algún detalle adicional?
James A Mohler
No dejo en elementos que no estoy usando un proyecto específico. Por ejemplo, elimino elementos de formulario si no estoy usando formularios. Estoy seguro de que tienes la idea. No tiene sentido restablecer elementos que no está utilizando.
cornishninja
Para respaldar mi punto sobre la modificación del restablecimiento para satisfacer mis necesidades: cssreset.com/which-css-reset-should-i-use
cornishninja el