Как рассчитать em css

Единицы измерения: px, em, rem и другие

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

Пиксели: px

Пиксель px – это самая базовая, абсолютная и окончательная единица измерения.

Количество пикселей задаётся в настройках разрешения экрана, один px – это как раз один такой пиксель на экране. Все значения браузер в итоге пересчитает в пиксели.

Пиксели могут быть дробными, например размер можно задать в 16.5px . Это совершенно нормально, браузер сам использует дробные пиксели для внутренних вычислений. К примеру, есть элемент шириной в 100px , его нужно разделить на три части – волей-неволей появляются 33.333. px . При окончательном отображении дробные пиксели, конечно же, округляются и становятся целыми.

Для мобильных устройств, у которых много пикселей на экране, но сам экран маленький, чтобы обеспечить читаемость, браузер автоматически применяет масштабирование.

  • Главное достоинство пикселя – чёткость и понятность
  • Другие единицы измерения – в некотором смысле «мощнее», они являются относительными и позволяют устанавливать соотношения между различными размерами

Существуют также «производные» от пикселя единицы измерения: mm , cm , pt и pc , но они давно отправились на свалку истории.

Вот, если интересно, их значения:

  • 1mm (мм) = 3.8px
  • 1cm (см) = 38px
  • 1pt (типографский пункт) = 4/3 px
  • 1pc (типографская пика) = 16px

Так как браузер пересчитывает эти значения в пиксели, то смысла в их употреблении нет.

В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

Относительно шрифта: em

1em – текущий размер шрифта.

Можно брать любые пропорции от текущего шрифта: 2em , 0.5em и т.п.

Размеры в em – относительные, они определяются по текущему контексту.

Например, давайте сравним px с em на таком примере:

24 пикселей – и в Африке 24 пикселей, поэтому размер шрифта в <div> одинаков.

А вот аналогичный пример с em вместо px :

Так как значение в em высчитывается относительно текущего шрифта, то вложенная строка в 1.5 раза больше, чем первая.

Выходит, размеры, заданные в em , будут уменьшаться или увеличиваться вместе со шрифтом. С учётом того, что размер шрифта обычно определяется в родителе, и может быть изменён ровно в одном месте, это бывает очень удобно.

Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать.

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт.

Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р , g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

В спецификации указаны также единицы ex и ch, которые означают размер символа "x" и размер символа "0" .

Эти размеры присутствуют в шрифте всегда, даже если по коду этих символов в шрифте находятся другие значения, а не именно буква "x" и ноль "0" . В этом случае они носят более условный характер.

Эти единицы используются чрезвычайно редко, так как «размер шрифта» em обычно вполне подходит.

Проценты %

Проценты % , как и em – относительные единицы.

Когда мы говорим «процент», то возникает вопрос – «Процент от чего?»

Как правило, процент будет от значения свойства родителя с тем же названием, но не всегда.

Это очень важная особенность процентов, про которую, увы, часто забывают.

Отличный источник информации по этой теме – стандарт, Visual formatting model details.

Вот пример с % , он выглядит в точности так же, как с em :

В примере выше процент берётся от размера шрифта родителя.

А вот примеры-исключения, в которых % берётся не так:

margin-left При установке свойства margin-left в % , процент берётся от ширины родительского блока, а вовсе не от его margin-left . line-height При установке свойства line-height в % , процент берётся от текущего размера шрифта, а вовсе не от line-height родителя. Детали по line-height и размеру шрифта вы также можете найти в статье Свойства font-size и line-height. width/height Для width/height обычно процент от ширины/высоты родителя, но при position:fixed , процент берётся от ширины/высоты окна (а не родителя и не документа). Кроме того, иногда % требует соблюдения дополнительных условий, за примером – обратитесь к главе Особенности свойства height в %.

Единица rem: смесь px и em

Итак, мы рассмотрели:

  • px – абсолютные, чёткие, понятные, не зависящие ни от чего.
  • em – относительно размера шрифта.
  • % – относительно такого же свойства родителя (а может и не родителя, а может и не такого же – см. примеры выше).

Может быть, пора уже остановиться, может этого достаточно?

Э-э, нет! Не все вещи делаются удобно.

Вернёмся к теме шрифтов. Бывают задачи, когда мы хотим сделать на странице большие кнопки «Шрифт больше» и «Шрифт меньше». При нажатии на них будет срабатывать JavaScript, который будет увеличивать или уменьшать шрифт.

Вообще-то это можно сделать без JavaScript, в браузере обычно есть горячие клавиши для масштабирования вроде Ctrl + + , но они работают слишком тупо – берут и увеличивают всю страницу, вместе с изображениями и другими элементами, которые масштабировать как раз не надо. А если надо увеличить только шрифт, потому что посетитель хочет комфортнее читать?

Какую единицу использовать для задания шрифтов? Наверно не px , ведь значения в px абсолютны, если менять, то во всех стилевых правилах. Вполне возможна ситуация, когда мы в одном правиле размер поменяли, а другое забыли.

Следующие кандидаты – em и % .

Разницы между ними здесь нет, так как при задании font-size в процентах, эти проценты берутся от font-size родителя, то есть ведут себя так же, как и em .

Таблицы стилей для веба Советы и хитрости по CSS

Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт ( pt ) и пика ( pc ), другие, напр. сантиметр ( cm ) и дюйм ( in ), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px . Значит ли это, что для разных свойств нужны разные единицы?

Нет, единицы измерения не имеют отношения к свойствам, но имеют прямое отношение к средствам отображения: экран или бумага.

Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях ( margin: 5px ) также допускает и значения в дюймах или сантиметрах ( margin: 1.2in; margin: 0.5cm ), и наоборот.

Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑
72pt

Так называемые абсолютные единицы ( cm , mm , in , pt и pc ) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.

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

CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.

Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. em .

Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие text-indent: 1.5em и margin: 1em в CSS крайне популярны.

Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a , c, m, или o. У шрифтов с одинаковым размером (и, соответственно, при одинаковом em ) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.

Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.

Нынешние устройства в принципе могут отображать и более мелкие четкие точки (хотя их может быть трудно разглядеть без лупы). Но документы из прошлого века, которые использовали px в CSS, независимо от устройства выглядят по-прежнему. Принтеры, в особенности, могут отображать четко отображать линии гораздо тоньше 1px, но даже на принтерах линия в 1px выглядит почти так же, как выглядела бы на мониторе. Устройства меняются, но единица px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px , чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы c m , pt , mm , in и pc , как объяснялось выше).

CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам px . Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px , а не pt , cm и т.д.

Используйте em или px для шрифтов

Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt , пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt , ни других абсолютных единиц, а использовать только em и px .

Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

Волшебная единица CSS, px , часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

Но размеры шрифтов еще лучше задавать в em . Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в em : H1 , чтобы H1 был в 2½ раза крупнее основного шрифта страницы.

Едиственное место, где можно использовать pt (либо cm или in ) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа px , всегда выглядит хорошо и везде достаточно похоже. Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в 0.5px ? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример:

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem . Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em , который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и H1 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh . Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin , соответствующая меньшему из vw и vh . И vmax (можете догадаться, что она делает).

Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.

Навигация по сайту

Bert Bos, style activity lead
Copyright © 1994–2021 W3C ® Privacy policy

CSS: полное руководство по функции calc()

В CSS есть особая функция calc() , применяемая для выполнения простых вычислений. Вот пример её использования:

Здесь с CSS-кодом, в котором используется calc() , можно поэкспериментировать.

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

Функция calc() и значения CSS-свойств

Единственное место, где можно использовать функцию calc() — это значения CSS-свойств. Взгляните на следующие примеры, в которых мы, используя эту функцию, задаём значения различных свойств.

Функцию calc() можно применять и для установки любой отдельной части свойства:

Эта функция может даже быть частью другой функции, которая отвечает за формирование части некоего свойства! Например, здесь calc() используется для настройки позиций изменения цвета градиента:

Функция calc() — это средство для работы с числовыми свойствами

Обратите внимание на то, что во всех вышеприведённых примерах мы используем функцию calc() при работе с числовыми свойствами. Мы ещё поговорим о некоторых особенностях работы с числовыми свойствами (они связаны с тем, что иногда не требуется использование единиц измерения). Сейчас же отметим, что данная функция предназначена для выполнения операций с числами, а не со строками или с чем-то ещё.

Существует множество единиц измерения, которые можно применять в CSS для указания размеров элементов и их частей: px , % , em , rem , in , mm , cm , pt , pc , ex , ch , vh , vw , vmin , vmax . Все эти единицы измерения можно использовать с функцией calc() .

Эта функция умеет работать и с числами, применяемыми без указания единиц измерения:

Её можно использовать и для вычисления углов:

Данную функцию можно применять и в тех случаях, когда в передаваемом ей выражении никаких вычислений не выполняется:

Функцию calc() нельзя применять в медиа-запросах

Хотя эта функция предназначена для установки значений CSS-свойств, она, к сожалению, не работает в медиа-запросах:

Если когда-то подобные конструкции окажутся работоспособными — это будет очень хорошо, так как это позволит создавать взаимоисключающие медиа-запросы, выглядящие весьма логично (например — такие, которые показаны выше).

Использование разных единиц измерения в одном выражении

Допустимость использования разных единиц измерения в одном выражении, вероятно, можно назвать самой ценной возможностью calc() . Подобное применяется почти в каждом из вышеприведённых примеров. Вот, просто для того, чтобы обратить на это ваше внимание, ещё один пример, в котором показано использование различных единиц измерения:

Это выражение читается так: «Ширина равна ширине элемента, из которой вычитается 20 пикселей».

В ситуации, когда ширина элемента может меняться, совершенно невозможно заранее вычислить нужное значение, пользуясь только показателями, выраженными в пикселях. Другими словами, нельзя провести препроцессинг calc() , используя что-то вроде Sass и пытаясь получить что-то вроде полифилла. Да делать этого и не нужно, учитывая то, что calc() очень хорошо поддерживают браузеры. Смысл тут в том, что подобные вычисления, в которых смешивают значения, выраженные в разных единицах измерения, должны быть произведены в браузере (во время «выполнения» страницы). А именно в возможности выполнения таких вычислений и заключается основная ценность calc() .

Вот ещё пара примеров использования значений, выраженных в разных единицах измерения:

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

Сравнение calc() с вычислениями, обрабатываемыми препроцессорами

Мы только что сказали о том, что самая полезная возможность calc() не поддаётся препроцессингу. Но препроцессинг даёт разработчику некоторые возможности, совпадающие с возможностями calc() . Например, при использовании Sass тоже можно вычислять значения свойств:

Здесь могут производиться вычисления с указанием единиц измерения, тут можно складывать величины, выраженные в одних и тех же единицах измерения, можно умножать некие величины на значения, единицы измерения которых не указаны. Но выполнять вычисления со значениями, выраженными в разных единицах измерения, здесь нельзя. На подобные вычисления накладываются ограничения, напоминающие ограничения calc() (например, числа, на которые что-то умножают или делят, должны представлять собой значения без единиц измерения).

Раскрытие смысла используемых в CSS числовых значений

Даже если не пользоваться возможностями, которые достижимы лишь с помощью calc() , эту функцию можно применить для раскрытия смысла применяемых в CSS значений. Предположим, нужно, чтобы значение некоего свойства составляло бы в точности 1/7 ширины элемента:

Такой подход может оказаться полезным в чём-то вроде некоего самописного CSS-API:

Математические операторы функции calc()

В выражениях, вычисляемых с помощью calc() , можно использовать операторы + , — , * и / . Но в их применении есть некоторые особенности.

При сложении ( + ) и вычитании ( — ) необходимо использовать значения с указанными единицами измерения

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

При делении ( / ) нужно, чтобы у второго числа не была бы указана единица измерения

При умножении ( * ) у одного из чисел не должна быть указана единица измерения:

О важности пробелов

Пробелы, используемые в выражениях, важны в операциях сложения и вычитания:

Тут вполне можно использовать и отрицательные числа (например — в конструкции вроде calc(5vw — -5px) ), но это — пример ситуации, в которой пробелы не только необходимы, но ещё и полезны в плане понятности выражений.

Таб Аткинс сказал мне, что причина, по которой операторы сложения и вычитания должны выделяться пробелами, на самом деле, заключается в особенностях парсинга выражений. Не могу сказать, что я в полной мере это понял, но, например, парсер обрабатывает выражение 2px-3px как число 2 с единицей измерения px-3px . А столь странная единица измерения точно никому не понадобится. При парсинге выражений с оператором сложения возникают свои проблемы. Например, парсер может принять этот оператор за часть синтаксической конструкции, используемой при описании чисел. Я подумал было, что пробел нужен для правильной обработки синтаксиса пользовательских свойств ( — ), но это не так.

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

Пробелы, отделяющие скобки calc() от выражения, никакой роли не играют. Выражение, при желании, можно даже выделить, перенеся на новую строку:

Правда, тут стоит проявлять осторожность. Между именем функции ( calc ) и первой открывающей скобкой пробелов быть не должно:

Вложенные конструкции: calc(calc())

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

Нет смысла строить вложенные конструкции из функций calc() , так как то же самое можно переписать, используя лишь скобки:

Кроме того, в данном примере не нужны и скобки, так как при вычислении представленных здесь выражений применяются правила определения приоритета операторов. Деление и умножение выполняются перед сложением и вычитанием. В результате код можно переписать так:

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

Пользовательские CSS-свойства и calc()

Мы уже узнали об одной из замечательных возможностей calc() , о вычислениях, в которых используются значения с разными единицами измерениями. Ещё одна интереснейшая возможность этой функции заключается в том, как её можно применять с пользовательскими CSS-свойствами. Пользовательским свойствам могут быть назначены значения, которые можно использовать в вычислениях:

Уверен, несложно представить себе набор CSS-стилей, в котором множество настроек выполняется в одном месте с помощью установки значений пользовательских CSS-свойств. Эти значения потом будут использоваться во всём CSS-коде.

Пользовательские свойства, кроме того, могут ссылаться друг на друга (обратите внимание на то, что calc() тут не используется). Полученные значения могут использоваться для установки значений других CSS-свойств (а вот тут уже без calc() не обойтись).

Кому-то это может показаться не очень удобным, так как при обращении к пользовательскому свойству нужно помнить о calc() . Но я считаю это интересным с точки зрения читабельности кода.

Источником пользовательских свойств может служить HTML-код. Иногда это может оказаться крайне полезным. Например, в Splitting.js к словам и символам так добавляются индексы.

Назначение единиц измерения пользовательским свойствам после объявления этих свойств

Предположим, мы находимся в ситуации, когда в пользовательское свойство имеет смысл записать число без единиц измерения, или в ситуации, когда подобное число удобно будет, перед реальным использованием, как-то преобразовать, не пользуясь единицами измерениями. В подобных случаях пользовательскому свойству можно назначить значение без указания единиц измерения. Когда нужно будет преобразовать это число в новое, выраженное в неких единицах измерения, его можно будет умножить на 1 с указанием нужных единиц измерения:

Работа с цветами

При описании цветов с использованием форматов, таких, как RGB и HSL, используются числа. С этими числами можно поработать в calc() . Например, можно задать некие базовые HSL-значения, а потом менять их так, как нужно (вот пример):

Нельзя комбинировать calc() и attr()

CSS-функция attr() может казаться весьма привлекательной. И правда: берёшь значение атрибута из HTML, а потом его используешь. Но…

К сожалению, эта функция не понимает «типов» значений. В результате attr() подходит лишь для работы со строками и для установки с её помощью CSS-свойства content . То есть — такая конструкция оказывается вполне рабочей:

Я сказал здесь об этом из-за того, что у кого-нибудь может возникнуть желание попытаться вытащить из HTML-кода с помощью attr() некое число и использовать его в вычислениях:

Правда, хорошо то, что это особого значения не имеет, так как пользовательские свойства в HTML отлично подходят для решения подобных задач:

Браузерные инструменты

Инструменты разработчика браузера обычно показывают выражения с calc() так, как они описаны в исходном CSS-коде.

Инструменты разработчика Firefox, вкладка Rules

Если нужно узнать о том, что вычислит функция calc() , можно обратиться к вкладке Computed (такую вкладку можно найти в инструментах разработчиков всех известных мне браузеров). Там и будет показано значение, вычисленное calc() .

Инструменты разработчика Chrome, вкладка Computed

Браузерная поддержка

Здесь можно узнать о поддержке функции calc() браузерами. Если говорить о современных браузерах, то уровень поддержки calc() составляет более 97%. Если же нужно поддерживать довольно старые браузеры (вроде IE 8 или Firefox 3.6), тогда обычно поступают так: добавляют перед свойством, для вычисления значения которого используется calc() , такое же свойство, значение которого задаётся в формате, который понятен старым браузерам:

У функции calc() существует немало известных проблем, но от них страдают лишь старые браузеры. На Caniuse можно найти описание 13 таких проблем. Вот некоторые из них:

  • Браузер Firefox ниже 59 версии не поддерживает calc() в функциях, используемых для задания цвета. Например: color: hsl(calc(60 * 2), 100%, 50%) .
  • IE 9-11 не отрендерит тень, заданную свойством box-shadow , в том случае, если для определения любого из значений используется calc() .
  • Ни IE 9-11, ни Edge не поддерживают конструкцию вида width: calc() в применении к ячейкам таблиц.

Примеры из жизни

Я спросил у нескольких разработчиков, применяющих CSS, о том, когда они в последний раз использовали функцию calc() . Их ответы составили небольшую подборку, которая поможет всем желающим узнать о том, как другие программисты применяют calc() в своей повседневной работе.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *