1. дома
  2. Вопрос и ответ
  3. Расчет стоимости для CSS

Расчет стоимости для CSS

2009-02-09 3 views
18

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

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

line-height: (height/2)px;

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

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

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

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

источник

2009-02-09 Sebastian Hoitz

+0

Есть ли вопрос где-то здесь? или это предложение функции CSS? Если это последнее, я предлагаю взять его на W3C или создать собственный веб-браузер. :-) –

+0

Я бы сказал, что это не настоящий вопрос и, скорее всего, он будет закрыт или изменен. –

+0

Хотелось бы узнать, что вы думаете об этом. –

ответ

8

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

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

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

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

источник

2009-02-09 13:00:48 okoman

1

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

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

источник

2009-02-09 13:01:02

+1

Потому что все еще есть люди с выключенным JS. –

+3

В этом случае им придется принимать фиксированный макет ... не сложно ... –

14

Почему это невозможно сделать в 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 синтаксиса.

источник

2009-02-09 14:35:49 bobince

+0

Ну, есть много случаев, когда это сработает. Рассмотрим «height: 5em; line-height: height-4px;» Нет проблемы рекурсии между высотой и высотой линии: высота фиксируется независимо от высоты линии. Но я не могу указать высоту линии в em или пикселях, потому что я не обязательно знаю, сколько пикселей в em на этой точке. Я понимаю, что есть случаи, когда мы попадаем в бесконечный цикл, и трудно писать код, когда алгоритм «обычно» работает. Возможно, может быть правило, которое просто говорит, что мы не будем рекурсивно: мы делаем один проход и останавливаемся. – Jay

0

вся суть CSS это быть каскадными таблицами стилей -

Разделения ФУНКЦИОНАЛЬНЫХ & DESIGN за слоем.

источник

2009-02-09 18:10:14

10

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

источник

2011-03-26 22:21:58 Mike

+3

Это неправда. Спецификации не говорят об использовании динамических значений ... Я вижу только константы. –

0

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

источник

2014-03-01 15:10:09

+3

SASS и LESS основаны на сервере и не имеют никакого отношения к рендерингу на веб-браузере. Следовательно, это не может использоваться для динамического вычисления значений на основе текущей высоты, например. в окне просмотра. –

Смежные вопросы

 Смежные вопросы