LINUX.ORG.RU

Почему оно такое (CSS)?


0

2

Вот начал изучать CSS layouts. И сразу возникло неприятное ощущение. Ну почему оно такое? Ведь разрабатывалось специально с конкретной целью а в итоге хак на хаке сидит и хаком погоняет. Какие идиоты это делали? Неужели нельзы было продумать такие элементарные вещи как vertical align и full length columns что бы это всё можно было делать без хаков. Это не проблема разных имплементаций а как раз таки проблема самого стандарта.

И ещё один вопрос. Имеет ли реальный смысл переводить табличный layout в CSS? Из аргументов слышал 2: css проще для гугл роботов и удобство внесения изменений. Удобства никакого не вижу, даже наоборот. Так же вызывает сомнение что гугл робот не осилит табличный layout, всё же его писали лучшие программисты учитывая как трудно попасть на работу туда.


Какие идиоты это делали?

Ответ на этот вопрос легко найти в гугле.
Но тебе пока еще рано задавать такие вопросы.

thesis ★★★★★
()
Ответ на: комментарий от tyler19

Да ещё похоже HTML поддержка более менее одинаковая у всех браузеров даже самых старых. А для CSS то и дело то это не поддерживатся там то, то то-то не стандартно реализовано в каком то браузере, в итоге плюс к хакам самого стандарта надо добавлять хаки для разных браузеров.

tyler19
() автор топика
Ответ на: комментарий от tyler19

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

drakmail ★★★★
()
Ответ на: комментарий от tyler19

Прекрати противопоставлять html и css. Твоя постановка вопроса это «стоит ли переводить структуру в стиль?», то есть, бред.

thesis ★★★★★
()

CSS создавался для документов. Так что layout дл «приложений» там никакущий.

Жди, пока допилят и прикрутят grid layout. А потом придётся ждать, пока старые браузеры отомрут. Особенно IE. Веб он такой.

anonymous
()
Ответ на: комментарий от tyler19

Да ещё похоже HTML поддержка более менее одинаковая у всех браузеров даже самых старых.

Друк, сравни поддержку HTML5 с поддержкой CSS3 и ты всё поймёшь. «HTML поддержка более менее одинаковая» это миф. Элементы форм в том же Firefox до сих пор не на уровне. Это реальность, ничего не поделаешь.

anonymous
()
Ответ на: комментарий от drakmail

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

Ужасы какие. Зато таблицы нормально ресайзятся и позволяют сделать лейаут любой сложности. А то что есть сейчас в CSS - это слёзы. В итоге имеем 90% сайтов, прибитых гвоздями попиксельно. Это как старые виндовые GUI без лейаут менеджера, которые на высоких разрешениях превращаются в тыкву. Похоже, близящееся наступление ретина-дисплеев станет кошмаром также для веб-дизайнеров и верстальщиков.

nikodymus
()
Ответ на: комментарий от nikodymus

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

CSS тоже позволяет.

А то что есть сейчас в CSS - это слёзы. В итоге имеем 90% сайтов, прибитых гвоздями попиксельно.

Это говноверстка. Никто не заставляет использовать px.

Похоже, близящееся наступление ретина-дисплеев станет кошмаром также для веб-дизайнеров и верстальщиков.

Проблемы говноверстальщиков.

metrokto ★★
()
Ответ на: комментарий от metrokto

Если язык стилей предоставляет единственный выбор: или говновёрстка — или адовые извращения, то что-то с ним не так.

quantum-troll ★★★★★
()
Ответ на: комментарий от nikodymus

Зато таблицы нормально ресайзятся и позволяют сделать лейаут любой сложности. А то что есть сейчас в CSS - это слёзы. В итоге имеем 90% сайтов, прибитых гвоздями попиксельно. Это как старые виндовые GUI без лейаут менеджера, которые на высоких разрешениях превращаются в тыкву.

С таблицами сложно делать responsive-вёрстку, а это сейчас очень актуально, ведь мобильных устройств всё больше и больше. В случае с div-ами можно легко через @media поменять их положение для определённых разрешений экрана, например сдвинув один под другой (да они и сами так могут). А вот сделать одну колонку таблицы под другой через css нельзя.

risenshnobel ★★★
()
Ответ на: комментарий от metrokto

Это говноверстка. Никто не заставляет использовать px.

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

nikodymus
()
Ответ на: комментарий от nikodymus

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

А ты как думал? :-)

Может это как то связано с графикой, которая тоже вся в пикселях?

/* #img - картинка 100px *100px */

#img
{
    image-rendering: optimizeSpeed;
    height: auto;
    width: 6.25em;
}
metrokto ★★
()
Ответ на: комментарий от metrokto

CSS тоже позволяет

Угу. Только чтобы сделать простую вещь - блок по центру экрана (форма логина) приходится использовать JS. А так позволяет, да.

Xellos ★★★★★
()

Изучи вначале, что такое нормальный поток языка HTML, чтобы не задавать подобные вопросы. Проблемы есть две:

  • Отсутствие кроссбраузерности, даже на разных версиях одного и того же браузера могут возникать отличия. Поддерживать IE берись только за деньги.
  • Отсутствие де факто гибкой верстки. Есть, конечно, величины в em, процентах, есть иконочные шрифты. Но вести это себя будет по-разному в зависимости от фаз луны.
iVS ★★★★★
()
Ответ на: комментарий от Xellos

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

Ну ты загнул, конечно. Задаешь

body {
  position: absolute;
  width: 100%;
  height: 100%;
  display: table;
}
И дальше уже внутри создаешь div
div {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
и внутри делаешь уже свой блок с display: block-inline;

Как-то так :)

iVS ★★★★★
()
Ответ на: комментарий от iVS

Стоп. Херня получилась. Он мне растянул div на весь экран. А я хочу маленький аккуратнеький блок в размер содержимого. По центру.

Xellos ★★★★★
()
Ответ на: комментарий от Xellos

А display: table; для body мне ничего не поломает?

А что оно поломает? ты создаешь таблицу в ширину и высоту экрана. коль position: absolute, то ее размер определяется и дочерними элементами. внутри таблицы строишь ячейку. Если что сложное, то делаешь столько ячеек, сколько нужно. Как видно, табличная верстка так никуда и не уходила :)

Для малых элементов всегда удобнее просто задать блок с явными height и line-height.

iVS ★★★★★
()
Ответ на: комментарий от Xellos

и внутри делаешь уже свой блок с display: block-inline;

внутри дива твой блок для логина должен быть, т.е., еще один.

iVS ★★★★★
()
Ответ на: комментарий от Xellos

div у тебя тут ячейка. Внутрь другой положи.

Deleted
()
Ответ на: комментарий от nikodymus

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

графику уже много лет можно растягивать и сжимать без видимого изменения качества.

drBatty ★★
()
Ответ на: комментарий от iVS

блок с явными height

Откуда ж я блин знаю, какая у него высота? Вообще почему-то все примеры вёрстки идут с фиксированными значениями ширины и высоты. Беда просто какая-то.

Xellos ★★★★★
()
Ответ на: комментарий от Xellos

все примеры вёрстки идут с фиксированными значениями ширины и высоты

Поскольку элементы фиксированного размера более или менее нормально рендерятся всеми браузерами
Почему оно такое (CSS)? (комментарий)

iVS ★★★★★
()
Ответ на: комментарий от iVS

Как видно, табличная верстка так никуда и не уходила

То есть получается та же таблица, только извращенным способом с непредсказуемым поведением на древних браузерах. Инновационненько.

nikodymus
()
Ответ на: комментарий от Deleted

Таблицы то как с ресайзом связаны?

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

nikodymus
()
Ответ на: комментарий от nikodymus

[facepalm.svg] Дивы и таблицы тут совершенно не при чём. Если ты не видел гвоздями прибитых дизайнотаблиц, ты плохо искал. Ругать инструмент за «дизайнерское» решение по меньшей мере странно.

Deleted
()
Ответ на: комментарий от Deleted

Во времена, когда все верстали таблицами, преобладала «резиновая» модель. Теперь почти везде фиксированная верстка, да еще по пикселям. Значит с инструментом что-то не то.

nikodymus
()

Да, ты типичный ретро-упорышь.
Парсинг regex, табличная вёрстка. Уверен, что у тебя вагон этого.
Новый машины хуже старых, смартфоны не нужны, etc.
Скорее всего ещё и совок.

anonymous
()
Ответ на: комментарий от anonymous

вы напоминаете мне местного 16-летнего директора одной зарубежной ИТ конторы,который меня послал,когда я ему объяснял что знание логики и математики для программиста важнее,чем знание имен функций...и да-я совок,презираю современных идиотов.

anonymous
()
Ответ на: комментарий от nikodymus

Да. «80 символов в строку хватит всем, вы ничего не понимаете в тексте, мы лучше знаем»!111111

Deleted
()
Ответ на: комментарий от Deleted

Ну и любовь к вырвиглазным интерфейсам, которые не имеющие понятия о вёрстке дизайнеры рисуют.

Deleted
()
Ответ на: комментарий от nikodymus

Здравый ум? В вебе? Да ладно :)

Deleted
()
Ответ на: комментарий от anonymous

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

anonymous
()
Ответ на: комментарий от Xellos

чтобы сделать простую вещь - блок по центру экрана (форма логина) приходится использовать JS

Наверное потому, что ты баран. А вот Тёме ничего не мешает сделать такой блок на ya.ru без всякого JS

anonymous
()
Ответ на: комментарий от anonymous

Наверное потому, что ты баран. А вот Тёме ничего не мешает сделать такой блок на ya.ru без всякого JS

таблицами. иди, и посмотри на

<td colspan="2"align="center">
<form action="http://yandex.ru/yandsearch"style="position:relative;z-index:1;">
<table class="b-search i-bem"onclick="return{'b-search':{}}">
<tbody>

drBatty ★★
()
Ответ на: комментарий от iVS

Только этот display: table-cell поддерживается не всеми браузерами. А вот если сделать тоже самое таблично оно будет корректно отображаться даже в самом древнем браузере.

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

tyler19
() автор топика
Ответ на: комментарий от anonymous

Новое ради нового - глупый принцип. CSS для layout'а явно не относится к полезному нововведению.

tyler19
() автор топика
Ответ на: комментарий от tyler19

Только этот display: table-cell поддерживается не всеми браузерами.

Например? Сейчас поддержка CSS2 есть везде.

Создаётся впечатление что CSS вообще не разрабатывался для layout'а

CSS вообще редкостное г**но, не представляю разработки без FF+Firebug.

iVS ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.