Как узнать стиль элемента по дефолту?

[DjTarik]

Ситуация такая:

Всем известно, что разные браузеры по умолчанию отображают одни и те же теги по разному. К примеру, стили "тела" по дефолту в FF 3.5:

body {
    display: block;
    margin: 8px;
} 

а в IE7:

body {
    display: block;
    margin: 15px 10px;
}

Вопрос:

Каким образом можно узнать, какие стили по умолчанию имеют разные браузеры и их версии?

Важно, чтобы это было НЕ в ручном режиме.

Может на это способен JS?

Имеется перечень всех тегов - нужно для каждого получить все стили.

Варианты:

- найти в файлах установленных браузеров таблицы стилей и посмотреть

- поставить FireBug и промониторить

- поискать в интернете дефолтные таблицы стилей

НЕ предлагать! =) Пару лет назад я это уже делал.

У кого какие мнения?

Спасибо.

[DjTarik]

Если немного перефразировать вопрос, то:

Каким образом создатели normalize.css узнавали дефолтные стили браузеров?

Сомневаюсь, что они делали это вручную (сам пробовал - неделями можно инспектировать). А с таким кол-вом браузеров как сейчас и выпуском новых версий - это не рационально.

Есть ли решение?

[SilentImp]

Каким образом создатели normalize.css узнавали дефолтные стили браузеров?

Скорее всего именно вручную.

Opera

Chrome

Safari

FF

IE

Не так уж и много, как мне кажется.

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

Хотя проверь, конечно. И для разных ОС тоже )

Я не проверял — это мое предположение.

Сомневаюсь, что они делали это вручную (сам пробовал - неделями можно инспектировать). А с таким кол-вом браузеров как сейчас и выпуском новых версий - это не рационально.

Есть ли решение?

http://xpoint.ru/know-how/JavaScript/TablitsyiStiley?2 — это тебе поможет. Можешь даже сделать автоматический сбор и анализ.

Но это не нужно.

А еще по-моему normalize — бредовая затея.

Я предпочитаю использовать reset.

[SelenIT]

Новые версии сказываются, например, при переходе к интертрепации заголовков по HTML5-ному (FF4+, Chr.7+ — размер заголовка не по номеру, а по вложенности секций). Плюс у совсем старья бывали свои спецэффекты (вышеупомянутый "нестандартный" маргин body у IE7-, больший дефолтный отступ между абзацами там же, ненулевой дефолтный padding у body у какой-то ископаемой Оперы типа 8.0 и т.п.).

Насчет холивора ресет vs. нормалайз — лично я предпочитаю нормалайз, но не к "среднестатистическому браузеру", а к тому, как задизайнено в макете для основного контента

[SilentImp]

Новые версии сказываются, например, при переходе к интертрепации заголовков по HTML5-ному (FF4+, Chr.7+ — размер заголовка не по номеру, а по вложенности секций). Плюс у совсем старья бывали свои спецэффекты (вышеупомянутый "нестандартный" маргин body у IE7-, больший дефолтный отступ между абзацами там же, ненулевой дефолтный padding у body у какой-то ископаемой Оперы типа 8.0 и т.п.).

Насчет холивора ресет vs. нормалайз — лично я предпочитаю нормалайз, но не к "среднестатистическому браузеру", а к тому, как задизайнено в макете для основного контента

Кто то реально может использовать FF4 или Chr7?

Это маловероятно, если верить статистике.

Стоит, по-моему, проверить IE-шечки и последние версии остальных браузеров.

Все без исключения варианты нормалайз все равно не учтет.

[SelenIT]

Имелась в виду разница между FF3.6 (вымирает, но очень плавно) и любым последующим FF. Аналогично с вебкитными, на десктопах-то старых хромов уже нет, но в мобильном зоопарке возможно всякое (напр. андроиды 2.x еще живее всех живых). Опера парсит секции уже по-новому, но заголовки рисует еще по-старому — опять же это может скоро измениться.

Фишка нормалайза именно в том, что не нужно учитывать (потенциально) неограниченное множество вариантов — все самые актуальные для отображения свойства (размеры/поля/отступы) явно прописываются с типичными (а еще лучше — нужными по дизайну) значениями. А всякие новые и редкие свойства (особенно префикснутые) пусть будут себе, как авторам браузера взбредет — если они себе не враги, отображение от этого вряд ли пострадает...

[DjTarik]

Скорее всего именно вручную.

Opera

Chrome

Safari

FF

IE

Не так уж и много, как мне кажется.

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

Хотя проверь, конечно. И для разных ОС тоже )

Я не проверял — это мое предположение.

http://xpoint.ru/know-how/JavaScript/TablitsyiStiley?2 — это тебе поможет. Можешь даже сделать автоматический сбор и анализ.

Но это не нужно.

А еще по-моему normalize — бредовая затея.

Я предпочитаю использовать reset.

Новые версии сказываются, например, при переходе к интертрепации заголовков по HTML5-ному (FF4+, Chr.7+ — размер заголовка не по номеру, а по вложенности секций). Плюс у совсем старья бывали свои спецэффекты (вышеупомянутый "нестандартный" маргин body у IE7-, больший дефолтный отступ между абзацами там же, ненулевой дефолтный padding у body у какой-то ископаемой Оперы типа 8.0 и т.п.).

Насчет холивора ресет vs. нормалайз — лично я предпочитаю нормалайз, но не к "среднестатистическому браузеру", а к тому, как задизайнено в макете для основного контента

Расскажу небольшую предысторию.

Ну, года 1,5-2 назад я, используя "reset" получал кучу проблем с тем, что все стили для визуального редактора приходилось настраивать для публичной части сайта. (Если не ошибаюсь, именно ты (SilentImp) расказывал про редакторы на днях веб-стандартов в Минске, я тогда еще раз про эту проблему вспомнил)

Т.е. получалось, что в админке CMS-ки использовался iframe, в котором был редактор (а соответственно его стили были от дефолтных у браузера). А в публичной части - результат работы редактора выводиться просто в каком-то div-е. И соответственно стили пуличной части (в ней используется "reset") обнулялись и нужно было настраивать все возможности редактора.

Таким образом - я решил отказаться от сборса стилей)

Но, постигая CSS увидел, что дефолтные стили неплохо так отличаются в разных версиях разных браузеров.

Не долго думая тогда, я в ручном режиме вечерами собирал стили по дефолту.

Сейчас у меня имеется таблица с дефолтными стилями для браузеров:

FF 3.5 & FF 3.0

Opera 9.64

Opera 10.51

Chrome 4.1.249.1042 (42199)

Safari 3

Safari 4

IE 6

IE 7

IE 8

На то время это были последние версии =) Проверку проводил для XHTML strict DTD и тегов, которые он поддерживает.

Потом за основу взял FF и написал стиль, который бы перезаписывал все теги со стилями, как у FF. Это стало моим "ресетом" (до сих пор его использую).

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

Потом я много работал и не проверял стили в новых браузерах.

Еще позже узнал, что кто-то написал normalize и подумал, что не мне одному это удобно)

А т.к. браузеры очень быстро меняют свои версии и обновляются, я не представляю, как мне узнавать стили по дефолту для них. Ведь руками - это оооочень долго и требует дофига внимательности.

Вот.

Т.е. на данный момент, когда уже и HTML5 в нормально состоянии и времени прошло много - хочу снова взять последние версии и пополнить знания о браузерах, отличиях и т.д. Ну и написать новый "сброс" для личного использования.

Собирать руками больше не хочу) Вот и возник такой вопрос. Сделать страничку, которая бы автоматом создавала таблицу с дефолтными стилями браузера.

Попробую через JS, но не сильно верится, что можно будет обратиться к дефолтной таблице стилей. Но это надо попробовать.

Кто то реально может использовать FF4 или Chr7?

Это маловероятно, если верить статистике.

Стоит, по-моему, проверить IE-шечки и последние версии остальных браузеров.

Все без исключения варианты нормалайз все равно не учтет.

Вариантов действительно много, но основные учтет. Я уже пробовал и результат стоил того.

Буду пробовать еще раз, если найду удобный способ)

P.S. И да - тот normalize.css, о котором все говорят, вроде как далеко не все "нормализует" (хотя и не сильно в него вникал)

P.P.S. Всё вышенаписанное - ИМХО, если что)

[psywalker]

Где-то, ребят, я вас уже по моему встречал

[DjTarik]

Фишка нормалайза именно в том, что не нужно учитывать (потенциально) неограниченное множество вариантов — все самые актуальные для отображения свойства (размеры/поля/отступы) явно прописываются с типичными (а еще лучше — нужными по дизайну) значениями. А всякие новые и редкие свойства (особенно префикснутые) пусть будут себе, как авторам браузера взбредет — если они себе не враги, отображение от этого вряд ли пострадает...

Согласен. Если всё грамотно нормализовать - ни тебе проблем с формами, полями, отступами и т.д. (если сравнивать IE и всё остальное)

Где-то, ребят, я вас уже по моему встречал

Я сюда не холливарить пришел, а узнать, можно ли это сделать или нет)

Уже мысли кое какие есть, а это уже хорошо.

Но вдруг кто что еще подскажет)

[psywalker]

Я сюда не холливарить пришел, а узнать, можно ли это сделать или нет)

Да я же ради прикола) Холиварь себе на здоровье, я что, против что ли

[SilentImp]

DjTarik, в докладе я как раз говорил, что надо настраивать WYSIWYG под стили сайта.

Можно конечно все это делать и через нормалайз … но мне кажется что это намного более ресурсоемко, чем через reset.

imo reset намного проще в создании использовании.

Я думаю что тут можно увидеть актуальную таблицу стилей для вебкита

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Тут для мозиллы

http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css

Про остальные сейчас подумаю.

[DjTarik]

DjTarik, в докладе я как раз говорил, что надо настраивать WYSIWYG под стили сайта.

Можно конечно все это делать и через нормалайз … но мне кажется что это намного более ресурсоемко, чем через reset.

imo reset намного проще в создании использовании.

Я думаю что тут можно увидеть актуальную таблицу стилей для вебкита

http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Тут для мозиллы

http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css

Про остальные сейчас подумаю.

Да, настройкой редактора я тоже много занимался) Пришлось как-то даже все конфиги CKEditor-а переводить и руководство писать)

Ну, я много информации промониторил по уже готовым таблицам стилей. Есть наработки, эти ссылки известы.

Но вроде это было бы удобно, иметь такой скрипт, который бы проходил по перечисленным тегам и вытаскивал все стили по дефолту.

ИМХО самая полезная ссылка - это http://www.iecss.com/ =)

[Great Rash]

Я шо-то не пойму, а JS с его getComputedStyle уже не в моде?

[DjTarik]

Я шо-то не пойму, а JS с его getComputedStyle уже не в моде?

Ну так на нем пока и остановились. Дальше - буду пробовать и смотреть, как он себя ведет.

Edited July 18, 2012 by DjTarik

[SilentImp]

Можешь попробовать сделать так:

http://jsfiddle.net/6VXWJ/

Трудозатраты — вбить в массив все элементы и запустить в нужных браузерах.

[DjTarik]

Можешь попробовать сделать так:

http://jsfiddle.net/6VXWJ/

Трудозатраты — вбить в массив все элементы и запустить в нужных браузерах.

Спасибо. Обязательно все попробую, как только будет минутка времени.