Las nuevas tecnologías hacen que el desarrollo web sea más emocionante que nunca. HTML5 y CSS3 proporcionan una doble dosis de prácticas modernas que son absolutamente refrescantes y empoderadoras. Desafortunadamente, el uso de estas tecnologías puede complicar considerablemente su búsqueda de compatibilidad entre navegadores.
¿Cómo puede saber qué técnicas son seguras de usar ahora y cuáles debe proporcionar alternativas o evitar por completo? Únase a nosotros para echar un vistazo a algunos de nuestros recursos favoritos que le ayudarán rápida y fácilmente a tomar decisiones informadas sobre la implementación de HTML5 y CSS3 en el mundo real.
Simplemente irresistible
La compatibilidad entre navegadores fue bastante difícil hace unos años, antes de comenzar a sumergirnos en nuevas tecnologías sofisticadas como HTML5 y CSS3. Ahora, con estas herramientas avanzando a la vanguardia de nuestros métodos de desarrollo, puede ser un verdadero desastre.
Los beneficios de usar HTML5 y CSS3 son claros e innegables. Están tan llenos de golosinas y diversión que ninguno de cada diez desarrolladores puede resistir al menos sumergir un dedo para probar las aguas. Para promover la exageración, los autores como yo están ofreciendo constantemente nuevos tutoriales increíbles que le enseñan los entresijos de estas tecnologías, lo que aumenta su deseo de ponerlas en práctica lo antes posible.
¿Estamos corriendo por delante?
Mientras que la mayoría de nosotros nos apresuramos a utilizar las últimas y mejores tendencias de desarrollo web, algunas almas más racionales nos están pidiendo que reduzcamos la velocidad. Los juguetes nuevos están todos muy bien, pero gran parte de esto aún está en construcción y el resto no se ha implementado bien en todos los navegadores importantes.
Entonces, ¿quién tiene razón? ¿Cómo puede usted, como desarrollador práctico, del mundo real, saber si comprar el bombo y correr con lo nuevo o confiar en los escépticos y seguir con los métodos probados y verdaderos de años anteriores?
Detener el trabajo de adivinanzas
Lo mejor que puede hacer para decidir si puede comenzar personalmente a implementar nuevas tecnologías web es informarse sobre el soporte que puede esperar para cada nuevo elemento en los distintos navegadores que más le interesan a su público.
Esto suena como mucho trabajo ¿no? Hay innumerables publicaciones de blog, libros y sitios web dedicados a enseñarte estas cosas, suficientes para consumir toda una vida y más. La cantidad de material es tan abrumadora que podría evitar aprender simplemente por intimidación.
Afortunadamente, hay algunas formas muy sencillas y sencillas de asegurarte de que lo que estás haciendo funcionará bien en varios navegadores. No tendrá que revisar las publicaciones de un blog de una milla de largo o leer una pila de libros cada vez que quiera tirar en una sombra paralela, solo necesitará un vistazo rápido a algunos recursos selectos para comenzar.
Tablas de compatibilidad del navegador: El mejor amigo de un desarrollador
Lo primero que recomiendo que hagas en tu búsqueda para descubrir qué nuevas tecnologías puedes implementar hoy es marcar una o dos tablas de compatibilidad de navegador sólidas.
Estos recursos son invaluables y pueden ahorrarle interminables horas de investigación. Sirven como una referencia rápida que le ayuda de inmediato a identificar qué navegadores admiten y no admiten las técnicas que está intentando implementar. Algunas de las mejores opciones incluso ofrecen ayuda para que los navegadores más antiguos funcionen bien.
¿Cuándo puedo usar?
Caniuse.com ciertamente no es la opción más bonita disponible para las tablas de compatibilidad de navegadores, pero es una de las más útiles y completas.
La organización aquí es muy simple y fácil de usar: simplemente haga clic en un elemento de cualquiera de las cinco categorías (CSS, HTML5, SVG, JS API y otras) y verá un gráfico que le mostrará la compatibilidad con varios navegadores. Además, la búsqueda proporciona resultados instantáneos a medida que escribe, las respuestas a todas las preguntas de su navegador nunca están más allá de unas pocas pulsaciones.
Por ejemplo, digamos que leyó mi artículo reciente en: antes y: después y quisiera volver a revisar mis declaraciones sobre la compatibilidad del navegador para el: después del pseudo-elemento (¡siempre revise sus datos!), Todo lo que tiene que hacer es escribir? ¿después? en la barra de búsqueda y la tabla de abajo aparecerá.
Hay una gran cantidad de información aquí para que la utilices. La tabla nos informa que tenemos un gran soporte en todos los ámbitos para los navegadores actuales (incluso IE), pero encontramos algunos problemas con dos versiones anteriores con IE7 y anteriores.
Además de la tabla de compatibilidad, encontrará otros dos elementos valiosos: una función de comparación de navegador y una lista de recursos útiles.
El último de estos a menudo incluye algunos enlaces realmente grandes. Por ejemplo, si está buscando una nueva funcionalidad CSS3 como gradientes, puede obtener un enlace para un generador que hará el trabajo por usted. En el caso anterior, recibimos un enlace para una guía detallada que explica el uso del contenido generado por CSS utilizando pseudo elementos.
La tabla de compatibilidad del navegador le permite elegir dos navegadores y ver una descripción general del soporte para los elementos en cualquiera de las cinco categorías mencionadas anteriormente.
FindMeByIP
Si está buscando renunciar a todas las características del sitio anterior en favor de algunos cuadros extensos de compatibilidad del navegador que pueden marcar y consultar en un instante, visite la página de Soporte de HTML5 y CSS3 en FindMeByIP.
Como puede ver, los gráficos aquí son bastante atractivos y muy fáciles de leer. Estos son perfectos para cuando solo necesitas revisar dos veces rápidamente u obtener una visión general del soporte del navegador en todos los ámbitos.
¿Deberías usarlo?
Las gráficas de compatibilidad del navegador son asombrosas para informarle si un navegador determinado es compatible con lo que está intentando implementar, pero solo le permiten tomar decisiones, aún tiene que interpretar la información y decidir si es seguro continuar.
Si eres un desarrollador nuevo, esto puede ser intimidante. Para ayudarte aún más, asegúrate de revisar HTML5 Please. Este proyecto de origen comunitario a todo volumen le dice si debe o no usar una técnica dada y hace recomendaciones sobre cómo proceder. Nunca debe seguir algo a ciegas, pero cuando está en la cerca, esto puede ayudarlo a hacer la llamada.
Al igual que con Cuando puedo usar, la barra de búsqueda aquí proporciona resultados instantáneos mientras escribe. Digamos que quiere saber si las transiciones de CSS son seguras de implementar, simplemente ingrese ¿transiciones? Y los resultados se filtrarán a lo siguiente:
Inmediatamente recibimos una recomendación de uso, que se muestra en la esquina superior derecha del resultado:
? Usar con el respaldo? Es el consejo que nos dan para las transiciones de CSS. Esto se combina con información breve y directa que nos dice que las transiciones son seguras si no son necesarias para una experiencia útil y que se debe hacer una copia de seguridad de las transiciones críticas con una alternativa para otros navegadores. También se proporcionan los prefijos de navegador necesarios para la implementación. Para muchos elementos, se proporcionan los rellenos automáticos recomendados para ayudar a que su implementación sea lo más compatible posible con los navegadores.
Modernizr tiene tu espalda
El recurso final con el que necesita familiarizarse en su búsqueda de CSS3 y HTML5 compatibles con todos los navegadores es Modernizr. No hay duda de que lo has escuchado antes, pero es hora de descargarlo y comprobarlo.
La razón por la que Modernizr es tan grande es que puede detectar automáticamente si un navegador es compatible con una característica determinada y luego ofrecer algo de magia de JavaScript en respuesta. Esto le permite tener en cuenta una gran variedad de circunstancias y proporcionar correcciones de JavaScript y polyfills para navegadores antiguos con muy poco esfuerzo.
Modernizr probará la compatibilidad con más de 40 funciones de próxima generación, proporcionará información sobre la marcha para decirle qué será y no será compatible y proporciona las mejores soluciones para ayudarle a responder a cualquier agujero en el soporte.
Conclusión
Los recursos mencionados anteriormente están dirigidos a ayudarlo a tomar decisiones informadas sobre si implementar o no una determinada técnica HTML5 o CSS3.
Las tablas de compatibilidad del navegador proporcionan una referencia rápida sobre cómo puede esperar que cada navegador responda a una técnica dada, HTML5 Please le dará recomendaciones sólidas y honestas para saber si proceder o no, y Modernizr lo ayudará a identificar y llenar las brechas de funcionalidad en un diseño especifico
Estos recursos no lo sacan del apuro para profundizar en una comprensión más profunda de cómo implementar adecuadamente estas funciones, pero sí sirven como una increíble guía de inicio para saber cómo y cuándo proceder.
Deja un comentario a continuación y cuéntanos tus recursos favoritos en esta área. ¿Utiliza alguno de los sitios mencionados anteriormente? ¿Qué otras herramientas son invaluables para su flujo de trabajo?