¿Cuáles son los hacks HTML / JS / DOM / CSS más interesantes que la mayoría de los desarrolladores web no conocen?

Usar el selector de atributos equivale a brujería:

Seleccione todos los que son hrefs:
a[href]{}

Seleccione todos los elementos que tienen una clase (útil si JS está agregando clases en algún lugar)
article[class]{}

Seleccione una ID, pero con la especificidad de una clase:

  sección [id = "barra lateral"] {color: rojo}

Diseñe todos los enlaces que sean URL totalmente calificados, sabiendo que ^ significa “comienza con”:

  a [href ^ = "http"] {}

¿Necesita diseñar un enlace a un ZIP o PDF? Totalmente bien también. Use $ que significa “termina con”

a[href$=".zip"]:after{content:"(zip)"}

¿Estilo una imagen basada en una palabra existente en el atributo alt? Usemos el selector de subcadena de espacio:

  img [alt ~ = "Seguro"] {} 

¿Diseñar una imagen según el nombre del archivo de imagen en sí? También es factible, incluso si su imagen es this-image-shot-april-2-2014.png. El | es un selector de subcadena de guiones:

  img [src | = "- abril -"] {}

Hay algunas cosas aún más locas que puedes hacer con el selector de atributos, sobre el que escribí aquí: CSS Sorcery: Performing Magic with the Attribute Selector

Hola, proporcionaré los más raros. pero primero debes saber qué significan algunos términos.

Ante todo:

Comprobación de compatibilidad del navegador:
¿Puedo usar … Tablas de soporte para HTML5, CSS3, etc.

* Estadísticas de uso compartido global basadas en datos de StatCounter GlobalStats de agosto de 2015. Consulte la tabla de uso del navegador para ver el uso por versión del navegador.

Polyfill:
En el desarrollo web, un polyfill (o polyfiller) es un código descargable que proporciona funciones que no están integradas en un navegador web. Implementa tecnología que un desarrollador espera que el navegador proporcione de forma nativa, proporcionando un panorama API más uniforme.

Retroceder:
Los fallos de código son la solución perfecta para comprometerse con sus muchos visitantes únicos. No todos en la web usan el mismo sistema operativo, navegador web o incluso hardware físico. Todo esto influye en cómo su página web realmente se representará en la pantalla. Cuando trabaje con nuevos trucos CSS o JavaScript, a menudo se encontrará con tales errores técnicos y problemas de compatibilidad, por lo que debe usar algunas técnicas alternativas para solucionarlos.

[CSS] @supports – úsalo , ten cuidado

La detección de funciones siempre ha sido una buena práctica, pero desafortunadamente solo pudimos hacer ese tipo de cosas usando JavaScript. Pero ya no más.
Las consultas de características CSS permiten a los autores condicionar las reglas en función de si las declaraciones de propiedades particulares son compatibles con CSS utilizando la regla @supports at.
Por ahora está disponible en FF 22+, Opera 12.1+ y Chrome 28+.

[API] Vibración : úsala , ten cuidado

La vibración permite que las aplicaciones web accedan al motor de retroalimentación de fuerza de un dispositivo compatible.
Vibration API está específicamente dirigido al caso de uso de juegos y no está destinado a actividades como notificaciones o alertas en el teléfono móvil de un usuario, por ejemplo.
Al ser una función basada en dispositivos móviles, la función no prefijada es compatible con Firefox para Android, Firefox OS, Chromium 32 y, por lo tanto, en Chrome 32+ en Android y Opera 20+ en Android. Safari Mobile y IE mobile aún no lo admiten.

[HTML] WebP – úsalo , ten cuidado

WebP es un formato de imagen diseñado para proporcionar imágenes fotográficas de alta calidad a través de archivos de menor tamaño que JPEG. Es compatible de forma nativa en Chrome, Android y Opera.
La compatibilidad con WebP alpha está disponible en Chrome 22 (junto con sin pérdida). Puede detectar el soporte alfa con controladores onload / onerror.
Por ahora, Modernizr detecta el soporte de WebP y puede administrar su propio respaldo a jpeg.
Polyfills recomendados: WebPJS

[API] Trabajadores web : puede usarlo con respaldo

Los trabajadores web pueden paralelizar operaciones computacionalmente pesadas, liberando el hilo de la interfaz de usuario para responder a la entrada del usuario.
Para los navegadores que no son compatibles con los trabajadores web, dependiendo de su caso de uso, puede optar por no ofrecer la función que proporcionan los trabajadores web o fragmentarla y ponerla en el hilo de la interfaz de usuario.

[API] WebGL – úsalo , ten cuidado

Hay polyfills y complementos para habilitar WebGL para IE, pero probablemente no debería usarlos. Use WebGL si está presente, de lo contrario, apunte al usuario a get.webgl.org.
WebGL se utiliza para hacer juegos como Minecraft y juegos de Android … en el navegador (OpenGL para la web)

[HTML]– puedes usarlo, con polyfill

El elementoproporciona un mecanismo para mostrar subtítulos / subtítulos y / o metadatos asociados con

[HTML] : puede usarlo con respaldo

Si está utilizando el elemento Ruby, no necesita un respaldo basado en scripts, pero puede proporcionar un conjunto de valores predeterminados basados ​​en CSS.
Polyfills recomendados: Cross-browser Ruby

[API] requestAnimationFrame : puede usarlo con polyfill

requestAnimationFrame se recomienda para la animación, ya que es amigable con la batería y la energía, y permite al navegador optimizar el rendimiento de sus animaciones.
La especificación se ha solucionado y se ha establecido. En la actualidad, todos los principales navegadores admiten el marco de solicitud de animación. Si necesita soporte completo para el navegador, asegúrese de usar el polyfill ligero.
Un caso de uso interesante: si tiene un paralaje vertical que cambia en el desplazamiento, puede considerar usar rAF en lugar de vincularlo al evento de desplazamiento de una ventana. De esta manera, solo pediríawindow.scrollTop en su devolución de llamada rAF y tomaría medidas. Esto te dará las animaciones más suaves posibles.
Polyfills recomendados: requestAnimationFrame polyfill

[CSS] regiones – evitar

CSS Regions está en desarrollo activo. Como resultado, la sintaxis está en flujo. Existe un polyfill basado en una sintaxis anterior, pero le recomendamos que mantenga sus caballos hasta que esta especificación vea cierta estabilidad y 3 o más implementaciones.

Posición [CSS]: pegajosa : puede usarla con polyfill, tenga cuidado

position: sticky combina aspectos de posicionamiento relativo y fijo. Los elementos a los que se aplica inicialmente actúan como si fueran posición: relativa, pero cambian a una posición similar: fija cuando alcanzan una posición específica relativa a la ventana gráfica. Este comportamiento a menudo es útil para encabezados de sección o barras laterales de navegación.
Este video de presentación de Mozilla
y
esta demostración en vivo del polyfill fijo fijo
muestra cómo position: sticky se comporta en casos de uso comunes.
Compatible sin prefijo en Firefox 30.0+. Compatible con un prefijo (como -webkit-sticky) en OS X Safari 7.0+ y iOS Safari 6.0+. Actualmente parte de la
Borrador de trabajo del módulo de diseño posicionado CSS Nivel 3 W3C
.
Se recomienda precaución ya que la especificación se encuentra actualmente solo en la etapa de Borrador de trabajo y, por lo tanto, puede estar sujeta a cambios. Se recomienda encarecidamente el uso de un polyfill debido al nivel actual de soporte del navegador. Los signos actualmente parecen positivos para que el soporte del navegador aumente en el futuro.
Utilizar
Fijo-pegajoso
para adhesivos simples alineados arriba o abajo. Utilizar
Stickyfill
para una gama más amplia de casos de uso con bloques y celdas de tabla alineados en posición superior alineados.
Polyfills recomendados: Fijo-adhesivo, Stickyfill

• Hay mucho más … pero estos son raros. Por favor, siéntase libre de preguntar y seguirme 🙂

Si tiene algún comentario, sugerencia, recomendación o corrección, no dude en comentar.