Какой CSS для сброса HTML5 вы используете и почему? [закрыто]


123

Какой CSS для сброса HTML5 вы используете и почему? Есть ли один, который вы нашли, чтобы охватить больше случаев?

Я начал использовать HTML5 Doctor: http://html5doctor.com/html-5-reset-stylesheet/ Кажется, работает, но мне интересно, есть ли что-нибудь получше.



Это похоже на да, но я больше просто хочу использовать кого-то elses вместо того, чтобы изменять его, чтобы он работал, поэтому позже, при необходимости, я могу просто скопировать более новую версию.
Darryl Hein

20
D_N Я понимаю это, но HTML5 действительно влияет на CSS, особенно на сброс CSS, где теперь вам нужно включить другие теги, такие как nav или aside.
Дэррил Хайн,

Ответы:


40

Настоящий разговор: несмотря на то, что kaikai уценен , вам нужно только сбросить * padding и margin на 0.

Хотя, к сожалению, у 99% из нас нет ресурсов или людей, чтобы не отставать от сотен существующих версий браузеров. Таким образом, лист сброса необходим для типичного веб-сайта.

html5reset: (Это слишком мешает)

Я только что взглянул на http://html5reset.org/

img,
object,
embed {max-width: 100%;}

И:

html {overflow-y: scroll;}

Я понимаю, что у него хорошие намерения, но это не работа листа сброса. Он делает слишком много предположений.

Сброс BluePrint: (буквально чертеж)

body {
  line-height: 1.5;
  background: white;
}

Как дела с 1.5. А почему фон белый? (Я знаю, что это для исправления, но все же не нужно)

Normalize.css: (Не нормально)

https://github.com/necolas/normalize.css/blob/master/normalize.css

Все началось с некоторых хаков для webkit / ie, но

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: 0.83em;
    margin: 1.67em 0;
}

h6 {
    font-size: 0.75em;
    margin: 2.33em 0;
}

Каждый тег заголовка является целевым. & они не сбрасывают высоту строки тела.

Я уверен, что все вышеперечисленное хорошо выполняет задуманную работу, но, вероятно, будет отменено больше, чем необходимо.

Эрик Мейер

YUI

HTML5Boilerplate

Вышесказанное больше для профессионалов, поскольку Boilerplate склоняется к (слишком дружелюбной) стороне, я уверен, из-за популярности. На данный момент 80% моего индивидуального сброса - это шаблон.

Я собираюсь пройти все три по крупицам и сделать свою собственную, это не ракетостроение.


2
Обратите внимание, что файл normalize.css к настоящему времени изменился; размер шрифта заголовков больше не устанавливается.
Рубен Верборг

2
Стоит отметить, что Normalize.css управляет не только настольными браузерами, но и мобильными браузерами, такими как iOS Safari, Chrome для Android, стандартные браузеры и др., Которые уникальны сами по себе. По этой и другим причинам Normalize встроен во многие популярные фреймворки.
Мэтт Смит

Раньше я использовал «Эрик Мейер», но теперь использую таблицу стилей сброса «YUI» из-за этого: danielsokolowski.blogspot.ca/2012/11/…
Daniel

19

Normalize.css отлично подходит как для настольных, так и для мобильных браузеров и используется во многих популярных HTML-шаблонах.

Но как насчет использования allсвойства CSS, которое сбрасывает свойства CSS, кроме directionи unicode-bidi? Таким образом, вам не нужно включать никаких дополнительных файлов:

{
    all: unset
}

CSS allимеет широкую поддержку, за исключением IE / Edge. Аналогично с unset.


Интересно, но это, кажется, самое медленное решение и поддерживается только в Firefox, поэтому реального применения оно не имеет (по крайней мере, на данный момент).
tomasz86

Верно, что только Firefox сейчас поддерживает его, но я думаю, что у него есть хорошие шансы попасть в такие решения, как Modernizr. github.com/Modernizr/Modernizr/issues/1219
Мэтт Смит

6

Reset.css используется Blueprint CSS основы хорошо работает , и включает в себя элементы HTML5. Он включается в их файл screen.css .

Blueprint - полезный ресурс для быстрого создания прототипов новых сайтов, а их исходный код хорошо организован и заслуживает изучения.



3
  1. Сохраняет полезные значения по умолчанию, в отличие от многих сбросов CSS.
  2. Нормализует стили для широкого диапазона элементов HTML.
  3. Исправляет ошибки и распространенные несоответствия браузера.
  4. Повышает удобство использования за счет незначительных улучшений.
  5. Объясняет, что делает код, используя подробные комментарии.

normalize.css


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

простой, но полностью эффективный. возможно, добавьте:

body {
    font-size: small;
}

для хорошей меры.


9
Отмена поля по умолчанию и заполнения в элементах управления формой может иметь нежелательные эффекты, а именованные ключевые слова размера шрифта не имеют полностью согласованного поведения в браузерах. Это слишком упрощенно. Также не удается установить стили для элементов, представленных в HTML 5, поэтому они остаются display: inline.
Квентин

4
Я не согласен. Margin и padding - единственные непредсказуемые свойства. Свойство font-size использует именованное ключевое слово для целенаправленного нацеливания на браузеры, которые их читают, что делает масштабирование шрифта YUI эффективным для всех основных браузеров ( developer.yahoo.com/yui/examples/fonts/fonts-size_source.html ). Я также никогда не хотел бы навязывать нормальный поток элементов, поэтому я бы оставил эти элементы HTML 5 в покое, меняя только их тип отображения или позиционирование по мере необходимости. Я понимаю, что мой выбор непопулярный, но он намного элегантнее других решений и работает.
kaikai

3
Нет-нет-нет-нет-нет! Для элементов HTML5 не задано свойство отображения, поэтому они аккуратно возвращаются к значениям по умолчанию display: inline. Вы когда-нибудь видели диаграмму сайта, где верхний колонтитул, нижний колонтитул, навигация, боковые столбцы, практически каждый раздел страницы перетекает в строку ??? Извини, кайкай, но это просто неприемлемо!
Филип Дупанович

Чувак, я даже не гуру HTML5 (пока), и я знаю, что это совершенно не правильный способ сброса настроек.
Icemanind

4
Абсолютно верный ответ. *Я слышал, что единственным недостатком может быть то, что селекторы работают медленно.
Антон Строгонов

2

Спецификация HTML5 включает рекомендуемые объявления CSS для браузеров с поддержкой CSS. Для удовольствия я взял их и вернул те, где это имеет смысл. Вы можете посмотреть результат в этой статье .

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


0

Я использую Normalize или сброс из HTML5 Doctor и меняю его, чтобы он соответствовал проекту, над которым я работаю.

Кстати, это только концепция использования сброса, которая стала более или менее стандартом.


У вас есть дополнительная информация?
Джеймс А. Молер

Я не оставляю элементы, которые я не использую для конкретного проекта. Например, я удаляю элементы формы, если не использую формы. Я уверен, что вы уловили идею. Нет смысла сбрасывать элементы, которые вы не используете.
cornishninja

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.