CSS mínimo
23 de noviembre de 2007 3 comentarios
En este artículo, la presentación de una propuesta de mínimos archivo CSS, es decir, declaraciones que, en mi opinión, son esenciales para una hoja de estilos.
Sumario
Lo que me impulsó a escribir este artículo
En los últimos días, he tenido algunos problemas con los archivos CSS que tuvo que cambiar - y que yo no era yo, inicialmente, que lo hizo. Cada desarrollador tiene su estilo de codificación de la web, se trata de hecho, otro hecho es que resulta difícil proporcionar a los trabajos de mantenimiento en el exterior, si los desarrolladores no han acordado normas para el etiquetado de una de la otra. Es mi caso…
En este artículo, no tratar de hacer modelos de codificación de CSS, sugerencias de cómo la posición de las teclas, y cómo debe ser la identação de los textos. Estoy centrado en las normas, ellos mismos, y no en la forma en que cada uno prefiere organizar su código. Con este fin, el Bruno Dulcetti ya maneja muy bien en tu blog.
¿Cómo no quieren lo mismo sucede con otras personas, decidió interponer en como sería, en mi opinión, no muy amplios conocimientos de CSS, algunas reglas esenciales para cualquier hoja de estilo.
Para aparecer, me gustaría dejar un grabado que las bases de lo que voy a presentar aquí se tomó la compilación de 70 expertos Ideas Para mejorar la CSS Codificación de Mercancías, los Smashing Revista - y traducido por Maujor en tu blog; otro, viene de mi propio conocimiento y experiencia con CSS.
Sin más enrolações, a lo que importa!
"Reset" los elementos
Para empezar, es más importante que claro, en el selector universal, margen y el relleno:
* (
margin: 0;
padding: 0;
)
[Update]
El Pedro Rogerio habló de una mejor manera de restablecer los elementos. Camino a la que poner aquí, también.
[/ Update]
html, body, div, span, applet, objeto, iframe, H1, H2, H3, H4, h5, h6, p, bloque, previamente, a, ABBR, sigla, dirección, grande, cita, el código, del, DFN, a, tipo de letra, img, complementos, kbd, q, s, muestras, pequeños, huelga, fuerte, sub, sup, tt, var, b, u, i, en el centro, dl, dt, dd, ol, ul, Leo, fieldset, la forma, etiqueta, la leyenda, mesa, pie de foto, tbody, tfoot, thead, tr, th, td (margin: 0; padding: 0; frontera: 0; esquema: 0; vertical-se suman: base de referencia de fondo: transparente; Órgano () la línea de altura: 1;) ol, ul (lista de estilo: ninguno;) bloque, q (las comillas: ninguno;): enfoque (esquema: 0; ins) (text-decoration: none; del (texto) -- Decoration: line-through;) mesa (frontera de colapso: colapso; frontera de espaciamiento: 0;) Sólo pueden asegurarse de que evitar por lo menos una docena de problemas con el posicionamiento - Eric Meyer, Christian Montoya y Roger Johansson, por ejemplo, recomendar esta práctica.
Una fuente de tamaño "especial" para html
De conformidad con el orden - y al parecer excéntrico - paso es colocar un valor "especial" para el tamaño de fuente, el estilo de html:
html (font-size: 100. 01%;) Fue, también, a partir de 70 consejos, y la explicación es la siguiente:
Este extraño valor de 100,01% para el tamaño de la fuente, corrige una serie de errores en diversos navegadores. En primer lugar, definir un tamaño de la fuente elemento cuerpo como un porcentaje (en lugar de los Estados miembros) impide un problema en IE / Win que tiende a aumentar desproporcionadamente o disminuir el tamaño de las fuentes de texto que contiene elementos donde se fija el tamaño de fuente en la EM . Lo que es más, algunas versiones de Opera por defecto renderizam tamaños, de 100% a las fuentes mucho menor en comparación con otros navegadores. Safari, a su vez, no se comporta bien con tipo de letra de tamaño igual al 101%.
Eliminar el borde de la fea imágenes que se enlazan
Cuando usted coloca una imagen que sirva de enlace, una frontera parece indicar que. Sin embargo, es muy feo y, en la mayoría de los casos, "romper" la línea completa de diseño de páginas web que se utilice. Para abordar esta cuestión, basta con reiniciar la frontera del elemento img:
(img border: 0;) El tal "mínimo CSS"
Luego, el archivo final - o pudiera ser "original"? :-) - Sería la siguiente:
* (
margin: 0;
padding: 0;
)
html, body, div, span, applet, objeto, iframe, H1, H2, H3, H4, h5, h6, p, bloque, previamente, a, ABBR, sigla, dirección, grande, cita, el código, del, DFN, a, tipo de letra, img, complementos, kbd, q, s, muestras, pequeños, huelga, fuerte, sub, sup, tt, var, b, u, i, en el centro, dl, dt, dd, ol, ul, Leo, fieldset, la forma, etiqueta, la leyenda, mesa, pie de foto, tbody, tfoot, thead, tr, th, td (margin: 0; padding: 0; frontera: 0; esquema: 0; vertical-se suman: base de referencia de fondo: transparente; Órgano () la línea de altura: 1;) ol, ul (lista de estilo: ninguno;) bloque, q (las comillas: ninguno;): enfoque (esquema: 0; ins) (text-decoration: none; del (texto) -- Decoration: line-through;) mesa (frontera de colapso: colapso; frontera de espaciamiento: 0; html) (font-size: 100. 01%;) (img border: 0;) Por último…
Estos consejos que he planteado son simples "medidas de seguridad" a fin de evitar problemas con estilizações. Ciertamente hay otros más, porque todos los días, una nueva técnica y / o la forma de etiqueta aparece - y / o la tecnología en sí no se mejora. Que saben más consejos, y macetes Trick por un mínimo de CSS, por favor, poner un comentario aquí o envíe un mensaje a mí me puede actualizar el artículo.
¡Ah! Y dar los 70 consejos para CSS, porque realmente son muy buenos!
Gran tutorial, ¡enhorabuena!
Voy a utilizar estos consejos en mi próximo trabajo.
;]
HUNT @ [COBRA]
Gracias!
Como se recomienda en el correo, asegúrese de dar los 70 consejos, hay muchas otras técnicas que no logran ser "obligatoria", sino que, según el diseño y el estilo de los desarrolladores, son de gran utilidad!
Apareça!
Pingback el 26 de febrero de 2008