Share
Hemos creado una guía completa para ayudarlo a aprender CSS, ya sea que esté comenzando con lo básico o si desea explorar CSS más avanzados..
Es fácil quedarse estancado trabajando con las técnicas de CSS que conocemos bien, pero al hacerlo nos pone en desventaja cuando surgen nuevos problemas..
A medida que la web sigue creciendo, la demanda de nuevas soluciones también seguirá creciendo. Por lo tanto, como diseñadores web y desarrolladores front-end, no tenemos más remedio que conocer nuestro conjunto de herramientas y saberlo bien.
Eso significa conocer incluso las herramientas especializadas, las que no se usan con tanta frecuencia, pero cuando se necesitan, son exactamente la herramienta adecuada para el trabajo..
Hoy, te presentaré algunas herramientas CSS que quizás no conocías antes. Estas herramientas son unidades de medida, como píxeles o ems, ¡pero es muy posible que nunca hayas oído hablar de ellas! Vamos a bucear en.
Comenzaremos con algo similar a algo con lo que probablemente ya estés familiarizado. los em unidad se define como la corriente tamaño de fuente. Así, por ejemplo, si establece un tamaño de fuente en el elemento del cuerpo, el em El valor de cualquier elemento secundario dentro del cuerpo será igual a ese tamaño de fuente.
Prueba
cuerpo font-size: 14px; div font-size: 1.2em; // calculado a 14px * 1.2, o 16.8px
Aquí, hemos dicho que el div tendrá un tamaño de fuente de 1.2em. Eso es 1.2 veces cualquiera que sea el tamaño de letra que haya heredado, en este caso 14px. El resultado es 16.8px.
Sin embargo, ¿qué sucede cuando se colocan en cascada tamaños de fuente definidos por em en uno dentro del otro? En el siguiente fragmento de código aplicamos exactamente el mismo CSS que arriba. Cada div hereda su tamaño de fuente de su padre, lo que nos permite aumentar gradualmente el tamaño de fuente.
PruebaPruebaPrueba
Si bien esto puede ser deseado en algunos casos, a menudo es posible que desee simplemente confiar en una sola métrica para escalar. En este caso, deberías usar movimiento rápido del ojo. La "r" en movimiento rápido del ojo significa "raíz"; esto es igual al tamaño de fuente establecido en el elemento raíz; en la mayoría de los casos que siendo el html elemento.
html font-size: 14px; div font-size: 1.2rem;
En los tres divs anidados en el ejemplo anterior, la fuente evaluaría a 16.8px.
Los rems no solo son útiles para dimensionar fuentes. Por ejemplo, podría basar un sistema de cuadrícula completo o una biblioteca de estilo de UI en el tamaño de fuente HTML raíz usando movimiento rápido del ojo, y utilizar escala de em en lugares específicos. Esto le daría un tamaño y escala de fuente más predecible.
.contenedor ancho: 70rem; // 70 * 14px = 980px
Conceptualmente, la idea detrás de una estrategia como esta es permitir que su interfaz se amplíe con el tamaño de su contenido. Sin embargo, puede que no necesariamente tenga el mayor sentido para cada caso..
Característica: unidades rem (root em) en caniuse.com
Las técnicas de diseño web sensibles dependen en gran medida de las reglas de porcentaje. Sin embargo, el porcentaje de CSS no siempre es la mejor solución para cada problema. El ancho de CSS es relativo al elemento padre que contiene más cercano. ¿Qué sucede si desea utilizar el ancho o el alto de la ventana gráfica en lugar del ancho del elemento principal? Eso es exactamente lo que el vh y vw unidades proporcionan.
los vh el elemento es igual a 1/100 de la altura de la ventana gráfica. Por ejemplo, si la altura del navegador es 900px, 1vh Evaluaría a 9px. Del mismo modo, si el ancho de la ventana gráfica es 750px, 1vw evaluaría a 7.5px.
Hay usos aparentemente infinitos para estas reglas. Por ejemplo, una forma muy simple de hacer diapositivas de altura completa o casi altura completa se puede lograr con una sola línea de CSS:
.deslice altura: 100vh;
Imagina que querías un encabezado que estuviera configurado para llenar el anchura de la pantalla. Para lograr esto, debe establecer un tamaño de fuente en vw. Ese tamaño se escalará con el ancho del navegador..
Característica: Unidades de la ventana gráfica: vw, vh en caniuse.com
Mientras vh y vm Siempre están relacionados con la altura y el ancho de la ventana gráfica, respectivamente., vmin y vmax están relacionados con el máximo o mínimo De esos anchos y alturas, dependiendo de cuál sea cada vez más pequeño. Por ejemplo, si el navegador se configuró a 1100px de ancho y 700px de altura, 1vmin sería 7px y 1vmax sería 11px. Sin embargo, si el ancho se estableció en 800 px y la altura se estableció en 1080 px, vmin sería igual a 8px mientras vmax se establecería en 10.8px.
Entonces, ¿cuándo podrías usar estos valores??
Imagina que necesitas un elemento que siempre esté visible en la pantalla. Usando un alto y ancho establecido a vmin un valor por debajo de 100 permitiría esto. Por ejemplo, un elemento cuadrado que siempre toca al menos dos lados de la pantalla podría definirse así:
.caja altura: 100vmin; ancho: 100vmin;
Si necesitabas una caja cuadrada que siempre cubre En la ventana visible (tocando los cuatro lados de la pantalla en todo momento), use las mismas reglas excepto con vmax.
.caja altura: 100vmax; ancho: 100vmax;
Las combinaciones de estas reglas proporcionan una forma muy flexible de utilizar el tamaño de su ventana gráfica de manera nueva y emocionante.
Característica: Unidades de la ventana gráfica: vmin, vmax en caniuse.com
las unidades ex y ch, Similar a em y movimiento rápido del ojo, confiar en la fuente actual y el tamaño de la fuente. Sin embargo, a diferencia de em y movimiento rápido del ojo, estas unidades también dependen de la Familia tipográfica, Como se determinan en función de las medidas específicas de la fuente..
los ch unidad, o la personaje unidad se define como la "medida avanzada" del ancho del carácter cero, 0. En el blog de Eric Meyers se puede encontrar una discusión muy interesante sobre qué significa esto, pero el concepto básico es que, dada una fuente monoespaciada, una caja con un ancho de norte unidades de caracteres, tales como ancho: 40ch;, siempre puede contener una cadena con 40 caracteres en esa fuente en particular. Si bien los usos convencionales de esta regla en particular se relacionan con el diseño de braille, las posibilidades para la creatividad aquí ciertamente se extienden más allá de estas aplicaciones simples..
los ex unidad se define como la "altura x de la fuente actual O la mitad de una em". losaltura x de una fuente dada es la altura de la x minúscula de esa fuente. Muchas veces, esto es aproximadamente en la marca central de la fuente.
altura x; la altura de la minúscula x (lea más acerca de la anatomía de la tipografía web)Existen muchos Usos para este tipo de unidad, la mayoría de ellos para microajustes tipográficos. Por ejemplo, el cenar elemento, que significa sobrescrito, se puede empujar hacia arriba en la línea usando la posición relativa y un valor inferior de 1ex. Del mismo modo, puede tirar un elemento subíndice hacia abajo. Los valores predeterminados del navegador para estos utilizan superíndices y subíndices específicos alineación vertical reglas, pero si quisiera un control más granular, podría manejar el tipo más explícitamente de esta manera:
sup posición: relativo; parte inferior: 1ex; sub posición: relativo; abajo: -1ex;
los ex La unidad ha existido desde CSS1, aunque no encontrará un soporte tan sólido para el ch unidad. Para obtener información específica sobre el soporte, consulte las unidades y valores de CSS en el blog de Eric Meyer.
Mantener un ojo en el continuo desarrollo y expansión de CSS es increíblemente importante para que conozca todas las herramientas en su conjunto de herramientas. Quizás encuentre un problema particular que requiera una solución inesperada utilizando una de estas unidades de medición más oscuras. Tómese el tiempo para leer sobre las nuevas especificaciones. Regístrese para recibir actualizaciones de noticias de grandes recursos como cssweekly. Y no se olvide, regístrese ahora para recibir actualizaciones semanales, cursos, tutoriales gratuitos y recursos como este de Web Design on Tuts+!
Más bondad de la unidad CSS.
Accentsconagua