Обзор онлайн «песочниц» (sandboxes) для совместного тестирования кода

Всем привет!

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

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

Итак, в статье мы рассмотрим 10 бесплатных онлайн «песочниц» (или sandboxes), которые могут однажды помочь вам решить ту или иную задачи или проблему с помощью третьих лиц.

Красивые градиентные кнопки без картинок для всех браузеров

Всем привет!

Сегодня мы посмотрим как с помощью CSS3 без картинок сделать вот такие отличные кнопки. Для этого мы будет использовать следующие свойства: RGBA цвета, box-shadow, text-shadow и border-radius. Разметка и стили сделаны с использованием принципа graceful degradation, так что пользователи, браузеры которых не поддерживают указанные технологии, увидят кнопки в нормальном, но не таком хорошем качестве.

Рассматриваемые кнопки имеют три состояния (обычное, наведение и нажатие), их можно масштабировать и изменять пропорции.

Данная статья — перевод статьи «Cross-browser CSS gradient buttons».

Организация, оптимизация и кеширование CSS и JS файлов

Всем привет!

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

Этого вопроса в той или иной мере мы уже касались в некоторых наших статьях, но сегодня акцент будет не на внутренней организации файлов (кода), а на внешней (самих файлов). В конце статьи будет приведен скрипт для удобного автоматического сжатия и кеширования CSS и JS.

Сброс CSS-стилей

Клавиша F5 и Refresh в браузере - это, наверное, самые затертые кнопки у всякого верстальщика. Жаль что в браузере этого не видно :)

Большая часть работы верстальщика заключается во внесении изменений в стили и проверки их отображения в браузерах. С опытом приходит понимание принципов работы HTML+CSS и количество рефрешей уменьшается. А совсем опытные видят матрицу и браузеров вообще не открывают.

Сегодня у нас обзор методов ручного и автоматического обновления CSS без полной перезагрузки страницы.

Кросс-браузерный @font-face

Всем привет!

Сейчас все больше разработчиков начинают внедрять собственные шрифты в дизайн сайтов. Весной я написал статью о том, как с помощью различных библиотек (JS, Flash) можно использовать сторонние шрифты на сайтах.

Сегодня же я хочу рассказать о свойстве CSS @font-face, с помощью которого легче и удобнее всего использовать произвольный шрифт на сайте. Но есть одно «но», которое предстоит решить — разные браузеры требуют разные форматы шрифтовых файлов.

Оптимизация CSS для ускорения обработки браузерами

Всем привет.

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

Наверное, самый яркий пример тормозов, которые может вызвать CSS, это когда страница «дергается» при прокрутке в Ослике — это обычно связано с использованием :hover не у элементов <a>.

@-правила в CSS

Привет,

Сегодня у нас небольшая заметка (основанная на статье «Demystifying CSS At-Rules»), в которой речь пойдет о применении в CSS правил, содержащих в себе символ «@».

В статье будут рассмотрены правила @import, @media, @charset и популярный сейчас @font-face, который позволяет использовать собственные шрифты на страницах сайта (про сторонние шрифты у нас уже была статья «Как использовать любой шрифт на сайте»).

Всегда используйте :hover вместе с :focus

Мне очень понравилась Пашина статья о псевдоклассах. =) Специально по такому случаю в закромах была недавняя заметка с 456bereastreet.

В ней рассказывается о том, что может повлечь за собой игнорирование псевдокласса :focus.

Мы рассмотрим типы проблем и в итоге узнаем что делать, чтобы избежать их.

Псевдоклассы в CSS

Ну кто из нас не знает, что такое псевдоселекторы (или псевдоклассы) в CSS? Да-да, это то, что обычно пишут после селектора через двоеточие. Самые известные псевдоклассы это :link, :hover, :visited и :active.

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

В общем, тема псевдоселекторов еще не обсуждалась на нашем сайте, так что самое время приступить ;-)

Делаем более понятные и удобные файлы стилей

Привет,

Сегодня мы поговорим об организации файлов стилей. Мы рассмотрим как лучше всего организовывать файлы и форматировать код внутри них, чтобы через какое-то время вы не хватались за голову от того, что стилей стало больше, а порядка и понимания что где находиться — меньше.

Итак, поехали!