Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 115
Вот самым востребованным в css3 было бы свойство display: column. Прсто и без вопросов Если несколько блоков с display: column встречаются внутри одного блока — выстраивать их столбиками одной высоты с возможностью добавлять маргины, паддинги, и бордеры. Столько бы проблем сразу решило.
Это можно делать уже сейчас, и работает «почти» везде, однако надо заранее знать количество колонок:
<html>
<head>
<style>
.column { display: inline-block; width: 33%;}
</style>
</head>
<body>
<div>
<div class="column">
<h3>Заключение</h3>
<p>Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.</p>
</div>
<div class="column">
<h3>Заключение</h3>
<p>Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.</p>
</div>
<div class="column">
<h3>Заключение</h3>
<p>Спектр применения свойств column пока еще очень узок. Даже не из-за того, что не все браузеры их поддерживают (Mozilla + WebKit дают уже более половины рынка), а по причине неполной реализации функций. Хотя функционал вполне интересный и заслуживает внимания.</p>
</div>
</div>
</body>
</html>
Да знаю я, как это делается. Кучу способов знаю. Только, например, ваш способ не даст колонки одинаковой высоты. А чтобы сделать колонки именно одинаковой высоты — нужно что-то посложнее inline-block. Кстати,
.column { display: inline-block; *display: inline; zoom: 1; width: 33%;} — вот теперь везде будет работать, ага.
.column { display: inline-block; *display: inline; zoom: 1; width: 33%;} — вот теперь везде будет работать, ага.
У пэрента не забудьте сделать вертикал-алигн.
не на много сложнее ;) + margin-bottom: -32767px; padding-bottom: 32767px; background:#eee;
Я бы поставил просто 30000px, чтобы не нарваться на 215 болезненно.
Так можно бэкграунд забабахать. А нижний бордер? Я повторюсь, но я все эти методы знаю.
Кстати, раз уж все пытаются подсказать мне — самый лучший способ делать колонки — display: table в комбинации с inline + zoom в ie. Для ие, правда, придётся заюзать expression, но у меня есть универсальный. А для одинаковой высоты в ие я написал column.htc Примерно такой стиль получается:
.table
{
width: 100%;
display: table;
}
.column
{
display: table-cell;
vertical-align: top;
}
.column,
{
behavior: url(/stylesheets/column.htc);
display: inline;
width: expression(function(t){
var sum = 0;
for (var i = 0; i < t.parentNode.childNodes.length; i++) {
if (t.parentNode.childNodes[i] != t) {
sum += t.parentNode.childNodes[i].offsetWidth;
}
}
return t.parentNode.clientWidth — sum + 'px';
}(this));
zoom: 1;
}
Не могу свой универсальный экспрешн найти, где-то был.
И всё, любые колоки одинаковой высоты и ни единого лишнего блока.
Кстати, раз уж все пытаются подсказать мне — самый лучший способ делать колонки — display: table в комбинации с inline + zoom в ie. Для ие, правда, придётся заюзать expression, но у меня есть универсальный. А для одинаковой высоты в ие я написал column.htc Примерно такой стиль получается:
.table
{
width: 100%;
display: table;
}
.column
{
display: table-cell;
vertical-align: top;
}
.column,
{
behavior: url(/stylesheets/column.htc);
display: inline;
width: expression(function(t){
var sum = 0;
for (var i = 0; i < t.parentNode.childNodes.length; i++) {
if (t.parentNode.childNodes[i] != t) {
sum += t.parentNode.childNodes[i].offsetWidth;
}
}
return t.parentNode.clientWidth — sum + 'px';
}(this));
zoom: 1;
}
Не могу свой универсальный экспрешн найти, где-то был.
И всё, любые колоки одинаковой высоты и ни единого лишнего блока.
я знаю для чего он нужен. весь интерфейс мозиллы на нём построен. его достаточно для большинства нужд. а распредление контента на колонки не нужно. у вэба своя специфика — нет ограничения на вертикальный размер страницы, но на неё смотрят через маленькое окошко. при многоколоночной вёрстке, любой достаточно объёмный текст, не влезающий в это окошко, будет вызывать неиллюзорный баттхёрт. так что невозможность в угоду дизайнерским изыскам а-ля полиграфия сделать неэргономичный интерфейс — несомненный плюс.
Не надо говорите «гоп»… В 95 году «достаточно» было текста, и GIF-анимация была верхом веб-мультимедиа…
1. ложь, пиздёжь и провокация. годится только для маленьких текстов, заведомо влезающих в экран и то с оговорками.
2. и чо?
ни одного примера использования во благо я так и не увидел. всё какие-то демки для макбуков.
2. и чо?
ни одного примера использования во благо я так и не увидел. всё какие-то демки для макбуков.
лентой. у людей линейное мышление, так что даже если ты разбросаешь по экрану облако абстрактов, им придётся мысленно выстраивать их в одну последовательность, либо хаотично выцепить взглядом из это кучи несколько и забить на остальные, что ничем не лучше, чем если бы просто вначале ленты были выведены несколько случайных.
если пользователь не прокручивает, значит информация его не очень интересует. значит в вываленной вами горе новостей слишком малый процент интересных. и именно эту проблему надо решать, а не как упихнуть на экран ещё больше всё также не интересной ему информации.
в пустоте нет ничего плохого. интерфейс должен быть простым и понятным. перегруженных интерфейсов пользователи пугаются. хаотичное расположение информации их также отпугивает.
в пустоте нет ничего плохого. интерфейс должен быть простым и понятным. перегруженных интерфейсов пользователи пугаются. хаотичное расположение информации их также отпугивает.
у кого-то явные проблемы с чтением =_=" повторяю: ПОЛЬЗОВАТЕЛЬ НЕ БУДЕТ ДОЛГО ЛИСТАТЬ ЛЕНТУ, ДОЛГО ВЫИСКИВАТЬ В ГОРЕ МУСОРА ИЛИ ДЕЛАТЬ ЧТО УГОДНО ЕЩЁ ДОЛГО, НЕ ПОЛУЧАЯ ПОЛОЖИТЕЛЬНОГО ФИДБЕКА В ВИДЕ ИНТЕРЕСУЮЩЕЙ ЕГО ИНФОРМАЦИИ.
ты бы ещё в гугл послал. что я должен найти на сайте с вырвиглазными цветами?
ты действительно думаешь, что хаотичные скачки между колонками более комфортны, чем ритмичные в рамках одной? ты действительно веришь, что чем больше на него вывалишь информации, тем с большей он ознакомится?
неперегруженному интерфейсу колонки не нужны.
не может быть уродливым то, чего нет. наличие какой-то возможности вовсе не означает, что ею надо пренепременно воспользоваться. на рабочем столе у тебя всё свободное место завалено или ты всё-таки стараешься убирать не нужные постоянно вещи в ящики?
ты бы ещё в гугл послал. что я должен найти на сайте с вырвиглазными цветами?
ты действительно думаешь, что хаотичные скачки между колонками более комфортны, чем ритмичные в рамках одной? ты действительно веришь, что чем больше на него вывалишь информации, тем с большей он ознакомится?
неперегруженному интерфейсу колонки не нужны.
не может быть уродливым то, чего нет. наличие какой-то возможности вовсе не означает, что ею надо пренепременно воспользоваться. на рабочем столе у тебя всё свободное место завалено или ты всё-таки стараешься убирать не нужные постоянно вещи в ящики?
я знаю чей. по ссылке нет сравнения длинных и толстых страниц. могу поспорить, если в топе будет не 6 диванов, а 26, то внимательно будут рассмотрены не более 10. очень показательно, что на самолёт так и не посмотрели, хотя он находится и в топе страницы. впрочем, я не вчитывался.
да. колонки приводят к уплотнению информации и к её хаотичному расположению.
тэг blink — это ведь тоже всего-лишь инструмент, который надо использовать с умом и бла-бла-бла, только вот если бы его не было, то его бы никто и не хотел использовать. но его сделати и каждому второму дизигнеру пренепременно потребовалось заюзать его для привлечения внимания.
тем не менее на нём полно уродливого пустого места! :-о
да выбирай любого %-) поспорим втроём.
да. колонки приводят к уплотнению информации и к её хаотичному расположению.
тэг blink — это ведь тоже всего-лишь инструмент, который надо использовать с умом и бла-бла-бла, только вот если бы его не было, то его бы никто и не хотел использовать. но его сделати и каждому второму дизигнеру пренепременно потребовалось заюзать его для привлечения внимания.
тем не менее на нём полно уродливого пустого места! :-о
да выбирай любого %-) поспорим втроём.
Иногда такие дискуссии радуют меня, как верстальщика полиграфии, тем, что полиграфия статична, а при смене контента надо полностью переразвёрстывать.
Меня интересует такая деталь — будет ли соблюдаться горизонтальный ритм в колонках, основанный на опорной сетке, в случае внедрения в поток элементов, не совпадающих по высоте с (икс строк на высоту строки да икс минус один межстрочников на интерльньяж)? Иначе всё применение ограничивается однокеглевым текстом (если дизайнер это понимает).
Меня интересует такая деталь — будет ли соблюдаться горизонтальный ритм в колонках, основанный на опорной сетке, в случае внедрения в поток элементов, не совпадающих по высоте с (икс строк на высоту строки да икс минус один межстрочников на интерльньяж)? Иначе всё применение ограничивается однокеглевым текстом (если дизайнер это понимает).
именно об автоматике и речь
Да, кстати, интересный вопрос. Мне кажется автоматическая поддержка такого ритма — это как минимум странно, и будет больше мешать, чем помогать. Но если у всех внедренных элементов высота будет кратна высоте строки+интерлиньяж, то проблема решиться сама собой, разве нет?
И опять же… на некоторых мониторах уже есть выше 2.5 тыс пикселей разрешение… И, честно говоря, мне смешно смотреть как хваленная «резинка» растягивается на весь экран… Не за горами 3000 пикселей и выше… и что тогда делать? Мое лично предпочтение — фиксат до 1000 пикселов по ширине, остальное — нафиг…
PS: И опять же это я говорю о применении к стандартным сайтам (компаний там и т.д.), ибо всегда найдется задача для которой и 100500 пикселей будет мало… вот для них и придуман горизонтальный троллинг )
PS: И опять же это я говорю о применении к стандартным сайтам (компаний там и т.д.), ибо всегда найдется задача для которой и 100500 пикселей будет мало… вот для них и придуман горизонтальный троллинг )
Я не сильно посвященный в данном вопросе, и мой взгляд вообще никак нельзя сравнивать с дизайнерским, а может то, что я предполагаю уже используется… Так что сугубо imho.
Но приведу пример, как я вижу использование размеров таких мониторов
Нормальный монитор
Широкоформатный монитор
Но приведу пример, как я вижу использование размеров таких мониторов
Нормальный монитор
Широкоформатный монитор
Простите, но то что я вижу это полный п#%&&ц. Разорвана страница и не дай бог человек с хай-резом уменьшит размер экрана.
Да, я осознал всю глупость своей затеи
Для меня лично большое разрешение экрана, это просто как возможность разместить в однйо плоскости 3-4 приложения… т.е. к примеру при разработке вебсайта на мониторе 27" 2560x1440px открыты: браузер на пикселей 800-850 (понимаю часто бывает горизонтальный скроллинг, но мне же для личного тестирования) + VLC плейер в небольшом экране (где-то 450х300) с любимым сериалом каким-то или фильмом который я уже пересматриваю в сотый раз (ну не прет меня музыку слушать, хоть застрелите, мне надо чтобы зрение на что-то отвлекалось и разгружался мозк) + Eclipse на всем остальном экране… Eclipse переключается с фотожопом (для дорисовки, докраски, color picking'a), а VLC подменяется при необходимости textmate…
Но это для программиста, а для обычного пользователя:
Браузер на 1280 пксл + почтовый клиент + сиськи в VLC плеере + пасьянс… И все это без отрыва от Word'a… Т.е. большой экран позволяет работать с большим удобством одновременно с разными программами, а не издеваться над веб-дизайнерами и заставлять их придумывать а как разместить базу данных из 10 полей на экране в 3000px и с ужасом смотреть в будущее…
Но это для программиста, а для обычного пользователя:
Браузер на 1280 пксл + почтовый клиент + сиськи в VLC плеере + пасьянс… И все это без отрыва от Word'a… Т.е. большой экран позволяет работать с большим удобством одновременно с разными программами, а не издеваться над веб-дизайнерами и заставлять их придумывать а как разместить базу данных из 10 полей на экране в 3000px и с ужасом смотреть в будущее…
конечно не будет. пользователь двигаясь сверху вниз будет скакать между колонками, а дочитав каждый абстракт подниматься глазами/скроллингом к его началу и искать начало ближайшего непрочитанного. тому кто собирается прочитать все вы создаёте дополнительные раздражающие неудобства. а тому кто собирается выхватить только часть — ничем не помогли.
точно также он будет действовать и в случае ленты с той лишь разницей, что ему не придется каждый раз искать что он ещё не окинул взглядом, отсекая то, что уже окинул.
Нарисовал иллюстрацию к вашему спору, пример где многоколоночность может пригодится хотя бы как инструмент. Вот такая брошюра/схема/книга, скролл мыши допустим прикручен к навигации — следующая/предыдущая страница:
Но, если высота многоколоночного текста превышает высоту экрана и нужно скролить вверх-вниз, то это конечно ужас.
Но, если высота многоколоночного текста превышает высоту экрана и нужно скролить вверх-вниз, то это конечно ужас.
Ну вот почему меня харит сейчас в ответ на этот комментарий нарисовать extension для firefox и crome который бы преобразовывал любой текст на странице исключительно в Comic Sans Serif… :)
Точно, я совсем забыл про них, спасибо. Я их встречал давно уже, но они так и остались у меня периферии сознания. Кстати, я про них периодически вспоминаю, начинаю искать, не нахожу и снова успешно забываю )
Это уже почти таблицы :)
Спасибо большое!
Только такие статьи лучше не в выходные, а в будни с утра постить, чтобы не прошли незамеченными, а то утонут в массе других обзоров.
Только такие статьи лучше не в выходные, а в будни с утра постить, чтобы не прошли незамеченными, а то утонут в массе других обзоров.
чувак респект, как я долго искал подобное. спасибо
Конечно же можно комбинировать column-width и column-height:
.column
{
-webkit-column-count:2;
-moz-column-count:2;
-webkit-column-width:15em;
-moz-column-count:15em; => -moz-column-width:15em;
}
Опечатка?
.column
{
-webkit-column-count:2;
-moz-column-count:2;
-webkit-column-width:15em;
-moz-column-count:15em; => -moz-column-width:15em;
}
Опечатка?
Ох как этого не хватало.
А вы мне замечательную мысль подали, спасибо. Уже с неделю думаю.
у них есть хоть один полезный юзкейс?
мне бы на прошлой работе для одного сайта колонки пригодились… ну да и прошлой она (работа) стала в том числе из-за того, что пригодились бы.
// я видел слово «если», но замечу:
«деградация в одну колонку» очень плохо звучит для картинок без align'а с шириной, подогнанной под ширину колонки в пикселях (а среди контентных картинок таких очень много)
«деградация в одну колонку» очень плохо звучит для картинок без align'а с шириной, подогнанной под ширину колонки в пикселях (а среди контентных картинок таких очень много)
угу недавно игрался с колонками, нормальная поддержка только у chrome пока, хотя вещь реально полезная. Очень странно, что другие броузеро разработчики забивают на эту полезную спецификацию.
«состоящие из 8 до 12 слов. „
либо “длиной от 8 до 12 слов», да хоть «состоящие из слов в количестве от 8 до 12 штук», но уж никак не «из 8 до 12».
Sincerely yours, Grammar Nazi.
либо “длиной от 8 до 12 слов», да хоть «состоящие из слов в количестве от 8 до 12 штук», но уж никак не «из 8 до 12».
Sincerely yours, Grammar Nazi.
Пожалуйста, не кормите tenshi — а то пц топику.
Про мульти-колонки: крутая штука с т.з. основного своего механизма по перераспределению текста, но газетный или книжный текст отличается от веб-страниц гораздо сильнее, чем это кажется.
И всё же никто не отменяет случаев, когда мульти-колонки действительно нужны: имитация газеты (электронная версия какой-нибудь Times) или книги (веб-приложение для чтения книг, например). В общем, было бы чудесно иметь в арсенале такую чудесную, уникальную в своём роде, фичу.
Говорите, что это неюзабельно? Так и карандашом можно убить, при желании. Это же не повод запрещать карандаши.
И всё же никто не отменяет случаев, когда мульти-колонки действительно нужны: имитация газеты (электронная версия какой-нибудь Times) или книги (веб-приложение для чтения книг, например). В общем, было бы чудесно иметь в арсенале такую чудесную, уникальную в своём роде, фичу.
Говорите, что это неюзабельно? Так и карандашом можно убить, при желании. Это же не повод запрещать карандаши.
Ещё лучше.
Ужас. При каждом ресайзе окна перебрасывает на первую страницу.
шутейный ужас. Ресайзы редки, они меняют размер экрана и, как следствие, компоновку и количество страниц. Хотя это не оправдание — надо исправлять.
Большей проблемой (непреодолимой) является невозможность в некоторых браузерах отображать большие тексты. Приходится бить на куски до 100 кБ текста в каждом.
Большей проблемой (непреодолимой) является невозможность в некоторых браузерах отображать большие тексты. Приходится бить на куски до 100 кБ текста в каждом.
Исторический офтоп: в древних Netscape'ах (версий 3-4.х) поддерживался тэг multicol, который служил для того же самого, к сожалению тогдашние ИЕ этот тэг не поддерживали.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Вёрстка колонками средствами CSS3