Краткий обзор отличий LESS от SASS

Вчера пол дня потратил на подробное изучение LESS и его отличие от используемых нами SASS/SCSS.



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

[Из песочницы] Анимация спрайтов при помощи CSS, JS и Canvas

Всем привет. Пару дней назад совершенно случайно наткнулся в залежах дисков на «Космические рейнджеры 2: Доминаторы». Устанавливать не стал, так как сейчас не хватает времени, чтобы как следует в неё погрузиться. А решил посмотреть, что на диске находится. Посмотрел «Фан-Арт» и там увидел программку для ковыряния ресурсов рейнджеров. Вот и решил посмотреть, из чего же сделаны наши доминаторы. Покликав немного, нашел файлики с анимацией в формате GAI. Начал любоваться той анимацией. Захотел их сохранить в «гифки», но не как не давала та программка сохранить анимацию? Можно либо сохранить текущий кадр, либо все файлы в PNG. Я решил сохранить все кадры, а их было — 150. Картинки все есть, а почему бы не сделать с ними ту же анимацию.

Фонд Мозиллы идёт по стопам Webkit в поддержке трёхмерных CSS-преобразований и работает над собственным движком 3D

Старожилы Хабрахабра, возможно, помнят, что в июле 2009 года я перевёл и выложил сообщение с сайта css3.info о появлении таких трёхмерных CSS-преобразований в Webkit, благодаря которым стало можно без труда состряпать (на HTML да на CSS) вот какую зрелищную картинку:





Прошло вот уж больше двух лет, и всем нам наконец настала пора возвратиться к этой теме: поддержка совершенно аналогичных свойств CSS появилась в ночных сборках Firefox 10 (причём, что вполне понятно, это будут свойства с префиксами «-moz-» вместо «-webkit-»).



И более того: Linux.org.Ru сообщает (со ссылкой на geek.com) о том, что Фонд Мозиллы планирует создание собственного движка 3D-игр («Gladius») в рамках более обширного проекта («Paladin»), нацеленного на внедрение трёхмерности в Сеть Интернет, а первым примером этого является игра RescueFox, которая по своим качествам сравнима будет с играми на Flash.

Источник: Хабрахабр - Firefox
Оригинальная страница: Фонд Мозиллы идёт по стопам Webkit в поддержке трёхмерных CSS-преобразований и работает над собственным движком 3D

[Перевод] Программирование в облаке: Небольшой обзор Онлайн-IDE

Похоже, что всё сегодня переходит в «облака», которые являются туманным термин для определения программных приложений и хранилищ данных, размещенных на удаленных серверах где-то далеко по всему Интернету. Так что, если всё наше ПО переходит на облака, то почему бы не перейти инструментам, используемым для создания этого ПО? Ну, а некоторые инструменты, есть там прямо сейчас. Черт, даже GitHub недавно добавил базовые возможности редактирования. В этой статье мы рассмотрим некоторые многообещающие Онлайн-IDE.

[Перевод] Установка размеров с помощью единиц vw и vh

В CSS3 появились новые единицы измерения. (Я, кажется, уже говорил об этом.^eng) Вы уже слышали о px, pt, em и новых rem. Давайте рассмотри еще несколько: vw и vh.

Как сделать один сайт для всех устройств (Responsive Web Design)

Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:



«Нужно определить, какими устройствами могут пользоваться ваши посетители, проработать и создать для этих устройств представление вашего сайта, определить устройство посредством проверки заголовков браузеров, и отправить наиболее подходящее представление.»

Почему это глупо

Во-первых, никто не сможет предугадать, какими устройствами будут пользоваться ваши посетители. Нужно ориентироваться не на устройства, а на разрешения.







Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).



Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

[Перевод] Инвертирование страницы только средствами CSS

Я недавно увидела jQuery-плагин Paul Irish для инвертирования страницы. Он инвертирует каждый цвет на странице, включая изображения и CSS. Это мне напомнило о существовании ключевого слова invert для цвета контуров (outline) (к сожалению, поддерживаемом только в Opera и IE9+). В общем, я задумалась, как можно добиться такого же эффекта только средствами CSS.

Оказалось, что это достаточно просто:

[Из песочницы] Автоизменение высоты textarea при вводе текста

Обычно я занимаюсь серверным программированием на php, но время от времени выхожу наружу и копаюсь в верстке, стилях и яваскрипте. Недавно передо мной была поставлена задача изменять высоту textarea при вводе комментариев к различным объектам. В интернете материала по этому поводу так, сказать было не мало и не много. Первый взгляд устремился к реализованным решениям в таких крупных сетех как Вконтакте, Facebook, МойКруг. Однако, во время решения было множество препятствий и далеко не кросбраузерность.

Копируем исходный код без нумерации строк

Бывает при выводе информации требуется ее декорировать для лучшего восприятия, нередко оформление сопровождается в том числе и текстом. При выделении и копировании этой информации, оформление копировать не нужно, т.к. нужна только сама информация, и желательно в исходном виде. То есть при копировании часть выделенного текста не должна попадать в буфер обмена.
В моем случае это исходный код, который сопровождается нумерацией строк, так нагляднее и есть возможность сослаться на строку кода. Однако, если мы хотим скопировать часть кода, то он должен копироваться без номера строки.
Многие highlighter'ы этим грешат, при копировании кода копируют в том числе и номера строк. Выходят из ситуации по разному: либо используют хитрую верстку, при которой возможно несовпадении нумерации со строками (можно заметить на github например), или используют специальную кнопку, которая показывает в отдельном окне код без форматирования. Мне показались эти подходы неудовлетворительными, потому решил найти другое решение.
В данной заметке я опишу решение, к которому в итоге пришел. Решение, конечно, частное, но может кому то оказаться полезным в решении собственных задач.

[Ссылка] Рисуем геометрические фигуры с помощь CSS

Известный нам Chris Coyier создал демо-страничку с примерами как сделать различные геометрические фигуры с помощь CSS. Как это можно применить, каждый решит для себя сам.

Ссылка: http://habrahabr.ru/linker/go/113386/


Источник: Хабрахабр - Web-разработка
Оригинальная страница: [Ссылка] Рисуем геометрические фигуры с помощь CSS

8 полезных сервисов для веб-разработчика и дизайнера

Под катом — описание восьми сервисов, которые могут заметно облегчить жизнь веб-разработчика, верстальщика или дизайнера.

Библиотека CssUserAgent

На просторах англоязычного интернета наткнулся на javascript библиотеку с говорящим названием CssUserAgent. Если говорить вкратце, то при загрузке страницы на тег html навешиваются классы следующего вида:
ua-browsername
ua-browsername-major
ua-browsername-major-minor
ua-browsername-major-minor-build
ua-browsername-major-minor-build-revision

Под катом описание профита.

Ошибка в рекурсивной обработке CSS в IE 6

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

Первоначально PoC выглядел так:

<code>
<div style="position: absolute; top: -999px;left: -999px;">
<link href="css.css" rel="stylesheet" type="text/css" />
</code>

<code of css.css>
*{
color:red;
}
@import url("css.css");
@import url("css.css");
@import url("css.css");
@import url("css.css");
</code>

SVG с прозрачным фоном в Chrome и Safari

Здравствуйте, дорогие читатели. Те из вас, кто когда-либо работал с форматом svg, знают о противном и, что самое главное, чрезвычайно старом баге, проявляющемся в webkit-браузерах. Суть бага в том, что если вставить svg-картинку с прозрачным фоном через тег object, то safari и хром зальют её белым цветом — пример.

[Перевод] CSS трюки — пишем сайт без html

В качестве предисловия к переводу. Открываем Firefox/Opera, переходим по ссылке, смотрим исходный код страницы и удивляемся. Потому что его нет. Под катом рассказ, как такое можно сделать.

[Перевод] Релиз Firebug 1.6

Рабочая группа Firebug Working Group с гордостью представляет релиз Firebug 1.6!

Мы внедрили множество новшеств, которые приведены на странице заметок к релизу Firebug 1.6. Пожалуйста, просмотрите список изменений и дайте знать, если вам необходима любая дополнительная информация.

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

Мы значительно повысили стабильность Firebug'а и избавились от множеств утечек памяти — мы утверждаем, что это лучший релиз Firebug'а за всю историю.

Генератор градиентов на CSS

Хочу поделиться небольшой, но полезной тулзой для генерации Photoshop-like градиентов. Называется этот инструмент громко — Ultimate CSS Gradient Generator. Но большей значимости ему придает не имя, а создатели — это те же ребята, которые сделали ColorZilla, отличнейший плагин для Firefox.

Онлайн-песочница с табами и файлами

Для публикации примеров и задач на английской версии javascript.ru понадобилась песочница чуть помощнее чем jsfiddle/jsbin.

Написал, выложил бету на javascript.info/play/demo (сам сайт там пока полузакрыт).

Дополнительные возможности включают в себя:

• Файлы
• Табы
• Хоткеи (пока кроме Opera)
• Экспорт в zip
• Сохранение с возможностью листать предыдущие ревизии

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

P.S. Кстати, в Питере, Москве — завтра и через неделю мастер-классы по javascript — javascript.ru/mk.
В Украине — в декабре. Присоединяйтесь, коли будет интерес :).


Источник: Хабрахабр - Web-разработка
Оригинальная страница: Онлайн-песочница с табами и файлами

Дрессируем box-shadow

Разработчики W3C сделали box-shadow очень гибким свойством. Благодаря этому, можно получать весьма весьма интересные результаты, если использовать это свойство нетривиальным образом. В этой статье я напишу о некоторых эффектах, которые мне удалось получить при помощи «теневых технологий».

Пока я составлял примеры, я неожиданно обнаружил, что браузеры отображают их совсем неодинаково. В итоге, помимо простой демонстрации возможностей box-shadow, получился еще и маленький браузерный тест на поддержку CSS 3. Все примеры снабжены CSS-кодом и картинкой (общий объем всех PNG: 161 КБ). В статье я не стал прописывать свойства с вендорными префиксами -moz- и -webkit-, чтобы не ухудшать читабельность. В суммарной странице со всеми примерами эти префиксы есть (предупреждаю, что у Оперы есть баг с прорисовкой внешних box-shadow при прокрутке).

Шарик, отвечающий на вопросы

Не знаю в какой блог засунуть. Видимо, «я пиарюсь» подходит больше остальных.

Сегодня я решал один важный вопрос и переклинило меня, что непременно нужно воспользоваться шариком, отвечающим на вопросы (как в фильме «трасса 60»).

Гугл нормальных online-шариков не нашел: либо предлагают купить материальный шарик, либо online, но этот шарик страшно выглядит и/или с хитрой логикой (например, нужно ввести текст вопроса, который проходит валидацию).

Собственно, примерно за час написал свой шарик. Нужно просто кликнуть по нему и получишь ответ.

http://www.ecm7.ru/8ball/

Возможно, кому-то такой шарик покажется чуть приятнее остальных.


Источник: Хабрахабр - Я пиарюсь
Оригинальная страница: Шарик, отвечающий на вопросы