6 trucos de atajos de CSS que todo desarrollador debería saber
Hace poco decidí que necesitaba un repaso de todas las diversas propiedades cortas de CSS. La mejor manera de aprender algo es aprenderlo, así que aquí está mi intento exacto.
Hoy aprenderemos a usar la abreviatura CSS para fondos, bordes y relleno, bordes, fuentes, estilos de lista y transiciones.
fondo
Las imágenes de fondo CSS son uno de los lugares más comunes en los que veo implementadas las abreviaturas CSS. Puede haber un poco más de funcionalidad aquí de lo que la gente está aprovechando. Comencemos con un ejemplo típico de la forma normal de declarar un fondo.
Antecedentes: El largo camino
|
fondo–color: #eee; fondo–imagen: URL(fondo.jpg); fondo–repetir: No–repetir; |
Taquigrafía de fondo
A partir de aquí, la mayoría de nosotros sabemos cómo tomar estas tres propiedades y ponerlas todas en la propiedad de fondo. Compruebe cuánto espacio ahorra esto.
|
fondo: #eee url(fondo.jpg) sin repetición; |
Adjunto y Posición
Otras dos propiedades que no ve en el acceso directo con tanta frecuencia son la posición y el archivo adjunto. Solo como un repaso, veamos qué son estos dos.
Archivo adjunto de fondo se refiere a si la imagen de fondo se desplazará o no con la página. El valor predeterminado es rollo, lo que significa que perderá de vista la imagen a medida que se desplaza hacia abajo en la página, al igual que con el resto del contenido. Si cambias esto a fijadoel fondo permanecerá exactamente donde está mientras el resto del contenido se desplaza sobre él.
Posición de fondo se refiere a dónde se coloca la imagen dentro del elemento. Puede usar algo genérico, como arriba a la izquierda, abajo, a la derecha o en el centro, o algo más específico, como un porcentaje o un valor de píxel.
Aquí está la versión larga con esos dos incluidos.
|
fondo–color: #eee; fondo–imagen: URL(fondo.jpg); fondo–repetir: No–repetir; fondo–adjunto: fijado; fondo–posición: centro arriba; |
Tome nota del comando aquí, ya que usaremos el mismo comando en la versión corta:
- color de fondo
- imagen de fondo
- repetición de fondo
- archivo adjunto de fondo
- posición de fondo
Taquigrafía de fondo con los cinco valores
Aquí los tiramos todos en el orden que acabamos de delinear. Siéntase libre de dejar cualquiera de ellos para volver a los valores predeterminados.
|
fondo: #eee url(background.jpg) no se repite fijamente en el centro superior; |
Margen y relleno
Otro lugar que sin duda ha visto brevemente es en los márgenes y el relleno. Aquí funciona exactamente de la misma manera para ambos, así que solo daré ejemplos para el margen y usted mismo puede aplicarlo al relleno.
Marja: El camino largo
Aquí tenemos la forma normal de establecer sus márgenes. Ajusté cada uno a un valor arbitrario, las partes importantes a tener en cuenta son el orden y el hecho de que todos son diferentes. Ambos afectarán la taquigrafía.
|
el borde–arriba: 10 píxeles; el borde–bien: 11 píxeles; el borde–fondo: 12 píxeles; el borde–Izquierda: 13 píxeles; |
Margen abreviado
Declarar márgenes en forma abreviada es una técnica bastante versátil que ahorra mucho espacio, sin importar cómo lo haga. Básicamente, volca todos los valores uno a la vez en la propiedad de margen.
|
el borde: 10 píxeles 11 píxeles 12 píxeles 13 píxeles; |
El orden aquí es muy importante. Para recordar cómo funciona, basta con pensar en un reloj. Comienza en la parte superior y gira en el sentido de las agujas del reloj, golpeando cada borde. Primero está el margen superior, luego el margen derecho, el margen inferior y el margen izquierdo.
Declarar que todas las propiedades de los márgenes son iguales es aún más fácil. Si ingresa solo un valor, se aplicará a cada propiedad. El siguiente código dará como resultado un margen de 10 píxeles en cada lado.
Ahora supongamos que realmente solo tiene dos valores diferentes con los que desea trabajar, lo que significa que los bordes superior e inferior tendrán un valor, y el izquierdo y el derecho tendrán otro. De forma predeterminada, cuando declara el borde superior del atajo, la parte inferior coincidirá, y cuando declare el borde derecho del atajo, el borde izquierdo coincidirá.
Esto también es cierto cuando declaras tres valores. Entonces, el siguiente código establecerá los márgenes superior, derecho e inferior manualmente, mientras que el izquierdo se toma automáticamente del derecho.
Frontera: El largo camino
El borde viene con tres propiedades principales: ancho, estilo y color. Se escriben individualmente de la siguiente manera:
|
frontera–ancho: 2 píxeles; frontera–estilo: sólido; frontera–color: Rojo; |
Puede alterar un poco el orden de estas propiedades cuando cambia a la versión corta, pero es mejor mantenerlo en este orden estándar para garantizar la compatibilidad total.
Taquigrafía de borde
Aquí está la versión corta de estas tres propiedades de contorno.
Otra cosa que puede hacer con los bordes es declarar cada lado del borde de manera diferente. Aquí podemos ver el formato de borde corto todavía en acción, solo en cada uno por separado.
|
frontera–arriba: 2 píxeles sólido Rojo; frontera–bien: 4 píxeles sólido Rojo; frontera–fondo: 8 píxeles sólido Rojo; frontera–Izquierda: 16 píxeles sólido Rojo; |
Como alternativa, puede apuntar a una de las tres propiedades de borde y aplicarlas en el sentido de las agujas del reloj, tal como lo hizo Wednesday con el acortamiento de borde. Observe cómo la segunda declaración de ancho anula la primera.
Lo siguiente nos dará un borde rojo sólido de 2 px en la parte superior, 4 px a la derecha, 8 px en la parte inferior y 16 px a la izquierda.
|
frontera: 1px sólido Rojo; frontera–ancho: 2 píxeles 4 píxeles 8 píxeles 16 píxeles; |
De manera similar, esto nos dará un borde sólido de 5px que es azul en la parte superior e inferior y rojo en la izquierda y la derecha.
|
frontera: 5px sólido; frontera–color: azul Rojo; |
Esquema abreviado
No quiero dedicar demasiado tiempo a la propiedad de contorno simplemente porque el soporte no es excelente y probablemente nunca lo use. La ventaja es que, a diferencia del borde, los contornos no afectarán su apariencia. Si alguna vez usa el esquema, la sintaxis es bastante similar a la de los bordes.
Los siguientes son los valores para ancho-contorno, estilo de esquema y contorno de color en ese orden.
Fuente: El Camino Largo
Hay un montón de diferentes propiedades de fuente con las que puedes jugar para cambiar el aspecto de tu tipografía. Como resultado, la hoja de estilo puede llenarse rápidamente con bloques de estilo como el que se muestra a continuación.
|
FUENTE–estilo: itálico; FUENTE–alternativa: pequeño–cubiertas; FUENTE–peso: atrevido; FUENTE–tamaño: 15 píxeles; la línea–altura: 30px; FUENTE–familia: Helvética, oportunidad–alguacil; |
taquigrafía de fuente
La taquigrafía tipográfica es un gran éxito en términos de espacio ahorrado. Podemos tomar toda la información anterior y condensarla en una línea corta y sorprendentemente legible.
|
FUENTE: itálico pequeño–cubiertas atrevido 15 píxeles/30px Helvética, oportunidad–alguacil; |
La mayoría de las veces, lo que terminará probablemente sea mucho más corto, simplemente porque no necesitará todas estas opciones de estilo. Puede renunciar al estilo, la variante y el peso de la fuente y simplemente declarar un tamaño de fuente rápido, una altura de línea y una familia de fuentes.
|
FUENTE: 15 píxeles/30px Helvética, oportunidad–alguacil; |
Listas: El Camino Largo
La taquigrafía de la lista es realmente interesante porque rara vez veo a alguien jugando con estas propiedades de todos modos. Si es un maestro de listas, puede usar las tres propiedades de estilo de lista que se muestran a continuación.
|
lista–estilo–tipo: círculo; lista–estilo–posición: adentro; lista–estilo–imagen: URL(marcador.jpg); |
lista abreviada
Este es bastante predecible, simplemente agregue estas tres propiedades en «estilo de lista» y estará listo para comenzar.
|
lista–estilo: círculo adentro URL(marcador.jpg); |
Transiciones CSS3: El Camino Largo
Las transiciones de CSS3 obviamente todavía son bastante nuevas y, por lo tanto, el soporte es diferente según el navegador. Aquí usaremos transición pero probablemente romperías esto en -webkit-transición, -moz-transicióny -a-transición también.
Aquí están las propiedades básicas enumeradas una por una:
|
transición–propiedad: ancho; transición–Duración: 2s; transición–momento–función: lineal; transición–demora: 2s; |
Taquigrafía de transición CSS
Esta es una propiedad en la que casi siempre verá la abreviatura utilizada en lugar de la versión larga. Si alguna vez ha realizado transiciones CSS, probablemente esté más familiarizado con la siguiente sintaxis.
|
transición: ancho 2s lineal 2s; |
Y, por supuesto, como se mencionó anteriormente, dado que los navegadores aún no son uniformes al respecto, debe incluir esos pequeños prefijos de proveedores. Aquí hay un código de ejemplo típico que usaría para una transición de compatibilidad completa (IE aún se omite).
|
transición: ancho 2s lineal 2s; –moz–transición: ancho 2s lineal 2s; –webkit–transición: ancho 2s lineal 2s; –a–transición–transición: ancho 2s lineal 2s; |
Conclusión
La minificación de CSS es una gran herramienta para ahorrar tiempo y espacio. Si está familiarizado con la sintaxis, podría argumentar que la versión abreviada es más legible que la versión larga. Sin embargo, es mucho más fácil para los principiantes leer las propiedades etiquetadas, así que tenga en cuenta cuál es su objetivo y audiencia para un proyecto en particular. Si está escribiendo un tutorial, es posible que desee enumerar los 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 háganos saber para qué propiedades usa generalmente la abreviatura y si aprendió o no algo de los ejemplos anteriores.
