Tag Archives: css

How does CodeKit inject CSS changes without refreshing the browser?

CodeKit is a nice little app for web development which does things like processing LESS into CSS and minifying javascript. It has one feature that is perplexing: “Inject CSS changes without a full reload” It’s in the app’s preferences menu: What it does: When you’re editing a CSS file and have a page that is using that CSS file open in your web browser, CodeKit watches for changes to the file and pushes the new CSS styles into the browser without doing a page reload. I didn’t have to install any plugins into Chrome and I don’t see any in the Extensions manager for chrome, but somehow it works. How is this possible? I do notice that after several CSS tweaks the browser will start to slow down and become unresponsive unless I refresh the page. The Answer? It uses CSSRefresh: http://cssrefresh.frebsite.nl/ Update Looks like CodeKit is now using Live.js (http://www.livejs.com/) instead of CSSRefresh   Found the actual javascript that Codekit is using: (function () { var e = {}, t = {}, n = 0, r = { refreshStylesheets: function () { function i(e) { var t = document.location, n = new RegExp(“^\\.|^/(?!/)|^[\\w]((?!://).)*$|” + t.protocol + “//” + t.host); return e.match(n) } var n = document.getElementsByTagName(“head”)[0], r = document.getElementById(“LPCodeKitLiveTransitionRule”); r && n.removeChild(r); var s = document.styleSheets, o = document.styleSheets.length; for (var u = 0; u < o; u++) { var a = s[u]; if (!a) continue; var f = a.media.mediaText, l = f.search(/print/i); if (l !== -1) continue; var … Continue reading

Posted in Design, Tech Tips, Web Development | Tagged , , , , , | 1 Comment

IE6/IE7 form element margin inheritance bug

This was a repost of content found on the netscapes blog. It is no longer available (to the best of my knowledge) so I am making it available here: Today I ran across an IE6/7 (and who knows, probably IE5 too) margin inheritance bug, involving block elements with IE’s hasLayout property triggered, that contain certain form elements. This bug appears to have very little online documentation or discussion. (UPDATE: now documented by positioniseverything, see links section below). Any side margins (the blue 100px) applied to block-level hasLayout elements will be erroneously inherited (the red 100px) by text, submit, button and textarea fields contained within the block elements. Select boxes, checkboxes & radio buttons are not affected. Applying margin: 0 to the input or textarea fields has no effect. All your margin are belong to us. Here is my test page » If your design does not have a border on the block-level element, this bug has the identical visual effect as the well-known IE6 floated element/margin-doubling bug, but the real cause is not the IE6 margin-doubling bug. I found this issue having just installed IE7, still giddy over the wide array of css fixes. For a few minutes, I thought maybe the IE team had forgotten to fix the float/margin-doubling bug with blockified labels, but no.. this margin inheritance bug is an entirely different beast. My findings are a little different from the other information I found (at the time of this post, the only existing explanation of this bug … Continue reading

Posted in Design, Web Development | Tagged , | Leave a comment

Style WordPress with CSS

clipped from en.wordpress.com The CSS Editor allows the blog administrator to modify the visual style of the blog. While the theme’s HTML cannot be modified, Custom CSS gives you the power to make your own design. If you haven’t found your ideal theme on WordPress.com, Custom CSS is for you. The CSS Editor can be found under Edit CSS in the Presentation tab of your dashboard. It consists of a blank area for typing and two buttons: You can edit your CSS and preview the changes without affecting the public view of the blog while experimenting with new styles. In order to save your CSS changes and publish them to your blog, you need to purchase the Custom CSS upgrade. You can edit and save your stylesheet as often as you like; you can use uploaded images as backgrounds; you can modify an existing theme or start from scratch with the Sandbox theme. There is a CSS Customization forum where you can ask for help or give assistance to others.

Posted in Design | Tagged , , , | Leave a comment