WebKit и псевдокласс :empty
Вчера, благодаря своему читателю, я обнаружил в WebKit очень интересную ошибку: оказывается, что он не понимает псевдокласс :empty (из CSS 3). Далее »
Окт
2009
Кросс-браузерный резиновый трёхколоночный макет в высоту окна
Недавно понадобилось сверстать резиновый трёхколоночный макет с высотой 100% и колонками одинаковой высоты. К моему удивлению, это оказалось не очень простым делом: вместо планируемого получаса это заняло намного больше времени.
Требования к макету:
- кросс-браузерность (куда без неё);
- минимальная высота: 100% (полное окно, независимо от высоты контента);
- минимум кода;
- все три колонки должны быть одинаковой высоты;
- никакого JavaScript.
Июн
2008
Пять звёздочек без JavaScript
Прочитал сегодня статью "Пять звёздочек" на Pepelsbey.net. Автор описывает очень интересный подход для реализации механизма рейтингов; основное преимущество описываемого подхода — минимум JavaScript за счет грамотного использования CSS. Далее »
Автор: Vladimir, опубликовано в: CSS, HTML, комментариев: 4Май
2008
Пять советов верстальщику
Принимая эстафету, организованную Никитой Селецким, от Максима Покровского, добавляю свои пять копеек в копилку советов по вёрстке.
- Изучайте стандарты 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'ов ничуть не лучше вложенных таблиц, поверьте.
Вроде всё… Эстафету передавать мне особо некому (разве что Вам, Всеволод), поэтому подхватывайте все желающие
Май
2008
Проблема с плавающими элементами в FireFox и IE6/7
При решении одной задачи с вертикальным выравниванием и плавающими элементами внутри ячейки таблицы, натолкнулся на одну очень интересную особенность браузеров, построенных на движке Gecko, а также Internet Exploret 6 и 7: плавающие элементы конфликтуют со статическими инлайновыми или псевдо-инлайновыми элементами. Далее »
Автор: Vladimir, опубликовано в: CSS, комментариев: 1Май
2008
Аккордеон на CSS без использования JavaScript
В статье "парочка аккордеонов" я рассказывал, как сделать простой аккордеон с использованием JavaScript. Однако, будучи "certified CSS 2.0 designer" и "certified XHTML 1.0 designer", я не смог удержаться, чтобы не сделать аккордеон без JavaScript (только на CSS/XHTML). Далее »
Автор: Vladimir, опубликовано в: CSS, HTML, комментариев: 11Апр
2008
Парочка аккордеонов
Недавно в одном из проектов появилась необходимость использовать аккордеон (подобный используемому на Desert Ridge Marketplace). Любят заказчики дешевые эффекты, ничего здесь не поделаешь
Чем мне не понравился аккордеон на Desert Ridge — это полной зависимостью от JavaScript: если JavaScript выключен, навигация по сайту переставала работать. Это мне не понравилось, и я решил написать свой.
Представляю два решения:
- Подменю сворачивается/разворачивается по щелчку, элементы меню не зависят друг от друга;
- Подменю сворачивается/разворачивается по щелчку, при этом не может быть более одного развёрнутого подменю.
При выключенном JavaScript оба аккордеона трансформируются в двухуровневый список. Далее »
Автор: Vladimir, опубликовано в: CSS, JavaScript, комментариев: 22Апр
2008
Размещение блока неизвестного размера в центре страницы при помощи CSS
Гуляя по Internet, совершенно случайно натолкнулся на статью "Стили CSS - центрируем объекты по центру веб-страницы".
Первой мыслью было, что автор начнёт рассказывать про вертикальное центрирование и всем известный margin: 0 auto. Но не тут-то было, всё гораздо интереснее
Далее »
Апр
2008
Подборка CSS-хаков для различных браузеров
В Internet есть много статей, посвященных вопросу "to hack or not to hack". Я не хочу обсуждать этот "извечный вопрос", только замечу: что бы там ни говорили противники хаков, хаки весьма и весьма популярны (к счастью или сожалению). Я решил сделать небольшую подборку CSS-хаков для различных браузеров. По сути дела, эта статья является компиляцией очень многих источников. Далее »
Автор: Vladimir, опубликовано в: CSS, комментариев: 7Мар
2008

Меня зовут Владимир, я программист-фрилансер, специализирующийся на Web-программировании и програмировании под Linux.
По совместительству занимаюсь администрированием LAMP/LNMP-серверов и техническим переводом.

