CSS calc не работает в Safari и резерв

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

width: -webkit-calc(50% - 20px);
width: -moz-calc(50% - 20px);
width: calc(50% - 20px);

Теперь я не могу заставить это работать в Safari. Есть ли что-то, что я делаю неправильно?

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



Спасибо.

Ответы

Ответ 1

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

figure.left {
    width: 48%;
    width: -webkit-calc(50% - 20px);
    width: -moz-calc(50% - 20px);
    width: calc(50% - 20px);
}

Левая и правая панели получают ширину 48%, если браузер не может прочитать значения calc.

figure.logo {   
    min-width: 40px;
    width: 4%;
    width: -webkit-calc(40px);
    width: -moz-calc(40px);
    width: calc(40px);
}

И логотип, который находится между двумя панелями, получает ширину 4%. А также минимальная ширина 40 пикселей. И если значения calc могут быть прочитаны браузером, они равны 40px.

Ответ 2

Вы выглядите отлично, поэтому я думаю, что проблема заключается в совместимости с браузером. Согласно Документация Mozilla, эта функция работает в Chrome, Firefox и IE (более новые версии), но в Opera не существует и не работает в Сафари. этот вопрос для получения дополнительной информации о совместимости. Более безопасный резерв/альтернатива будет делать ваши вычисления в Javascript:

if ($(document).width() >= 750){
  $("#yourElementsID").css("width",$("#yourElementsID").width()*0.5-20)
} else if ($(document).width() >= 400){
  // do something here for smaller values
}

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

Если он по-прежнему не работает в некоторых браузерах, используйте Modernizr, чтобы обнаружить браузер/версию/ОС, а затем перенаправить их на другую версию страницы.

Изменить 1: Добавлен отзывчивость
Изменить 2: Удаленный интервал
Изменить 3: Добавлено упоминание о Modernizr