Paul_King Feb 20 2015 at 12:14

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

5 min

60K

ex-Wargaming corporate blog CSS *HTML *

Tutorial

+33

Comments 32

grigor7 Feb 20 2015 at 12:56

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

Paul_King Feb 20 2015 at 12:58

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

bethrezen Feb 20 2015 at 13:40

Есть 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 Feb 21 2015 at 10:25

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

увы

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

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

Vend3tta Feb 20 2015 at 13:45

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

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

sayber Feb 20 2015 at 13:14

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

UFO just landed and posted this here

Paul_King Feb 20 2015 at 13:35

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

MrGobus Feb 20 2015 at 13:48

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

Vend3tta Feb 20 2015 at 13:51

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

Paul_King Feb 20 2015 at 13:57

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

Paul_King Feb 20 2015 at 14:01

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

pepelsbey Feb 20 2015 at 15:22

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

-1

Paul_King Feb 20 2015 at 15:40

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

Argutator Feb 20 2015 at 16:56

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

gluck59 Feb 21 2015 at 17:03

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

-2

everyonesdesign Feb 20 2015 at 16:28

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

Paul_King Feb 20 2015 at 16:46

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

UFO just landed and posted this here

Paul_King Feb 20 2015 at 16:55

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

Akuma Feb 20 2015 at 17:57

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