{"id":951,"date":"2012-05-30T11:42:18","date_gmt":"2012-05-30T10:42:18","guid":{"rendered":"https:\/\/blogs.ua.es\/pi\/?p=951"},"modified":"2012-05-30T11:46:13","modified_gmt":"2012-05-30T10:46:13","slug":"fluye-con-css-no-luches-contra-el","status":"publish","type":"post","link":"https:\/\/blogs.ua.es\/pi\/2012\/05\/30\/fluye-con-css-no-luches-contra-el\/","title":{"rendered":"Fluye con CSS, no luches contra \u00e9l"},"content":{"rendered":"<p>\u00bfPor qu\u00e9 muchas veces las p\u00e1ginas no se visualizan con CSS de la forma que esperamos? \u00bfPor qu\u00e9 a veces nos cuesta tanto lograr el dise\u00f1o que queremos con CSS?<\/p>\n<p>Muchas veces es porque no sabemos utilizar bien CSS, pero muchas otras veces es porque vamos contracorriente, intentamos hacer cosas en contra de la filosof\u00eda del funcionamiento de CSS.<\/p>\n<p>Acabo de leer el art\u00edculo <a href=\"http:\/\/www.stubbornella.org\/content\/2012\/05\/02\/cross-browser-debugging-css\/\">Cross-Browser Debugging CSS<\/a>. Me ha llamado la atenci\u00f3n una frase, que me recuerda al <em>&#8220;Be water my friend&#8221;<\/em> de Bruce Lee:<\/p>\n<p>[kml_flashembed movie=&#8221;http:\/\/www.youtube.com\/v\/7ijCSu87I9k&#8221; width=&#8221;640&#8243; height=&#8221;360&#8243; wmode=&#8221;transparent&#8221; \/]<\/p>\n<p>La frase es:<\/p>\n<blockquote><p>\u00a0Work with CSS, not against it.<\/p><\/blockquote>\n<p>Una traducci\u00f3n literal ser\u00eda &#8220;Trabaja con CSS, no contra \u00e9l&#8221;, aunque a m\u00ed me gusta m\u00e1s <strong>&#8220;Fluye con CSS, no luches contra \u00e9l&#8221;<\/strong>. Porque adem\u00e1s, muchos dise\u00f1adores web se olvidan de que la Web es un medio d\u00factil, maleable, en el que los dise\u00f1os tienen que fluir (por algo se habla de dise\u00f1o l\u00edquido o fluido); la Web no es un medio r\u00edgido, fijo, como el papel (dise\u00f1o fijo).<\/p>\n<p>El art\u00edculo cuenta muchas cosas muy interesantes:<\/p>\n<ol>\n<li>Escribe c\u00f3digo para un buen navegador, por ejemplo, Google Chrome, desde el principio.<\/li>\n<li>Verifica t\u00fa p\u00e1gina con otro buen navegador, como Safari o Mozilla Firefox, si hay discrepancias, lo m\u00e1s seguro es que est\u00e9s haciendo algo en contra de CSS. Averigua la raz\u00f3n, por ejemplo:<\/li>\n<ol>\n<li>HTML incorrecto.<\/li>\n<li>Verifica tu CSS con <a href=\"http:\/\/csslint.net\/\">CSS Lint<\/a>.<\/li>\n<li>\u00bfHas normalizado\/reseteado los estilos para comenzar desde un mismo punto?<\/li>\n<li>\u00bfEst\u00e1s usando propiedades avanzadas que no se soportan de la misma forma?<\/li>\n<li>Cuidado con el posicionamiento absoluto.<\/li>\n<li>\u00bfTe est\u00e1 afectado el espacio en blanco?<\/li>\n<li>Errores de redondeo en los c\u00e1lculos de las dimensiones.<\/li>\n<\/ol>\n<\/ol>\n<p>El mensaje m\u00e1s importante que se transmite en el art\u00edculo es que <strong>el comportamiento ante un error no est\u00e1 definido en la especificaci\u00f3n<\/strong>, es decir, cuando en un CSS hay un error, ya sea de escritura (por ejemplo, un valor para una propiedad no adecuado) o de uso (utilizar una propiedad en un contexto que no se deber\u00eda hacer), cada navegador har\u00e1 lo que le de la gana. Esto coincide con los v\u00eddeos que publiqu\u00e9 sobre <a href=\"https:\/\/blogs.ua.es\/pi\/2009\/10\/26\/%c2%bfpor-que-escribir-html-valido-es-importante\/\">\u00bfPor qu\u00e9 escribir HTML v\u00e1lido es importante?<\/a><\/p>\n<p>El resto del art\u00edculo, \u00a1casi la mitad del art\u00edculo!, se dedica a los apa\u00f1os y chapuzas que hay que hacer para solventar los problemas (no s\u00f3lo discrepancias en la forma de interpretar algunas propiedades, sino verdaderos <em>bugs<\/em>) que tienen las distintas versiones del navegador Internet Explorer. Una verdadera verg\u00fcenza, una p\u00e9rdida de tiempo impresionante por un navegador que no deber\u00eda considerarse como tal.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00bfPor qu\u00e9 muchas veces las p\u00e1ginas no se visualizan con CSS de la forma que esperamos? \u00bfPor qu\u00e9 a veces nos cuesta tanto lograr el dise\u00f1o que queremos con CSS? Muchas veces es porque no sabemos utilizar bien CSS, pero &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"more-link\" href=\"https:\/\/blogs.ua.es\/pi\/2012\/05\/30\/fluye-con-css-no-luches-contra-el\/\"> <span class=\"screen-reader-text\">Fluye con CSS, no luches contra \u00e9l<\/span> Leer M\u00e1s  &raquo;<\/a><\/p>\n","protected":false},"author":40,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[2765,411],"class_list":["post-951","post","type-post","status-publish","format-standard","hentry","category-general","tag-css","tag-video"],"_links":{"self":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/951","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/users\/40"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/comments?post=951"}],"version-history":[{"count":4,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/951\/revisions"}],"predecessor-version":[{"id":955,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/posts\/951\/revisions\/955"}],"wp:attachment":[{"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/media?parent=951"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/categories?post=951"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.ua.es\/pi\/wp-json\/wp\/v2\/tags?post=951"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}