Нынче поправлял сайт одной знаменитой блогерше (имени не называю: боюсь преследования)) – так вот, поправлял, скажем так, вёрстку блога: ей кто-то из читателей подсказал, мол, текст при перезагрузках страниц то и дело принимает различный графический вид, попросту – меняется межсточный интервал при переходе от страницы к странице на мобильнике… (говорилось о браузере Опера-Мини).
Скажу честно, сразу мелькнуло подозрение закавыки со свойством line-height, но я как-то о нём подзабыл в процессе… короче взялся за работу…
Чем такие поломки дизайна сайта сложны? а тем, что их нужно отслеживать на реальном девайсе – ни тестерах всяких, но реальном гаджете. Почему? а потому что всякие тестеры на компе естественно имеют мощность используемого компьютера/ браузера! Попросту говоря – многие из тонких дефектов не отследить…
Работа была выполнена. Заказчица довольна: и теперь не теряет многочисленных читателей, которые почитывают её посты по ночам с телефонов))
И если кому-то тема интересна, давайте разбираться: акуна-матата…
в качестве нерекламы: (хотя всегда нужно сказать пару лестных слов, коли разработчики их заслуживают))
На мой взгляд, нынче есть достаточно неплохой браузер для обычных пользователей и их мобильников – Опера мини.
Главное его преимущество – лёгкость и скорость загрузки просматриваемых страниц, что немаловажно, имея у себя в арсенале качества нашего высокоскоростного интернета.
Я видел много товарищей (достаточно продвинутых в иной сфере, однако – мелких познаний интернетing)) которые ждут по минуте-две загрузку простенького сайта: это логично – если браузер без всяких экономических ограничений грузит всякие примочки js и пр. пр. прелести, фитюльки которых хороши только на стационарном компе. На мои советы использовать Оперу, большинство пользователей реагирует как на волка из леса, дескать, нужно переустанавливать “родной” браузер и причём ненароком попортить телефон… У меня все эти осторожности вызывают улыбку…
Ну ладно – приступим к теме:
к оглавлению
ошибки css вёрстки – свойство line-height
Короче, в итоге около часовых исследований недр сайта на предмет лага (ошибки, бага… как угодно) оказалось виною свойство line-height, а точнее его значение !
Что получалось при моих тестах:
При заходе на странички сайта вроде бы всё в порядке… однако, спустя пару перезагрузок – ошибка на лице окна браузера: действительно – расстояние между строк изменилось, стало в два раза шире по вертикали. В принципе можно читать и такой образ текста на мобиле… да и к тому же в мощных браузерах (и конечно же на компах) никаких ошибок не будет видно !! однако, заказчица (да и я) сочли этот экзерсис именно ошибкой, а коли – ошибка, значит нужно решать задачу!
Примечательно:
если просматривать сайт, не включая экономичный режим браузера – всё нормально (разъяснится ниже по тексту) но как только переключаюсь в режим экономии МГб и скоростей – баг !
К стати сказать: структура текста сайта возможно сломается и в шапке сайта, и в подвале, и в сайдбаре – всё в прямой зависимости от языка (и ошибок) документа CSS вашего сайта!
Не забывайте обновлять документацию во время !
И всё-таки почему такие ошибки и нечитаемость браузером происходят??
Тут вряд ли стоит винить кого-то конкретно из разработчиков: всего интернета или же конкретного браузера, либо программистов в целом))
Кратко:
Опера-мини использует множества своих сторонних серверов, проходя через которые данные сайта обрабатываются и доставляются клиенту (нам с вами) – ввиду чего “браузер” добивается приличных скоростей загрузки… и как следствие приятной работы.
Как нетрудно догадаться, в случаях всяких сокращений возможны какие-то незначительные потери, коли в вёрстке просматриваемого сайта присутствуют ошибки!
Так же можно предположить “нечитаемость” всевозможными временными адаптациями языка CSS.
И это справедливо: ведь существуют правила языков программирования!! Вот об этих правилах коротенько и потолкуем:
Такое свойство line-height, в случае применения к блочному элементу, всегда определяет высоту каждой текстовой строки. Однако не следует путать с межстрочным расстоянием (меж графическими элементами) в большинстве же графических программ (наподобие Photoshop), которое определяет пространство между строками в абзаце.
Следует запомнить и не забывать, что, несмотря на то, что это значение сво-ства выполняет одну и ту же задачу, а именно интервал между строк текста, выполняется (обрабатывается) это по-разному.
Свойство line-height использует следующие единицы:
- px
- em
- %
- безразмерные числа, вроде 1.5
Вот о безразмерных числа свойства и поговорим пристальнее)
Эти безразмерные значения в основном действуют как проценты. Таким образом – 150% равно 1.5. …последнее является, как понимаете, более компактным и читаемым, а в нашем случае обусловило ошибку нечитаемого экономным вариантом браузером.
То есть в шаблоне заказчицы (в файле стилей) свойство было во всех случаях обозначено в px, что и привело к нечитаемости, а следовательно и ошибке.
Мне пришлось полностью прогнать файл стилей и поправить несоответствия.
Но – неприятность эту, мы пережили…
Знаний для:
к оглавлению
почему важны правила line-height
Основной целью line-height является непременное определение комфортного расстояния (отступов) между строк для текста. Поскольку благоприятная удобочитаемость зависит от размера же текста, непременно рекомендуется использовать динамическое значение обусловленное размером текста.
Использование px
– не рекомендуется, так как пиксели определяют статическое значение данных.
Однако использование пикселей в некоторых смыслах действительно пригодится – например, если вы хотите выровнять текст по вертикали в соответствии с иным каким-то элементом блога/сайта, а не в зависимости от размера шрифта!
Поскольку применение % или em может дать неожиданный результат, рекомендуемый метод связан с безразмерными числами:
для основного текста line-height рекомендуется как 1.5 от размера текста;
для заголовков line-height рекомендуется значение 1.2.
body { font-size: 16px; line-height: 1.5; }
Обработанная и вычисленная высота строки будет в нашем примере 16** 1.5 = 24px
к оглавлению
наследование свойства line-height
К сведению:
Поскольку такое свойство как line-height наследуется дочерними элементами, то оно во всех графических примерах сайта будет оставаться постоянным, независимо от величин, которые font-size впоследствии применяется.
body { font-size: 16px; line-height: 1.5; }
blockquote { font-size: 18px; }
К примеру элемент <blockquote> будет иметь высоту строки 27px – полезно знать, ибо значения blockquote некоторые админы применяют в комментариях… следует визуализировать разность от основного текста статей.
На этом занавес представления опускается…
…на рампы пыль печальная ложится…
...и конечно же, читайте статьи сайта и подписывайтесь:
Делюсь горьким опытом - кое-какими знаниями, для вашего сладкого благополучия))
mihalica.ru !