Недавно понадобилось сверстать резиновый трёхколоночный макет с высотой 100% и колонками одинаковой высоты. К моему удивлению, это оказалось не очень простым делом: вместо планируемого получаса это заняло намного больше времени.
Требования к макету:
- кросс-браузерность (куда без неё);
- минимальная высота: 100% (полное окно, независимо от высоты контента);
- минимум кода;
- все три колонки должны быть одинаковой высоты;
- никакого JavaScript.
Читать статью «Кросс-браузерный резиновый трёхколоночный макет в высоту окна» полностью…
Прочитал сегодня статью "Пять звёздочек" на Pepelsbey.net. Автор описывает очень интересный подход для реализации механизма рейтингов; основное преимущество описываемого подхода — минимум JavaScript за счет грамотного использования CSS. Читать статью «Пять звёздочек без JavaScript» полностью…
Принимая эстафету, организованную Никитой Селецким, от Максима Покровского, добавляю свои пять копеек в копилку советов по вёрстке.
- Изучайте стандарты W3C. Как это ни банально звучит, хороший верстальщик (да и web-разработчик) просто обязан (пусть не наизусть) знать и понимать спецификации. Недавно в книжном магазине видел книжку по верстке. Лучше бы я её не видел: вложенные таблицы, архаичные тэги и всё в том же духе. Так вот: такие книги — зло. Всё, что надо знать, есть в спецификациях
Следствия из данной рекомендации: да здравствует семантическая вёрстка; Vaild XHTML/CSS forever (тем не менее, это не должно быть самоцелью).
- Дизайн должен быть кросс-браузерным. Internet Explorer уже давно не единственный браузер, которым пользуются люди, но, тем не менее, существует большое количество сайтов, которые написаны исключительно под IE. Так вот, это неправильно. Дизайн (равно как и код) нужно тщательно тестировать в как можно большем количестве браузеров. Для тех, кто под Windows, вообще райская жизнь: на одной машине без проблем уживаются IE6/7, FireFox, Opera, Safari и даже Konqueror из виндового порта KDE4. Затраты времени на тест в различных браузерах окупаются: заказчики имеют тенденцию смотреть на дизайн в экзотических браузерах, и когда всё отлично смотрится с первого раза, их приятно удивляет. А приятное удивление заказчика оборачивается бонусами для исполнителя
- Помните про usability и accessibility. Тестируйте сайт с выключенными картинками, JavaScript и CSS (в различных комбинациях). Страница без CSS позволяет получить представление о том, как поисковик воспринимает страницу. Контент в самом низу? Что же удивляться, что Гугол недооценивает сайт? Или поставьте себя на место человека с ограниченными способностями, использующего скринридер. Хватит ли у Вас терпения, чтобы прослушать главную страницу Вашего сайта? Или Вам это надоест, когда скринридер пойдет читать меню навигации? Отключили JavaScript и развалился дизайн/не отправляется форма? Далеко не все пользователи включают JavaScript. И если для правильного отображения сайта требуется то, что может не быть доступно всем пользователям — это минус.
- Изучайте работу мастеров. Это полезно. Только ключевое слово — изучайте. Если слепо передрать код/макет/нужное подставить без понимания того, что там происходит — это нехорошо. А если разобраться с кодом, то приобретаются знания и опыт. Как говорится, знание — сила.
- Упрощайте. Если код можно упростить, его нужно упростить. Во-первых, так понятнее, во-вторых — чище, в-третьих — размер страницы уменьшается. Суп из
div'ов ничуть не лучше вложенных таблиц, поверьте.
Вроде всё… Эстафету передавать мне особо некому (разве что Вам, Всеволод), поэтому подхватывайте все желающие
При решении одной задачи с вертикальным выравниванием и плавающими элементами внутри ячейки таблицы, натолкнулся на одну очень интересную особенность браузеров, построенных на движке Gecko, а также Internet Exploret 6 и 7: плавающие элементы конфликтуют со статическими инлайновыми или псевдо-инлайновыми элементами. Читать статью «Проблема с плавающими элементами в FireFox и IE6/7» полностью…
В статье "парочка аккордеонов" я рассказывал, как сделать простой аккордеон с использованием JavaScript. Однако, будучи "certified CSS 2.0 designer" и "certified XHTML 1.0 designer", я не смог удержаться, чтобы не сделать аккордеон без JavaScript (только на CSS/XHTML). Читать статью «Аккордеон на CSS без использования JavaScript» полностью…
Недавно в одном из проектов появилась необходимость использовать аккордеон (подобный используемому на Desert Ridge Marketplace). Любят заказчики дешевые эффекты, ничего здесь не поделаешь
Чем мне не понравился аккордеон на Desert Ridge — это полной зависимостью от JavaScript: если JavaScript выключен, навигация по сайту переставала работать. Это мне не понравилось, и я решил написать свой.
Представляю два решения:
- Подменю сворачивается/разворачивается по щелчку, элементы меню не зависят друг от друга;
- Подменю сворачивается/разворачивается по щелчку, при этом не может быть более одного развёрнутого подменю.
При выключенном JavaScript оба аккордеона трансформируются в двухуровневый список. Читать статью «Парочка аккордеонов» полностью…
Гуляя по Internet, совершенно случайно натолкнулся на статью "Стили CSS - центрируем объекты по центру веб-страницы".
Первой мыслью было, что автор начнёт рассказывать про вертикальное центрирование и всем известный margin: 0 auto. Но не тут-то было, всё гораздо интереснее Читать статью «Размещение блока неизвестного размера в центре страницы при помощи CSS» полностью…
В Internet есть много статей, посвященных вопросу "to hack or not to hack". Я не хочу обсуждать этот "извечный вопрос", только замечу: что бы там ни говорили противники хаков, хаки весьма и весьма популярны (к счастью или сожалению). Я решил сделать небольшую подборку CSS-хаков для различных браузеров. По сути дела, эта статья является компиляцией очень многих источников. Читать статью «Подборка CSS-хаков для различных браузеров» полностью…
Ранее я уже говорил о причинах, побудивших меня сделать меню на чистом CSS без использования JavaScript. Борясь с IE6, у меня получилась красивая версия вертикального меню — его реализация оказалась проще. Теперь обещанное горизонтальное меню. Читать статью «Кросс-браузерное всплывающее гибридное меню на CSS без использования JavaScript» полностью…
Так случилось, что срочно понадобилось сделать горизонтальное меню, причем для проекта, который нужно было сдавать вчера Естественно, самому писать не было времени, нужно было взять что-то готовое. Я недавно прочитал статью "Всплывающее гибридное меню на CSS", поэтому взял код именно оттуда. Но не в этом дело. У подавляющего большинства меню камнем преткновения становится IE6 — а всё из-за того, что он понимает :hover только для тэга <a>. Когда-то у меня был заказчик, требовавший, чтобы всё одинаково работало с выключенным JavaScript'ом; вспомнив его, я решил попробовать сделать меню, работающее безо всякого JavaScript. Так получилось, что попутно я нашел еще один очень интресный глюк в IE6 (о нём далее), в борьбе с которым у меня получилось вертикальное меню. Читать статью «Кросс-браузерное одноуровневое вертикальное меню без JavaScript» полностью…
Очередной раз попав не туда, куда надо из Google, я натолкнулся на статью "Трехколоночный макет на CSS с одинаковой высотой колонок". Да, трехколоночные макеты (да еще и резиновые!) очень популярны, я смотрю Но, несмотря на популярность таких макетов, многие верстальщики почему-то не хотят учиться и городят целый огород на div'ах. Читать статью «Резиновый трехколоночный макет с правосторонними сайдбарами» полностью…
Прогуливаясь по Internet в поисках неизвестно чего, я набрёл на статью годичной давности, в которой приводится рецепт по созданию легко изменяемого макета фиксированной ширины. Читать статью «Легко изменяемый макет фиксированной ширины» полностью…
Читая один замечательный блог, я наткнулся на заметку о том, что в IE6/7 кнопки c "длинным текстом" становятся очень длинными. Читать статью «IE6/7: слишком широкие кнопки» полностью…
В последнее время так называемая "резиновая вёрстка" (aka liquid layouts) становится всё более популярной, и далеко не последнюю роль в этом играет постоянное увеличение разрешения мониторов. Одним из часто применяемых шаблонов является двухколоночный (одна колонка имеет фиксированную ширину, другая является "резиновой"). Существует несколько разных подходов к вёрстке многоколоночных шаблонов, некоторые подходы приведены на A List Apart: Creating Liquid Layouts with Negative Margins и Multi-Column Layouts Climb Out of the Box. Второе решение, на мой взгляд, более элегантное; но как бы там ни было, оба решения являются, по сути дела, лишь частными случаями шаблона, когда колонки могут иметь свои границы, отступы и т.п. Конечно, расчет всех параметров не является особо сложным, но почему-то многие разработчики предпочитают не утруждать себя лишними вычислениями, а использовать вложенные div, что не очень-то хорошо, ибо такие элементы не несут особой семантической нагрузки. А с появлением IE8 beta (которая альфа) расчеты усложнились, ибо IE8 довольно-таки криво считает координаты элемента с отрицательными границами. Поэтому мы попытаемся найти Универсальное кросс-браузерное решение для двухколоночного резинового шаблона. Читать статью «IE7/8 и общий случай двухколоночной резиновой вёрстки» полностью…
Не так давно я боролся с вертикальным выравниванием в Internet Explorer, и вот опять оказалось, что с выходом IE8 Beta это было всё напрасно. Как и многие, я не рискнул устанавливать IE8 на основную машину, поэтому поставил на виртуальную. Затем зашёл на парочку сайтов, которые отображаются нормально во всех остальных браузерах… Я был потрясён и разочарован…
Возникает чувство, что Micro$oft называет свои alpha-релизы бетами. Они делали акцент на том, что MS IE8 проходит тест ACID2, так гордились этим… А оказалось, что всё как обычно: убрали один старый баг, внесли десяток новых. Читать статью «Почему Microsoft называет альфы бетами, или, кому нужны ACID-тесты» полностью…
