Los 6 errores más comunes que cometen los desarrolladores al escribir HTML y CSS

Hola Habr! Les presento la traducción del artículo " Los 6 errores más comunes de los desarrolladores al escribir HTML y CSS " por Stas Melnikov.

Usar el atributo de marcador de posición en lugar del elemento de etiqueta

A menudo, los desarrolladores usan el atributo de marcador de posición en lugar del elemento de etiqueta. Pero en este caso, los usuarios de lectores de pantalla (lectores de pantalla) no pueden completar los campos porque el lector de pantalla no puede leer el texto del atributo de marcador de posición.

<input type="email" placeholder="Enter your email"> 

Por lo tanto, recomiendo usar el elemento de etiqueta para el campo de nombre y el atributo de marcador de posición, por ejemplo, datos que el usuario debe completar.

 <label> <span>Enter your email</span> <input type="email" placeholder="eg example@gmail.com"> </label> 

Usando el elemento img para diseñar gráficos decorativos

A menudo veo que los desarrolladores confunden los gráficos decorativos con las imágenes de contenido. Por ejemplo, marcan íconos sociales usando el elemento img.

 <a href="https://twitter.com" class="social"> <img class="social__icon" src="twitter.svg" alt> <span class="social__name">Twitter</span> </a> 

Pero el icono de la red social es un icono decorativo que ayuda a los usuarios a comprender rápidamente el significado de un elemento sin leer el texto. Si eliminamos el icono, no perdemos el valor del elemento, por lo que podemos usar la propiedad de imagen de fondo.

 <a href="https://twitter.com" class="social"> <span class="social__name">Twitter</span> </a> 

 .social::before { background-image: url("twitter.svg"); } 

Usar la propiedad de cambio de tamaño

Al deshabilitar el cambio de tamaño de un área de texto utilizando la propiedad de cambio de tamaño, la accesibilidad se degrada. Por lo tanto, el usuario no puede ingresar datos de manera conveniente.

 textarea { width: 100%; height: 200px; resize: none; } 

Puede usar las propiedades min-width, max-width, min-height y max-height, que limitan el tamaño del elemento, y el usuario puede completar los campos de una manera conveniente para sí mismo.

 textarea { min-width: 100%; max-width: 100%; min-height: 200px; max-height: 400px; } 

Usando display: bloque y posición: absoluto (fijo) juntos.

A menudo veo que los desarrolladores usan las propiedades de visualización y posición de la siguiente manera:

 .button::before { content: ""; display: block; position: absolute; top: 0; left: 0; } 

Pero el navegador establece el valor de bloque predeterminado. Por lo tanto, no necesita agregar este valor para elementos con posicionamiento absoluto o fijo. Por lo tanto, el siguiente código da los mismos resultados que el anterior.

 .button::before { content: ""; position: absolute; top: 0; left: 0; } 

Sin valor para la propiedad de estructura

No puedo trabajar con el sitio web usando el teclado. No puedo seguir el enlace. No me puedo registrar. Esto se debe a que los desarrolladores desactivan el foco en los elementos cuando no agregan ninguno a la propiedad del esquema.

 .button:focus { outline: none; } /* or */ .button:focus { outline: 0; } 

Si necesita desactivar el enfoque de forma predeterminada, asegúrese de establecer el estado de enfoque alternativo.

 .button:focus { outline: none; box-shadow: 0 0 3px 0 blue; } 

Artículos vacíos

A menudo, los desarrolladores usan elementos HTML vacíos para diseñar elementos. Por ejemplo, marcando un menú de hamburguesas usando elementos vacíos div o span:

 <button class="hamburger"> <span></span> <span></span> <span></span> </button> 

 .hamburger { width: 60px; height: 45px; position: relative; } .hamburger span { width: 100%; height: 9px; background-color: #d3531a; border-radius: 9px; position: absolute; left: 0; } .hamburger span:nth-child(1) { top: 0; } .hamburger span:nth-child(2) { top: 18px; } .hamburger span:nth-child(3) { top: 36px; } 

Pero puede usar los pseudoelementos :: before y :: after y lograr resultados similares.

 <button class="hamburger"> <span class="hamburger__text"> <span class="visually-hidden">Open menu</span> </span> </button> 

 .hamburger { width: 60px; height: 45px; position: relative; } .hamburger::before, .hamburger::after, .hamburger__text::before { content: ""; width: 100%; height: 9px; background-color: #d3531a; border-radius: 9px; position: absolute; left: 0; } .hamburger::before { top: 0; } .hamburger::after { top: 18px; } .hamburger__text::before { top: 36px; } .visually-hidden { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px !important; height: 1px !important; overflow: hidden; }