Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Introducción a Funciones Matemáticas CSS Nivel 4

by
Length:LongLanguages:

Spanish (Español) translation by James (you can also view the original English article)

Notaciones funcionales son parte de los valores de CSS y el módulo de unidades, que es también el hogar de las funciones matemáticas útiles como calc(), max() y min() de nivel 4. Estas funciones de gran alcance abren puertas increíbles para autores CSS que requieran habilidades de lógica de matemáticas dentro de CSS. En este artículo analizaremos calc(), min() y max() cómo los tres pueden ser útiles en tu trabajo ahora mismo. Vamos a empezar!

¿Qué Diablos Son Notaciones Funcionales?

Notaciones Funcionales es una de nueve padres secciones (sección ocho para ser exactos) de los valores de CSS de W3C y el módulo de unidades. A partir de proyecto del nivel 4 Editor, notaciones funcionales ahora alberga a más subdivisiones como toggle() que permite alternar entre los valores y referencias de atributo mediante el uso de attr(). También hay otro interesante apartado llamado "Expresiones matemáticas" que abarca nuestro ambiente matemáticas funciones calc(), min() y max().

Volvamos a la definición de la W3C para ayudarnos a entender lo que notaciones funcionales son:

"Una notación funcional es un tipo de valor del componente que puede representar tipos más complejos o invocar un procesamiento especial. La sintaxis comienza con el nombre de la función seguido de un paréntesis de apertura, seguido por el argument(s) a la notación seguida de un paréntesis de cierre».

En términos del laico que están diciendo es un "nombre de función", tales como calc, seguido entre paréntesis de apertura ( y clausura ). ¿Pero lo que pasa entre ellos?

Introducción de Expresiones Matemáticas

Como se mencionó, "Expresiones Matemáticas" es una subdivisión de "Anotaciones Funcionales", pero ¿qué son y qué hacen? Una vez más, volvamos a la W3C, donde están definidas como:

"Las funciones matemáticas, calc(), min() y max(), permiten expresiones matemáticas con adición (+), resta (-), multiplicación (*) y división (/) para ser utilizado como valores de los componentes".

Que significa calc(), min() y max() son "funciones matemáticas" que permiten "expresiones" entre paréntesis para calcular los"valores". Bueno, eso está claro ahora. El término "expresiones" es simplemente una manera elegante de decir 'lógica matemáticas es totalmente permitido dentro de los paréntesis'.

Introducido en nivel 4 es una nueva definición para complementar lo que sabemos hasta ahora:

"Componentes de una función matemática pueden ser valores literales, otras funciones matemáticas u otras expresiones, como attr(), que evaluación a un tipo de argumento válido (como <length>)."

Para aclarar aún más, las "otras funciones matemáticas" se hace referencia aquí son calc(), min() y max(), pero también afirman que estas funciones pueden estar anidadas dentro de uno a otro. Podría escribir calc(min()), min(calc()), calc(max(min())), calc(min(attr())) y así sucesivamente. Sin embargo, mi sugerencia es hacer todo lo posible y evitar el vórtice anidación, incluso con la posibilidad de hacerlo como la especificación sugiere.

Ahora vamos a decir "Hola" una vez más a un par de funciones matemáticas excepcionales que casi pierde la oportunidad de estrechar la mano con el grupo de trabajo de CSS.

Parte posterior min() y max()

Las funciones min() y max() son dos funciones matemáticas dejando huella, pero sólo después de que casi se retiraron de los valores y el proyecto de unidades nivel 4 Editor. Gracias a Lea Verou, fuerza en los vientos de cambio y yo no podía estar más feliz.

¿"Tal vez ahora que 3 de los valores ha ido a CR es el momento de reconsiderar añadir min() y max() nuevamente dentro de valores 4?

Autores están haciendo hacks extremadamente raros con calc() emular en font-size y line-height  lo que ellos llaman "CSS locks". Si busca en google CSS locks, verá cómo generalizada estos hacks son cada vez, lo que indica un autor claro necesita.

Además, como variables CSS se convierten más ampliamente utilizadas, la necesidad de min() y max() será aún mayor. Recuerdo algunos de los temas que nos hicieron caer hace 6 años ahora pueden ser resuelto con el enfermo en el concepto de tiempo de valor calculado que introdujo Variables."– Lea Verou

Ya que la sugerencia de Lea en GitHub, min() y max() oficialmente se insertó en proyecto de CSS nivel 4 valores del Editor y unidades, incluyendo una pronta aprobación por WebKit. Personalmente, los desarrolladores pueden experimentar y explorar usando WebKit por noche (a partir del 24/10/17). Aquí es la sola confirmación de WebKit por lo extrañamente curioso donde el apoyo fue por arte de magia sentado para min() y max().

Un Somero Vistazo a clamp()

Otra pieza interesante del chisme en ese mismo GitHub hilo Iniciado por Lea Verou fue el comentario donde ficha Atkins sugiere una función de clamp() real. clamp() literalmente se "fije" un valor entre los valores límite.

"... Estoy de acuerdo que clamp(), aunque técnicamente superfluas, es útil a menudo bastante que probablemente merece existir."

¡Dios mío! Esto sería absolutamente la adición a expresiones matemáticas. Una función como clamp() es una victoria definitiva para las sensibles necesidades de hoy y ciertamente ser un amigo dio la bienvenida a la lengua.

Discusiones actuales giran en torno a este tipo de sintaxis arriba y llego a ser uno que está de acuerdo con la sugerencia; tiene sentido y se lee de una manera lógica. Me pregunto qué pasará con el uso de min() y max() si clamp() realmente hace una aparición en el futuro.

Con nuestro enfriador de agua charla del camino permite centrarse en las funciones reales matemáticas que llegamos aquí para discutir; calc(), min() y max().

Ahora a Conocer calc()

Esta es una de mis funciones favoritas matemáticas a gracia CSS y puede hacer a todo tipo de hechicería. La sintaxis no es demasiado áspera, una vez usted consigue la caída de la misma, y apoyo es estelar.

En este ejemplo anterior tenemos el nombre de función (calc) seguido de los paréntesis que contienen "expresiones", o en otras palabras... lógica matemáticas.

"La función calc() permite expresiones matemáticas con adición (+), resta (-), multiplicación (*) y división (/) para ser utilizado como componente valores." – W3C

Una vez más, esto es hablar para decir "que hacer matemáticas en paréntesis".

En cuanto a expresiones, autores pueden pasar valores genéricos como 50%, 2em, 40 y puede utilizar calc() donde <length>, <frequency>, <angle>, <time>, <percentage>, <number>, o <integer> se admiten valores. Mis unidades favoritas para usar y examinar en la naturaleza son las unidades de ventana (vh, vw, vmin, vmax). Estos son los valores de cota de pantalla que son especialmente útiles con la tipografía y el diseño como vamos a ver.

calc() en lo Salvaje

El ejemplo anterior es sólo una manera de manejar tipografía sensible. Usando una combinación de unidades de calc() y ventanilla de consultas, Sass, medios de comunicación, Mike demuestra a nosotros cómo responde tipografía puede escalar perfectamente entre los valores de píxeles específicos.

Aquí es otro demo de tipografía de caída mandíbula utilizando unidades calc() y vista por Tim Brown. Esta demo fue utilizada para su artículo sobre CSS Locks que te animo a leer si la tipografía es algo importa.

Unidades de ventana y calc() también pueden ayudar a crear algunos de nuestros preferidos patrones de diseño. En el demo anterior, calc() se utiliza para restar la altura del pie de página de la altura de la viewport (vh). Una solución inteligente de Chris Coyier de nuestro viejo amigo "El Pie Pegajoso" pidió tan a menudo. Esta demo también funciona muy bien cuando se combina con variables CSS así.

Sin duda hay otros casos, cuando se trata de Estados dinámicos en esta demo y aplicaciones por David Khourshid. David utiliza calc() de fondos, valores de desplazamiento, transforma, filtros, opacidad y ancho uniforme. También es una gran demostración para quienes buscan sumergirse en reaccionar junto con variables CSS.

Ahora echemos un vistazo a dos funciones matemáticas adicionales sin duda disfrutará, actualmente conocido como min() y max().

min() y max(): Definir las Restricciones

Como mencionado anteriormente, estas funciones son todavía en su infancia, para usan de demostraciones mostrando casos es sombrío, pero no se deje asustar de experimentar. Para investigar min() y max() necesitará descargar WebKit todas las noches. Una vez descargado, eres libre de abrir cada noche (icono negro) y manos a la obra.

¿Recuerdas cuando nos enteramos que fueron expresiones? Era sólo una fantasía forma de decir «lógica matemática». Por ejemplo:

Cada expresión es coma separado con una expresión adicional que sigue. También podemos recurrir a las especificaciones que declara explícitamente esta misma regla:

"El valor calculado de una función min() o max() es la lista separada por comas de expresiones" – W3C

En caso de que te perdiste esa parte muy importante de la explicación, la especificación acaba de afirmar una lista separada por comas de expresiones al igual que en el fragmento de código anterior.

"una función min() o max() representa el menor (más negativo) o mayor (más positivo), respectivamente, separados por comas cálculo contiene." – W3C

¿Captas todo eso? Acaba de decir el menor (más negativo) o mayor (más positivo). El W3C sólo nos dio permiso para escribir números negativos como parte de nuestras expresiones.

Tomemos este momento para ver cómo min() y max() se prueban en una demostración de trabajo; aferrarse a sus sombreros.

min() y max() en Vida Real

Aquí es una demo que muestra un par de casos de uso para min() y max() utilizando componentes width y font-size.  width tiene una restricción mínima y una máxima restricción mientras que font-size de nuestro componente también se fija con un valor mínimo y máximo. Recuerde que esto sólo funcionará en WebKit todas las noches a partir de esta escritura; Si desea ver una animación de él en acción echa un vistazo a este GIF (francamente demasiado pesadas para ser embebido en la página).

En el ejemplo anterior estoy empezando cosas por restricción de width y hacerlo en una sola línea.

Utilizando el enfoque anterior soy capaz de incluir una restricción media vs sólo un mínimo y máximo. Esta línea de código indica al navegador "Tratar de establecer el ancho para 70vw, pero no deja pasar cualquier menor 200px (100px * 2), o superior a 500px." Hay también otro camino que se puede ir hacia abajo para lograr un resultado similar.

Para explicar más detalladamente esto equivale a un mínimo, un medio y un valor de máxima restricción. De anidación max() dentro min() ayuda a abrazadera entre los límites deseados.

Si utilizamos min-widthmax-width sería llegar a un destino equivalente, fuimos logrando min() y max(). Tengo curiosidad si propiedades como min-width se convertirá en obsoletos a favor de las funciones matemáticas como min() y max() en los próximos años.

En cuanto a font-size utilizo el mismo enfoque de min/max para crear tipografía sensible y bloqueo.

Digo el navegador "Trate de ajustar el tamaño de fuente a 4vw, pero no deja pasar cualquier inferior 1rem, o más arriba de 2rem." Lamentablemente no existe equivalente tales como tamaño de min-font-size y max-font-size como teníamos de ancho, pero a partir de la especificación CSS Módulo Fuentes Nivel 4 que podría convertirse en una realidad.

Esto es sin duda emocionante noticias y autores son sólo tan emocionados cuando se trata de valores vinculantes en CSS.

utiliza un motor de búsqueda para cazar CSS Locks encontrarás montones de artículos y demos. CodePen también muestra una gran variedad de plumas bajo otra Búsqueda de CSS Locks. Para aquellos que son nuevos a la idea de dejar CSS cerraduras me explique más detalladamente.. Tipografía Flexible con CSS Locks" sin embargo esta técnica fue introducida por Mike Riethmuller en su artículo "Preciso control sobre tipografía sensible."> calc() y ventanilla para las partidas y la copia de cuerpo que escalar hacia arriba o hacia abajo dependiendo de las dimensiones de la pantalla. Este tipo de restricción es lo que hemos llegado a conocer como "CSS cerraduras"..
  • Unidad de Viewport Basado en Tipografía por Zell Lieww
  • Las matemáticas de las CSS locks por Florens Verscheldee
  • CSS "Locks" por Chris Coyierr
  • Tipografía Fluida por Geoff Grahamm
  • Sensible y Fluido Tipografía Con vh y Unidades de vw por Michael Riethmullerr
  • Fluida Sensible Tipografía Con CSS Poly Fluid Sizing por Jake Wilsonn
font-size con JavaScript al timón, mientras que CSS está en el asiento trasero. Te dejaré decidir por vosotros mismos cómo se siente acerca de sí mismo mezclado con CSS JavaScript..
calc() o ha experimentado con min() y max() por favor deje saber en los comentarios. ¡Feliz codificación!!
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.