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

Question

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

Мой вопрос:

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

Таблицы особенно хорошо работают с табличными данными & mdash; почему они так оскорблены в этот день и век? У Google.com есть таблица в исходном коде, как и у многих других сайтов (кстати, stackoverflow.com нет).

Answer 1

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

семантика 101

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

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

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

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

семантика 102

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

заключение

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

Answer 2

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

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

Answer 3

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

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

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

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

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

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

Answer 4

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

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

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

Answer 5

Мне кажется, что 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*/
}

Answer 6

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

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

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

Answer 7

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

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

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

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

...

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

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

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

Answer 8

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

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

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

Answer 9

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

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

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

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

Answer 10

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

Пользователи, использующие программы чтения с экрана, будут склонны иметь свою собственную высококонтрастную таблицу стилей с большим шрифтом (если ваш сайт не предоставляет ее сам), которая облегчает анализаторам страницы возможность анализа страницы. 1005 * Когда программа чтения с экрана читает страницу и видит таблицу, она сообщает пользователю, что это таблица. Следовательно, если вы используете таблицу для разметки, она становится очень запутанной, потому что пользователь не знает, что содержимое таблицы на самом деле является статьей, а не некоторыми другими табличными данными. Меню должно быть списком или коллекцией Div, а не таблица с пунктами меню, опять же, это сбивает с толку. Убедитесь, что вы используете блочные кавычки, атрибуты заголовка alt-tags и т. Д., Чтобы сделать его более читабельным.

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

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

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

Ура!

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