Comments 29
Волшебно.
Разве что тут ещё и scss не нужен имхо, можно было с тем же успехом воспользоваться чистым css (переменные, например) + пропозалами в него (nesting), но это уже совсем мелочи и вкусовщина, да и фиксится за минуту на месте.
А, вот чего ещё — на тач-устройствах, для второго варианта, таскание его делает немного не то, чего может ожидать пользователь (перетаскивание влево из среднего состояния переключает вправо). Интересно, это можно на чистом css починить?
На чистом CSS, конечно, свайпы не реализуешь)
SCSS использовался только для удобства, всегда можно на codepen нажать «View compiled».
Не, оно компилирует в унылый css, проще руками переписать c scss на css с нестингом и переменными, чем compiled упорядочивать. =)
Переменные — поддерживают: http://caniuse.com/css-variables, но не все и не в таком виде. Спека — кандидат в рекомендацию, (как и flexbox, как и calc(), как и vw/vh, как и градиенты, как и многое другое). Полифиллится на стороне сервера через postcss.
Нестинг — не поддерживают, спека в черновике: http://tabatkins.github.io/specs/css-nesting/, но она от того же человека из гугла что и переменные выше. У него есть все шансы. Полифиллится на стороне сервера через postcss.
Кроме этого, в цсс довольно много других вкусных штук ожидается (полифиллы, опять же, есть).
scss не поддерживают, но разумные альтернативы его фичам — да.
А как их полифилят? Они же в браузере на лету могут значения менять.
Как на postCSS такое поведение реализовать https://googlechrome.github.io/samples/css-custom-properties/?
У переменных спека «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 не сполифиллить.
Это скорее мультипозиционный переключатель — что в общем то тоже клевая штука.
Если его еще оформить в виде крутящейся ручки с рисками, то будет еще круче.
Кстати, я правильно понимаю, что мы не ограничены тремя радиокнопками? И что мы можем сделать 4-х и более позиционные переключатели?
Чекбокс выглядит здорово!
Но если устраивает поддержка IE10+, то использовать input type="range" для второго варианта (ползунка) куда проще и удобнее. Пальцем опять же потягать можно.
Для стилизации даже конструктор CSS есть:
http://danielstern.ca/range.css
Обработка клика реализуется парой строк JS. Но, мне кажется, что таскать его куда интуитивнее чем кликать.
Пример тут (добавил снизу).
// Встречный ангулар-прикол: классы для вращения не писал, а прямо в разметке забиндил формулы в атрибут style.
Трёхпозиционный checkbox (aka tristate) без скриптов и смс