2011-07-29 9 views
12

Por ejemplo, the Meyer reset tiene una larga lista de elementos que creo que se pueden reemplazar por *?¿Por qué no se restablece CSS use '*' para cubrir todos los elementos?

he visto algún uso de:

* { 
    margin: 0; 
    padding: 0; 
} 

Pero más "avanzada" se restablece parecen ir con explicitando las etiquetas.

Los únicos elementos que no se trataran en la lista de etiquetas que son cubierta (creo) con un * se input, button, y select -la Eric Meyer restablecer, de hecho, no parece realmente lidiar con esos elementos en absoluto. Si evitar el restablecimiento de estos elementos es el problema ... ¿por qué no? Los navegadores, obviamente, no todos muestran elementos de formulario de la misma.


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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, I, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video
si tienes curiosidad.

Respuesta

15

Has adivinado correctamente: el motivo es form elementos.

Si configura border: 0 en, por ejemplo, input, perderá el estilo nativo.

Por ejemplo: http://jsfiddle.net/nrB6N/

Y, no hay manera de conseguir ese estilo predeterminado espalda.

+0

(Elegí 'border: 0' porque es un buen ejemplo y está en el restablecimiento de CSS que mencionaste.) – thirtydot

+0

Gracias por la respuesta: ¿existe un restablecimiento establecido para los elementos del formulario que de alguna forma deja de lado este problema? (¿Quizás usando JavaScript para detectar navegadores y ajustar el relleno o algo según el estilo original? Obviamente no sé de qué estoy hablando aquí). –

+1

En general, simplemente no los reinicie. ¿Hay alguna incoherencia particular que le preocupe? – thirtydot

2

Principalmente porque es un golpe de rendimiento. Además, dado que no desea aplicar el restablecimiento a todos los elementos todo el tiempo, excepto los que causan problemas (alrededor del modelo de caja).

Además, restablecer el estilo de select, input puede causar experiencias indeseables.

+0

¿Podría elaborar un poco aquí? ¿Cómo causa un golpe de rendimiento (fuente/pruebas?) ¿Por qué no quieres restablecer todos los elementos todo el tiempo? ¿Cómo el restablecimiento de 'select' y' input' causa una experiencia indeseable [s], y qué son? –

+0

Ser explícito lo ayuda en su navegador favorito - IE :). El resto de ellos está bastante bien. – Mrchief

+0

¿Tiene una fuente para eso? –

8

* es realmente, REALMENTE malo para el rendimiento (en realidad no importa en sitios pequeños, pero piensa en las repercusiones para más de 5000 elementos HTML, por ejemplo). Dirigirse a elementos específicos siempre es más rápido y más eficiente. También es algo a tener en cuenta al elegir si usar una ID o una CLASE. Cuente hoy en día con el JavaScript más que común y descubra que los elementos de orientación con ID o declaraciones de CSS precisas rinden en mejoras de rendimiento.

http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

ps. Además de la velocidad, también afecta a los elementos input, que después del borde *, el relleno y el margen 0 se vuelven bastante difíciles de diseñar para que se vean iguales en todos los navegadores, especialmente en IE. Leer más: http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

+0

¿Tiene una fuente para eso? –

+2

Encontrado y agregado a mi respuesta. – red

+2

gracias por los enlaces! – Mrchief

Cuestiones relacionadas