Una vez más, quiero contarles sobre los resultados de un estudio de diseño del sitio que me llamó la atención. La última vez escribí sobre los mecanismos CSS que subyacen al nuevo diseño de Facebook. Y ahora tengo curiosidad por explorar Twitter CSS. El nuevo diseño de Twitter apareció hace casi un año. Encontré muchas cosas interesantes en CSS CSS: algo me parecía bien y algo extraño.
Relación de aspecto de avatares de usuario
Noté una implementación interesante del avatar del usuario en la página de perfil. Esta implementación utiliza una técnica CSS para preservar la relación de aspecto de un elemento.Avatar de usuario en la página de perfilEl siguiente código HTML y CSS ilustra la implementación del avatar.<a href="#" class="avatar">
<div class="avatar-aspect-ratio"></div>
<img alt="" src="me.jpg">
</a>
.avatar {
position: relative;
width: 25%;
display: block;
}
.avatar-aspect-ratio {
width: 100%;
padding-bottom: 100%;
}
.avatar img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
La técnica de preservar la relación de aspecto de un elemento funciona debido al hecho de que cuando un elemento tiene una sangría vertical (propiedad padding-bottomo padding-top), la sangría depende del ancho del elemento. Eche un vistazo al siguiente ejemplo:.element {
width: 250px;
padding-bottom: 100%;
}
El valor calculado padding-bottomes igual 250px. Esto significa que tenemos un cuadrado perfecto. El equipo de Twitter utilizó la misma técnica, pero se aplicó a un elemento <img>que, en relación con el elemento principal, está en una posición absoluta. ¿Por qué? Aquí está la razón.Algo está mal con el avatar.Cuando la imagen no se posiciona absolutamente, el avatar se verá como el que se muestra en la figura anterior. La imagen debe posicionarse utilizando un valor100%de ancho y alto. Con este enfoque, su tamaño se establecerá de acuerdo con el tamaño del elemento contenedor.Ahora que hemos descubierto la idea detrás de esta solución, volvamos a cómo se implementó esta idea en Twitter.La propiedad sewidth: 25%basa en el ancho del elemento contenedor. En mi pantalla es -600px. Me preguntaba por qué se eligió esa técnica. Después de aprender más sobre el código CSS, noté que se usa el mismo componente en la ventana modal Editar perfil. Es cierto que el elemento aquí es más pequeño debido al uso del siguiente estilo:.avatar {
max-width: 8rem;
}
Me gusta mucho la idea de administrar imágenes al influir solo en la propiedad width. Aquí hay un video que ilustra esta idea.Control de ancho de imagenAquí puede encontrar un proyecto de demostración para esta sección.Porcentaje de sangría superior
Para que el avatar del usuario se superponga a la foto ubicada en la parte superior de la página de perfil, se utiliza una sangría externa negativa especificada en porcentaje:.avatar {
margin-top: -18%;
}
Es cierto que en la ventana modal Editar perfil, el diseño ya se usa para ajustar la sangría superior margin-top: -3rem. Tenga en cuenta que la sangría en la ventana modal se establece utilizando unidades rem. Se utilizan las mismas unidades para establecer la propiedad max-width.Uso extraño de la función CSS calc ()
Noté que el siguiente CSS se usa para diseñar algunos botones:.button {
min-width: calc(45.08px)
}
¿Por qué pasar funciones un calc()solo valor? No veo el punto. ¿Quizás quisieron redondear el número 45.08? Pero con este enfoque, no se redondea a 45. El ancho del botón es muy pequeño. El botón, al traducir la aplicación a un idioma RTL, como el árabe, será demasiado pequeño.Un botón que es demasiado pequeñoLa funcióncalc()aparece en el CSS en línea. Por lo tanto, creo que este es el resultado del estilo dinámico del botón con React.Mezcle fondos CSS e imágenes HTML
En muchos lugares del sitio, encontré una mezcla de imágenes de fondo definidas por imágenes CSS y HTML. Eche un vistazo al siguiente ejemplo:<div style="background-image: url(me.jpg);"></div>
<img alt="" src="me.jpg">
Vi esto en el perfil del usuario y en el componente utilizado en la formación del diseño de la cuadrícula. Curiosamente, la propiedad del opacityelemento se <img>establece en 0. La fuente de la imagen activa es una propiedad background-image. Además, aquí se usa una propiedad background-size: coverque evita la distorsión de la imagen.Traté de hacer lo contrario, es decir, mostrar el elemento <img>y ocultar el fondo CSS, y comparé los diseños de cuadrícula. Los resultados de esta comparación se muestran a continuación.A la izquierda está la opción que usa la imagen de fondo, y a la derecha está la opción que usa la imagen HTML. ¡Obviamente, la imagen de la derecha está distorsionada! No sé por qué el equipo de desarrollo no usó la propiedad CSSobject-fit: coverpara evitar la distorsión. Y me gustaría saber por qué se usan dos imágenes aquí.Restablecer estilos
Noté un patrón, que es el uso constante de la clase CSS que se agrega a los elementos <div>. Aquí está el CSS relevante:.css-1dbjc4n {
align-items: stretch;
border: 0 solid black;
box-sizing: border-box;
display: flex;
flex-basis: auto;
flex-direction: column;
flex-shrink: 0;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
min-height: 0px;
min-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: relative;
z-index: 0;
}
Este estilo se aplica literalmente a todos los elementos <div>de la página. ¿Por qué? ¿No es suficiente restablecer los estilos CSS aquí?Algunos de los estilos descritos anteriormente son bastante comprensibles para mí, más o menos min-width: 0, ya que hay alguna conexión con Flexbox. Pero, ¿qué pasa con la sangría, sangría, fronteras? ¿Por qué un elemento <div>necesita ser restablecido estilos, dado el hecho de que este elemento no tiene las propiedades apropiadas?Flexbox y ancho mínimo: 0
El valor predeterminado de la propiedad min-widthes auto, que resulta ser cero. Cuando algo se muestra como un elemento flexible, el valor de su propiedad min-widthes igual al tamaño de su contenido. Permitir este comportamiento puede violar el diseño si el contenido del elemento es mayor de lo que es.Para evitar este problema, debe restablecer la propiedad min-widthpara los descendientes de elementos flexibles.Elemento flexible y envoltorio FlexboxEl diseño que se muestra arriba muestra lo que podría suceder si el contenido del elemento flexible es demasiado largo. Tenga en cuenta que el texto va más allá de los límites del elemento contenedor. Pero, ¿qué sucede al usar la propiedadmin-width: 0?El contenido no va más allá del elemento flexible.Posición de uso: propiedad adhesiva
Noté el uso de la propiedad position: stickyen la barra lateral derecha de Twitter (donde se muestran las tendencias de los medios y las recomendaciones con respecto a los usuarios a seguir). Me pareció interesante cómo se organizaba el trabajo con valores de propiedad bottomy topal desplazarse. Los valores predeterminados son los siguientes:.sidebar {
position: sticky;
width: 350px;
bottom: -470.5px;
}
Cuando la página se desplaza hacia abajo, la propiedad bottomse reemplaza por la propiedad top: -480.5px. Creo que los diseñadores hicieron esto para permitir que el usuario llegue primero al final de la barra lateral. La propiedad se topagrega después de eso.Elementos separadores
Al igual que en el diseño de Facebook que analicé anteriormente, en el diseño de Twitter, en muchos lugares, se utilizan elementos separadores. Todos estos son elementos flexibles cuya anchura se establece mediante la propiedad flex-basis.Elementos separadoresEl primer elemento que se muestra en la imagen anterior utiliza la propiedad al configurar el elemento separadorflex-grow: 1. El segundo usa un ancho fijo especificado en píxeles.Hacer contenido de Tweet
TweetAbove es creado por mi tweet. A primera vista, puede parecer que tenemos ante nosotros un elemento<p>o<span>, en el que se agrega texto. Pero, como resultó, cada carita sonriente está representada por una etiqueta separada<span>, y si el texto está entre dos de esos elementos, también está hecho como una etiqueta<span>.El diseño del texto delEmoticon de tweet : este<span>, en el que hay un elemento<div>,<div>contiene dos imágenes. Uno es el fondo CSS, el segundo es la imagen HTML.Dado que la primera oración está envuelta en una etiqueta<span>, debe haber separadores entre ella y elementos del mismo nivel. Los diseñadores agregaron una nueva línea al comienzo de la segunda oración para separar las oraciones.Segunda oraciónUsar valores calculados para separar elementos
Botón AtrásAl realizar una búsqueda en Twitter, o al abrir una página de perfil, se puede ver un botónmargin-left: -4px, que especifica una sangría externa izquierda negativa. Estaba interesado en el procedimiento para calcular este valor..back-button {
margin-left: calc(5px + (-1 * (39px - 1.5em)) / 2);
}
Los cálculos anteriores dan como resultado un valor -4px. ¿Por qué no solo preguntar -4px? ¿Es esto mejor en este caso que usar una función calc()?Ancho de enlaces de navegación
Enlaces de navegaciónDesde el primer día, cuando me encontré con un panel de enlaces de navegación, noté que cuando pasas el mouse sobre ellos, su ancho es igual a su contenido. Me preguntaba por qué no hacer que el icono y la etiqueta cubran todo el ancho del elemento de navegación.Aquí, me llamó la atención el uso de una propiedadflex-direction: columnpara cada elemento de la barra de navegación. ¿Por qué? ¿Es esto necesario en una situación donde solo se usa un niño aquí?Sangría externa agregada por si acaso
La sangría en cuestión está presente en el diseño para evitar comportamientos de diseño de página no deseados. Llamé la atención a dos ejemplos del uso de sangría agregada a los elementos, por así decirlo, "por si acaso". Miremos a ellos.Sangría agregada a los elementos "por si acaso". A la izquierda está el contenido normal del elemento. A la derecha está el contenido que es notablemente más largo de lo normal.Preste atención a lo que sucede cuando el contenido del elemento es notablemente más largo que su contenido normal. A saber, lo siguiente ocurre aquí:- El texto está recortado.
- Hay una sangría entre los elementos.
La sangría externa desempeña el papel de un marcador de posición, lo que evita que el elemento ocupe todo el espacio. Si tiene esto en cuenta a tiempo, puede evitar problemas inesperados que puedan surgir durante el proyecto. Se recomienda que siempre pruebe los diseños de página con contenido que sea más largo que una longitud "normal".Ventanas modales en pequeñas áreas de visualización.
Examiné la ventana de edición de perfil modal. Resultó que a cierta altura del área de visualización, el botón para Savedicha ventana no está disponible. Así es como se ve.Botón Guardar inaccesibleDado que la ventana modal no admite desplazamiento,Saveno pude accederal botón. Pero la ventana utilizada para controlar la apariencia de los elementos admite el cambio dinámico de altura y el desplazamiento.Una ventana que admite cambios dinámicos de altura¿Por qué una ventana admite desplazamiento y la otra no? ¿Es interesante saber cuál, según los diseñadores de Twitter, es más importante? En cuanto a mí, esta es exactamente la ventana que se usa para editar el perfil.¿Planeas adoptar alguna idea del diseño de Twitter?