eCSStender или поддержка CSS3 без хаков

eCSStender — jS-фреймворк (размером около 20Кб), реализующий поддержку CSS3-селекторов, загрузку нестандартных шрифтов, прозрачности и других вкусностей в браузерах вплоть до IE6. Позволяет не задумываться о хаках.

Попрощайтесь со специфическими свойствами обозревателей и хаками, захламляющими файлы, и поздоровайтесь с кратким CSS. С eCSStender, когда вы пишете правила, браузеры обращают на них внимание.

— вольный перевод цитаты на главной ecsstender.org

Примеры:
Нестандартный шрифт через @font-face
Селекторы CSS3 в действии

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

Из вышеперечисленного можно сделать вывод, что это вполне перспективный проект, позволяющий создать обратную совместимость для многих браузеров и создавать стили в CSS3 без хаков. Он подходит в том случае, когда нужна поддержка различных свойств в одном крупном проекте.

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

3D карусели на jQuery для фотогалереи сайта

Представляю вашему вниманию 2 эффектные карусели на jQuery, которые могут отлично подойти для фотогалереи и в то же время обеспечивают кроссбраузерность в большинстве современных браузеров.

Cloud Carousel

Страница плагина и демо-версия.

Архив с исходниками.

Основные преимущества:

  • Работает под IE6+, Firefox, Chrome, Opera, Safari
  • Размер скрипта в сжатом виде — 5Кб
  • Настраиваемые отражения от изображений
  • Возможен скроллинг колесом мыши

Feature Carousel

Страница плагина и демо-версия.

Архив с примером.

Довольно интересная карусель с приятной анимацией смены изображений и гибкой возможностью настройки. Работает и под ie6, что радует.

Набор верстальщика

В поиске ответа на вопрос «Как верстать качественно, но делать это еще быстрее?» стоит узнать, чем же пользуются большинство верстальщиков.

Плагины для Firefox, помогающие при верстке

FireBug

— по праву на первом месте. Отличная работа с DOM-деревом, динамическое редактирование CSS, HTML, JavaScript. Пошаговое выполнение js-сценариев.

Страница плагина.

Web Developer

— необходим для отображения информации об элементах, «весе» документа, порядке вывода заголовков, внешнем виде верстки при печати и на мобильных устройствах. Также может изменять размер окна под различные разрешения и отправлять документ на валидацию.

Страница плагина.

Html Validator

— Проверяет валидность при открытии страницы. Результат проверки показывает иконкой в строке состояния.

Страница плагина.

Colorzilla

Добавляет инструмент — пипетку, которой можно выбирать цвет с любой части окна и копировать в буфер обмена.

Страница плагина.

Pixel Perfect

Как и следует из названия, проверяет, насколько точно сверстан макет относительно исходника, путем наложения полупрозрачного слоя поверх сверстанного документа.

Страница плагина.

FireShot

Делает скриншот страницы и позволяет попутно снабдить его аннотациями.

Страница плагина.

Инструменты для написания html-кода

Wordpad лучше всех!

Если серьезно, то Adobe Dreamweaver очень хорош своим функционалом, но зачастую для правки кода «на лету» подойдут более легкие программы.
Я, например, часто использую Notepad++ (это удобный редактор с подсветкой синтаксиса и функциями подстановки/замены).

Border-radius кроссбраузерно

На данный момент свойство CSS3 border-radius не поддерживается в полной мере браузерами IE 6,7,8 и Opera 9.64
(upd. В IE9 есть поддержка border-radius)

В файле стилей пишем следующее:

.sample{
-moz-border-radius: 15px; /*для Firefox */
-webkit-border-radius: 15px; /* Safari и Chrome */
border-radius: 15px; /* Opera 10.5+, а также версии других браузеров в будущем */
behavior: url(ie-css3.htc); /* Поддержка IE 6,7,8. */
}

Примечание №1
VML-скрипт ie-css3.htc берем с http://fetchak.com/ie-css3/

Примечание №2
Opera 9.64 отображает скругленные углы через SVG, поэтому
для поддержки border-radius в Opera 9.64 стоит использовать генератор скругленных углов.

Пример кроссбраузерного варианта border-radius с учетом всех браузеров:

.box{
position:relative; z-index:1; /*IE*/
background-color: #AAA;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #AAA url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IGZpbGw9IiNGRkYiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48cmVjdCBmaWxsPSIjQUFBIiByeD0iMTUiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiLz48L3N2Zz4=);
behavior: url(ie-css3.htc);
}
<div class="box"></div>