Сомневался в успешности метода, а также в том, что мой вечно салатовый пиксель, застывший полгода назад и постоянно мозоливший мне глаз, «станет на место». Но…
О чудо, помогло!

По мотивам cssing.org.ua.

Для вертикального выравнивания в блоках разработчики W3C создали замечательное свойство display: table-cell;, которое позволяет заставить какой-либо элемент отображаться как ячейка таблицы. При этом добавив vertical-align: middle; мы прекрасно справились бы с поставленной задачей, если бы не Internet Explorer, который ни в какую не хочет поддерживать свойство display: table-cell;.

Вот решил поделиться некоторым материалом, который сам составил в ходе экспресс-изучения SEO оптимизации и раскрутки сайтов. Просто попался видео-курс Юсуфа Губайдуллина, который продает его на promoguide.ru и решил воспользоваться случаем. Честно говоря, курс не понравился — нудно как-то рассказывается. Оценил содержание на 4 с минусом, а изложение — на 2 с плюсом. Само SEO весьма скучная вещь, но нужная, поэтому составил небольшую памятку для себя — чтобы не держать это в голове и легко вспомнить когда понадобится. Здесь два файла: первый — просто картинка, второй — в формате freemind, для тех, кто желает что-то для себя добавить.

Думаю, всем известен файловый менеджер Total Commander (несколько лет назад называвшийся Windows Commander). Популярность и удобство этого инструмента под Windows таковы, что многие пользователи просто не представляют себе, как можно пользоваться компьютером без TC. Я — в том числе.
Но также, к сожалению, у многих пользователей возникают различные трудности при работе с TC. Это нормально — ведь за пятнадцать лет своего существования, TC превратился в довольно сложную программу. Безусловно, чтение документации (русская справка для TC сделана даже лучше оригинальной) помогает, но далеко не всегда. Да и не все пользователи догадываются её прочесть…

Вот уже много лет, наряду с официальным форумом TC существует русскоязычный форум поддержки Total Commander. Сообщество помогает решать проблемы, даёт советы, делает переводы и т.д. Количество информации, накопленной за годы, действительно огромно. И это создаёт новую проблему — проблему поиска нужной информации.
Полтора года назад я занялся сбором и упорядочиванием этой информации. Было «перекопано» множество источников — русский форум, официальный форум, ру-борд… Да всего и не упомнишь. В результате появился сборник русскоязычной базы знаний о Total Commander в виде chm-файла.
Через некоторое время было решено сделать онлайн-вариант базы. После преодоления некоторых трудностей, работа была завершена: RU.TCKB Online.
Хотя портирование множества статей на wiki-движок заняло достаточно продолжительное время, я надеюсь, что теперь дело пойдёт быстрее: редактировать статьи смогут все участники комьюнити, а не только я один.

Какую информацию можно найти на RU.TCKB?
Большое количество статей, как для новичков, так и для опытных пользователей.
Ответы на вопросы, оформленные не как простой FAQ, но и как некоторое подобие учебника.
Материалы для разработчиков плагинов, утилит и скриптов.
Описания существующих плагинов и утилит (в настоящее время составляется полный каталог плагинов).
Множество другой полезной информации.


Проект абсолютно некоммерческий, не содержит никакой рекламы. Всё базируется на сплошном энтузиазме и желании помочь ближнему (а также, в некотором роде, и себе — ведь теперь на большинство вопросов можно ответить «RTFM», и дать ссылку).

Приглашаем всех пользователей TC взглянуть, и, возможно, даже поучаствовать.

RU.TCKB Online

7 июня EA Games запустили новую версию своего сайта. Интерфейс устроен неплохо, однако веб-шрифты выглядят такиииииими уродскими.

И, кажется, я нашёл решение, позволяющее сгладить шрифт при помощи CSS3-свойства text-shadow. Оно превосходно работает на Windows XP (отображаются ли шрифты ClearType или стандартным методом) и в более старых операционных системах, если браузер современный.



Посмотреть этот фокус.

Предыстория:

Начался сегодня день не очень удачно… Начальство начало совокуплять мозг по поводу нестандартного поведения браузера Chrome относительно атрибута placeholder (не исчезание подсказки при появлении фокуса на элементе)

Сайтов много, желания что-то переделывать мало.

В результате данной совокупности факторов появился доработанный плагин для jQuery — powerful-placeholder, который добавляет поддержку placeholder старым браузерам + в Chrome при появлении фокуса на элементе скрывает placeholder.

Поздравляю всех с пятницей и в качестве небольшого развлечения предлагаю представить, как бы выглядел популярный CSS-фреймворк Twitter Bootstrap, если бы он был от Google? Встречайте Plusstrap.

_{Предисловие переводчика.  «Костыль» PIE, позволяющий легко и уверенно обеспечить поддержку целого ряда свойств CSS3 во браузерах IE6, IE7 и IE8 (которые в этом смысле без «костыля» оказываются «хромыми» до убожества), давно заслужил горячую, страстную приязнь со стороны многих передовых сайтооформителей, и в этом качестве не раз на Хабрахабре упоминался (последний раз — 13 января 2011 г.). Я решил перевести нижеследующее, пускай и не новое, объявление (выход PIE 1.0 beta 3 состоялся 6 декабря 2010 г.) для того, чтобы в явном виде лишний раз донести до всех заинтересованных читателей весть о том, что в этот год PIE вступает обновлённым и улучшенным. Всем тем, кто впервые начал использовать PIE прошлой осенью или летом, настало время крепко призадуматься, во-первых, об апгрейде PIE (во имя ускорения работы сайтов), а во-вторых, об освоении новых, декабрьских свойств и возможностей PIE.}

Она подготавливалась долгое время, но вот третья бета PIE 1.0 наконец вышла! Этот выпуск содержит множество изменений; вот некоторые из крупных улучшений в нём:

• Скорость! — Крупнейшим и легкозаметнейшим улучшением в этом выпуске стала скорость. По итогам обширного профилирования были найдены наиболее медленные участки исполнения кода PIE, и многие из них подверглись оптимизации. Результаты ошеломляют: скорость PIE выросла до четырёх раз в сравнении со второй бетою, особенно заметно — в IE8. И это принесёт ускорение обработки страниц и вам, и читателям ваших сайтов!
   
• Ленивая инициализация — Даже с учётом всех улучшений скорости, если ваша страница весьма длинна, она может содержать сотни PIEфицированных элементов, которые суммарно приведут к заметной задержке. Однако есть шанс, что лишь немногие из них видны в окне просмотра изначально (после загрузки страницы), чего же тогда тратить время на обработку остальных элементов, прямо сейчас не видимых? Теперь вы можете задавать специальное свойство -pie-lazy-init: true в CSS, и тем самым откладывать инициализацию всех PIEфицированных элементов за пределами видимой области загруженной страницы. Они будут проинициализированы и отображены после того, как читатель до них допрокручивает страницу.
   
• PIE.js: отдельная версия на джаваскрипте — Теперь есть два способа использования PIE: традиционный (PIE.htc и behavior) и новый (отдельный джаваскриптовый файл PIE.js). Хотя указание файла .htc и свойства behavior останется рекомендуемым подходом, JS-версия позволяет употреблять PIE в некоторых таких ситуациях, в которых behavior не в состоянии сработать. Поглядите в документации по PIE.js подробности о том, когда и как вы можете пожелать прибегнуть к JS-версии.
   
• Работает с табличными элементами — Теперь применение PIE к элементам <table>, <th> и <td> приводит к корректной обработке и впредь не грозит бесконечным циклом.
   
• Работает с изображениями — Теперь вы можете использовать PIE для закругления уголков элементов <img>.
   
• -pie-png-fix — Теперь вы можете использовать PIE в качестве общего исправления альфа-прозрачности PNG для IE6, используя новое специальное CSS-свойство -pie-png-fix: true. Подробности изложены в документации по -pie-png-fix. Эту функциональность обеспечил Felix Gnass.
   
• Отключено в IE9 — Так как IE9 самостоятельно поддерживает множество тех же свойств и значений CSS3, что и PIE, и так как ещё не ясно, что IE9 будет поддерживать в окончательной версии, то на время PIE будет отключаться при работе в IE9; это временное решение будет пересмотрено по мере дальнейшего развития событий.
   
• position:fixed — Теперь PIE располагает свои элементы отображения корректно, когда применяется к элементам со свойством position:fixed (это никак не касается IE6, поскольку IE6 не поддерживает свойство position:fixed самостоятельно).
   
• Печать — Теперь PIE самостоятельно устраняет все свои элементы во время печати страницы. Помимо исключения целого ряда проблем с отображением, такое самоустранение также не пренебрегает пользовательскими настройками о непечатании фонов и обеспечивает экономию чернил.
   
• Множество других исправлений и улучшений — см. логи правок кода.

Скачайте PIE 1.0 beta 3 прямо сейчас!

В 2002 году Марк Ньюхаус (Mark Newhouse) опубликовал статью «Укрощение списков» ("Taming Lists"), довольно-таки интересную часть которой он посвятил объяснению того, как создавать собственные списки, украшенные псевдо-элементами. Почти десять лет спустя Николас Галлахер (Nicolas Gallagher) изобрел технику, которая использует псевдо-элементы из спрайтов, для создания фоновых изображений.
Сегондя, основываясь на опыте гигантов, мы постараемся развить эту тему. Мы обсудим, как можно украсить элементы без дополнительной разметки, используя только технику CSS-спрайтов. Результат будет работать также в Internet Explorer 6 и 7 версии.

Здравствуй %username%
Хочу представить твоему вниманию новый проект посвященный картам проезда и визуальному созданию кода для карт Google.

Некоторое время назад мой друг поинтересовался, а как встроить в свой сайт карту Google? Показав ему стандартный JavaScript код для встраивания карты в свой сайт я услышал, что это достаточно сложно для неспецалиста. И судя по всему для человека который далек от веб-разработки, это так и есть. В итоге родилась идея которую я и представляю на твой, %username%, суд. Сервис реализовал с помощью Google Maps API + Mootools + Yourls (Спасибо getnaked)

CSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:

<h2 id="first-title" class="magical" rel="friend">David Walsh</h2>

Этот один элемент имеет три аттрибута: ID, class и rel. Для выбора элемента в CSS вы можете использовать селектор ID (#first-title) и селектор class (.magical). Но знаете ли вы, что можно использовать для выбора атрибут rel? Это так называемый селектор атрибута:

h2[rel=friend] {
  /* woohoo! */
}

Ниже представлен оригинал моей статьи принятой для публикации в отличный компьютерный журнал C`t, который, к сожалению, не выжил на рынке и пока пребывает в весьма подвешенном статусе. Статья не была опубликована из-за того, что выпуски больше не выходят. Поэтому я решил опубликовать ее на Хабре, благо она отлично попадает в формат.

Хотел бы сразу отметить, что статья достаточно объемная и часть информации уже была опубликована мной на Хабре. Цель данной статьи объединить максимальное количество информации про новую версию Internet Explorer и представить ее в приемлемом объеме.

В комментах принимаю замечания и исправления.

Примечание: ниже представлен официальный перевод статьи «On having Layout» на русский язык. Статья не является окончательной. Этот перевод отражает 9 версию от 23.10.2007.

UPD текст статьи полностью убран в связи с его неконтролируемыми изменениями с момента публикации. Перепечатка доступна здесь

Многие программисты оптимизируют JavaScript и CSS-код, чтобы страница грузилась быстрее.
Но не все они делают прелоадеры, которые дают пользователю эффект субъективно более быстрой загрузки.

Скриншот при ширине окна браузера в 1024 пикселя

CSS tooltips очень популярны в современном веб дизайне, и вопреки широко распространенному мнению их довольно легко создать, особенно с помощью различных популярных javascript-framework-ов.

Вы, конечно, можете использовать стандартный плагин, но чтобы сделать простой tooltips, Вам достаточно написать всего 10 строк кода jQuery и CSS.

Итак, приступим. Прежде всего обратите внимание на структуру этого tooltips: это обыкновенная ссылка, которая будет выглядеть примерно так:

Давно мы о таблицах не говорили. Да и что о них говорить? Их оформлять надо. Табличное представление информации является одним из важных инструментов донесения данных до пользователя и несомненно должно быть удобным и легким для восприятия.

Существуют различные методы визуального разграничения информации в таблицах для большего удобства восприятия. Такие как разделение строк таблицы различным цветом. Этот способ известен под названием «Полосатые таблицы».

Сегодня я хотел бы поговорить о столбцах (колонках) таблицы. Признавайтесь, сколько раз вы чертыхались, прописывая класс для каждой ячейки в каждой строке, чтобы выделить ту или иную колонку фоновым цветом? :)

Внимание! Это все устарело, но публикацию не удаляю, чтобы все знали как мы мучались в 2007 году из-за IE6 :-)

Задача: сделать врезку с закругленными уголками с минимумом html-кода.

Как определить, что сайт сверстан качественно?
Есть много статей о том, как делать хорошо, но совсем нет – о том, как делать не надо, ведь даже валидный и кроссбраузерный сайт может быть сверстан отвратительно.

Из этой статьи вы узнаете:

• О плохих приемах современной верстки;
• О том, как даже не будучи профессионалом, за 5 минут определить плохо ли сверстан сайт или нет.

Уже довольно давно использую псевдокласс :first-letter для назначения двух фоновых изображений для одного элемента. Самое интересное что :first-letter, один из немногих псевдоклассов, которые работают в 6-ом Интернет Эксплорере. Но есть одна маленькая хитрость, которую нужно знать.

К делу. Как сказано выше, HTML элемент у нас один. Пусть это будет заголовок первого уровня.