{"id":2020,"date":"2006-01-23T08:49:37","date_gmt":"2006-01-23T16:49:37","guid":{"rendered":"http:\/\/localhost\/xylescope"},"modified":"2015-10-29T19:45:50","modified_gmt":"2015-10-30T02:45:50","slug":"xylescope","status":"publish","type":"post","link":"https:\/\/needmoredesigns.com\/xylescope\/","title":{"rendered":"Xyle scope"},"content":{"rendered":"<p>In a comment to <a href=\"\/notes\/238\/safaris-web-inspector\">a post<\/a> last week, our friend <a href=\"http:\/\/brainfag.com\/\">Nate Beaty<\/a> recommended we take a look at a program called <a href=\"http:\/\/culturedcode.com\/xyle\/index.html\">Xyle scope<\/a>. Glad we did!<\/p>\n<p><strong>Xyle scope<\/strong> is a tool for examining, analyzing, and tuning CSS. This is definitely a brilliant tool for anyone writing complex web pages with lots of complicated style sheet code. I actually remember trying this program out some time ago, but I didn\u2019t love it at the time because of two major problems.<\/p>\n<p>First, you have to have a wide display. On my 12\u201d PowerBook, it\u2019s worthless, because you need to be able to basically show two web pages side by side. That\u2019s the computer I first tried it out with, and that explains why the utility eluded me.<\/p>\n<p>Second, I didn\u2019t understand the <em>modes<\/em> of the program. It has a mode where it acts like a regular web browser, and all of the CSS details are available for examination on the right side of the window. That\u2019s nice, but it\u2019s nowhere near as helpful as switching into <em>selection mode<\/em>. When you\u2019re in selection mode you can click on page elements and the CSS details and inheritance hierarchy are shown on the right. Plus, the element\u2019s margins and padding are shown visually on the page. Eureka!<\/p>\n<p>Xyle scope is a great tool, but only if you have a rather wide computer display. Give it a try \u2013 it\u2019s well worth the $15 they are currently charging for it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is definitely a brilliant tool for anyone writing complex web pages with lots of complicated style sheet code. <\/p>\n","protected":false},"author":2,"featured_media":9292,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[60],"acf":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/needmoredesigns.com\/wp-content\/uploads\/0-9\/8866585_ef3663efc3_b.jpg","_links":{"self":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/2020"}],"collection":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/comments?post=2020"}],"version-history":[{"count":0,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/posts\/2020\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media\/9292"}],"wp:attachment":[{"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/media?parent=2020"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/categories?post=2020"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/needmoredesigns.com\/wp-json\/wp\/v2\/tags?post=2020"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}