html - other - El CSS calc no funciona en Safari y el respaldo

margin calc css

Question

Tengo este diseño en el que estoy trabajando. Depende fuertemente de CSS calc para hacer los cálculos necesarios.

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

Ahora, no puedo hacer que esto funcione en Safari. ¿Hay algo que estoy haciendo mal?

Y también, ¿hay alguna manera de introducir un mecanismo alternativo para los navegadores que no lo admiten? Porcentaje no hará un buen trabajo, ya que tengo que restar el objeto en el medio, de los dos en el lado.

Gracias.

Answer 1

La forma en que resolvió este problema, es la introducción de un retroceso de CSS puro, que los navegadores más antiguos que no son compatibles con CSS calc solo leerían.

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

Los paneles izquierdo y derecho obtienen un ancho del 48% si el navegador no puede leer los valores calculados.

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

Y el logotipo, que se encuentra entre los dos paneles, tiene un ancho del 4%. Y también un ancho mínimo de 40 px. Y si el navegador puede leer los valores de calc, son 40px.

Answer 2

Tu código se ve bien, así que creo que el problema es la compatibilidad del navegador. De acuerdo con la Documentación de Mozilla , esta característica funciona en Chrome, Firefox e IE (las versiones más nuevas), pero no existe en Opera y tiene errores en Safari. esta pregunta para obtener más información de compatibilidad. Una alternativa / alternativa mucho más segura sería hacer tus cálculos en Javascript:

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

Puede usar la función jQuery .width() para detectar el ancho del documento y luego establecer el ancho de sus elementos en consecuencia. Pero solo advirtiéndole, trate de mantener tantos de sus estilos fuera de sus secuencias de comandos y dentro de sus hojas de estilo porque de lo contrario no podrá mantenerse.

Si aún no funciona en algunos navegadores, use Modernizr para detectar el navegador / versión / SO y luego redirija a una versión diferente de la página.

Edición 1: capacidad de respuesta añadida
Editar 2: Intervalo eliminado
Edición 3: Mención añadida de Modernizr