Nico_izo 30 окт 2011 в 16:01

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

2 мин

+71

Комментарии 41

lomalkin 30 окт 2011 в 16:13

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

Terion 30 окт 2011 в 16:52

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

MTonly 30 окт 2011 в 17:21

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

Terion 31 окт 2011 в 07:38

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

MTonly 31 окт 2011 в 16:24

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

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

Terion 1 ноя 2011 в 09:20

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

dordzhiev 30 окт 2011 в 16:36

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

q0p 30 окт 2011 в 16:51

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

Nico_izo 30 окт 2011 в 16:56

fixed

vburlak 30 окт 2011 в 16:58

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

urmuzov 30 окт 2011 в 17:00

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

Softlink 30 окт 2011 в 17:14

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

urmuzov 30 окт 2011 в 17:24

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

MTonly 30 окт 2011 в 17:25

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

egorinsk 30 окт 2011 в 19:13

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

MTonly 30 окт 2011 в 20:33

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

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

egorinsk 30 окт 2011 в 21:23

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

MTonly 31 окт 2011 в 16:22

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

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

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

fear86 30 окт 2011 в 19:36

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

mefcorvi 30 окт 2011 в 20:48

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

mefcorvi 30 окт 2011 в 20:46

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

Goryn 30 окт 2011 в 17:20

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

RedFox 30 окт 2011 в 20:18

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

Agent_Smith 30 окт 2011 в 21:43

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

TheShock 30 окт 2011 в 22:22

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

Nico_izo 30 окт 2011 в 22:39

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

smashercosmo 31 окт 2011 в 00:24

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

smashercosmo 31 окт 2011 в 00:26

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

Evengard 30 окт 2011 в 22:24

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

0mm 30 окт 2011 в 23:31

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

Agent_Smith 31 окт 2011 в 08:10

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

НЛО прилетело и опубликовало эту надпись здесь

maxshopen 31 окт 2011 в 15:26

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

НЛО прилетело и опубликовало эту надпись здесь

Paveldest 30 окт 2011 в 18:08

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

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

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

})

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

rwz 31 окт 2011 в 02:36

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