Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
9.0 + | 19.0 + | 26.0 + | 15.0 + | 6.0+ | 4.0 + | 16.0 + |
Версії CSS
CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
---|---|---|---|
Опис
Використовується для вказівки обчислюється значення властивостей, які в якості значень використовують розмір . Це дозволяє задавати значення засновані на додаванні або вирахуванні різних одиниць вимірювань, наприклад можна задати 100% - 20px. Якщо значення не може бути обчислено, воно ігнорується.
Синтаксис
властивість: calc (вираз)
Значення
Вираз являє собою комбінацію значень розмірів та наступних знаків математичних дій.
- + — додавання (width: calc (20px + 20px));
- - — віднімання (padding: calc (10% - 10px););
- * — множення (height: calc (20% * 2);)
- /— поділ. На нуль ділити заборонено (width: calc (100% /3);).
Знаки плюс і мінус повинні відбиватися пробілами з двох сторін.
Приклад
HTML5 CSS3 IE Cr Op Sa Fx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> calc </title> <style> div {border: 1px solid #000; height: 200px; background: url (images /figure.jpg) no-repeat; background-position: calc (100% - 20px) 0; } </style> </head> <body> <div> </div> </body> </html>
В даному прикладі задається положення фонового малюнка як 20 пікселів від правого краю.
Браузери
Firefox до версії 16.0 підтримує значення - moz-calc .
Chrome до версії 26.0 підтримує значення - webkit-calc .
Safari з версії 6.0 підтримує значення - webkit-calc .