Это CSS Reset хорошо?

Я собирался использовать сброс CSS Эрика Мейера, но наткнулся на некоторые кросс-браузерные различия (например, input поля). Исходя из этого, я придумал более агрессивный подход:

(Это устарело. Не забудьте проверить текущую пересмотренную версию в конце этого вопроса и критиковать ее, как вы хотите)

/* CSS Reset by Hugo Leonardo. Based on Eric Meyer's CSS Reset (just google it). */
* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font: inherit;
    text-decoration: none;

    /* in case "font: inherit" fails (IE7) */
    font-family: "times new roman";
    font-size: 100%;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    /* remove this block if you DON'T want to support lame browsers */
}

:before, :after {
    content: '';
}

:link, :visited, :hover, :active {
    color: inherit;
    color: #000; /* for IE7 'inherit' problem (again) */
    text-decoration: none;
}

:focus {
    outline: 0;
}

ol li, ul li {
    list-style: none;
}

table {
    /* "collapse" here is because of IE7 (maybe others?). don't remove it as it affects other browsers as well */
    border-collapse: collapse;
    border-spacing: 0;
}

/* this entire block was copied from Eric Meyer's CSS reset */
/* HTML5 "display" reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

Работало без сбоев во всех протестированных браузерах:

  • IE7
  • IE8
  • Chrome (самый новый)
  • Firefox (самый новый)
  • Опера (новейшая)

Вопрос: кто-нибудь видит здесь проблемы? Я считаю себя не очень хорошим в CSS, поэтому я не знаю, если это вызовет у меня какие-либо проблемы в будущем.

Obs.: этот сброс только для кросс-браузерных проблем. Следует (или должен!) Следовать общим правилам для таких элементов, как input, a, code и т. д. (напр.: input типа "текст" будет невидимым без границ!). Я буду добавлять такие вещи, как общие a стили и прочее позже. Сейчас я перезагружаю вещи, избавляясь (почти) от всего, что не совпадает в основных браузерах.

ПРОБЛЕМЫ УДАЛЕНЫ ТАК ДАЛЕЕ

  • * селектор может вызвать проблемы с производительностью.

  • * Селектор с некоторыми правилами переопределяет некоторые стили элементов по умолчанию таким образом, что их невозможно восстановить. пример: стиль по умолчанию input типа "отправить".

  • Удивительно :before, :after { content: ''; } ломал выбранные элементы в Firefox.

  • В пересмотренной версии я попытался установить margin: 0 ко всем элементам ввода. Большинство браузеров игнорировали его для типа ввода checkbox а также radio,

ПЕРЕСМОТРЕННЫЙ ВАРИАНТ 

/* CSS Reset by Hugo Leonardo Leão Mota
Based on Eric Meyer's CSS Reset: http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/
Helped by fellows in stackru: http://stackru.com/questions/6892982/is-this-css-reset-okay */

/* resetting style for every visible element except 'ruby' family and form controls
   browsers deal with controls (and ruby style) in their own way */
a, abbr, acronym, address, b, big, blockquote, body,
br, caption, cite, code, col, colgroup, dd, del, dfn, div,
dl, dt, em, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, i,
img, ins, kbd, label, legend, li, noscript, object, ol, p, pre, q, samp,
small, span, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font: inherit;
    text-decoration: none;

    /* in case "font: inherit" fails (IE7) */
    font-family: "times new roman";
    font-size: 100%;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    /* remove this block if you DON'T want to support lame browsers */
}

/* browsers are free to handle controls but
   we can't let them mess up with the other elements  */
button, select, textarea,
input[type=text], input[type=password], input[type=submit],
input[type=image], input[type=reset], input[type=button], input[type=file] {
    margin: 0;
}



:link, :visited, :hover, :active {
    color: inherit;
    color: #000; /* for IE7 'inherit' problem (again) */
    text-decoration: none;
}

:focus {
    outline: 0;
}

ol li, ul li {
    list-style: none;
}

table {
    /* "border-collapse" here is because of IE7 different behaviour (maybe others?).
       don't remove it as it affects other browsers as well */
    border-collapse: collapse;
    border-spacing: 0;
}

/* the next two blocks were copied from Eric Meyer's CSS reset */

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
}

/* HTML5 "display" reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

КОНЕЦ

Что ж, чем больше я пытался улучшить свой сброс, тем больше это выглядело как сброс css Мейера, поэтому я бросил и принял его. работает просто отлично: p

Источник

4 ответа

Решение

Я вообще думаю, что обширные сбросы CSS не являются лучшими. Я согласен с Рассом Уикли, который "сосредоточился" на трех больших проблемах:

  1. Каждый сбрасываемый элемент должен быть переопределен. Размер файла CSS и обслуживание могут увеличиться.
  2. Вы могли бы забыть изменить то, что вы сбросили.
  3. Некоторые сбросы вредны для пользователей, которые полагаются на клавиатуры для навигации.

Смотрите всю его презентацию здесь: http://www.maxdesign.com.au/articles/css-reset/

В частности, я думаю, что следующее не должно быть сброшено, как это в вашей таблице стилей

:before, :after {
    content: '';
}

:link, :visited, :hover, :active {
    color: inherit;
    color: #000; /* for IE7 'inherit' problem (again) */
    text-decoration: none;
}

:focus {
    outline: 0;
}

ol li, ul li {
    list-style: none;
}

focus это проблема доступности.

ol а также ul должны иметь свои стили по умолчанию. Вы, вероятно, нуждаетесь в них. (Хотя вам может понадобиться перезаписать их для навигации.)

:link, :visited, :hover, :active Я бы сбросил их только по мере необходимости.

Как уже упоминалось и признано вами *{ // } может вызвать проблемы с производительностью и может привести к непредвиденным проблемам.

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

h1, h2, h3, h4, h5, h6 {margin-top:0; margin-bottom:0;}

Источник

Это использует * что повлияет на все. Вы не можете получить границы для input, select и т. д. вернуться с "более поздней" таблицей стилей.

Также, * считается плохим для производительности. Использование явных тегов является предпочтительным.

Попробуйте сброс http://html5boilerplate.com/, если у вас есть проблемы с Эриком (не уверен, что это решит их, но стоит попробовать)

Источник

Моя единственная проблема - это проблема производительности, вызванная использованием селектора *

Источник

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

Источник
Другие вопросы по тегам