#фишка дня

Вам уже должен быть хорошо знаком input type=“number”. Кто-то наверняка даже пытался стилизовать раздражающие стрелочки.

Но мало кто знает, что это (и ещё одно, угадайте, какое) поле ввода предоставляет свои псевдоклассы: :in-range и :out-of-range. Уже понятно, что они делают: если вы установили атрибуты min и max, вышеуказанные псевдоклассы позволят воспользоваться этим знанием в CSS.

input:out-of-range ~ span {
  color: red;
}

И естественно, подъехал (вот буквально) шикарный CodePen на эту тему:
http://codepen.io/jh3y/pen/MWWowEb

👉 @htmlshit

#css #input #number #range

#фишка будущего

Сложно найти человека, которого бы не бесили медиа-запросы. Эти вечные min-width, max-width, screen and min-width... да зачем так сложно-то? 😭

Но Media Queries Level 4 дарят нам столь долгожданное и столь математически очевидное решение: ranges!

Ну согласитесь, писать

 (240px <= width <= 360px)

намного приятнее, чем

 (min-width: 240px) and (max-width: 360px)

...слышу отдалённые крики гуманитариев, которым спешу напомнить про 1023px, ага.

Нативно поддерживается только в Firefox:
https://caniuse.com/mdn-css_at-rules_media_range_syntax, но есть PostCSS-плагин: https://github.com/postcss/postcss-media-minmax

Если вы желаете, чтобы и Chrome добавил поддержку диапазонов, ставьте звёздочку на заведённом фич-реквесте: https://bugs.chromium.org/p/chromium/issues/detail?id=1034465

Удобной вам разработки :)

#css #media #ranges

#фишка дня

Если вы используете стандартные элементы вроде input type number, date, range (а их часто используют в админках, да и они потихоньку улучшаются), может возникнуть задача стилизовать значения, выходящие за рамки дозволенного.

И тут, оказывается, в CSS есть необходимые селекторы: :in-range и :out-of-range.

Ну уж input type number точно будет доволен :)

#css #range #selector #input

#фишка дня

Вам уже должен быть хорошо знаком input type=“number”. Кто-то наверняка даже пытался стилизовать раздражающие стрелочки.

Но мало кто знает, что это (и ещё одно, угадайте, какое) поле ввода предоставляет свои псевдоклассы: :in-range и :out-of-range. Уже понятно, что они делают: если вы установили атрибуты min и max, вышеуказанные псевдоклассы позволят воспользоваться этим знанием в CSS.

input:out-of-range ~ span {
  color: red;
}

И естественно, подъехал (вот буквально) шикарный CodePen на эту тему:
http://codepen.io/jh3y/pen/MWWowEb

👉 @htmlshit

#css #input #number #range