возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено: 2018-01-24 в теме: Бардачок html php css
Запросто с WordPress создание и продвижение сайтов ATs media

При перезагрузке страницы сбивается межстрочный интервал – ошибки css вёрстки – свойство line-height

Нынче поправлял сайт одной знаменитой блогерше (имени не называю: боюсь преследования)) – так вот, поправлял, скажем так, вёрстку блога: ей кто-то из читателей подсказал, мол, текст при перезагрузках страниц то и дело принимает различный графический вид, попросту – меняется межсточный интервал при переходе от страницы к странице на мобильнике… (говорилось о браузере Опера-Мини).

Скажу честно, сразу мелькнуло подозрение закавыки со свойством line-height, но я как-то о нём подзабыл в процессе… короче взялся за работу…

Чем такие поломки дизайна сайта сложны? а тем, что их нужно отслеживать на реальном девайсе – ни тестерах всяких, но реальном гаджете. Почему? а потому что всякие тестеры на компе естественно имеют мощность используемого компьютера/ браузера! Попросту говоря – многие из тонких дефектов не отследить…

Работа была выполнена. Заказчица довольна: и теперь не теряет многочисленных читателей, которые почитывают её посты по ночам с телефонов))

И если кому-то тема интересна, давайте разбираться: акуна-матата…


 

 

в качестве нерекламы: (хотя всегда нужно сказать пару лестных слов, коли разработчики их заслуживают))

 

 

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

Главное его преимущество – лёгкость и скорость загрузки просматриваемых страниц, что немаловажно, имея у себя в арсенале качества нашего высокоскоростного интернета.

Я видел много товарищей (достаточно продвинутых в иной сфере, однако – мелких познаний интернетing)) которые ждут по минуте-две загрузку простенького сайта: это логично – если браузер без всяких экономических ограничений грузит всякие примочки js и пр. пр. прелести, фитюльки которых хороши только на стационарном компе. На мои советы использовать Оперу, большинство пользователей реагирует как на волка из леса, дескать, нужно переустанавливать “родной” браузер и причём ненароком попортить телефон… У меня все эти осторожности вызывают улыбку…

 

 

Ну ладно – приступим к теме:

 

 

 

 

 

к оглавлению

ошибки css вёрстки – свойство line-height

 

 

 

 

Короче, в итоге около часовых исследований недр сайта на предмет лага (ошибки, бага… как угодно) оказалось виною свойство line-height, а точнее его значение !

 

Что получалось при моих тестах:

При заходе на странички сайта вроде бы всё в порядке… однако, спустя пару перезагрузок – ошибка на лице окна браузера: действительно – расстояние между строк изменилось, стало в два раза шире по вертикали. В принципе можно читать и такой образ текста на мобиле… да и к тому же в мощных браузерах (и конечно же на компах) никаких ошибок не будет видно !! однако, заказчица (да и я) сочли этот экзерсис именно ошибкой, а коли – ошибка, значит нужно решать задачу!

 

 

Примечательно:

если просматривать сайт, не включая экономичный режим браузера – всё нормально (разъяснится ниже по тексту) но как только переключаюсь в режим экономии МГб и скоростей – баг !

К стати сказать: структура текста сайта возможно сломается и в шапке сайта, и в подвале, и в сайдбаре  – всё в прямой зависимости от языка (и ошибок) документа CSS вашего сайта!

Не забывайте обновлять документацию во время !

 

 

И всё-таки почему такие ошибки и нечитаемость браузером происходят??

 

Тут вряд ли стоит винить кого-то конкретно из разработчиков: всего интернета или же конкретного браузера, либо программистов в целом))

 

Кратко:

Опера-мини использует множества своих сторонних серверов, проходя через которые данные сайта обрабатываются и доставляются клиенту (нам с вами) – ввиду чего “браузер” добивается приличных скоростей загрузки… и как следствие приятной работы.

Как нетрудно догадаться, в случаях всяких сокращений возможны какие-то незначительные потери, коли в вёрстке просматриваемого сайта присутствуют ошибки!

 

Так же можно предположить “нечитаемость” всевозможными временными адаптациями языка CSS.

 

И это справедливо: ведь существуют правила языков программирования!! Вот об этих правилах коротенько и потолкуем:

 

 

 

web студия Занимательная МИХАЛИКА

 

 

Такое свойство line-height, в случае применения к блочному элементу, всегда определяет высоту каждой текстовой строки. Однако не следует путать с межстрочным расстоянием (меж графическими элементами) в большинстве же графических программ (наподобие Photoshop), которое определяет пространство между строками в абзаце.

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

 

 

Свойство line-height использует следующие единицы:

 

 

  1. px
  2. em
  3. %
  4. безразмерные числа, вроде 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 некоторые админы применяют в комментариях… следует визуализировать разность от основного текста статей.

 

 

 


На этом занавес представления опускается…
…на рампы пыль печальная ложится…

 

 


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

 

Подписаться на life-News ATs media squad
SendPulse - NoSpamX || ATs media ©

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©