Programmazione Web » aumentare compatibilità css http://www.programmazione-web.com il Blog open degli sviluppatori del web! Mon, 25 Jul 2011 16:39:01 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Reset del css: Fogli di stile con maggiore compatibilità http://www.programmazione-web.com/fogli-di-stile-consistenti-reset-css.php http://www.programmazione-web.com/fogli-di-stile-consistenti-reset-css.php#comments Fri, 11 Apr 2008 07:57:01 +0000 neryo http://www.programmazione-web.com/fogli-di-stile-consistenti-reset-css.php Reset del css: Fogli di stile con maggiore compatibilità

L’obbiettivo di questo tips è quello di ridurre al minimo l’incompatibilità tra diversi browser nel parsing delle pagine, soprattutto per quanto riguarda altezze, margini, dimensioni dei font, tag di heading ecc..
Questo perchè ogni browser utilizza una diversa impostazioni di default per il rendering della pagina, quindi per evitare dimenticanze, è necessario operare effettuando delle sovrascritture riportando ad una impostazione di default più consona e consistente, permettendoci poi di lavorare serenamente occupandoci solamente del layout che stiamo creando.
La necessità di creare lo stile di reset generico, è venuta con l’avvento dei framework css come ad esempio blueprint, e ora anche se non si utilizza un framework css è buona regola per semplificarci il lavoro includere nelle nostre pagine questo css, perchè ci fornisce un punto di partenza consistente multi-browser.

Qui sotto riportato un esempio stabile di un css di reset, che l’autore Eric A. Meyer di meyerweb.com ci lascia tranquillamente utilizzare e modificare.

  1.  
  2. /* v1.0 | 20080212 */
  3.  
  4. html, body, div, span, applet, object, iframe,
  5. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  6. a, abbr, acronym, address, big, cite, code,
  7. del, dfn, em, font, img, ins, kbd, q, s, samp,
  8. small, strike, strong, sub, sup, tt, var,
  9. b, u, i, center,
  10. dl, dt, dd, ol, ul, li,
  11. fieldset, form, label, legend,
  12. table, caption, tbody, tfoot, thead, tr, th, td {
  13.  margin: 0;
  14.  padding: 0;
  15.  border: 0;
  16.  outline: 0;
  17.  font-size: 100%;
  18.  vertical-align: baseline;
  19.  background: transparent;
  20. }
  21.  
  22. body {
  23.  line-height: 1;
  24. }
  25.  
  26. ol, ul {
  27.  list-style: none;
  28. }
  29.  
  30. blockquote, q {
  31.  quotes: none;
  32. }
  33.  
  34. blockquote:before, blockquote:after,
  35. q:before, q:after {
  36.  content: ”;
  37.  content: none;
  38. }
  39.  
  40. /* remember to define focus styles! */
  41. :focus {
  42.  outline: 0;
  43. }
  44.  
  45. /* remember to highlight inserts somehow! */
  46. ins {
  47.  text-decoration: none;
  48. }
  49.  
  50. del {
  51.  text-decoration: line-through;
  52. }
  53.  
  54. /* tables still need ‘cellspacing="0"’ in the markup */
  55. table {
  56.  border-collapse: collapse;
  57.  border-spacing: 0;
  58. }

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

http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

]]> http://www.programmazione-web.com/fogli-di-stile-consistenti-reset-css.php/feed 1