Come sappiamo, nello sviluppo di un sito Web il problema fondamentale quando si deve realizzare un layout web con i CSS è quello di far visualizzare correttamente le pagine in ogni browser. Quando si progetta il foglio di stile della pagina bisogna tener conto anche degli stili integrati di default in ogni browser, stili che assegnano un valore iniziale alle proprietà di ogni elemento.

Da qualche anno a questa parte, sono stati realizzati diversi fogli di stile da includere nei nostri progetti che consentono di azzerare le proprietà personalizzate dei vari browser. Questi fogli di stile sono chiamati Reset CSS e vanno inseriti prima di tutte le altre regole CSS del progetto.

Ad esempio tra i più popolari abbiamo quello di Eric Meyer CSS Reset, oppure la libreria YUI 2 realizzata da Yahoo. Ci sono anche altri fogli di stile di reset meno famosi di quelli appena visti. Tra questi spicca sicuramente HTML5 Reset Stylesheet che, basato sul reset di Meyer, consente di azzerare lo stile anche ai nuovi elementi introdotti dalla specifica dell’HTML5.

Dalle parole dello sviluppatore si evince lo scopo del suo progetto:

“I started by removing elements that have been deprecated from the HTML 5 specification, like acronym, center and big. (We’ll cover deprecated elements in more detail in another post). I also added new HTML 5 elements, like and, in order to remove any default padding, margin, and borders. I’ve also added an explicit display:block property for elements that are required to render as blocks.

I also removed the explicit unstyling of the :focus pseudo-class. There are two reasons for this. First, by declaring outline:0, you remove the focus identifier for keyboard users. Second, Eric released his stylesheet in good faith that people would explicitly style :focus, but they generally don’t, so it’s safer to leave the default :focus styles in place. (I also set defaults for ins, since I don’t think that got updated very often either.)

I’ve left the default list styles in place simply as a personal preference. I tend to add the list style back when using Eric’s reset anyway. I have, however, included nav ul {list-style:none;} to remove those pesky bullets from your navigation.”

Scaricate il foglio di stile