Killer Коллекция CSS Reset

Использование CSS для стилизации семантически значимой (X) разметки HTML является важным ключом к современной практике веб-дизайна. В идеальном мире каждый браузер интерпретирует и применяет все правила. CSS одинаково. Однако в несовершенном мире, в котором мы живем, часто происходит обратное: многие стили. CSS отображаются по-разному практически в каждом браузере.

Многие, если не все, крупные современные браузеры (например, Firefox, Opera, Internet Explorer, Netscape и др.) Реализуют свои собственные обобщенные правила CSS , которые часто конфликтуют с стилями, применяемыми дизайнером. Другие браузеры не могут правильно реализовать различные правила CSS , что приводит к путанице страниц, которые прекрасно отображаются в других браузерах. Хуже того, некоторые браузеры полностью игнорируют специфические аспекты CSS , полностью игнорируя общепринятые атрибуты и свойства CSS .

Излишне говорить, что непредсказуемый способ реализации CSS браузерами требует от нас поиска реалистичных стратегий выравнивания браузера. Не полагаясь на JavaScript для синтетического улучшения функциональности браузера по умолчанию, мы полностью сосредотачиваем наши усилия по нейтрализации браузера на самом CSS . Используя соответствующим образом определенный набор правил «сброса» CSS , можно переопределить стили браузера по умолчанию и эффективно нейтрализовать поведение, что позволяет нам строить наш CSS на единой основе.

Использование тщательно разработанного набора глобальных стилей сброса CSS позволяет дизайнерам делать предположения о поведении браузеров по умолчанию. Эти предположения о представлении значительно упрощают процесс создания «универсально» согласованного дизайна CSS с использованием только одного набора правил CSS . Такое упрощение процесса приводит к значительной экономии времени и денег. Многие ведущие дизайнеры отрасли годами использовали стили сброса CSS , пожиная плоды и делясь результатами.

В этой статье я собрал отобранную вручную коллекцию свободно доступных глобальных стилей сброса CSS . Я с большим успехом использовал каждую из этих перезагрузок в различных случаях, и даже сумел собрать воедино индивидуальный гибрид, который каннибализирует ключевые аспекты различных других. Для каждого сброса я предоставляю как можно больше информации об источнике сброса, ключевых эффектах и ​​другой важной информации. Кроме того, поскольку я не знаю оригинального автора для некоторых из этих перезагрузок, пожалуйста, оставьте комментарий, если вы случайно узнали. Итак, без лишних слов, я представляю потрясающую коллекцию глобальных стилей сброса CSS .

Минималистичный сброс — версия 1

Как бы это ни было базово, этот глобальный сброс использует селектор подстановочных знаков, чтобы сбросить заполнение и поля для всех элементов до нуля. По моему опыту, просматривая исходный код других дизайнеров, это наиболее часто используемый сброс CSS . Я вижу это везде ..

* {
	padding: 0;
	margin: 0;
	}

Минималистичный сброс — версия 2

Этот сброс идентичен предыдущему, но также учитывает все обработки границ по умолчанию, которые также эффективно нейтрализуются до нуля.

* {
	padding: 0;
	margin: 0;
	border: 0;
	}

Минималистичный сброс — версия 3

Эта последняя версия «минималистического» сброса похожа на две предыдущие, но также убивает стиль контура по умолчанию.

* {
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
	}

Сгущенный универсальный сброс

Это мой текущий любимый сброс CSS . Он обрабатывает все необходимое и обеспечивает относительно универсальную унификацию стиля браузера по умолчанию.

* {
	vertical-align: baseline;
	font-weight: inherit;
	font-family: inherit;
	font-style: inherit;
	font-size: 100%;
	border: 0 none;
	outline: 0;
	padding: 0;
	margin: 0;
	}

Сброс Бедного Человека

Я понятия не имею, как назвать некоторые из этих правил сброса CSS . Я назвал этот как я, потому что он, кажется, сосредоточен на минимальной коллекции стилей браузера по умолчанию. CSS сбрасывает отступы и поля на только HTML и тела элементов; обеспечивает сброс всех размеров шрифта; и удаляет границу из ссылок на изображения. Все это важные аспекты любого CSS- дизайна, и этот сброс заботится обо всех них. Если вы знаете источник этого набора правил, напишите нам. В противном случае, проверьте это ..

html, body {
	padding: 0;
	margin: 0;
	}
html {
	font-size: 1em;
	}
body {
	font-size: 100%;
	}
a img, :link img, :visited img {
	border: 0;
	}

Глобальный сброс Siolon

Крис Потит вместе с «различными влияниями» создал эту замечательную технику для сброса стилей браузера по умолчанию . Крис рекомендует размещать сброс в верхней части таблицы стилей для получения оптимальных результатов каскадирования. Этот метод пропускает стили сброса, включающие встроенные и блочные элементы отображения. Кроме того, не забудьте явно установить поля и стили заполнения после осуществления сброса. Обратите внимание на уникальное margin-left 40px;объявление для списков и кавычек, а также margin 20px 0;для заголовков, форм и других элементов:

* {  
	vertical-align: baseline;  
	font-family: inherit;  
	font-style: inherit;  
	font-size: 100%;  
	border: none;  
	padding: 0;  
	margin: 0;  
	}  
body {  
	padding: 5px;  
	}  
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {  
	margin: 20px 0;  
	}  
li, dd, blockquote {  
	margin-left: 40px;  
	}  
table {  
	border-collapse: collapse;  
	border-spacing: 0;  
	}

Глобальный сброс Шона Инмана

Хотя я не уверен, что Шон действительно написал этот конкретный набор правил CSS (хотя, скорее всего, он и написал ), это был сброс CSS,используемый для нейтрализации стилей для его текущего сайта Helvetica / monochrome . Хотя я взял на себя смелость реструктурировать представление этого сброса для ясности (я не сделал никаких функциональных изменений), это довольно жесткий CSS , реализующий набор правил для сброса многих критических стилей CSS браузера по умолчанию .

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, 
form, fieldset, input, p, blockquote, table, th, td, embed, object {
	padding: 0;
	margin: 0; 
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
fieldset, img, abbr {
	border: 0;
	}
address, caption, cite, code, dfn, em, 
h1, h2, h3, h4, h5, h6, strong, th, var {
	font-weight: normal;
	font-style: normal;
	}
ul {
	list-style: none;
	}
caption, th {
	text-align: left;
	}
h1, h2, h3, h4, h5, h6 {
	font-size: 1.0em;
	}
q:before, q:after {
	content: '';
	}
a, ins {
	text-decoration: none;
	}

Yahoo CSS Reset

Люди в Yahoo! также разработали свои собственные стили сброса браузера. Как и в других стилях сброса, Yahoo! Сброс CSS устраняет непоследовательное применение стилей браузера для многих ключевых (X) HTML- элементов.

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	padding: 0;
	margin: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
fieldset,img { 
	border: 0;
	}
address,caption,cite,code,dfn,em,strong,th,var {
	font-weight: normal;
	font-style: normal;
	}
ol,ul {
	list-style: none;
	}
caption,th {
	text-align: left;
	}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before,q:after {
	content:'';
	}
abbr,acronym { border: 0;
	}

CSS Reset Эрика Мейера

Как обсуждалось в оригинальной статье , гуру CSS Эрик Мейер намеревался создать универсальный набор стилей сброса . Это тяжелый материал, эффективно нейтрализующий практически все важные аспекты стандартных CSS- правил, применяемых браузером . Этот набор правил сброса является далеко идущим, сбрасывая множество различных свойств CSS . Имейте это в виду во время последующих CSSразвитие. Если вы столкнулись с неожиданным, необъяснимым поведением, которое происходит с вашими стилями, начните с изучения и устранения предполагаемых аспектов этого кода (или любых недавно добавленных стилей сброса) в качестве возможного виновника — вы будете благодарны позже …;) А пока я взял на себя смелость переформатировать представление кода Эрика. Будьте уверены, правила были просто переставлены. Функционально код идентичен.

html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
	}
/* remember to define focus styles! */
:focus {
	outline: 0;
	}
body {
	background: white;
	line-height: 1;
	color: black;
	}
ol, ul {
	list-style: none;
	}
/* tables still need cellspacing="0" in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
	}
caption, th, td {
	font-weight: normal;
	text-align: left;
	}
/* remove possible quote marks (") from <q> & <blockquote> */
blockquote:before, blockquote:after, q:before, q:after {
	content: "";
	}
blockquote, q {
	quotes: "" "";
	}

Сгущенный Мейер Сброс

Хотя я не уверен относительно первоначального источника этого конкретного сброса CSS , похоже, что это сжатая, слегка измененная версия сброса Мейера. Многие из тех же самых заявлений сделаны, и многие из тех же самых стилей получают нейтрализующие обработки. Однако многие атрибуты не упоминаются, что приводит к более упорядоченной, менее инвазивной коллекции сброса.

Обратите внимание на дубликаты объявлений для атрибутов заголовка (например, h1— h6), которые, по-видимому, не позволяют нормализации веса шрифта и размера шрифта влиять на абзацы, деления и другие атрибуты, не относящиеся к заголовку, которые рассматриваются в первом объявлении.

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, 
pre, form, fieldset, input, textarea, p, blockquote, th, td { 
	padding: 0;
	margin: 0;
	}
fieldset, img { 
	border: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol, ul {
	list-style: none;
	}
address, caption, cite, code, dfn, em, strong, th, var {
	font-weight: normal;
	font-style: normal;
	}
caption, th {
	text-align: left;
	}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
	}
q:before, q:after {
	content: '';
	}
abbr, acronym { 
	border: 0;
	}

Сброс CSS Тантек

CSS Reset от Tantek , получивший название « undohtml.css », является отличным выбором для удаления многих наиболее навязчивых стилей браузера по умолчанию. Этот сброс удаляет подчеркивания из ссылок и границ из связанных изображений, устраняет отступы и поля для наиболее распространенных элементов уровня блока и устанавливает размер шрифта для заголовков, кода и абзацев. В качестве дополнительного бонуса, сброс Тантека также «обесценивает» печально известный элемент! Ницца 🙂1emaddress

КОММЕНТИРУЕМАЯ ВЕРСИЯ ПРЕДОСТАВЛЕНА ​​НА САЙТЕ ТАНТЕК

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.                  */
/* http://creativecommons.org/licenses/by/2.0                     */
/* This style sheet is licensed under a Creative Commons License. */
/* Purpose: undo some of the default styling of common (X)HTML browsers */

/* link underlines tend to make hypertext less readable, 
   because underlines obscure the shapes of the lower halves of words */
:link,:visited { text-decoration:none }

/* no list-markers by default, since lists are used more often for semantics */
ul,ol { list-style:none }

/* avoid browser default inconsistent heading font-sizes */
/* and pre/code too */
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }

/* remove the inconsistent (among browsers) default ul,ol padding or margin  */
/* the default spacing on headings does not match nor align with 
   normal interline spacing at all, so let's get rid of it. */
/* zero out the spacing around pre, form, body, html, p, blockquote as well */
/* form elements are oddly inconsistent, and not quite CSS emulatable. */
/*  nonetheless strip their margin and padding as well */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }

/* whoever thought blue linked image borders were a good idea? */
a img,:link img,:visited img { border:none }

/* de-italicize address */
address { font-style:normal }

/* more varnish stripping as necessary... */

СБРОС TANTEK, ПЕРЕФОРМАТИРОВАНИЕ И УДАЛЕНИЕ ПОЯСНИТЕЛЬНЫХ КОММЕНТАРИЕВ

/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.                  */
/* http://creativecommons.org/licenses/by/2.0                     */
/* This style sheet is licensed under a Creative Commons License. */

:link, :visited {
	text-decoration: none;
	}
ul, ol {
	list-style: none;
	}
h1, h2, h3, h4, h5, h6, pre, code, p {
	font-size: 1em;
	}
ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, pre, 
form, body, html, p, blockquote, fieldset, input {
	padding: 0;
	margin: 0;
	}
a img, :link img, :visited img {
	border: none;
	}
address {
	font-style: normal;
	}

Триполи Сброс

Reset Триполи Дэвид Hellsing является частью полного CSS стандарта для (X) HTML — рендеринга. Благодаря нейтрализации стилей CSS по умолчанию для браузера , Tripoli « формирует стабильную кросс-браузерную основу для ваших веб-проектов. «После сброса стилей CSSgeneric.css можно использовать правила Триполи, чтобы« перестроить »настройки браузера по умолчанию для типографики контента. Некоторые из наиболее известных функций сброса включают в себя:

• пробел во всех тегах кода
• отключение <hr>элемента
• весь текст сбрасывается так, что 1emравно10px
• целевое отключение устаревших элементов: <marquee>, <blink>и<nobr>
• Включение устаревших элементов: <listing>, <xmp>и<plaintext>
• отключение <font>тега и других устаревших элементов
• ..плюс намного больше!

КОММЕНТИРУЕМАЯ ВЕРСИЯ ПРЕДОСТАВЛЕНА ​​НА САЙТЕ ДЭВИДА

/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

* { margin: 0; padding: 0; text-decoration: none; font-size: 1em; outline: none; }
code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font: inherit; font-size: 1em; white-space: normal; }
dfn, i, cite, var, address, em { font-style: normal; }
th, b, strong, h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td, center { text-align: left; vertical-align: top; }
body { line-height: 1; background: white; color: black; }
q { quotes: "" ""; }
ul, ol, dir, menu { list-style: none; }
sub, sup { vertical-align: baseline; }
a { color: inherit; }
hr { display: none; } /* we don't need a visual hr in layout */
font { color: inherit !important; font: inherit !important; color: inherit !important; } /* disables some nasty font attributes in standard browsers */
marquee { overflow: inherit !important; -moz-binding: none; }
blink { text-decoration: none; }
nobr { white-space: normal; }

/*

CHANGELOG

23/8-07

Added deprecated tags <listing>, <xmp> and <plaintext> in the code block

Resorted to normal white-space in all code tags

Disabled the deprecated <marquee>, <blink> and <nobr> tag in some browsers

*/

ТРИПОЛИ СБРОС

ПЕРЕФОРМАТИРОВАН И ПОЯСНИТЕЛЬНЫЕ КОММЕНТАРИИ УДАЛЕНЫ

/*
    Tripoli is a generic CSS standard for HTML rendering. 
    Copyright (C) 2007  David Hellsing

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

* {
	text-decoration: none;
	font-size: 1em;
	outline: none;
	padding: 0;
	margin: 0;
	}
code, kbd, samp, pre, tt, var, textarea, 
input, select, isindex, listing, xmp, plaintext {
	white-space: normal;
	font-size: 1em;
	font: inherit;
	}
dfn, i, cite, var, address, em { 
	font-style: normal; 
	}
th, b, strong, h1, h2, h3, h4, h5, h6 { 
	font-weight: normal; 
	}
a, img, a img, iframe, form, fieldset, 
abbr, acronym, object, applet, table {
	border: none; 
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
caption, th, td, center { 
	vertical-align: top;
	text-align: left;
	}
body { 
	background: white; 
	line-height: 1; 
	color: black; 
	}
q { 
	quotes: "" ""; 
	}
ul, ol, dir, menu { 
	list-style: none; 
	}
sub, sup { 
	vertical-align: baseline; 
	}
a { 
	color: inherit; 
	}
hr { 
	display: none; 
	}
font { 
	color: inherit !important; 
	font: inherit !important; 
	color: inherit !important; /* editor's note: necessary? */ 
	}
marquee {
	overflow: inherit !important;
	-moz-binding: none;
	}
blink { 
	text-decoration: none; 
	}
nobr { 
	white-space: normal; 
	}

Конечно, этот список будет обновляться дополнительными стилями сброса по мере их обнаружения.