atom.xml

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">

  <title><![CDATA[Web Development | Divya Manian]]></title>
  <link href="http://nimbupani.github.com/categories/web-development/atom.xml" rel="self"/>
  <link href="http://nimbupani.github.com/"/>
  <updated>2011-12-12T08:23:07-08:00</updated>
  <id>http://nimbupani.github.com/</id>
  <author>
    <name><![CDATA[Divya Manian]]></name>
    
  </author>
  <generator uri="http://octopress.org/">Octopress</generator>

  
  <entry>
    <title type="html"><![CDATA[Redesign Notes]]></title>
    <link href="http://nimbupani.github.com/redesign-notes.html"/>
    <updated>2011-12-11T04:51:00-08:00</updated>
    <id>http://nimbupani.github.com/redesign-notes</id>
    <content type="html"><![CDATA[<p>This site sports a refresh. Here is a list of what is different now:</p>

<ul>
<li>Runs on <a href="http://octopress.org">Octopress</a>.</li>
<li>Hosted on <a href="http://github.com">Github</a>.</li>
<li>Anyone can submit updates for any post with a pull request.</li>
<li><a href="http://disqus.com">Disqus</a> comments (with threading!)</li>
<li>No more categories except <a href="/categories/web-development">Web Development</a>.</li>
<li>Based on <a href="http://h5bp.com">HTML5Boilerplate</a> (obviously).</li>
<li>Keyboard navigation! Press left/right arrow for previous/next page.</li>
</ul>


<h3>Why</h3>

<p>I have been wanting to move to a static site for several months because there were several things that annoyed me about Drupal (or any other CMS systems):</p>

<ul>
<li>Lack of out of the box version control.</li>
<li>Unnecessary security nightmare with MySQL.</li>
<li>Loading of needless large resources just because the admin interfaces require it (<code>drupal.js</code> &amp; <code>drupal.css</code> I am looking at you).</li>
<li>No way to collaborate or have others edit my mistakes (other than in comments).</li>
<li>Dependence on several modules which go out of date when a new version comes along.</li>
<li>Ceaseless updating of modules and versions.</li>
<li>PHP (white screen of death anyone)!?!</li>
<li>Poor spam filtering.</li>
<li>Painful backup of database and none for the layout and design.</li>
<li><code>.htaccess</code> drama</li>
</ul>


<p>It was not until <a href="http://thecssninja.com">Ryan Seddon</a> pointed me to the documentation on <a href="https://github.com/mojombo/jekyll/wiki/blog-migrations">migrating from Drupal</a> that this even became feasible. Sadly, the script does not generate categories for the exported markdown files. Fortunately, I used this opportunity to disband the idea of categories all-together and just manually edit whichever post fitted best into <a href="/categories/web-development/">Web Development</a> as that typically has been what most visitors look for.</p>

<p>Later, <a href="http://rmurphey.com">Rebecca Murphey</a> moved her site to Octopress which seemed to be a nice wrapper around Jekyll and the migration seemed much less work than before. The most tedious process in migrating content from 2003 onwards was the export of the blog posts from Drupal, and making the Disqus comments work.</p>

<h3>Disqus</h3>

<p>Disqus offers a path for Wordpress users though, but for Drupal you would need to provide an XML file to import from. The good news is the new <a href="http://drupal.org/node/1349010#comment-5275640">Disqus module does that exactly</a> (you need to look under <code>Admin/Content Management/Comments</code> to find the export function). You can use any Disqus identifier, but the easiest method seems to be to use the unique url of each post.</p>

<p>The bad news is that unique url that Disqus module uses is the original Drupal path (e.g. <code>node/1</code>) which is useful if you are sticking with Drupal, but useless if you are using another system. Luckily for me, it also includes the path alias of the original post in <code>disqus_url</code> field for each comment, so it would simply be a matter of finding value of <code>disqus_url</code> in each comment, and replace the value of Disqus identifier with it – which is easy to do by executing a regular expression search and replace on the XML file.</p>

<h3>Github Setup</h3>

<p>Source files used to generate the site are stored in a branch called <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/">source</a> and the generated files are required to be on the master branch. Octopress provides a <a href="http://octopress.org/docs/deploying/github/">rake interface for you to setup your github pages</a> as you wish.</p>

<p>You also need a CNAME record that has the domain name that will point to Github. If it is a top level domain, you need to also set up an A Record on your DNS, otherwise creating a CNAME record on your DNS should be sufficient.</p>

<p>The most annoying thing is I cannot set the default branch for Pull Requests alone on Github (as they need to be made on the source branch), so for now you would have to change the branch of the remote to source manually for the pull request to go through.</p>

<h3>Jekyll</h3>

<p>If you are using Octopress, you most likely needn’t worry about fiddling with Jekyll other than setting variables in <code>_config.yaml</code> file. Any variables you declare there are available for you site-wide for use in your Jekyll templates. So, it was easy to <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/_config.yml#L45">set a github url</a> to create the 'submit pull request' url you see below each post.</p>

<p>Jekyll does not, by default, paginate the archives. But the same code used to render pagination on the default home page <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/archives/index.html">can be used to do so</a>. The Category archives page is rendered by an Octopress Jekyll plugin and is not paginated (I am sure it is possible, but slightly more tedious).</p>

<p>Jekyll provides an XML feed at <code>atom.xml</code> and Octopress helpfully provides an XML feed with the categories plugin for your category listing. Octopress also makes it easy for you to set your feed urls to Feedburner. Just remember to point your Feedburner urls to these atom feeds!</p>

<h3>Liquid</h3>

<p><a href="https://github.com/Shopify/liquid">Liquid</a> is the templating engine used by Jekyll. It looks pleasing and has a small set of manipulations you can do with it out of the box. I really like the simple filters that let you <a href="https://github.com/Shopify/liquid/wiki/Liquid-for-Designers">manipulate values by simply piping them through filters</a> (there is a <a href="http://cheat.markdunkley.com/">lovely cheat sheet</a> too). There is no way you can get the filename of the markdown file used to create a post within Jekyll, so I had to recreate it using Liquid filters: <code>"-"</code>.</p>

<p>It is not quite as clean as I thought it would be, to render the latest post on the homepage while reusing the same post template. Basically, each post renders in a page and hence the data is available as <code>page.url</code> or <code>page.date</code>. However, home page is itself a page which renders a list of posts (in this case just one), hence I had to set a variable <code>post</code> and make that point to the latest one (<code>site.posts.latest</code>). This meant, any of the variables need to be rendered irrespective of whether they are <code>post.url</code> or <code>page.url</code>, which meant <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_includes/post_detail.html">several <code>if/else</code> statements</a>. I think this is better than replicating the same template twice, and having one go out of sync with the other.</p>

<h3>Design</h3>

<p>Octopress offers a base layout/design which I found too complicated to work with. I ended up replacing most of the Sass files (have not indulged my whim on the architecture of the layout templates). I have an <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/sass/base/_extends.scss"><code>_extends.scss</code></a> to store all <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend">my extend rules</a>, and a <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/sass/base/_vars.scss"><code>_vars.scss</code></a> to store variables. I had to override a few disqus styles, so they went into their own scss file (with dirty <code>!important</code> at the end of each declaration!)</p>

<p>I was happy with the architecture of the older design, which is why nothing has changed significantly. I did want the previous/next links to be located at a fixed location and provide very basic navigation on top.</p>

<h3>Performance</h3>

<p>Lack of PHP and MySQL has made this page render in about 1s compared to 2.6s previously. I also don't have frivolous resources loading which makes it better.</p>

<h3>Complaints</h3>

<p>I am overall very satisfied with Octopress, and am so glad <a href="http://imathis.com">Brandon Mathis</a> created it. Only niggling complaint I have is that the rake deployment script takes <em>years</em> to run. You could use <code>rake isolate[filename]</code> and subsequent <code>rake integrate</code> to make this faster. But I wish it were the case automatically.</p>

<p>Creating a new post is easy, but finding it in the 100s of posts I have to write it is a pain. I suspect I could add a <code>mate &lt;filename&gt;</code> to the <code>rake new_post</code> script which would make that easier.</p>

<h3>Future</h3>

<p>This site is a work in progress. I have some outstanding <a href="https://github.com/nimbupani/nimbupani.github.com/issues/1">to-dos</a> that I hope to get to soon. I do want to use this site to experiment with learning new languages/technologies, so anything you think would be an interesting idea to pursue, please <a href="https://github.com/nimbupani/nimbupani.github.com/issues/new">suggest</a>!</p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Summary of various exciting CSS drafts and proposals]]></title>
    <link href="http://nimbupani.github.com/summary-of-various-exciting-css-drafts-and-proposals.html"/>
    <updated>2011-12-10T18:51:00-08:00</updated>
    <id>http://nimbupani.github.com/summary-of-various-exciting-css-drafts-and-proposals</id>
    <content type="html"><![CDATA[<p>I will be attending my first ever <a href="http://lists.w3.org/Archives/Public/www-style/2011Jun/0593.html">CSS</a> Working Group Face to Face Meeting starting this Sunday, and I wanted to be at least up-to-speed on all the drafts that will be up for discussion. So, in the interest of not letting a few hours spent understanding some of them go to waste, here is a brief summary of each of these drafts and some of the concerns that will be discussed during the meeting.</p>

<p>You could probably look out for updates on the meeting <a href="http://twitter.com/csswg">@csswg</a></p>

<h3><a href="http://dev.w3.org/csswg/css3-regions/">CSS Regions</a></h3>


<p>This spec, from my understanding, is a way to define how content flows like in Adobe InDesign or Illustrator. Basically you can take content from a set of elements (by using the property <code>flow: &lt;nameoftheregion></code>) and make that render on a set of other elements (called  <em>regions</em>) which act as a container for that content using the <code>content: from-flow()</code>. If the container have content, those will be replaced by the content set using the  <code>content</code> property. This is controlled by using what is called as <em>named flow</em>. You control which elements belong to a flow using the <code>flow</code> property.</p>

<pre><code>.contentthatflows { flow: newspaper-region; }

.region1-1, .region1-2 { content: from-flow(newspaper-region); }
</code></pre>

<p>The content rendered within <code>.region1-1</code> and <code>.region1-2</code> will render with styles specified for <code>.region1-1</code> and <code>.region1-2</code> and will not use the styles of the element they belong to.</p>

<p>Sometimes, content can straddle two or more such regions within the same flow. There is no clear way to adjust the styles of such content belonging to a single flow, so we use a pseudo-element called <code>::region-lines</code> . This property has been much debated and would be the subject of the debate at the CSS Face-to-face too.</p>

<p>There is also a skeletal interface to access which region an element is part of which might be fleshed out further in the Face-to-face meeting.</p>

<h3><a href="http://www.interoperabilitybridges.com/css3-floats/"> <span class="caps">CSS3</span> Floats </a></h3>


<p></p>

<p> Expands on floats to make float possible with positioning and wrap text content around the positioned element. However this conflates floats with positioning (if you want wrapping on elements, you need to set <code>float: positioned</code> and use <code>top</code> , <code>left</code> , <code>position</code> to control the location of the wrapped element) </p>


<p> <p> The properties for controlling the wrapping is similar to those in the <span class="caps">CSS</span> Exclusions proposal - <code>wrap-type</code> (vs <code>wrap-shape-mode</code> ), <code>wrap-shape</code> (same), <code>wrap-image</code> (vs <code>wrap-shape-image</code> ), <code>wrap-image-threshold</code> (vs <code>wrap-shape-image-threshold</code> ), <code>wrap-margin</code> (vs <code>wrap-shape-margin</code> ), <code>wrap-padding</code> (vs <code>wrap-shape-padding</code> ). It seems to me that these two proposals need to be merged or the scope of one of them changed significantly so there are no conflicts. From the <a href="http://wiki.csswg.org/ideas/css3-floats-use-cases">Wrap use cases</a> , personally I like the approach of <span class="caps">CSS</span> Exclusions which seems cleaner for all the use cases mentioned. </p></p>

<h3> <a href="http://dev.w3.org/csswg/css3-exclusions/"> <span class="caps">CSS3</span> Exclusions </a> </h3>


<p></p>

<p> This has been initially proposed by Adobe (along with <span class="caps">CSS3</span> Regions). The case for wrapping is separate from positioning or floats, and wrapping can occur on any box independent of where they are located or rendered. In addition you can also specify how each wrapping shape interacts with each other (depending on what you set for wrap-shape-order, you can set which wrapping shape will clip the other when they interact). </p>


<p> <p> I like this better than <span class="caps">CSS3</span> Floats because this is not related to how an element is positioned but merely impacts the wrapping. </p></p>

<p> Both <span class="caps">CSS3</span> Exclusions and <span class="caps">CSS3</span> Floats accept <a href="http://www.w3.org/TR/2010/WD-SVG11-20100622/shapes.html"> basic <span class="caps">SVG</span> shapes </a> as values for <code>wrap-image-shape</code> ( <code>wrap-image</code> ). Both specs have equivalent properties to the background property for the wrap image, which means you can have repeating image patterns that you can use for creating your wrap shape. </p>


<p> <p>Both specs also specify an interesting alpha channel threshold which can be used to determine the shape that needs to be generated from the wrap-image specified. </p> <h3> <a href="http://dev.w3.org/csswg/css3-flexbox/"> <span class="caps">CSS3</span> Flexbox </a> </h3> <p> This has been entirely re-written and is significantly different from current implementations. What it aims to do is to provide you with flexible layout of child elements and the space around them within a parent element that has a flexbox layout. You get started by specifying <code>display: flexbox</code> on the parent element and then specifying the order in which you want the child elements to be laid out (using flex-direction). All child elements (with display set to inline or anything) will follow this direction if nothing more is specified for each of them. You can also determine how the white-space that is left after following the order should be allocated (using flex-pack). </p></p>

<p>You can also specify the order in which the child elements should occur using flex-order. Each of these child elements can have widths or heights as a function called flex(), which takes in 3 values - the amount it can expand to, the amount it can contract to, the preferred length it should have. Browsers need to follow the free space allocation algorithm to make sure each of these element’s width/height match the values provided.</p>


<p> <p>This would be very useful for mobile apps where device diversity makes creating flexible but usable designs almost mandatory. Cant wait to see this implemented across all browsers!</p></p>

<h3> <a href="http://dev.w3.org/csswg/css3-grid-align/"> <span class="caps">CSS3</span> Grid Layout </a> </h3>


<p></p>

<p> This spec would allow authors to have complete control over placement of each element on the page in a grid. It introduces completely new properties to aligning elements and like flexbox layout you use a <code>display: grid</code> on the parent element to make all the child elements be part of a grid. So, you cannot have an element that can be both a flexbox or a grid at the same time (clearly makes no sense). Do note that only block elements can take part in a grid layout and be part of a grid. </p>


<p></p>

<p>The Grid layout lets you set complicated grids of elements. The flexbox merely allows you to set how flexible the element can be and where it can be placed within the parent element, but the grid layout lets you set which elements can be part of a grid cell (each grid is made up of grid cells, grid rows, and grid columns), and where within the grid cell should each element be placed (the layer order, and if they should span multiple grid cells), and how elements should be laid out when you do not specify which grid cells they belong to. </p>


<p> <p> The Grid layout can also be used in combination with <span class="caps">CSS</span> Regions such that grid cells that are selected to be part of a region can have text flowing through them (from another grid cell). Grid cells can be selected using ::grid-cell(‘cellname’) pseudo-element selector. </p></p>

<p> This spec is pretty well-defined, which is not surprising given <a href="http://msdn.microsoft.com/en-us/ie/hh272902#_CSSGrid"> we already have an implementation in <span class="caps">IE10</span> </a> . My only concern is the redefinition of the <code>fr</code> unit which has also been used to define a flex tuple in the CSS3 Flexbox spec which will discussed at the CSS Face-to-face. </p>


<p> <h3> <a href="http://dev.w3.org/csswg/css3-images/#gradients">Gradients</a> </h3> <p> While gradients are more or less determined, there is still a big discussion on how to render gradients with keywords (using <code>top left</code> , etc). Another concern with gradients has been the interpolation of colors (which currently results in ugly blackish interpolation such as this one on the left when you have one of the color stops as <code>transparent</code> ). </p></p>

<p> <img src="http://gyazo.com/9f995e0e98ba6c0dfbf71930dce4fb66.png"> <br> ( <a href="http://jsfiddle.net/nimbu/rK9Pd/">source</a> ) </p>


<p> <p> The meaning of premultiplied color spaces <a href="http://dev.w3.org/csswg/css3-images/#color-stop-syntax">has been clarified</a> (Opera already implements this - see the gradient on the right). </p></p>

<h3> <a href="http://dev.w3.org/csswg/cssom/"> <span class="caps">CSSOM</span> </a> </h3>


<p> <span class="caps">CSSOM</span> is the Document Object Model for <span class="caps">CSS</span> . It is an <span class="caps">API</span> thats allows you to access style rules, selectors, media queries, and the <span class="caps">CSS</span> used to render the styles on a page. This has previously not been specced which meant each browser could implement its own APIs for accessing stylesheets (and they did). Now, we have a comprehensive set of interfaces to access the styles from JavaScript. </p>


<p> <p> We already have parts of <span class="caps">CSSOM</span> implemented in various browsers (Opera 11.5+, <span class="caps">IE10</span> , Chrome, <span class="caps">FF5</span> ) though! </p> <p>Any questions you have that I can ask the Working Group about?</p></p>
]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[This revolution needs new revolutionaries]]></title>
    <link href="http://nimbupani.github.com/this-revolution-needs-new-revolutionaries.html"/>
    <updated>2011-05-21T00:00:00-07:00</updated>
    <id>http://nimbupani.github.com/this-revolution-needs-new-revolutionaries</id>
    <content type="html"><![CDATA[<p>In early 2000s, when the web was in its infancy, a great number of committed activists made Open Web Standards possible. They advocated, wrote the specifications, explained them to the masses, and contributed to the revolution of using W3C Specs on the web. I owe each of them my career as a Web Designer/developer.</p>




<p>Now, we are in the middle of another revolution. The web as we know it is changing significantly. The ways of doing, implementing and working with web pages have altered. Designing with the right semantic tags or using floats instead of tables are no longer the simple goals of a good web page. We need the pages to load quickly, use the faster newer CSS selectors and DOM APIs, and better ways to create animations, dynamic images, and dealing with how to design for a variety of devices that now have browsers. </p>




<p>The best way to be a part of the revolution is to BE the revolution, not talk ABOUT the revolution. A lot of recognized individuals seem to be doing the latter. To BE the revolution, you just need to look at what some of the people at the fore-front of it are doing: <a href="http://paulirish.com">Paul Irish</a> and <a href="http://farukat.es/">Faruk Ateş</a> have made the future accessible with <a href="http://modernizr.com">Modernizr</a>. <a href="http://peter.sh/">Peter Beverloo</a> created the <a href="http://peter.sh/category/last-week/">"Last Week in…"</a> series that has been re-adopted by <a href="http://www.w3.org/QA/archive/open_web/">W3C</a> and <a href="http://blog.whatwg.org/category/weekly-review">WHATWG</a> where you can keep up with the pace of creation and implementation of web specifications. <a href="http://www.scottjehl.com/">Scott Jehl</a> created <a href="https://github.com/scottjehl/Respond">Respond.js</a> which lets older browsers understand media queries, <a href="http://www.blog.highub.com/">Shi Chuan</a> made designing for multiple devices easy by exhaustive research for <a href="http://html5boilerplate.com/mobile/">HTML5 Mobile Boilerplate</a>. Jon Neal made practical use of HTML5 elements easy with <a href="http://www.iecss.com/print-protector/">IE Print Protector</a>. <a href="http://leaverou.me/">Lea Verou</a> has been <a href="http://leaverou.me/2010/07/organizing-a-university-course-on-modern-web-development/">teaching web development</a> and is the author of significant articles on web development. <a href="http://www.accessibleculture.org/">Jason Kiss</a> has been documenting how <a href="http://www.accessibleculture.org/research/html5-aria-2011/">HTML5 elements, ARIA work with different Screen readers</a> without much fanfare. <a href="http://nicolasgallagher.com/">Nicolas Gallagher</a>, <a href="http://www.thecssninja.com/">Ryan Seddon</a>, <a href="http://mathiasbynens.be/">Mathias Bynens</a> and several others have been doing similar practical investigations on how to use what’s new and awesome in real life scenarios.</p>


<p></p>

<p>But these are not the people who are known revolutionaries. Unfortunately, the people who seem to be recognized for pushing the envelope are people who talk ABOUT the change, those who split hairs on whether to call something "Responsive" or "Adaptive" or speak about HTML5/CSS3 but have very little code to show for their understanding of it. </p>




<p>Now is the time to get developers on board the new rush of web standards, not to promote litigation on the presence or absence of a single HTML attribute, or debate a merits of the name of a technique. What it does is to deflect attention from learning, instead directs developers to spend more time beating about the bush and not be fully engaged in what’s coming.</p>




<p>It is time to move on. I acknowledge all these past trail blazers, but they are not at the forefront today. Following their advocacy does not shed light on all the practical implementations that are possible while exploring new technology. People seem to know - but not use - the latest in web standards, and several are on the fence because they do not know how to work with new standards right now. </p>




<p>It is time for us to get new idols. Here is what my idols do:</p>




<h3>Create</h3>


<p>They code. They have demos on their website or on Github.</p>




<p>They write. They write tutorials that are not browser-specific, and link back to specifications, have comments and update their posts with newer/better ideas from within the comments section.</p>




<h3>Research</h3>


<p></p>

<p>They research and publish their findings. A lot of recommended practices are dogma and hearsay - creating practical examples to test such assertions and validate them would be cornerstone of their work.</p>




<p>They know what is new. Web standards keep changing. They should know what is new, what is relevant and what shouldn't be promoted. They talk and respond to your queries and are not too busy to find time to write code that works.</p>




<h3>Collaborate</h3>


<p>They do not work in isolation, but get people together who can create projects that benefit the web.[Bonus!] They are available on mailing-lists, forums, or IRC channels to help n00bs when they can.</p>




<p>If you think it is hard to find these people, then you are not looking. All the people I mentioned earlier are people worthy of listening to. Look at who else they are talking to, or doing projects with, follow the trail. </p>




<p>The old revolution is dead, long live the revolution.</p>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Some CSS Transition hacks]]></title>
    <link href="http://nimbupani.github.com/some-css-transition-hacks.html"/>
    <updated>2011-05-17T00:00:00-07:00</updated>
    <id>http://nimbupani.github.com/some-css-transition-hacks</id>
    <content type="html"><![CDATA[<p>I am speaking at <a href="http://unplugged11.webdirections.org/program/design#creative-css3">some</a> <a href="http://2011.texasjavascript.com/">events</a> which means I have to write a few demos. You can find some <a href="http://nimbu.in/unplugged/demos/">here</a>, and I am in the process of creating more. While doing so, I have come across two new (to me), ways of applying transitions.  This only works for the conditions stated here, and you should think carefully before trying to expand these to be used elsewhere.</p>




<h2>Fake Transitions on Gradients</h2>


<p>As you know, no browser supports transitions in CSS gradients (yet). But, we have two tools to fake this: transitions that work on background colors, and multiple backgrounds. Given transitions can interpolate colors, we simply transition the background color and apply a gradient image on top of it which fades to transparent value (giving the illusion of an transitioning gradient). </p>


<p>Here is a demo:</p>


<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nimbu/zuNbj/embedded/result,css"></iframe>


<h3>Caveat</h3>


<ul><li>This works great on simple gradients. You probably do not want to use this with multiple backgrounds as it would be a terrible pain to manage the right backgrounds to change.</li></ul>




<h2>Animate elements with just font-size</h2>


<p>Transitions can be applied on CSS transforms, so if you wish to scale an element on hover, it would be a matter of applying the right prefixed transition on the right prefixed transform and writing the vendor-prefixed scale transform 5 times on hover.</p>


<p></p>

<p>I am lazy, and I like to avoid typing if I can. So, given we can use <code>em</code> as a unit for width, height, line-height and border-radius would be something we can take advantage of. What this unit means is each of these properties are now relative to the <code>font-size</code> we set on the element.</p>


<p>Now all we need to do is transition the font-size, and we get bonus transitions on width, height, line-height and border-radius! Now you can be carefully choose which elements should use em units depending on which properties (that use em unit values) you want transitioned.</p>


<p>Don't be so quick to gloat though. Webkit does not transition width, height, line-height if you only transition the font-size, so you would need to set <code>-webkit-transition: all 1s;</code> to get it to work on webkit.</p>




<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/nimbu/86kET/embedded/result,css"></iframe>


<h3>Caveats</h3>


<ul>
<li>The element expands in area - unlike a scale transform which expands without nudging other elements out of the way. This means elements adjacent to this element will move unless they are all positioned absolutely. You can also position the element to which transition is being applied absolutely so as to not impact rest of them.</li>
<li>This only works for properties you want to transform that accept length units. </li>
<li>If you do not want the text within the transformed element to also transform, using this method would be easier. When using transforms, you would need to reset the transform on the wrapper around the text so as to prevent text from transforming. In the above demo, the blue disc has considerably more rules and declarations to prevent scaling of text as compared to transforming the font size.</li>
</ul>


<p>If you know of a snappier way to do these, please fork the fiddles and link to your forks in the comments.</p>

]]></content>
  </entry>
  
  <entry>
    <title type="html"><![CDATA[Safe CSS Defaults]]></title>
    <link href="http://nimbupani.github.com/safe-css-defaults.html"/>
    <updated>2011-04-13T00:00:00-07:00</updated>
    <id>http://nimbupani.github.com/safe-css-defaults</id>
    <content type="html"><![CDATA[<p>You know those nights when you race towards a deadline, banging out the CSS as fast as you can, there comes a moment when you pause…wondering what keyword would get rid of that z-index on that anchor, then you make the best guess you can, and type:</p>




<pre><code>z-index: none;</code></pre>




<p>Then go on in life, as it “renders” like you wanted it, it works, no big deal. </p>




<p>But it is. Specifying incorrect values might inject behaviour that you did not expect. It is quite possible that the currently incorrect value might be, in the future, used for a valid value which would distort the design you so carefully did (and how often do we revisit a client’s website to update? :).</p>




<h3>Initial Values</h3>


<p>The spec defines a value that will be the <em>initial</em> value for a property when it is not declared in any stylesheets - either the user agent stylesheet (look at <a href="http://www.iecss.com/">iecss.com</a> for stylesheets of IE, <a href="http://www.iecss.com/opera-10.51.css">Opera</a>, <a href="http://www.iecss.com/firefox-3.6.3.css">Firefox</a>, <a href="http://www.iecss.com/webkit-r61376.css">Webkit</a>) or the ones you write.</p>




<p>Now, user agents assign values to CSS properties too. For example, when you do not declare margins on <code>h1</code>, the user agents have an initial value for margins. IE sets this to be <code>14pt</code>, Firefox, Opera sets this to <code>0.67em</code>, etc. This is not defined by the specifications and there is no keyword to obtain the values set by user agents.</p>




<p>Initial values are different from inherited values. All properties accept a keyword <code>inherit</code>. When you use the keyword <code>inherit</code> on a property, the browser applies the value that it finds on its parent element. On <code>html</code> element if you use the value <code>inherit</code>, it applies the initial value. </p>




<h3>Good News!</h3>


<p><a href="http://leaverou.me">Lea Verou</a> alerted me to the CSS3 keyword <a href="http://www.w3.org/TR/css3-values/#keywords"><code>initial</code> which will set the CSS3 property to the initial value as defined in the spec</a>. Sadly, the only browsers that supports this seems to be <a href="http://jsfiddle.net/nimbu/CgRAZ/10/show/">Firefox</a> (with a <code>-moz-</code> prefix) and Webkit's Safari and Chrome (yay!).</p>




<p>So until full support lands on all browsers for this amazing keyword and we don't have to support browsers that do not recognize that keyword, here are some of the ways you can reset some CSS properties to their initial values:</p>




<table>
  <thead>
    <tr>
      <th>
        Property
      </th>
      <th>
        Value
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-background/#background">background</a>
      </td>
      <td>
        transparent (<code>transparent</code> stands for <a href="http://www.w3.org/TR/css3-color/#transparent-def">rgba(0, 0, 0, 0)</a>) or <code>none</code> or <code>0 0</code>
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-background/#ltborder-widthgt">border</a>
      </td>
      <td>
        none or 0
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-background/#border-image-source">border-image</a>
      </td>
      <td>
        none
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-background/#the-border-radius">border-radius</a>
      </td>
      <td>
        0
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-background/#the-box-shadow">box-shadow</a>
      </td>
      <td>
       none
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#clear">clear</a>
      </td>
      <td>
        none
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-color/#foreground">color</a>
      </td>
      <td>
        No value, so best option is to use <code>inherit</code> to cascade from a parent element's color value.
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-content/#content">content</a>
      </td>
      <td>
        normal
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#display">display</a>
      </td>
      <td>
        inline
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#the-lsquo1">float</a>
      </td>
      <td>
        none
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/2011/WD-css3-fonts-20110324/#descdef-font-style">font</a>
      </td>
      <td>
        normal
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#height">height</a>
      </td>
      <td>
        auto
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#letter-spacing0">letter-spacing</a>
      </td>
      <td>
        normal
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-linebox/#InlineBoxHeight">line-height</a>
      </td>
      <td>
        normal
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#max-width">max-width</a>
      </td>
      <td>
        none
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#max-width">max-height</a>
      </td>
      <td>
        none
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#min-height">min-width</a>
      </td>
      <td>
        0
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#min-height">min-height</a>
      </td>
      <td>
        0
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-color/#opacity">opacity</a>
      </td>
      <td>
        1
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#overflow0">overflow</a>
      </td>
      <td>
        visible
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/2006/WD-css3-page-20061010/#page-break-inside">page-break-inside</a>
      </td>
      <td>
        auto
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/CSS2/visuren.html#propdef-position">position</a>
      </td>
      <td>
        static (not <code>relative</code>)
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#text-shadow">text-shadow</a>
      </td>
      <td>
        none
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#text-transform">text-transform</a>
      </td>
      <td>
        none
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-2d-transforms/#transform-property">transform</a>
      </td>
      <td>
        none
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-transitions/#the-transition-property-property-">transition</a>
      </td>
      <td>
        none
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align">vertical-align</a>
      </td>
      <td>
        baseline
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#visibility">visibility</a>
      </td>
      <td>
        visible
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/CSS2/text.html#white-space-prop">white-space</a>
      </td>
      <td>
        normal
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/css3-box/#width">width</a>
      </td>
      <td>
        auto
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/2011/WD-css3-text-20110215/#word-spacing0">word-spacing</a>
      </td>
      <td>
        normal
      </td>
    </tr>
    <tr>
      <td>
        <a href="http://www.w3.org/TR/CSS2/visuren.html#z-index">z-index</a>
      </td>
      <td>
        auto (not <code>none</code> or <code>0</code>)
      </td>
    </tr>
  </tbody>
</table>


<p><small>Thanks to <a href="http://css-tricks.com">Chris Coyier</a>, <a href="http://www.xanthir.com/blog/">Tab Atkins</a>, <a href="http://leaverou.me">Lea Verou</a>, and <a href="http://nicolasgallagher.com">Nicolas Gallagher</a> for feedback on this post!</small></p>

]]></content>
  </entry>
  
</feed>