Введение в объектно-ориентированные CSS (OOCSS)

Ниже представлен вольный перевод статьи “An Introduction To Object Oriented CSS (OOCSS)“

Слышали ли вы когда-нибудь выражение «Содержание – наше все»? Если вы веб-дизайнер, который часто занимается работой, связанной с созданием контента, – то, вероятно, слышали. Это чересчур часто используемое, но правдивое выражение о том, что именно притягивает людей на сайт.

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

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

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Введение в верстку на базе CSS3 Flexible Box. Часть 3

Вендорные префиксы и кроссбраузерная поддержка

Вас, наверное, не удивит тот факт, что Internet Explorer не поддерживает (пока) модуль flexbox. Вот как CanIUse видит нынешнее отношение браузеров к модулю:

 

Хорошая новость в том, что Internet Explorer 10 планирует присоединиться к вечеринке. Скачайте превью платформы и ознакомьтесь с некоторыми интересными примерами.

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Введение в верстку на базе CSS3 Flexible Box. Часть 2

Анимация эластичных блоков

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

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru

Введение в верстку на базе CSS3 Flexible Box. Часть 1

Ниже представлен вольный перевод статьи “CSS3 Flexible Box Layout Explained“. Для удобства восприятия информации, я разделила публикацию на 3 части.

Модуль создания макета «резиновых» блоков – часто именуемый просто flexbox – это интересная часть проекта W3C. Спецификации flexbox по-прежнему не утверждены окончательно и периодически корректируются, так что остается ждать новостей от консорциума. Тем не менее, модуль является важной частью нового арсенала свойств, которые революционизируют сам подход к верстке. По крайней мере, он будет таковым, как только получит кросс-браузерную поддержку.

Ну, а пока мы можем поэкспериментировать с flexbox и даже использовать его для сознания веб-сайтов, а с помощью фолбэков заставить страницы визуализироваться корректно. Возможно, пройдет еще некоторое время, прежде чем мы начнем использовать его повсеместно, также как, скажем, border-radius, однако наша работа состоит в том, чтобы изучать новые технологии и использовать их везде, где только можно. Впрочем, когда дело касается таких фундаментальных вещей как макет страницы, следует соблюдать некоторую осторожность. 

Здесь можно оставить свои комментарии. Выпуск подготовленплагином wordpress для subscribe.ru