cálculo CSS -

CSS es un completo enigma; Todos apreciamos CSS por su simplicidad, pero siempre anhelamos que el lenguaje haga un poco más. CSS ha evolucionado para dar cabida a marcadores de posición, animaciones e incluso eventos de clic. Sin embargo, un problema que siempre pensamos que tendríamos con CSS era su naturaleza estática; es decir, realmente no hay lógica per se. La rutina de cálculo de CSS va en contra de esa tendencia, proporcionando a los desarrolladores una pizca de capacidad de programación dentro de CSS.

El CSS

La rutina calc es especialmente útil al calcular anchos relativos. Los cálculos pueden ser sumas, restas, multiplicaciones y divisiones. Echar un vistazo:

/* cálculo básico */.simpleBlock {ancho: calc(100% - 100px);}/* cálculo en calc */.complexBlock {ancho: calc(100% - 50% / 3);padding: 5px calc(3% - 2px);margen izquierdo: calc(10% + 10px);}

Asegúrese de utilizar espacios en blanco alrededor de los operadores para que no se interpreten como notaciones positivas y negativas.

CSS calc es otro ejemplo de cómo CSS asume el papel de JavaScript en el diseño, y creo que es algo genial. A medida que avanzamos más hacia el diseño responsivo, calc nos permite usar porcentajes para anchos generales de bloque, con solo un toque de ayuda de píxeles para algunos de sus componentes. ¿Has usado calc para tus aplicaciones? ¡Comparte cómo usaste calc!