Як правильно скинути стилі CSS

У різних браузерах можуть трохи(або й далеко не трохи) різнитися стандартні стилі для окремих html-елементів. Наприклад, вони можуть мати різні відступи, розміри тощо. Якщо ви маєте за мету верстати саме кросбраузерно - цей пост саме для вас.

Починаємо

Щоб було зручніше верстати, та результат був однаковий у всіх популярних браузерах, рекомендується спочатку скинути стандартні стилі браузера та привести до одного вигляду всі елементи на сторінці.

Найпростіший та найстаріший(з 2004 року) спосіб - це просто обнулити всі зовнішні та внутрішні відступи.

* {
	padding: 0;
	margin: 0;
}

reset.css

Попереднього способу в принципі може вистачити, але не завжди. Існує й більш зручний варіант для скидування стилів - reset.css, який встановлює базові стилі для більшості елементів. Існують готові варіант, наприклад від Chris Poteet. Я ж раніше користувався переважно reset.css від Eric Mayer:

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Він на маю думку найпродуманіший, ще і як плюс працює з HTML5.

normalize.css

Це альтернатива reset.css, і я б сказав навіть більше не альтернатива, а набагато кращий варіант:

  • він не просто скидає стилі приводячи все до одного вигляду, а саме їх нормалізує, зберігаючи корисні налаштування окремих браузерів;
  • виправляє дрібні помилки, наприклад показ html5-елементів та різноманітні баґи в IE9 тощо;
  • сам файл поділений на логічні частини, тому після верстки ви можете спокійно видалити те що вам не треба, чим зможете полегшити сайт;
  • проект і зараз розвивається, і кожен охочий може привнести щось своє.

Завантажити normalize.css можна на GitHub.

Який метод використовувати - це вже вам вирішувати. Найкращий варіант особисто для мене - normalize.css. Він як на мене найзручніший та найпродуманіший.

Також рекомендую скидування стилів тримати в окремому файлі. Як мінімум вам буде простіше його використовувати в різних проектах - просто копіювати з одного до іншого. Підключати його треба першим у черзі, тому що css-правила записані нижче у файлі або порядком підключення стилів - перезаписують правила записані вище.

Також не бійтеся за необхідності підправляти його під себе, редагувати щось, додавати своє та підлаштовувати до особливостей проекту якщо треба. Тим паче хто вам заважає вам написати свій власний набір правил для скидування стилей. :)