Técnicas para la degradación gradual de CSS. ¿Qué es la degradación elegante en el diseño web? La degradación elegante mediante prefijos ya no funciona

Del autor: El prefijo -webkit- es tan común en CSS hoy en día que algunos sitios se niegan a funcionar correctamente sin él. Mientras que para los desarrolladores, los prefijos CSS de los proveedores durante los últimos años han significado una señal directa no del todo trabajo perfecto propiedades, esto llevó a Mozilla a dar un paso desesperado pero necesario. En Firefox 46 o 47 (lanzado en abril o mayo de 2016), Mozilla planea introducir soporte para una serie de prefijos no estándar –webkit- para mejorar la compatibilidad del navegador con ese prefijo (incluso en dispositivos móviles).

La idea no es nueva Borde de Microsoft también admite varios prefijos -webkit- para mayor compatibilidad. Opera comenzó a admitir los prefijos -webkit- en 2012 y luego cambió al motor Webkit Blink. El W3C y los desarrolladores de navegadores no planeaban utilizar este prefijo en el desarrollo de sitios web:

“La política oficial del W3C establece que las propiedades experimentales no deben usarse en el código del sitio. Sin embargo, la gente los usa porque quiere que sus sitios utilicen la última tecnología y se vean atractivos".- Página del W3C sobre optimización de contenidos para diferentes navegadores

Sin embargo, los desarrolladores siempre quieren acceder a las últimas funciones lo más rápido posible. Los prefijos de los proveedores pusieron todo patas arriba y dieron a Webkit el dominio, pero creo que los prefijos tuvieron un gran impacto en el rápido desarrollo de Internet.

Los métodos de Mozilla y Microsoft sólo dañarán la mayoría de los sitios. La mayoría de los sitios ya tendrán los prefijos –moz- habilitados, o descubrirán que con la nueva actualización, Mozilla admitirá las nuevas propiedades sin necesidad de realizar cambios. Sin embargo, como desarrolladores web profesionales, debemos dejar esto de lado y comprender que algunos diseños pueden producir resultados mixtos. Es posible que ya sepa cuáles de sus proyectos serán destruidos por esta actualización. Desarrolladores web, es hora de repensar su enfoque sobre los prefijos de proveedores y probarlos en los sitios.

Nuevos prefijos

Mozilla incluirá varios prefijos –webkit-. Por lo que he recopilado, parece que Mozilla no tiene intención de hacer coincidir su lista con las propiedades de Edge. No es necesario que todas las propiedades sean compatibles con el motor Mozilla. Entre los prefijos que Mozilla va a agregar, a juzgar por la página wiki Compatibilidad/Móvil/Compatibilidad no estándar, se encuentran los siguientes:

Webkit - para degradados

Webkit-transformaciones

Transiciones de Webkit

Apariencia del Webkit

Clip de fondo de Webkit

Relación de píxeles del dispositivo Webkit

Animación webkit

Algunas otras propiedades pueden estar en @-webkit-keyframes.

Las pruebas en varios navegadores serán fundamentales

Si usted, un desarrollador web, no incluyó el prefijo -moz- para no probar nuevas propiedades CSS en Firefox, y se acerca la fecha límite y el cliente lo obliga a agregar este prefijo, tendrá que volver a probar el sitio. en Firefox 46 o 47. Estas versiones se lanzarán en abril o mayo, así que todavía tienes algo de tiempo.

Para probar su sitio web sin esperar a Firefox 46/47, puede habilitar estos cambios en Firefox Nightly configurando layout.css.prefixes.webkit en about:config. Si tiene instalada la última versión de Nightly, el valor predeterminado debería ser verdadero. No todos los cambios del prefijo -webkit- funcionan en Firefox Nightly todavía, pero sigue siendo un buen lugar para probar cómo se verá tu sitio pronto. Esperaría hasta marzo antes de probar seriamente el sitio en Firefox Nightly.

Mucho más importante, Microsoft Edge ya interpreta y muestra los prefijos -webkit- de forma similar. Esto significa que cualquier estilo WebKit en su sitio ya se muestra en un navegador que fue completamente inesperado. Si aún no ha trabajado con este navegador, instale Windows 10 y acceda a los sitios de prueba.

Los prefijos de proveedores están desapareciendo gradualmente

Afortunadamente, los prefijos de los proveedores están desapareciendo gradualmente a medida que los equipos de desarrollo encuentran nuevas soluciones. El equipo de Chrome/Blink cambió un poco su enfoque:

"En el futuro, en lugar de habilitar los prefijos de proveedores de forma predeterminada, mantendremos las propiedades habituales detrás del indicador 'habilitar propiedades de plataforma web experimentales' en about:flags hasta que esas propiedades estén habilitadas de forma predeterminada".— El equipo Chrome/Blink

El equipo de Firefox siguió un camino similar: “La principal dirección de trabajo en Mozilla ahora es alejarse de los prefijos de proveedores, deshabilitándolos o transfiriéndolos al estado de propiedades regulares si ya son estables. Esta es al menos nuestra política general; los casos individuales merecen excepciones. »—Boris de Mozilla

Microsoft Edge también apunta a eliminar la compatibilidad con prefijos: “Microsoft también está intentando deshacerse de los prefijos de proveedores en Edge. Esto significa que los desarrolladores, cuando utilicen etiquetas HTML5 especiales o propiedades CSS, no tendrán que agregar un prefijo especial para Navegador de borde. En cambio, los desarrolladores escribirán código estándar".— Machacable

La degradación elegante mediante prefijos ya no funciona

Alejarnos de los prefijos de los proveedores significa sólo una cosa: la técnica de degradación elegante mediante prefijos ya no es una opción. Aislar navegadores específicos mediante prefijos de proveedores (por ejemplo, para Chrome) no era el propósito de estos prefijos; Siempre se ha alentado a los desarrolladores a utilizar todos los prefijos (–webkit- a –o-). Si está utilizando alguna funcionalidad que funcione en propiedades con prefijos de proveedor y también ha utilizado la técnica de degradación elegante en su diseño para otros navegadores, entonces esto ya no funciona.

Conclusión

Los tiempos cambian. El dominio de WebKit no fue intencionado y causó conmoción e incompatibilidad en Internet. Otros navegadores buscan ampliar la compatibilidad agregando prefijos –webkit-. Poco a poco, con la desaparición de los prefijos de los proveedores, el este problema. Los desarrolladores deben comprobar si el uso de prefijos no provoca consecuencias indeseables en navegadores que no sean WebKit.

En este artículo, intentaremos comprender la diferencia entre dos principios de creación de una página basada en un diseño web responsivo: mejora progresiva y degradación elegante.

Degradación agraciada

La degradación elegante, o "tolerancia a fallos", es un concepto más amplio que se aplica no sólo al diseño web. En sentido general, implica la capacidad de un sistema para funcionar incluso si alguno de sus componentes falla. Y cuanto más grave es la falla, menor es la calidad del sistema o el trabajo con el sistema, pero al mismo tiempo la funcionalidad principal del sistema permanece operativa.

La degradación elegante se puede expresar en la capacidad de trabajar con JavaScript deshabilitado, en la visualización precisa del sitio en un navegador sin soporte para la especificación CSS3, en la visualización adecuada del sitio con imágenes deshabilitadas. Todos estos fallos no deberían afectar el funcionamiento de la aplicación web. Sin embargo, si todo funciona, entonces será mucho más conveniente para el usuario utilizar el sitio.

Si consideramos un ejemplo específico, por ejemplo en el campo del diseño de interfaces web, este principio se puede formular como "el sistema puede funcionar con JavaScript completamente deshabilitado, pero con JavaScript habilitado será mucho más conveniente trabajar con él". La pregunta no es si podría haber una situación en la que JS esté deshabilitado o no funcione por completo, o por qué sucede esto. Esta situación se da por sentada. El diseñador debe desarrollar una interfaz que seguirá funcionando, aunque con JS desactivado.

A menudo, para seguir este principio, es necesario rehacer la lógica de procesamiento de formularios del lado del servidor. Sin embargo, este enfoque dará sus frutos si piensa en la tolerancia a fallos en la etapa de planificación del formulario.

El cumplimiento del principio de degradación gradual permite a los usuarios (y cada usuario es un cliente potencial) poder trabajar con el sitio en cualquier situación.

Mejora progresiva

La mejora progresiva es un principio que, junto con el móvil primero, crea bases teóricas para diseño web “responsive” (adaptativo). Su nombre ya dice que posiciona la creación de una página web por etapas, de forma cíclica, según el principio “de lo simple a lo complejo”. En cada una de las etapas planificadas previamente, la apariencia de la página debería volverse más bella, mejor y más conveniente, pero todas las funciones deberían estar disponibles inicialmente.

Es un caso más especial de degradación elegante. , ya que todas las páginas web construidas en él cumplirán plenamente con el principio de degradación elegante.

Normalmente, la creación de una página utilizando el principio de mejora progresiva consta de los siguientes pasos:

• Crear una página sobre una base "limpia"HTML
  En esta etapa, se crea una página completamente funcional, que consta únicamente de código HTML, que es semántica y lógicamente correcto y, por lo tanto, puede ser interpretado por cualquier navegador, incluso el más simple. En esta etapa, no se realiza ningún formateo y el propio navegador formatea la página de acuerdo con los estándares que se incluyen en él. La mejora progresiva insiste en que la primera etapa es la más importante, ya que no hay nada más valioso en la web que el contenido.
  Corto: crear una estructura de documento semántica y lógica
• Agregar reglasCSS
  En esta etapa, se utiliza una tabla CSS del formato antiguo: se agrega una cuadrícula de marcado, se colocan elementos, se aplican imágenes de fondo a los bloques, se cambian estilos, colores y estilos de texto. En general, la página adquiere un nuevo aspecto estilizado, volviéndose más bella y agradable.
  Corto: dando la apariencia de un documento
• Aplicando CSS3
  Ahora puede aplicar todos los efectos y mejoras proporcionadas por la especificación CSS3 al documento. Es decir, agregue translucidez, sombras, esquinas redondeadas para bloques, transiciones animadas suaves para pseudoclases o elementos de formulario.
  Corto: dando perfección apariencia documento
• Creando guiones enjavascript
  En esta etapa, todos los efectos y principios de interacción de la página web con el usuario se crean utilizando JavaScript. Estos incluyen solicitudes AJAX, carga dinámica o validación de datos, efectos de animación y widgets (por ejemplo, Prototype o jQuery). En general, hacemos que la página sea más fácil de usar.
  Corto: interacción, interactividad, conveniencia

Intentemos aplicar este enfoque en la práctica. Desarrollaremos y diseñaremos la forma mas simple inicie sesión en el sitio. En la primera etapa, crearemos un formulario de inicio de sesión en HTML puro. La forma no es tan bonita, pero es completamente funcional. A continuación se muestra el código de la página y el resultado que se muestra en el navegador:

Ahora, en el segundo paso, le daremos un estilo al formulario aplicándole una hoja de estilo que contenga solo aquellas reglas que son aplicables a CSS sin propiedades especiales. Agreguemos un color de fondo, relleno, alineación. Ahora el formulario se ve mejor:

Ahora agreguemos las reglas de la especificación CSS3. Agreguemos esquinas a los bloques, sombras para los campos de entrada de texto, diseñemos el botón y usemos nuevos selectores para eliminar el relleno innecesario en la parte superior. Obtenemos una forma mejorada:

En la última etapa, podemos crear una solicitud AJAX para que el usuario pueda acceder al sitio sin tener que recargar la página.

En este caso, en cada etapa específica (si el navegador lo admite), se mostrará una página completamente funcional. Pero si el navegador admite tecnologías más avanzadas, la página solo mejora.

¿Qué principio deberías seguir?

Si el sitio se construye de la manera más eficiente posible de acuerdo con el concepto de degradación elegante, entonces el resultado será aproximadamente el mismo que sucedería si se utilizara una mejora progresiva. Entonces, ¿cuál es la diferencia?

El hecho es que construir un sitio web basado en el principio de degradación elegante es bastante difícil, ya que pocos desarrolladores pueden hacerlo de manera eficiente. En el caso más simple de degradación gradual, puede hacer lo siguiente: crear el sitio para la última versión del navegador y luego mostrar a los usuarios un mensaje indicándoles que deben descargarlo. nueva versión navegador. Al mismo tiempo, es posible que a los desarrolladores no les importe cómo se ve el sitio en navegadores más antiguos. Otro ejemplo de degradación mala y elegante es apagado completo funcionalidad del sitio cuando JavaScript está deshabilitado. Un ejemplo sorprendente es el envío de mensajes en Facebook.com.

Por lo tanto, la mejora progresiva surgió en respuesta a la degradación elegante de mala calidad. Diseñar este tipo de interfaces se ha vuelto más fácil y de mejor calidad, ya que existen etapas claramente definidas para crear una interfaz.

En el diseño adaptativo existe el concepto de “móvil primero”, que de alguna manera corresponde al concepto de mejora progresiva, ya que exige acciones de lo simple a lo complejo, de pantallas móviles a PC de escritorio. Por eso la clave para uso correcto El diseño web responsivo depende de la capacidad del desarrollador para aplicar los principios de mejora progresiva y dispositivos móviles primero.

Ciertamente, explorador de Internet contiene un gran número de errores en diferentes versiones, pero con la ayuda de comentarios condicionales puedes combatirlos, logrando su eliminación. Pero lo que nada puede solucionar es que IE esté irremediablemente desactualizado. Mientras que otros navegadores incluyen cada vez más propiedades CSS3 y admiten varias tecnologías novedosas, IE está marcando el paso. El lanzamiento de IE9 no resolverá el problema. Versión anterior esto no se evaporará durante la noche. En tal situación la mejor solucion habrá una degradación gradual: el principio de mantener el rendimiento cuando se pierde alguna funcionalidad.

Veamos esta técnica con un pequeño ejemplo, en el que el texto se muestra en un bloque y un botón. El bloque y el botón tienen esquinas redondeadas y también se agrega una pequeña sombra al bloque. Hasta ahora, los navegadores CSS3 utilizan principalmente propiedades específicas con sus propios prefijos:

• Firefox: propiedades que comienzan con -moz-;
• Safari y Chrome: propiedades que comienzan con -webkit-;
• Opera: propiedades que comienzan con -o-.

Las diferentes versiones de estos navegadores pueden comprender algunas propiedades con y sin prefijo, por lo que, para mayor universalidad, agregan varias propiedades a la vez. Entonces, para crear esquinas redondeadas necesitamos el siguiente estilo.

Radio de borde de Moz: 10px; /* Para Firefox */ -webkit-border-radius: 10px; /* Para Safari y Chrome */ border-radius: 10px; /* Para Opera e IE9 */

Aunque el uso de estas propiedades dará lugar a inválidos código CSS, en este caso es más importante trabajar en Navegadores Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, así como sus versiones anteriores. El ejemplo 1 muestra cómo usar las propiedades CSS3 para crear sombras y esquinas redondeadas.

Ejemplo 1. Bloque con sombra

XHTML 1.0 CSS 2.1 CSS3 IE 8 IE 9+ Cr Op Sa Fx

El resultado del ejemplo se muestra en la Fig. 1.

Arroz. 1. Vista de bloque en Safari

El mismo ejemplo en el navegador IE8 y siguientes se muestra en la Fig. 2.

Arroz. 2. Vista de bloque en IE8

Aunque la apariencia de los elementos difiere en detalles, la funcionalidad de la página en su conjunto sigue siendo la misma. Se puede hacer clic en el botón, el texto sigue siendo el mismo, incluido su color y fondo, y no hay errores de visualización. De hecho, la diferencia está sólo en las pequeñas cosas que cumplen funciones decorativas y no prácticas. Se cumplen todos los principios de la degradación elegante.

¿Qué aporta este enfoque en la práctica?

• Le permite utilizar activamente las propiedades decorativas de CSS3 sin tener en cuenta el navegador.
• Motiva a utilizar varios efectos CSS3.
• Esto hace que la vida del desarrollador sea mucho más fácil, ya que ya no tiene que buscar soluciones para navegadores obsoletos.
• Acelera la productividad laboral.

Por supuesto, la degradación elegante no siempre es aplicable. Si los requisitos de diseño indican compatibilidad con versiones anteriores, tendrá que buscar soluciones alternativas, por ejemplo, utilizando imágenes para esquinas redondeadas. Pero en su mayor parte, los requisitos de diseño se establecen sin tener en cuenta la situación general. Y si comparamos todas las ventajas de la degradación elegante con la desventaja, que se manifiesta sólo en el hecho de que los navegadores obsoletos, en particular IE8, no muestran la página lo suficientemente "bella", entonces las simpatías estarán del lado del progreso.

Hace mucho que no escribo, tuve que mudarme a un lugar sin Internet (eso es terrible), por lo que no pude escribir en el blog. Hoy quiero hablar sobre el método de desarrollo (diseño), que se utiliza parcialmente en el diseño de mi blog.

EN Últimas Versiones Los navegadores innovadores (como FF 3.5, Opera 10) han introducido algunos efectos decorativos de la especificación CSS 3 propuesta. La transparencia, las sombras y el efecto cebra (rayas) ahora están disponibles sin el uso de JavaScript ni etiquetas adicionales. Pero algunos navegadores más antiguos que todavía están en uso no tienen estas funciones, y sería triste pensar que no tendrás la oportunidad de utilizar estos maravillosos efectos durante algunos años más.

En este artículo, hablaré sobre cómo realizar mejoras interesantes (incrementales) en los navegadores que admiten funciones CSS3 y seguir proporcionando un diseño satisfactorio para otros usuarios.

¿Qué es la mejora progresiva?

Para comprender el concepto de "mejora gradual", es necesario comprender el principio de "degradación elegante", que se describe bien en la siguiente cita:

Una degradación leve significa que su sitio continúa funcionando incluso si se visualiza en un navegador no óptimo en el que los efectos avanzados no funcionan.
Pensamiento fluido, de Peter-Paul Koch

La "mejora incremental" utiliza el mismo método solo desde el lado opuesto, en lugar de preocuparse de que el sitio no se desmorone en un navegador antiguo, primero debe pensar en el contenido y simplemente agregar características de programas modernos al diseño para mejorar el usuario. experiencia, mientras que el diseño de estado básico todavía funciona en máquinas más antiguas. Actualmente, esta es la mejor manera de utilizar las nuevas funciones de CSS 3.

Ejemplo

Como ejemplo, hagamos un menú de navegación simple que se verá un poco más bonito dependiendo de la compatibilidad con CSS de su navegador.

Me gustaría señalar que en este ejemplo no utilizo gráficos, trucos ni prefijos específicos del navegador; todas las mejoras se deben a las capacidades declaradas. Teniendo esto en cuenta, algunas de las cosas que aparecen a continuación son sólo a modo de ejemplo y pueden no ser la mejor opción para crear sitios web reales.

Calificación

Hagamos un menú simple usando una lista desordenada (ul):

• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum


• Lorem Ipsum

Estilo básico

Como base, usaré un estilo que utiliza sólo selectores de capas simples. Crea un borde para cada elemento y cambia el fondo al pasar el mouse (onmouseover). Esto debería funcionar en cualquier navegador creado en los últimos 7 u 8 años (y posiblemente más).

El CSS es muy simple:

Ul (
color de fondo: azul;
borde inferior: 1px punteado #999;
estilo de lista: ninguno;
margen: 15px;
ancho: 150 px;
}

li(
color de fondo: #fff;
borde: 1px punteado #999;
ancho del borde inferior: 0;
fuente: 1.2em/1.333 Verdana, Arial, sans-serif;
}

li a (
de color negro;
bloqueo de pantalla;
altura: 100%;
relleno: 0,25 em 0;
alineación de texto: centro;
decoración de texto: ninguna;
}

li a: hover (color de fondo: #efefef;)

Lo único extraño aquí es el fondo azul.

; Explicaré esto más tarde. Con este estilo tendremos la siguiente vista básica, se mostrará en IE6 así:

Diseño básico, así es como se verá en IE6 y otros navegadores más antiguos.

Aplicando mejoras

IE7 fue el primero de la serie de navegadores IE en admitir todos los selectores de atributos de CSS 2.1, que también es común en casi todos los demás navegadores. Podemos utilizar uno de ellos, el selector de niños, para empezar a mejorar. Dado que IE6 no admite selectores secundarios, ignorará las siguientes reglas:

Cuerpo > ul (ancho de borde: 0;)

ul > li (
borde: 1px sólido #fff;
ancho de borde: 1px 0 0 0;
}

li > a (
color de fondo: #666;
color blanco;
peso de fuente: negrita;
}

li:primero--niño a (color: amarillo;)

li > a:hover (color de fondo: #999; )

Con estas reglas CSS, la lista se ve así:



El menú ahora tiene un fondo de color y texto en negrita, y el primer enlace está resaltado en un color diferente.

Así es como IE7, Firefox, Safari y Opera mostrarán la lista.

Pongamos más énfasis

El siguiente paso es aumentar el énfasis utilizando una propiedad que IE no reconoce: la transparencia. No necesitamos usar selectores especiales para esto, porque IE simplemente omitirá la propiedad que no admite:

Li (opacidad: 0,9; )

li: flotar (opacidad: 1;)

La siguiente imagen muestra cómo funciona esta propiedad en Opera, puede ver que los elementos de la lista han adquirido un ligero tinte azul en el fondo.

. Al pasar el mouse, cada elemento se vuelve completamente opaco:



Por supuesto, puede usar la propiedad de filtro propia de IE para lograr el mismo efecto en IE, así como los prefijos específicos del navegador (-moz-, -webkit-) para las propiedades siguientes. Pero con fines educativos, me apegaré al estándar CSS. dado que el filtro no es una propiedad estándar, no es válido.

Firefox 2 admite la transparencia, pero en navegadores posteriores podemos ir aún más lejos. En Safari y Opera, podemos decorar texto usando la propiedad text-shadow:

Li a:hover (sombra de texto: 2px 2px 4px #333;)

Como muestra la siguiente imagen, el elemento tiene una ligera sombra al pasar el mouse y parece sobresalir ligeramente de la página:



Finalmente, puedes asegurarte de que Opera sea totalmente compatible con los nuevos selectores CSS 3 y agregar otra capa de mejoras: variables de color de fondo usando el selector enésimo hijo:

Li:nth-child(2n+1) a (color de fondo: #333; )

li:nésimo-niño(n) a:hover (
color de fondo: #aaa;
color: #000;
}

li:first--child > a:hover (color: amarillo;)

Veremos un menú rayado en Opera:



Resumen y conclusiones

La siguiente imagen muestra cómo se ve el marcado inicial en IE6, IE7, Firefox, Safari y Opera, después de aplicar las reglas CSS descritas en este artículo. Como puede ver, a medida que la compatibilidad del navegador con CSS se vuelve más sofisticada, los menús se vuelven más elegantes y complejos y, al utilizar técnicas de mejora incremental, los menús siguen siendo funcionales incluso en navegadores muy antiguos.



Por supuesto, muchos navegadores tienen una serie de otras propiedades que no he descrito aquí pero que se pueden utilizar, por ejemplo colores RGBA y SVG como colores de fondo.