CSS селекторы в фронтенде можно сравнить с SQL операторами в бэкенде. Не смотря на их изначальную роль в CSS, мы активно используем селекторы в нашем Javascript коде, и, учитывая декларативный стиль селекторов, они являются приоритетными кандидатами на оптимизацию.Читать полностью »
Рубрика «css» - 101
Оптимизация обработки сложных селекторов
2014-01-25 в 11:54, admin, рубрики: css, github, javascript, jqueryWeb Components — будущее Web
2014-01-23 в 10:01, admin, рубрики: css, html, javascript, web, web components, метки: css, html, javascript, web, web components
Спустя какое время стало ясно, что основная идея Prototype вошла в противоречие с миром. Создатели браузеров ответили на возрождение Javascript добавлением новых API, многие из которых конфликтовали с реализацией Prototype.
— Sam Stephenson, создатель Prototype.js, You Are Not Your Code
Создатели браузеров поступают гармонично. Решение о новых API принимают с учётом текущих трендов в opensource сообществах. Так prototype.js способствовал появлению Array.prototype.forEach(), map() и т.д., jquery вдохновил разработчиков на HTMLElement.prototype.querySelector() и querySelectorAll().
Код на стороне клиента становится сложнее и объёмнее. Появляются многочисленные фреймворки, которые помогают держать этот хаус под контролем. Backbone, ember, angular и другие создали, чтобы помочь писать чистый, модульный код. Фреймворки уровня приложения — это тренд. Его дух присутствует в JS среде уже какое-то время. Не удивительно, что создатели браузеров решили обратить на него внимание.
Читать полностью »
Трюки с CSS-анимациями: мгновенные изменения, отрицательные задержки, анимация transform-origin и другое
2014-01-18 в 10:28, admin, рубрики: css, CSS-анимации, CSS-трансформации, Блог компании Нордавинд, Веб-разработка, псевдоэлементыПрименяя CSS-анимации в повседневной работе, я постепенно выработал привычку экспериментировать с ними в свободное время. Постоянно пытаясь реализовать очередную интересную задумку с использованием как можно меньшего числа элементов HTML, я обнаружил немало способов сделать с помощью CSS довольно неочевидные вещи. В этой статье я хочу поделиться некоторыми из них.
Быстрое изменение состояния посреди анимации
Обычно анимации используются для того, чтобы плавно менять свойства элементов со временем. Однако изменения могут также быть практически мгновенными. Для этого надо задать два ключевых кадра с очень маленьким интервалом, например в 0.001%:
@keyframes toggleOpacity {
50% { opacity: 1; } /* Turn off */
50.001% { opacity: 0.4; }
/* Keep off state for a short period */
52.999% { opacity: 0.4; } /* Turn back on */
53% { opacity: 1; }
}
Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:
Как мы ставили опыты на студентах
2014-01-17 в 9:36, admin, рубрики: css, html, htmlacademy, Блог компании HTML Academy, Веб-разработка, Учебный процесс в IT, эксперимент, метки: css, html, htmlacademy, экспериментВ статье про формат обучения в HTML Academy говорилось, что, скорее всего, он даёт более высокое качество обучения, чем другие форматы. В этой статье я расскажу о первых попытках проверки этого предположения.
Я работаю ассистентом в НИУ ИТМО, и осенью 2013 судьба преподнесла настоящий подарок: дисциплину «Информатика» и пять групп студентов-первокурсников. Что в этом такого хорошего? Во-первых, часть лабораторных работ (которые я и вёл) были посвящены HTML и CSS. Во-вторых, первокурсники — это ещё исполнительные, сознательные и ответственные студенты. Но самое главное, что мне достались электронщики, лазерщики и оптики и среди них было очень много абсолютных новичков в вёрстке.
Такой шанс упускать было нельзя. И на конец семестра был запланирован эксперимент (или скорее небольшой опыт), который давно хотелось провести. Суть опыта такова:
Читать полностью »
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю № 90 (29 декабря — 4 января 2014)
2014-01-04 в 19:45, admin, рубрики: 2013, 2014, css, css3, html, html5, jquery, JS, Блог компании Zfort Group, браузеры, веб-дизайн, Веб-разработка, дайджест, Интересное, итоги года, Новости, ресурсы, ссылки, ссылки на сми, тренды, метки: 2013, 2014, css, css3, html, html5, jquery, браузеры, веб-дизайн, Веб-разработка, дайджест, интересное, итоги года, новости, ресурсы, ссылки, ссылки на сми, трендыПредлагаем вашему вниманию последнюю в этом году подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
.jpg "Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю № 90 (29 декабря — 4 января 2014)")
Подарок всем front-end разработчикам. grunt(Jade+Stylus+Watch)
2013-12-31 в 22:41, admin, рубрики: css, grunt, html, jade, javascript, stylus, метки: css, grunt, html, jade, stylus .jpg "Подарок всем front end разработчикам. grunt(Jade+Stylus+Watch)")
Здравствуйте Уважаемые хабра-пользователи!
Во-первых, всех с уже наступившем Новым Годом. Желаю Вам добра и развития в Вашей области деятельности!
Во-вторых, в качестве небольшого подарка я подготовил небольшой инструмент, которым сам пользуюсь уже порядка полугода. Данный инструмент требует минимального времени на настройку, но это никак не влияет на отдачу, которую Вы получаете от его использования.Читать полностью »
Символ рубля при помощи CSS
2013-12-27 в 3:18, admin, рубрики: css, html, знак рубля, метки: css, знак рубляДобрый времени суток.
После вступления закона о знаке рубля на международном валютном рынке, многие из клиентов изъявили желание поставить в свои магазины именно знак рубля, а не «руб.».
Читать полностью »
Вёрстка табов для SEO на одном CSS
2013-12-19 в 13:56, admin, рубрики: css, internet explorer, tabs, метки: css, Internet Explorer, tabs Специалисты по оптимизации справедливо считают, что если документ (читай страница) имеет логичную структуру, то Гугл его любить будет сильнее. Однако дизайнеры склонны плевать на структуру — им главное чтоб большая картинка занимала пол листа. А скучные тексты пусть сидят в табах.
Между Сциллой и Харибдой пытается проплыть верстальщик. Когда не получается проплыть, он изобретает
Читать полностью »
Обзор литературы прочитанной за два года
2013-12-18 в 10:29, admin, рубрики: css, html, javascript, Блог компании i-Free, Веб-разработка, книги нужно читать, метки: css, html, javascript, книги нужно читатьПривет ! Когда я только начинал заниматься веб-разработкой, то даже не мог представить, сколько литературы нужно прочесть и какой объем знаний получить, чтобы стать нормальным специалистом. Кроме того, сфера постоянно меняется, и знания устаревают.
Для меня проблема заключалась в том, что я не люблю читать и чтение расцениваю исключительно как неизбежную работу, которую необходимо проделать, чтобы добыть материал из печатного вида. Но так получилось, что для повышения своей квалификации читать приходится. Я установил для себя норму — одна книга в месяц. С одной стороны, это мало, с другой, — много (если действительно придерживаться плана). Ну и раз уж мне приходится читать в принудительном порядке, это должно давать какую-либо выгоду. Каждая книга — это мучение, и я не вижу смысла тратить время на литературу, которая мне ничего не даст после. Поэтому каждый раз, попадая в книжный и держа в руках очередную книгу, я задаю себе вопрос: «А зачем?! Какой толк от этих кусков бумаги?! Что я вообще тут делаю?!». Чтобы вы не тратили время на книги, которые мне кажутся бесполезными, я решил написать небольшой обзор прочитанной за два года литературы и прочих найденных источников знаний. Весь материал ниже так или иначе связан с веб-разработкой и различными её аспектами. Ниже описаны только те книги, которые я прочитал. Те книги, которые «не осилил»/не дочитал (например, про NodeJS и пару фреймворков) не привожу.
Читать полностью »
CSS переменные в Firefox 29
2013-12-15 в 9:41, admin, рубрики: css, Firefox, Веб-разработка, метки: css, firefox На протяжении многих лет одной из самых частых просьб к рабочей группе CSS была реализация хоть какой-то поддержки объявления и использования переменных в таблицах стилей. После долгих обсуждений, в спецификации CSS Custom Properties for Cascading Variables был принят подход, позволяющий автору устанавливать пользовательские свойства в стилевых правилах, которые каскадируются и наследуются, как и другие наследуемые свойства. Обращения к переменным могут быть выполнены в определениях значений свойства, с использованием синтаксиса var().Читать полностью »