Hace diez años, solo los diseñadores de sitios web más de vanguardia usarían CSS para el diseño y el adorno de la página web. En ese momento, el soporte de los navegadores para el diseño de CSS estaba incompleto y lleno de lagunas, por lo que, si bien estas personas insistieron en la estandarización web, tenían que usar hacks para que sus páginas se mostraran normalmente en todos los navegadores. Una de las tecnologías más y más utilizadas es el navegador de navegador, que utiliza el atributo Navigator.Useragent en JavaScript para determinar qué marca y versión del navegador está utilizando el usuario. La tecnología de olpesos de navegador puede ramificar rápidamente el código para aplicar diferentes instrucciones a diferentes navegadores.
Hoy, los diseños basados en CSS ya son muy comunes, y los navegadores lo admiten muy sólidos. Pero ahora CSS3 y HTML5 están aquí, la historia ha cambiado y ha vuelto a su lugar original: el apoyo a estas nuevas tecnologías de varios navegadores ha comenzado a volverse desiguales nuevamente. Durante mucho tiempo nos hemos acostumbrado a escribir códigos ordenados y compatibles con estándares, y ya no usaremos hacks o navegadores CSS para oler tecnologías poco confiables y de bajo nivel. También creemos que cada vez más usuarios estarán de acuerdo con la idea de que los sitios web no tienen que verse lo mismo en todos los navegadores. Entonces, ante esta situación familiar (soporte diferente del navegador) ahora, ¿qué debemos hacer? Simple: Use la detección de características, lo que significa que no tenemos que preguntarle al navegador quién es usted. Para hacer especulaciones poco confiables. En cambio, le preguntamos al navegador si puede hacer esto o aquello. Esto es fácil de detectar los navegadores, pero aún es aburrido pasar tiempo probándolos manualmente uno por uno. Modernizr puede ayudarnos en este momento.
Modernizr: una biblioteca de detección funcional especialmente desarrollada para HTML5 y CSS3
Modernizr es una biblioteca JS de código abierto que facilita a los diseñadores que desarrollan diferentes niveles de experiencia en función de las diferencias en los navegadores invitados (refiriéndose a las diferencias en apoyo de los nuevos estándares). Permite a los diseñadores aprovechar al máximo las características HTML5 y CSS3 para el desarrollo en navegadores que admiten HTML5 y CSS3 sin sacrificar el control de otros navegadores que no admiten estas nuevas tecnologías.
Cuando incorpora el script de Modernizr en una página web, detectará si el navegador actual admite funciones de CSS3, como @font-face, border-radius, border-imagen, shadow de caja, rgba (), etc., y también detectará si las características de HTML5 son compatibles, como audio, video, almacenamiento local y tipos de etiquetas y propiedades y propiedades. Sobre la base de obtener esta información, puede usarlos en navegadores que admiten estas características para decidir si crear un alternativo basado en JS o simplemente degradar aquellos que no las admiten. Además, Modernizr también puede permitir que IE respalde la aplicación de estilos CSS en elementos HTML5, para que los desarrolladores puedan usar de inmediato estas etiquetas más semánticas.
Modernizr se desarrolla en base a la teoría de la mejora progresiva, por lo que admite y alienta a los desarrolladores a crear su sitio web Layer por capa. Todo comienza con una base inactiva con JavaScript aplicado, agregando capas de aplicación mejoradas una por una. Debido a que se usa Modernizr, es fácil para usted saber lo que admite el navegador. Echemos un vistazo a un ejemplo de creación de sitios web de vanguardia aplicando Modernizr.
Comience con la aplicación de Modernizr
Primero, descargue la última versión estable de Modernizr de www.modernizr.com (actualmente, el sitio web oficial de Modernizr está bloqueado en China, y podemos descargarla desde Github. O para ser más simple, puede descargar el último archivo de script de la versión 1.7 del maestro). En el sitio web oficial, también puede ver una lista de todas las características que admite para la detección (la última página de este artículo le dará a estas listas para que los zapatos de los niños que no sean volteados a través de la pared puedan saber cuáles apoyan). Después de descargar la última versión (el autor usó la versión 1.5 al escribir este artículo), agréguela al área de la página:
A continuación, agregue la clase NO-JS al elemento.
Cuando se ejecute Modernizr, convertirá la clase NO-JS en JS para hacerle saber que se está ejecutando. Modernizr no solo hace esto, sino que también agrega una clase de clase a todas las características que detecta. Si el navegador no admite una función, prefija el nombre de clase correspondiente a la función por no-. Entonces, su elemento puede ser así:
Modernizr también creará un objeto JS llamado Modernizr, que es una lista de resultados booleanos dados para cada característica detectada. Si el navegador admite un nuevo elemento de lienzo, el valor de Modernizr.canvas es cierto; Si el navegador no admite este nuevo elemento, el valor correspondiente es falso. Este objeto JS también contendrá información más detallada para ciertas funciones, como Modernizr.video.h264 le dirá si el navegador admite este códec especial. Modernizr.inputTypes.Search le dirá si el navegador actual admite el nuevo tipo de entrada de búsqueda, etc.
Nuestra pequeña página sin procesar y simple se parece un poco a un sistema previo a la prueba, pero tiene una mejor semántica y accesibilidad. Agreguemos un poco de estilo básico: un pequeño formato de texto, color y diseño para que se vea mejor. En la actualidad, no hay nada nuevo, solo agregue estilos de expresión a una página HTML de estructura semántica y mire la página después de agregar el estilo.
A continuación, queremos mejorar esta página para hacerlo más interesante. Quiero aplicar un efecto de texto peculiar a H1 en la cabeza, dividir la lista de características de detección en dos columnas y luego obtener todo sobre Modernizr con una foto a la derecha. También quiero hacer que el contenido de la página sea hermoso. Ahora, el CSS3 más potente le permite agregar más propiedades a una regla que las ignorará si el navegador no las admite. Con CSS Cascade (herencia), puede usar nuevas propiedades como Border-Radius sin confiar en Modernizr. Sin embargo, el uso de Modernizr puede proporcionarle algunas características que no pueden ser proporcionadas por medios existentes: nombres de clases modificados dinámicamente basados en el soporte diferencial del navegador para cosas nuevas. Ilustraré esto agregando 2 nuevas reglas a nuestra página:
La primera regla agrega una esquina redondeada de 12 píxeles al elemento #content. Pero en la página existente, hemos establecido un borde con el elemento #content con un valor de atributo de 2px de salida #666. Esto se ve bastante bien cuando la caja está bien, pero no en esquinas redondeadas. Gracias a Modernizr, puedo establecer un borde real de 1px en la caja con el radio fronterizo compatible con el navegador.
La segunda regla es un poco más avanzada. Agregamos una sombra al elemento #content y eliminamos el atributo de borde para los navegadores que admiten los atributos de la sombra de caja. ¿Por qué? Debido a que la mayoría de los navegadores no proporcionan un buen rendimiento para la combinación de bordes y esquinas con sombras (este es un defecto en un navegador que debe tenerse en cuenta, pero tenemos que soportarlo ahora). En lugar de usar sombras y solo usar bordes, preferiría usar sombras para rodear elementos. De esta manera, puedo tener el mejor, preciso y mejor rendimiento de CSS del mundo: aparecerá una hermosa sombra en un navegador que admite el atributo de sombra de caja; Un navegador que solo admite el atributo de radio fronterizo presentará un hermoso borde redondeado delgado; Para los navegadores rotos que no admiten estos dos, veremos un borde de ángulo derecho de 2 píxeles.
A continuación queremos aplicar una fuente especial personalizada al encabezado. La siguiente es nuestra declaración actual para H1, sin cambios:
Estas declaraciones funcionan bien en nuestras páginas base, y el tamaño de texto de 27 píxeles también es adecuado para la visualización de esas fuentes que establecemos para H1. Pero para la fuente que voy a usar llamado Beautiful, 27 píxeles es demasiado pequeño. Aquí queremos agregar otras reglas para usar esta fuente personalizada:
Primero, agregamos la declaración de @Font-Face y especificamos la ruta, el nombre del archivo y el nombre de la fuente para nuestras fuentes personalizadas. Luego usamos una instrucción CSS para seleccionar el estilo de fuente para nuestro H1. Verá que elegí un gran tamaño de fuente aquí, porque la hermosa fuente en sí es mucho más pequeña que el texto de otras fuentes, por lo que debemos instruir al navegador que le dé a H1 un tamaño de fuente grande al mostrar nuestras fuentes personalizadas.
Además, nuestro hermoso texto escrito a mano tiene algunos problemas de representación con el sombreado de texto, por lo que tenemos que cancelar el sombreado de texto cuando el navegador decide usar texto personalizado. Además, la lista de piezas de características de detección debe dividirse en dos columnas. Para lograr mi objetivo, quiero usar el atributo de columnas CSS impresionante, que permitirá que el navegador divida de manera inteligente la lista en columnas sin interrumpir su orden. Aunque nuestra lista no tiene un número numérico, también se organiza en orden alfabético. Por supuesto, no todos los navegadores admiten esta propiedad. Para aquellos que no admiten, usamos Float para lograr el propósito de 2 columnas: después de usar Float, la lista ya no se organizará alfabéticamente, pero eso es mejor que nada.
He usado Modernizr nuevamente para establecer diferentes propiedades para diferentes situaciones. Si el navegador admite columnas CSS, dividirá perfectamente la lista en 2 columnas. Si no es compatible, también podemos usar el método flotante para convertir la lista en dos columnas flotando. Aunque no es tan perfecto, es mejor que aplicar directamente una larga lista de columnas individuales.
Aquí puede haber notado que he agregado diferentes prefijos (-moz-, -webkit-, -o-) al atributo. Esto se debe a que los diferentes fabricantes de navegadores tienen diferentes definiciones de la implementación de esta función, por lo que para implementar esta función, necesitan agregar sus prefijos correspondientes a diferentes navegadores.
Después de estos cambios, nuestra nueva página se ve mejor.
Agregaremos mejoras más progresivas a nuestra página para finalizar este tutorial. Los navegadores basados en Webkit admiten algunos efectos especiales más impresionantes, como la transformación CSS, la animación y la transformación tridimensional. Y quiero aplicar algunos de estos efectos especiales en las páginas de la última etapa. Nuevamente, estas propiedades se agregarán a nuestro CSS existente e ignoradas en navegadores que no las admiten. Por lo tanto, es apropiado usar Modernizr para esta situación donde la mejora gradual no es compatible con un lado.
Primer set:
La regla @Keyframes es parte de la nueva especificación de animaciones CSS y actualmente solo admite WebKit. Le permite declarar una ruta de animación completa para cualquier atributo y cambiarlos en cualquier etapa que desee. Para obtener más información sobre las animaciones, lea la especificación de borrador de trabajo W3C.
Aquí agregamos el código que hace que un elemento gire en un espacio tridimensional:
Debido a que el logotipo debe girarse, y espero que se lleve más armoniosamente con el fondo cuando se gira, por lo que se usa un archivo de formato PNG aquí. También utilicé un atributo Overflow: Oculto para ocultar el texto en el encabezado con píxeles de sangrado-9999. Es interesante hacer que los elementos gire en 3D, pero no demasiado hermosos. Finalmente, elegimos usar la regla de animación, estableciendo su período de rotación en 2 segundos, girando a lo largo de su propio eje central, sin parar.
La página final se ve genial, e incluso establece animaciones divertidas para el navegador WebKit. Espero que hasta ahora puedas entender lo increíble que puede hacer tu muñeca con el control de Modernizr sobre tu sitio web y qué tan simple puede hacer una mejora progresiva real. Este no es solo el beneficio completo de Modernizr, también puede ayudarlo a construir retrasos basados en JS y ayudarlo a aplicar las nuevas y increíbles características de HTML5.