Распространенная ошибка верстки: тестируем горизонтальную прокрутку

    Эта ошибка крошечная и незаметная, но все же, это ошибка. Она присутствует на чудовищном количестве сайтов, в т.ч. на Хабрахабре.

    Проблема возникает с фоновыми изображениями у элементов, которые тянутся на всю ширину окна браузера. Например, подвал Хабрахабра. Если уменьшить окно браузера до появления горизонтальной прокрутки и крутить вправо, то фон может просто обрубиться.

    На Хабрахабре эта проблема не очевидна (фон всегда есть под текстом), поэтому привожу более наглядный пример с рандомного сайта:
    image

    Самый простой способ устранения ошибки в CSS
    html {min-width: 960px;}
    


    Я лишь хочу напомнить разработчикам про этот мелкий баг, т.к. он действительно очень распространен, даже на сайтах веб-студий (смотрю выдачу гугла по запросу «разработка сайтов» и обнаруживаю ошибку на трех сайтах из пяти).

    Похожие публикации

    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 28

    • НЛО прилетело и опубликовало эту надпись здесь
        +1
        Тогда уж так:

        html {min-width: 960px;}
          +1
          Отредактировала так.
          +1
          Вы не поверите, сколько «крошечных и незаметных» багов присутствует на «чудовищном количестве сайтов», если покопаться :)
            0
            Да знаю, знаю…
            Вот только этот баг лично мне жить мешает. Люблю я браузер ресайзить.
            +1
            Ну раз уж речь зашла о глупых ошибках, вставлю свои 5 копеек:
            Бытует мнение, что фон body во всех браузерах и ОС во все времена был, есть и остаётся белым.
            Это на самом деле не так и цвет фона, в том числе, зависит от настроек операционной системы.
            В итоге можно столкнуться с подобными коллизиями:


            Мораль: Всегда задавайте background-color для body, даже если по дизайну он белый.
              +3
              Вы ведь сейчас наверное про html, да?
              • НЛО прилетело и опубликовало эту надпись здесь
                  –2
                  Зачем задавать фон body когда его можно задать для html и никаких проблем не будет? body не является корневым узлом.
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      Там даётся рекомендация, только она не объясняется. Какая есть объективная причина прописывать фон у body вместо html? Берём в рассчёт сейчас только body с нулевыми паддингами и марджинами.
                      • НЛО прилетело и опубликовало эту надпись здесь
                          +1
                          А какие у вас критерии очевидности? Всю жизнь задавал фон через html и никогда с этим проблем не возникало. Про переопределяющий класс тоже не очень понятно. Что мешает добавить класс для html?
                          • НЛО прилетело и опубликовало эту надпись здесь
                              –1
                              CSS раньше тоже вообще не было и стилизовывали всё через HTML, но давайте всё-таки говорить о сегодняшних технологиях. Если кому-то не очевидно что элемент html стилизуется значит самое время перечитать спецификацию.
                              И дело скорее не в очевидности, а в привычке. Тянется она с прошлых лет, поэтому и задают через body, хотя html ничем не хуже.
                              Плюс для html существует хитрый селектор :root, его можно использовать для задания фона в обход старых IE (<9).
                              • НЛО прилетело и опубликовало эту надпись здесь
                                  0
                                  Какие-то вы неправильные выводы сделали из того что я сказал.
                                  • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    Я бы назвал это вынужденной необходимостью (недавний пост от Chris Coyier).
                  +3
                  Я бы вывел тут другую мораль: используйте в интерфейсной графике прозрачный фон.
                  • НЛО прилетело и опубликовало эту надпись здесь
                  +1
                  Спасибо, у себя исправил.
                  • НЛО прилетело и опубликовало эту надпись здесь
                      –1
                      Если уж создали целый топик про свойство min-width — стоило упомянуть и про то, какими браузерами поддерживается. Касательно ие — работает только в ИЕ8+, для остальных надо извращаться.
                        0
                        caniuse.com говорит, что да с ИЕ8+, но в ИЕ10 в режиме эмулации ИЕ7 min-width тоже работает, вопрос кто врёт?
                        • НЛО прилетело и опубликовало эту надпись здесь
                            +1
                            Быстро Вы починили :3
                        0
                        Во блин, а я думал что это баг css3 градентов на мобильных устройсвах, а тут вот оно как — мой баг.

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

                        Самое читаемое