Стили Habr ZenComment
Юзерстили для модификации вида сайта Habrahabr
.
Имеют ряд свойств, отличных от дизайна оригинального сайта:
Имеют ряд свойств, отличных от дизайна оригинального сайта:
● незаметное Geektimes-меню: показ по наведению;
● скрытие кнопочной панели навигации (подменю открываются по фиксированным кнопкам в углах);
● адаптивное постоянное меню Geektimes на широких окнах;
● поддерживающий юзерскрипт HabrAjax (расширение функций сайта);
● возможность очень узких окон (часто от 320 пикс.) и адаптивность зазоров, полей от ширины окна;
● изменение размера полей ввода (разблокировано; меняется вручную);
● более компактный правый сайдбар;
● уменьшены: межстрочный интервал, поля, зазоры; компактность - основная идея;
● смягчение последствий двойных переносов строк (насколько возможно в стилях);
● уменьшение размеров заголовков;
● правое форматирование даты, хабов, тегов;
● модификация кнопок"Читать дальше" и других, для незаметности относительно текстов
● контрастный разделитель между статьёй и ответами;
● невидимые аватары в ответах - просматриваются по наведению на кнопку "ответ";
● симметризация кнопок голосования в ответах;
● перенос малозначимых кнопок в ответах вправо и появление их по наведению (сверху слева - только дата и автор);
● деакцентирование кнопок "Пожаловаться";
● скрытие точек уровня ответа;
● линии дерева ответов вместо точек уровня;
● кнопка "ответ" - слева с вертикальным расположением и появляется по наведению на блок ответа;
● ослабление вида сообщений "НЛО" - бледный текст, серый фон, малый шрифт:
● фильтрация нежелательных блоков в сайдбаре и подобных местах;
● модификация 3 нижних ссылок до равномерного заполнения пространства текстами ссылок;
● нумерация страниц (пагинатор) фиксирована внизу окна, постоянно на виду;
● компактный футер, более чем вдвое по высоте;
● исправление ошибок сайта в форматировании и отображении элементов страниц: ряд ошибок, случайно возникших и с неизвестным временем официального исправления, которые проще исправить в стилях;
● ... и ряд незначительных модификаций стилей.
На каких сайтах работают стили
● Habrahabr,
● Geektimes (частичный официальный клон),
● Megamozg (частичный официальный клон для менеджерских, финансовых и организаторских статей),
● TMfeed (объединённая лента, без авторизации, по 3 вышеперечисленным сайтам),
● кеш Гугла (для просмотра недавно удалённых статей),
● локальный сайт под именем h.ru или haru/ (для разработчиков или для просмотра копий страниц).
Использование кеша Гугла: если статью недавно (до 2 недель назад) удалили с сайта - идём на http://webcache.googleusercontent.com/search?q=cache:<URL_этой_статьи>, и видим копию статьи, которую успел сохранить Гугл. Впрочем, скрипт HabrAjax сам подсказывает ссылку на странице "отбоя". И не только статью, но и оформление её с юзерстилями.Локальный сайт: будет полезен для оффлайн-чтения страниц сайта (или для тестирования при разработке юзерскриптов/стилей). На своём компьютере для его просмотра нужно установить веб-сервер (например, Apache) и создать в нём виртуальный хост под именем h.ru или haru/, и в его образ класть сохранённые через браузер страницы (которые с папками *_files/ при них). Для этого домена будут работать ZenComment, HabrAjax и HabraDarkAge (на выбор). Одна особенность: если страницы сохраняются (Ctrl+S) через Firefox или Chrome, перед сохранением лучше отключить скрипты HabrAjax и стили ZenComment, чтобы не сохранились их последствия. Старая Опера сохраняет страницы "чисто" (без артефактов) всегда - с подключением стилей и скриптов или без подключения. И есть проблемы с показом веб-шрифтов - браузер их не сохраняет в копии страницы, а они имеются в главном меню. (Если поправить стили и вытащить шрифты из веба - показывать будут. TODO nodeJS-скрипт для "доводки" копий и выделения общих скриптов и стилей из сохранённых страниц или полный "сейвер" страниц в формат JSON или HTML.)
Причины появления ZenComment и история развития
Сайт имел традицию содержать ряд багов оформления, которое постоянно менялось, но не достигало стабильного состояния. Существовали разные доработки на сайте юзерстилей для Хабра. На основе модификации стилей сайта от AlmAlexa на userscripts.org построены стили с собственными предпочтениями в плане компактности и экспериментов с внешним видом. Исторически, именно стили примерно в течение полугода дорабатывались, менялся дизайн, и только после них такая же системная работа продолжилась и со скриптами HabrAjax, которые в большой степени предполагали наличие юзерстилей ZenComment в браузере. (Возможность их отключения - опциональная и вызвана просьбами пользователей.) В результате, выполнялась поддержка (с 2011 года) 3 комбинаций стилей и скриптов (в скриптах часть стилей существовала и без подключения ZenComment) и ещё - одновременная поддержка до 5 браузеров в лучшие времена (Firefox, Chrome, Opera 11-12, Safari 5, IE 8-9), т.е. до 15 комбинаций программного окружения.
Периодически в стилях делались эксперименты по реализации представлений данных. Например, значительный чисто стилевой эксперимент - введение режима "Дзен" в просмотр комментариев, когда скрываются даже даты сообщений, и появляются по наведению мыши, к тому же, по-разному при наведении на 4 различных области болка комментариев. При этом, вокруг был серый фон, для концентрации на текстах. Впрочем, этот эксперимент показал сложность в работе с таким представление текстов, и далее за основу был принят менее компактный режим "Компакт" (авторы, даты и тексты), без 4 активных областей наведения мыши. Но кнопки ответов (те самые, которые стоят вертикально слева) появляются по наведению мыши, и только в верхних сообщениях.
Периодически в стилях делались эксперименты по реализации представлений данных. Например, значительный чисто стилевой эксперимент - введение режима "Дзен" в просмотр комментариев, когда скрываются даже даты сообщений, и появляются по наведению мыши, к тому же, по-разному при наведении на 4 различных области болка комментариев. При этом, вокруг был серый фон, для концентрации на текстах. Впрочем, этот эксперимент показал сложность в работе с таким представление текстов, и далее за основу был принят менее компактный режим "Компакт" (авторы, даты и тексты), без 4 активных областей наведения мыши. Но кнопки ответов (те самые, которые стоят вертикально слева) появляются по наведению мыши, и только в верхних сообщениях.
Поддержка ZenComment браузерами
Сейчас сохраняется поддержка 3 браузеров (с Оперой). Safari/Mac потенциально возможно поддерживать. Некоторые особенности требовались для поддержки стилей в Linux (Firefox и Chrome). Однажды была обеспечена поддержка IceWeasel под Debian (на базе Firefox 3.6) - во времена, когда Firefox был версии примерно 21-й. Поддержка Firefox 3.6 никогда не игнорировалась (и в скриптах), но обращение к ней происходило со всё более редкой периодичностью.
Дизайн ZenComment
Основной упор стилей был и есть - на функциональность и эксперименты с юзабилити. Предложения пользователей по дизайну были, но не были ими доведены до результата, кроме одного проекта, о котором неизвестно, был ли опубликован (на userscripts не появлялся в топах).
Варианты настроек стилей
В коде заложены переключатели, для переключения режимов "Компакт" и "Дзен", но второй режим давно не поддерживается, потерял актуальность. И второй переключатель - для более читабельных имён пользователей в случае работы без скриптов HabrAjax (скриптовым путём нельзя было обеспечить настройки из-за особенностей конкретной организации HTML).
Кроме того, блоки стилей в коде были относительно рассортированы, поэтому при желании можно было удалить ту или другую функцию. Но практики такой среди пользователей не наблюдалось, поэтому необходимости в полноценной поддержке модульности не было.
Кроме того, блоки стилей в коде были относительно рассортированы, поэтому при желании можно было удалить ту или другую функцию. Но практики такой среди пользователей не наблюдалось, поэтому необходимости в полноценной поддержке модульности не было.
Новинки версий
435 (2015-11-05) - учёт массы небольших изменений в вёрстке сайта за последние 1.5 месяца;
4.18 (2014-10-29) - расширена доступность сайтов (https); фильтр боковых блоков - с учётом Geektimes;
4.12 - Нормализовано верхнее меню (Geektimes и т.п.), подключён Geektimes; кнопки над полем вв.;
4.08-11 - 2-я вставка "Спецпр."; 10 авг 2014 - Малое "Моя лента"; #tab_print убран, ибо реклама;
4.07 (12 июня 2014) - показ меню для неавторизованных и непоказ лишних подменю "Спецпр.";
4.06 (31 мая) - учтена иерархия стилей для совместимости с новым ufocorrect.user.js (скриптом удаления длинных теней);
4.03 - адаптивность меню к широким окнам более 1520 пикс: все 4 подменю на виду. Скриншот.
20 мая - оформлено меню, появившееся 15 мая на сайте;
4.00 (19 мая 2014) - после создания левого меню-бара: подправлены стили заголовков комментариев, убраны устаревшие стили вопросов-ответов. Преобразованиее меню-бара ожидается в ближайшей новой версии.
3.07 (17 авг 2013) - настройки пользователя; 3.08 - top favorites tags;
(Прежняя история содержит 40-50 дополнений за 2 года.)
...
Общие цели построения стилей
1. Идея раздельного пользования стилями и скриптом. Если есть желание проверить работу стаилей без их установки, включите настройку "встроенные стили ZenComment".
2. Идея компактности текстов. Много белого места разделяет блоки, но требует больше работы колесом мыши. Будем стремиться "Читать, а не скроллить!".
3. Отключения различных возможностей. Любые существенные возможности должны уметь отключаться (модульность).
2. Идея компактности текстов. Много белого места разделяет блоки, но требует больше работы колесом мыши. Будем стремиться "Читать, а не скроллить!".
3. Отключения различных возможностей. Любые существенные возможности должны уметь отключаться (модульность).
Лицензия / License
Код распространяется под лицензией CC-BY-NC v.4.0, 
, на русском, wiki. Она призвана поддерживать распространение стилей показа интерфейсов. Основные возможности и следствия из лицензии:
* не ограничивает копирование и распространение в любом формате при условии некоммерческого использования;
* при копировании и модификации требуется указание авторства;
* дает права на:
.. пересборку, модификацию и использование в иных некоммерческих разработках;
* запрещает пользователю ограничивать эти права, пока для данного кода существуют условия лицензии
Подробнее все права и требования приведены в тексте лицензии. О версии 4.0. PDF v.3.0
, на русском, wiki. Она призвана поддерживать распространение стилей показа интерфейсов. Основные возможности и следствия из лицензии:* не ограничивает копирование и распространение в любом формате при условии некоммерческого использования;
* при копировании и модификации требуется указание авторства;
* дает права на:
.. пересборку, модификацию и использование в иных некоммерческих разработках;
* запрещает пользователю ограничивать эти права, пока для данного кода существуют условия лицензии
Подробнее все права и требования приведены в тексте лицензии. О версии 4.0. PDF v.3.0