Hola a todos. Hoy vamos a hablar sobre las capacidades del navegador y lo que puede hacer para asegurarse de que sus sitios tengan un aspecto coherente, independientemente de cómo la gente esté accediendo a ellos. Así que a pesar de que HTML5 realmente ha estado empujando a los desarrolladores de navegadores para que todos lleguen a esta implementación consistente, realmente difieren en visualización y adhesión a las nuevas etiquetas que están saliendo. Y a medida que los navegadores se actualizan y cambian y salen nuevos navegadores, tendrás que tener en cuenta que no todo el mundo está mirando tu página de la misma manera que tú. Por lo tanto, es su responsabilidad asegurarse de que su página funcione para una audiencia amplia. Y aunque hemos estado hablando mucho de accesibilidad, y diferentes formas de acceder a la web, incluso se reduce a las implementaciones más básicas del navegador. Así que primero, hablemos de manejar estas diferencias estilísticas. La forma más fácil de eliminar las diferencias del navegador es crear algo llamado hoja de estilos predeterminada. Y en esa hoja de estilo, en realidad entraría y eliminaría cualquiera de los valores predeterminados del navegador para los diferentes elementos a los que se aplica estilo. Así que cuando entras y lo haces tomarías, P, H1, H2, todos los encabezados, todas las diferentes etiquetas semánticas y entrarías y dirías, quiero que tengan relleno de cero y margen de cero. Incluso mis artículos de la lista no deberían tener ninguna decoración en absoluto. Así que si bien esto asegurará que tenga una mirada muy consistente, tengo que admitir que va a hacer que la página se vea absolutamente horrible. Pero ese es el precio que pagarás para que cuando empieces a escribir tus propias reglas de estilo, puedas mejorar e inevitablemente mejorar y tu página se verá mejor y mejor. De lo contrario, si no usa lo que llamamos esta hoja de estilos predeterminada, va a diseñar su página, y va a ser muy difícil para usted recordar si realmente ha marcado cada elemento que está utilizando. Una de las otras cosas de las que queremos hablar es manejar lo que llamamos propiedades no compatibles. Así que primero, sabemos que todos los navegadores no admiten todas las etiquetas HTML5. Ya has visto esto, en alguna de las codificaciones que has hecho conmigo. De la misma manera, no todos los navegadores admiten todas las propiedades CSS3. Hay algunas propiedades que se ven realmente geniales en algunos navegadores, pero no se manejan de forma predeterminada en otros navegadores. Pero hay una manera de evitarlo en muchos casos. Y lo que esto es, es que los navegadores están ofreciendo prefijos. Así que a veces los llaman prefijos del navegador, a veces prefijos de proveedor, pero lo importante es que es una solución realmente rápida para manejar todas las opciones no compatibles que puede encontrar. Ahora, cuando vi por primera vez los prefijos del navegador, estaba completamente intimidado. No sabía lo que estaba pasando, y parecía un poco raro, y me sentía perezoso y no quería lidiar con eso. Pero estoy aquí para decirles, en realidad es muy, muy fácil usar estos prefijos. Entonces, echemos un vistazo a lo que estoy hablando. Has estado usando diferentes propiedades y esperamos que el navegador esté funcionando. Pero ahora, para algunas de esas propiedades, vas a querer y agregar un prefijo o un poco delante de él, como webkit, moz, ms o o para Opera. Cada uno de estos prefijos dice, oye, si estás en este navegador en particular, esto es lo que necesito que hagas para conseguir el aspecto que el diseñador está buscando. Entonces, ¿cuáles son algunas de estas propiedades que a menudo no son compatibles? Incluyen el recuento de columnas, que es una forma de agregar varias columnas a sus párrafos o divs. Es una manera muy agradable de dividir tu texto que responda. Así que si alguien cambia el tamaño de la página, los párrafos realmente cambian de tamaño. Tenemos otra cosa llamada frontera radio, que a la gente realmente le encanta usar porque añade un poco de borde redondeado a los bordes de sus elementos. Una tercera opción sería gradiente. Y el gradiente es un tipo de color de fondo muy fresco que permite que el color pase de un tono de azul a tal vez gris o rojo o algo así. Y le da una apariencia diferente. Ahora no hay forma de que sepa realmente qué propiedades son compatibles y cuáles no. Así que tengo este enlace aquí a un sitio llamado caniuse.com. Y lo que hace caniuse.com es que enumera las diferentes propiedades y le dice qué navegadores los soportan y cuáles necesitan los prefijos. Por lo tanto, es una buena idea revisar ese sitio mientras empiezas a desarrollar tu página. Pero por ahora, sigamos adelante y veamos un ejemplo. Entonces, en este ejemplo, tengo un archivo llamado prefixes.html. Y sólo quiero mostrarte rápidamente lo que se ve en ambos Chrome por aquí, y también en Safari. Se ven bastante similares. Pero hay pocos espacios en los que la fuente puede no coincidir exactamente, o es posible que algunos de los espaciados no coincidan exactamente. Así que si quería deshacerme de eso, si realmente quería asegurarme de que las páginas se vean exactamente iguales, lo que puedo hacer es agregar una hoja de estilo predeterminada. Así que vamos a bajar aquí, y voy a decir hola que quiero usar mi hoja de estilo predeterminada. Y lo que parece es que es un archivo realmente loco donde he enumerado todos los diferentes elementos. Y después de eso, pon cosas como, no quiero ningún relleno, no quiero ningún margen. Si tengo listas, deshazte del estilo de lista. Haz que esto sea tan feo como puedas. Entonces, si vuelvo aquí, es posible que no veas una gran diferencia porque los navegadores ya son bastante simples, pero puedes ver que las cosas se mueven ligeramente. Nos deshacemos de un poco de cosas. Y de la misma manera, cuando refresque el Safari, van a parecer un poco más similares. Así que ahora, sigamos adelante y veamos ese ejemplo en el que algunas de las propiedades no son compatibles. Y voy a volver a mi archivo HTML, y voy a decir, hey, quiero usar mi hoja de estilo para seguir adelante y diseñar algunas cosas que no siempre son compatibles. Y las cosas de las que estoy hablando específicamente es que vamos a empezar con esta idea de contar columnas. Cómo funciona el recuento de columnas y el hueco de columnas le dice al navegador cuántas columnas desea y cuánto espacio desea entre esas columnas. Así que ahora, cuando me refresco, puedes ver que ha pasado de ser todo un párrafo de bloque largo a que todo está dividido. Y es realmente genial porque es dinámico. Si cambio el tamaño del navegador, todo se mueve. Y esta es una forma genial de hacerlo. Una de las otras cosas que me gustaría agregar como algo para mirar, es esta idea de que en lugar de tener un cuadrado, quiero redondear un poco los bordes. Así que lo haces agregando lo que se llama el radio fronterizo. Ahora voy a parar antes de actualizar la página, porque quiero señalarte algo en caso de que estés tan intimidado como yo cuando empecé a hacer esto. El radio fronterizo es sólo una propiedad simple que ha existido durante un tiempo. Y puedes verlo justo aquí, y le das un valor. Lo mismo con el recuento de columnas y el hueco de columnas. Toda esta idea de agregar prefijos solo significa, tomar su propiedad regular y abofetear estos prefijos en ella. No necesita aprender nada nuevo, solo necesita recordar los nombres de prefijo. Así que quiero que intentes abrazar esto, y te des cuenta de que no estás haciendo nada demasiado espectacular. Así que ahora que he hecho esto, he conseguido 25. Y voy a seguir adelante y refrescarla. Y como pueden ver, he curvado los diferentes bordes alrededor del lado, lo cual es bastante genial. Lo último que voy a hacer es añadir un degradado al color. Así que ahora mismo soy un color azul consistente. Y es importante que no importa lo que le dé una especie de color de fondo, que le gustaría ser utilizado, es el caso de que el gradiente no esté sucediendo. Pero ahora, para el gradiente lineal, simplemente estás dando dos colores que te gustaría ver y algo así como decir cuánto quieres al principio y al final. Así que de nuevo, tengo azul regular. Y ahora, cuando me refresco, paso de un azul a una especie de gris claro. Esto es genial y es un montón de código y es muy divertido jugar con él. Así que quiero recordarte que cuando te desarrolles, no intentes memorizar las cosas. No intentes recordar cómo hacer todo. Voy a hacer clic derecho aquí, y hacer Inspeccionar Elemento. Porque si más tarde decides que es demasiado curva, o no te gusta ese color, lo que no quieres hacer es escribir, guardar, actualizar, escribir, guardar, actualizar. Se pone muy molesto. Así que en su lugar, voy a ir aquí a mi sección y voy a mirar, y pueden ver en Inspect Element que dijo que no usé el prefijo moz, y no usé el prefijo Opera, porque no necesitaba hacerlo. Soy Chrome. Lo que puedo hacer es venir aquí al radio fronterizo y cambiarlo. En lugar de 25 píxeles, si quiero menos de una curva, puedo hacerlo 5 píxeles. Puedes verlo sucediendo en tiempo real. Si quieres que parezca una locura, puedes hacerlo 50 píxeles. También puede usar porcentajes si lo desea. Así que voy a seguir adelante y poner en el 15%. Así que es un poco para jugar con todo esto dinámicamente y luego, una vez que obtenga un valor que realmente te gusta, cópielo y colóquelo en su archivo CSS. Así que los prefijos del navegador son algo para jugar que puede ser divertido. Puede ser frustrante. Pero lo más importante es que te des cuenta de que es muy sencillo. Una de las cosas que puede hacer mientras agrega prefijos es que, por ahora, lo más fácil que puede hacer es agregar esos prefijos a mano. Ponga en la propiedad que quiere poner, digamos radio fronterizo. Y luego entra y agrega webkit, moz, las diferentes cosas como esa. Cuando empieces a usar prefijos, lo que vas a hacer es añadirlos a mano. Si sabes que tienes límite de radio, vas a seguir adelante y hacer border-radius y luego agregar ese moz, el webkit, diferentes cosas como ésas a mano. A medida que adquieres más experiencia y tal vez quieras probar cosas diferentes, hay maneras de automatizar la adición de esos prefijos. Si estás usando un editor como Sublime, puedes poner pequeños paquetes allí donde puedes controlar si quieres que Sublime agregue esos paquetes cada vez que vean diferentes propiedades. También puede usar programas externos que cambiarán dinámicamente el código a medida que las personas lo carguen para poner solo los prefijos que necesitan. Si recuerdas en mi ejemplo, a pesar de que estaba usando Chrome, mi hoja de estilo todavía tenía todos los prefijos diferentes. Esto automáticamente solo agregaría los que necesita. Una vez más, estos son geniales, pero no nos preocupemos por ellos en este momento. Por ahora, centrémonos en lo básico. Por lo tanto, para revisar, cuando empiece a codificar, cuando empiece a crear hojas de estilo, va a querer pensar en usar una hoja de estilos predeterminada para eliminar esas diferencias estilísticas. Y cuando hagas eso, necesito que pienses en algunas cosas. Entonces, primero, ¿debería esa hoja de estilos predeterminada ser interna o externa? Y con suerte todos dijeron externo. Porque si es interno, va a anular todas las otras cosas por las que has trabajado tan duro. De la misma manera, cuando coloques un vínculo a tu hoja de estilos predeterminada, asegúrate de que sea el primero. Porque la forma en que funcionan los navegadores es que va hoja de estilo, hoja de estilo, hoja de estilo. Así que si pones la tuya primero y luego la hoja de estilo predeterminada, va a sobrescribir todo lo genial que has hecho hasta ahora. Por último, recuerde que los prefijos del navegador pueden ayudar a eliminar algunas de esas diferencias causadas por opciones no compatibles. Pero no quieres usarla en exceso. No ponga un prefijo en cada propiedad solo porque no esté seguro. En su lugar, quieres ir a esos sitios como puedo usar y probarlo y realmente hacer una suposición educada sobre si quieres o no usarlo. Realmente estás llegando lejos en toda esta idea de desarrollo web. Y espero que estés diseñando algunas páginas realmente geniales. Y quiero que seas capaz de usar todas las diferentes propiedades que hay por ahí. Así que no se deje intimidar por la idea de que puede que tenga que usar hojas de estilo que no haya escrito o que tenga que usar prefijos del navegador. Tienes esto totalmente y sé que puedes codificar usando estas diferentes herramientas. Así que buena suerte.