{"id":118,"date":"2013-01-10T20:56:19","date_gmt":"2013-01-10T19:56:19","guid":{"rendered":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/?p=118"},"modified":"2018-10-21T16:29:00","modified_gmt":"2018-10-21T15:29:00","slug":"cross-browser","status":"publish","type":"post","link":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/cross-browser\/","title":{"rendered":"\u00abCross-browser\u00bb"},"content":{"rendered":"<p>[\u00daltima actualizaci\u00f3n: 21\/10\/2018]<\/p>\n<p>Dada la inmensa variedad de navegadores que existen en el mercado, es extremadamente complicado que una p\u00e1gina se vea igual en todos ellos. En ocasiones, eso es deseable: en general no querremos que una p\u00e1gina se vea igual en un navegador &#8216;de escritorio&#8217; que en la pantalla de un m\u00f3vil, pero en general querremos que, como m\u00ednimo, toda la funcionalidad est\u00e9 disponible para todos los navegadores y que se conserve un aspecto tan homog\u00e9neo como sea posible independientemente del navegador que usemos.<\/p>\n<p>Existen diversas filosof\u00edas sobre el tema, como la <i>graceful degradation<\/i> (que propone dise\u00f1ar para los navegadores m\u00e1s potentes y asegurar que toda la funcionalidad est\u00e1 disponible para todos los navegadores) o el <i>progressive enhancement<\/i> (dise\u00f1amos para los navegadores m\u00e1s b\u00e1sicos y a\u00f1adimos despu\u00e9s, en capas, las funcionalidades m\u00e1s sofisticadas para navegadores m\u00e1s potentes).<\/p>\n<p>Pod\u00e9is leer, sobre el tema, <cite><a href=\"https:\/\/medium.com\/@julienetienne\/define-graceful-degradation-progressive-enhancement-faf242a8ed51\">Define Graceful Degradation &amp; Progressive Enhancement<\/a> de <em>Julien Etienne<\/em><\/cite>. Y otro documento muy interesante es <a title=\"Graded Browser Support - YUI Library\" href=\"http:\/\/yuilibrary.com\/yui\/docs\/tutorials\/gbs\/\">Graded Browser Support<\/a>, propuesto inicialmente por Yahoo!.<\/p>\n<p>Y naturalmente, hoy todo se combina con la necesidad de tener en cuenta temas como el <a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/ca\/responsive\/\">responsive design<\/a> y filosof\u00edas como el <i>mobile first<\/i>, que propone que es mejor comenzar pensando en m\u00f3viles y despu\u00e9s &#8216;crecer&#8217; a pantallas y dispositivos m\u00e1s grandes y probablemente m\u00e1s potentes, aunque todas las aproximaciones al tema presentan dificultades importantes.<\/p>\n<p>Un recurso imprescindible en que se documenta el soporte de las diferentes versiones de los diferentes navegadores tradicionales (entendiendo por tradicionales aquellos que corren sobre ordenadores con sistemas operativos Windows, OS X o Linux) para las diferentes funcionalidades de CSS es <a title=\"Can I use... Support tables for HTML5, CSS3, etc\" href=\"https:\/\/caniuse.com\/\">Can I use<\/a>. Cuenta con un equivalente para navegadores para dispositivos: <a title=\"Mobile HTML5 - compatibility on iPhone, Android, Windows Phone, BlackBerry, Symbian and other mobile and tablet devices\" href=\"http:\/\/mobilehtml5.org\/\">Mobile HTML5<\/a>.<\/p>\n<h2>Polyfills<\/h2>\n<p>Una herramienta a tener muy en cuenta para poder ofrecer caracter\u00edsticas sofisticadas y no presentes en todos los navegadores son los \u00abpolyfills\u00bb, bibliotecas de JavaScript que podemos cargar si el navegador no soporta de manera nativa alguna caracter\u00edstica que nos resulta necesaria, y emularla a trav\u00e9s de la biblioteca, de manera transparente. De todas formas, deben usarse con cuidado y con moderaci\u00f3n, porque comportan efectos secundarios, como un efecto potencialmente muy negativo sobre la velocidad con que los navegadores pueden mostrar la p\u00e1gina que hemos creado.<\/p>\n<p>Bibliotecas como <a title=\"html5shiv - HTML5 IE enabling script - Google Project Hosting\" href=\"http:\/\/code.google.com\/p\/html5shiv\/\">html5shiv<\/a> a\u00f1aden soporte para los elementos de HTML5 a las versiones de Internet Explorer que no lo tienen por defecto (esto es, en general, las versiones 6, 7 y 8). Existen alternativas m\u00e1s sofisticadas, como <a title=\"Modernizr: the feature detection library for HTML5\/CSS3\" href=\"http:\/\/modernizr.com\/\">Modernizr<\/a>, que permiten detectar qu\u00e9 soporte para caracter\u00edsticas de HTML5 y CSS3 tiene el navegador en que se est\u00e1 visualizando una p\u00e1gina web.<\/p>\n<p>Algunos &#8216;polyfills&#8217; a tener en cuenta:<\/p>\n<ul>\n<li><a href=\"http:\/\/adobe-webplatform.github.com\/css-regions-polyfill\/\">CSSRegions.js<\/a> es un polyfill experimental para ofrecer soporte para <a href=\"http:\/\/www.w3.org\/TR\/css3-regions\/\">regiones CSS<\/a> a aquellos navegadores que no cuentan con \u00e9l.<\/li>\n<li><a href=\"https:\/\/github.com\/doctyper\/flexie\">Flexie<\/a> da soporte <i>cross-browser<\/i> para el modelo de cajas flexibles (o <i>flexible box model<\/i>), aunque utilizando una sintaxis antigua (<a title=\"Using Flexbox: Mixing Old and New for the Best Browser Support | CSS-Tricks\" href=\"http:\/\/css-tricks.com\/using-flexbox\/\">m\u00e1s informaci\u00f3n<\/a>).<\/li>\n<li><a href=\"https:\/\/github.com\/Schepp\/CSS-Filters-Polyfill\">Polyfilter<\/a> toma la sintaxis oficial de <a href=\"https:\/\/dvcs.w3.org\/hg\/FXTF\/raw-file\/tip\/filters\/index.html\">filtros CSS<\/a> y la traduce a diferentes t\u00e9cnicas equivalentes seg\u00fan el navegador sobre el que est\u00e9 funcionando.<\/li>\n<li><a href=\"https:\/\/code.google.com\/p\/ie7-js\/\">ie7-js<\/a>, <a href=\"http:\/\/selectivizr.com\/\">Selectivizr<\/a> y <a href=\"http:\/\/css3pie.com\/\">CSS3 PIE<\/a> se dirigen espec\u00edficamente a versiones antiguas de Internet Explorer y resuelven bastantes de sus carencias con respecto a los est\u00e1ndares m\u00e1s modernos.<\/li>\n<\/ul>\n<p>Otro recurso a tener en cuenta son los &#8216;hacks&#8217;, trampas que explotan inconsistencias en el manejo de determinadas sentencias por parte de los navegadores para pasar determinado CSS en exclusiva a determinados navegadores. Una buena documentaci\u00f3n sobre el tema puede consultarse en <a title=\"Browserhacks\" href=\"http:\/\/browserhacks.com\/\">Browserhacks<\/a>.<\/p>\n<hr \/>\n<p><a href=\"http:\/\/adactio.com\/journal\/5964\/\">Dealing with IE <\/a> (Jeremy Keith, 9 de enero, 2013)<\/p>\n<h2>Cuota de mercado<\/h2>\n<p><a href=\"http:\/\/arstechnica.com\/information-technology\/2013\/03\/chrome-hits-17-month-low-windows-8-still-only-creeping-upward\/\">Chrome hits 17-month low, Windows 8 still only creeping upward<\/a> (Ars Technica, 2 de marzo de 2013. Hay que tener en cuenta, por un lado, que se trata de un estudio de mercado, como siempre en estos casos y, por otro lado, que tiene en cuenta a todo el planeta.)<\/p>\n<p><a href=\"http:\/\/www.sitepoint.com\/browser-trends-october-2014-back-work\/\">Browser Trends October 2014<\/a> (Sitepoint, octubre de 2014)<\/p>\n<p><a href=\"https:\/\/en.wikipedia.org\/wiki\/Usage_share_of_web_browsers\">Usage share of web browsers<\/a> (Wikipedia, 2018)<\/p>","protected":false},"excerpt":{"rendered":"<p>[\u00daltima actualizaci\u00f3n: 21\/10\/2018] Dada la inmensa variedad de navegadores que existen en el mercado, es extremadamente complicado que una p\u00e1gina se vea igual en todos ellos. En ocasiones, eso es deseable: en general no querremos que una p\u00e1gina se vea igual en un navegador &#8216;de escritorio&#8217; que en la pantalla de un m\u00f3vil, pero en &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/css\/cross-browser\/\" class=\"more-link\">Seguir leyendo<span class=\"screen-reader-text\"> \u00ab\u00abCross-browser\u00bb\u00bb<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[],"class_list":["post-118","post","type-post","status-publish","format-standard","hentry","category-css","category-html","entry"],"_links":{"self":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/118","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/comments?post=118"}],"version-history":[{"count":26,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/118\/revisions"}],"predecessor-version":[{"id":471,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/posts\/118\/revisions\/471"}],"wp:attachment":[{"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/media?parent=118"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/categories?post=118"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/multimedia.uoc.edu\/blogs\/htmlcss\/wp-json\/wp\/v2\/tags?post=118"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}