mozilla
Los resultados de tu búsqueda

    calc

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for the proper prefixes to use in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the spec changes.

    Sumario

    La función CSS calc() puede ser usada en cualquier sitio donde <length>, <frequency>, <angle>, <time>, <number>, o <integer> sea requerido. Con calc() puedes realizar cálculos para determinar valores de propiedades CSS.

    Es posible anidar llamadas a calc() dentro de otras llamadas calc().

    Sintaxis

    calc(expresión)

    Values

    expresión
    Una expresión matemática, cuyo resultado es usado como valor para la propiedad sobre la cual se aplica.

    Expresiones

    FIXME: mod,min,max : http://hacks.mozilla.org/2010/06/css3-calc/La expresión puede ser una combinación de los siguientes operadores:

    +
    Suma.
    -
    Resta.
    *
    Multiplicación. Al menos uno de los argumentos debe ser un <number>.
    /
    División. El divisor debe ser un <number>.

    Los operandos en la expresión pueden ser valores tanto positivos como negativos. Puedes usar diferentes unidades para cada valor si lo deseas. Es recomendable el uso de paréntesis para añadir legibilidad a la expresión o para forzar precedencia en las operaciones en caso necesario.

    Nota: La división por cero dará lugar a un error generado por el analizador de HTML del navegador.
    Nota: las operaciones + y - siempre deben de estar separados de sus operandos mediante espacios en blanco. La expresión calc(50% -8px) será tomada como un operando de porcentaje seguido de otro operando de signo negativo (una expresión inválida, dado que no hay operador enmedio), mientras que la expresión calc(50% - 8px) es un porcentaje seguido de una operación de resta.
    Los operadores * y / no requieren espacio en blanco, pero es recomendable añadirlo por consistencia.

    Ejemplos

    Añadir un margen a un objeto en pantalla

    calc() hace más fácil añadir márgenes a un objeto en determinadas circunstancias. En este ejemplo, CSS crea un espacio horizontal de color amarillo que llena el ancho de la ventana con un hueco de 40 pixels en ambos lados:

    .banner {
      position: absolute;
      left: 40px;
      width: 90%;               /* salvaguarda para navegadores que no reconocen calc() */
      width: calc(100% - 80px);
      border: solid black 1px;
      box-shadow: 1px 2px;
      background-color: yellow;
      padding: 6px;
      text-align: center;
    }
    
    <div class="banner">This is a banner!</div>

    Entradas de formulario que se ajustan automáticamente al ancho de su contenedor

    Otro caso de uso para calc() es asegurar que los campos de un formulario llenan el espacio disponible sin pasarse de los límites de su contenedor y mientras mantienen el margen apropiado.

    Echémosle un vistazo al CSS:

    input {
      padding: 2px;
      display: block;
      width: 98%;               /* salvaguarda para navegadores que no reconocen calc() */
      width: calc(100% - 1em);
    }
    
    #formbox {
      width: 130px;             /* salvaguarda para navegadores que no reconocen calc() */
      width: calc(100% / 6);
      border: 1px solid black;
      padding: 4px;
    }
    

    El formulario usa 1/6 el ancho disponible. Para asegurar que los campos de entrada tienen el tamaño adecuado, usamos  calc() de nuevo para establecer el ancho que deberían tener (el de su contenedor) menos 1em. Para probar esto, usaremos el siguiente HTML:

    <form>
      <div id="formbox">
      <label>Type something:</label>
      <input type="text">
      </div>
    </form>
    

    Especificaciones

    Especificación Estado Comentario
    CSS Values and Units Module Level 3 Candidate Recommendation  

    Compatibilidad en navegadores

    Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Soporte básico 19 (WebKit 536.3) -webkit
    26
    4.0 (2) -moz
    16 (16)
    9 - 6 -webkit (buggy)
    On gradients' color stops 19 (WebKit 536.3) -webkit
    27 (maybe 26)
    19 (19) 9 - 6 -webkit (buggy)
    Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Soporte básico ? 4.0 (2) -moz
    16.0 (16)
    ? ? ?
    On gradients' color stops ? 19.0 (19) ? ? ?

    Ver también

    Etiquetas y colaboradores del documento

    Contributors to this page: teoli, MrBlogger
    Última actualización por: teoli,