CSS inicial de Eric Meyer

0 COMENTARIOS - Publicado hace 34 meses - Clasificado en: CSS, SNIPPETS

Por defecto, todos los elementos HTML tienen unos atributos CSS predeterminados. Estos estilos, generalmente son los ocasionantes de algunos de los problemas más comunes a la hora de verse bien en todos los navegadores. Una opción es resetear los estilos. Eric Meyer nos aporta su hoja de estilos inicial así como algunas razones que le han llevado a utilizarla.

La razón principal es que todos los navegadores tienen presentaciones preestablecidas y todas ellas diferentes. [...] Por ejemplo, algunos navegadores sangran las listas con un margen izquierdo, mientras otros usan el padding… [...] Pero hay todo tipo de inconsistencias, unas más sutiles que otras. Los títulos tienen márgenes superiores e inferiores ligeramente diferentes, las distancias de sangría son diferentes, y así sucesivamente. Aún algo tan básico como la altura de las líneas varía de un navegador a otro—lo cual puede tener efectos en la altura de los elementos, las alineaciones verticales y en general todo el aspecto.
Seguir leyendo »»

La hoja es:

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: normal;
     font-style: normal;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline
}

body {
     line-height: 1
}

:focus {
     outline: 0
}

ol, ul {
     list-style: none
}

table {
     border-collapse: collapse;
     border-spacing: 0
}

blockquote:before, blockquote:after, q:before, q:after {
     content: ""
}

blockquote, q {
     quotes: "" ""
}

input, textarea {
     margin: 0;
     padding: 0
}

hr {
     margin: 0;
     padding: 0;
     border: 0;
     color: #000;
     background-color: #000;
     height: 1px
}

Vía Eric Meyer » »

Algunas entradas relacionadas: