Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

О фиксированном позиционировании в CSS

Верстальщики недолюбливают компанию «Микрософт» за жуткую глючность и непоследовательность IE в разборе и отображении CSS. Но есть две вещи, которые компания «Микрософт» сделала правильнее, чем все остальные.
  1. Компания «Микрософт» забила на идиотский стандарт, согласно которому шириной бокса является ширина его содержимого, а не ширина самого бокса, и предпочла использовать здравый смысл. Когда стандартизаторы поняли, какую ахинею они придумали, они добавили свойство box-sizing, и поэтому теперь мы имеем возможность верстать страницы нормально под всеми браузерами.
  2. Компания «Микрософт» не реализовала поддержку идиотского значения атрибута position: fixed. Благодаря этому такого извращения нет почти ни на каких сайтах.
В «Техногрете» появилась статья Андрея Шитова, где он рассказывает о способе заставить position: fixed работать в IE. Несколько раньше на сайте Ромы Воронежского появился этот ужас «в действии».

Это совершеннейший интерфейсный кошмар, заставляющий прокрутку в браузере работать не так, как она работает во всех остальных приложениях в мире. Когда менюшка расположена в верхней части экрана, тебе кажется, что ты находишься и в самой верхней точке прокрутки — но на самом деле можно крутить ещё и ещё. Часть страницы сверху уже «упёрлась» в край, а у части начало было явно где-то выше, потому, что строки торчат из-за верней границы. К этому невозможно привыкнуть, и это не укладывается в голове нормального человека — как теория об искривлённости пространства.

Если очень-очень надо, чтобы крутилась только часть страницы, то скроллинг должен быть именно вокруг этой части. Это делается фреймами или дивом, у которого overflow: scroll. У всего этого есть ещё целая куча недостатков, про которые можно рассказывать часами (хотя бы то, что скролбар, не упёртый в правый угол, имеет маленькую ширину, и в него приходиться целиться).

Давно известно, что техническая возможность что-либо сделать не может являться поводом это делать. Не нужно разукрашивать скролбар в разные цвета, не нужно делать бегущую строку тегом <marquee>, не нужно подвешивать менюшки с помощью position: fixed. Это «прикольно», но пользователя всё это бесит.
Подписаться на блог
Поделиться
Отправить
27 комментариев
BOLK
Илья, если ты знаешь один способ использования какой-то вещи, это ведь не значит, что это плохо?

мы, например, используем position:fixed в модальных окнах нашей CMS — они не должны никуда прокручиваться, если в браузере есть scroll bar.
Илья Бирман
Женя, если дважды два четыре, это ведь не значит, что Москва — столица России? Нет, не значит. Но Москва, тем не менее, столица России.

Кажется, вывод о том, что это плохо, я делал вовсе не из того, что я знаю один способ использования. Более того, я нигде не утверждал, что знаю один способ использования. В общем-то любую, сколь угодно плохую технологию можно использовать как-нибудь по-хорошему.
pepelsbey
Очень сомневаюсь, что в IE6 и раньше pos:fixed не работает только потому, что это «совершеннейший интерфейсный кошмар». Вы же понимаете, что даже свойством border можно испохабить интерфейс сайта, не отменять же его из-за этого.

Что до border-box, MS традиционно вообразила себя «первой после Бога» и решила сыграть в W3C, а сегодня мы видим microsoft.com свёрстанный в W3C’шной блочной модели: в шапке правильный DOCTYPE, а в CSS zoom’ы, zoom’ы...

Подумайте — сколько нервов было попорчено верстальщиками только потому, что у MS свой взгляд на вещи.
Илья Бирман
Я нигде не писал, что «в IE6 и раньше pos:fixed не работает только потому, что это „совершеннейший интерфейсный кошмар“». Вы сами установили причинно-следственную связь.

Мне не нужно «подумать» над тем, «сколько нервов было попорчено верстальщиками», потому, что я сам с этим регулярно сталкиваюсь. Я написал про два конкретных случая, когда они сделали лучше, чем предписывал стандарт, не вдавась в подробности относительно того, что именно побудило их сделать именно так.
Johnny Woo
Почему возможность делать идиотские менюшки с помощью position: fixed означает, что поддержка такого позиционирования — плоха? По-моему, это значит только, что не надо делать идиотские менюшки. Зато когда действительно нужно что-нибудь зафиксировать, для MSIE приходится отдельно поплясать с бубном.

Вот, например, на xpoint.ru менюшка укладывается в голове?
Илья Бирман
На xpoint.ru точно такая же неукладывающаяся в голове менюшка, как и у Ромы Воронежского.

Возможность делать бегущую строку тегом <marquee> означает, что поддержка такого тега плоха ровно потому, что ничего хорошего этим тегом сделать нельзя. Точно так же, как ничего хорошего с помощью position: fixed сделать нельзя.
pepelsbey
Мне просто кажется, что не реализовать (по любым причинам) простое и полезное свойство, которым MS прежде всего похвасталась при выходе IE7 — это совсем не «сделать лучше».
BOLK
тем не менее, Илья, ты называешь этот аттрибут «идиотским», аргументация, которую я увидел — «это совершеннейший интерфейсный кошмар, заставляющий прокрутку в браузере работать не так, как она работает во всех остальных приложениях в мире», в качестве примера приводишь меню.

Проблема в том, что ты воспринимаешь браузер как приложение, а не как среду.
Илья Бирман
Я воспринимаю браузер как приложение, а не как среду по одной простой причине: браузер — это приложение, а не среда. И, его воспринимают так подавляющее большинство людей. И в этом нет никакой проблемы.

Проблема как раз возникает тогда, когда некоторые веб-разработчики начинают воспринимать браузер как среду — то есть не так, как остальные люди — и проектировать свой сайты исходя из такого восприятия.

Но это всё не важно.

Скроллинг в браузере с position: fixed ведёт себя не так, как в любом другом приложении и в любой другой среде. Поэтому, как ты его не воспринимай, это всё равно ужас.
BOLK
И, конечно, Илья, с помощью position:fixed можно сделать минимум одну хорошую вещь — нормальные модальные окна!
Илья Бирман
Нет такого понятия как «нормальные модальные окна», ибо любое модальное окно — кошмар само по себе, независимо от способа реализации.

Если ты эмулируешь окно с помощью дива, то, помимо издевательства над прокруткой, ты создаёшь ещё 158 проблем, потому, что ты делаешь окно, которое во всех аспектах ведёт себя не так, как все остальные окна во всех приложениях и средах в мире.
Spectator
«Не нужно разукрашивать скролбар в разные цвета...»

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

У вас ромбовидный монитор!
A!e%
Полностью согласен с BOLK’ом. fixed — тоже иногда нужен. Но не в «классическом» дизайне — факт. А именно когда браузер — это среда для разработки «тонких» приложений.

И без модальности иногда тоже никуда.
BOLK
Илья, ты ведь сейчас в Опере, да? Открой инструменты->настройки. Видишь модальное окно? Вот наше ведёт себя абсолютно так же. А когда я делаю CMS для меня браузер — не приложение, а среда. CMS — это веб-приложение, а не просто часть сайта.
Илья Бирман
Я знаю, что такое модальное окно. Ничего хорошего в нём нет.

Про приложение и среду я тебе уже всё написал.
BOLK
Предложи альтернативу.

Илья, у тебя большой опыт создания CMS, чтобы рассуждать на эту тему.
Илья Бирман
У меня нет большого опыта.

Расскажи, в чём состоит задача. Если ты говоришь, что задача состоит в том, чтобы сделать модальное окно, то альтернативы, конечно, нет. Опиши её шире, чтобы можно было понять, чего ты добиваешься с помощью модального окна, чтобы можно было рассуждать о том, как этого добиться более удобными средствами.
Александр Стекольщиков
Microsoft повела себя неправильно, решив за W3C что надо делать с ИХ же стандартами. В итоге мы получаем что? То, что не можем при необходимости (порой она возникает) использовать position:fixed.

Представь себе тандем из верстальщика-профи и дизайнера-не-твоего-уровня. Дизайнер сказал: «Fixed!», а верстальщик что? Он не может сказать дизайнеру: «пошёл в жопу, так нельзя делать». Всё. Макет уже утверждён…
Илья Бирман
Если в команде существует «вертикаль власти», когда решения не обсуждаются, а принимаются на уровне «пошёл в жопу», вряд ли она сделает что-то хорошее, чего тут обсуждать.
gray
Пардон, про многое не согласен. И про среду (спорим о терминах без определений?), и про модальные окна, и про наплевательство на стандарты. По большинству пунктов не вижу смысла спорить — тут и без меня высказали альтернативные мнения.

А вот про «overflow: scroll» vs. «position: fixed» имею сказать кое-что. Если у меня блок с «position: fixed» находится в левой части страницы, а всё остальное — в правой, то чем это хуже фреймов?
Vitaly Harisov
Standard Box Model рулит, если блок надо окружить десятипиксельной полупрозрачной тенью и задать ему ширину 32%, чтобы он лёг по сетке.
Илья Бирман
Не понял.
Centaur
Когда стандартизаторы поняли, какую ахинею они придумали, они добавили свойство box-sizing
А Microsoft, когда поняли, что лучше dura lex, чем никакого lex’а, сделали quirks mode и standards compliance mode, в котором ширина бокса считается по стандарту.
Vitaly Harisov
Задача: Ширина блока должна быть 32%. Вокруг блока должна быть тень на 10px. Тень не должна сдвигать блок.

Решение: в Standard Mode задаём width: 32%, padding: 10px, margin-left: -10px. В Quirks Mode точно задать ширину не получится.
Илья Бирман
Я не понимаю, что вы называете словом «тень». У вас в результате получится бокс шириной 32% + 20px и сдвинутый влево на 10px. Безо всякой тени. Может, на примере покажите, что вы имеете в виду?
Роман Парпалак
Вот одна из ситуаций, в которой использован фиксированный бокс, причем не для меню:

http://root.cern.ch/root/html/TH1D.html

Понятно, что если поместить элементы управления отображением той или иной информации, например, вверху страницы, ее придется прокручивать чаще. Хотелось бы узнать мнение Ильи по поводу организации такого интерфейса без position: fixed.
Илья Бирман
Вы привели редкий пример, когда использование position: fixed как будто бы оправдано. Другое дело, что, быть может, можно было вообще весь интерфейс по-другому делать :-) Мне лень было вникать, о чём там вообще речь. Важно то, что, благодаря оформлению окошка, оно не воспринимается как часть страницы, а как будто бы находится над ней (в значительной степени, видимо, это связано с его прозрачностью). Поэтому эффекта искривлённого пространства не возникает и мозг не взрывается.

Моя точка зрения состоит в том, что если бы position: fixed работал изначально везде, то вреда от этого было бы несоизмеримо больше, чем пользы.
Роман Парпалак
Пожалуй, соглашусь :)
Мне кажется, что вред от position: fixed нивелируется вредом от «синдромов домашних страниц»: фоновых картинок, размера и начертания шрифта, цветов фона и текста и той же самой бегущей строки.
Давыдов Дмитрий
Про всё соглашусь, но не «position:fixed». Это, как раз, попытка сделать web-интерфейс похожим на повседневные приложения. Если следовать убеждению «position:fixed» — плохо, то меню, в стандартных приложениях, должны прокручиваться вместе с видом(View), что действительно было бы «ужастнейшим интерфейсным кошмаром». Почему MS не сделала поддержку этого свойства? Думаю, было просто лень, здравый смысл здесь ни при чём.

Кстати, думаю в IE7 они таки добавили это css-свойство.
Илья Бирман
Меню не входит в область скроллинга обычных Windows-приложений! Откройте Ворд и посмотрите — скроллинг имеет высоту в лист бумаги, а меню находится вне этой области. То же самое в браузере — меню самого браузера находится вне прокручиваемого пространства. А я говорю о том, что в случае с position: fixed не прокручивается то, что находится внутри области прокрутки, то есть внутри самой страницы.
Andrey Nikanorov
Вообще в браузерах с юзабилити всегда жопа была. А вот модальные окна ещё там делать &mdash; это конечно совсем, хотя я помню админку bolk, чего удивляться. 
Vitaly Harisov
Я не понимаю, что вы называете словом «тень». У вас в результате получится бокс шириной 32 % + 20px и сдвинутый влево на 10px. Безо 
всякой тени. Может, на примере покажите, что вы имеете в виду?
Ок, забыли про тень. Мне надо просто получить бокс шириной 32 % + 20px и сдвинутый влево на 10px. Я его получаю: http://vitaly.harisov.name/example/standard-box-model.html В Quirks Mode это сделать невозможно.

Тень делается дополнительными 8-ю элементами (+ картинками, конечно) внутри этого бокса. Это если без полупрозрачности. Если с ней, то всё много сложнее.
Илья Бирман
Вы оправдываете извращенскую модель путём извращенского же её использования. У вас нарисован ящик размером 32% + 20px (при этом на нём написано «This block is 32% wide», что не соответствует действительности).

Вы можете привести real-world example, когда вам нужен ящик именно такого размера, выраженного суммой процентов и пикселей? Ширина окна составляет 100%. Вы не сможете разделить экран ни на какое количество боксов, размер которых выражен таким образом.

Вы не понимаете также, чем padding отличается от margin и используете первое для целей, для которых предназначено второе.
BOLK
Хорошо. WYSIWYG -> вставка изображений.
BOLK
Andrey Nikanorov, откуда вы можете помнить «мою админку» и о чём вообще речь идёт?
Vitaly Harisov
Вы оправдываете извращенскую модель путём извращенского же её использования. У вас нарисован ящик размером 32 % + 20px (при этом
на нём написано «This block is 32 % wide», что не соответствует
действительности).
Внутренний (зелёная рамка) блок у меня 32%.
Вы можете привести real-world example, когда вам нужен ящик именно такого размера, выраженного суммой процентов и пикселей? Ширина окна составляет 100 %. Вы не сможете разделить экран ни на какое количество
боксов, размер которых выражен таким образом.
Страница разделена на две части: 18% левая и 72% правая. У правой с левой стороны картинка-фон (тень), причём она выходит за пределы правой части и накладывается на левую: http://vitaly.harisov.name/example/standard-box-model.png
Вы не понимаете также, чем padding отличается от margin и используете первое для целей, для которых предназначено второе.
Я понимаю, чем padding отличается от margin. Вот margin, немного не то, не находите?
http://vitaly.harisov.name/example/standard-box-model1.html
ELV1S
Кстати, первым придумал как заставить работать position:fixed в IE далеко не Воронежский и не Шитов. Вот заметки написанные намного раньше:
Алексей Ольшанский
Единственный вопрос, который мне хотелось бы задать, уже озвучил gray:
Если у меня блок с «position: fixed» находится в левой части страницы, а всё остальное — в правой, то чем это хуже фреймов?
Илья, ответите? Первый пример, пришедший в голову: Сайт Lightbox JS v2.0.
Илья Бирман
Если бы там действительно было так, как написано, то это было бы нормально. Но там ещё сверху яркая полоска, которая входит в область прокрутки и не прокручивается.

Это вырожденный случай. Понятно, что можно исхитриться и найти нормальное применение всему. Я уже написал, что вреда от этой фичи больше, чем пользы.
Max Perechnov
Всякой вещи, если она оправдана и гармонична, есть место. Все зависит от продуманности использования и правильности реализации. Вот например на 7дней использовал трюк с фиксед, никого не смущает и никто не жалуется

Пользовательский интерфейс
Доступны три раздела
электронного учебника

Популярное