es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Taquigrafía de CSS vs. Tacaño: cuándo usar qué

Taquigrafía y Taco a mano: uno es conciso y el otro es preciso. Uno surgió de la necesidad de la brevedad, mientras que el otro se mantuvo firme para preservar la claridad. De cualquier manera, tienen sus propósitos, pros y contras, por así decirlo.

Esta publicación arrojará algo de luz sobre las notaciones de taquigrafía de CSS y las anotaciones a mano, al tiempo que concluye cuál es la mejor para cada situación .

¿Qué es la propiedad de taquigrafía?

La propiedad de taquigrafía es una propiedad que toma los valores para otros conjuntos de propiedades de CSS. Por ejemplo, podemos asignar un valor para border-width, border-style y border-color usando solo la propiedad border .

Básicamente,

 borde: 1px azul sólido; 

es lo mismo que:

 ancho del borde: 1px; border-style: sólido; color del borde: azul; 

Con esto, no tenemos que declarar los valores de propiedad individuales por separado (que es redundante, consume tiempo y espacio). También restablece las propiedades omitidas en la declaración, algo que puede aprovecharse.

¿Como funciona?

Como se mencionó anteriormente, escribimos un conjunto de otros valores de propiedad en taquigrafía, el orden no importa si todos los valores de propiedad en la taquigrafía son de un tipo diferente, como en el borde . Para propiedades con tipos similares de valores como margen, el orden sí importa . En caso de duda, ¡recuerda las agujas del reloj!

Ahora, ¿qué pasa si nos perdemos una propiedad o dos en la declaración? En el ejemplo anterior, digamos que ignoramos border-style .

 borde: 1px azul; 

Ya no podremos ver las fronteras, no porque la propiedad de taquigrafía no funcionó, sino porque el border-style que dejamos afuera obtuvo el valor predeterminado none . Así es como se obtuvo la propiedad taquigráfica.

 borde: 1px ninguno azul; 

Ahora vamos a soltar el 1px para border-width y mantener los otros dos:

 borde: azul sólido; 

Podremos ver los bordes, solo que con un ancho más grueso, y eso se debe a que la propiedad de border-width obtuvo el medium valor predeterminado.

 borde: azul medio sólido; 

Esto concluye para nosotros que cuando un valor de propiedad se omite en una declaración abreviada, esa propiedad toma su valor predeterminado (incluso si tiene que anular cualquier valor anterior asignado para el mismo).

Si hay border-width: 1px; para un elemento en algún lugar antes del border: solid blue; por lo mismo, el ancho del borde va a ser medium (el valor predeterminado), no 1px .

Otra cosa que vale la pena mencionar es que no podemos usar valores como inherit, initial o unset, que están disponibles para todas las propiedades de CSS, en notación abreviada. Si los usamos, el navegador no podrá saber exactamente qué propiedad se supone que representa ese valor en la abreviatura: se descartará toda la declaración .

all propiedad

Hay una propiedad abreviada de CSS que puede establecer el valor para todas las propiedades de CSS . Los valores inherit CSS, initial y unset son aplicables a todas las propiedades y, por lo tanto, estos son los únicos valores aceptados por la propiedad all .

 div {all: initial} 

Esto hará que el elemento div elimine TODOS los valores de propiedad de CSS que tenía, y restablecerá el valor predeterminado en cada uno de ellos.

⚠ Advertencia

No usemos mal la propiedad de all . La necesidad de hacerlo puede surgir solo en circunstancias muy excepcionales, cuando no podemos tocar ningún código CSS previo de un elemento al que deseamos aplicar esta propiedad.

Nota: El color propiedad CSS toma el valor hexadecimal con notación abreviada si los dos números de valor hexadecimal en cada canal de color son iguales. Por ejemplo, background: #445599; es lo mismo que background: #459; .

¿Qué es la propiedad a mano larga?

Las propiedades individuales que se pueden incluir en una propiedad abreviada se llaman propiedades de mano dura. Algunos ejemplos son; background-image, margin-left, animation-duration, etc.

¿Por qué deberíamos usarlo?

Aunque las alternativas de taquigrafía son útiles, tienen una desventaja. ¿Recuerda que al principio vimos cómo la taquigrafía anula cualquier propiedad dejada de lado con sus valores predeterminados? Esto puede ser un problema si no se desea reiniciar.

Tome la propiedad de taquigrafía de font por ejemplo. Vamos a usarlo en el elemento h4 (que tiene un estilo de navegador predeterminado font-weight:bold )

 fuente: 20px "courier new"; 

En el código de taquigrafía anterior, no hay ningún valor para la propiedad font-weight, por lo que font-weight:bold (estilo predeterminado del navegador) será anulado por el valor predeterminado font-weight:normal hace que el elemento h4 pierda su estilo negrita, que puede no haber sido intencionado.

Por lo tanto, para el ejemplo anterior, dos propiedades simples, font-size font-family son perfectas.

Además, usar la abreviatura para asignar solo uno o dos valores de propiedad no es muy útil . ¿Por qué darle al navegador un trabajo extra para interpretar cada propiedad (incluidas las que quedan) en forma abreviada, cuando solo se necesita una para trabajar?

Dejando a un lado la producción, durante la etapa de desarrollo, algunos desarrolladores (especialmente los principiantes) pueden encontrar que es mucho más fácil trabajar con la notación a mano larga que la taquigrafía para una mejor legibilidad y claridad .

Conclusión

Hoy en día, con la posibilidad de codificación rápida (con la ayuda de herramientas como Emmet) y minificación, no se necesita una alta confiabilidad en la taquigrafía, pero al mismo tiempo, es mucho más lógico escribir margin:0; . El contexto en el que preferimos nuestras anotaciones CSS variará y todo lo que tenemos que hacer es descubrir qué notación funcionará mejor para nosotros y cuándo.

15 parques infantiles Funtastic que deseabas cuando eras un niño

15 parques infantiles Funtastic que deseabas cuando eras un niño

¿Te acuerdas de cuando eras joven y te encantaba colgar de las barras de mono, jugar con la arena y dar saltos atrevidos en los columpios? Los parques infantiles son lugares increíbles donde un niño (o un niño grande) puede ensuciarse y experimentar las alegrías de ser joven y libre.Aquí, he reunido una selección de 15 áreas de juego creativamente diseñadas de todo el mundo . Con tim

(Consejos de tecnología y diseño)

Obtenga sus fotos de teléfonos inteligentes al instante con Prynt

Obtenga sus fotos de teléfonos inteligentes al instante con Prynt

¿Toma y publica fotos de usted, su familia y amigos, y mucho sobre su vida cotidiana? ¿Dónde guardas tus fotos cuando termines? Si desea una forma más tangible de guardar instantáneas de su vida, en lugar de perder sus fotos en cuentas sociales o, peor aún, en el almacenamiento en la nube, ¿por qué no imprimirlas en el momento con Prynt?Prynt e

(Consejos de tecnología y diseño)