Mejora paso a paso con CSS3: compatibilidad con navegadores modernos. Es hora de repensar los prefijos de los proveedores de CSS Técnicas de degradación gradual de CSS

Estoy confundido acerca de la diferencia entre Incremento gradual y Degradación agraciada... Me parece que son lo mismo.

¿Podría explicarme la diferencia entre los dos y en qué situación usaría uno sobre el otro?

8 respuestas

Son muy parecidos, pero difieren en contexto.

hay una clase de navegadores denominados "navegadores de clase A". Estos son los miembros típicos de su audiencia que (probablemente) constituyen la mayoría de sus visitantes. Comenzará en el nivel básico de estos usuarios. Vamos a llamarlo mejores prácticas modernas.

Si quieres alargar experiencia para cualquiera que utilice accidentalmente FF3.6 o Safari 4 o algún otro desarrollador de webkit nocturno genial. ¿Qué quieres hacer?

• esquinas redondeadas a través de css
• texto sombreado (pero, por favor, Dios no demasiado)
• sombras paralelas (ver arriba entre paréntesis)

Esto hace que su sitio se vea espectacular, pero no lo romperá. eso incremento gradual... Abrazando el futuro en términos de mejores practicas.

por otro lado, su sitio nicho de Nintendo atrae a una buena cantidad de usuarios de IE5. Pobre de ti, pero también quieres asegurarte de que sigan regresando. Puede proporcionar una alternativa a su comportamiento de ajax al incluir el script ajax en un archivo externo y, si su JS no está incluido, sus enlaces podrían actualizar toda la página. Etc. Desde el punto de vista mejores prácticas modernas, se asegurará de que se sirvan algunos mercados históricos algo parecido a un sitio funcional... eso degradación agraciada.

En su mayoría son idénticos, pero difieren en términos de prioridad para muchos equipos de desarrollo: la educación física es bastante buena si tiene el tiempo, pero GD a menudo necesario

Si su sitio se ve igualmente bien en todos los navegadores, pero algunos navegadores obtienen, digamos, ponis bailarines porque admiten ponis bailarines, entonces esta es una mejora progresiva. Funciona en todos los navegadores, pero algunos obtienen algo adicional. Normalmente, este término se aplica a determinadas funciones de Javascript que pueden mejorar la usabilidad fuera del "HTML sin formato".

Si su sitio solo se ve de la manera deseada en los navegadores que son totalmente compatibles, digamos, con CSS3 e IE8, representará la misma página sin, digamos, esquinas redondeadas, entonces eso es una degradación elegante. El sitio está realmente diseñado para navegadores modernos, pero todavía se usa en navegadores más antiguos, pero no tan elegante.

después de todo, son realmente lo mismo, visto desde dos puntos de vista diferentes.

dirección de seleccionado base pues cada concepto es diferente.

la degradación elegante comienza en el nivel ideal de experiencia del usuario y disminuye según las capacidades del agente de usuario al mínimo, sirviendo agentes que no son compatibles con la funcionalidad específica utilizada por la línea de base.

la mejora progresiva comienza en la experiencia mínima amplia del consumidor y aumenta, dependiendo de las capacidades del agente del consumidor, a un nivel más capaz, proporcionando alimentos a los agentes que apoyan funciones más avanzadas que las básicas.

Creo que se pueden usar ambos conceptos si el tiempo y el presupuesto lo permiten. De lo contrario, se prefiere una degradación elegante.

Siento resucitar algo que tiene más de un año, pero sentí que podía aportar, de alguna manera, mi propia opinión al respecto.

si bien estoy de acuerdo con Alex Mcp y deceze de alguna manera, los términos degradación elegante y mejora progresiva tienen un significado ligeramente diferente al que yo expreso.

agraciadas degradaciones, muchas veces (en mi opinión), parece más un palo vencer a la aplicación en la vista después de que se construyó mal en primer lugar en mi experiencia. ¿Cómo es posible que alguien construya algún tipo de objeto javascript enorme que le proporcione al usuario algo realmente genial con lo que jugar hasta que el gerente entre, revise la cosa y todos corran gritando, arrojando sus manos cuando se trata de que su aplicación es no funciona en el 35% de los navegadores. "Será mejor que alguien proporcione una alternativa para esto".

Incremento gradual aunque (y este es un término tan bueno para decirlo también) parecería más hacer algo que simplemente funciona, a un nivel de entrada, en todas partes, utilizando los métodos más básicos disponibles, para proporcionar toda la funcionalidad que el usuario desea. Esto luego se puede agregar con pequeños ayudantes discretos, estilos, etc., en realidad mejora la experiencia del usuario de la aplicación en cuestión, en lugar de hacerla apenas utilizable. "que se ve genial. ¿Funciona en IE6? Oh, sí. Funciona"

Creo que tal vez al dar estilo como ejemplo de ambos términos en las dos respuestas principales aquí, se pierde el problema de usabilidad central real que incremento gradual a menudo decide por naturaleza dónde agraciadas degradaciones ignora hasta que las cosas van mal.

La diatriba ha terminado ...

la degradación elegante es la práctica de crear funcionalidad web para proporcionar un cierto nivel de experiencia de usuario en navegadores más modernos, pero también se degradará graciosamente a un nivel de usuario más bajo en navegadores más antiguos. Esta capa inferior no es tan agradable para los visitantes de su sitio, pero aún les proporciona la funcionalidad principal que vinieron a usar en su sitio; las cosas no se rompen para ellos.

el aumento progresivo es similar, pero lo contrario es cierto. Empiece por establecer una experiencia de usuario de referencia que todos los navegadores pueden proporcionar al renderizar su sitio web, pero también crea una funcionalidad más avanzada que estará disponible automáticamente para los navegadores que pueden usarla.

en otras palabras, la degradación elegante comienza con el statu quo de la complejidad y trata de solucionarlo con menos experiencia, mientras que la mejora progresiva comienza con un ejemplo funcional muy básico y permite la expansión continua para entornos futuros. Humillar con gracia significa mirar hacia atrás, mientras que aumentar progresivamente significa mirar hacia adelante manteniendo los pies en tierra firme.

Degradación agraciada

agraciadas degradaciones la capacidad de una computadora, máquina, sistema electrónico o red para mantener una funcionalidad limitada incluso cuando la mayor parte está destruida o desactivada. El objetivo de la degradación elegante es evitar fallas catastróficas.

la graciosa degradación es una solución. Es la práctica de crear un sitio web o una aplicación, por lo que proporciona un buen nivel de experiencia de usuario en los navegadores modernos. Sin embargo, esto se degrada con gracia en los navegadores más antiguos. Puede que el sistema no sea tan bonito o bonito, pero la funcionalidad básica funcionará en sistemas más antiguos.

un ejemplo simple es el uso de PNG transparentes Alpha de 24 bits. Estas imágenes se pueden mostrar en los navegadores modernos sin problemas. IE5.5 e IE6 mostrarán la imagen, pero los efectos de transparencia no funcionarán (se puede hacer que funcione si es necesario). Los navegadores más antiguos que no admiten PNG mostrarán texto alternativo o espacios en blanco.

los desarrolladores que aceptan una degradación elegante a menudo indican su nivel de compatibilidad con el navegador, como los navegadores de nivel 1 (mejor experiencia) y los navegadores de nivel 2 (experiencia degradada).

Incremento gradual

incremento gradual es una estrategia de diseño web que enfatiza la accesibilidad, el marcado semántico HTML y las hojas de estilo externas y las tecnologías de scripting. Progressive Enhancement utiliza tecnologías web en un modo en capas que permite a todos acceder al contenido básico y la funcionalidad de una página web utilizando cualquier navegador o conexión a Internet, y proporciona versiones mejoradas de la página a aquellos con software de navegador más avanzado o mayor ancho de banda.

la mejora progresiva es similar al concepto de deterioro elegante pero a la inversa. El sitio web o la aplicación establecerá una experiencia de usuario básica para la mayoría de los navegadores. Se agregarán funciones más avanzadas cuando el navegador lo admita.

la mejora progresiva no requiere que seleccionemos navegadores compatibles o recurramos a diseños basados \u200b\u200ben tablas. Elegimos el nivel de tecnología, es decir, el navegador debe admitir HTML 4.01 y solicitudes / respuestas de página estándar.

volviendo a nuestra imagen de ejemplo, podemos decidir que nuestra aplicación debería funcionar en todos los navegadores gráficos. Podríamos usar imágenes GIF de menor calidad por defecto, pero reemplazarlas con png de 24 bits cuando el navegador las admita.

enlaces

Wikipedia: Incremento gradual y

Tabla de contenido:

El prefijo -webkit- es tan dominante en CSS que algunos sitios no funcionan correctamente sin él. Esto indica que los desarrolladores no han seguido las mejores prácticas en los últimos años, y esto ha llevado a una decisión desafortunada pero casi forzada por parte de Mozilla. En Firefox versión 46 o 47 (esto es abril o mayo de 2016), Mozilla planea implementar soporte para los prefijos no estándar -webkit- para mejorar la compatibilidad de Firefox con sitios que usan mucho -webkit (generalmente sitios móviles).

Sin embargo, los desarrolladores usan prefijos para aprovechar las últimas capacidades del navegador lo más rápido posible. Los prefijos causaron confusión con el dominio de WebKit, pero también hicieron avanzar la web a un ritmo acelerado.

El enfoque de Mozilla y Microsoft es seguro para la mayoría de los sitios. Muchos sitios usarán el prefijo -moz- o no necesitarán hacer nada para ser compatibles con una futura actualización de Firefox. Pero como desarrolladores web profesionales, debemos considerar y comprender cuidadosamente las implicaciones de esto. Sabe con seguridad cuáles de sus sitios pueden verse afectados por esta actualización.

Entonces, es hora de repensar el enfoque de los prefijos y probar los sitios con ellos.

Prefijos admitidos

Hay una serie de prefijos -webkit- que Mozilla puede implementar. Según los datos que he recopilado, Mozilla no busca hacer coincidir su lista de propiedades de prefijo compatibles con la lista de propiedades de Edge, ya que no todas son necesarias para la compatibilidad del motor de diseño.

Los desarrolladores de Firefox también están cerca de un enfoque similar:

La tendencia actual en Mozilla es evitar los prefijos de los proveedores deshabilitando las propiedades estándar y utilizando una versión sin prefijos si es lo suficientemente estable. Esta es una política general: las excepciones son posibles en algunos casos - Boris de Mozilla

Microsoft Edge también eliminará los prefijos de proveedores:

“Microsoft también está buscando eliminar los prefijos de proveedores en Edge. Esto significa que los desarrolladores que deseen utilizar las funciones específicas de HTML y CSS no utilizarán el prefijo específico para Edge. En su lugar, simplemente escribirán código de acuerdo con los estándares ". - Mashable

No habrá más degradación gradual basada en prefijos

Este alejamiento de los prefijos de proveedores significa una cosa: la degradación gradual con prefijos de proveedores no tiene perspectivas.

El uso de prefijos de proveedores para aplicar estilos para un navegador específico (por ejemplo, solo para Chrome) no fue el propósito de su introducción; la recomendación para los desarrolladores siempre ha sido utilizar todos los prefijos (-webkit- a -o-). Si usa funciones que dependen de propiedades prefijadas y usa prefijos para degradar gradualmente su diseño en otros navegadores, esto ya no funciona.

Conclusión

Los tiempos cambian. El dominio de WebKit ha provocado, sin saberlo, problemas de incompatibilidad, lo que obliga a otros proveedores de navegadores a implementar los prefijos -webkit-. Este problema se agotará a medida que los proveedores de navegadores se alejen de los prefijos de proveedores, pero por ahora, los desarrolladores deben asegurarse de que los prefijos no causen resultados inesperados en navegadores que no sean de WebKit.

La industria del diseño web cambia constantemente, en parte porque los navegadores web y los dispositivos cambian constantemente. Dado que el trabajo que hacemos como diseñadores y desarrolladores web se visualiza a través de un navegador web, nuestro trabajo siempre tendrá una relación simbiótica con este software.

Cambios en los navegadores web

Uno de los desafíos a los que siempre se han enfrentado los diseñadores y desarrolladores de sitios web es no solo los cambios en los navegadores web, sino también la gama de diferentes navegadores web que se utilizarán para acceder a sus sitios web. Sería fantástico si todos los visitantes del sitio utilizaran el software más reciente y mejor, pero este nunca ha sido el caso (y probablemente nunca lo hará).

Algunos visitantes de sus sitios navegarán por la web con navegadores muy obsoletos y funciones que faltan en los navegadores más modernos. Por ejemplo, las versiones anteriores del navegador Microsoft Internet Explorer han sido durante mucho tiempo un problema para muchos profesionales de la web. A pesar de que la compañía ha dejado de admitir algunos de sus navegadores más antiguos, todavía hay personas que los usarán, personas con las que quizás desee tratar y comunicarse.

La definición de "degradación elegante"

La realidad es que las personas que utilizan estos navegadores web obsoletos a menudo ni siquiera saben que tienen software obsoleto o que su experiencia en Internet podría verse comprometida debido a la elección del software. Para ellos, este navegador obsoleto es simplemente lo que han estado usando para acceder a sitios web durante mucho tiempo. Desde la perspectiva del desarrollador web, queremos asegurarnos de poder brindarles a estos clientes una experiencia gratificante, así como crear sitios web que funcionen muy bien en los navegadores y dispositivos más modernos y ricos en funciones disponibles en la actualidad.

La "degradación elegante" es una estrategia para manejar diseños de páginas web para diferentes navegadores, tanto antiguos como nuevos.

Comenzando con navegadores modernos

El diseño de un sitio web creado para una degradación gradual se desarrolla principalmente con los navegadores modernos en mente. Este sitio está diseñado para aprovechar las capacidades de estos navegadores web modernos, muchos de los cuales se “actualizan automáticamente” para garantizar que las personas siempre utilicen la última versión. Sin embargo, los sitios web que se degradan con gracia también funcionan de manera eficiente para los navegadores más antiguos. Cuando estos navegadores más antiguos y menos funcionales ven el sitio, debería degradarse mientras aún es funcional, pero quizás con menos funciones u otros elementos de visualización visual. Si bien este concepto de proporcionar un sitio menos funcional o poco atractivo puede parecerle extraño, la verdad es que la gente ni siquiera sabrá que están perdidos. No compararán el sitio que ven con la "mejor versión", por lo que mientras el sitio funcione para lo que quieren y no parezca estar funcional o visualmente roto, usted estará en buena forma.

Mejora progresiva

El concepto de degradación gradual se parece mucho a otro concepto de diseño web del que quizás haya oído hablar: mejora progresiva. La principal diferencia entre una estrategia de degradación y una estrategia de mejora progresiva es dónde comienza su diseño. Si comienza con el mínimo común denominador y luego agrega una funcionalidad de navegador más moderna a sus páginas web, está utilizando una mejora progresiva. Si comienza con las funciones más actualizadas y de vanguardia y luego aleja la imagen, utilizará la degradación gradual. Al final, es probable que el sitio web resultante proporcione la misma experiencia, ya sea que utilice una mejora progresiva o una degradación gradual. Realmente, el objetivo de cualquiera de los enfoques es crear un sitio que funcione muy bien para los navegadores modernos y al mismo tiempo brindar una experiencia fácil de usar para los navegadores web más antiguos y los clientes que continúan usándolos.

La degradación elegante no significa que le esté diciendo a sus lectores: "Descarguen el navegador más reciente".

Una de las razones por las que a muchos diseñadores modernos no les gusta el elegante enfoque de degradación es que a menudo se traduce en que los lectores deben cargar el navegador más moderno para que la página funcione. Esta no es una degradación elegante. Si desea escribir "cargar navegador X para que esta característica funcione", abandona el área de degradación gradual y pasa al diseño centrado en el navegador. Sí, sin duda es útil ayudar a un visitante del sitio web a cambiar a un mejor navegador, pero esto se pregunta a menudo (recuerde, muchas personas no entienden cómo descargar nuevos navegadores, y su solicitud para hacerlo puede dar miedo). ellos lejos). Si realmente desea que su empresa les diga que abandonan su sitio para descargar un software mejor, es poco probable que esto sea posible. Si su sitio no tiene una funcionalidad principal que requiera una versión de navegador específica o superior, las descargas forzadas a menudo violan la experiencia del usuario y deben evitarse.

Una buena regla general es seguir las mismas reglas para el deterioro gradual que para la mejora progresiva:

• Escribir compatible con estándares HTML válidos
• Utilice hojas de estilo externas para su diseño y maquetación
• Utilice scripts vinculados externamente para la interactividad
• Asegúrese de que el contenido sea accesible incluso para navegadores de bajo nivel sin CSS o JavaScript

Con este proceso en mente, ¡puedes salir y crear el diseño más moderno que puedas! Solo asegúrese de que funcione en navegadores menos funcionales mientras sigue funcionando.

¿Qué tan atrás deberías ir?

Una pregunta que tienen muchos desarrolladores web es hasta qué punto debe admitir las versiones del navegador. No hay una respuesta precisa y seca a esta pregunta. Depende del sitio en sí. Si observa los análisis de tráfico en un sitio, puede ver qué navegadores se utilizan para visitar ese sitio. Si ve un porcentaje significativo de personas que utilizan un determinado navegador más antiguo, entonces probablemente quiera admitir ese navegador o se arriesga a perder este negocio. Si observa sus análisis y ve que nadie está usando una versión anterior del navegador, probablemente pueda decidir no preocuparse por admitir completamente este navegador heredado y probarlo. Por lo tanto, la respuesta real a la pregunta de qué tan atrás necesita soporte su sitio es "no importa qué tan atrás sus analistas le digan lo que están usando sus clientes".

Editado por Jeremy Girard.

Por supuesto, Internet Explorer contiene una gran cantidad de errores en diferentes versiones, pero con la ayuda de comentarios condicionales puedes combatirlos, logrando su eliminación. Pero lo que no se puede arreglar es que IE está irremediablemente desactualizado. Mientras que otros navegadores incluyen cada vez más propiedades CSS3, admiten varias tecnologías novedosas, IE está marcando el tiempo. La versión IE9 no resolverá el problema, las versiones anteriores no se evaporarán de la noche a la mañana. En tal situación, la mejor solución sería una degradación elegante: el principio de mantener la operatividad cuando se pierde parte de la funcionalidad.

Echemos un vistazo a este truco con un pequeño ejemplo que muestra el texto en un bloque y un botón. El bloque y el botón tienen esquinas redondeadas, también se agrega una pequeña sombra al bloque. Hasta ahora, los navegadores para 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-.

Diferentes versiones de estos navegadores pueden entender algunas propiedades con o sin prefijo, por lo tanto, para universalidad, agregan varias propiedades a la vez. Entonces, para crear esquinas redondeadas, necesitamos el siguiente estilo.

Moz-border-radius: 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 CSS no válido, en este caso es más importante trabajar en los navegadores Firefox 1.0, Safari 3.1, Chrome 2.0, Opera 10.50, IE9, así como en sus versiones anteriores. El ejemplo 1 muestra cómo utilizar las propiedades de CSS3 para crear sombras paralelas 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.

Figura: 1. Bloquear vista en Safari

El mismo ejemplo en IE8 y a continuación se muestra en la Fig. 2.

Figura: 2. Vista del bloque en IE8

Aunque la apariencia de los elementos varía en detalle, la funcionalidad de la página en su conjunto permanece. Se puede presionar el botón, el texto permanece igual, incluido su color y fondo, no hay errores de visualización. De hecho, la diferencia está solo en las pequeñas cosas que realizan funciones decorativas, no aplicadas. Se cumplen todos los principios de la graciosa degradación.

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

• Le permite utilizar activamente las propiedades decorativas de CSS3 sin mirar el navegador.
• Motiva a aplicar varios efectos CSS3.
• Facilita mucho la vida del desarrollador, 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 para el diseño indican compatibilidad con versiones anteriores, tendrá que buscar soluciones alternativas, por ejemplo, utilizar imágenes para esquinas redondeadas. Pero en su mayor parte, los requisitos para el diseño se establecen sin tener en cuenta la situación general. Y si compara todas las ventajas de la degradación elegante con la desventaja que se manifiesta solo en el hecho de que los navegadores obsoletos, en particular IE8, no muestran la página "bien", entonces la simpatía estará del lado del progreso.

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

Las últimas versiones de navegadores innovadores (como FF 3.5, Opera 10) han introducido algunos efectos decorativos de la especificación propuesta CSS 3. Los efectos de transparencia, sombras y cebra (rayas) ahora están disponibles sin JavaScript ni marcado adicional. Pero algunos navegadores más antiguos que todavía usan estas propiedades no lo hacen, y sería triste pensar que no tendrá la oportunidad de usar estos maravillosos efectos durante algunos años más.

En este artículo, hablaré sobre cómo realizar mejoras agradables (graduales) en los navegadores que admiten las funciones de CSS3 y, al mismo tiempo, mostrar un diseño que satisfaga a otros usuarios.

¿Qué es la mejora progresiva?

Para entender el concepto de "mejora incremental", uno debe entender el principio de "degradación elegante", que está bien descrito por la siguiente cita:

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

La "mejora gradual" utiliza el mismo método solo desde el lado opuesto, en lugar de tener cuidado de que el sitio no se desmorone en el navegador anterior, primero debe pensar en el contenido y simplemente agregar características de programas modernos al diseño para mejorar la experiencia del usuario, mientras que el estado base los diseños todavía funcionan en máquinas más antiguas. Actualmente, esta es la mejor manera de aplicar las nuevas funciones de CSS 3.

Ejemplo

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

Me gustaría señalar que en este ejemplo no estoy usando gráficos, hacks o prefijos específicos del navegador; todas las mejoras se deben a las capacidades declaradas. Teniendo esto en cuenta, algunas de las cosas a continuación son solo un ejemplo y pueden no ser la mejor opción para crear sitios web reales.

Margen

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

• Lorem ipsum


• Lorem ipsum


• Lorem ipsum


• Lorem ipsum


• Lorem ipsum

Estilo básico

Como uno básico, usaré un estilo que usa solo selectores de herencia simples. Crea un borde en cada elemento y cambia el fondo al pasar el mouse (onmouseover). Esto debería funcionar en cualquier navegador fabricado en los últimos 7-8 años (y posiblemente más).

El CSS es muy simple:

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

li
color de fondo: #fff;
borde: 1px con puntos # 999;
border-bottom-width: 0;
fuente: 1.2em / 1.333 Verdana, Arial, sans-serif;
}

li a
de color negro;
bloqueo de pantalla;
altura: 100%;
acolchado: 0.25em 0;
alineación de texto: centro;
decoración de texto: ninguna;
}

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

La única rareza aquí es el fondo azul.

; Explicaré esto más tarde. Con este estilo, tendremos la siguiente vista base, que se renderizará en IE6 así:

Diseño básico como se verá en IE6 y otros navegadores antiguos.

Aplicar mejoras

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

Cuerpo\u003e ul (ancho del borde: 0;)

ul\u003e li (
borde: 1px sólido #fff;
ancho del borde: 1px 0 0 0;
}

li\u003e a (
color de fondo: # 666;
color blanco;
font-weight: negrita;
}

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

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

Con estas reglas de 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.

Esto mostrará la lista de IE7, Firefox, Safari y Opera.

Pongamos más énfasis

El siguiente paso es aumentar el énfasis usando una propiedad que IE no reconoce: Opacidad. No necesitamos usar selectores especiales para esto, ya que IE simplemente omitirá las propiedades que no admite:

Li (opacidad: 0,9;)

li: hover (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 desde el fondo.

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



Por supuesto, puede usar la propiedad de filtro de IE para obtener el mismo efecto en IE. Además de los prefijos específicos del navegador (-moz-, -webkit-) para las propiedades a continuación. Pero con fines educativos me ceñiré al estándar CSS, ya que el filtro no es estándar. propiedad, entonces no es válida.

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

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

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



Finalmente, podemos encargarnos del soporte completo de Opera para los nuevos selectores de CSS 3 y agregar otra capa de mejoras: colores de fondo variables usando el selector nth-child:

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

li: nth-child (n) a: hover (
color de fondo: #aaa;
color: # 000;
}

li: first - child\u003e a: hover (color: yellow;)

Veremos un menú a rayas en la 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 refinada, los menús se vuelven más elegantes y sofisticados, y al utilizar una técnica de mejora gradual, los menús siguen siendo funcionales incluso en navegadores muy antiguos.



Por supuesto, muchos navegadores tienen una serie de otras propiedades que no he cubierto aquí, pero que pueden usarse, como colores RGBA y SVG como colores de fondo.