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

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

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

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

* Редактирование: Я полагаю, я в основном заинтересован в недостижимых макетах с использованием CSS2

источник

2009-04-15 wheresrhys

Я не думаю, что ваш вопрос достаточно ясен, вы вообще спрашиваете, что нельзя сделать с помощью CSS или что можно сделать с помощью таблиц, но не CSS? (в случае последнего, пожалуйста, прочитайте мой ответ!) – roryf

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

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

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

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

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

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

источник

2009-04-15 09:29:35 User

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

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

Кроме того, я согласен с точкой изобретательности, и это правда, что a) CSS2, особенно с кросс-браузерными проблемами, требует слишком многого. б) кажется, что гораздо меньше традиций комментирования CSS, чем другие файлы кода. – wheresrhys

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

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

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

источник

2009-04-15 08:35:04

Можно сделать с помощью CSS 3-селекторов: http://www.w3.org/TR/css3-selectors/#nth-child-pseudo – Greg

Это что-то, что можно сделать автоматически, используя только таблицы? Или Javascript и вручную - это единственный способ сделать это? –

Я добавил еще кое-что. Это css3-файл хорош. Не могу дождаться, когда это произойдет. –

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

источник

2009-04-15 08:37:23 Warrior

-3

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

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

источник

2009-04-15 08:43:33 roryf

Ваш ответ бесполезен, не обращаясь к другим ответам, которые описывают встречные примеры. – 2009-04-15 08:54:12

Этот ответ должен быть услышан от человека, который не пытался создать сложный профессиональный дизайн для корпоративных сайтов. CSS просто остается. – User

@Mastermind Я профессионал. Я создал несколько крупных сайтов, используя полностью CSS. Что такое «корпоративный» сайт, я понятия не имею. Когда-нибудь вы узнаете. – roryf

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

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

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

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

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

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

Если вы хотите относительно простой пример этой проверки Can you do this HTML layout without using tables?. Это концептуально простая проблема с макетами, которая тривиальна для таблиц, и никто еще не опубликовал решение, отвечающее требованиям с чистым CSS.

источник

2009-04-15 08:46:46 cletus

+1 для вертикального центрирования. так раздражает! –

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

Я не согласен. Аргумент сделан, «таблицы предназначены для содержимого без макета». К сожалению, недостатки как в CSS, так и в его поддержке в браузерах не делают этого вполне справедливым, поэтому предпочитают CSS для макета, но не тяните ваши волосы, пытаясь избежать использования таблицы, если все это становится слишком тяжелым. – cletus

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

источник

2009-04-15 08:46:59

Это таблица стилей. Для этого нужен HTML. Также вы можете добавить контент http://www.w3schools.com/Css/pr_gen_content.asp –

Технически вы можете использовать: после псевдоэлемента, чтобы вставить изображение или текст. Вы не меняете дерево DOM, но оно действует так, как вы. Пожалуйста, поправьте меня, если я ошибаюсь. –

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

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

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

источник

2009-04-15 08:48:02

+1 О единственном примере, в котором действительно есть таблицы, что CSS нет. Конечно, CSS3 меняет то, что ... – roryf

в зависимости от стиля ваших ящиков это может быть достигнуто с помощью очищающего div и метода искусственных колонок ... Я думаю, – wheresrhys

да, но не любое количество столбцов или стилей, таких как таблицы делай легко. –

«... когда на самом деле это может быть сделано с немного изобретательности.»

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

;)

источник

2009-04-15 08:51:36 izb

Я не верю в то, что вы заставляете себя забавно, но если бы я нажал кнопку «Сделал меня хихиканье», я бы нажал на нее – wheresrhys

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

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

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

На данный момент, хотя в современных браузерах CSS-таблица, такая как макеты, может быть выполнена, но сложна. есть методы, чтобы обойти многие проблемы, погода они сделаны, хотя global wrappers с фоновыми изображениями, или positioning fixes ... где обе статьи также ссылаются на использование Javascript для постепенного улучшения страницы, чтобы получить эти дополнительные классы, которые могут потребоваться.

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

источник

2009-04-15 09:18:37 nickmorss

Да, но таблицы сложнее смотреть вправо, а в конце дня это решающий фактор в HTML. – CurtainDog

ZenGarden в конечном счете примитивен. Любой более или менее сложный дизайн потребует перестановки всех ваших div и, следовательно, таблицы стилей. – User

, но принцип, лежащий в основе ZenGraden и разметки CSS, заключается в том, что они абстрактны, перетаскивание divs не требуется, если вы считаете, что вы соглашаетесь с тем, что вы относитесь к вещам и относительным образом, например, перемещаете навигацию снизу HTML в верхнюю часть рендеринг для SEO/доступность – nickmorss

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

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

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

источник

2009-04-15 11:50:03 SolidSmile

вертикальное выравнивание для блоков не может быть выполнено с линейной высотой - поверьте, я пробовал, и если вы просмотрите другие вопросы по стеку переполнение есть много других людей, которые пробовали и терпели неудачу. CSS3 будет чертовски круто, когда он будет широко поддержан! – wheresrhys

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

источник

2009-04-15 12:14:39

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

ответ

Смежные вопросы