Расчет стоимости для CSS - PullRequest
19 голосов
/ 09 февраля 2009

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

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

line-height: (height / 2)px;

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

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

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

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

Ответы [ 8 ]

13 голосов
/ 09 февраля 2009

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

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

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

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 синтаксис выражения ().

12 голосов
/ 27 марта 2011

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

8 голосов
/ 09 февраля 2009

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

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

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

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

4 голосов
/ 04 марта 2013

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

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

4 голосов
/ 26 июля 2011

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

1 голос
/ 09 февраля 2009

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

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

0 голосов
/ 16 июня 2019

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

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

*vh = viewportheight...
0 голосов
/ 01 марта 2014

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...