Esprimere IT

Ieri, dopo il problema che ho incontrato con la Ripristina CSS in Google Chrome ... ho pensato di scavare un po 'più a fondo nella zona di User Agent fogli di stile ...
Trovato questa tabella sui valori di default CSS2.1 User Agent fogli di stile ... (per coloro che inconsapevoli di ciò che "Fogli di stile" User Agent è seguire Qual è l'utente dei fogli di stile Agent (Specification) .

Per un elenco completo dei CSS 2.1 User agent defaults Style Sheets clicca qui

Ieri, come ogni altro "Day terra Hog", stavo lavorando su alcuni layout CSS / tableless. Tutto stava andando bene in IE 7, FF 3 e Chrome, fino a un tratto, ho visto alcuni non-trascurabili margini di visto solo in Google Chrome. Anche se molto strano e worring, E 'stato qualche problema nuovo bug / che ero venuto attraversato, c'era finalmente qualche spezia nel mio lavoro banale. Sad (ma bello) che è stato riparato in pochi minuti della sonda ...

In sostanza, sembrava che Google Chrome ignorato il mio Ripristina CSS (margin: 0px). In realtà è stato causato dal foglio di stile user agent (-webkit-padding-start: 40px). Quindi la soluzione era quella di resettare questo stile impostando padding: 0 gli elementi malfunzionanti.
Un buon modo per evitare questo problema si verifichi a qualsiasi elemento è utilizzare un riposo globale CSS come segue

* {Margin: 0; padding: 0;}

Qual è l'utente dei fogli di stile Agent (Specification)?
Il brano che segue è tratto da http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , seguente link per saperne di più su fogli di User Agent di stile

CSS 1 introduce l'idea affermando che ogni User Agent (UA, spesso un 'browser web' o 'client web') avrà un foglio di stile predefinito che presenta i documenti in modo ragionevole - ma forse banale - modo. CSS 2 dice che i programmi utente conformi devono applicare un foglio di stile predefinito (o comportarsi come se lo facessero) e che un agente dell'utente foglio di stile di default dovrebbe presentare gli elementi del linguaggio del documento in modo da soddisfare le aspettative di presentazione generali per la lingua del documento; CSS 3 è probabile che sia la stessa mente.

Dato che le specifiche CSS lasciare fino a implementazioni se utilizzare un foglio di "vero" stile per la visualizzazione di default o no, non è sorprendente che non si trova un foglio di stile di default nella cartella di installazione ogni browser. A differenza di Internet Explorer di Microsoft così come Opera, per esempio (e per quanto ne so), browser Gecko come Firefox e Netscape Navigator (cerca "html.css"), ma anche Konqueror rende piuttosto semplice da comprendere il loro stile di default.

Un reset CSS è / sono i CSS per impostare una serie di stili di elementi in una linea di base specifica che crea coerenza tra i vari browser.

Tutti siamo stati passante gli incubi di scrittura cross-browser CSS. Così, quando abbiamo iniziato a scrivere il nostro CSS, E 'una pratica per reimpostarla prima di rimuovere / ripristinare eventuali incoerenze cross browser. Ripristina CSS, sono semplici poche righe di CSS che iniziano con il CSS, fornendo una base pulita per iniziare a costruire il vostro momento.

Il reset CSS che normalmente tendono a utilizzare il seguente aspetto

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ol, ul {
list-style: none;
}

h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}

Ripristina la dimensione del carattere del browser
Da notare anche il reset che è stato applicato alla dimensione del font del browser nella riga seguente ...

html {font-size: 76%;}

Quanto sopra CSS azzera la dimensione del carattere del browser a 10 pixel, e questo rende possibile lavorare con dimensioni relative per i font (che è ogni importante dal punto di conformità WAI prespective)
Per esempio, nella seguente definizione, font-size in un arco è impostata a 10 pixel e che nel paragarph è impostato a 14 pixel ...

span {font-size: 1em;}
p {font-size: 1.4em;}