CSS верстка без фиксированной ширины

Question

Я не специалист по CSS в любом случае; Я знаю это в некоторой степени, но не очень глубоко; поплавок и IE6 заставляет меня плакать. Поэтому я всегда рад видеть, что люди могут с этим сделать.

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

Но мне действительно нравится гибкая ширина. И поэтому я не понимаю, почему неправильно делать дизайн с помощью таблиц? Есть книга под названием «Все, что вы знаете о CSS, неправильно!» что объясняет, как хорошо, что теперь мы можем создавать макеты таблиц с помощью CSS в последних браузерах ... но разве мы не можем делать это все время с помощью HTML-таблиц? Да, это не CSS и, возможно, не такой чистый, как чистый CSS ... но, в конце концов, макет таблицы IS , что нам часто нужно, и если нам нужно выбирать между злым, хакерским CSS, чтобы сделать это, и простым но не достаточно чистой таблицы HTML, я не понимаю, почему любой из этих вариантов следует считать плохим. KISS - это хорошо, не правда ли?

Или, может быть, я не понимаю этого, и вы МОЖЕТЕ сделать макеты в виде таблицы в CSS - которые работают в IE6 - без особой боли в заднице? Какие-нибудь примеры таких сайтов?

ОБНОВЛЕНИЕ: Да, я знаю о разделении контента и стиля. На самом деле, я фанатичен в отношении DRY, SRP и других вещей, которые должны сделать дизайн. Вот почему я действительно пытался делать вещи в CSS; но если это НАСТОЛЬКО сложнее и ненадежнее таблиц, например, написано в книгах, подобных упомянутым выше, то зачем так стараться? Я не говорю, что все должно быть сделано в таблицах; но если это действительно проще , чем CSS - почему я должен предпочесть CSS простому и предсказуемому решению?

То есть я не говорю, что вы должны использовать таблицы всегда. Имейте в виду макет главной страницы - он независим и не влияет на другие страницы, я могу без проблем переключаться с CSS на таблицы и обратно через 20 минут (на самом деле я это уже делал) - ПОЧЕМУ я должен придерживаться CSS, даже если таблицы без вреда?

ОБНОВЛЕНИЕ: Я нашел, что это очень хорошее резюме того, что я пытался сказать: http://www.flownet.com/ron/css-rant.html. И обсуждение http://rondam.blogspot.com/2009/02/why-css-should-not-be-used-for-layout.html#comments.

Для тех, кто заинтересован, вот еще лучшая статья: http://kv5r.com/articles/dev/layouttables1.asp

Answer 1

Посмотрите на Yaml и Fluid 960gs . И то, и другое очень помогает с кросс-браузерной версткой. Макеты таблиц не являются ответом, и IE6 рано или поздно исчезнет.

Answer 2

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

Когда вы используете таблицы для разметки, обязательно используйте стили width: 100%; table-layout: fixed (и <col> со стилем width), чтобы браузеры могли правильно выложить таблицу с самого начала (что исправляет один из проблемы с удобством использования имели макеты таблиц), и, таким образом, вы не полагаетесь на довольно плохое автоматическое определение ширины в IE.

Хотя я, конечно, предпочитаю CSS для макета везде, где это возможно, и наиболее простые макеты сайтов могут быть разумно достигнуты с помощью только CSS (особенно сейчас IE5 и его Quirky Box Model больше нет), в некоторых случаях CSS не может его взломать столы могут. Распространенным случаем являются сложные формы шириной жидкости.

Самая значительная проблема - это отсутствие возможности произносить такие вещи, как width: 100%-10em, чтобы получить столбец, ширина окна просмотра которого минус фиксированный размер для другого столбца. Для простых случаев вы можете обойти это с помощью полей и div-обертки, но как только вы начнете переупорядочивать элементы на своей странице и добавляете несколько оберток просто для того, чтобы заставить работать CSS-макет, вы уже перепутали презентацию с содержание: не очень сильно отличается от таблиц.

В худшем случае вы получите глупые «CSS-фреймворки», которые требуют от вас использования вложенных и фиксированных имен классов, чтобы полностью указать макет внутри самой разметки. Это не лучше, чем таблицы вообще; Я нахожу абсолютно веселым, что этот безнадежный возврат к старым плохим временам считается модной передовой техникой Web 2.0.

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

Answer 3

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

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

Разметка должна быть семантической. То есть он должен точно описывать содержание, которое он содержит. Это делает его машиночитаемым (для SEO и других приложений). Таблицы для разметки совсем не семантические.

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

Вы правы, что у CSS есть свои недостатки. Но у таблиц есть намного больше, которые намного хуже.

Answer 4

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

Делать все в таблицах плохо по причине.

Вы должны думать об этом как об абстракции между стилем и содержанием, и вы можете получить хорошее краткое изложение здесь: http://www.alistapart.com/articles/separationdilemma/

Также в прямом ответе на ваш вопрос перейдите к «A List Apart» и найдите свои статьи. Они как бы описывают путешествие, которое вы собираетесь совершить здесь: http://www.alistapart.com/articles/journey/

почему я должен предпочесть CSS простому и предсказуемому решению?

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

Answer 5

Вот сценарий, с которым я столкнулся лично, и который мне понравится. Примечание: я не защищаю «никакой таблицы на всех», это действительно отвечает другим требованиям.

Я создал форму (визуально нисходящий поток):

Heading1
 Label1 
 Textbox1
 Label2 
 Textbox2

Heading2
 Label3 
 Dropdown3
 Label4 
 Textbox4
 Label5 
 Textbox5

Тогда заказчик хотел более структурированный трубчатый, такой как:

Heading1
Label1 Textbox1     Label2 Textbox2

Heading2
Label3 Dropdown3    Label4 Textbox4
Label5 Textbox5

Поскольку я не использую таблицу типа TR TD, я могу легко (почти) преобразовать структуру с помощью модификации CSS и незначительных изменений разметки HTML.

Answer 6

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

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

В том-то и дело, что выкладываемый вами веб-контент не является «Табличными данными» - разметка предназначена для чтения компьютерами / ботами, а стили, которые мы видим, для нас, смешивание двух просто смешивает одно или оба стороны, как правило, за дополнительную стоимость ремонтопригодности.