CSS tiene un amplio espectro de herramientas y propiedades que te serán de gran ayuda en el momento de diseñar tu página web. En este post podrás averiguar qué son las propiedades shorthand en CSS, cómo usarlas y por qué te resultará de gran utilidad cuando crees tu página.
Shorthand en CSS es una serie de propiedades que te permiten establecer simultáneamente valores de múltiples propiedades distintas. Esto representa una ventaja en varios aspectos ya que, en primer lugar, lograrás que tus hojas de estilo sean mucho más fáciles de leer, debido a que serán más concisas, y segundo, disminuirás de forma considerable el peso de tus hojas, ya que las propiedades shorthand en CSS son una manera reducida de escribir las propiedades deseadas junto a sus especificaciones.
¿Cómo usar las propiedades Shorthand?
Comenzar a escribir propiedades Shorthand en CSS es realmente sencillo. Tienes que tener en cuenta que cada valor debe estar separado por espacios. Recuerda este ejemplo: la propiedad border es el shorthand para las propiedades border-style, border-color y border-width. Si quisieras utilizar esta propiedad en Shorthand, podrías escribir algo como esto: border: 3px solid green. De este modo, estarás especificando un borde de 3 píxeles y solid de color verde.
Además de border, existen 7 propiedades que tienen su variación Shorthand en CSS: transition, flex, font, animation, padding, background y margin. Sin embargo, ten en cuenta que en el estándar CSS 2.1. no encontrarás las propiedades flex, transition ni animation, y podrás hacer uso del list-style. Veamos específicamente cada una de ellas.
Transition Shorthand en CSS
La propiedad transition será Shorthand en CSS para las siguientes propiedades:
- transition-property: determina el nombre de la propiedad CSS para la cuál se asignará el efecto de transición.
- transition-duration: determina la cantidad de tiempo que el efecto de transición tomará para completarse.
- transition-timing-function: determina el ritmo de la transición del efecto.
- Transition-delay: especifica cuándo comienza la transición del efecto.
Flex Shorthand en CSS
La propiedad flex será Shorthand en CSS para estas propiedades:
- flex-grow: determina cuánto va a crecer el objeto flex en relación con otros objetos flex o con el espacio disponible en el flex container.
- flex-shrink: determina que el objeto se encoja.
- flex-basis: determina el tamaño inicial del objeto y puede ser un porcentaje o unidad.
Font Shorthand en CSS
La propiedad font será Shorthand en CSS para:
- font-style: especifica el estilo de un texto, que puede ser normal, italic u oblique.
- font-weight: determina el peso de un texto, que puede ser normal, bold, bolder, lighter o 100-900.
- font-variant: hace que el texto se muestre en una tipografía small-caps para que todas las letras minúsculas se conviertan en mayúsculas, pero de un tamaño más pequeño.
- font-size: determina el tamaño del texto con alguna palabra clave, valor o porcentaje.
- font-family: define múltiples opciones de familia tipográfica.
Animation Shorthand en CSS
La propiedad animation será Shorthand en CSS para las siguientes propiedades:
- animation-duration: determina la duración de la secuencia de animación.
- animation-name: determina el tipo de animación.
- animation-delay: determina cuándo comienza la animación.
- animation-direction: determina la dirección de la animación.
- animation-fill-mode: se usa para aplicar estilos antes o después de que la animación se reproduzca.
- animation-iteration.count: se usa para definir el número de veces que se verá la animación.
- animation-play-state: pausa y reanuda la secuencia de animación.
- animation-timing-function: determina el ritmo de la animación.
Padding Shorthand en CSS
Recuerda que padding será definida en píxeles y fijará el espacio que se especifíque arriba, abajo, a la derecha e izquierda, de modo que definirá las propiedades:
- padding-top.
- padding-bottom.
- padding-right.
- padding-left.
Background Shorthand en CSS
La propiedad Background será Shorthand en CSS para estas propiedades:
- background-color: define el color del fondo de un elemento.
- background-image: define la imagen en el fondo de un elemento.
- background-repeat: controla cómo la imagen se repite o si no se repite.
- background-attachment: determina si la imagen queda fija o se “escrolea”.
- background-position: determina dónde se ubica la imagen dentro de la página.
Margin Shorthand en CSS
Recuerda que margin será definida en píxeles y cada propiedad especificará su distancia arriba, abajo, a la izquierda y derecha, de modo que será shorthand para:
- margin-top.
- margin-bottom.
- margin-left.
- margin-right.
List-Style Shorthand en CSS
La propiedad list-style en su forma Shorthand en CSS te permitirá establecer de forma simultánea las siguientes propiedades de una lista:
- list-style-type.
- list-style-position.
- list-style-image.
Algunos ejemplos
Para que entiendas de forma concisa cómo las propiedades Shorthand en CSS te pueden ahorrar montones de líneas en tus hojas, mira el siguiente ejemplo:
Podrías escribir tu propiedad margin así:
margin-top: 20px;
margin-right: 30px;
margin-bottom: 70px;
margin-left: 80px;
O simplemente, podrías hacerlo así:
margin: 20px 30px 70px 80px;
¿Por dónde continuar?
Ya que has aprendido las utilidad de las propiedades Shorthand en CSS, ¿sigues teniendo algunas dudas o mucha curiosidad después de leer toda esta información? CSS presenta todo un mundo de posibilidades y opciones para el diseño de tus páginas web y dominarlo es una habilidad cada vez más valorada y requerida en el mundo del desarrollo web. ¡En Keepcoding tenemos los mejores programas de aprendizaje gracias a todos nuestros bootcamps disponibles! Si también te interesan otros aspectos de esta área, como los lenguajes de programación, no dudes en buscar tu campo de interés entre todos los cursos que ofertamos.
