Css вики: Css | Викии Вики | Fandom

CSS-десант. Википедия. «CSS-десант» — рубрика, где я при… | by sergey nikolaev | Дизайн-кабак

Published in

·

6 min read

·

Oct 2, 2017

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

Внешний вид Википедии всегда был нейтрален и консервативен. К нему не прилипают дизайнерские тенденции и модные рюшечки, которые волнами накатывают на весь интернет откуда-то из долины Дриббла. Википедия — голубая кровь интернета, и ресурсам с подобной социальной ответственностью по статусу не положено обращать внимания на этот шум.

Википедия живет под лозунгом «Мы — информация» [источник не указан 26 дней], и ничто не должно отвлекать пользователей от этой информации. Но вместо того, чтобы слиться в экстазе с принципами раскрывающейся информации Эдварда «Информация-превыше-всего» Тафти и улететь в Нирвану Data-Ink Ratio, Википедия постепенно накапливает мусор и несёт рудиментами сквозь года избыточные элементы и бесполезные оформительские приемы.

Думаю, что консервативность Википедии можно объяснить её внутренней структурой, которая мне представляется каким-то Замком из произведения Кафки. Подозреваю, что протащить через сеть принятий решений предложение «давайте уберем ненужную линию под заголовком для всех языковых версий Википедии» нереально. Но это не мое дело.

Типичная страница Википедии на моих 15 дюймах:

Начнем с содержимого. Я читатель Википедии, но не помню, когда что-нибудь писал в нее или правил статьи, у меня нет учетной записи участника сообщества. Поэтому для начала избавляюсь от пользовательской панели управления и других элементов, полезных для участников сообщества, но которыми я не пользуюсь: обсуждение страницы, история изменений, исходник статьи, режим правки.

Я считаю, что открывающаяся версия статьи — по умолчанию лучшая из имеющихся, поэтому также скрываю все предупреждения типа «Текущая версия страницы пока не проверялась…» или «Этот раздел еще не дописан».

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

Убираю элементы, которые настолько примелькались в своей обыденности, что уже давно не замечаются. Помните ли вы, что под заголовком каждой статьи написано «Материал из Википедии — свободной энциклопедии»? Мне об этом не надо напоминать, поэтому скрываю эту строчку.

Из ненужного остается еще банер, но он спокойно закрывается крестиком в углу.

Delete!

Что же, теперь есть с чем работать. В первую очередь я увеличиваю масштаб страницы до 150%. CSS-правила для этого не нужны, ограничиваюсь хромовским зумом, который запоминает настройки масштаба для каждого сайта.

Теперь текст даже можно прочитать. Википедия сделает больше вклад в мировое здравоохранение, чем Красный Крест с ООН, если установит базовый размер шрифта эдак в 21 пт.

Следующий маленький шаг, который меняет всё — отключаю все обводки. Ну то есть вообще все.

Красота. Теперь можно взяться за текстовые стили. Ограничиваю максимальную длину строки в 45em и ставлю крупный заголовок. Кстати, про шрифты. Википедия берет шрифт для тела статьи из настроек браузера, а вот в заголовке настаивает на своих вариантах. Шрифт заголовка я меняю на PT Serif, а в тело подсасывается эпловский SF UI Text.

Поднимаю тело статьи, используя освободившееся место после удаления лишних элементов в шапке, и переоформляю поиск.

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

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

Цитаты.

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

Перебираюсь на страничку посложнее, где можно найти другие характерные для Википедии элементы.

Блок геолокации под поиском для меня избыточен — я не умею прикидывать местоположение по координатам, а из сервисов карт достаточно оставить один любимый вариант, заодно спрятав его в иконку геопина.

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

С таблицей справа тяжелее. Она генерируется каким-то парсером, стили забиваются намертво, классы у объектов не размечены. Пытаюсь обуздать ее грубой силой, избавившись от всех подложек и разнофлажного выравнивания. Ну и текст основной от нее отодвигаем подальше.

Остались мелочи. Например, явно надо избавиться от блох, что недавно завелись в Википедии — сумасшедшие стрелки якорных ссылок. Можно их притушить как-нибудь или попробовать поменять на что-то более аккуратное, но я пока просто избавлюсь от них.

Ну и совсем мелочь — аккуратно сверстать разворачивающие кнопочки.

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

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

Можно заметить, что и с точки зрения того самого Data-Ink Ratio, и с точки зрения занимаемого пространства я на самом деле облажался: я выкинул со страниц информацию и всё равно в экран теперь влезает в полтора-два раза меньше содержимого. Меня это беспокоит примерно так же, как типографа, которому ставят в укор использование в книге расточительного канона Ван Де Граафа вместо плотной газетной верстки. Всё зависит от условий потребления. Мне не жалко виртуальной бумаги Википедии и своих двух скролящих пальцев, зато я получаю более комфортное чтение без страха потерять зрение. Возможно, вам мой вариант тоже окажется удобней.

Смысл рубрики — в размышлениях о способе улучшения дизайна сайтов, а не составления каталога «скинов» и распространение сделанных стилей как продукта. Поэтому я хоть и публикую исходник стиля, но в форме as is, без какой-либо поддержки и обещаний работоспособности (наверняка что-то где-то поломалось от моих грубых вмешательств). Это не более, чем полуфабрикат этой записи.

Стиль на userstyles.org:

wikipedia clear style

Free website themes & skins created by the Stylish community on Userstyles.org

userstyles.org

CSS-код отдельно:

[CSS] — Pastebin.com

Edit description

pastebin.com

Желающие не пропустить следующий выпуск рубрики могут, например, подписаться на меня хоть где угодно:в твиттере, фб, вк или прямо здесь на медиуме.

daisyUI — CSS-компоненты Tailwind

⏳ скоро: daisyUI 3.0

Бесплатный плагин для Tailwind CSS

Ускоренная разработка

Очиститель HTML

Настраиваемые и тематические

Чистый CSS. Работает на всех фреймворках

 npm i daisyui 

См. компоненты Компоненты Как использовать?

с классами компонентов

Не изобретайте велосипед!
daisyUI добавляет классы в Tailwind CSS для всех распространенных компонентов пользовательского интерфейса. Такие классы, как btn, card и т. д. Это позволяет нам сосредоточиться на важных вещах, а не создавать базовые элементы для каждого проекта.

Создание кнопки

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

 Кнопка 

vs

 Кнопка 

Создание переключателя

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

 <дел>
    <тип ввода="флажок"/>
    <промежуток> 
  

 <ул>
    

      Название меню
    
    
Первый пункт меню
    
Второй пункт меню
    
Третий пункт меню
   

 

    

      Название меню
    
    
Первый пункт меню
    
Второй пункт меню
    
Третий пункт меню
  
 

 Кнопка 

 Кнопка 

 npm i daisyui 

 // tailwind.config.js
  модуль.экспорт = {
    плагины: [
      требуют ('дайсюи'),
    ],
  }