How to become an author
Search
Write a publication
Pull to refresh

Comments 66

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

Но что-то меня все равно смущает…
Total votes 2: ↑2 and ↓0+2
Даже нашла что смущает!!!

:last-of-type — поддержка начинается с ИЕ9. Как, простите, это отлично работает в ИЕ8? 0_о
Total votes 18: ↑18 and ↓0+18
Спасибо за замечание. Добавил решение для IE8.
Total votes 3: ↑3 and ↓0+3
Ну когда же CSS разовьётся настолько, чтобы в HTML коде не нужны были обёртки, да и вообще какие-то ссылки на вёрстку типа class=«col-2-3»? Вопрос риторический…
Total votes 4: ↑3 and ↓1+2
UFO just landed and posted this here
Не испытывал нужды :) Вот раскладка и скругленные уголки — это да.
Спасибо за инфу о CR — как-то пропустил.
Total votes 2: ↑2 and ↓0+2
UFO just landed and posted this here
Можно пойти дальше и извратиться — уместить сетку в твит:

[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%}

Пример использования.
Total votes 4: ↑3 and ↓1+2
Очередная попытка применить плавающие элементы (float) для сеточной верстки. Да, дельфинов можно научить ползать по песку, но зачем? Так и с плавающими элементами — вместо того, чтобы заставлять их плавать по песку одинаково в разных браузерах, лучше использовать предназначенные для этого таблицы.
В итоге — статья ни о чём. Чисто поездить по мозгам начинающим html-верстальщикам. Потом эту дурь из них фиг выбьешь.
Единственный правильный способ верстки многоколоночных макетов — это сетка, она же таблица.
Пока массово не внедрили grid-верстку из CSS3, единственным правильным способом нормальной html-верстки таких остаются html-таблицы (<table>). Да, это несемантично, зато работает именно так, как нужно, во всех браузерах без каких-либо шаманств. Господа инженеры, оставьте семантику гуманитариям! Ваша задача — сделать так, чтобы работало! Плавающие элементы — они для плавающих элементов.
Total votes 16: ↑7 and ↓9-2
UFO just landed and posted this here
Реальное требование — это попиксельная верстка, потому что иначе извращения дизайнера разваливаются.
Гуманитарные 66% и 33% это НЕ попиксельная верстка.
Даже если вы сделаете 66.66666 и 33.3333% — это всё равно НЕ попиксельная верстка. Возьмите любой браузер, особенно ИЕ, и подёргайте за правый нижний угол, изменяя размеры окна. Ну надо же, плавающие элементы начнут плавать! ВНЕЗАПНО!
Google
Yandex
Facebook
Twitter
ВКонтакте
ЖЖ
Amazon
Озон
EBay
все эти сайты ВНЕЗАПНО так или иначе используют <table> для верстки, а не для семантики.
Потому что их делали инженеры, а не гуманитарии с их width: 66%
Total votes 22: ↑8 and ↓14-6
UFO just landed and posted this here
Да-да, расскажите про нереальность попиксельной верстки маркетологам, которые наняли крутых дизайнеров :)
PS. Если вы вдруг не в теме, «крутые дизайнеры» на фриланс-биржах зарабатывают в 5-10 раз больше «крутых программистов». Соответственно, сменить программиста или верстальщика, который начинает что-то бормотать про несемантичность, в 5-10 раз дешевле, чем сменить дизайнера, который к тому же согласовал дизайн с биг-боссами.
Total votes 7: ↑3 and ↓4-1
UFO just landed and posted this here
Попиксельная верстка — это картинка в браузере биг-босса. Она либо есть, либо нет. И заранее неизвестно, будет ли она на ведроиде, ыпаде или fullHD мониторе.
Total votes 5: ↑2 and ↓3-1
UFO just landed and posted this here
Типа того. А вы попробуйте!
Total votes 4: ↑2 and ↓20
UFO just landed and posted this here
UFO just landed and posted this here
Или лыжи не едут, или…
Открыл только гугл и фейсбук… и где там таблицы? — Все сделано исключительно на дивах.
This comment wasn’t rated yet0
UFO just landed and posted this here
А как же Responsive Design? Если на таблице такое и возможно сделать, то явно гораздо сложнее, чем на автономных блоках.

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

Total votes 4: ↑2 and ↓20
Назовите хоть один действительно популярный сайт, ну скажем Aleksa Rank < 1 000 000, который использует новомодный Responsive Design?
Total votes 6: ↑1 and ↓5-4
UFO just landed and posted this here
В только чего ж оно таблицами-то сверстано?
Total votes 4: ↑2 and ↓20
UFO just landed and posted this here
А может это не дизайну 10 лет, а просто семантика << работоспособности в любых браузерах?
Total votes 4: ↑2 and ↓20
UFO just landed and posted this here
Во первых: не новомодный, ему уже > 2 лет.

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

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

Вы и в четвёртых (последнее но главное): ВНЕЗАПНО! — ни один из приведённых вами сайтов не использует таблицы для вёрстки !, а использует таблицы для вывода в них табличных данных.
Если лично вы до сих пор вы верстаете на уровне каменного века таблицами — не навязывайте свои заблуждения другим.
Total votes 3: ↑2 and ↓1+1
Ну прежде чем что-то утверждать, вы откройте html-исходник того же yandex.ru, да?
Total votes 7: ↑3 and ↓4-1
Но нет, зачем, какая разница, как именно сверстана поисковая строка Яндекса! Главное — вера в Бога Семантики!
Total votes 3: ↑1 and ↓2-1
UFO just landed and posted this here
А разве задача машинного чтения, ИИ, не связана с семантикой? Эти области тоже оставим гуманитариям?
This comment wasn’t rated yet0
Эээ, намного проще научить программы машинного чтения обнаруживать таблицы, используемые для верстки, чем заставить владельцев миллионов сайтов сверстать какой-нибудь хитрый дизайн без использования таблиц. Grid-layout как раз и придуман, чтобы решить эти трудности.
This comment wasn’t rated yet0
> лучше использовать предназначенные для этого таблицы

Таблицы предназначены для вывода табличных данных. Шапка-содержимое-подвал — это не табличные данные. Не смешите людей своими выводами.
Total votes 11: ↑9 and ↓2+7
В идеале — да, с этим никто и не спорит.
К сожалению, сеточную верстку придумали веке этак в XXVII-ом, а вот grid-layout в CSS до сих пор утверждают.
И пока этот самый grid-layout не станет для браузеров стандартом де-факто, HTML-таблицы останутся представлением по умолчанию для сеточной верстки в вебе. Нравится это семантистам-гуманитариям или нет.
Использовать плавающие элементы для сетки — это ересь и мракобесие. Оно совсем для другого предназанчено, вроде обтекания текстом картинки.
Total votes 7: ↑1 and ↓6-5
Использовать плавающие элементы для сетки — это ересь и мракобесие.

Равно как и использовать table для сетки.
Total votes 5: ↑4 and ↓1+3
Пока нет массовой поддержки grid-layout, альтернатив table нету.
Total votes 5: ↑0 and ↓5-5
Альтернатив полно, все они сходятся в одном — использование элементов или их стилей не по назначению.
Total votes 3: ↑3 and ↓0+3
Да, давайте использовать несаментичные элеметны HTML+CSS (те же float), чтобы не использовать несематничные элементы вроде <table>!!!!
Total votes 4: ↑0 and ↓4-4
UFO just landed and posted this here
Предназначение у CSS одно — оформительское. Всё остальное только у вас в голове (в отличие от назначения элемента , описанного в спеке). Я имею полное право сделать поле рамкой, рамку тенью, а отступ смещением текста — если мне это нужно именно так. Так что хватит говорить глупости. Стабильность раскладки на плавающих блоках зависит только от кривизны рук.

Не верите? Проверьте: доклад Василия Аксёнова «Сетки для всего» с РИТа. СКБ Контур — не последняя контора на российском рынке.
Total votes 3: ↑2 and ↓1+1
назначения элемента <table>, чёртов парсер
Total votes 2: ↑1 and ↓10
Ну вот в этом и состоит отличие гуманитария от инженера.
Гуманитарий ссылается на то, что где-то там написано некоторым другим признанным гуманитарием.
Инженеру важно только то, как оно работает на практике.
Проблема в том, что, в отличие от инженеров, гуманитарии умеют писать зажигательные тексты про то, как оно должно быть в идеальном мире. У многих инженеров тоже хватило бы на это мозгов, но увы — они сталкиваются с бесконечным списком «но» и «если», и их статьи становятся слишком скучными для гуманитариев.
Total votes 7: ↑1 and ↓6-5
Мне, строго говоря, плевать на вашу систематизацию «инженер/гуманитарий» — я не вижу в ней никакого смысла. Просто я знаю все «за» и «против» табличного и плавающего методов и выбираю плавающий. Точка.

Я-то глупый попытался показать вам успешный опыт, но вы же инженер! Голыми руками, без говна! (Хотя зачем-то сами ссылаетесь на опыт Alexa-100)
Total votes 5: ↑4 and ↓1+3
Спасибо за попытку что-то мне показать, но успешный опыт — тут.
Total votes 6: ↑0 and ↓6-6
Слезли бы с таблиц, глядишь — научились бы чему-нибудь новому.
Total votes 2: ↑2 and ↓0+2
Чему, например? Написанию 50 строк кода CSS там, где не нужно и 10?
Total votes 4: ↑1 and ↓3-2
UFO just landed and posted this here
Сорри, век конечно был XVII, а не XXVII :)
This comment wasn’t rated yet0
При верстке таблицами сложно работать с функционалом сайта — блоки могут появляться и исчезать (не только при переходе по страницам, но и при обновлении данных Ajax'ом). Если убрать какую-то ячейку из таблицы, придется переписывать значения rowspan и collspan.

Однако я тоже не очень дружелюбно отношусь к верстке плавающими блоками — стараюсь использовать где возможно inline-block
Total votes 1: ↑1 and ↓0+1
ЭЭЭ зачем обновлять rowspan и colspan? Типичный макет «шапка — три колонки — подвал» состоит из трех строк и трех столбцов. Что там у них внутре — вообще неважно и никак не влияет на внешнюю таблицу.
This comment wasn’t rated yet0
Вот именно, что это типичный макет. А как насчет макета «Шапка — контент — три блока в одну строку — футер»?

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

image
Total votes 2: ↑2 and ↓0+2
И в чём проблема, если мы берем bootstrap и присваиваем соответствующие классы последовательным таблицам?
Total votes 1: ↑0 and ↓1-1
Делать три независящих друг от друга таблицы?
This comment wasn’t rated yet0
… и какая религия это запрещает?
This comment wasn’t rated yet0
Мне одному кажется, что вместо 
  <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 — это внутренние отступы, а для отступов между элементами предназначен именно маргин?
Total votes 2: ↑2 and ↓0+2
Можно и так. В вашем случае вы выделяете отдельный класс для всех колонок, а в статье для этого используются селекторы:
[class*='col-'] {...}
Тут наверное дело в привычке и целесообразности введения нового класса.

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

По-моему, отступы между колонок лучше делать через «модули». У колонок мы убираем паддинги, а модулям назначаем маргины:
.module { margin: 0 10px; }
Total votes 1: ↑1 and ↓0+1
И, кстати, поговаривают, что такие правила:

*, *:after, *:before {...}

негативно сказываются на скорости отрисовки страницы уже в самом браузере…
Total votes 1: ↑1 and ↓0+1
UFO just landed and posted this here
Лучший способ делать сетку увидел у Чикуёнка два года назад. Для пиксльной тоже подходит.
This comment wasn’t rated yet0
а в самом деле, что происходит с потерянной 0.01 %. это как-то сказывается, на больших мониторах, например?
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Show the best of all time
Change theme settings

Your account

Sections

Information

Services

Support
© 2006–2024, Habr