Nico_izo Oct 30 2011 at 20:01

Калькулятор на CSS3

2 min

8.9K

CSS *

+71

Comments 41

lomalkin Oct 30 2011 at 20:13

Я этого джва года ждал, когда приходилось заниматься версткой! Теперь ждем поддержки этой возможности в других браузерах.
P.S. Автор — эстет, какие и двигают прогресс! Спасибо, порадовал!

+14

Terion Oct 30 2011 at 20:52

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

MTonly Oct 30 2011 at 21:21

С 2006-го года уж тянется, а до сих пор поддерживается только в двух браузерах (Firefox 4+, IE9+).

Terion Oct 31 2011 at 11:38

Ну для IE8- можно имитировать выражениями. Будет работать медленнее, но будет.
А вот с trident и webkit — дело дрянь(

MTonly Oct 31 2011 at 20:24

CSS-функции выгодно отличаются от IE Expressions тем, что работают даже при отключённом JS.

Trident — это, кстати, и есть движок IE.

Terion Nov 1 2011 at 13:20

Тьфу, балда. Я имел ввиду Presto. Оперу, тобишь

dordzhiev Oct 30 2011 at 20:36

В IE9 тоже работает
habrastorage.org/storage1/b9db77c1/186995a3/dc0ada40/fb0d888b.png

q0p Oct 30 2011 at 20:51

У вас опечатка: замените divise на divide.

-1

Nico_izo Oct 30 2011 at 20:56

fixed

vburlak Oct 30 2011 at 20:58

Мисье, а вы не без извращений ^_^

-3

urmuzov Oct 30 2011 at 21:00

Неужели теперь можно будет сделать height: -moz-calc(100% - 40px) и все будет работать?

Softlink Oct 30 2011 at 21:14

А толку от того, что оно будет работать только в фф? Тут даже костыль не подставишь никакой. Надо ждать поддержки хотя бы современными вебкитами и оперой. На старые браузеры уже можно немного забить, ради этой прелести.

urmuzov Oct 30 2011 at 21:24

Дай бог webkit скоро подтянется, а там уж и опера никуда не денется.
Так было со всеми вводимыми CSS свойствами. Когда-то и border-radius никем не поддерживался.
Через год-два calc() будет нормой, а в виду того что IE уже его поддерживаем, может быть даже и быстрее.

MTonly Oct 30 2011 at 21:25

В таких ситуациях очень пригодилась бы возможность доступа к неподдерживаемым CSS-свойствам средствами JavaScript.

egorinsk Oct 30 2011 at 23:13

Интернет эксплорер позволяет читать незнакомые свойства, через объект currentStyle, по крайней мере 7-я его версия. Как всегда, w3c браузеры отстают.

MTonly Oct 31 2011 at 00:33

Доступа к неподдерживаемым значениям поддерживаемых свойств в IE нет (функция calc() подставляется именно в качестве значения). Например, для свойства display элемента с display: table IE6/7 вернёт значение block.

Незнакомые свойства в IE тоже доступны не все: моя практика показала, что нельзя прочитать значения неподдерживаемых свойств, имена которых начинаются так же, как поддерживаемые свойства. Например, значение border-spacing в IE 6/7 (кажется, 7) недоступно.

egorinsk Oct 31 2011 at 01:23

Там просто вроде бы надо еще как-то с названием свойства изгаляться: например убрать минусы в начале (-wekit-transition превращается в webkitTransition) и сделать кемелкейсом (хотя я не уверен). Ведь можно читать свойство через currentStyle.getpropertyValue(), а можно через индекс массива style[...].

MTonly Oct 31 2011 at 20:22

Было, разумеется, испробовано множество вариантов. Для свойства border-spacing (начинающегося со слова, совпадающего с названием известного IE свойства border) возвращалась пустая строка.

При этом для нестандартного свойства -dt-border-spacing (начинающегося с префикса, не совпадающего ни с одним известным IE свойством) — при доступе тем же способом без проблем возвращалось нужное значение.

Впрочем, если приведёте проверенный лично вами гарантированно работоспособный вариант прямого чтения в IE любых значений любых свойств — welcome. ;-)

fear86 Oct 30 2011 at 23:36

height: -ie6-calc(100% — 40px) — оказался бы в разы полезнее.

mefcorvi Oct 31 2011 at 00:48

думаю, что там это делается как-то так:
height:expression((this.parentNode.scrollHeight - 40) + "px");

mefcorvi Oct 31 2011 at 00:46

Мне кажется, что с учетом coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/ это в большинстве ситуаций и не нужно.

Goryn Oct 30 2011 at 21:20

Ждём циклы и условия.

+10

RedFox Oct 31 2011 at 00:18

и вакансий «css-программист» :)

Agent_Smith Oct 31 2011 at 01:43

а потом блоки и замыкания в css4.

TheShock Oct 31 2011 at 02:22

а потом — OOCSS, потом — node.css, потом — HMVC фреймворки на CSS с ORM, шаблонизатором и прочим, а потом — какой-то маленький, удобный и простой язык для описания стилей html-документа.

Nico_izo Oct 31 2011 at 02:39

А что, никто не мешает «форкнуть» стандарт и сделать классы/функции/межселекторные обращения и т.д. :)

smashercosmo Oct 31 2011 at 04:24

А потом Гугл свою альтернативу, которая должна будет «исправить фундаментальные недостатки css»))

smashercosmo Oct 31 2011 at 04:26

*выпустит свою альтернативу

Evengard Oct 31 2011 at 02:24

А потом многопоточный css в css10)

0mm Oct 31 2011 at 03:31

Программирование микроконтроллеров на CSS99++

Agent_Smith Oct 31 2011 at 12:10

наверное так оно и буыло задумано, новый стандарт С~~plu~~S~~plu~~S

UFO just landed and posted this here

maxshopen Oct 31 2011 at 19:26

хочу вставки на асме

UFO just landed and posted this here

Paveldest Oct 30 2011 at 22:08

Для хрома можно написать что-то такое, когда новое выражения или после «Compute»

$('td').click(function() {

 $('#wheretocalc').val(' ')

})

Да и значения с 12 цифрами после запятой меня впечатлило.

rwz Oct 31 2011 at 06:36

Для такой штуки вполне можно себе написать polyfill на джаваскрипте. И детектилку для Modernizr. В мозилле нативно юзать, в webkit/opera/ie8-9 пересчитывать по onReady, onResize и по domMutation, а в стареньких ие юзать expressions.