10 métodos útiles de recuperación para CSS y Javascript
Los códigos alternativos son la solución perfecta para comprometerse con sus muchos visitantes únicos. No todos en la web utilizan el mismo sistema operativo, navegador web o incluso hardware físico. Todo esto influye en la manera en que su página web se representará en la pantalla. Cuando trabaje con nuevos trucos de CSS o JavaScript, a menudo se encontrará con errores técnicos de este tipo..
¡Pero no dejes que estas trampas te desanimen! En esta guía he reunido algunas de las Técnicas de recuperación más comunes para diseñadores web enfocados en CSS y JavaScript / jQuery. Cuando todo lo demás falla, desea proporcionar a los usuarios al menos una funcionalidad básica de la página. La simplicidad reina en el campo del diseño de la experiencia del usuario..
Consulte nuestra guía a continuación y háganos saber sus opiniones y preguntas en la sección de comentarios..
1. Esquinas redondeadas con imágenes
Las técnicas CSS3 se han disparado en el diseño web general. Una de las propiedades más notables es radio del borde lo que permite sobre la marcha esquinas redondeadas. Estos se ven hermosos en prácticamente cualquier botón, div o cuadro de texto. El único problema es el soporte limitado entre navegadores web..
Muchos navegadores antiguos, incluido Internet Explorer 7, no admiten esta propiedad. Por lo tanto, para que las esquinas redondeadas funcionen en todos los navegadores estándar, tendrá que crear un respaldo con imágenes..
El código estándar utiliza las propiedades regulares de CSS3 en la división principal, mientras que se adapta a las imágenes en cada una de las esquinas. Es probable que deba configurar algunos divs adicionales dentro del contenedor principal que se usan para mostrar imágenes de la esquina en el fondo.
#mainbox -webkit-border-radius: 5px; / * Safari * / -moz-border-radius: 5px; / * Firefox \ Gecko Engine * / -o-border-radius: 5px; / * Opera * / border-radius: 5px; #mainbox .topc background: url ('corner-tl.png') no-repetir arriba a la izquierda; #mainbox .topc span background: url ('corner-tr.png') no-repetir arriba a la derecha; #mainbox .btmc background: url ('corner-bl.png') no repetir a la izquierda; #mainbox .btmc span background: url ('corner-br.png') sin repetición abajo a la derecha; Para evitar el estrés, te sugiero que uses una aplicación como RoundedCornr. Es una aplicación web en el navegador que genera CSS de esquinas redondeadas utilizando tanto CSS3 como imágenes. Esto será especialmente útil para los diseñadores que no tienen acceso a software de gráficos como Photoshop o GIMP..
2. Sistema de menú desplegable jQuery
Los sistemas de menú desplegable son perfectos para la web de hoy. Sin embargo, el mayor problema son los visitantes que acceden a su sitio web sin el JavaScript habilitado. En este caso, ninguno de sus menús funcionaría en absoluto! La mejor solución es usar CSS para mostrar / ocultar cada uno de los bloques div del submenú y mostrarlos en el hover.
El único problema con esta solución es que Internet Explorer 6 no es compatible con estos selectores de desplazamiento de CSS. Sin embargo, IE7 + funciona muy bien; y, por supuesto, todos los navegadores funcionarán bien si JavaScript está habilitado en primer lugar. El código de este tutorial en CSS Plus es uno de los mejores recursos que he encontrado. Proporciona no solo una solución con jQuery sino también el CSS necesario para problemas de IE.
/ * Se agregará una clase de corriente a través de jQuery * / #nav li.current> a background: # f7f7f7; / * CSS fallback * / #nav li: hover> ul.child display: block; #nav li: hover> ul.grandchild display: block;
Fuente
Otra solución alternativa que puede probar es simplemente mostrar abiertamente cada uno de los menús en IE6. Puede utilizar los comentarios condicionales de Internet Explorer para aplicar hojas de estilo basadas en la versión del navegador. Por supuesto, esta no será la solución más bonita, pero simplemente funcionará.
Si no cree que Internet Explorer 6 sea una gran preocupación, entonces no se moleste con esta alternativa alternativa. El tutorial y el código posterior anterior deberían ser suficientes para que su menú de JavaScript se cargue incluso con el estricto CSS en todos los principales navegadores.
3. Estilos de Internet Explorer dirigidos
Estoy seguro de que todos sabemos acerca de los problemas de renderización que surgen de Internet Explorer de Microsoft. Puedo dar un poco de crédito por su último IE8 y las perspectivas futuras con IE9. Sin embargo, todavía hay una pequeña audiencia ejecutando IE6 / IE7 y realmente no puedes ignorarlos todavía..
(Fuente de la imagen: github)
Los comentarios condicionales que se mencionan en la sección anterior pueden ser útiles para reformatear áreas de la página. Por ejemplo, si tiene un menú desplegable con sub-navegación en IE6 que solo se mostrará con JavaScript, no tendrá suerte si prueba CSS como método alternativo. En su lugar, la mejor solución es mostrar cada sub-lista como un bloque de navegación..
Agregando el código anterior al encabezado de su documento, puede especificar el tipo de visualización para cada sub-navegación. La mejor parte de este respaldo es que puede sobrescribir el CSS y aún mostrar / ocultar dinámicamente los menús cuando JavaScript está habilitado. De lo contrario, solo se mostrará una lista abierta de enlaces. Podría usar un código similar al que he agregado a continuación.
#nav li posición: relativo; ancho: 150px; / * debe establecer un ancho finito para IE * / #nav li ul / * códigos de navegación secundaria * / display: block; posición: absoluta; ancho: auto; / * define tu propio ancho o establece en el elemento li * / #nav li ul li ancho: 100%;
4. Opacidad / transparencia de IE heredada
Uno de los muchos errores molestos con Internet Explorer es el trato con la opacidad. La configuración de transparencia alfa en CSS3 se puede modificar a través de la propiedad de opacidad. Sin embargo, en la forma de Microsoft, solo Internet Explorer 9 actualmente admite esta función..
La mejor solución para apuntar a IE6 + es a través de filtrar, Una configuración propietaria reconocida solo por IE. Echa un vistazo al siguiente ejemplo de código:
.mydiv opacidad: 0,55; / * CSS3 * / filter: alpha (opacidad = 55); / * IE6 + * /
Todo lo que necesita hacer es incluir la línea anterior dentro de cualquier elemento que requiera transparencia. Tenga en cuenta que de forma similar a la propiedad CSS3, todos los elementos secundarios también heredarán este cambio de opacidad. Si está buscando un método más nuevo que apunte específicamente a IE8, consulte el código a continuación. Se comporta de la misma manera que nuestra propiedad de filtro solo es reconocida por el analizador Microsoft IE8.
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha (opacidad = 55)"; / * IE8 * /
5. Creando botones CSS3 con imágenes de reserva
Los botones son un elemento web fantástico para todo tipo de interfaces. Pueden comportarse como entradas de formulario, elementos de navegación o incluso enlaces de página directos. Con CSS3 ahora es posible formatear botones con muchos estilos únicos como gradientes de fondo, sombras de cuadros, esquinas redondeadas, etc..
Sin embargo, no puede confiar en que todos sus visitantes podrán representar estas nuevas propiedades. Cuando se crea un diseño alternativo para botones (o incluso elementos de IU similares) hay dos opciones distintas. La primera es incluir una imagen de fondo diseñada exactamente como se vería el CSS. Esto se puede lograr fácilmente en Photoshop. Sin embargo, si usted no es un experto en el software, esto puede ser problemático..
La alternativa es recurrir a un color de fondo plano y estilos CSS más simples. Estoy usando algunos de los ejemplos de código de la gran publicación de CSS-Tricks sobre los gradientes de CSS3. Todos los principales navegadores, incluidos Safari, Firefox, Chrome e incluso Opera, admiten estas propiedades. El área en la que se encontrará con problemas es en el soporte de navegadores heredados: motores Mozilla más antiguos, IE6 / 7, posiblemente incluso Mobile Safari.
.gradient-bg background-color: # 1a82f7; / * usa un color sólido en el peor de los casos * / background-image: url ('https://assets.hongkiat.com/uploads/code-fallback-methods/fallback-gradient.png'); imagen de fondo: -webkit-gradiente (lineal, 0% 0%, 0% 100%, de (# 2F2727), a (# 1a82f7)); imagen de fondo: -webkit-linear-gradient (arriba, # 2F2727, # 1a82f7); imagen de fondo: -moz-lineal-gradiente (arriba, # 2F2727, # 1a82f7); imagen de fondo: -ms-linear-gradient (arriba, # 2F2727, # 1a82f7); imagen de fondo: -o-lineal-gradiente (arriba, # 2F2727, # 1a82f7); Fuente
El único problema pequeño con el uso exclusivo de imágenes como método alternativo es que no tendrá un cambio de estado activo cuando el usuario haga clic en un botón. Podría crear dos imágenes diferentes para estos estados regular vs. activo, aunque tomaría un poco de trabajo adicional. Este solo motivo puede llevarlo a utilizar un color de fondo sólido en lugar de imágenes de respaldo. Pruebe un par de soluciones diferentes para ver cuál se ve mejor en su diseño.
6. Comprobación de contenido móvil
Otra gran tendencia en 2012 es la popularidad de la navegación móvil en Internet. Los teléfonos inteligentes están en todas partes y los datos a través de 3G / Wi-Fi son cada vez más accesibles. Por lo tanto, muchos diseñadores buscarán proporcionar un diseño alternativo para los usuarios móviles..
Un par de navegadores web móviles populares representarán páginas similares a un entorno de escritorio. Mobile Safari y Opera son más conocidos por esto, incluso son compatibles con muchos scripts jQuery comunes. Pero estas páginas no siempre son aptas para dispositivos móviles y hay espacio para expandirse en UX.
Hay dos formas de detectar los navegadores móviles y mostrar un diseño alternativo o una hoja de estilo. El primero es a través de JavaScript, que funciona muy bien como herramienta de interfaz. El script que agregué a continuación es muy simple y solo es válido para usuarios de iPhone / iPod Touch. Detect Mobile Browsers es un fantástico sitio web que ofrece un script más detallado que puede ejecutar en su lugar.
// Redirige la función iPhone / iPod Touch isiPhone () return ((navigator.platform.indexOf ("iPhone")! = -1) || (navigator.platform.indexOf ("iPod")! = -1)); if (isiPhone ()) window.location = "m.yourdomain.com"; Ahora la otra alternativa es verificar a través de un lenguaje de fondo como PHP. Puedes verificar una variable conocida como HTTP_USER_AGENT. Docenas de sitios web aparecerán si buscas en Google estos términos. Sin embargo, sigo recomendando el enlace Detectar navegadores móviles que agregué en el párrafo anterior.
El sitio tiene scripts descargables gratuitos para analizar no solo en PHP, sino también en muchos otros lenguajes populares de back-end. Estos incluyen ASP.NET, ColdFusion, Rails, Perl, Python e incluso códigos basados en servidores como IIS y Apache..
7. Slicebox Slider con Graceful Fallback
Mi regalo favorito de CSS3 de 2011 probablemente tiene que ser Slicebox 3D Image Slider lanzado por Codrops. Utiliza hermosas transiciones de animación CSS en los navegadores que las admiten, actualmente en Google Chrome y lo último en Safari. Es extraño que incluso la versión más reciente de Firefox o IE9 aún no pueda usar estas transiciones.
La mejor parte de este código es que aún fallará para proporcionar efectos de transición básicos entre las imágenes. Por supuesto, gran parte de la animación se realiza a través de jQuery, pero la opción de recuperación de CSS estándar sigue siendo muy confiable, teniendo en cuenta la cantidad de navegadores que no admiten las animaciones CSS3..
Alternativamente, Codrops también lanzó recientemente otro panel de imágenes deslizantes que utiliza técnicas CSS3 aún más creativas. Este control deslizante de imagen se crea utilizando imágenes de fondo en CSS, por lo que incluso sin los efectos de transición se comporta muy bien.
8. Método JQuery Script CDN Failsafe
La biblioteca jQuery se ha vuelto casi esencial para el desarrollo de JavaScript en la web. Muchos proveedores de CDN alternativos han creado URL estáticas donde alojan todas las versiones de lanzamiento de jQuery. Google, Microsoft e incluso jQuery han creado un portal CDN para desarrolladores, entre otros pocos sitios web menos conocidos..
Posiblemente hay cientos de miles de desarrolladores que dependen de estos proveedores. ¿Qué pasaría si alguno de los enlaces se rompiera por alguna razón o los servidores se desconectaran? Sería una buena idea alojar una copia local e implementarla solo si la necesitara. Bueno, este gran fragmento de código de respaldo de CSS-Tricks te permite hacer precisamente eso.!
Fuente
9. Casillas de verificación únicas de HTML5
HTML5 ha abierto la puerta a algunos estilos frescos para construir sitios web. Parte de esta experiencia web mejorada es a través de formularios y elementos de entrada. Las casillas de verificación son solo un ejemplo que puede ser altamente personalizado para adaptarse a sus necesidades.
Me encontré con este maravilloso tutorial de CSS / jQuery publicado a principios de la primavera de 2011. Ofrece un método simple de crear interruptores al estilo de Apple para sus casillas de verificación que se degradan con gracia en los navegadores antiguos. El código utiliza imágenes de fondo para reemplazar los estilos de encendido / apagado entre las interacciones del usuario..
Los elementos originales de la casilla de verificación de entrada están ocultos de forma predeterminada y su valor se determina mediante llamadas de JavaScript. Esto significa que puede extraer dinámicamente el valor en cualquier punto a través de jQuery, pero también se pasará al formulario al golpear el “enviar” botón.
Suponiendo que JavaScript esté desactivado o no sea compatible con navegadores más antiguos, el script usará de forma predeterminada las entradas HTML normales. Esto también deshabilitará el CSS para los nuevos estilos de casilla de verificación, por lo que aparecerá como si nada hubiera cambiado. El guión se comporta más como un corredor estético con un respaldo limpio que cualquier otra cosa. Pero estos controles deslizantes tienen un aspecto fantástico, y las mismas técnicas podrían aplicarse a otros campos de entrada de formulario, como los menús de selección y los botones de radio.
10. Vídeo compatible con HTML5
Las nuevas especificaciones de HTML5 han sido muy progresivas en muchas áreas. Tanto los elementos de video como los de audio tienen soporte nativo mejorado para una gran cantidad de archivos multimedia. Sin embargo, resulta que entre los navegadores compatibles con HTML5 no todos están de acuerdo con los tipos de archivos.
Mozilla Firefox generalmente admite video .OGG que puede usar VLC como un convertidor. Google Chrome y Safari buscan archivos .MOV codificados en .MP4 o H.264. Debido a estas diferencias, normalmente tendrías que incluir Tres Diferentes formatos de video: los dos mencionados anteriormente junto con un respaldo .FLV.
Afortunadamente, algunos chicos realmente inteligentes armaron una biblioteca llamada VideoJS. Es una compilación de JavaScript extremadamente pequeña que permite una implementación única de Flash y video HTML5 en una etiqueta. Es de descarga gratuita y de código abierto, por lo que los desarrolladores también pueden contribuir. Tanto los reproductores de video Flash como HTML5 están personalizados para ser idénticos, por lo que todos los usuarios tendrán la misma experiencia. Echa un vistazo a su ejemplo de código de inserción de vídeo HTML5:
Fuente
Siguiendo una ruta similar, el proyecto html5media ofrece un método para consolidar todos los medios de transmisión en un solo tipo de archivo. Desafortunadamente, incluso VideoJS no es perfecto con cada navegador. Lo que el proyecto html5media ha intentado es evitar las incompatibilidades del navegador para admitir cualquier tipo de archivo de video en todas las plataformas. Y en realidad funciona bastante bien.!
Conclusión
Espero que esta guía de métodos útiles de recuperación sea útil para los desarrolladores web de todo el mundo. Puede ser difícil crear sitios web para adaptarse a una amplia gama de especificaciones de software. Esto es especialmente cierto cuando se trabaja con muchos idiomas diferentes, como CSS y JavaScript..
Pero las tendencias indican que nos acercamos a una era más favorable en el diseño web. Nunca antes se habían acordado más navegadores y estándares web, especialmente dentro de CSS3 y HTML5. Estas técnicas son solo algunas de las muchas que se deben tener en cuenta al crear páginas web compatibles con los estándares. Como desarrollador web, siempre querrá seguir las últimas tendencias de diseño y adaptarse para adaptarse mejor a su audiencia..
