Расчет значения для CSS

Как веб-разработчик вы часто сталкиваетесь с проблемами, которые могут быть решены очень легко, если есть что-то вроде расчета стоимости.

Я часто задавался вопросом, почему невозможно сделать что-то подобное в CSS:

line-height: (height / 2)px;

Это позволит решить некоторые проблемы, с которыми вы столкнулись, когда хотите вертикально выровнять элемент, например. Трудно вертикально выравнивать элементы с помощью CSS прямо сейчас и создает довольно некоторые накладные расходы.

Это вам не нужно в тех случаях, когда вы знаете фиксированную высоту элемента. Но как только высота может быть изменена (более длинный текст и т.д.), Вы получите информацию об общей высоте элемента.

Было бы легко решить эту проблему, используя дополнительную JS, но это не может быть и речи о нормальных веб-сайтах. Итак, почему бы нам просто не добавить способность в CSS ссылаться на текущие значения и работать с ними?

Если вы посмотрите на такие вопросы, вы знаете, что я имею в виду:

Можете ли вы сделать этот html-макет без используя таблицы

Ответ 1

Я бы сказал, это потому, что CSS просто определяет, как что-то отображается браузером. Нет потока информации обратно в таблицы стилей или сказать это другими словами: CSS не является динамическим.

Если вы знаете высоту элемента и хотите изменить его каждый раз, когда отображается страница, вы можете создать таблицу стилей с PHP или другими языками. Затем вы также знаете, что такое половина высоты и может также установить ее.

Если вы не знаете высоту, это будет динамическое изменение. Сначала браузер должен будет отобразить страницу, а затем определить высоту элемента и отправить его обратно в CSS. Там высота линии вычисляется и изменяется на отображаемой странице. Но, может быть, поэтому и общая высота элемента тоже меняется. Теперь браузеру пришлось вернуться к CSS снова и так далее...

Просто не получится. CSS там, чтобы определить внешний вид страницы статически.

Ответ 2

почему невозможно сделать что-то подобное в CSS: line-height: (height/2) px;

Потому что это очень упростит введение логических циклов.

В этом примере, если вы явно не задали "высоту" (в этом случае также было бы легко явно установить "высоту строки" ), высота элемента зависит от высоты строки текста его содержимого, что в зависимости от высоты...

IE попытался представить это с помощью синтаксиса expression(), но на самом деле это не работает. Подход IE заключался в том, чтобы он пересчитывал шаг за шагом, поэтому, если у вас есть неопределенное выражение, он может постоянно перерисовывать ваши элементы по мере изменения значения выражения. Например, как это может пойти не так, попробуйте:

<div id="q" style="background: yellow; line-height: expression(document.getElementById('q').offsetHeight/2+'px');">
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
    Lorem ipsum fiddly boing bum dfg dsfgasdf fg asdfas.
</div>

При изменении размера окна браузера высота строки и, следовательно, offsetHeight изменится, что приведет к несогласованному макету. При определенном размере высота взорвется.

Существует случай, позволяющий использовать простые выражения, содержащие только константы, например:

line-height: (1em+4px);

но все, что связано с динамически рассчитанными свойствами, обречено на неудачу, поскольку IE позорно нарушен синтаксис выражения().

Ответ 3

CSS3.1 определяет calc() - он делает именно то, что вы просите. http://www.w3.org/TR/css3-values/#calc

Ответ 4

Вам могут быть интересны языки, которые компилируются в CSS, например SASS, LESS или Stylus.

Ответ 5

На этом была разработка. Все еще не на 100% готовы, но это интересно. Надеюсь, это поможет кому-то прийти на эту страницу в будущем!

https://developer.mozilla.org/en-US/docs/CSS/calc

Ответ 6

Почему это "не по правилам для обычных сайтов"? jQuery может сделать это довольно легко...

IE поддерживает вычисления в стилях, но он не рекомендуется, работает как собака и полностью несовместим со всем остальным.

Ответ 7

ПОЛНАЯ точка CSS должна быть Cascading STYLE Sheet -

Разделение функции FUNCTIONALITY и DESIGN по уровню.

Ответ 8

Вы можете использовать САСС и МЕНЬШЕ. если вы ничего не знаете о них, Google их:

Ответ 9

Это возможно больше;

line-height: calc(100vh/2)px;

*vh = viewportheight...