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

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

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

Новая разметка grid

css-grid-example-01

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

Сайт с примерами для легкого старта – gridbyexample.com.

Цвет каретки

Цвет каретки теперь можно задавать в css. Я даже и не ожидал, что кто-то об этом подумает. А вот как жизнь-то поворачивается. Поддержка в остальных браузерах конечно хромает, но не на обе ноги 😉

See the Pen caret-color by Artem Demo (@artemdemo) on CodePen.

Стиль декоративной линии

Линия text-decoration всегда зависела от цвета текста. С этим можно было только смириться и если нужно было как-то выходить из положения, от использовали альтернативные подходы. Однако, у нас теперь есть возможность задавать ее стиль напрямую! Поддержка, конечно, не во всех браузерах.

See the Pen text-decoration by Artem Demo (@artemdemo) on CodePen.

position:sticky

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

Что же это такое. Проще всего конечно показать – посмотрите пример ниже, просто проскрольте список, впечатлитесь, а потом посмотрите, что все это сделано без js. Да, Карл! Прилипающий заголовок при скролинге теперь можно делать без js! Просто автомагия какая-то…

See the Pen position: sticky by Artem Demo (@artemdemo) on CodePen.

Поддержка пока хромает, но мы бодро смотрим в будущее.

Ссылки по теме:
Chrome 57: Grid based layouts, Media Session API and more
Chrome 56: Web Bluetooth, CSS Position Sticky, and HTML5 By Default

Поделиться:
comments powered by Disqus