Recientemente, decidí que necesitaba una actualización de todas las diversas propiedades abreviadas de CSS. La mejor manera de aprender algo es enseñarlo, así que aquí está mi intento de exactamente eso.
Hoy aprenderemos cómo usar la abreviatura de CSS para fondos, márgenes y relleno, bordes, fuentes, estilos de lista y transiciones.
Fondo
Las imágenes de fondo de CSS son uno de los lugares más comunes en los que veo que se implementa la abreviatura de CSS. Aunque podría haber un poco más de funcionalidad aquí de lo que la gente aprovecha. Comencemos con un ejemplo típico de la forma normal de declarar un fondo.
Antecedentes: El largo camino
Taquigrafía de fondo
Desde aquí, la mayoría de nosotros sabemos cómo tomar estas tres propiedades y lanzarlas todas dentro de la propiedad de fondo. Echa un vistazo a cuánto espacio esto ahorra.
Adjunto y posición
Otras dos propiedades que no se ven en la taquigrafía son la posición y el apego. Solo para refrescarnos, veamos cuáles son estos dos.
Fondo adjunto se refiere a si la imagen de fondo se desplazará con la página o no. El valor predeterminado es voluta, lo que significa que perderá de vista la imagen a medida que se desplaza por la página como lo hace con el resto del contenido. Si cambias esto a fijo, el fondo se mantendrá justo donde está mientras el resto del contenido se desplaza sobre la parte superior.
Posición de fondo se refiere a donde se coloca la imagen dentro del elemento. Puede usar algo genérico, como la parte superior izquierda, la parte inferior derecha o el centro, o algo más específico, como un porcentaje o un valor de píxel.
Aquí está la versión larga con estos dos lanzados.
Tome nota del orden aquí porque usaremos el mismo orden en la versión abreviada:
- color de fondo
- imagen de fondo
- repetición de fondo
- fondo adjunto
- posición de fondo
Taquigrafía de fondo con los cinco valores
Aquí tiramos todo esto respetando el orden que acabamos de describir. Siéntase libre de dejar a cualquiera de ellos para volver a los valores predeterminados.
Margen y relleno
Otro lugar que sin duda has visto alguna taquigrafía es en los márgenes y el relleno. Aquí esto funciona exactamente de la misma manera para ambos, así que solo daré ejemplos de margen y usted podrá aplicarlo usted mismo al relleno.
Margen: El Camino Largo
Aquí tenemos la forma normal de establecer sus márgenes. Puse a cada uno en un valor arbitrario, las partes importantes a tener en cuenta son el orden y el hecho de que todas son diferentes. Ambos afectarán la taquigrafía.
Margen de taquigrafía
Declarar márgenes en taquigrafía es una técnica bastante versátil que ahorra mucho espacio sin importar cómo lo hagas. Básicamente, simplemente arrojas todos tus valores en una fila a la propiedad de margen.
El orden aquí es muy importante. Para recordar cómo funciona esto, solo piensa en un reloj. Comienza en la parte superior y gira en sentido horario, golpeando cada borde. Primero está el margen superior, luego el margen derecho, el margen inferior y el margen izquierdo.
Declarar todas las propiedades de margen para que sean iguales es incluso más fácil. Si solo ingresa un valor, se aplicará a cada propiedad. El siguiente código dará como resultado un margen de 10 px en cada lado.
Ahora, supongamos que realmente solo tiene dos valores diferentes con los que desea trabajar, lo que significa que los márgenes superior e inferior tendrán un valor y el derecho e izquierdo tendrán otro. De manera predeterminada, cuando declara el margen superior abreviado, la parte inferior coincidirá y cuando declare el margen derecho abreviado, la izquierda coincidirá.
Esto es cierto cuando usted declara tres valores también. Por lo tanto, el siguiente código establecerá el margen superior, derecho e inferior manualmente mientras que el izquierdo se toma automáticamente desde la derecha.
Frontera: El largo camino
El borde tiene tres propiedades principales: ancho, estilo y color. Estos están escritos individualmente de la siguiente manera:
Puede modificar un poco el orden de estas propiedades al cambiar a la versión abreviada, pero es mejor mantenerlo en este orden estándar para garantizar una compatibilidad completa.
Taquigrafía de la frontera
Aquí está la versión abreviada de estas tres propiedades de borde.
Otra cosa que puede hacer con los bordes es declarar cada lado del borde de manera diferente. Aquí podemos ver el formato de borde abreviado aún en funcionamiento, solo en cada uno individualmente.
Alternativamente, puede seleccionar una de las tres propiedades de borde y aplicarlas en el sentido de las agujas del reloj, como lo hizo wed con la abreviatura del margen. Observe cómo la segunda declaración de ancho anula la primera.
Lo siguiente nos dará un borde rojo sólido que es 2px en la parte superior, 4px en la derecha, 8 px en la parte inferior y 16px en la izquierda.
De manera similar, esto nos dará un borde sólido de 5 píxeles que es azul en la parte superior e inferior y rojo en la izquierda y la derecha.
Esquema de taquigrafía
No quiero pasar demasiado tiempo en la propiedad de esquema simplemente porque el soporte no es excelente y probablemente casi nunca lo use. El beneficio es que, a diferencia de los bordes, los esquemas no afectarán su diseño. Si alguna vez se encuentra usando un esquema, la sintaxis es muy similar a la de los bordes.
Lo siguiente representa los valores para ancho del contorno, esquema de estilo y color del contorno en ese orden.
Fuente: The Long Way
Hay un montón de propiedades de fuente diferentes con las que puedes meterte para cambiar la apariencia de tu tipografía. En consecuencia, su hoja de estilo puede llenarse rápidamente con bloques de estilos como el que se muestra a continuación.
Fuente abreviada
La taquigrafía de fuentes es un bateador muy pesado en cuanto al espacio ahorrado. Podemos tomar toda la información anterior y agruparla en una línea breve y sorprendentemente fácil de leer.
La mayoría de las veces, lo que tendrá es probablemente mucho más corto simplemente porque no necesitará todas estas opciones de estilo. Puede deshacerse del estilo, la variante y el peso de la fuente y simplemente declarar un tamaño de fuente rápido, altura de línea y familia de fuentes.
Listas: El largo camino
La taquigrafía de lista es realmente interesante porque, de todas formas, rara vez veo a nadie meterse con estas propiedades. Si usted es un maestro de la lista, puede usar las tres propiedades del estilo de lista que se muestra a continuación.
Lista de taquigrafía
Este es bastante predecible, simplemente lance estas tres propiedades en "estilo de lista". y eres bueno para ir
Transiciones CSS3: El Camino Largo
Las transiciones CSS3 son obviamente bastante nuevas y, por lo tanto, el soporte es diferente en todos los navegadores. Aqui usaremos transición pero es probable que rompa esto en -webkit-transición, -moz de transicióny -o-transición también.
Aquí están las propiedades básicas enumeradas una a la vez:
CSS Transition Shorthand
Esta es una propiedad donde casi siempre se ve la abreviatura utilizada en lugar de la versión larga. Si alguna vez ha realizado transiciones CSS, probablemente esté más familiarizado con la sintaxis a continuación.
Y, por supuesto, como mencionamos anteriormente, ya que los navegadores aún no son muy uniformes en esto, tiene que incluir esos prefijos de proveedores poco desagradables. Este es un ejemplo típico del código que usaría para una transición con máxima compatibilidad (IE aún se omite).
Conclusión
CSS taquigrafía es una herramienta impresionante para ahorrar tiempo y espacio. Si está familiarizado con la sintaxis, podría argumentar que la taquigrafía es en realidad más legible que la versión larga. Sin embargo, para los novatos, es mucho más fácil leer las propiedades etiquetadas, así que tenga en cuenta cuál es su objetivo y la audiencia para un proyecto determinado. Si está escribiendo un tutorial, es posible que desee enumerar valores individuales o al menos explicar su taquigrafía, en producción, aunque la taquigrafía funciona perfectamente.
Deje un comentario a continuación y déjenos saber para qué propiedades generalmente utiliza la taquigrafía y si aprendió o no algo de los ejemplos anteriores.