Разбиваем текст на колонки с помощью CSS3
Эх, какие у нас были дебаты во время обсуждения варианта верстки нашего журнала. Кому-то больше нравился одноколоночный вариант, а кто-то был обеими руками за многоколоночную верстку. Конечно, всегда хочется угодить всем, но в плане верстке это сделать крайне проблематично. Работа верстальщика тяжела, и попросить верстать два варианта просто нереально.
Нет, не подумайте, что я опять хочу поднять этот вопрос. Хватит! Надо возобновить выпуск журналов, а не спорить из-за пустяков. Сегодня я просто хочу восхититься возможностями CSS и показать, как запросто можно заверстать текст в несколько колонок при помощи всего лишь одного класса.
По секрету скажу, что я не случайно начал интересоваться этой темой. Если мои эксперименты по оформлению текста средствами css достигнут нужного качества, то вполне возможно, что мы променяем pdf на html+css. Тут открываются громадные перспективы в плане верстки и повышения удобства чтения журнала на различных устройствах. Пока не будем далеко заглядывать. Это все же только мысли, которые требуется довести до ума. Пока лишь посмотрим как легко и просто оформить кусок текста в три (две) колонки.
Итак, сначала подготовим чистую html страницу и напишем в ней какой-нибудь текст. У меня это выглядит так:
<!Doctype> <html> <head> <style> </style> </head> <body> <p class="two">В последнее время я прямо-таки подсел на иглу web-разработки. Меня стали чертовски интересовать такие вещи как CSS/JavaScript/PHP и они них я всегда рад поговорить в рамках нашего проекта. Сегодня мне хотелось бы поднять на всеобщее обсуждение тему «IDE для WEB-разработчика». Я уже давненько не занимался кодингом для WEB’а и за это время успел отстать в этом деле.Когда я активно пробовал в этом направлении свои силы, то в качестве IDE мне очень нравился PHP Expert Editor (<a href="http://phpexperteditor.com">http://phpexperteditor.com</a>). Программа была платной, но одно время для жителей exUSSR распространялась бесплатно. Меня в принципе все устраивало (за исключением нескольких глюков) и я готов был ей пользоваться.Когда я решил вернуться в тему, то узнал, что программка давненько не обновлялась (и продолжает не обновляться). Это конечно не главный минус, но хотелось бы рассчитывать на поддержку разработчиков. К тому же, сейчас идет настоящий бум на web-технологии и хотелось бы, чтобы IDE как минимум поддерживала синтаксис новых тегов/селекторов, а также имела в наличие плюшки для упрощения процесса разработки. В общем, PHP Expert Editor я решил сразу выбросить на свалку.Принялся искать альтернативу, а этой альтернативы до фига и больше. Не знаешь, что и выбрать. Многие блоггеры, освещающие темы web-разработки рекомендуют пользоваться Notepad++ и PSDPad. Я конечно люблю минимализм, но не до такой степени. Если еще написать небольшой сценарий в Notepad++ я себя могу заставить, но работать с целым проектом – увольте. Не хватает элементарного дерева проекта и других типичных для нормальных IDE фич. Этот вариант я тоже сразу отложил и продолжил поиски. Спустя какое-то время я наткнулся на просто замечательный продукт от JetBrains (<a href="http://www.jetbrains.com/">http://www.jetbrains.com/</a>) – PHPStorm. Компания специализируется на разработке различных IDE и для PHP-разработчиков у них есть просто ураганный вариант. Сразу хочу сказать, что среда PHPStorm платная и за нее хотят 99$. Решился я ее протестировать. Скачал 30-ти дневный trial и попробовал поработать в этой среде над новым проектом. Знаешь, это просто сказка. Я бы даже сказал, это IDE моей мечты. Все сделано аккуратненько и работает, как этого и ожидаешь. Имеются все необходимые инструменты (даже те, которые вряд ли понадобятся) и IDE при этом даже не намекает на тормоза. Возможно, когда-нибудь я сделаю про PHPStorm отдельный пост и там все подробненько опишу, а сейчас просто скажу – работать над проектом было реально здорово. IDE ни разу не упала и всячески пыталась облегчить мой труд. Я остался чертовски доволен и даже начал подумывать о покупке лицензии. Пока я нахожусь в стадии принятия решения и поскольку тестовый период использования PHPStorm уже истек, я опять решил испытать удачу и поискать бесплатную альтернативу. </body> </html>
Я специально подобрал текст побольше, чтобы эффект форматирования был лучше виден. Теперь опишем класс, который будет выполнять функции форматирования:
.two {
-moz-column-count: 2;
-moz-column-gap: 20px;
-webkit-column-count: 2;
-webkit-column-gap : 20px;
column-count: 2;
column-gap : 20px;
column-rule-color: #ccc;
column-rule-style: solid;
column-rule-width: 1px;
-moz-column-rule-color: #ccc;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1px;
-webkit-column-rule-color: #ccc;
-webkit-column-rule-style: solid ;
-webkit-column-rule-width: 1px;
}Можешь прямо сейчас сохранять страницу и попробовать открыть ее в браузере. Если ты смотришь страницу в Opera, FireFox или Chrome, то ты увидишь наш текст заверстанный в две колонки. В IE9 пример смотреть не так интересно, т.к. эта версия ослика не понимает свойства column-count и column-gap. Этому он научится только в следующей версии. В остальных же браузерах все выглядит так, как мы этого и ожидали.
Теперь посмотрим, что мы тут натворили. В спецификации CSS3 описаны свойства column-count (количество колонок), column-gap (расстояние между колонками) и column-rule (раздельная линия между колонками). Если ты внимательно посмотрел на исходник CSS класса, то обратил внимание, что все строки можно условно разделить на три группы. По сути мы используем одни и те же свойства, но в двух случаях дописываем дополнительные префиксы: moz и webkit. Зачем это нужно?
Дело в том, что пока такие свойства как column-count (как пример) нативно поддерживаются только браузером Opera 11+. Чтобы заставить Chrome и FireFox правильно реагировать на эти свойства, нам требуется обратиться к ним с префиксом. Для FireFox этот префикс будет -moz, а для Chrome (а также других браузеров, построенных на движке webkit). Когда появится нативная поддержка - неизвестно. Будем ждать.
К сожалению, подобных свойств нет в IE9, поэтому как бы ты не старался, тебе не удастся правильно воспроизвести вышеприведенный пример с использованием одного только CSS.
Скриншот работы примера, а также сам пример ты можешь посмотреть чуть ниже.
| Вложение | Размер |
|---|---|
| MultiColumnCSS.zip | 1.99 КБ |
- Spider_NET's блог
- Войдите или зарегистрируйтесь, чтобы получить возможность отправлять комментарии
- 673 просмотра
Комментарии
6 комментария(ев)Дата: СБ, 11/02/2012 - 00:50
Конечно, новые технологии - это круто, но ведь основной целью верстальщика всегда была кроссбраузерность. Если верстальщик применяет CSS3 и HTML5, он должен понимать, что старые версии браузеров всё равно будут отображать страницу криво. И должен предусмотреть альтернативный вариант. Но мне не понятно, как это делается. Условные комментарии есть только в ослике. А на php выдавать разные страницы по user-agent - это, на мой взгляд, выглядит криво. Таким образом, я пытался применить HTML5 в своём проекте, но в результате от него отказался.
Ты имел в виду ... этот префикс будет -webkit?
Дата: ВС, 12/02/2012 - 09:30
Так и делается через всевозможные хаки. Если это IE, то можно юзать условные комментарии. С остальными проще. Как правило все решается за счет префиксов - moz, -webkit, -o. Ну и конечно же не обойтись без JS.
Пока CSS3 нужно применять осторожно. Если сайт рассчитан на широкую аудиторию (не определенную группу), то конечно же, новинки нужно применять аккуратно. Простые смертные могут до сих пор сидеть под древними браузерами. Если брать VR, то я думаю, что проблем от использования CSS3/HTML5 больших проблем не будет. Наша аудитория - люди так или иначе связанные с IT. 90%, что они не юзают IE6.
Дата: ВС, 12/02/2012 - 20:32
А можно ли нам на VR настроить статистику кто с какого браузера заходит на VR? И вывести эту статистику для всех, в левый блок. Так сказать для информации ))) было бы интересно наверно, лучше чем опрос "кто какой браузер использует" ))))
Дата: ВС, 12/02/2012 - 20:54
попробуем поискать нужный плагин. У нас вся статистика завязана на google. Ее просто так вывести не получится. Надо что-то искать для Drupal.
Дата: ВС, 12/02/2012 - 21:19
Отличное дело!!! Кстати, читал в конце недели в новостях, что Хром занимает больше 50% используемых браузеров в России. И к тому же, обновляется он вполне самостоятельно, юзер даже и не замечает этого. Так что если компания не завязана на IE (ну бывает так, что внутренние сайты какой-то компании специально сделаны только под ослика) и работают за компами люди моложе 45-50 лет - то скорее всего они используют Хром или Огнелиса. Так что внедрять новые технологии не только можно, но и нужно!!! А если IE не успевает - это ведь уже не наши проблемы, правда?
Дата: Пнд, 13/02/2012 - 08:46
Как не так давно читал про пакет, позволяющий развернуть Chrome внутри организации и настроить для него централизованное обновление. Думаю, что рано или поздно многие админы будут им пользоваться и прогонять блохастого c поле битвы. Точнее говоря 6-го ослика. 9-й не так уж и плох, а 10-й будет еще лучше =)