Javascript-форум (https://javascript.ru/forum/)
-   (X)HTML/CSS (https://javascript.ru/forum/xhtml-html-css/)
-   -   Шаблон сброса стандартных стилей (https://javascript.ru/forum/xhtml-html-css/41364-shablon-sbrosa-standartnykh-stilejj.html)

Olegich 10.09.2013 17:33

Шаблон сброса стандартных стилей
 
В книге "Большая книга CSS" нашел шаблон сброса стандартных стилей браузеров.
Цитата:

Для предотвращения кросбраузерного несоответствия лучше всего начинать таблицу стилей с чистого листа. Другими словами, удалить встроенное в браузер форматирование и добавить свое собственное.
Цитата:

В частности, есть базовый набор стилей, который вы должны включить в верхнюю часть своей таблицы стилей. Они устанавливают базовые значения для свойств, которые обычно по-разному обрабатываются во всех браузерах.
/* reset browser styles */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, pre, code, address, form, fieldset, blockquote {
    padding: 0;
    margin: 0;
    font-size: 100%;
    font-weight: normal;
}
ol {
    margin-left: 1.4em;
    list-style: decimal;
}
ul {
    margin-left: 1.4em;
    list-style:square;
}
img {
    border: 0;
}
/* end reset browser styles */

Собственно, вопрос. При данном сбросе стилей, все вроде бы хорошо, но размер шрифта в Firefox больше чем в Chrome. В других браузерах не тестировал. Что может быть тому причиной? Почему так происходит? Настройки в браузерах сброшены по умолчанию.

animhotep 10.09.2013 17:50

Цитата:

Сообщение от Olegich
размер шрифта в Firefox больше чем в Chrome

в инспекторе кода сколько пикселей показывает и какой шрифт?

Olegich 10.09.2013 18:24

Опыта работы в инспекторе кода у меня нет. Я начинающий. Попытался найти в Firebug, нашел только свойство font-size: 16px. В Crome, тоже самое. Используемый шрифт не нашел. Не уверен, что я все правильно проверил, нет опыта.

animhotep 10.09.2013 18:27

всё верно, по дефолту 100% = 16px
а с чего решили что размер разный?

danik.js 10.09.2013 19:01

Ща reset.css не в моде. http://necolas.github.io/normalize.css/

Olegich 10.09.2013 20:16

Цитата:

Сообщение от animhotep (Сообщение 271731)
всё верно, по дефолту 100% = 16px
а с чего решили что размер разный?

Видно невооруженным глазом, в Firefox явно больше.

Цитата:

Сообщение от danik.js (Сообщение 271733)
Ща reset.css не в моде. http://necolas.github.io/normalize.css/

Я так понял, это более расширенные настройки сброса? Если да, то вопрос остается открытым.

tenshi 11.09.2013 09:17

Цитата:

Сообщение от danik.js (Сообщение 271733)
Ща reset.css не в моде. http://necolas.github.io/normalize.css/

Ща трусы не в моде. https://www.google.ru/search?q=модная+одежда

tenshi 11.09.2013 09:22

Проблема ресета и прочих дефолтных стилей, что твои стили начинают сильно от них зависеть. В результате ты не можешь перенести свои стили на страницу где нет ресета или же там применяется другой ресет. И все начиает ехать. И казалось бы, можно добавить свой локальный ресет типа ".reset ol {...}", но тут возникает 2 проблемы:
1. приходится искусственно повышать вес селекторов, чтобы переопределить дефолт
2. Внутрь опять же не можешь вставлять блоки, стили которых писались не для этого ресета.

Поэтому ресет, нормалайз и тп лучше не использовать.

danik.js 11.09.2013 10:01

Цитата:

Сообщение от tenshi
Поэтому ресет, нормалайз и тп лучше не использовать.

ХЗ, сколько верстаю, сначала использовал reset.css, потом normalize.css. Никогда проблем не знал. Его помоему все используют, так что трудно представить что где-то его не окажется.

BETEPAH 11.09.2013 10:36

Цитата:

Сообщение от tenshi
В результате ты не можешь перенести свои стили на страницу где нет ресета или же там применяется другой ресет.

А для чего это может быть необходимо? Продакшн плагинов?

animhotep 11.09.2013 12:00

отошли от темы по моему)
Olegich, задай шрифт например font-family: Arial; в первый блок цсс

Olegich 12.09.2013 19:11

Цитата:

Сообщение от animhotep (Сообщение 271816)
отошли от темы по моему)
Olegich, задай шрифт например font-family: Arial; в первый блок цсс

Спасибо. Сработало. Стало быть нужно обнулить и шрифт.
+1

tenshi 12.09.2013 23:48

Цитата:

Сообщение от BETEPAH (Сообщение 271789)
А для чего это может быть необходимо? Продакшн плагинов?

Везде.
"мы хотим чтобы в нашем портале на всех проектах дропдаун выглядел одинаково"
"прикрути ка к моему сайту такой же календарик, что ты делал для того"
"вставляю твой код к себе на сайт и по всему сайту еде верстка, глючный у тебя код"
и 1000 других кейсов. Со временем приходишь к тому, что каждый модуль должен быть максимально обособленным, не зависеть от окружения и самому на него не влиять.

Olegich 13.09.2013 15:50

Сегодня обнаружил интересную особенность. Когда я создавал данную тему, то тестировал страницы в Ubuntu 12.04, собственно где и проявлялась описанная выше проблема. Как уже говорилось, для ее решения достаточно однозначно определить шрифт. Сегодня загрузил тоже самое под Windows, и все выглядит нормально без определения шрифта. Выходит что на разных платформах, шрифты используемые браузерами по умолчанию разные? Как в firebug определить шрифт, который использует браузер если он явно не задан в .css?

animhotep 13.09.2013 18:47

юзай оперу ;) в драгнфлай всё видно


Часовой пояс GMT +3, время: 17:33.