@Masroor18 авг 2012 в 14:42

Сетки без заморочек

4 мин

80K

Веб-разработка *

Перевод

+41

Комментарии 66

@AnGr 18 авг 2012 в 14:59

Приятное решение под современные браузеры.
Опера не учтена, так как ее процент на рынке США ничтожен.

Но что-то меня все равно смущает…

@AnGr 18 авг 2012 в 15:03

Даже нашла что смущает!!!

:last-of-type — поддержка начинается с ИЕ9. Как, простите, это отлично работает в ИЕ8? 0_о

@Masroor 18 авг 2012 в 15:49

Спасибо за замечание. Добавил решение для IE8.

@VolCh 18 авг 2012 в 15:38

Ну когда же CSS разовьётся настолько, чтобы в HTML коде не нужны были обёртки, да и вообще какие-то ссылки на вёрстку типа class=«col-2-3»? Вопрос риторический…

НЛО прилетело и опубликовало эту надпись здесь

@VolCh 18 авг 2012 в 17:28

Не испытывал нужды :) Вот раскладка и скругленные уголки — это да.
Спасибо за инфу о CR — как-то пропустил.

НЛО прилетело и опубликовало эту надпись здесь

@cuhuak 18 авг 2012 в 16:43

Можно пойти дальше и извратиться — уместить сетку в твит:

[class*=_]{float:left;box-sizing:border-box}._{width:100%}._1{width:16.67%}._2{width:33.33%}._3{width:50%}._4{width:66.67%}._5{width:83.33%}

Пример использования.

@webmix 18 авг 2012 в 17:30

класс! :)

@AndreyNagih 18 авг 2012 в 16:53

One Line CSS Grid

.oh,.ot,.tt{float:left;padding:0 2% 2% 0;width:48%}.ot{width:31%}.tt{width:65%}.cl{clear:both}

@vanxant 18 авг 2012 в 18:36

Очередная попытка применить плавающие элементы (float) для сеточной верстки. Да, дельфинов можно научить ползать по песку, но зачем? Так и с плавающими элементами — вместо того, чтобы заставлять их плавать по песку одинаково в разных браузерах, лучше использовать предназначенные для этого таблицы.
В итоге — статья ни о чём. Чисто поездить по мозгам начинающим html-верстальщикам. Потом эту дурь из них фиг выбьешь.
Единственный правильный способ верстки многоколоночных макетов — это сетка, она же таблица.
Пока массово не внедрили grid-верстку из CSS3, единственным правильным способом нормальной html-верстки таких остаются html-таблицы (<table>). Да, это несемантично, зато работает именно так, как нужно, во всех браузерах без каких-либо шаманств. Господа инженеры, оставьте семантику гуманитариям! Ваша задача — сделать так, чтобы работало! Плавающие элементы — они для плавающих элементов.

НЛО прилетело и опубликовало эту надпись здесь

@vanxant 18 авг 2012 в 19:22

Реальное требование — это попиксельная верстка, потому что иначе извращения дизайнера разваливаются.
Гуманитарные 66% и 33% это НЕ попиксельная верстка.
Даже если вы сделаете 66.66666 и 33.3333% — это всё равно НЕ попиксельная верстка. Возьмите любой браузер, особенно ИЕ, и подёргайте за правый нижний угол, изменяя размеры окна. Ну надо же, плавающие элементы начнут плавать! ВНЕЗАПНО!
Google
Yandex
Facebook
Twitter
ВКонтакте
ЖЖ
Amazon
Озон
EBay
все эти сайты ВНЕЗАПНО так или иначе используют <table> для верстки, а не для семантики.
Потому что их делали инженеры, а не гуманитарии с их width: 66%

НЛО прилетело и опубликовало эту надпись здесь

@vanxant 18 авг 2012 в 22:10

Да-да, расскажите про нереальность попиксельной верстки маркетологам, которые наняли крутых дизайнеров :)
PS. Если вы вдруг не в теме, «крутые дизайнеры» на фриланс-биржах зарабатывают в 5-10 раз больше «крутых программистов». Соответственно, сменить программиста или верстальщика, который начинает что-то бормотать про несемантичность, в 5-10 раз дешевле, чем сменить дизайнера, который к тому же согласовал дизайн с биг-боссами.

НЛО прилетело и опубликовало эту надпись здесь

@vanxant 18 авг 2012 в 22:28

Попиксельная верстка — это картинка в браузере биг-босса. Она либо есть, либо нет. И заранее неизвестно, будет ли она на ведроиде, ыпаде или fullHD мониторе.

НЛО прилетело и опубликовало эту надпись здесь

@vanxant 18 авг 2012 в 22:25

Типа того. А вы попробуйте!

НЛО прилетело и опубликовало эту надпись здесь

@vanxant 18 авг 2012 в 23:14

Ссылочку, где попробовать, можно?

Пожалуйста

НЛО прилетело и опубликовало эту надпись здесь

@IDVsbruck 19 авг 2012 в 02:35

Или лыжи не едут, или…
Открыл только гугл и фейсбук… и где там таблицы? — Все сделано исключительно на дивах.

НЛО прилетело и опубликовало эту надпись здесь

@feedbee 18 авг 2012 в 19:04

А как же Responsive Design? Если на таблице такое и возможно сделать, то явно гораздо сложнее, чем на автономных блоках.

Вообще, я тоже сторонник таблиц там, где данные табличные. Но сетка — это все-таки никак не табличные данные. Так что применение таблиц в данном случае с точки зрения «подходит/не подходит» ничем не лучше, чем плавающих элементов.

@vanxant 18 авг 2012 в 19:51

Назовите хоть один действительно популярный сайт, ну скажем Aleksa Rank < 1 000 000, который использует новомодный Responsive Design?

НЛО прилетело и опубликовало эту надпись здесь

@vanxant 18 авг 2012 в 21:09

В только чего ж оно таблицами-то сверстано?

НЛО прилетело и опубликовало эту надпись здесь

@vanxant 18 авг 2012 в 21:15

А может это не дизайну 10 лет, а просто семантика << работоспособности в любых браузерах?

НЛО прилетело и опубликовало эту надпись здесь

@pvasili 18 авг 2012 в 20:45

Во первых: не новомодный, ему уже > 2 лет.

Во вторых: для сайтов в < 1 000 000 довольно сложно (а главное дорого) сделать редизайн и перенести всё накопленное содержимое в новые реали быстро и сразу.

В третьих: совсем немного примеров (что вспомнилось, остальное погуглите сами): iso.org. bostonglobe.com (подразделение The New York Times Company), smashingmagazine.com, starbucks.com…

Вы и в четвёртых (последнее но главное): ВНЕЗАПНО! — ни один из приведённых вами сайтов не использует таблицы для вёрстки !, а использует таблицы для вывода в них табличных данных.
Если лично вы до сих пор вы верстаете на уровне каменного века таблицами — не навязывайте свои заблуждения другим.

@vanxant 18 авг 2012 в 21:13

Ну прежде чем что-то утверждать, вы откройте html-исходник того же yandex.ru, да?

@vanxant 18 авг 2012 в 22:17

Но нет, зачем, какая разница, как именно сверстана поисковая строка Яндекса! Главное — вера в Бога Семантики!

НЛО прилетело и опубликовало эту надпись здесь

@ChemAli 18 авг 2012 в 19:43

А разве задача машинного чтения, ИИ, не связана с семантикой? Эти области тоже оставим гуманитариям?

@vanxant 18 авг 2012 в 19:50

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

@pepelsbey 18 авг 2012 в 20:33

> лучше использовать предназначенные для этого таблицы

Таблицы предназначены для вывода табличных данных. Шапка-содержимое-подвал — это не табличные данные. Не смешите людей своими выводами.

@vanxant 18 авг 2012 в 21:13

В идеале — да, с этим никто и не спорит.
К сожалению, сеточную верстку придумали веке этак в XXVII-ом, а вот grid-layout в CSS до сих пор утверждают.
И пока этот самый grid-layout не станет для браузеров стандартом де-факто, HTML-таблицы останутся представлением по умолчанию для сеточной верстки в вебе. Нравится это семантистам-гуманитариям или нет.
Использовать плавающие элементы для сетки — это ересь и мракобесие. Оно совсем для другого предназанчено, вроде обтекания текстом картинки.

@VolCh 18 авг 2012 в 21:16

Использовать плавающие элементы для сетки — это ересь и мракобесие.

Равно как и использовать table для сетки.

@vanxant 18 авг 2012 в 21:16

Пока нет массовой поддержки grid-layout, альтернатив table нету.

@VolCh 18 авг 2012 в 21:21

Альтернатив полно, все они сходятся в одном — использование элементов или их стилей не по назначению.

@vanxant 18 авг 2012 в 23:18

Да, давайте использовать несаментичные элеметны HTML+CSS (те же float), чтобы не использовать несематничные элементы вроде <table>!!!!

НЛО прилетело и опубликовало эту надпись здесь

@pepelsbey 18 авг 2012 в 21:18

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

Не верите? Проверьте: доклад Василия Аксёнова «Сетки для всего» с РИТа. СКБ Контур — не последняя контора на российском рынке.

@pepelsbey 18 авг 2012 в 21:21

назначения элемента <table>, чёртов парсер

@vanxant 18 авг 2012 в 21:39

Ну вот в этом и состоит отличие гуманитария от инженера.
Гуманитарий ссылается на то, что где-то там написано некоторым другим признанным гуманитарием.
Инженеру важно только то, как оно работает на практике.
Проблема в том, что, в отличие от инженеров, гуманитарии умеют писать зажигательные тексты про то, как оно должно быть в идеальном мире. У многих инженеров тоже хватило бы на это мозгов, но увы — они сталкиваются с бесконечным списком «но» и «если», и их статьи становятся слишком скучными для гуманитариев.

@pepelsbey 18 авг 2012 в 21:43

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

Я-то глупый попытался показать вам успешный опыт, но вы же инженер! Голыми руками, без говна! (Хотя зачем-то сами ссылаетесь на опыт Alexa-100)

@vanxant 18 авг 2012 в 21:45

Спасибо за попытку что-то мне показать, но успешный опыт — тут.

@pepelsbey 18 авг 2012 в 21:57

Слезли бы с таблиц, глядишь — научились бы чему-нибудь новому.

@vanxant 18 авг 2012 в 23:20

Чему, например? Написанию 50 строк кода CSS там, где не нужно и 10?

НЛО прилетело и опубликовало эту надпись здесь

@vanxant 18 авг 2012 в 22:31

Сорри, век конечно был XVII, а не XXVII :)

@ilyautkin 18 авг 2012 в 22:10

При верстке таблицами сложно работать с функционалом сайта — блоки могут появляться и исчезать (не только при переходе по страницам, но и при обновлении данных Ajax'ом). Если убрать какую-то ячейку из таблицы, придется переписывать значения rowspan и collspan.

Однако я тоже не очень дружелюбно отношусь к верстке плавающими блоками — стараюсь использовать где возможно inline-block

@vanxant 18 авг 2012 в 22:13

ЭЭЭ зачем обновлять rowspan и colspan? Типичный макет «шапка — три колонки — подвал» состоит из трех строк и трех столбцов. Что там у них внутре — вообще неважно и никак не влияет на внешнюю таблицу.

@ilyautkin 18 авг 2012 в 22:26

Вот именно, что это типичный макет. А как насчет макета «Шапка — контент — три блока в одну строку — футер»?

И как быть с таким:

@vanxant 18 авг 2012 в 22:30

И в чём проблема, если мы берем bootstrap и присваиваем соответствующие классы последовательным таблицам?

@ilyautkin 18 авг 2012 в 22:42

Делать три независящих друг от друга таблицы?

@vanxant 18 авг 2012 в 22:53

… и какая религия это запрещает?

@ilyautkin 18 авг 2012 в 22:20

Мне одному кажется, что вместо

  <div class="col-2-3">
     Main Content
  </div>
  <div class="col-1-3">
     Sidebar
  </div>

[class*='col-'] {...}
.col-2-3 {...}
.col-1-3 {...}

Лучше использовать

  <div class="col 2-3">
     Main Content
  </div>
  <div class="col 1-3">
     Sidebar
  </div>

.col {...}
.col.2-3 {...}
.col.1-3 {...}

а вместо padding использовать margin, ведь padding — это внутренние отступы, а для отступов между элементами предназначен именно маргин?

@Masroor 19 авг 2012 в 08:25

Можно и так. В вашем случае вы выделяете отдельный класс для всех колонок, а в статье для этого используются селекторы:
[class*='col-'] {...}
Тут наверное дело в привычке и целесообразности введения нового класса.

В статье паддинги используются для эмуляции отступов. А вот маргины вместо паддингов тут использовать нельзя. У нас же колонки резиновые, а отступы фиксированные. Если мы сделаем маргины, то придется уменьшать колонки примерно как-то так:
width: 66.6%-10px;
Но CSS пока так не может.

По-моему, отступы между колонок лучше делать через «модули». У колонок мы убираем паддинги, а модулям назначаем маргины: