Есть ли деловая причина стремиться к чистому макету CSS?

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

Мой вопрос:

Кто эти несколько столов собирается повредить?

Таблицы, кажется, особенно хорошо работают с табличными данными - почему они так оскорблены в наше время?

У Google.com есть таблица в исходном коде, как и у многих других сайтов ( кстати, stackoverflow.com нет ).

30 css
7.08.2008 21:14:25
Stackoverflow имеет таблицы в определенной части (по состоянию на декабрь 2008 г.), например, на странице пользователя.
alex 2.12.2008 00:34:54
KMån 26.03.2011 18:57:07
21 ОТВЕТ

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Кроме того, для страшных проблем IE6 CSS, вы можете использовать этот хак:

.someClass {
    background-color:black; /*this is for most browsers*/
    _background-color:white; /*this is for IE6 only - all others will ignore it*/
}
7
7.08.2008 21:32:15
Я бы действительно рекомендовал использовать условные комментарии IE вместо CSS-хаков / фильтров для поддержки IE. Он поддерживается и поддерживает ваш основной CSS в чистоте. Большинство тяжеловесов CSS теперь рекомендуют использовать хаки. Пример:<link href="Style/main.css" rel="stylesheet" type="text/css" /> <!--[if lte IE 6]> <link type="text/css" href="Style/main-ie6.css" rel="stylesheet" /> <![endif]-->
Jon Galloway 7.08.2008 22:31:13
@JonGalloway Согласен. Однако иногда просто реализовать CSS-хак, особенно, если вы хотите сделать это только для одного или двух элементов.
Seibar 7.08.2008 23:29:46

Как и многие вещи, это хорошая идея, которая часто заходит слишком далеко. Мне нравится макет, управляемый div + css, потому что обычно довольно легко изменить внешний вид, даже радикально, просто с помощью таблицы стилей. Также приятно быть дружелюбным к браузерам более низкого уровня, программам для чтения с экрана и т. Д. Но, как и большинство решений в программировании, при принятии решения следует учитывать цель сайта и стоимость разработки. Ни одна из сторон не является правильным способом идти 100% времени.

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

17
7.08.2008 21:20:11

Бизнес-причина для CSS-макета: вы можете удивить клиентов, сказав, что «наш портал полностью настраиваемый / скиновый без написания кода!»

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

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

1
7.08.2008 21:22:25

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

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

Тем не менее, как разработчик, я отказался от CSS Layout в основном потому, что мой дизайн все равно не работает, так что, по крайней мере, он может сосать правильно :-) Но если бы я когда-нибудь нанял дизайнера, я бы позволил ему использовать то, что выплевывает его редактор WYSIWYG.

4
7.08.2008 21:23:55

Храните свой макет и ваш контент отдельно, что позволяет легко изменять дизайн или вносить изменения в ваш сайт. Это может занять немного больше времени, но самой длительной фазой разработки программного обеспечения является обслуживание . Css friendly сайт с четким разделением контента и дизайна лучше всего подходит для технического обслуживания.

6
7.08.2008 21:25:07

Использование семантического HTML-дизайна - это одна из тех вещей, когда вы не знаете, чего вам не хватает, если не будете практиковаться в этом. Я работал на нескольких сайтах, где сайт был обновлен после факта, практически не влияя на код на стороне сервера.

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

И, как только вы научитесь работать с системой разметки страниц, это обычно не сложнее, чем разметка на основе таблиц.

8
7.08.2008 21:26:41

:: кивает на Палмси и Джона Галлоуэя ::

Я согласен с фактором ремонтопригодности. Мне понадобилось немного больше времени, чтобы сделать мои первоначальные макеты (так как я все еще являюсь учеником джедая в искусстве CSS), но полная модернизация 15-страничного веб-сайта путем обновления 1 файла - это рай.

0
7.08.2008 21:39:06

Некоторые дополнительные причины, почему это хорошая практика:

  • Доступность - сеть в идеале должна быть доступна всем
  • Производительность - экономьте пропускную способность и ускоряйте загрузку на мобильных устройствах (им в некоторой степени не хватает пропускной способности и они не могут быстро составлять сложные таблицы). Помимо быстрой загрузки всегда хорошо ...
0
7.08.2008 22:09:54

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

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

Когда программа чтения с экрана читает страницу и видит таблицу, она сообщает пользователю, что это таблица. Следовательно, если вы используете таблицу для разметки, она становится очень запутанной, потому что пользователь не знает, что содержимое таблицы на самом деле является статьей, а не некоторыми другими табличными данными. Меню должно быть списком или набором элементов div, а не таблицей с элементами меню, опять же, это сбивает с толку. Вы должны убедиться, что вы используете блочные кавычки, атрибуты заголовка alt-tags и т. Д., Чтобы сделать его более читабельным.

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

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

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

Ура!

[РЕДАКТИРОВАТЬ - добавлены зачеркивание в неправильные или вводящие в заблуждение части этого ответа - см. Комментарии]

6
4.12.2008 08:42:07
Ты говоришь полный бред, старый боб. «Пользователи, использующие программы чтения с экрана, будут иметь свою собственную высококонтрастную таблицу стилей с большим шрифтом (если ваш сайт не предоставляет ее самостоятельно), которая упрощает анализаторам страницы возможность просмотра страниц». Это неправда ни в каком отношении.
Polsonby 4.12.2008 08:38:28
Это тоже неправильно. «Когда программа чтения с экрана читает страницу и видит таблицу, она сообщает пользователю, что это таблица ... пользователь не знает, что содержимое таблицы на самом деле является статьей, а не некоторыми другими табличными данными».
Polsonby 4.12.2008 08:40:04
Программы чтения с экрана обычно игнорируют таблицы макетов и сообщают пользователю только о таблицах данных. Вы когда-нибудь использовали JAWS или Window-Eyes?
Polsonby 4.12.2008 08:41:03

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

DIVs плюс CSS! = Семантические, либо. Хороший HTML полезен для SEO и доступности всегда, независимо от того, используются ли таблицы или CSS для верстки. Вы получаете действительно эффективный и быстрый веб-дизайн, комбинируя действительно простые таблицы с хорошим CSS.

Макеты таблиц могут быть более доступными, чем макеты CSS, и наоборот также верно - это ПОЛНОСТЬЮ зависит от исходного порядка контента, и только то, что вы избегаете таблиц, не означает, что пользователи с программами чтения с экрана автоматически будут хорошо проводить время на вашем сайте. , Таблицы макетов не имеют отношения к доступу чтения с экрана, если содержимое имеет смысл при линеаризации, точно так же, как если бы вы делали макет CSS. Таблицы данных разные; их действительно трудно правильно разметить, и даже в этом случае пользователи программного обеспечения для чтения с экрана обычно не знают команд, которые им нужны для понимания данных.

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

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

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

9
7.08.2008 22:25:25

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

Это на самом деле не правда; программы чтения с экрана, такие как JAWS, Window Eyes и HAL, игнорируют таблицы разметки. Они очень хорошо работают в реальной сети.

0
7.08.2008 22:28:52

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

В дополнение к обычному определению таблицы стилей вы можете добавить следующий тег

<link rel="stylesheet" type="text/css" media="print" href="PrintStyle.css" />

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

6
7.08.2008 22:29:08

полное обновление веб-сайта на 15 страниц путем обновления 1 файла - это рай.

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

CSS - это обоюдоострый меч на таких больших сайтах, как наш.

6
7.08.2008 22:31:17

Если у вас есть общедоступный веб-сайт, то реальный бизнес-пример - это SEO.

Доступность является важной и поддержанием семантического (X) HTML является гораздо проще , чем сохранение макетов таблиц, но # 1 место на Google принесет домой бекон.

Например: Ежемесячный веб-отчет: 127 миллионов просмотров страниц за июль

Ежемесячный веб-отчет: 127 миллионов просмотров страниц за июль

...

Latimes.com продолжает совершенствоваться в SEO (поисковая оптимизация), что означает, что наши истории занимают более высокие позиции в Google и других поисковых системах. Мы также работаем лучше на таких сайтах, как Digg.com. Все это дает больше информации и больше читателей, чем когда-либо прежде.

Если вы посмотрите на их сайт, у них будет довольно приличный макет CSS.

В целом, в наши дни вы найдете относительно мало таблиц, которые хорошо работают в поисковой выдаче.

7
27.01.2013 13:03:59

Я не думаю, что есть деловая причина вообще. Техническая причина, может быть, даже и так, едва ли - это огромный тайм-аут во всем мире, а потом вы смотрите на это в IE, ломаетесь и плачете.

0
8.08.2008 00:25:46

* Я бы позволил ему использовать то, что выплевывает его WYSIWYG-редактор.
Я просто выплюнул немного ...
* аа, привет? Вы не думаете, что графический дизайнер пишет CSS вручную?

Как ни странно , я работал с несколькими дизайнерами и лучшими среди них делать ручную настройку их CSS. Парень, о котором я думаю, на самом деле выполняет все свои дизайнерские работы в виде файла XHTML с парой CSS-файлов и создает графические элементы на лету, когда они им нужны. Он использует Dreamweaver, но только в качестве навигационного инструмента. (Я многому научился у этого парня)

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

1
8.08.2008 06:02:32

Поскольку это переполнение стека , я дам вам ответ моего программиста

семантика 101

Сначала взгляните на этот код и подумайте, что здесь не так ...

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

Проблема, конечно, в том, что велосипед - это не машина. Класс автомобиля - неподходящий класс для экземпляра велосипеда. Код не содержит ошибок, но семантически неверен. Это плохо отражается на программисте.

семантика 102

Теперь примените это к разметке документа. Если ваш документ должен представлять табличные данные, то соответствующий тег будет <table>. Однако, если вы поместите навигацию в таблицу, вы неправильно используете назначение <table>элемента. Во втором случае вы не представляете табличные данные - вы (не) используете <table>элемент для достижения цели презентации.

заключение

Кому это больно? Ни один. Никто. Кому выгодно, если вы используете семантическую разметку? Вы - и ваша профессиональная репутация. Теперь иди и делай правильные вещи.

27
16.09.2008 18:31:32

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

У него даже есть куча встроенных стилей ...

0
16.10.2008 01:39:44

Помимо того, что легко обновляется и соответствует ...

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

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

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

Кроме того, обязательно вставьте / включите все повторно используемые части вашего сайта: верхний, нижний и нижний колонтитулы.

Как только вы преодолеете горб, оттуда все будет вниз. Удачи!

1
16.10.2008 12:20:16

Основной причиной, по которой мы изменили наши веб-страницы на макет на основе DIV / CSS, была задержка рендеринга страниц на основе таблиц.

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

Основным недостатком реализации на основе таблиц является то, что браузер будет отображать содержимое таблицы только после того, как он загрузит весь HTML-код для этой таблицы. Проблема исчезнет, ​​когда у нас будет основная таблица, которая обернет все содержимое страницы, и когда у нас будет много вложенных таблиц. Для «гибких таблиц» (без фиксированной ширины) после загрузки тега всей таблицы браузер должен проанализировать до последней строки таблицы, чтобы определить ширину каждого столбца, а затем снова проанализировать ее для отображения содержимого. , Пока все это происходит, пользователи должны смотреть на пустой экран, тогда все будет отображаться в виде галочки.

7
16.10.2008 13:16:56

Там определенно есть. Если вы все еще стремитесь к этому, вы не понимаете это правильно.

Макет DIV + CSS на самом деле намного проще, чем макет таблицы, с точки зрения удобства обслуживания и производительности. Просто продолжайте практиковать это, пока еще не слишком рано говорить это.

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

0
27.12.2008 12:34:41