Подборка интересных CSS-рецептов «Голые пятницы #4»

[grigor7]

За sticky аплодирую стоя! Теперь еще одна фича делается без js.

[Paul_King]

Жаль только, что хром пока не собирается его поддерживать)

[bethrezen]

Есть polyfill:

• fixed-sticky by the Filament Group (requires jQuery)
• position–sticky- by Matthew Phillips (Uses Modernizr for detection)
• position: sticky, part of Philip Walton’s Polyfill.js library
• position: sticky CodePen demo by Fabrice Weinberg (requires jQuery)
• Stickyfill by Oleg Korsunsky (IE9+)

[funca]

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

увы

увидел ссылки фиолетовыми.

Или полноценная реализация полифилла для position: sticky это какой-то прямо вызов — найдется кто смелый? :)

[Vend3tta]

Ну, строго говоря, Хром-то его поддерживает прекрасно (именно в Хроме поддержка position: sticky и появилась в первую очередь, хоть и была спрятана за флагом). Начиная с 37й версии (судя по caniuse), его поддержку временно убрали, сославшись на сырость спецификации.

code.google.com/p/chromium/issues/detail?id=231752

[sayber]

Первый пример с липким блоком, у меня не работает в Chrome 40 и Safari 8
Mozilla FireFox 35 — флагман в этом деле.

[Paul_King]

Спасибо! Добавил в статью)

[MrGobus]

Вопрос по счетчику(кам) (counter), сколько их может быть на странице?

[Vend3tta]

Сколько захотите. Инициализируете новый по counter-reset и добавляете инкремент через counter-increment.

[Paul_King]

Vend3tta написал все верно.
Да, по сути, вы просто вводите новые переменные для разных счетчиков.

[Paul_King]

Vend3tta написал все верно.
Да, по сути, вы просто вводите новые переменные для разных счетчиков…

[pepelsbey]

Wargaming узнал о существовании CSS.

[Paul_King]

Я вас удивлю: во всех наших сайтах используется CSS. А в некоторых даже CSS3 :)

[Argutator]

Ну, по судя по опросу, благодаря посту Wargaming 300 проголосовавших тоже узнали что-то новое — к чему тут сарказм?

[gluck59]

Отдел по двиганию кнопки разбежался в полном составеъ.

[everyonesdesign]

Мне кажется, опрос в конце не совсем корректный:
Я, например, знал все, что в этой статье описано, но мне подборка понравилась =)
В конце концов, повторение — мать учения.

[Paul_King]

Спасибо)
Вы правы. Переименую в «Оказалась ли подборка полезной» :)

[Paul_King]

Совершенно верно. В примере оставил именно так для наглядности.

[Akuma]

А почему CSS счетчики бесполезны в реальных проектах?
Очень удобно стилизовать циферки в OL списках. Например так: github.com/very-good/css-code-style/blob/master/hints.md

[Paul_King]

Имел ввиду, бесполезны конкретно при создании пэйджинации)
А так, возможностей очень много. Хватило бы воображения.

[rafuck]

Спасибо, про counter не знал. Почему-то очень напомнило реализацию счетчиков в TeX

[Paul_King]

Перечисленные свойства — это содержимое миксина stretch?

[Paul_King]

Главная прелесть Object-fit в компактности)

[Jabher]

За currentColor — огромное спасибо, этого свойства реально не хватало порой

[Paul_King]

Всегда пожалуйста)

[Kallist]

Спасибо! Всё знал, но с currentColor ещё не сталкивался.

[grigor7]

В LESS/SASS и не с таким столкнетесь.

[Kallist]

Почитал статью о них здесь же на Хабре, выглядит как сильный инструмент