Со мной довольно часто случается так, что шрифты, цвета шрифтов и другие особенности некоторых сайтов неудобны для чтения с монитора. Обычно это очень мелкие шрифты — на зрение не жалуюсь, но читать текст с экрана монитора привык с расстояния сантиметров 70-80 (22"), откинувшись на спинку кресла. В большинстве случаев спасает ctrl+ / ctrl-, конечно частенько полученный результат выглядит мягко сказать не очень, но для чтения сгодится, особенно когда на сайте мы первый и возможно последний раз. А вот что делать, когда сайт мы посещаем постоянно и результат хочется более приятный для глаз?
Скажем так: до сих пор я мирился с неудобствами откручивая как уже сказал ctrl+, но совершенно недавно произошло нечто невероятное и (хабр извиняй) ужасное, шрифты хабра после такой операции перестали изменять свой размер, независимо от масштаба, сохраняются абсолютные значения размера шрифтов, неприемлемые для меня 13px. Некоторое время, переживал такое положение вещей с помощью F12 и установкой font-size для класса .post .content в нужное для меня значение (17px). Но долго с этим жить невозможно, т.к. эту процедуру в таком раскладе вещей нужно проделывать в каждой статье. Подумал, что надо как-то справляться с этой напастью.
Решение, которое пришло мне в голову первым (не самое совершенное): у меня для тестов на компьютере постоянно живет nginx, в лоб прописал я для него проксирующую конфигурацию, /etc/hosts habrahabr.ru как локальный адрес, но для некоторых файлов стилей подсовывал свои правленые файлы, для полноты картины вот конфигурация nginx:
в /etc/nginx/sites-available/habrahabr.ru
server {
listen 80;
server_name www.habrahabr.ru habrahabr.ru;
root /var/www/habrahabr.ru/public/;
access_log /var/www/habrahabr.ru/log/access.log;
error_log /var/www/habrahabr.ru/log/error.log;
rewrite_log on;
autoindex on;
resolver 8.8.8.8;
location / {
proxy_pass http://$host:80;
}
location ~ styles/1374498586/_parts/comments\.css {
alias /var/www/habrahabr.ru/public/comments.css;
}
location ~ styles/1374498586/_parts/posts\.css$ {
alias /var/www/habrahabr.ru/public/posts.css;
}
location ~* ^.+\.(jpg|jpeg|gif|css|png|js|ico|bmp)$ {
proxy_pass http://$host:80/$request_uri;
access_log off;
expires 10d;
break;
}
}
Все отлично работало, но добавлять новый сайт не очень удобно, вполне терпимо но что-то смущало, тем более хотел поделиться решением.
Тогда я решил написать Extension (предварительный поиск результатов не дал) для хрома/хромиума т.к. пользуюсь им. Посмотрел статьи, доки, вроде ничего сложного справлюсь быстро. Иду в стандартную папку проектов, придумываю название для проекта mystyle и тут меня что-то торкнуло, забил это название в google дописав chrome extension. И о чудо оно есть, именно то, что нужно, но называется my-style. Дальше все очень просто, устанавливаем данное расширение, заходим на нужный сайт, нажимаем ctrl+m, справа появляется окно для дописывания своих стилей сайту, которые сразу применяются и сохраняются. Profit!
Любой сайт мы можем заставить выглядеть приемлемым для себя образом. Конечно, чтобы прописать свои стили нужны некоторые начальные знания css, но мы ведь на IT-ресурсе, если своих знаний не хватает, товарищи с соответствующими навыками наверняка найдутся рядом.
Немного моих стилей для habra:
body {
font-size:14px;
}
.post .content {
font-size:17px;
}
.comments_list .comment_item .message {
font-size:17px;
}
.event .info .text {
font-size:17px;
}
.answer .message {
font-size:17px;
}
.editor .text-holder textarea {
font-size:14px;
}
К примеру вот как выглядел у меня хабр до изменений:
Масштаб 100%:
Масштаб 175%:
Т.е. шрифты сохраняют свое абсолютное мелкое значение.
Сейчас, масштаб 100%:
Спасибо за внимание. Надеюсь был полезен.