О фиксированном позиционировании в CSS
Верстальщики недолюбливают компанию «Микрософт» за жуткую глючность и непоследовательность IE в разборе и отображении CSS. Но есть две вещи, которые компания «Микрософт» сделала правильнее, чем все остальные.
- Компания «Микрософт» забила на идиотский стандарт, согласно которому шириной бокса является ширина его содержимого, а не ширина самого бокса, и предпочла использовать здравый смысл. Когда стандартизаторы поняли, какую ахинею они придумали, они добавили свойство box-sizing, и поэтому теперь мы имеем возможность верстать страницы нормально под всеми браузерами.
- Компания «Микрософт» не реализовала поддержку идиотского значения атрибута position: fixed. Благодаря этому такого извращения нет почти ни на каких сайтах.
В «Техногрете» появилась статья Андрея Шитова, где он рассказывает о способе заставить position: fixed работать в IE. Несколько раньше на сайте Ромы Воронежского появился этот ужас «в действии».
Это совершеннейший интерфейсный кошмар, заставляющий прокрутку в браузере работать не так, как она работает во всех остальных приложениях в мире. Когда менюшка расположена в верхней части экрана, тебе кажется, что ты находишься и в самой верхней точке прокрутки — но на самом деле можно крутить ещё и ещё. Часть страницы сверху уже «упёрлась» в край, а у части начало было явно где-то выше, потому, что строки торчат из-за верней границы. К этому невозможно привыкнуть, и это не укладывается в голове нормального человека — как теория об искривлённости пространства.
Если очень-очень надо, чтобы крутилась только часть страницы, то скроллинг должен быть именно вокруг этой части. Это делается фреймами или дивом, у которого overflow: scroll. У всего этого есть ещё целая куча недостатков, про которые можно рассказывать часами (хотя бы то, что скролбар, не упёртый в правый угол, имеет маленькую ширину, и в него приходиться целиться).
Давно известно, что техническая возможность что-либо сделать не может являться поводом это делать. Не нужно разукрашивать скролбар в разные цвета, не нужно делать бегущую строку тегом
Илья, если ты знаешь один способ использования какой-то вещи, это ведь не значит, что это плохо?
мы, например, используем position:fixed в модальных окнах нашей CMS — они не должны никуда прокручиваться, если в браузере есть scroll bar.
Женя, если дважды два четыре, это ведь не значит, что Москва — столица России? Нет, не значит. Но Москва, тем не менее, столица России.
Кажется, вывод о том, что это плохо, я делал вовсе не из того, что я знаю один способ использования. Более того, я нигде не утверждал, что знаю один способ использования. В общем-то любую, сколь угодно плохую технологию можно использовать как-нибудь по-хорошему.
Очень сомневаюсь, что в IE6 и раньше pos:fixed не работает только потому, что это «совершеннейший интерфейсный кошмар». Вы же понимаете, что даже свойством border можно испохабить интерфейс сайта, не отменять же его из-за этого.
Что до border-box, MS традиционно вообразила себя «первой после Бога» и решила сыграть в W3C, а сегодня мы видим microsoft.com свёрстанный в W3C’шной блочной модели: в шапке правильный DOCTYPE, а в CSS zoom’ы, zoom’ы...
Подумайте — сколько нервов было попорчено верстальщиками только потому, что у MS свой взгляд на вещи.
Я нигде не писал, что «в IE6 и раньше pos:fixed не работает только потому, что это „совершеннейший интерфейсный кошмар“». Вы сами установили причинно-следственную связь.
Мне не нужно «подумать» над тем, «сколько нервов было попорчено верстальщиками», потому, что я сам с этим регулярно сталкиваюсь. Я написал про два конкретных случая, когда они сделали лучше, чем предписывал стандарт, не вдавась в подробности относительно того, что именно побудило их сделать именно так.
Почему возможность делать идиотские менюшки с помощью position: fixed означает, что поддержка такого позиционирования — плоха? По-моему, это значит только, что не надо делать идиотские менюшки. Зато когда действительно нужно что-нибудь зафиксировать, для MSIE приходится отдельно поплясать с бубном.
Вот, например, на xpoint.ru менюшка укладывается в голове?
На xpoint.ru точно такая же неукладывающаяся в голове менюшка, как и у Ромы Воронежского.
Возможность делать бегущую строку тегом
Мне просто кажется, что не реализовать (по любым причинам) простое и полезное свойство, которым MS прежде всего похвасталась при выходе IE7 — это совсем не «сделать лучше».
тем не менее, Илья, ты называешь этот аттрибут «идиотским», аргументация, которую я увидел — «это совершеннейший интерфейсный кошмар, заставляющий прокрутку в браузере работать не так, как она работает во всех остальных приложениях в мире», в качестве примера приводишь меню.
Проблема в том, что ты воспринимаешь браузер как приложение, а не как среду.
Я воспринимаю браузер как приложение, а не как среду по одной простой причине: браузер — это приложение, а не среда. И, его воспринимают так подавляющее большинство людей. И в этом нет никакой проблемы.
Проблема как раз возникает тогда, когда некоторые веб-разработчики начинают воспринимать браузер как среду — то есть не так, как остальные люди — и проектировать свой сайты исходя из такого восприятия.
Но это всё не важно.
Скроллинг в браузере с position: fixed ведёт себя не так, как в любом другом приложении и в любой другой среде. Поэтому, как ты его не воспринимай, это всё равно ужас.
И, конечно, Илья, с помощью position:fixed можно сделать минимум одну хорошую вещь — нормальные модальные окна!
Нет такого понятия как «нормальные модальные окна», ибо любое модальное окно — кошмар само по себе, независимо от способа реализации.
Если ты эмулируешь окно с помощью дива, то, помимо издевательства над прокруткой, ты создаёшь ещё 158 проблем, потому, что ты делаешь окно, которое во всех аспектах ведёт себя не так, как все остальные окна во всех приложениях и средах в мире.
«Не нужно разукрашивать скролбар в разные цвета...»
Бирман замахнулся на святое!
«(хотя бы то, что скролбар, не упёртый в правый угол, имеет маленькую ширину, и в него приходиться целиться).»
У вас ромбовидный монитор!
Полностью согласен с BOLK’ом. fixed — тоже иногда нужен. Но не в «классическом» дизайне — факт. А именно когда браузер — это среда для разработки «тонких» приложений.
И без модальности иногда тоже никуда.
Илья, ты ведь сейчас в Опере, да? Открой инструменты->настройки. Видишь модальное окно? Вот наше ведёт себя абсолютно так же. А когда я делаю CMS для меня браузер — не приложение, а среда. CMS — это веб-приложение, а не просто часть сайта.
Я знаю, что такое модальное окно. Ничего хорошего в нём нет.
Про приложение и среду я тебе уже всё написал.
Предложи альтернативу.
Илья, у тебя большой опыт создания CMS, чтобы рассуждать на эту тему.
У меня нет большого опыта.
Расскажи, в чём состоит задача. Если ты говоришь, что задача состоит в том, чтобы сделать модальное окно, то альтернативы, конечно, нет. Опиши её шире, чтобы можно было понять, чего ты добиваешься с помощью модального окна, чтобы можно было рассуждать о том, как этого добиться более удобными средствами.
Microsoft повела себя неправильно, решив за W3C что надо делать с ИХ же стандартами. В итоге мы получаем что? То, что не можем при необходимости (порой она возникает) использовать position:fixed.
Представь себе тандем из верстальщика-профи и дизайнера-не-твоего-уровня. Дизайнер сказал: «Fixed!», а верстальщик что? Он не может сказать дизайнеру: «пошёл в жопу, так нельзя делать». Всё. Макет уже утверждён…
Если в команде существует «вертикаль власти», когда решения не обсуждаются, а принимаются на уровне «пошёл в жопу», вряд ли она сделает что-то хорошее, чего тут обсуждать.
Пардон, про многое не согласен. И про среду (спорим о терминах без определений?), и про модальные окна, и про наплевательство на стандарты. По большинству пунктов не вижу смысла спорить — тут и без меня высказали альтернативные мнения.
А вот про «overflow: scroll» vs. «position: fixed» имею сказать кое-что. Если у меня блок с «position: fixed» находится в левой части страницы, а всё остальное — в правой, то чем это хуже фреймов?
Standard Box Model рулит, если блок надо окружить десятипиксельной полупрозрачной тенью и задать ему ширину 32%, чтобы он лёг по сетке.
Не понял.
!!Когда стандартизаторы поняли, какую ахинею они придумали, они добавили свойство box-sizing!!
А Microsoft, когда поняли, что лучше dura lex, чем никакого lex’а, сделали quirks mode и standards compliance mode, в котором ширина бокса считается по стандарту.
Задача: Ширина блока должна быть 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 не прокручивается то, что находится внутри области прокрутки, то есть внутри самой страницы.
Вообще в браузерах с юзабилити всегда жопа была. А вот модальные окна ещё там делать — это конечно совсем, хотя я помню админку bolk, чего удивляться.
!!Я не понимаю, что вы называете словом «тень». У вас в результате получится бокс шириной 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 и используете первое для целей, для которых предназначено второе.
Хорошо. WYSIWYG -> вставка изображений.
Andrey Nikanorov, откуда вы можете помнить «мою админку» и о чём вообще речь идёт?
!!Вы оправдываете извращенскую модель путём извращенского же её использования. У вас нарисован ящик размером 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
Кстати, первым придумал как заставить работать position:fixed в IE далеко не Воронежский и не Шитов. Вот заметки написанные намного раньше:
Единственный вопрос, который мне хотелось бы задать, уже озвучил gray:
!!Если у меня блок с «position: fixed» находится в левой части страницы, а всё остальное — в правой, то чем это хуже фреймов?!!
Илья, ответите? Первый пример, пришедший в голову: Сайт Lightbox JS v2.0.
Если бы там действительно было так, как написано, то это было бы нормально. Но там ещё сверху яркая полоска, которая входит в область прокрутки и не прокручивается.
Это вырожденный случай. Понятно, что можно исхитриться и найти нормальное применение всему. Я уже написал, что вреда от этой фичи больше, чем пользы.
Всякой вещи, если она оправдана и гармонична, есть место. Все зависит от продуманности использования и правильности реализации. Вот например на 7дней использовал трюк с фиксед, никого не смущает и никто не жалуется