Bundle Transformer – это разработанное мной модульное расширение для Microsoft ASP.NET Web Optimization Framework (другие названия: ASP.NET Bundling and Minification, System.Web.Optimization, Microsoft.Web.Optimization и ASP.NET Optimization – Bundling). В апреле этого года я уже делал подробный обзор возможностей Bundle Transformer, но за это время данный продукт очень сильно изменился. Поэтому я решил написать данный обзор и рассказать об основных изменениях, которые произошли в Bundle Transformer за прошедшие полгода.
Читать полностью »
Рубрика «css» - 134
Вышел Bundle Transformer 1.6.2 или что изменилось за полгода?
2012-09-23 в 19:49, admin, рубрики: .net, ASP, ASP.NET, asp.net mvc, Bundle Transformer, Bundling and Minification, coffeescript, css, CSS Optimizer, CSSO, Google Closure Compiler, javascript, JSMin, less, Packer, System.Web.Optimization, UglifyJS, WebGrease, Клиентская оптимизация, метки: ASP.NET, asp.net mvc, Bundle Transformer, Bundling and Minification, coffeescript, css, CSS Optimizer, CSSO, Google Closure Compiler, javascript, JSMin, less, Packer, System.Web.Optimization, UglifyJS, WebGrease, клиентская оптимизацияПочему лучше верстать в соответствии с БЭМ — практические примеры
2012-09-21 в 15:23, admin, рубрики: bem, css, css3, БЭМ, верстка, яндекс, метки: bem, css, css3, БЭМ, версткаПро БЭМ (методология написания CSS от Яндекс — Блок__Элемент_Модификатор ← наиболее правильная запись расшифровки) нынче можно услышать на каждом шагу. Дело оказалось благим и покатилось по миру. Яндекс даже полез в W3C (связано это или нет — не знаю, но надеюсь, что да).
Думаю многие, кто ещё не пробовал, но прочитал описание БЭМ, задаются справедливым вопросом: «какая практическая польза от всего этого действа?» На самом деле, не смотря на то самое развёрнутое описание, конкретно уловить основную «фишку» довольно сложно. Описано конечно много плюсов и общее ощущение от методологии положительное, и кажется, что вроде как и не плохо бы попробовать, но нехватает чего-то конкретного. Прямо вот примера на живом что ли. Вот у меня сайт, вот вёрстка не по БЭМ, почему я должен всё менять? Особенно, если учесть тот факт, что БЭМ в принципе отметает все селекторы кроме классов, неужто за это время столько умных мужей в W3C не осознали, что всё настолько неправильно?
За сим возьму на себя смелость привести несколько примеров с которыми вы (конечно если вы каким-то образом связаны с вёрсткой) сталкиваетесь, не побоюсь этого слова, ежедневно. И что изменится в таких ситуациях если бы вёрстка была изначально выполнена в БЭМ.Читать полностью »
Анимация средствами HTML+CSS+JS — промо-сайт японского Nissan Note
2012-09-20 в 14:54, admin, рубрики: css, html, анимация, веб-дизайн, верстка, маркетинг, промо-сайт, метки: анимация, веб-дизайн, верстка, маркетинг, промо-сайтМожет быть, вы уже и видели промо сайт Nissan Note, но на мой взгляд он стоит того, чтобы веб-дизайнеры обратили на него внимание.
Очень простой, но элегантный и оригинальный прием: огромная простыня с картинками превращается в анимированную презентацию при быстрой прокрутке страницы.
Не открывайте ссылку на мобильном интернете! Размер страницы больше 20Мб.
Промо-сайт Nissan Note
Эффект отличный — сайт явно понравится запомнится посетителям, тем более с качеством японских сетей.
Немного технической статистики
По информации из Google Chrome:
- общее число запросов: 289;
- размер: 25.98Мб;
- время загрузки на моём ноуте: 1,3 мин;
- число «полезных» картинок: 46 (столько насчитал я);
Может ли обычный текст поглючить IE?
2012-09-19 в 22:16, admin, рубрики: bugs, css, html, Веб-разработка, верстка, ошибки на сайте, метки: bugs, css, html, верстка, ошибки на сайтеКаждый, кому приходилось заниматься разработкой сайтов, знает об ошибках браузеров.
Однако до сегодняшнего дня я думал, что нужно хотя бы использовать хитрые конструкции CSS, вложенные иерархии DIV-ов и таблиц, всякие float-ы и коллапсирующиеся margin-ы, чтобы налететь на реальную ошибку.
Я был уверен, что существует хотя бы одна ситуация, когда можно не опасаться никаких засад и приколов: мы всегда можем обернуть фрагмент обычного текста обыкновенным DIV-ом (display:block; и float:none;) и быть уверенными, что наш текст останется внутри него:
<DIV>
Этот текст никогда не выйдет за пределы обычного DIV-а!
</DIV>
Но на самом деле нет пределов в этом жестоком мире браузерного маразма…
Читать полностью »
Создаем самогенерирующийся CSS
2012-09-18 в 10:02, admin, рубрики: css, javascript, генерация, метки: css, javascript, генерацияСегодня я расскажу о том, как можно быстро и легко сделать стили, которые генерируются сами по себе. Итак начнем.
SCSS: пара полезных техник
2012-09-18 в 8:20, admin, рубрики: css, scss, web-разработка, адаптивная вёрстка, Веб-разработка, итераторы, Отзывчивый веб-дизайн, препроцессор, метки: scss, web-разработка, адаптивная вёрстка, итераторы, Отзывчивый веб-дизайн, препроцессор CSS – препроцессоры все популярнее среди веб – разработчиков. Почему?
Потому что они позволяют:
- Сэкономить время
- Применять принцип DRY в CSS
- Сделать код более читаемым
На данный момент наиболее популярными препроцессорами являются SASS и LESS.
О том, почему SASS лучше LESS, можно почитать в этой статье. Лучше ли — вопрос спорный, однако, я перешел с LESS на SCSS хотя бы потому, что тут есть:
- Циклы
- Условные операторы
- Списки
О сравнении синтаксиса SCSS и SASS, можно почитать в этой статье. Лично я выбрал SCSS по причине обратной совместимости с CSS и, как следствие, возможности быстро включать старые CSS файлы в проект посредством директивы import.
Об основах SCSS уже писали faiwer1 и AbleBoy2, здесь же я хочу описать пару техник, которые мне действительно помогли.
Читать полностью »
Почему использовать динамические стили иногда полезнее чем встроенные стили элемента?
2012-09-18 в 3:35, admin, рубрики: css, javascript, метки: css, javascriptВсе мы привыкли через JavaScript пользоваться встроенными стилями элемента. При этом люди не подозревают, что тем самым делают себе плохо в дальнейшем. Внешние стили (подключенные через элемент style) имеют значительно больше возможностей чем встроенные стили DOM элемента.
клон приложения «aelios weather» при помощи html5
2012-09-18 в 0:41, admin, рубрики: canvas, css, html, html5, ipad, javascript, Веб-разработка, метки: Canvas, css, html5, iPad, javascriptХочу поделиться с вами моим последним проектом.
Примерно год назад я скачал приложение Aelios Weather на iPad.
Оно задело мне глаз своей простотой и необычным интерфейсом.
И вот что получилось:
Смотреть тут
Как всегда, мне было интересно, насколько продвинут HTML5, и можно ли создать что-нибудь такое же.
В основе интерфейса лежит кружок, который вроде как компас и часы в одном лице.
Компас можно крутить, дабы показать дни недели или время суток.
На нем же можно увидеть время закатов и рассветов.
Внутри кружка появляется стрелка, которая автоматически направляется на самый большой по населению пункт в данном радиусе.
Используем Canvas в качестве фона и с оглядкой на будущее
2012-09-17 в 12:43, admin, рубрики: canvas, css, javascript, w3c, метки: Canvas, css, w3cHTML5 Canvas — элемент созданный для создания динамической графики на WebGL или обычном 2D контексте. Однако Canvas можно (и можно будет) использовать в браузерах в качестве фона CSS. Это мы рассмотрим в этой статье.
Эта небольшая статья делалась с упором на кроссбраузерность и стандарт W3C (CSS4 Images). На сегодняшний момент это можно использовать в браузерах: Mozilla Firefox, Safari, Google Chrome и прочих браузерах, поддерживающие -webkit-canvas, element или -moz-element в фонах CSS.
Эта идея нигде не была своровона — она тщательно продумана мной. Является дополнением к уже существующим темам о CSS, однако она касается и темы JavaScript в частности.
Сниппеты для Twitter Bootstrap
2012-09-16 в 11:07, admin, рубрики: css, html, snippets, Twitter Bootstrap, метки: html, snippets, Twitter Bootstrap Фреймоврк Twitter Bootstrap уже давно стал одним из самых любимых средств ленивых сторонников быстрого прототипирования и разработки интерфейсов, а где популярность там много разных сторонних интересных штук.
На этот раз я случайно попал на пополняющуюся коллекцию сниппетов.
Думаю многим пригодится, сейчас там набор небольшой (23 штуки), но уже достаточно полезный чтобы поделиться.
Кликабельные картинки:
