Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

3 cosas que (casi) nadie sabe de CSS

3 cosas que (casi) nadie sabe de CSS 16.APR.15

Alvaro José Rios Ch
Fundador WebBizarro

Una pequeña evaluación para los desarrolladores ha demostrado que los desarrolladores saben menos de CSS de lo que creen, mas de 3000 personas han tomado la prueba y la media fue de 55%, sin embargo lo interesante no es la media sino en que se equivocaban las personas y hay tres puntos particulares donde las personas solían contestar particularmente mal.

Si quieres medir tu conocimiento lo mejor es que tomes la prueba antes de leer esto, así no tendras una ventaja sobre las demás personas.

 

¿Cuál es el mejor line-height que puede establecer?

Esto es algo que debe ser relativamente fácil si usualmente haces formato de texto, sin embargo parace que no es tan fácil.

 

Usted desea que el texto de su sitio web tenga doble espaciado

¿Cuál de los siguientes line-height debería establecer?

- 200%

- 2em

- 2

- double

 

Un 31% contesto esta pregunta correctamente, porque no se toman un minuto antes de continuar y escogen una respuesta.

Si dicen double, estarán equivocados como el 9% de las personas que contestaron esta pregunta de esa forma, la única palabra que line-height acepta es normal. Por otro lado pueden elegir 2em la respuesta más popular con el 39% esto le dará el doble de espacio dentro del elemento contenedor pero también lo hará 200% y aun así esta última solo enamoró al 21% de los encuestados.

La respuesta correcta es 2.

Ustedes diran pero 2em hace el trabajo, sin embargo esto establece el line-height en el tamaño de la fuente base, por ejemplo si el tamaño del texto en su sitio es de 12pt, usted tiene un encabezado de 24pt y establece el line-height en 2em o 200% entonces el espacio sera de 24pt por lo que el encabezado no tendrá un interlineado doble sino sencillo.

 

¿Cómo hacer que los elementos se superpongan?

 

Esta pregunta es un poco más complicada y requiere conocer de algunos trucos de diseño para contestarla.

¿Cuál de las siguientes propiedades CSS, utilizada por sí misma, puede causar que elementos HTML se superpongan?

- z-index

- margin

- overflow

- background

 

Si ya eligió su respuesta entonces vamos a ver cual es la correcta.

La opción que podemos descartar fácilmente es background, solo el 2% se inclino por ella ya que sabemos que esta propiedad controla el color e imágenes de fondo.

La mayoría de las personas se inclinó por z-index, 46% de la gente no lo pensó dos veces y se inclino por esta opción, sin embargo establecer z-index por si solo no tiene ningún efecto en el elemento, también tiene que establecer un position, en pocas palabras z-index te permite controlar el orden en que los elementos se apilan, sin embargo los elementos deben estar apilados en un primer lugar.

Overflow, esta debería ser fácil de eliminar, como todos sabemos esta propiedad te permite controlar como el contenido de un contenedor se adapta a este contenedor, una ves más la propiedad overflow depende del tamaño de la caja y por si sola no ocasiona solapamiento. Un 22% escogió esta opción de forma errada.

Finalmente margin, la respuesta correcta. Solo el 30% de las personas acertó en esta pregunta. Pero se supone que el margin se usa para dar espacio a los elementos, sin embargo si usted alguna vez ha hecho algún diseño sabrá que los margenes negativos provocan que los elementos se superpongan.

 

Pseudo-elementos vs pseudo-clases

Esta pregunta es como decimos en mi tierra una concha de mango, pero el 23% de las personas logró contestarlas de forma correcta.

¿Cuál de los siguientes efectos se logra mejor mediante un pseudo-elemento?

- Añadir una sombra a un hipervínculo cuando un usuario pasa el ratón sobre él.

- Muestra la etiqueta de una checkbox en un color diferente cuando se marca el checkbox.

- Dar las filas pares e impares de una tabla de diferentes colores de fondo.

- En un diseño de página flexible, mostrar la primera línea de un párrafo en negrita.

Tres de esas opciones se hace con pseudo-clases y solo una con un pseudo-elemento ¿sabes cual es la diferencia?

Una pseudo-clasees un estado particular en que un elemento del html se puede encontrar, es como una clase virtual que el navegador aplica al elemento en determinadas condiciones.

Un pseudo-elemento es parte del documento que permite que se le pueda dar un estilo CSS, sin embargo no es un elemento HTML real. Es algo como un elemento HTML virtual que se obtiene con el CSS a pesar de no tener etiquetas HTML reales.

Bien con esto en mente puedes elegir tu respuesta y veamos si es correcta.

Añadir una sombra a un enlace. Un enlace es un elemento HTML real al que le estamos aplicando una sobra cuando ocurre un estado particular, ¿Eso les suena a algo?, claro que estamos hablando de una pseudo-clase, en este caso :hover, a pesar de ser incorrecta el 22% seleccionó esta opción.

Mostrar el label de un checkbox en diferente color cuando este se marque. Una vez más el label es un elemento real que se modifica cuando cambia el estado del checkbox, por lo tanto estamos hablando de la pseudo-clase :checked. Incorrecta pero el 20% se inclinó por ella.

Filas pares e impares de diferente color en una tabla. Esta es un poco más difícil, parece que puede ser la respuesta correcta pero seguimos hablando de un elemento HTML, el tr en este caso, al que le vamos a aplicar un estilo dependiendo de un estado y para eso usamos la pseudo-clase nt-child(even) o nt-child(2n) para los pares y nt-child(odd) o nt-child(2n+1) para los impares. Esta opción fue la más popular al parecer por el hecho de que es parte del lado oscuro de CSS, 36% de los evaluados la eligieron.

Finalmente la respuesta correcta, en un diseño de página flexible colocar la primera línea del párrafo en negrita, esto es algo que no podemos hacer con un elemento HTML ya que en un diseño de página flexible no sabemos cual es la primera línea del párrafo para eso debemos usar un pseudo elemento, en este caso :first-line, este pseudo-elemento te permite aplicar un estilo a la primera linea de un párrafo sin importar donde empiece la segunda.

 

La verdad las tres son preguntas bastante difíciles así que si estas empezando no te sientas mal por no saber alguna o todas las respuestas pero al menos hoy aprendiste algo nuevo.

Fuente: https://sitthetest.com/tests