Блог

Вот кодовое значение пузырька жидкости индикатора выполнения.

https://codepen.io/junebug12851/pen/mJZNqN

Когда я просматриваю его скомпилированный CSS-код, есть три фрагмента кода, которые я не могу понять, что они делают…

Вот и все:

 .green .progress .inner .water {
  top: 25%;
}


.red .progress .inner .water {
  top: 75%;
}


.orange .progress .inner .water {
  top: 50%;
}
 

Любая идея по этому поводу чрезвычайно ценится…

Вот что я получил на первый взгляд:

jQuery изменяет родительский класс (цвет) .progress , который является родительским для .inner , который является родительским для .water, на основе значения, которое вы вводите в поле процент (поле ввода). Таким образом, .water может иметь свои индивидуальные стили, но вы можете изменить цвет на основе родительского класса. Так, например, .water с родителем (или прародителем) .green будет иметь зеленый фон.

Значение свойства «top» — это самая высокая точка в жидкости, насколько близко или далеко она находится от вершины. Это всего лишь отправная точка. Похоже, jQuery изменяет фактические значения. Например, если окружность имеет высоту 400 пикселей, а дочерний элемент абсолютно расположен на вершине: 50%, верхняя часть дочернего элемента будет расположена на 200 пикселей ниже верхней части родительского элемента. Это отлично подходит для масштабируемости. Если вы хотите, чтобы окружность была размером 200 пикселей на мобильном устройстве, просто измените размер родительских элементов и относительную шкалу единиц соответственно.

Это обманчиво по ряду причин. Прежде всего, они не оформлены по порядку. Во-вторых, с удобочитаемой точки зрения, кажется, что было бы разумнее использовать bottom вместо top и переключать значения red и green . В зависимости от того, как они оформили остальную часть и как функционирует jQuery, это может нарушить дизайн. Наконец, цвета не меняются в тех же процентах. Цвета меняются на 33-34 и 66-67. Похоже, что верхняя часть жидкости находится примерно на 25% от верхней части при 67 и на 75% от верхней части при 34.