Un conjunto de propiedades CSS3 para varios navegadores. Crossbrowser CSS3, o cómo lidiar con el crossbrowser Internet Explorer CSS3

Nota del autor: las personas utilizan diferentes navegadores para navegar por la web. Por supuesto, están los más populares, como Chrome. También los hay menos utilizados (Safari, Internet Explorer), pero si está creando un sitio para personas, debe conocer la compatibilidad entre navegadores: cómo crearlo y de qué se trata. Veamos cómo lograr la misma visualización del sitio en todos los navegadores principales.

El objetivo principal de la compatibilidad entre navegadores es evitar cambios significativos en el diseño del sitio en diferentes navegadores web. Si la diferencia está solo en los detalles y esto no afecta la percepción general del sitio, entonces podemos decir que ha enfrentado el problema de la compatibilidad entre navegadores. Pero aún así, ¿qué consejo real se puede dar al respecto?

Cómo lograr compatibilidad entre navegadores

Por el momento, existen 5 navegadores principales más populares para los cuales es necesario optimizar el sitio. Y si suele ser fácil hacerse amigo de las versiones más recientes de los navegadores web, cuanto más antigua sea la versión, más problemas pueden surgir.

Por ejemplo, IE6 es uno de los navegadores más problemáticos en términos de compatibilidad con nuevas etiquetas html y propiedades css. Y, sin embargo, hoy en día algunos todavía exigen la visualización normal del sitio en este navegador. Para mí esto ya es demasiado. La compatibilidad con IE8 es suficiente.

Sin embargo, ésta es una pequeña digresión. Ahora veamos los pasos reales que ayudarán a que el sitio sea compatible con todos los navegadores.

Aproveche al máximo las soluciones ya preparadas. Si desea implementar nuevas funciones y enseñar a los navegadores antiguos a comprenderlas, necesita bibliotecas de JavaScript. Sin ellos, en este caso, simplemente no hay ninguna parte. Debes instalar jQuery.

Existe una biblioteca de JavaScript maravillosa llamada Modernizr. Sus capacidades le permiten implementar una alternativa para aquellas propiedades que no son compatibles. Eso es lo que te recomiendo que uses.

Entonces, primero debes ir al sitio web oficial. https://modernizr.com/download. Aquí debe marcar las tecnologías que planea utilizar en su sitio. Debo decir que la lista es bastante larga y sin un conocimiento medio de los estándares web modernos y del inglés, difícilmente podrás entenderla. En cualquier caso, también existen propiedades intuitivas. Incluso si marca todo, el código resultante no será demasiado engorroso.

Arroz. 1. La elección de las tecnologías que comprobará la biblioteca.

Revisando la biblioteca

Después de descargar la versión personalizada de la biblioteca, debe verificar su funcionamiento. Deberá conectarse mediante la etiqueta script, especificando la ruta al archivo. Si todo es correcto, entonces la etiqueta html debería tener muchas clases de estilo nuevas. Estas clases llevan el nombre de las tecnologías que marcaste.

>p?En consecuencia, si dicha clase se especifica en la etiqueta html, entonces la tecnología funciona en este navegador. Si algo no es compatible, se registrará la clase "nombre sin tecnología". Te daré un ejemplo ahora mismo:

Por ejemplo, debe marcar la propiedad box-shadow. Como referencia, establece la sombra del elemento. Si el navegador lo admite, esta clase de estilo aparecerá en la etiqueta html. Si los navegadores web no reconocen la propiedad, aparecerá la clase "no-boxshadow".

Arroz. 2. En la etiqueta html verás muchas clases. En este caso vemos que el navegador soporta casi todas las tecnologías.

Ahora la gestión de la compatibilidad entre navegadores está completamente en tus manos. Es suficiente establecer algunas propiedades alternativas a la clase no-boxshadow, y en todos los navegadores que no admitan la propiedad box-shadow, se aplicarán estas reglas. Es muy cómodo.

En habrahabr encontré otro ejemplo que me gustaría darles aquí. Hubo un ejemplo de cómo se puede utilizar la biblioteca para implementar alternativas en navegadores más antiguos.

Selector de multiplebgs (imagen de fondo: url("image.png") centro 40px sin repetición, url("image2.png"); ) Selector de .no-multiplebgs (imagen de fondo: url("image.png") centro 40px gris claro sin repetición; )

Selector de archivos múltiples (imagen de fondo: url ("image.png") centro 40 px sin repetición, url ("image2.png");) Sin selector de archivos múltiples (imagen de fondo: url("image.png") centro 40px sin repetición gris claro;)

Explicación de ejemplo. Estamos interesados ​​en la tecnología de múltiples orígenes, que ha sido compatible con CSS3 durante mucho tiempo. Para ello, basta con enumerar las direcciones de las imágenes y sus parámetros separados por comas. Naturalmente, los navegadores más antiguos no admiten esto, por lo que escribimos nuestros propios estilos usando la clase .no-multiplebgs. Especifica que los estilos se aplican si el navegador no admite múltiples fondos.

Por lo tanto, puede establecer otros estilos para este selector y así obtener una hermosa visualización del sitio en cualquier navegador web. Por supuesto, para poder experimentar plenamente las posibilidades de Modernizr, usted mismo debe tener buenos conocimientos de programación web y diseño de sitios web. Una persona experimentada podrá determinar qué propiedades pueden reemplazar aquellas que están muy mal sustentadas.

Por supuesto, la funcionalidad de la biblioteca es mucho más amplia. Puede probar el soporte para varias tecnologías y encadenar eventos hasta el resultado al final. Ejemplo.

La compatibilidad entre navegadores suele entenderse como la capacidad de un sitio de verse igual (o igualmente bueno) en todos los navegadores.

Para que el sitio se vea lo más similar posible en todos los navegadores (moderno + compatible con algunos desactualizados), es necesario conocer los diversos trucos y características de los navegadores. Ahora los estudiaremos.

Bloquear . Navegadores modernos

Actualmente son populares los siguientes navegadores: Internet Explorer (abreviado como IE, un navegador de Microsoft integrado en Windows), Opera (navegador noruego), Mozilla (también conocido como Firefox), Google Chrome (navegador de Google), Safari (navegador de Apple) . Navegadores en dispositivos móviles: Android, IOS.

Bloquear . Motores de navegador

Además de los navegadores, existe algo llamado motor navegador. El motor es el núcleo del navegador que convierte HTML y CSS en una imagen visible en la pantalla. Hay muchos menos motores que navegadores y, como resultado, muchos navegadores tienen los mismos motores y, por tanto, las mismas características y errores (problemas).

Tipos de motores: Gecko (Mozilla/Firefox). Webkit (Safari, Google Chrome, Opera 14+, Android, IOS). Presto (Opera hasta la versión 14). Tridente (Internet Explorer).

Tenga en cuenta que Opera, a partir de la versión 14, cambió al motor Webkit.

Actualmente, Webkit se ha dividido en dos motores Blink de Google Chrome y Opera 14+ y un motor de Safari. Estos dos motores todavía admiten el prefijo -webkit, sin embargo, su separación ya se puede ver en algunas propiedades CSS, como los guiones.

El navegador Internet Explorer ya no existe oficialmente, su última versión es la 11. Sin embargo, de hecho, este navegador ha cambiado de nombre (pero no de motor) y ahora se llama Edge.

Bloquear . Prefijos de proveedores

La situación actual entre los navegadores es que antes de que aparezca una propiedad CSS en la especificación, los navegadores pueden implementar una versión de prueba de esa propiedad con un prefijo especial llamado prefijo de proveedor(de la palabra proveedores - desarrolladores, prefijo de desarrollador).

Cómo se ve, veamos el ejemplo de la propiedad de tamaño de caja (cambiando el modelo de caja).

P (tamaño de caja: cuadro de borde;)

Esta propiedad solo se admite desde Firefox 29, pero desde Firefox 2 está disponible con el prefijo -moz:

P ( -moz-box-sizing: borde-cuadro; )

Otros navegadores tienen prefijos similares: -moz - Mozilla/Firefox (motor Gecko), -webkit - navegadores con motor Webkit (Google Chrome, Safari, Opera 14+, Android, IOS), -o - Opera hasta la versión 13 inclusive (motor Presto) ) ), -ms - IE desde la versión 8+.

Por lo tanto, la versión para varios navegadores de la propiedad box-sizing, que utiliza prefijos de proveedor, se verá así (no es necesario escribirla con el prefijo -ms, IE inmediatamente cambió para admitir esta propiedad):

P ( -webkit-box-sizing: borde-box; -moz-box-sizing: borde-box; box-sizing: borde-box; )

En CSS, muchas propiedades tienen una implementación similar, con y sin prefijo.

Tenga en cuenta también que Opera cambió a Webkit desde la versión 14 y ahora usará el prefijo -webkit, mientras que el prefijo -o permanecerá solo para versiones anteriores (hasta 14).

Existe la siguiente regla: las propiedades con prefijo se escriben antes que las propiedades sin prefijo. Esto se hace para que la propiedad principal sobrescriba las propiedades con prefijos, ya que el navegador puede admitir una propiedad con o sin prefijo. Y una propiedad con prefijo puede funcionar con cualquier problema.

Actualmente, algunos navegadores han decidido abandonar los prefijos debido a sus inconvenientes. Y ahora en lugar de ellos utilizan los llamados banderas. Las propiedades ahora están integradas en el navegador, pero están deshabilitadas de forma predeterminada; sin embargo, se pueden habilitar en la configuración del navegador marcando la casilla correspondiente en la configuración. Los navegadores Google Chrome y Opera actualmente admiten este modelo para las nuevas propiedades.

Bloquear . Dónde ver qué prefijos escribir

Recomiendo el servicio especial caniuse.com, donde puede ver qué propiedades ya se pueden utilizar y si es necesario escribir prefijos para ellas o no.

Bloquear . Estadísticas del navegador

Para saber qué navegador debería ser compatible actualmente y cuál debería abandonarse, es necesario realizar un seguimiento de las estadísticas de los navegadores en la región del sitio. Esto se puede hacer utilizando el siguiente servicio: gs.statcounter.com - todos los navegadores con versiones por país (inglés).

Bloquear . Cómo probar un sitio en diferentes navegadores

Después de crear el sitio, se debe probar en todos los navegadores populares. Sin embargo, hacer esto no es tan fácil como parece: no sólo los navegadores difieren de una versión a otra, sino que también existen diferencias entre una versión del navegador en Windows y, por ejemplo, en Linux. Está claro que es simplemente imposible tener tantos navegadores.

Al rescate acuden servicios especiales que toman capturas de pantalla del sitio en diferentes versiones del sitio.

Bloquear . Normalización de estilo

Además de los reinicios, existe el llamado normalización- aquí es cuando los valores de las propiedades (por ejemplo, margen y relleno) no se restablecen a cero, pero se les indican ciertos valores convenientes (de modo que en todos los navegadores las sangrías predeterminadas son las igual y conveniente).

Recuerde restablecer los estilos antes de conectarlos, ¡no después!

El restablecimiento de CSS debe colocarse en un archivo separado (generalmente llamado reset.css). En este caso, puedes utilizarlo en diferentes proyectos sin hacer ningún esfuerzo por separarlo de otras reglas CSS.

Siéntase libre de modificar el propio reset.css. Personalízalo para ti, haz que funcione para ti. Cambie, reorganice, elimine y agregue según sea necesario en su caso particular.

Tiene sentido agregar estilos predeterminados para h1-h6 (como el tamaño de fuente), para td (alinear el texto: centro), etc.

Qué vas a hacer después:

Empiece a resolver problemas en el siguiente enlace: tareas de la lección.

Cuando todo esté decidido, comience a estudiar un nuevo tema.

¡Hola queridos lectores!

Todos queremos que nuestros estilos se muestren correctamente en diferentes navegadores. Pero digan lo que digan, habrá que añadir estilos para que funcionen en otros navegadores. Este proceso se llama llevar el diseño del sitio a una vista en varios navegadores. La compatibilidad entre navegadores se produce cuando los estilos CSS se muestran correctamente en diferentes navegadores y sus diferentes versiones.

Quiero dar algunos consejos para el proceso de traer tu CSS. a la compatibilidad entre navegadores tomó menos tiempo.

Centrarse en los navegadores más populares. Las calificaciones del navegador se pueden encontrar en la web. También vale la pena considerar la región de audiencia del sitio. Por ejemplo, si se trata de un sitio para una audiencia de África, entonces aquí no prevalece Chrome, sino otro navegador. Además, durante el proceso de diseño, vale la pena observar cómo se ve el sitio en aquellos navegadores que ocupan el segundo y tercer lugar.

2. Puedes buscar los más populares estilos css, que no se ven bien en otros navegadores. Encuentra trucos de CSS para ellos.

3. Existen herramientas especiales en la red para generar estilos para varios navegadores. Quiero destacar los 2 más interesantes en mi opinión.

Herramientas para CSS entre navegadores.

• Se han descrito muchos estilos;
• Hay un ejemplo de uso con el resultado.

• Al principio es difícil navegar por el sitio;
• Es imposible generar un estilo con sus propios parámetros (se da un ejemplo de uso).

Generador CSS3

• Cómodo e intuitivo de operar;
• Puede generar estilos para sus parámetros;
• Puedes ver el resultado del estilo generado.

• Pocos estilos

Cuando se utiliza CSS no sólo para decorar texto, sino también para trabajar con capas en un diseño sin tablas, hay que recordar que los navegadores modernos no tratan parámetros tan importantes como el margen (el margen exterior del elemento), el relleno (el margen interior del elemento). el elemento, así como los parámetros de posición: la posición del elemento de manera diferente. , flotante - ajuste de texto y muchos otros.

Debido a estas diferencias en la interpretación de los valores de los parámetros, a menudo sucede que los sitios y las interfaces web que se ven bien en los navegadores Mozilla Firefox, Opera y Safari de repente empiezan a separarse en Internet Explorer.

En el centro de estas diferencias en cómo los navegadores interpretan CSS está la conformidad incompleta de los navegadores Internet Explorer anteriores a la versión 7 con los estándares CSS adoptados por el W3C. Por lo tanto, un diseño sin tablas exitoso para versiones anteriores de IE a la 7 requiere el uso de una serie de construcciones especiales llamadas CSS hacks. También es importante tener en cuenta que otros navegadores a veces necesitan utilizar un truco de CSS.

Considere escribir CSS que solo sea interpretado por ciertos tipos de navegadores:

Tabla de contenidos del documento

CSS para IE 5, 5.5, 6, 7 Comentarios condicionales Los navegadores de IE han admitido durante mucho tiempo los llamados comentarios condicionales, que le permiten hacer que el contenido sea visible sólo para IE. Los comentarios condicionales son simplemente comentarios HTML especialmente formados que sólo entienden determinadas versiones de Internet Explorer para Windows. Por ejemplo, puede utilizar comentarios condicionales para corregir un error de transparencia de PNG en IE.

Para usarlos necesitas:

Primero, cree una hoja de estilo común para todos los navegadores, sin ningún truco, para que luego podamos seguir trabajando en la corrección de errores al mostrar la página en IE.

La hoja de estilo corregida se guarda por separado y se convierte en la hoja de estilo para todas las versiones de IE (por ejemplo, all-ie.css).

Guarde las hojas de estilo con correcciones de errores por separado para cada versión de IE (por ejemplo, ie-5.0.css).

El siguiente paso es conectar estas hojas de estilo de forma secuencial a través del código HTML mediante comentarios condicionales.

Sintaxis de comentarios condicionales El siguiente comentario condicional será entendido por IE5, IE5.5 e IE6, así como por IE7 e IE8:

Aplicación de CSS para IE5 Si desea aplicar un comentario condicional solo para IE5, solo necesita especificar la versión 5.0 en la condición IE 5.0 if:

Aplicar CSS para IE5.5 Si se aplica en relación con IE5.5, se vería así:

Aplicar CSS para IE6 Lo mismo para IE6:

Aplicación de CSS para IE5 e IE5.5 simultáneamente o para múltiples versiones Si desea corregir un error del modelo de caja en los navegadores IE5 e IE5.5 usando comentarios condicionales, puede usar la parte del índice de versiones o los operadores de comparación.

El primer ejemplo vinculará la hoja de estilo a cualquier versión de Internet Explorer cuyo primer dígito sea 5:

Como alternativa, puede especificar que las hojas de estilo se incluyan en cualquier versión del navegador inferior a 6:

En lugar de lt (menor entonces - menos), también puede usar lte (menor entonces o igual a - menor o igual), gt (mayor entonces - más), gte (mayor entonces o e igual a - mayor o igual que) lo principal con toda esta variedad de posibilidades es elegir correctamente el orden de especificación de los comentarios condicionales para no caer en una situación en la que, para algunos navegadores, los grupos de comentarios condicionales se cruzan, dando una resultado inesperado.

Cómo utilizar Si no desea que las hojas de estilo generales dominen las tablas creadas específicamente para IE, primero debe incluir las tablas generales y solo después las tablas para IE. Por ejemplo, se ve así:

Otros beneficios de este método Al utilizar comentarios condicionales, también obtiene una manera de determinar de manera más confiable la versión del navegador. Los navegadores que pretenden ser Internet Explorer pero que en realidad no lo son no utilizarán hojas de estilo específicas de IE. Con este método, puede compilar estadísticas precisas sobre qué versión de IE están usando los visitantes, sin errores causados ​​por programas y navegadores que se hacen pasar por IE. Validez Quizás una de las mejores partes de esta técnica es que sus hojas de estilo y sus (X) cuidadosamente formateados Los documentos HTML mantendrán total conformidad con la especificación Depuración de comentarios condicionales Hay una advertencia que vale la pena mencionar.

Si está utilizando varias versiones de Internet Explorer en la misma máquina, todas estas versiones pretenderán ser la versión más reciente instalada. Esto significa que si tiene IE6 instalado pero está viendo la página usando IE5, se ejecutará este comentario condicional:

Y este comentario condicional no se ejecutará:

Para un seguimiento más preciso de las diferencias en cómo las diferentes versiones de IE manejan CSS, IETester es un programa gratuito bien establecido que admite todas las versiones de IE, desde la 5 a la 8. Y para cambiar rápidamente la configuración de CSS en IE8 presionando F12, un Está disponible una herramienta para desarrolladores, que recuerda a FireBug en Mozilla Firefox.

De manera similar a declarar hojas de estilo, este método se puede utilizar para ocultar el código HTML de una versión específica o de todas las versiones de IE. Por ejemplo, el "código HTML" se mostrará en todos los navegadores excepto IE6 si se coloca en un comentario condicional como este:

Código HTML

Etiqueta Tenga en cuenta que los comentarios condicionales en IE se pueden utilizar en cualquier parte de la página, no sólo para declarar hojas de estilo para la versión correspondiente del navegador. Con los comentarios condicionales, puede mostrar información adicional a los usuarios de IE que no es visible para los usuarios de otros navegadores.

De manera similar a los comentarios condicionales en IE 5-IE 8, se admite la etiqueta .... Esta etiqueta le permite ocultar información a los usuarios de IE, de ahí el código:

Esto no es Internet Explorer

Los usuarios de IE se mostrarán como: Este es el navegador Internet Explorer y los usuarios de otros navegadores se mostrarán como Este no es el navegador Internet Explorer.

La etiqueta no es válida.

Hacks de CSS de IE Para evitar saturar su código HTML con múltiples declaraciones de hojas de estilo, o si desea conservar un único archivo CSS, puede escribir estilos separados que solo funcionarán en IE. Además, existe una opción tanto para IE6 como para IE7.

Para IE todas las versiones. Si antecede una propiedad con dos barras (//), solo será leída por los navegadores IE de todas las versiones. Otros navegadores ignorarán esta propiedad.

Es posible que IE6 ponga un signo menos (-) o un guión bajo (_) delante de una propiedad sin que IE7 reaccione. También puedes usar la construcción:

*html.estilo(...)

Por ejemplo:

Estilo (fondo: rojo; /* para navegadores normales */ //fondo: verde; /* para todos los IE */ -fondo: azul; /* para IE6 */ ) * html .style (fondo: azul; /* otro manera para IE6 */)

En este caso, el fondo será rojo en los navegadores Opera y Firefox, verde en IE7 y azul en Internet Explorer 6.

El ejemplo cambia el color de fondo para diferentes navegadores. En la práctica, este método se utiliza para lograr la identidad de visualización y la compatibilidad entre navegadores. La mayoría de las veces, hay que recurrir a él al posicionar y establecer diferentes valores para propiedades como izquierda, arriba, relleno, margen, ancho y otras relacionadas con tamaños, porcentajes y píxeles.

Para IE7, el truco de CSS es:

*: primer hijo+html .style (...)

*+html .estilo (...)

CSS para Firefox También existen trucos especiales de CSS que te permiten mostrar estilos sólo en el navegador Firefox.

html: root .style (...) /* este también funciona para Safari */

Estilo, x: -moz-cualquier enlace (...)

Para cambiar rápidamente la configuración de CSS en Firefox presionando F12, está disponible la herramienta de desarrollo Firebug (requiere preinstalación): es la mejor entre sus contrapartes.

CSS para Opera Los trucos de CSS para el navegador Opera están representados por los siguientes ejemplos:

La compatibilidad entre navegadores es la capacidad de un sitio para mostrarse correctamente en diferentes navegadores. El recurso debe funcionar igual en todas las versiones del navegador.

Esto es especialmente importante en la era del diseño web responsivo, cuando pasa a primer plano la capacidad del front-end para adaptarse a una amplia gama de dispositivos diferentes y aun así proporcionar una experiencia de visualización óptima.

Anteriormente, un diseñador creaba un diseño en Photoshop, que luego se transfería a HTML y CSS. Hoy en día, los cambios tecnológicos están obligando a repensar este concepto. Ya no podemos predecir qué navegador, resolución o dispositivo se utilizará para ver el sitio. Atrás quedaron los días en que la mayoría de las computadoras usaban una resolución fija de 1024 por 768 píxeles y era posible desarrollar sitios web con dimensiones estáticas.

Los navegadores modernos son totalmente compatibles con HTML5 y CSS3. Pero el mismo código HTML/CSS/JavaScript se interpreta de manera diferente en los navegadores más antiguos, lo que conduce a una “incompatibilidad entre navegadores” del sitio. Esto es especialmente cierto en el caso de versiones anteriores de Internet Explorer.

En este artículo, veremos las estadísticas actuales sobre visitas a páginas web y proporcionaremos una lista de herramientas que ayudarán a resolver diversos problemas de compatibilidad.

1. Situación actual

Las estadísticas mundiales de 2015 muestran que las 14 resoluciones de pantalla más utilizadas van desde 1920 por 1080 hasta 320 por 480 píxeles.

Aunque Windows 7 (31,20%) todavía tiene una gran cuota de mercado, las plataformas móviles están empezando a sustituir a las plataformas de escritorio tradicionales.

Si observamos las estadísticas de 2015 sobre los navegadores utilizados, vemos que el primer lugar pertenece a Chrome (todas las versiones - 44,87%), el segundo lugar es Firefox (todas las versiones - 10,37%) y el tercero Internet Explorer 11 (6,84%). .

El ritmo acelerado de lanzamiento de nuevas versiones de Google Chrome y Firefox permite desarrollar proyectos para estas plataformas de manera más eficiente. Una imagen ligeramente diferente surge para el "chico malo" Internet Explorer, porque todavía se pueden encontrar versiones antiguas en la Web. Y esto genera problemas con la compatibilidad del sitio entre navegadores.

Microsoft finalizó el soporte para IE6 el 8 de abril de 2014. Y a partir de 2016, solo se admitirá y actualizará la última versión de Internet Explorer. Esto significa efectivamente que el soporte para IE7 e IE8 se eliminó por completo a principios de 2016, independientemente del sistema operativo. IE9 solo será compatible con Windows Vista, IE10 solo en Windows Server 2012, IE11 en Windows 7 y Windows 8.1:

Como consecuencia, se debe detener el desarrollo para IE6 y también para IE7. Para justificar esta estrategia, aquí hay algunos ejemplos de empresas conocidas: Google dejó de soportar IE8 en noviembre de 2012 y IE9 en octubre de 2013.

Github ya no es compatible con IE 7 y 8. Aparte de eso, parte de la funcionalidad de Twitter no funciona en IE8. Y finalmente, el popular marco no admitirá IE8 a partir de la versión 4.

Sin embargo, las estadísticas de uso pueden variar según la región: el 6,11% de los usuarios en China todavía navegaban a través de IE8 en 2015. Si tenemos en cuenta que en China había alrededor de 724.400.000 usuarios de Internet, podemos entender que este año, aproximadamente 44.200.000 chinos siguen utilizando IE8.

Por lo tanto, los mercados regionales, los clientes específicos y los requisitos de la industria pueden diferir significativamente. Esto es especialmente cierto para las instituciones corporativas y gubernamentales.

2. Analiza tu audiencia

El principio básico aquí es el siguiente: cuanto mayor sea la compatibilidad entre navegadores requerida, más tiempo llevará el desarrollo, lo que conduce a un aumento en el costo del proyecto. Para tomar una decisión informada y económicamente sensata, es necesario plantearse las siguientes preguntas:

• ¿Cuál es su público objetivo?
• ¿A qué región geográfica debería dirigirme?
• ¿Qué navegadores y dispositivos utilizan sus visitantes?
• ¿Existen factores técnicos dentro de la empresa o industria que lo obliguen a admitir versiones específicas de navegadores más antiguos?
• Desde una perspectiva del comercio electrónico, ¿cuáles son las tasas de conversión y de retorno de la inversión (ROI) para diferentes grupos de usuarios en todas las versiones del navegador?

Respondiendo a estas preguntas con la ayuda de datos estadísticos, por ejemplo de Google Analytics, podrá hacerse una idea objetiva.

3. Problemas en los navegadores heredados y diferentes enfoques de desarrollo

El diseño web responsivo depende en gran medida de consultas de medios que cambian CSS para diferentes resoluciones de pantalla. Además, los sitios web modernos se caracterizan por el uso de elementos semánticos HTML5 (por ejemplo, , , , ) para agrupar componentes de diseño. Los selectores CSS3 se utilizan para seleccionar elementos específicos y darles estilo adicional (p. ej., :checked, :nth-child(n), :not(selector), :last-child)). Finalmente, la tipografía responsiva a menudo se especifica utilizando unidades REM (raíz em).

Esto nos lleva a los siguientes desafíos técnicos al implementar CSS en varios navegadores:

• consultas de medios CSS3
• Elementos semánticos HTML5: no compatibles con IE6, 7 y 8;
• Selectores CSS3: no soportados en IE6. Sólo parcialmente compatible con IE7 y 8;
• Unidades REM: No soportadas en IE6, 7 y 8. Sólo parcialmente compatible con IE9 y 10;
• Límite de reglas CSS: IE9 y versiones anteriores solo admiten selectores CSS 4095. Las reglas posteriores al selector 4095 no se aplican.

Los errores anteriores tendrán el mayor impacto en la estrategia utilizada al implementar el diseño responsivo.

Hay dos estrategias principales de desarrollo: simplificación gradual y mejora progresiva.

Mejora Progresiva - Basado en el principio de iniciar el desarrollo con un denominador común, con los requisitos técnicos mínimos y el nivel de experiencia de usuario que ofrece el sitio. Los visitantes que accedan al sitio con los últimos navegadores y dispositivos recibirán una versión progresivamente mejorada del sitio con las últimas funciones.

Por otro lado, a los usuarios de navegadores antiguos y conexiones a Internet lentas se les ofrecerá una versión del sitio gráficamente truncada, pero aún funcional.

Un enfoque similar al implementar la compatibilidad entre navegadores implica comenzar el desarrollo con una versión simple, a la que luego se agregan elementos más complejos. Los navegadores más antiguos podrán mostrar el sitio con un nivel básico de experiencia de usuario. Y nuevas funciones HTML/CSS/JavaScript estarán disponibles en navegadores que realmente puedan usarlas.

Por el contrario, la simplificación gradual proporciona un nivel de UX completamente funcional en los navegadores modernos. Y luego reduce gradualmente su complejidad para los navegadores más antiguos a expensas de los gráficos, pero sin tocar la funcionalidad. La idea es comenzar el desarrollo con los últimos estándares web y luego intentar minimizar los problemas asociados con los navegadores más antiguos.

El enfoque que elija depende de las preferencias personales y las condiciones del proyecto:

• La mejora progresiva proporciona más estabilidad, ya que puede agregar gradualmente nuevas funciones para los navegadores modernos. Pero requiere una planificación más cuidadosa;
• Algunos desarrolladores argumentan que no tiene sentido admitir navegadores antiguos y que se deben utilizar las últimas tecnologías. La compatibilidad con navegadores modernos brinda una experiencia de usuario mucho mejor;
• Existe la opinión de que la mejora progresiva está muerta porque muchas aplicaciones JavaScript no funcionan correctamente con este enfoque;
• La accesibilidad web para las instituciones públicas puede estar determinada por los requisitos legales de entidades territoriales específicas, y esto puede requerir un enfoque especial.

Con la llegada de herramientas de detección de funciones como Modernizr, personalmente me inclino por utilizar la simplificación gradual y las listas negras del navegador al desarrollar sitios compatibles.

4. Probando, probando, probando…

Para detectar posibles problemas de JavaScript entre navegadores lo antes posible, debe probar su sitio en varios navegadores y resoluciones durante el proceso de desarrollo. Existen diversos emuladores de software que nos pueden ayudar:

• Browserstack es un servicio comercial que brinda acceso a un entorno de prueba donde puedes probar tu proyecto en más de 700 navegadores de escritorio y dispositivos móviles utilizando una máquina virtual en la nube;
• Máquinas virtuales de Microsoft: si utiliza Linux, no tendrá acceso a Internet Explorer. La solución podría ser descargar imágenes de IE6 VM en IE11, que luego se pueden usar junto con Oracle VM Virtualbox o Vagrant para pruebas locales;
• Se pueden probar rápidamente diferentes resoluciones de pantalla para un navegador en particular utilizando el servicio en línea Screenfly. Usando complementos del navegador como Window Resizer para Google Chrome, o directamente desde la sección de herramientas para desarrolladores de Chrome y Firefox.

5. Normalize.css y CSS Autoprefixer

Normalmente comienzo nuevos proyectos restableciendo CSS con Normalize.css, que proporciona una mejor compatibilidad entre navegadores con estilos de elementos HTML hasta Internet Explorer 8 inclusive. Normalize.css conserva los estilos deseados de los elementos, normaliza su apariencia y corrige una serie de errores e inconsistencias en varios navegadores.

Además, muchos navegadores heredados no pueden interpretar elementos HTML desconocidos ni propiedades CSS. Cuando el navegador encuentra un fragmento de HTML o CSS que no comprende, lo ignora y continúa con el proceso de renderizado. Muchas aplicaciones utilizan prefijos de proveedores para agregar funciones CSS nuevas, experimentales o no estándar antes de implementarlas en la especificación:

// Navegadores Webkit como Chrome y Safari -webkit- // Firefox -moz- // Internet Explorer -ms- // Opera -o-

El problema es que los prefijos son difíciles de usar y tienen muchos errores asociados. Entonces uso el complemento CSS Autoprefixer en combinación con Grunt.

El complemento analizará las reglas CSS habituales y les asignará un prefijo según la base de datos "¿Puedo usar?". Se recomienda que especifiques en la configuración las versiones de navegadores que deseas soportar, por ejemplo:

opciones: (navegadores: ["últimas 2 versiones", "es decir >= 8", "Firefox >= 12", "iOS >= 7", "Android >= 4"])

Como ejemplo, considere la siguiente clase CSS:

Ejemplo (imagen de fondo: gradiente lineal (arriba a la izquierda, #4676dd, #00345b); pantalla: flex; transición: 1s todo;)

Con la ayuda de CSS Autoprefixer se convierte a:

Ejemplo (imagen de fondo: -webkit-linear-gradient(arriba a la izquierda, #4676dd, #00345b); imagen de fondo: -moz-linear-gradient(arriba a la izquierda, #4676dd, #00345b); imagen de fondo: lineal- gradiente (arriba a la izquierda, #4676dd, #00345b); mostrar: -webkit-box; mostrar: -webkit-flex; mostrar: -moz-box; mostrar: -ms-flexbox; mostrar: flex; -webkit-transition: 1s todos; -moz-transition: 1s todos; transición: 1s todos; )

6. Comentarios condicionales

Si necesita crear CSS alternativo o habilitar JavaScript en todos los navegadores para versiones anteriores de Internet Explorer, puede utilizar comentarios condicionales. Son compatibles con Internet Explorer 5-9 y utilizan la sintaxis de comentarios HTML combinada con valores booleanos. Dependiendo del valor booleano (verdadero o falso), el código dentro de las etiquetas de comentarios se mostrará u ocultará en las respectivas versiones del navegador:

CÓDIGO A EJECUTAR // si Internet Explorer // si NO Internet Explorer // si Internet Explorer 7 // si NO Internet Explorer 7 // si Internet Explorer 9 o INFERIOR // si Internet Explorer 7 o SUPERIOR // si Internet Explorer 6 O 7 // si está POR ENCIMA de Internet Explorer 6 PERO POR DEBAJO de 9

El código se oculta automáticamente en todos los navegadores que no admiten comentarios condicionales. Un excelente ejemplo de cómo los comentarios condicionales se pueden utilizar eficazmente en la práctica es HTML5 Boilerplate, que agrega clases CSS específicas para versiones heredadas de Internet Explorer:

7. Polirellenos

Las inconsistencias técnicas en los navegadores heredados para el diseño web responsivo se pueden solucionar con un polyfill. Es un fragmento de código JavaScript que "llena" un vacío funcional específico entre un navegador heredado y una función. Hay una serie de polyfills que se pueden utilizar para proporcionar compatibilidad del navegador con funciones HTML5.

A continuación se muestran algunos polyfills diseñados para solucionar los problemas de compatibilidad entre navegadores del sitio mencionados en el punto 3:

• respond.js: implementa consultas de medios CSS3 para Internet Explorer 6 - 8;
• html5shiv permite el uso de elementos semánticos HTML5 en Internet Explorer 6 - 8;
• selectivzr: emula selectores CSS3 y pseudoclases en Internet Explorer 6 - 8. El soporte total requiere Mootools 1.3 o NWMatcher 1.2.3. El soporte parcial está disponible con jQuery 1.3/1.4;
• REM-unit-polyfill: determina si el navegador admite unidades rem y proporciona un respaldo. Funciona con IE8 y versiones inferiores.

Para usar estos polyfills, deben agregarse desde la CDN o como un archivo en el formato correcto dentro de los comentarios condicionales en la sección (no olvide incluir una de las bibliotecas de JavaScript requeridas para Selectivizr):

Para cada proyecto, es necesario evaluar si estos scripts adicionales son realmente necesarios, ya que pueden provocar problemas de rendimiento. La mayoría de los polyfills son compactos, pero cada script adicional que se carga es una solicitud HTTP adicional. Esto puede ralentizar la carga de la página.

8. Definición de funciones con Modernizr

La biblioteca Modernizr, escrita en JavaScript, le ayudará a comprobar la compatibilidad del sitio entre navegadores: si una determinada función HTML5 o CSS3 es compatible con diferentes navegadores. Si la función no está disponible, se puede cargar código CSS o JavaScript alternativo.

La idea es detectar directamente la funcionalidad del navegador, en lugar de intentar instalar una versión específica del mismo. Y en base a esto, derivar su funcionalidad, que es una forma menos eficiente y confiable.

Vale la pena señalar que Modernizr no agrega las funciones que faltan al navegador. Por lo tanto, deberá proporcionar código de un CSS o polyfill alternativo.

Primero necesita descargar un ensamblaje completamente funcional. Más adelante, cuando esté listo para desarrollar, podrá crear una compilación personalizada con las características específicas que esté probando. Todo lo que tienes que hacer es agregar la clase .no-js a la etiqueta HTML de tu sitio e incluir el script Modernizr en la sección principal después de cualquier archivo CSS:

Demostración de Modernizr Demostración de Modernizr

Este es un ejercicio de Modernizr.

La clase .no-js se utiliza para comprobar si JavaScript está habilitado en el navegador del usuario. Si está habilitado, Modernizr reemplazará .no-js con la clase .js. La función de prueba de Modernizr analiza si una función particular es compatible con el navegador y genera un conjunto de clases que se agregan al elemento HTML. Google Chrome 47.0.2526.111, por ejemplo, devolverá las siguientes clases de objetos.

Modernizr está actualmente disponible como un objeto global que se puede llamar junto con el nombre de una función para verificar si existe. Devuelve un valor booleano (verdadero o falso).

Veamos dos ejemplos simples de CSS y JavaScript.

Ejemplo de resolución de problemas de CSS en varios navegadores: comprobar la compatibilidad con SVG y proporcionar PNG como alternativa

La tendencia actual es utilizar cada vez más SVG (gráficos vectoriales escalables), pero estos gráficos no son compatibles con IE8 y versiones inferiores. Si SVG es compatible con el navegador, Modernizr genera la clase CSS .svg. Si SVG no está disponible, la herramienta agrega la clase .no-svg al HTML. Con el CSS siguiente, los navegadores compatibles con SVG utilizarán la clase .logo normal, mientras que los navegadores no compatibles con SVG utilizarán las reglas .no-svg:

Logotipo (imagen de fondo: url("logo.svg"); ancho: 164px; alto: 49px; ) .no-svg .logo (imagen de fondo: url("/logo.png"); ancho: 164px; alto :49px; )

Ejemplo de JavaScript: definición del radio del borde y adición de clases CSS apropiadas

El redondeo de las esquinas del marco no se admite en IE8 y versiones inferiores. Podemos crear diferentes clases CSS que se aplican dependiendo de la presencia de la función border-radius:

// Clase para navegador con función de radio de borde .round-borders ( border-radius: 5px; ) // Clase para navegador sin función de radio de borde .black-borders ( border: 3px solid #000000; )

Ahora podemos usar JavaScript para almacenar la identificación del objetivo como una variable y luego agregar las clases CSS mediante un condicional:

elemento var = document.getElementById("TestID"); if (Modernizr.borderradius) ( element.className = "bordes redondos"; ) else ( element.className = "bordes negros"; )

Conclusión

Cuando se trata de diseño web responsivo en navegadores antiguos, no existe una solución única para todos. Es importante analizar la audiencia del recurso para tener una idea del número real de usuarios del navegador. Luego, debe probar exhaustivamente el sitio para identificar posibles problemas entre navegadores.