CSS Reset для Chrome

Question

Привет, я понимаю, что я должен был начать с перезагрузки CSS, но я разработал свой веб-сайт в Chrome с настройками по умолчанию, а затем начал пытаться сделать его кроссбраузерно-совместимым после завершения. Если я добавляю какой-либо из общих сбросов CSS, я теряю поля, текст становится меньше, а встроенные теги Span с фонами даже перекрывают друг друга, все перепутано.

Так что я думаю, что мне нужен CSS-сброс, установленный на Chrome, который сделает все остальные браузеры похожими на мою страницу в Chrome. Есть что-нибудь подобное или способ сделать это?

Answer 1

Нашел решение моего собственного вопроса на этот раз. Я только что попробовал normalize.css с http://necolas.github.com/normalize.css/ и он сохраняет полезные современные стили и исправляет несоответствия с другими браузерами (т.е. IE). Выглядит примерно одинаково как в Chrome, так и в IE при использовании "стандартов документов IE9".

Answer 2

Согласно этому посту:

CSS браузеров по умолчанию для элементов HTML

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css - это CSS, используемый Chrome. Я не проверял это, хотя так попробуй это и посмотри, работает ли это.

Answer 3

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

Проблема, с которой вы сталкиваетесь, заключается в том, что вы не осуществили сброс сразу. У вас не будет другого выбора, кроме как выполнить дополнительный объем работы, чтобы интегрировать сброс сейчас и узнать для своего следующего проекта, что вы начнете с сброса и создадите свой CSS на основе этого.

Answer 4

Недавно Firefox 27 добавил новое свойство CSS3 и ключевые слова по умолчанию.

Теперь вы можете в Firefox 27+ сбросить всю страницу с помощью:

* { all: unset !important; }

Это подход молотка. Вы можете быть намного более изысканным.

blockquote, option { margin:unset; }
a { text-decoration: initial; }

и т.п.

Answer 5

Когда вы это сделаете, это будет хорошо для пользователей Chrome, но не для пользователей Firefox, Edge, Opera, Safari и Internet Explorer.

Файл Chrome включает некоторые префиксы поставщиков, которые не будут работать в других браузерах.

Возможно, они также недоступны в других браузерах. Пример: -webkit-fill-available, для этого нет значений, даже с префиксом, доступных в браузерах, кроме firefox.

В html.cssфайл больше основан на префиксах. Они пытаются использовать префиксы, даже если универсальное свойство работает в браузере.

Это может быть естественный опыт для пользователей Chrome, но, с другой стороны, он может быть скомпрометирован для остальных 30% пользователей.

Более того, это добавит вам бремени. Потому что более 70% пользователей используют браузеры на основе хрома (да, все браузеры имеют некоторые настройки в файле html.css). Просто бесполезная загрузка на 80% браузеров.

Я не думаю, что файл достаточно короткий. Для сжатия до менее 5 КБ.

Я рекомендую использовать нормализатор CSS. Что-то на основе normalize.css, но поддерживается и лучше.

Список нескольких идеальных нормализаторов CSS

• Reseter.css - https://github.com/krishdevdb/reseter.css
• Sanitize.css - https://github.com/csstools/sanitize.css.

Answer 6

Я всегда использую фрагмент кода Эрика Мейерса. Мне на самом деле нравится больше, чем тот, который включен в шаблон HTML5.

/* 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;
}

Answer 7

Вы можете взглянуть на http://html5boilerplate.com/, он имеет структуру и CSS для большинства современных браузеров.

ура

Iain