Абсолютно все позиционирование на сайте?

Question

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

Я не согласен с его мнением, что абсолютное позиционирование было бы средством и лучшим подходом к размещению веб-страницы.

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

Какой общий консенсус по этому поводу?

Answer 1

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

По моему опыту, страницы обычно выглядят лучше, когда вы планируете немного адаптировать свою страницу к разным устройствам, в отличие от попыток использовать макеты с идеальным разрешением 100%, как при печати. Это просто не природа интернета.

Редактировать: Думая об этом больше, использование всех абсолютов может действительно вернуться к вам с мобильными браузерами, если вы не будете осторожны. Что происходит, когда ваш сайт использует абсолютное позиционирование на чем-то похожем на iPhone (если вы выравниваете некоторые элементы по углам)? Позиционирование будет выровнено по углам iPhone, которые имеют нечетное соотношение (по сравнению с компьютерами) и намного меньшее разрешение; выбрасывая все из дурака. Если бы вы использовали комбинацию float / widths / etc, вы бы убедились, что сайт сохранил свой первоначальный размер, и вам просто нужно было бы прокрутить.

Answer 2

Мой общий взгляд - цель оправдывает средства.

Здесь царит прагматизм. Конечная цель - заставить его работать как можно быстрее в самых разных браузерах. Использовать или нет абсолютное позиционирование, использовать таблицы или нет, использовать чистый CSS или нет ... все эти вопросы в лучшем случае второстепенны.

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

Я не за или против таблиц, абсолютного позиционирования или чего-то еще. Единственное, что я «за» - это то, что это работает.

Таким образом, я нахожу аргумент о «радикальном» абсолютном позиционировании - из-за отсутствия лучшего описания - не относящихся к делу отвлекающих факторов.

Со всеми этими вещами (таблицами, абсолютным позиционированием, чистым CSS и т. Д.) В большинстве случаев вы не решаете все свои проблемы, вы просто меняете один набор проблем на другой. Это может быть хорошо, потому что в контексте того, что вы делаете, может быть предпочтительнее один набор проблем, но нет волшебной палочки (будь то абсолютное позиционирование или что-то еще).

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

Answer 3

Абсолютное позиционирование, как правило, довольно плохо. В редких случаях вы хотите, чтобы ваш веб-сайт выглядел одинаково на чьем-то ноутбуке 1024x768 и полноэкранном режиме на рабочем столе 1920x1200. Кроме того, удачи в согласовании вашего абсолютного позиционирования с различными размерами пользовательских шрифтов.

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

Answer 4

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

Веб-сайты - это механизм доставки контента, который в основном носит текстовый характер. Если ваш контент основан на идеальном позиционировании пикселей, таких как анимированная графика и т. П., HTML и Javascript могут оказаться не лучшим решением для вас. Должно ли это иметь значение, если ваши абзацы на странице на один пиксель ниже в Firefox, чем в IE?

Answer 5

Хотя это может быть весьма субъективно, я не являюсь поклонником абсолютного позиционирования, так как вы должны проверить с отключенным CSS, чтобы увидеть, как ухудшается содержание браузеров, не поддерживающих CSS (таких как поиск движки, консольные текстовые браузеры и HTML-> речевые браузеры для слепых).

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

Answer 6

Использование абсолютного позиционирования всегда будет кусать вас позже. Сайт должен быть как можно больше в нормальном потоке, чтобы элементы могли располагаться относительно друг друга (расти / уменьшаться, разрушаться, когда скрыты и т. Д.).

При абсолютно позиционированном макете вам всегда потребуется настраивать макет при каждом изменении содержимого.

Я действительно использую абсолютное позиционирование только по трем причинам:

1) Я помещаю элемент поверх другого элемента, например всплывающее окно.

2) На самом деле нет хорошего способа разместить элемент там, где он должен быть в нормальном потоке

4) Элементом будут управлять динамически (javascript), и это должно происходить вне нормального потока.

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

Answer 7

Он утверждает, что лучшая практика для обеспечения того, чтобы все выглядело одинаково для большинства браузеров

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

Существуют инструменты проектирования WYSIWYG, которые делают это (и некоторые люди злоупотребляют Dreamweaver таким образом), но обычно это считается забавно плохим подходом. Чаще всего абсолютное позиционирование используется только по горизонтальной оси, чтобы сделать верхние и нижние колонтитулы фиксированной ширины, при этом текст на странице может занимать столько вертикального пространства, сколько необходимо. (Это то, что SO делает, например, среди многих других.)

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

(... если сложнее снять, естественно.)

это самый простой способ сохранить внешний вид и стиль, которые вы намеревались создать для веб-сайта.

Да! Плохой способ решения проблемы часто бывает самым простым. Но «лучшая практика»? Едва ли.

Answer 8

Используйте абсолютное позиционирование только тогда, когда вы на 100% уверены, что участвующие элементы никогда не придется масштабировать их размер и не будет перемещаться. Если вы абсолютно позиционировали некоторые элемент, а затем еще один растет они могут перекрываться, и ваш макет сломаны.

Это верно. Я только что заработал 500 баксов, исправляя сайт для какого-то парня, и учил его, что его веб-сайт с абсолютным позиционированием сломался, когда он добавил столько, сколько запятую, потому что текст будет перетекать, и все это развалится.

Answer 9

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

Answer 10

Используйте абсолютное позиционирование только тогда, когда вы на 100% уверены, что задействованные элементы никогда не будут масштабировать свой размер и не будут перемещаться. Если вы абсолютно позиционировали какой-то элемент, а другой растет, они могут перекрываться, и ваш макет нарушен. Я бы очень осторожно использовал абсолютное позиционирование и вообще совет против него. Та же самая схема почти всегда может быть достигнута с помощью плавающих элементов и / или относительного позиционирования.