Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile, Bitcoins

CSS трюки и секреты

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

Тестируем скорость выборки css селекторов

Каждый раз как говорю о том, что нужно оптимизировать css селекторы, не использовать каскады, то слышу в ответ – “так и так быстро работает, тем более на небольшом количестве элементов”. И тут сложно не согласиться – действительно быстро, если немного элементов, более того вы скорее всего и не сталкивались толком с проблемами медлительности из-за кривых

Новая разметка grid, цвет каретки, стиль декоративной линии, position sticky

Немного новостей из мира обновлений в хроме. Остальные браузеры тоже подхватывают конечно, но пока выступают только в роли догоняющих. Новая разметка grid В сентябре прошлого года я писал о том, что в браузеры собираются внедрять новую css разметку. Так вот она уже в хроме! Можно брать и пользоваться. Кстати, поддерживается всеми современными браузерами. Сайт с

Скорость выборки css селекторов

Разные селекторы по-разному обрабатываются браузером (капитан очевидность). Как следствие одни работают быстрее чем другие. Имеет смысл внимательно подходить к работе с селекторами с самого начала, потому что когда уже нужно решать проблему с перформансом написано столько кода, что мама не горюй. Разные селекторы по скорости работы. Чем ниже, тем хуже. ID, например Класс, например

Коллеция веб демок – анимация, скрипты

Очень приятная коллеция примеров визуальных веб решений – анимация, скрипты. Аж больше 300 штук, собранных отовсюду в сети. Автор конечно проделал большую работу, разумеется большая часть этих примеров так и останется на полках фронтендеров, но для вдохнавления все равно стоит посмотреть 😉 Ссылки по теме: https://github.com/airen/DemoHouse https://airen.github.io/DemoHouse/ Update По какой-то причине автор удалили этот репозиторий,

Меняем в path атрибут “d” через css

Если кто не в курсе, то в SVG для описания некоей кривой используется строка, которая добавляется через атрибут “d”. Если нужно было его поменять то делали это при помощи JS. Оказывается, что уже можно и через CSS. Правде вопрос с поддержкой остается открытым 🙄 А теперь поясним коротеньким видео: sooooo this is new! 😳 pic.twitter.com/vjQneEno6h

Ограничиваем ширину элемента количеством символов

Ширину элемента можно выставлять не только стандартными размерами в пикселях или в процентах, но и в ширине символов шрифта. В некоторых случаях это может быть очень удобно. Однако, тут есть одно “но” (как же без этого, верно?) – это не работает с любым шрифтом. Точнее даже не так – это будет работать только с моношрифтами.

Новый css псевдокласс – :placeholder-shown

Продолжаем разговор о новых фичах в css. На повестке дня псевдокласс, который симафорит о том показан ли плейсхолдер в инпуте или нет. Новые возможности для оформления формочек, ае-е-е! See the Pen Pop up labels when Typing with :placeholder-shown by Artem Demo (@artemdemo) on CodePen. Разумеется работать не везде, но все современные браузеры понимают и поддерживают

CSS Grid – CSS разметка

Воу, воу, воу – мы приближаемся к невероятным изменениям. В браузерах появится CSS разметка. Казалось бы – что мы там не видели? Ан нет, ничего мы там не видели! И для затравки немного синтаксиса: Наверное, это пример не дает общей картины, давайте посмотрим визуально. Итак, у нас есть вот такой код: Новый css-grid позволит

CSS фреймворки – tachyons

Вот не понимаю той активности, которая появляется вокруг последних CSS фреймворков. Начнем хотя бы с того, что само понятие “CSS фреймворки” несколько ущербно, ибо это же только набор классов. Ну да ладно, не будем на этом зацыкливаться. Поговорим о tachyons – функциональный CSS для людей. Для начала посмотрим их видео инструкцию с официального сайта: OMG

Прозрачный треугольник при помощи css

Существует несколько способов для того чтобы сделать прозрачный треугольник исключительно используя CSS. И это уже очень круто, потому что не так давно этого можно было добиться только используя прозрачные png. SkewX() JS Bin on jsbin.com border JS Bin on jsbin.com