Поддержание вертикального ритма на произвольных изображениях - PullRequest
Новая
       36

Поддержание вертикального ритма на произвольных изображениях

1 голос
/ 29 марта 2019

Я хотел бы иметь возможность поддерживать вертикальный ритм на странице, которая содержит изображения неизвестных высот. Я нашел this , но использую vanilla-js , а не jquery, поэтому о плагине jquery не может быть и речи. Другой ответ требует, чтобы базовая линия была установлена ​​ в javascript . У меня уже есть это установлено в моих файлах SCSS! Я очень ленивый программист и не хочу набирать его дважды. Подожди, я этого не говорил. Я имел в виду, что меня беспокоит возможность дублирования жестко закодированных значений повсюду.

здесь - это еще одно решение, от которого я должен отказаться, потому что мне не нравится вся эта дополнительная разметка по сравнению со стилем. Это напоминает мне о днях, когда вам приходилось вкладывать <div> метки в четыре глубины, чтобы получить закругленные углы.

Мне пришло в голову использовать сгенерированный контент для передачи JSON в javascript. Я думал, что я гений, но потом нашел этот пример, используя тот же метод.

Есть ли лучший способ сделать это?

Все, что мне действительно нужно, - это способ указать, что высота элемента должна быть кратна некоторому заданному значению. Неужели нет способа сделать это только с помощью CSS? Ответы, которые я видел, говорят, что нет. Я чувствую, что calc может почти справиться с работой, но я не достаточно, чтобы понять это. Есть ли лучший способ получить значение для JavaScript?

Заранее спасибо.

1 Ответ

0 голосов
/ 31 марта 2019

Мне пришло в голову, что лучше использовать CSS-переменные, а затем читать эти значения из javascript, как описано здесь .

Это имеет преимущества:

  1. , использующий каскад, позволяющий нескольким областям страницы иметь собственный вертикальный ритм.
  2. не требует анализа содержимого псевдоэлемента ::after как JSON.Браузеры явно не согласны с тем, как экранировать встраивание кавычек в атрибут content.

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

const foo = document.getElementsByClassName('foo')[0];
const bar = document.getElementsByClassName('bar')[0];
const fooStyles = window.getComputedStyle(foo);
const barStyles = window.getComputedStyle(bar);
const fooVR = fooStyles.getPropertyValue('--vertical-rhythm');
const barVR = barStyles.getPropertyValue('--vertical-rhythm');

foo.innerHTML = '--vertical-rhythm: ' + fooVR;
bar.innerHTML = '--vertical-rhythm: ' + barVR;
:root {
  line-height: 1.5rem;
  /* $line-height */
  --vertical-rhythm: 3rem;
  /* 2 * $line-height */
}

.foo {
  --vertical-rhythm: 6rem;
  /* 4 * $line-height */
}
<div class="foo"></div>
<div class="bar"></div>
...