Pull to refresh

Comments 29

Волшебно.


Разве что тут ещё и scss не нужен имхо, можно было с тем же успехом воспользоваться чистым css (переменные, например) + пропозалами в него (nesting), но это уже совсем мелочи и вкусовщина, да и фиксится за минуту на месте.

А, вот чего ещё — на тач-устройствах, для второго варианта, таскание его делает немного не то, чего может ожидать пользователь (перетаскивание влево из среднего состояния переключает вправо). Интересно, это можно на чистом css починить?

SCSS использовался только для удобства, всегда можно на codepen нажать «View compiled».
На чистом CSS, конечно, свайпы не реализуешь)
SCSS использовался только для удобства, всегда можно на codepen нажать «View compiled».

Не, оно компилирует в унылый css, проще руками переписать c scss на css с нестингом и переменными, чем compiled упорядочивать. =)

И сразу отмести IE? Пользователям нужен результат, а не красота в коде, увы
А что браузеры уже поддерживают scss? Или я что то не так понял?
Ещё раз scss — лишь для удобства написания, он компилируется в обычный православный CSS. На codepen можно посмотреть компилированный CSS.

Переменные — поддерживают: http://caniuse.com/css-variables, но не все и не в таком виде. Спека — кандидат в рекомендацию, (как и flexbox, как и calc(), как и vw/vh, как и градиенты, как и многое другое). Полифиллится на стороне сервера через postcss.


Нестинг — не поддерживают, спека в черновике: http://tabatkins.github.io/specs/css-nesting/, но она от того же человека из гугла что и переменные выше. У него есть все шансы. Полифиллится на стороне сервера через postcss.


Кроме этого, в цсс довольно много других вкусных штук ожидается (полифиллы, опять же, есть).


scss не поддерживают, но разумные альтернативы его фичам — да.

У переменных спека «Editor’s Draft, 19 August 2016».
Таки версия 2015 в RC

Последняя версия спеки (в данном случае https://drafts.csswg.org/css-variables/) — зачастую Editor’s Draft, и это та самая версия, на которую надо ориентироваться. Там обычно учтены последние замечания. Считайте это «master»-ом =).


Но у этих черновиков в заголовке есть ссылки на последние опубликованные версии, в данном случае это:


Latest published version: https://www.w3.org/TR/css-variables-1/

Которая и является Candidate Recommendation.


Это справедливо и для других W3С спек: последняя («Editor’s Draft») — основная и самая интересная, а статус смотреть по «Latest published version». Ну, кроме тех, что уже зарелизили, конечно.

Согласен, без динамики и скриптов в клиенте — никак.


Под полифиллами я имел ввиду, что оно работает на таком же уровне, как и переменные в scss, о котором был разговор выше. Ответ был в том, что браузеры scss не поддерживают, а вот его фичи — или поддерживают, или планируют, и полифиллятся эти фичи временно на стороне сервера через postcss — то есть получается ничуть не хуже, чем postcss.


Так-то новые возможности css могут давать гораздо больше, чем то, что можно в статике сполифиллить. Те же vh/vw без js не сполифиллить.

Стоит заметить, что это не совсем чекбокс. Этот компонент не получится использовать также, как в Gmail.
Это скорее мультипозиционный переключатель — что в общем то тоже клевая штука.
Если его еще оформить в виде крутящейся ручки с рисками, то будет еще круче.
Кстати, я правильно понимаю, что мы не ограничены тремя радиокнопками? И что мы можем сделать 4-х и более позиционные переключатели?
Да, можно сколько угодно наклепать состояний при желании.
И кстати можно спокойно застилить в виде крутящихся ручек. Это уже вопрос стилизации.
На самом деле по функционалу это всё тот же набор радио-кнопок, просто застилизованный в виде одного элемента.
Добавил вариант с поворачивающими ручками:
image

Чекбокс выглядит здорово!
Но если устраивает поддержка IE10+, то использовать input type="range" для второго варианта (ползунка) куда проще и удобнее. Пальцем опять же потягать можно.

Тогда получится наоборот — двигать можно, а щёлкнуть нельзя.
И как его стилизовать?

Для стилизации даже конструктор CSS есть:
http://danielstern.ca/range.css


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

Парой строк js можно и свайп реализовать) Глянул я как это стилизуется — кошмар, сплошные вендорные псевдоэлементы. В общем, главное в моём посте — показать как можно застилить набор radio-инпутов, а применять или нет — это уже каждый сам решает.
Прикольно, конечно, запилить всё это на css. Типа ради спорта. На ангуляре будет чуть меньше разметки, и на порядок меньше CSSa. Правда есть микродоза JS (таки пришлось объявить приложение и пустой контроллер)
Пример тут (добавил снизу).
// Встречный ангулар-прикол: классы для вращения не писал, а прямо в разметке забиндил формулы в атрибут style.
Ну я бы не сказал что у вас разметка сильно проще, и CSS много меньше. Сейчас в примере много CSS так как три варианта переключателей реализовано. А так на JS, конечно можно что-то «одной строчкой» сделать, только предварительно несколько десятков килобайт скриптов подключить)
Аналогично реализовывал переключение форм регистрации/входа. Честно говоря, думал, что эта практика известна =)
Идея не сложная, только почему то для такого элемента не распространена.
Довольно много кода css вместо нескольких строк на js думаю оказывают влияение на распространение.
Only those users with full accounts are able to leave comments. Log in, please.