x
 
Юрий Мазурский
14 мая 2020
Советы почтой каждую неделю
Пожалуйста, получите наше письмо, чтобы подтвердить свой адрес:
Вы подписаны на «Советы за неделю»:

Типовые решения в вёрстке

Изна­чально язык ХТМЛ не пред­по­ла­гал слож­ную рас­кладку эле­мен­тов на веб‑стра­ни­цах. Боль­шин­ство стра­ниц пред­став­ляли собой линей­ный текст впе­ре­межку с изоб­ра­же­ни­ями. Но вер­сталь­щики нашли раз­ные спо­собы пре­одо­леть это тех­ни­че­ское огра­ни­че­ние и стали исполь­зо­вать таб­лицы и свой­ство float, чтобы делать мно­го­ко­ло­ноч­ные шаб­лоны страниц.

Типовые решения в вёрстке

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

С тех пор язык ХТМЛ зна­чи­тельно эво­лю­ци­о­ни­ро­вал и стал отве­чать совре­мен­ным тре­бо­ва­ниям. Появи­лись спе­ци­аль­ные инстру­менты для рас­кладки эле­мен­тов, выстра­и­ва­ния коло­нок и мно­гого другого.

Необ­хо­ди­мость исполь­зо­ва­ния float отпала. Я сове­тую нико­гда не исполь­зо­вать фло­аты для рас­кладки эле­мен­тов на стра­нице, их время про­шло. Как и рас­кладки таблицами.

Сегодня свой­ство float может при­го­диться только для того, для чего оно и было создано изна­чально, а именно для обте­ка­ния тек­стом дру­гих элементов.

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Kamil Mindubaev
14 мая 2020

Кроме float для раскладки ещё использовался display:inline-block, который и сейчас частенько используется. Причём inline-block с добавлением пары строчек работал в Internet Explorer 6, впрочем как и float.

Андрей Ерес
20 мая 2020

Вот пример, где флоат используется при добавлении отступов внутри контейнера со скролом:
https://stackoverflow.com/questions/26888428/display-flex-loses-right-padding-when-overflowing


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

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Что делать, если меня, технического директора, потихоньку отстраняют от дел? 3 Как написать аккуратный код? Часть третья: заменяемость Типовые решения в вёрстке. Обёртка для страницы 1




Недавно всплыло

Что должен знать дизайнер об интерлиньяжах, полях, отступах, кеглях, выравниваниях и модульных сетках? 9 Куда податься? 2 3 Как работать в Фигме быстрее. Часть 3 1