Рубрика «inline-block»

Я хочу рассказать о том, что такое font boosting в мобильных браузерах, к какой неожиданной проблеме он может привести при web-разработке и как с этой проблемой бороться.

Рассмотрим пример из реальной жизни:

Пример 1:

  1. Имеется вновь созданный span с display: inline-block.
  2. Измеряем его ширину в пикселях через свойство offsetWidth.
  3. Меняем его цвет.
  4. И, вдруг, в Google Chrome for Mobile, после изменения цвета ширина элемента резко увеличивается, переставая соответствовать той, что была измерена всего двумя строчками выше!

Показать код

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv = "content-type" content = "text/html; charset=utf-8" />
    <title>Проблема с Font boosting в Google Chrome for Mobile</title>
    <script type = "text/javascript">
      window.onload = function ()
        {
        var spnSpan1 = document.getElementById ("span-1");
        
        alert ("Ширина элемента до изменения цвета: "+ spnSpan1.offsetWidth +"px"); //59px
        spnSpan1.style.color = "red";
        alert ("Ширина элемента после изменения цвета: "+ spnSpan1.offsetWidth +"px"); //186px
        }
    </script>
  </head>
  <body>
    <p>
      <span id = "span-1" style = "display: inline-block;">Элемент</span> 
    </p>

    <!--
    На странице должно быть достаточно текста.
    Если убрать этот абзац, глюк перестанет возникать.
    -->
    <p>
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
      abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
    </p>
  </body>
</html>

Смотреть пример on-line.

(Для просмотра примеров из этой статьи воспользуйтесь Google Chrome for Mobile или обычным Google Chrome в режиме эмуляции смартфона, например Apple iPhone или Samsung Galaxy Note II).

Причиной такого странного поведения, как раз, и является font boosting.

 

Что такое font boosting

Font boosting — это специальный прием, с помощью которого мобильные браузеры подгоняют размер шрифта под разрешение мобильного устройства. Этот прием нужен из-за того, что многие web-страницы, сверстанные в расчете на десктопные браузеры, содержат текстовые элементы, ширина которых превышает ширину мобильного экрана. Для просмотра этих элементов посетитель вынужден либо использовать горизонтальную прокрутку, либо вписать элемент в размеры экрана, уменьшив масштаб страницы. Однако, при уменьшении масштаба уменьшается также и размер шрифта, делая текст порой совершенно нечитаемым. Так вот, font boosting специально увеличивает размер шрифта, так, чтобы после вписывания блока в ширину экрана, этот размер шрифта соответствовал изначально задуманному.

Степень увеличения размера шрифта при font booting'е зависит от ширины элемента — чем шире элемент, тем сильнее его надо уменьшить, чтобы вписать в размеры экрана, и, соответственно, тем больше надо увеличить размер шрифта для компенсации этого уменьшения.

 

Проблемы font boosting в Google Chrome for Mobile

Реализация font boosting в Google Chrome for Mobile имеет две особенности, которые могут привести к сложнообнаружимым ошибкам при web-разработке:Читать полностью »

Добрый день, союзники!

Мне, как верстальщику, приходится ежедневно сталкиваться с различными CSS3 свойствами, которые, хочется мне или нет, приходится использовать так, чтобы они корректно отображались во всех современных и несовременных браузерах. Само собой, у меня собралась некая библиотека, которую я использую при верстке различных проектов. Собирал я свою коллекцию, из различных ресурсов и форумов, на безграничных просторах сети Интернет, так что неудивительно, если кто-то уже сталкивался с чем-то в отдельности.

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

Читать полностью »

в 0:19, , рубрики: css, float, inline-block, метки: , ,

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

Почему не люблю это свойство?

Есть несколько причин. Например, для очистки всегда нужно использовать некий элемент со свойством clear, из-за чего код засорялся. Особенно страшно было на это смотреть, когда float подвергался список ul > li. Приходилось или добавлять в конец ещё один li с особым классом, или того страшнее span или div между последним li и закрывающим тегом ul (хотелось отрубить себе руку).

Ну и кто не сталкивался с неадекватным (как минимум по логике верстальщика) поведением браузера, который при нормальной, казалось бы, вёрстке шаблона в несколько колонок просто разрывал его и тогда, для лечения, призывался жуткий и прекрасный в своей жуткости .clearfix. Работу которого способны объяснить только шаманы 90лвл.

Читать полностью »

Думаю, мало кто возразит, что верстка на инлайн-блоках становится модной. Многие верстальщики, впервые узнав о них, видят в них улучшенную замену float-ам, и не зря — они и вправду дают куда больше свободы по части центрирования, вертикального выравнивания блоков и т.д. Неудивительно, что недавняя детальная статья коллеги psywalkerа (css-live.ru), посвященная самой неинтуитивной для начинающих особенности инлайн-блоков, оказалась столь полезной и востребованной.
Однако эта статья (точнее, комменты к ней) высветили еще одну проблему, которая сейчас расползается по вебу, как вирус, и очень скоро может «аукнуться» на множестве сайтов. Нет,Читать полностью »

Думаю, мало кто возразит, что верстка на инлайн-блоках становится модной. Многие верстальщики, едва узнав о них, видят в них улучшенную замену float-ам, и не зря: инлайн-блоки дают куда больше свободы по части центрирования, вертикального выравнивания блоков и т.д. Не случайно недавняя детальная статья коллеги psywalkerа (css-live.ru), посвященная самой неинтуитивной для начинающих особенности инлайн-блоков, оказалась столь полезной и востребованной.
Однако комменты к этой статье высветили еще одну проблему, которая сейчас расползается по вебу, как вирус, и очень скоро может «аукнуться» на множестве сайтов. Нет, катастрофы не случится, страничкиЧитать полностью »

Каскадные Таблицы Стилей / «Загадочные отступы» между инлайн-элементами
Каждому, даже самому «молодому» верстальщику известны неприятности (проблемы) с интервалом между элементами, пробелами, которые вставляются между словами. Эти пробелы часто мешают нам при вёрстке того или иного блока. Избавиться от них бывает не так-то просто, а зачастую эти межсловные расстояния и вовсе ставят нас перед выбором, выбором способа решения данной проблемы.
В этой статье мы попытаемся понять, что же из себя представляют эти загадочные "Отступы", что это за звери и с чем их едят. Так же рассмотрим, что такое inline-block, и почему после себя он ставит эти непонятные интервалы. Ну, и, самое главное, мы увидим несколькоЧитать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js