Header Ads Widget

Ticker

6/recent/ticker-posts

Guía detallada de compatibilidad con CSS en navegadores

Todo lo que ves en Internet hoy en día es un sitio web por adelantado y para construirlo, necesitamos HTML y CSS. Cuando Internet no era tan gigantesco, era bastante fácil desarrollar sitios web. Solo había un puñado de navegadores y complejidades que eran casi inexistentes. A medida que Internet avanzaba, también lo hacían los navegadores web a medida que entraban en escena más proveedores de navegadores. Atrás quedaron los días en que Internet Explorer dominaba la cuota de mercado de los navegadores. La entrada de navegadores modernos, más rápidos y compatibles con W3C, como Google Chrome y Mozilla Firefox, hizo que la gente se olvidara de IE. Lo que finalmente condujo a la muerte de IE .

¿Sabe que hay más de 35 navegadores disponibles para una población de 4.570 millones de personas en todo el mundo? Fuente: Statista

Incluso hipotéticamente, no es posible que todos los usuarios de Internet tengan el mismo navegador o versión de navegador instalado en su dispositivo. Para colmo, cada navegador es independiente y renderiza HTML / CSS a su manera. Los diferentes navegadores muestran diferentes características en las que son perfectos. Depende del desarrollador encontrar una manera de lidiar con todos los navegadores y sus versiones. Se puede acceder a un sitio web desde cualquiera de esos navegadores y es su responsabilidad asegurarse de que el usuario vea lo que debería ver. Si la estructura del navegador o las pruebas entre navegadores no se resuelven, el sitio web probablemente quedará torcido o incluso podría fallar. En este artículo, profundizaré en el soporte del navegador y el soporte de CSS en los navegadores para ser más específico.

¿Cuál es el problema de los soportes CSS?

Fuente de imagen

CSS juega el papel más importante considerando cómo su audiencia verá su sitio web. Cuanto más atractivo sea su sitio web, mayores serán las posibilidades de que los espectadores se queden por más. Digamos que estudió CSS ​​y después de invertir mucho tiempo, desarrolló un hermoso sitio web. Después de lanzar el sitio web, descubre que sus soportes CSS están desordenados y no es así como deseaba que se viera su sitio web.

¿Cómo ocurrió eso?

Sí, lo adivinaste bien. Todo vuelve al soporte del navegador y al soporte de CSS. El mal funcionamiento del sitio web generalmente ocurre debido a la disponibilidad de múltiples navegadores y la forma en que procesan HTML.

Debe comprender esto: no todos los navegadores son compatibles con una función en particular.

Si su sitio web tiene una función CSS, es posible que funcione en un navegador y no en otro. La razón puede ser cualquier cosa. Algunos navegadores no implementan una función CSS debido a problemas de seguridad, mientras que otros implementan funciones de manera diferente para atraer a los usuarios y mostrar que su navegador es único. No está oculto que la mayoría de los usuarios del navegador no están fascinados por las funciones de seguridad u otras funciones útiles, sino más bien por la interfaz de usuario del navegador. Cuanto más hermosa es la interfaz de usuario, más audiencia reúne. Un ejemplo muy simple pueden ser los botones en HTML. Cuanto más bonito sea el botón que vea en un navegador, mejor será.

Volviendo a mi agenda, estos navegadores renderizan HTML / CSS de manera diferente y, a veces, no los renderizan en absoluto. Cuando el navegador no entiende algo, es decir, no tiene implementación de esa característica en particular, el navegador simplemente lo ignora y continúa. No se producen errores ni excepciones. Este es el problema principal con los soportes CSS y también la razón por la que los desarrolladores tienen tantas dificultades para manejar el soporte del navegador. Se ha convertido en un gran problema con un aumento en el número de navegadores. Sin embargo, las herramientas de prueba entre navegadores como LambdaTest están ayudando mucho sobre lo que veremos en las secciones posteriores. Por ahora, averigüemos más sobre la compatibilidad con navegadores.

¿Todo depende de la compatibilidad con el navegador?

Cuando se trata de verificar la compatibilidad del navegador, hay muchos factores a considerar. Hay muchos casos en los que podría pensar que “¡Oh! esto no está implementado en este navegador ”. Pero eso no se aplica todas las veces. Es cierto que los navegadores no implementan todas las funciones de CSS y muchas veces se sentirá decepcionado cuando realice pruebas cruzadas en él. Siempre se recomienda esperar primero y verificar su propio código antes de culpar de todo al navegador. No es muy raro descubrir que hubo una falla en el código. Por lo tanto, el primer paso antes de realizar la prueba en varios navegadores es verificar el código. Esto tiende a suceder incluso con desarrolladores experimentados, así que recuerde verificar su código antes de decir que este navegador no es compatible con dicha función. Además, esto no significa que tenga un error de sintaxis.

Otra razón por la que el soporte del navegador puede verse afectado es un error en el navegador. Un error en el navegador es común, pero no es tan común que ese error exista durante mucho tiempo, ya que los navegadores siguen lanzando sus nuevas versiones con mejoras mejoradas y eliminando los errores anteriores con bastante frecuencia. Por lo tanto, no es tan común que encuentre un error y algún artículo antiguo sobre ese error todavía existe en Internet. Pero si es así, puede corregirlo o encontrar una forma de evitar el error. Los desarrolladores consideran que es un caso "muy raro" cuando encuentra un error en el navegador, ya que no es culpa suya ni de las implementaciones del navegador.

Dejame darte un ejemplo. Puede suceder que abra su página web y haya algún problema con ella. Comprueba su código y no encuentra nada. Comprueba la implementación del navegador en Internet y sigue sin encontrar nada. Intentas encontrar el error en CSS y aún no encuentras nada en Internet. Puede que esto no sea común, pero sucede. En tales casos, ha encontrado un error en el navegador antes que nadie. Es posible que no encuentre nada para solucionarlo porque no hay nada que se haya actualizado. Esto puede suceder si la versión del navegador es muy nueva o si se ha introducido recientemente el diseño CSS. Todo lo que puede hacer es transmitirlo a los desarrolladores de navegadores y encontrar la manera usted mismo. Estos son algunos casos en los que es posible que no encuentre ningún error en el código o en los soportes CSS y aún así, no es su culpa.

Si encuentra alguno de los casos mencionados anteriormente, el primer paso debería ser verificarlo en StackOverflow. Intente seguir las etiquetas sobre desarrollo web para que esté al tanto de las características, versiones o problemas recientemente desarrollados. Stack Overflow es una fuente confiable y probablemente responderá a sus consultas con la ayuda de desarrolladores de todo el mundo. El segundo paso que debe realizar es verificar el error o problema en los repositorios como FlexBugs o GridBugs. Seguramente lo ayudará con los problemas de soporte de su navegador.

Todas estas cosas corresponden a los errores que pueden estar presentes en el navegador o en su código. El otro lado de no ver su código y la implementación de CSS en el navegador es la falta de soporte en el navegador. Ahora, veremos cómo la falta de soporte CSS afecta nuestro código.

Ausencia de compatibilidad con CSS en los navegadores

Cuando decimos que hay un error en el sitio web, puede ser un error dentro del código o un error dentro del navegador.

Pero, ¿y si ninguno de ellos está presente?

Digamos que desarrolló un código CSS y se refleja perfectamente en el navegador en el que lo probó. Cuando intenta ejecutar el mismo en otro navegador, la forma en que ve ese bloque CSS en particular, inmediatamente sabe que la parte se ha omitido. Cuando lo verifica en Internet, se da cuenta de que no se trata de un error de código, ya que el código se estaba ejecutando en los otros navegadores. También puede saber en Internet que el navegador no proporciona compatibilidad con CSS para ese elemento.

Exploremos esto a través de un ejemplo de un código HTML simple que usa la propiedad de marcador de posición de CSS. Si no está familiarizado con la propiedad del marcador de posición, solo se usa en los cuadros de texto de entrada en HTML. La propiedad de marcador de posición nos ayuda a saber de qué se trata el cuadro de texto de entrada sin tener que escribir algo en él. Muestra el significado escrito como se mostrará en las imágenes a continuación. El valor del marcador de posición desaparece tan pronto como hacemos clic en el cuadro de texto. Se puede utilizar para indicar el significado del cuadro de texto o cualquier precaución o validación. Sabemos de antemano que Internet Explorer 9 no es compatible con el marcador de posición CSS. Por lo tanto, usaremos el siguiente código para ejecutar esta página web en Chrome e IE para ver cómo funciona la ausencia de compatibilidad con CSS en los navegadores.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title> Determining CSS Properties in Internet Explorer</title>
</head>
  
<body>
  
<center style= "margin-top: 50px">
  
<input type="text" placeholder="Enter Your Name"/>
  
</body>
</html>

Internet Explorer 9

Cromo 72

Como se vio anteriormente en las capturas de pantalla generadas a partir de LambdaTest, Internet Explorer no tiene soporte para el marcador de posición. Este problema puede ser encontrado por usted muchas veces ya que este es el núcleo principal de esta publicación. Los errores son raros, la mayoría de las veces verá cómo su código se muestra de manera diferente en diferentes navegadores y la falta de soporte es la razón de esto. Lo que discutimos aquí es la ausencia total de soporte de cierta propiedad. A veces, también podemos encontrar soporte parcial en un navegador (o una determinada versión).

¿Qué es el soporte parcial de CSS y su efecto?

En las secciones anteriores, nos enteramos de que no hay soporte CSS o soporte completo. Significa que su CSS se omitirá o se ejecutará como debería y verá los resultados. Ahora, debe preguntarse qué es el soporte parcial y si el navegador puede implementarlo o no. El soporte parcial en CSS significa cuando los navegadores solo admiten algunos de los valores de CSS. Por ejemplo, si consideramos una propiedad CSS "selección de usuario". Debe saber que esta propiedad nos permite hacer doble clic y seleccionar el texto en un sitio web. Entonces, podemos establecer nuestras preferencias con la ayuda de la propiedad de selección de usuario. Contiene diferentes opciones para seleccionar, a saber, texto, todo, ninguno, automático, etc.

Ahora, si un navegador está implementando la propiedad de selección de usuario de CSS, también debería implementar todos los valores contenidos en la selección de usuario. La implementación de algunos (pero no todos) valores es lo que llamamos implementación parcial de CSS. En nuestro caso, Safari tiene la implementación parcial de selección de usuario. Cuando ejecutamos CSS en Safari, solo implementa texto y no valores. Si intentamos escribir la opción all o auto, la implementación falla y, como resultado, permitirá escribir en el contenedor. Así es como funciona la implementación parcial. La implementación parcial es más común entre todos los problemas que enfrentan los desarrolladores. Un navegador permite algunos valores pero restringe otros. No está definido que así será siempre. A medida que se lanzan las nuevas versiones, los navegadores cambian sus implementaciones y pueden permitir aquellos valores que previamente restringieron.

Introducción a las consultas de funciones en CSS

Antes de pasar a las consultas de características, debemos comprender cómo los navegadores implementan CSS. Cuando ejecuta una página con CSS, el navegador la representa. El navegador ve la línea o propiedad CSS y luego la ejecuta. Si el navegador tiene la implementación de esa propiedad, la ejecutará como debería ser. Si el navegador no implementa esa propiedad, simplemente se omite y no se ejecutará. Tomando esto como el concepto base, las consultas de características nos ayudan a averiguar si el navegador admite una determinada propiedad o no. Como ayuda a reconocer la compatibilidad del navegador, las consultas de funciones también se conocen como regla @supports. Usamos la siguiente sintaxis para consultas de características:

1
2
3
@supports (property: value) {
   // code that will run if the property(value) is supported by the browser
 }

Ahora que comprende el concepto de consultas de funciones, será más fácil comprender los soportes CSS en los navegadores. Si el navegador admite una propiedad junto con el valor, comenzará a ejecutarse y el código que está dentro de los corchetes se ejecutará mostrando los resultados adecuados en la página web. Si no es compatible, simplemente omitirá el código.

Las consultas de características son una herramienta muy potente para saber si el navegador admite una sola propiedad o no. Una vez que haya terminado con las consultas de funciones, podrá saber si el navegador tiene errores o no implementa esa función. El uso de consultas de funciones para probar su CSS no significa que comience a probar todas las propiedades dentro de las consultas. La mayoría de las propiedades de CSS están implementadas en todos los navegadores (al menos en todos los navegadores principales), así que no busques en todos. Pruebe la compatibilidad solo con los navegadores de los que no está seguro o también puede probar la compatibilidad después de haber implementado el CSS. En este caso, verá en la página web que algo no está funcionando bien, después de eso, puede continuar y verificar si esa propiedad está implementada o no. Esta es una manera más fácil y podrá omitir verificaciones innecesarias.

Uso de consultas de funciones para compatibilidad con CSS

Las consultas de funciones son probablemente la herramienta más importante que lo ayudará a identificar la compatibilidad con el navegador sin siquiera implementar pruebas entre navegadores. Para aprovechar al máximo esta propiedad, debe comprender cuándo y cómo usarla. Hay tres casos en los que se pueden utilizar consultas de funciones. Veamos los tres casos diferentes.

1. Prueba de soporte completo: Esto significa probar los soportes de CSS, es decir, probar si la función CSS es compatible o no. Esto es lo que he discutido en detalle en la sección anterior.

2. Prueba sin soporte: Esto significa probar sin soporte. Es similar a NOT gate en informática. Cualquiera que sea la entrada, la salida es opuesta a ella. Entonces, si su propiedad es compatible, el código dentro del corchete no se ejecutará. Si su código es compatible, el código se ejecutará y los cambios se reflejarán. La sintaxis para el mismo es-

1
2
3
4
5
6
7
@supports not (property: value) {
   // code that will run if the property(value) is supported by the browser
 }
To make it clear, a simple example is
@supports not (user-select: text) {
   // code that will run if the text value in user-select is supported by the browser
 }

Como se discutió en la última sección, la otra forma de lograr esto sería usar solo @support y ver si el código se está ejecutando o no. Si no es así, la propiedad no es compatible con el navegador. Pero es algo parecido al método lema y no lo recomiendo. Esto se debe a que no poder ejecutar el código no significa necesariamente que la propiedad no sea compatible. Puede haber otras razones, como he comentado en las secciones anteriores.

3. Prueba de soporte múltiple: para soporte múltiple, las consultas de características utilizan la misma sintaxis que la utilizada en el sistema de puertas lógicas. Si desea verificar el soporte múltiple para dos propiedades diferentes como si ambas fueran compatibles o no, utilice la siguiente sintaxis:

1
2
3
4
@supports (user-select: text) and (border: groove)
{
        /* CSS from browsers which support grid and CSS shapes */
    }

Si desea verificar si alguna de las múltiples propiedades que definió es compatible o no, utilice la siguiente sintaxis:

1
2
3
4
@supports (user-select: text) or (border: groove)
{
        /* CSS from browsers which support grid and CSS shapes */
    }

Es posible que ya haya entendido lo importantes que son las consultas de características y ahora también puede usar estos tres casos para identificar los soportes CSS en diferentes navegadores. Es una herramienta importante en CSS y hará su trabajo más fácil que nunca.

Sé lo que estás pensando. ¿Es eso todo lo que necesita saber sobre los soportes CSS? Es bastante obvio que todas las propiedades CSS no son compatibles con todos los navegadores. Además, un navegador puede contener errores que provoquen una ejecución incorrecta o nula de algunas propiedades CSS. Sí, puede verificar estas propiedades mediante consultas de características y estar seguro. A veces, encontrar fallas de CSS no es la única solución para encontrar el mejor soporte de navegador. Como ya sabe, muchas cosas en un sitio web están interconectadas entre sí. Por ejemplo, hacer clic en algo puede cambiar el color o activar algo más en CSS.

¿Cómo verifica si su código JavaScript es defectuoso o si CSS no es compatible? Para escapar de este dilema, debemos probar el código de nuestro sitio web.

Asegurar el soporte de CSS probándolo en la nube

Para estar seguros de nuestro CSS, debemos estar seguros de que el código, aparte de CSS, se está ejecutando bien. Y si podemos comprobar ambos a la vez, nada es mejor que eso. Para cumplir con este propósito existen algunas herramientas en línea disponibles pero no todas son lo suficientemente eficientes. Una de esas herramientas que he usado y amado personalmente es LambdaTest. Es una herramienta de prueba de navegadores cruzados basada en la nube en línea que puede ayudar a desarrolladores como usted y yo a realizar comprobaciones en los soportes CSS. Es muy útil cuando tiene que probar su sitio web antes de publicarlo en Internet. LambdaTest proporciona una función de túnel que es útil en las pruebas de respuesta de un sitio web alojado localmente .

¿Cómo hacerlo?

Una vez que ejecute su página web o sitio web en LambdaTest , lo primero que puede verificar es si su página web se está ejecutando como debería o no. Si no es así, es muy fácil identificar cuál es el error, ya sea un error JS o un error CSS. La parte sorprendente es que puede registrarse de forma gratuita y consultar su sitio web en el navegador que desee y en la versión que desee para asegurarse de la configuración de compatibilidad entre navegadores. Cuando haga esto, sabrá inmediatamente qué navegador tiene problemas y con qué versiones. Lo crea o no, LambdaTest proporciona pruebas de navegador cruzado en más de 2000 navegadores y sistemas operativos. Según los resultados que ve, siempre puede recomendar ciertos navegadores o versiones de navegadores a sus usuarios para obtener los mejores resultados.

Al hacerlo, puede verificar los problemas de su navegador cruzado junto con los problemas relacionados con el soporte de CSS utilizando solo una herramienta. Dado que los sitios web son básicamente largas líneas de código, es posible que no sepa dónde comenzó el problema. Para ello, la forma recomendada es seguir el enfoque del caso de prueba. Cuando llega un caso en el que el código del sitio web es enorme y el problema es difícil de encontrar, agrupe algunas líneas de código (código importante) mediante las cuales pueda identificar el error. Después de agrupar estas líneas, organice los casos de prueba en estas líneas para verificar el funcionamiento solo de este código en particular. Ejecutar casos de prueba en estas líneas asegurará que la parte en la que su código salió mal es en la que necesita trabajar. Por lo tanto, una combinación de una herramienta de prueba de navegadores cruzados basada en la nube y probar el código garantizará que su CSS sea seguro y se vea exactamente como lo pretendía.

Conclusión

Trabajar en CSS parece una tarea fácil, pero hay muchas cosas que siempre deben tenerse en cuenta. En primer lugar, CSS no es algo que se pueda tomar a la ligera. CSS ha traído una revolución en la parte de la interfaz de usuario del HTML; de lo contrario, HTML es solo un montón de etiquetas que realmente no agradan a la vista. El único problema es que los desarrolladores de backend no piensan como los desarrolladores de frontend o web. Si dependiera de los desarrolladores web, tendríamos un navegador universal para todo y para todos. Pero eso no es posible. En su lugar, podemos evitar problemas relacionados con la compatibilidad con CSS mediante el uso de herramientas como las consultas de funciones o una herramienta de prueba en línea entre navegadores. Una vez que sepamos qué navegador o qué versión del navegador nos está molestando, podemos trabajar de acuerdo con él. Su sitio web es lo primero con lo que interactúa el usuario. Su sitio web es la primera impresión que recibe un usuario. Espero que sepas lo perfecto que debería ser. Empiece a hacerlo aún más perfecto de lo que ya es.¡Feliz prueba!

Publicar un comentario

0 Comentarios