Что нельзя сделать с помощью CSS

Question

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

Какие примеры вещей, которые действительно нельзя сделать?

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

* edit: я полагаю, что меня больше всего интересуют недостижимые макеты с использованием CSS2

Answer 1

Ответ на этот вопрос зависит от ряда вещей:

• Насколько обратно совместимым вам нужно быть? Включение IE6 уменьшит возможности чистого CSS; и
• Сколько вашего сайта имеет фиксированную ширину и / или фиксированную высоту. В CSS есть определенные вещи, которые становятся трудными, если не невозможными, в ситуациях с переменной шириной и / или высотой.

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

Вертикальное центрирование, которое вы упомянули. Это тривиально с таблицами и трудно или невозможно (в зависимости от совместимости и фиксированной или переменной высоты контейнера и элемента) в чистом CSS.

Возможно, вы также ссылаетесь на контент при наведении курсора. IE6 поддерживает только псевдоэлемент: hover для якорей. Javascript требуется для этого браузера для: поведения, похожего на наведение.

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

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

Answer 2

• Вертикальное выравнивание блоков или текста.

• Наличие эластичных контейнеров, которые растягиваются на ширину их содержимого.

• Наличие нескольких «строк» ​​с одинаковой структурой, в которых «ячейки» синхронизируются по ширине во всех строках.

• Наличие нескольких «столбцов» синхронизирует их высоту (вплоть до длины самого длинного текстового блока).

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

Проблемы с ячейками / столбцами могут быть решены с помощью CSS, если принять во внимание IE8, но пройдет много лет, пока его широкое распространение (даже IE7 за 2-3 года не достиг желаемой доли рынка).

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

Помните принцип KISS. Чем проще это сделать, тем надежнее будет работать.

Answer 3

таблицы должны использоваться для табличных данных! Мы всегда должны стараться использовать правильный HTML-код для данного содержимого, в котором можно выполнить разметку. Так что не только div (span, ul, li, dl, strong, em ... и т. Д.) Это гарантирует, что контент не только выглядит правильно, но и правильно (по причинам SEO и доступности)

Не используя таблицы, это позволяет нам преобразовывать контент из одного вида в другой без изменения HTML, см. Zen Garden

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

или, конечно, вы можете использовать некоторый XSL в качестве промежуточного программного обеспечения для форматирования при обработке из CMS.

Answer 4

"... когда на самом деле это можно сделать с небольшим количеством изобретательности. "

Как насчет «избегать необходимости изобретательности» как вещи, которую трудно сделать в CSS.

;)

Answer 5

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

 ---   ---   --- 
|AAA| |BBB| |CCC|
 ---   ---   --- 
 ---   ---   --- 
|AAA| |BBB| |CCC|
|   | |BBB| |   |
 ---   ---   --- 
 ---   ---   ---
|AAA| |BBB| |CCC|
 ---   ---   ---

Answer 6

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

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

Обработка вдов. Вдова - это слово, которое свисает с конца абзаца, то есть одно слово начинается с последней строки в абзаце. Это большой нон в дизайне печати, но в мире Интернета это трудно контролировать.

Answer 7

Мне не удалось использовать прозрачность для создания текстовой области переменной высоты на всех страницах. Я считаю, что это невозможно. В конце концов я просто написал быструю функцию JavaScript, чтобы сбросить высоту после загрузки страницы, чтобы заставить работать макет. См. http://peterchristopher.com, чтобы понять, что я подразумеваю под прозрачностью для текстовой области.

Answer 8

Рори, я думаю, ты абсолютно прав. Вертикальное выравнивание можно выполнить с помощью line-height, и создание макетов в CSS на самом деле не так сложно. На самом деле, он гораздо более гибок при использовании абсолютного / относительного позиционирования и плавающих элементов.

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

Продолжая тему, с появлением CSS3 трудно думать о вещах, которые CSS не может сделать. Манипулирование изображениями, манипулирование контентом, расширенные селекторы - все это станет возможным. Но если бы мне пришлось назвать одну вещь, это то, что с помощью CSS вы не можете (и не сможете) вращать элементов.

Answer 9

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

Answer 10

Таблицы абсолютно ничего не могут сделать, чего не может CSS.

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