INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1253, 3, '2010-09-07 22:27:08', '2010-09-08 02:27:08', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nSo if we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-21', '', '', '2010-09-07 22:27:08', '2010-09-08 02:27:08', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-21/', 0, 'revision', '', 0),
(1254, 3, '2010-09-07 22:27:14', '2010-09-08 02:27:14', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nSo the basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nSo if we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-22', '', '', '2010-09-07 22:27:14', '2010-09-08 02:27:14', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-22/', 0, 'revision', '', 0),
(1255, 3, '2010-09-07 22:30:54', '2010-09-08 02:30:54', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n<h2 class="fontdemo">@font-face roxors my boxers!!</h2>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-23', '', '', '2010-09-07 22:30:54', '2010-09-08 02:30:54', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-23/', 0, 'revision', '', 0),
(1256, 3, '2010-09-07 22:31:01', '2010-09-08 02:31:01', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a font definition like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() method to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page, </a>we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n<h2 class="fontdemo">@font-face roxors my boxers!!</h2>\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-24', '', '', '2010-09-07 22:31:01', '2010-09-08 02:31:01', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-24/', 0, 'revision', '', 0),
(1257, 3, '2010-09-07 22:48:17', '2010-09-08 02:48:17', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the order of the <em>src</em> declarations, it has to do with IE and it''s support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n<h2 class="fontdemo">@font-face roxors my boxers!!</h2>\r\n\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-25', '', '', '2010-09-07 22:48:17', '2010-09-08 02:48:17', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-25/', 0, 'revision', '', 0),
(1258, 3, '2010-09-07 22:48:34', '2010-09-08 02:48:34', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the order of the <em>src</em> declarations, it has to do with IE and it''s support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n<h2 class="fontdemo">@font-face roxors my boxers!!</h2>\r\n\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-26', '', '', '2010-09-07 22:48:34', '2010-09-08 02:48:34', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-26/', 0, 'revision', '', 0),
(1259, 3, '2010-09-07 22:49:20', '2010-09-08 02:49:20', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and it''s support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n<h2 class="fontdemo">@font-face roxors my boxers!!</h2>\r\n\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-27', '', '', '2010-09-07 22:49:20', '2010-09-08 02:49:20', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-27/', 0, 'revision', '', 0),
(1260, 3, '2010-09-07 22:49:24', '2010-09-08 02:49:24', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and it''s support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n<h2 class="fontdemo">@font-face roxors my boxers!!</h2>\r\n\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-28', '', '', '2010-09-07 22:49:24', '2010-09-08 02:49:24', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-28/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1261, 3, '2010-09-07 22:53:43', '2010-09-08 02:53:43', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and its support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n<h2>A Bit of a Warning</h2>\r\n\r\nKeep in mind that when you use @font-face in your site, you''re now adding another HTTP request which could end up slowing down your page load. This is especially important to consider if you decide to use a remote font hosting service. Be sure to read Steve''s <a href="http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/">thorough analysis of @font-face performance</a> before going hog wild on your site. :)\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-29', '', '', '2010-09-07 22:53:43', '2010-09-08 02:53:43', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-29/', 0, 'revision', '', 0),
(1262, 3, '2010-09-07 22:55:08', '2010-09-08 02:55:08', '', 'fs-builder', 0, '', 'inherit', 'open', 'open', '', 'fs-builder-2', '', '', '2010-09-07 22:55:08', '2010-09-08 02:55:08', '', 1229, 'http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder1.png', 0, 'attachment', 'image/png', 0),
(1263, 3, '2010-09-07 22:54:05', '2010-09-08 02:54:05', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder.png" alt="" title="fs-builder" width="657" height="468" class="alignleft size-full wp-image-1236" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and its support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n<h2>A Bit of a Warning</h2>\r\n\r\nKeep in mind that when you use @font-face in your site, you''re now adding another HTTP request which could end up slowing down your page load. This is especially important to consider if you decide to use a remote font hosting service. Be sure to read Steve''s <a href="http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/">thorough analysis of @font-face performance</a> before going hog wild on your site. :)\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-30', '', '', '2010-09-07 22:54:05', '2010-09-08 02:54:05', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-30/', 0, 'revision', '', 0),
(1264, 3, '2010-09-07 22:56:57', '2010-09-08 02:56:57', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder1.png" alt="" title="fs-builder" width="450" height="320" class="alignleft size-full wp-image-1262" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and its support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n<h2>A Bit of a Warning</h2>\r\n\r\nKeep in mind that when you use @font-face in your site, you''re now adding another HTTP request which could end up slowing down your page load. This is especially important to consider if you decide to use a remote font hosting service. Be sure to read Steve''s <a href="http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/">thorough analysis of @font-face performance</a> before going hog wild on your site. :)\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-31', '', '', '2010-09-07 22:56:57', '2010-09-08 02:56:57', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-31/', 0, 'revision', '', 0),
(1265, 3, '2010-09-07 22:57:09', '2010-09-08 02:57:09', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder1.png" alt="" title="fs-builder" width="450" height="320" class="alignleft size-full wp-image-1262" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and its support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n<h2>A Bit of a Warning</h2>\r\n\r\nKeep in mind that when you use @font-face in your site, you''re now adding another HTTP request which could end up slowing down your page load. This is especially important to consider if you decide to use a remote font hosting service. Be sure to read Steve''s <a href="http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/">thorough analysis of @font-face performance</a> before going hog wild on your site. :)\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-32', '', '', '2010-09-07 22:57:09', '2010-09-08 02:57:09', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-32/', 0, 'revision', '', 0),
(1266, 3, '2010-09-07 22:58:55', '2010-09-08 02:58:55', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder1.png" alt="" title="fs-builder" width="450" height="320" class="alignleft size-full wp-image-1262" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and its support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n<h2>A Bit of a Warning</h2>\r\n\r\nKeep in mind that when you use @font-face in your site, you''re now adding another HTTP request which could end up slowing down your page load. This is especially important to consider if you decide to use a remote font hosting service. Be sure to read Steve''s <a href="http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/">thorough analysis of @font-face performance</a> before going hog wild on your site. :)\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-33', '', '', '2010-09-07 22:58:55', '2010-09-08 02:58:55', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-33/', 0, 'revision', '', 0),
(1267, 3, '2010-09-08 12:02:34', '2010-09-08 16:02:34', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: local(''☺''), url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder1.png" alt="" title="fs-builder" width="450" height="320" class="alignleft size-full wp-image-1262" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: local(''☺''), url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: local(''☺''), url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and its support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n<h2>A Bit of a Warning</h2>\r\n\r\nKeep in mind that when you use @font-face in your site, you''re now adding another HTTP request which could end up slowing down your page load. This is especially important to consider if you decide to use a remote font hosting service. Be sure to read Steve''s <a href="http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/">thorough analysis of @font-face performance</a> before going hog wild on your site. :)\r\n\r\n<h2>An Update</h2>\r\n\r\nPaul Irish pointed out the I had left out the <em>local(''☺'')</em> directive from the @font-face rule, which is really important in terms of performance since, as Paul wrote:\r\n\r\n<blockquote>if it just so happens that a user actually has your custom font installed, this''ll save them the download. The primary reason is that you cede control to the user''s machine, potentially showing a locally installed font instead of the one you want to serve. While that will load faster, there''s a very small chance the file could be wrong.\r\n\r\nTo account for this gotcha, I''ve specified a local font name of ''☺''. Yes, it''s a smiley face. The OpenType spec indicates any two-byte unicode characters won''t work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name. This technique is recommended if you think a locally installed version of this font is not in your best interest.</blockquote>\r\n\r\nAlso, because the <em>local(''☺'')</em> directive isn''t supported it IE, it will simply ignore the second <em>src</em> declaration (which is for non-IE browsers) ensuring that you don''t have an extra request that will issue a 404 and slow down your page''s performance.\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-autosave', '', '', '2010-09-08 12:02:34', '2010-09-08 16:02:34', '', 1229, 'http://blog.reybango.com/2010/09/08/1229-autosave/', 0, 'revision', '', 0),
(1268, 3, '2010-09-07 22:59:23', '2010-09-08 02:59:23', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder1.png" alt="" title="fs-builder" width="450" height="320" class="alignleft size-full wp-image-1262" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and its support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n<h2>A Bit of a Warning</h2>\r\n\r\nKeep in mind that when you use @font-face in your site, you''re now adding another HTTP request which could end up slowing down your page load. This is especially important to consider if you decide to use a remote font hosting service. Be sure to read Steve''s <a href="http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/">thorough analysis of @font-face performance</a> before going hog wild on your site. :)\r\n\r\n\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-34', '', '', '2010-09-07 22:59:23', '2010-09-08 02:59:23', '', 1229, 'http://blog.reybango.com/2010/09/07/1229-revision-34/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1269, 3, '2010-09-08 12:03:28', '2010-09-08 16:03:28', 'I''ve been dying to check out @font-face and so I popped over to <a href="http://www.fontsquirrel.com/">Font Squirrel</a> to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% "free for commercial use" fonts! They even have some nice <a href="http://www.fontsquirrel.com/fontface">font kits</a> already setup. The reason that the kits are great is because depending on the browser you''re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it''s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously. \r\n\r\nThe basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called "<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival">Arch Rival</a>" and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly. \r\n\r\nTypically, you would manually go into your CSS style sheet and enter a @font-face rule like this:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: local(''☺''), url(''SF_Arch_Rival-webfont.eot'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nwhere <em>src</em> is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:\r\n\r\n[code language="css"]\r\nsrc: url(''fonts/SF_Arch_Rival-webfont.eot'');\r\n[/code]\r\n\r\nOnce defined, you can now use the font''s semantic name to style a specific selector like this:\r\n\r\n[code language="css"]\r\n.post {\r\n   font-family: ''SFArchRivalRegular'';\r\n   font-size: 18px;\r\n}\r\n[/code]\r\n\r\nThis is fairly easy for a one-off type of deal but when you''re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don''t believe me, just <a href="http://reybango.com/demos/font/stylesheet.css">check out the following style sheet</a>. Font Squirrel takes the pain out of this.\r\n\r\nWhen you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you''d like to use:\r\n\r\n<a href="http://www.fontsquirrel.com/fonts/SF-Arch-Rival"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fs-builder1.png" alt="" title="fs-builder" width="450" height="320" class="alignleft size-full wp-image-1262" /></a>\r\n\r\nIn my case, I chose everything and the really great thing is that the kit brought a <a href="http://reybango.com/demos/font/stylesheet.css">pre-made CSS style sheet</a> with all of the font definitions as well as a <a href="http://reybango.com/demos/font/demo.html">demo HTML file</a> which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the <em>src</em> property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:\r\n\r\n[code language="css"]\r\n@font-face {\r\n	font-family: ''SFArchRivalRegular'';\r\n	src: url(''SF_Arch_Rival-webfont.eot'');\r\n	src: local(''☺''), url(''SF_Arch_Rival-webfont.woff'') format(''woff''), url(''SF_Arch_Rival-webfont.ttf'') format(''truetype''), url(''SF_Arch_Rival-webfont.svg#webfontPgLtCzUx'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\n[/code]\r\n\r\nIf we look at the <a href="http://reybango.com/demos/font/demo.html">demo page,</a> we can see how the various font declarations affect the page.\r\n\r\n<a href="http://reybango.com/demos/font/demo.html"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/fonts1.png" alt="" title="fonts" width="400" height="299" class="alignleft size-full wp-image-1249" /></a>\r\n\r\nSo I decided to play a little more with some other fonts and pulled down a kit called "<a href="http://www.fontsquirrel.com/fontfacedemo/True-Crimes">True Crimes</a>". I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog. \r\n\r\n[code language="css"][/code]\r\n@font-face {\r\n	font-family: ''TrueCrimesRegular'';\r\n	src: url(''/fonts/true-crimes-webfont.eot'');\r\n	src: local(''☺''), url(''/fonts/true-crimes-webfont.woff'') format(''woff''), url(''/fonts/true-crimes-webfont.ttf'') format(''truetype''), url(''/fonts/true-crimes-webfont.svg#webfontWTZyAk71'') format(''svg'');\r\n	font-weight: normal;\r\n	font-style: normal;\r\n}\r\nh2.fontdemo {font: 60px/68px ''TrueCrimesRegular'', Arial, sans-serif;letter-spacing: 0; }\r\n[/code]\r\n\r\nIf you''re curious about the multiple <em>src</em> property declarations, it has to do with IE and its support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a <a href="http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/">nice explanation of the issue</a> so be sure to read it.\r\n\r\nNow, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of "fontdemo" and some text like this:\r\n\r\n[code language="html"]\r\n&lt;h2 class=&quot;fontdemo&quot;&gt;I''m digging @font-face!!&lt;/h2&gt;\r\n[/code]\r\n\r\nwhich gets me this:\r\n\r\n<h2 class="fontdemo">I''m digging @font-face!!</h2>\r\n\r\n<h2>A Bit of a Warning</h2>\r\n\r\nKeep in mind that when you use @font-face in your site, you''re now adding another HTTP request which could end up slowing down your page load. This is especially important to consider if you decide to use a remote font hosting service. Be sure to read Steve''s <a href="http://www.stevesouders.com/blog/2009/10/13/font-face-and-performance/">thorough analysis of @font-face performance</a> before going hog wild on your site. :)\r\n\r\n<h2>An Update</h2>\r\n\r\nPaul Irish pointed out the I had left out the <em>local(''☺'')</em> directive from the @font-face rule, which is really important in terms of performance since, as Paul wrote:\r\n\r\n<blockquote>if it just so happens that a user actually has your custom font installed, this''ll save them the download. The primary reason is that you cede control to the user''s machine, potentially showing a locally installed font instead of the one you want to serve. While that will load faster, there''s a very small chance the file could be wrong.\r\n\r\nTo account for this gotcha, I''ve specified a local font name of ''☺''. Yes, it''s a smiley face. The OpenType spec indicates any two-byte unicode characters won''t work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name. This technique is recommended if you think a locally installed version of this font is not in your best interest.</blockquote>\r\n\r\nAlso, because the <em>local(''☺'')</em> directive isn''t supported it IE, it will simply ignore the second <em>src</em> declaration (which is for non-IE browsers) ensuring that you don''t have an extra request that will issue a 404 and slow down your page''s performance.\r\n\r\nThanks Paul!\r\n', 'Using @font-face and Font Squirrel to Enhance Your Site with Fonts', 0, '', 'inherit', 'open', 'open', '', '1229-revision-35', '', '', '2010-09-08 12:03:28', '2010-09-08 16:03:28', '', 1229, 'http://blog.reybango.com/2010/09/08/1229-revision-35/', 0, 'revision', '', 0),
(1270, 3, '2010-04-08 13:03:48', '2010-04-08 17:03:48', 'I was recently on a project where I needed a really flexible persistent data storage mechanism. Normally, this would be fairly easily handled via server-side data persistence code but in this case, each page of the app was basically a single-page XHR app in that to render the page required a JSONP call and lots of DOM insertion and manipulation. What I was trying to accomplish was back-button support for these dynamically rendered pages and as most know, hitting the back-button on dynamically rendered DOM elements won''t set them back to their original state. To further complicate the problem, the pages were being built based on user input into search forms which included input fields, select boxes and even fly-out accordion style controls. Basically, I was dealing with storing a large amount of data across page views and cookies definitely were not the solution. Also considering that the browser requirements started at IE6, none of the current localstorage mechanisms were viable.\r\n\r\n<strong>Persistent Session Variables in JavaScript</strong>\r\n\r\nAfter searching quite a bit, I finally found a solution that worked like a charm. <a href="http://www.thomasfrank.se/">Thomas Frank</a> had created a library called <a href="http://www.thomasfrank.se/sessionvars.html">Sessvars.js</a> that leveraged the <em>window.name</em> attribute. The reason for using <em>window.name</em> is that values stored in it persist across page views making it ideal for my needs. The one caveat is that it can only store a string value which at first seemed to throw a wrench in my plans. I needed to store complex data, not just strings. Thankfully, Thomas had come up with a novel way of dealing with this by building a JSON stringifier which serializes and deserializes object data. This allowed me to create a complex data store that could then be converted to a string on the fly. Loved it!\r\n\r\nWhat I did was grab the file name and used that as a key value to identify the specific information for that page. So my object would look something like this:\r\n\r\n[sourcecode language="javascript"]\r\n{ &quot;page1.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field1=foo&amp;field2=21&amp;field3=Mike&quot; } },\r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },\r\n{ &quot;page2.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#adv-search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field21=red&amp;field22=blue&amp;field56=February&quot; } } \r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },							  \r\n{...\r\n}\r\n[/sourcecode]\r\n\r\nThe benefit of this is that it allowed me total flexibility in storing not only the affected form fields for that specific page as well as allowing for unique form field names on a page by page basis. I could also nest the data as deep as I wanted (i.e.: object within object).\r\n\r\nActually storing that data was extremely easy. I simply defined Sessvars.js in my document:\r\n[sourcecode language="javascript"]\r\n&lt;script type=&quot;text/javascript&quot; src=&quot;sessionvars.js&quot;&gt;&lt;/script&gt;\r\n[/sourcecode]\r\n\r\nand then stored my data into a property that I created in the default sessvars object:\r\n\r\n[sourcecode language="javascript"]\r\nsessvars.myObj = { &quot;page1.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field1=foo&amp;field2=21&amp;field3=Mike&quot; } },\r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },\r\n{ &quot;page2.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#adv-search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field21=red&amp;field22=blue&amp;field56=February&quot; } } \r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },							  \r\n{...\r\n};\r\n[/sourcecode]\r\n\r\nThe library attaches a method to the window''s unload event which automatically handles the stringification of the JSON data once you leave the page so basically assigning the value is all I needed to do to persist the data.\r\n\r\n<strong>Restoring the Page</strong>\r\n\r\nThe great thing about Sessvars.js is that when a page is loaded, it immediately restores the persistent data making it immediately accessible to your scripts. We were using jQuery on this project so I created a method that would determine the current page, search through my sessvars persistent data and if it found a key, reload the form with the user''s values as well as re-run any previous JSONP calls to ensure the results were populated. I added the method in $(document).ready() to ensure it got called on every page load:\r\n\r\n[sourcecode language="javascript"]\r\nmyApp.state = (function(){\r\n	return ({\r\n\r\n		resetForm : function( key ) {\r\n			if (sessvars.myApp.state[key]) {\r\n			    var o = {};\r\n			    var queryString = decodeURIComponent( sessvars.myApp.state[key].form.hash );\r\n			    var wrapperEle = &quot;&quot;, formEle= &quot;&quot;, vals = &quot;&quot;;\r\n			    \r\n			    queryString.replace(/([^=]+)\\=([^&amp;]+)&amp;?/ig, function(item, a, b){\r\n			    	a = a.replace( /\\&amp;/g, &quot; &quot;);\r\n			    	b = b.replace( /\\+/g, &quot; &quot;);\r\n			    	if (o[a] &amp;&amp; typeof o[a] !== &quot;object&quot;) {\r\n						o[a] = o[a] + &quot;,&quot; + b;\r\n					} else {\r\n						o[a] = b;\r\n					}\r\n				});	 		    \r\n	    \r\n	    		wrapperEle = $( sessvars.myApp.state[key].form.wrapper );\r\n	    \r\n		    	for (var index in o) { \r\n			   		vals = o[index].split( &quot;,&quot; );\r\n			   		\r\n			   		formEle = wrapperEle.find(&quot;input[name=&quot; + index + &quot;], select[name=&quot; + index + &quot;]&quot;);\r\n\r\n			   		if (formEle.length &gt; 0) {\r\n			   		\r\n				   		if (formEle[0].tagName == &quot;INPUT&quot; &amp;&amp; (formEle[0].type == &quot;checkbox&quot; || formEle[0].type == &quot;radio&quot;)){\r\n				   			formEle.attr( &quot;checked&quot;, &quot;&quot;);\r\n				   			for (var i=0; i &lt; vals.length; i++) {\r\n		   	   			\r\n				   	   			if (index == &quot;accordianSet&quot;) {\r\n					   	   			wrapperEle.find(&quot;input[name=&quot; + index + &quot;][value=&quot; + vals[i] + &quot;]&quot;).trigger( &quot;click&quot; );	\r\n				   	   			} else {\r\n									wrapperEle.find(&quot;input[name=&quot; + index + &quot;][value=&quot; + vals[i] + &quot;]&quot;).attr( &quot;checked&quot;, &quot;true&quot; );				   	   			\r\n				   	   			}\r\n				   	   			\r\n				   			}\r\n				   		} else {\r\n				   			formEle.val( o[index] );\r\n						}\r\n						\r\n					}\r\n				}\r\n    		}			\r\n		},\r\n		resetPage : function( key ) {\r\n\r\n			if (sessvars.myObj.state[key]) {\r\n				this.resetForm( key );\r\n			}\r\n			\r\n			.... call various other methods to reset the page ....\r\n			\r\n		});\r\n\r\n}());\r\n\r\n$(document).ready( function(){\r\n	myApp.state.resetPage( myApp.utils.getPageName() );\r\n});\r\n[/sourcecode]\r\n\r\nThe result is that the search forms would get repopulated with the previously entered values and and the JSONP call re-run based on these new values. It worked exactly like we needed it.\r\n\r\n<strong>Closing Thoughts</strong>\r\n\r\nUsing Sessvars.js definitely helped us out of a jam. After looking at a number of back-button solutions and even updating <em>window.location</em>, this turned out to be the best solution for our needs due to the dynamic nature of every page. The other takeaway is that using <em>window.name</em> safely affords you about 2mb of data storage. I say this because of the testing that Thomas did. In his research he found the following:\r\n\r\n<blockquote>\r\nIE7 gave up at 32 Mb with a "out of memory" error. Firefox gave up at 32-64 Mb -sometimes crashed there about - otherwise threw an "out of memory" error.Safari gave up at 64 Mb and crashed. Opera has a limit built in (wise) and gave up after 2 Mb, throwing the error "Object to large (implementation limit.)"</blockquote>\r\n\r\nI''ve not tested this out in newer versions of the browser so I can''t say if these limits are still set but for this project, 2mb was more than enough for our needs.\r\n\r\n<strong><em>Update:</em></strong>\r\n\r\nSince posting this I''ve been sent two other JS-based storage solutions which are definitely worth looking at:\r\n\r\n<a href="http://gist.github.com/350433">Storage Pollyfiller</a> by insanely talented developer Remy Sharp\r\n<a href="http://github.com/brianleroux/lawnchair">LawnChair</a> by uber-JS ninja Brian Leroux\r\n \r\n\r\n', 'Alternative Client-Side Storage using Sessvars.js', 0, '', 'inherit', 'open', 'open', '', '538-revision-24', '', '', '2010-04-08 13:03:48', '2010-04-08 17:03:48', '', 538, 'http://blog.reybango.com/2010/04/08/538-revision-24/', 0, 'revision', '', 0),
(1271, 3, '2010-09-08 13:57:27', '2010-09-08 17:57:27', 'I was recently on a project where I needed a really flexible persistent data storage mechanism. Normally, this would be fairly easily handled via server-side data persistence code but in this case, each page of the app was basically a single-page XHR app in that to render the page required a JSONP call and lots of DOM insertion and manipulation. What I was trying to accomplish was back-button support for these dynamically rendered pages and as most know, hitting the back-button on dynamically rendered DOM elements won''t set them back to their original state. To further complicate the problem, the pages were being built based on user input into search forms which included input fields, select boxes and even fly-out accordion style controls. Basically, I was dealing with storing a large amount of data across page views and cookies definitely were not the solution. Also considering that the browser requirements started at IE6, none of the current localstorage mechanisms were viable.\r\n\r\n<strong>Persistent Session Variables in JavaScript</strong>\r\n\r\nAfter searching quite a bit, I finally found a solution that worked like a charm. <a href="http://www.thomasfrank.se/">Thomas Frank</a> had created a library called <a href="http://www.thomasfrank.se/sessionvars.html">Sessvars.js</a> that leveraged the <em>window.name</em> attribute. The reason for using <em>window.name</em> is that values stored in it persist across page views making it ideal for my needs. The one caveat is that it can only store a string value which at first seemed to throw a wrench in my plans. I needed to store complex data, not just strings. Thankfully, Thomas had come up with a novel way of dealing with this by building a JSON stringifier which serializes and deserializes object data. This allowed me to create a complex data store that could then be converted to a string on the fly. Loved it!\r\n\r\nWhat I did was grab the file name and used that as a key value to identify the specific information for that page. So my object would look something like this:\r\n\r\n[sourcecode language="javascript"]\r\n{ &quot;page1.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field1=foo&amp;field2=21&amp;field3=Mike&quot; } },\r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },\r\n{ &quot;page2.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#adv-search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field21=red&amp;field22=blue&amp;field56=February&quot; } } \r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },							  \r\n{...\r\n}\r\n[/sourcecode]\r\n\r\nThe benefit of this is that it allowed me total flexibility in storing not only the affected form fields for that specific page as well as allowing for unique form field names on a page by page basis. I could also nest the data as deep as I wanted (i.e.: object within object).\r\n\r\nActually storing that data was extremely easy. I simply defined Sessvars.js in my document:\r\n[sourcecode language="javascript"]\r\n&lt;script type=&quot;text/javascript&quot; src=&quot;sessionvars.js&quot;&gt;&lt;/script&gt;\r\n[/sourcecode]\r\n\r\nand then stored my data into a property that I created in the default sessvars object:\r\n\r\n[sourcecode language="javascript"]\r\nsessvars.myObj = { &quot;page1.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field1=foo&amp;field2=21&amp;field3=Mike&quot; } },\r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },\r\n{ &quot;page2.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#adv-search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field21=red&amp;field22=blue&amp;field56=February&quot; } } \r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },							  \r\n{...\r\n};\r\n[/sourcecode]\r\n\r\nThe library attaches a method to the window''s unload event which automatically handles the stringification of the JSON data once you leave the page so basically assigning the value is all I needed to do to persist the data.\r\n\r\n<strong>Restoring the Page</strong>\r\n\r\nThe great thing about Sessvars.js is that when a page is loaded, it immediately restores the persistent data making it immediately accessible to your scripts. We were using jQuery on this project so I created a method that would determine the current page, search through my sessvars persistent data and if it found a key, reload the form with the user''s values as well as re-run any previous JSONP calls to ensure the results were populated. I added the method in $(document).ready() to ensure it got called on every page load:\r\n\r\n[sourcecode language="javascript"]\r\nmyApp.state = (function(){\r\n	return {\r\n\r\n		resetForm : function( key ) {\r\n			if (sessvars.myApp.state[key]) {\r\n			    var o = {};\r\n			    var queryString = decodeURIComponent( sessvars.myApp.state[key].form.hash );\r\n			    var wrapperEle = &quot;&quot;, formEle= &quot;&quot;, vals = &quot;&quot;;\r\n			    \r\n			    queryString.replace(/([^=]+)\\=([^&amp;]+)&amp;?/ig, function(item, a, b){\r\n			    	a = a.replace( /\\&amp;/g, &quot; &quot;);\r\n			    	b = b.replace( /\\+/g, &quot; &quot;);\r\n			    	if (o[a] &amp;&amp; typeof o[a] !== &quot;object&quot;) {\r\n						o[a] = o[a] + &quot;,&quot; + b;\r\n					} else {\r\n						o[a] = b;\r\n					}\r\n				});	 		    \r\n	    \r\n	    		wrapperEle = $( sessvars.myApp.state[key].form.wrapper );\r\n	    \r\n		    	for (var index in o) { \r\n			   		vals = o[index].split( &quot;,&quot; );\r\n			   		\r\n			   		formEle = wrapperEle.find(&quot;input[name=&quot; + index + &quot;], select[name=&quot; + index + &quot;]&quot;);\r\n\r\n			   		if (formEle.length &gt; 0) {\r\n			   		\r\n				   		if (formEle[0].tagName == &quot;INPUT&quot; &amp;&amp; (formEle[0].type == &quot;checkbox&quot; || formEle[0].type == &quot;radio&quot;)){\r\n				   			formEle.attr( &quot;checked&quot;, &quot;&quot;);\r\n				   			for (var i=0; i &lt; vals.length; i++) {\r\n		   	   			\r\n				   	   			if (index == &quot;accordianSet&quot;) {\r\n					   	   			wrapperEle.find(&quot;input[name=&quot; + index + &quot;][value=&quot; + vals[i] + &quot;]&quot;).trigger( &quot;click&quot; );	\r\n				   	   			} else {\r\n									wrapperEle.find(&quot;input[name=&quot; + index + &quot;][value=&quot; + vals[i] + &quot;]&quot;).attr( &quot;checked&quot;, &quot;true&quot; );				   	   			\r\n				   	   			}\r\n				   	   			\r\n				   			}\r\n				   		} else {\r\n				   			formEle.val( o[index] );\r\n						}\r\n						\r\n					}\r\n				}\r\n    		}			\r\n		},\r\n		resetPage : function( key ) {\r\n\r\n			if (sessvars.myObj.state[key]) {\r\n				this.resetForm( key );\r\n			}\r\n			\r\n			.... call various other methods to reset the page ....\r\n			\r\n		};\r\n\r\n}());\r\n\r\n$(document).ready( function(){\r\n	myApp.state.resetPage( myApp.utils.getPageName() );\r\n});\r\n[/sourcecode]\r\n\r\nThe result is that the search forms would get repopulated with the previously entered values and and the JSONP call re-run based on these new values. It worked exactly like we needed it.\r\n\r\n<strong>Closing Thoughts</strong>\r\n\r\nUsing Sessvars.js definitely helped us out of a jam. After looking at a number of back-button solutions and even updating <em>window.location</em>, this turned out to be the best solution for our needs due to the dynamic nature of every page. The other takeaway is that using <em>window.name</em> safely affords you about 2mb of data storage. I say this because of the testing that Thomas did. In his research he found the following:\r\n\r\n<blockquote>\r\nIE7 gave up at 32 Mb with a "out of memory" error. Firefox gave up at 32-64 Mb -sometimes crashed there about - otherwise threw an "out of memory" error.Safari gave up at 64 Mb and crashed. Opera has a limit built in (wise) and gave up after 2 Mb, throwing the error "Object to large (implementation limit.)"</blockquote>\r\n\r\nI''ve not tested this out in newer versions of the browser so I can''t say if these limits are still set but for this project, 2mb was more than enough for our needs.\r\n\r\n<strong><em>Update:</em></strong>\r\n\r\nSince posting this I''ve been sent two other JS-based storage solutions which are definitely worth looking at:\r\n\r\n<a href="http://gist.github.com/350433">Storage Pollyfiller</a> by insanely talented developer Remy Sharp\r\n<a href="http://github.com/brianleroux/lawnchair">LawnChair</a> by uber-JS ninja Brian Leroux\r\n \r\n\r\n', 'Alternative Client-Side Storage using Sessvars.js', 0, '', 'inherit', 'open', 'open', '', '538-revision-25', '', '', '2010-09-08 13:57:27', '2010-09-08 17:57:27', '', 538, 'http://blog.reybango.com/2010/09/08/538-revision-25/', 0, 'revision', '', 0),
(1272, 3, '2010-09-08 14:26:42', '2010-09-08 18:26:42', 'I was recently on a project where I needed a really flexible persistent data storage mechanism. Normally, this would be fairly easily handled via server-side data persistence code but in this case, each page of the app was basically a single-page XHR app in that to render the page required a JSONP call and lots of DOM insertion and manipulation. What I was trying to accomplish was back-button support for these dynamically rendered pages and as most know, hitting the back-button on dynamically rendered DOM elements won''t set them back to their original state. To further complicate the problem, the pages were being built based on user input into search forms which included input fields, select boxes and even fly-out accordion style controls. Basically, I was dealing with storing a large amount of data across page views and cookies definitely were not the solution. Also considering that the browser requirements started at IE6, none of the current localstorage mechanisms were viable.\r\n\r\n<strong>Persistent Session Variables in JavaScript</strong>\r\n\r\nAfter searching quite a bit, I finally found a solution that worked like a charm. <a href="http://www.thomasfrank.se/">Thomas Frank</a> had created a library called <a href="http://www.thomasfrank.se/sessionvars.html">Sessvars.js</a> that leveraged the <em>window.name</em> attribute. The reason for using <em>window.name</em> is that values stored in it persist across page views making it ideal for my needs. The one caveat is that it can only store a string value which at first seemed to throw a wrench in my plans. I needed to store complex data, not just strings. Thankfully, Thomas had come up with a novel way of dealing with this by building a JSON stringifier which serializes and deserializes object data. This allowed me to create a complex data store that could then be converted to a string on the fly. Loved it!\r\n\r\nWhat I did was grab the file name and used that as a key value to identify the specific information for that page. So my object would look something like this:\r\n\r\n[sourcecode language="javascript"]\r\n{ &quot;page1.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field1=foo&amp;field2=21&amp;field3=Mike&quot; } },\r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },\r\n{ &quot;page2.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#adv-search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field21=red&amp;field22=blue&amp;field56=February&quot; } } \r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },							  \r\n{...\r\n}\r\n[/sourcecode]\r\n\r\nThe benefit of this is that it allowed me total flexibility in storing not only the affected form fields for that specific page as well as allowing for unique form field names on a page by page basis. I could also nest the data as deep as I wanted (i.e.: object within object).\r\n\r\nActually storing that data was extremely easy. I simply defined Sessvars.js in my document:\r\n[sourcecode language="javascript"]\r\n&lt;script type=&quot;text/javascript&quot; src=&quot;sessionvars.js&quot;&gt;&lt;/script&gt;\r\n[/sourcecode]\r\n\r\nand then stored my data into a property that I created in the default sessvars object:\r\n\r\n[sourcecode language="javascript"]\r\nsessvars.myObj = { &quot;page1.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field1=foo&amp;field2=21&amp;field3=Mike&quot; } },\r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },\r\n{ &quot;page2.html&quot; : { &quot;form&quot; : { &quot;wrapper&quot; : &quot;#adv-search-box&quot;, \r\n							  &quot;hash&quot; = &quot;field21=red&amp;field22=blue&amp;field56=February&quot; } } \r\n	  		     &quot;callback&quot; : &quot;resetWrapper&quot; },							  \r\n{...\r\n};\r\n[/sourcecode]\r\n\r\nThe library attaches a method to the window''s unload event which automatically handles the stringification of the JSON data once you leave the page so basically assigning the value is all I needed to do to persist the data.\r\n\r\n<strong>Restoring the Page</strong>\r\n\r\nThe great thing about Sessvars.js is that when a page is loaded, it immediately restores the persistent data making it immediately accessible to your scripts. We were using jQuery on this project so I created a method that would determine the current page, search through my sessvars persistent data and if it found a key, reload the form with the user''s values as well as re-run any previous JSONP calls to ensure the results were populated. I added the method in $(document).ready() to ensure it got called on every page load:\r\n\r\n[sourcecode language="javascript"]\r\nmyApp.state = (function(){\r\n	return {\r\n\r\n		resetForm : function( key ) {\r\n			if (sessvars.myApp.state[key]) {\r\n			    var o = {};\r\n			    var queryString = decodeURIComponent( sessvars.myApp.state[key].form.hash );\r\n			    var wrapperEle = &quot;&quot;, formEle= &quot;&quot;, vals = &quot;&quot;;\r\n			    \r\n			    queryString.replace(/([^=]+)\\=([^&amp;]+)&amp;?/ig, function(item, a, b){\r\n			    	a = a.replace( /\\&amp;/g, &quot; &quot;);\r\n			    	b = b.replace( /\\+/g, &quot; &quot;);\r\n			    	if (o[a] &amp;&amp; typeof o[a] !== &quot;object&quot;) {\r\n						o[a] = o[a] + &quot;,&quot; + b;\r\n					} else {\r\n						o[a] = b;\r\n					}\r\n				});	 		    \r\n	    \r\n	    		wrapperEle = $( sessvars.myApp.state[key].form.wrapper );\r\n	    \r\n		    	for (var index in o) { \r\n			   		vals = o[index].split( &quot;,&quot; );\r\n			   		\r\n			   		formEle = wrapperEle.find(&quot;input[name=&quot; + index + &quot;], select[name=&quot; + index + &quot;]&quot;);\r\n\r\n			   		if (formEle.length &gt; 0) {\r\n			   		\r\n				   		if (formEle[0].tagName == &quot;INPUT&quot; &amp;&amp; (formEle[0].type == &quot;checkbox&quot; || formEle[0].type == &quot;radio&quot;)){\r\n				   			formEle.attr( &quot;checked&quot;, &quot;&quot;);\r\n				   			for (var i=0; i &lt; vals.length; i++) {\r\n		   	   			\r\n				   	   			if (index == &quot;accordianSet&quot;) {\r\n					   	   			wrapperEle.find(&quot;input[name=&quot; + index + &quot;][value=&quot; + vals[i] + &quot;]&quot;).trigger( &quot;click&quot; );	\r\n				   	   			} else {\r\n									wrapperEle.find(&quot;input[name=&quot; + index + &quot;][value=&quot; + vals[i] + &quot;]&quot;).attr( &quot;checked&quot;, &quot;true&quot; );				   	   			\r\n				   	   			}\r\n				   	   			\r\n				   			}\r\n				   		} else {\r\n				   			formEle.val( o[index] );\r\n						}\r\n						\r\n					}\r\n				}\r\n    		}			\r\n		},\r\n		resetPage : function( key ) {\r\n\r\n			if (sessvars.myObj.state[key]) {\r\n				this.resetForm( key );\r\n			}\r\n			\r\n			.... call various other methods to reset the page ....\r\n			\r\n		};\r\n\r\n})();\r\n\r\n$(document).ready( function(){\r\n	myApp.state.resetPage( myApp.utils.getPageName() );\r\n});\r\n[/sourcecode]\r\n\r\nThe result is that the search forms would get repopulated with the previously entered values and and the JSONP call re-run based on these new values. It worked exactly like we needed it.\r\n\r\n<strong>Closing Thoughts</strong>\r\n\r\nUsing Sessvars.js definitely helped us out of a jam. After looking at a number of back-button solutions and even updating <em>window.location</em>, this turned out to be the best solution for our needs due to the dynamic nature of every page. The other takeaway is that using <em>window.name</em> safely affords you about 2mb of data storage. I say this because of the testing that Thomas did. In his research he found the following:\r\n\r\n<blockquote>\r\nIE7 gave up at 32 Mb with a "out of memory" error. Firefox gave up at 32-64 Mb -sometimes crashed there about - otherwise threw an "out of memory" error.Safari gave up at 64 Mb and crashed. Opera has a limit built in (wise) and gave up after 2 Mb, throwing the error "Object to large (implementation limit.)"</blockquote>\r\n\r\nI''ve not tested this out in newer versions of the browser so I can''t say if these limits are still set but for this project, 2mb was more than enough for our needs.\r\n\r\n<strong><em>Update:</em></strong>\r\n\r\nSince posting this I''ve been sent two other JS-based storage solutions which are definitely worth looking at:\r\n\r\n<a href="http://gist.github.com/350433">Storage Pollyfiller</a> by insanely talented developer Remy Sharp\r\n<a href="http://github.com/brianleroux/lawnchair">LawnChair</a> by uber-JS ninja Brian Leroux\r\n \r\n\r\n', 'Alternative Client-Side Storage using Sessvars.js', 0, '', 'inherit', 'open', 'open', '', '538-revision-26', '', '', '2010-09-08 14:26:42', '2010-09-08 18:26:42', '', 538, 'http://blog.reybango.com/2010/09/08/538-revision-26/', 0, 'revision', '', 0),
(1273, 3, '2010-09-08 04:03:16', '2010-09-08 08:03:16', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. For example:\r\n\r\n[code language="javascript"]\r\n        $(document).ready(function () {\r\n\r\n            $(&quot;#container p:nth-child(odd)&quot;).css(&quot;color&quot;, &quot;#ff0000&quot;);\r\n\r\n        });\r\n[/code]\r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr-jq.html">Check out the jQuery version in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n\r\nWhile that will style the paragraphs the way I want, it''s not a portable and reusable solution. Using Selectivizr is substantially easier because I can now specify reusable CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the page looking for &lt;link&gt;‘d style sheets which are downloaded using a XmlHttpRequest (or ActiveX for IE6). The style sheets are then parsed for rules containing CSS3 selectors. Any matching rules are extracted and passed to a JavaScript library (such as jQuery, Prototype, NWMatcher etc.) which selects matching elements from the page. These elements are then given a unique className and, if necessary, event handlers are added (if interactive pseudo-classes such as :hover, :focus, : checked etc. need to be emulated). The original CSS rule is then replaced with the same className and once all rules are processed, the original style sheet content is replaced with the modified one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Pseudo-Classes in Internet Explorer 6, 7, and 8 using the Selectivizr JavaScript Library', 0, '', 'publish', 'open', 'open', '', 'start-using-css3-pseudo-classes-in-internet-explorer-6-7-and-8-using-the-selectivizr-javascript-library', '', '\nhttp://remysharp.com/2009/01/07/html5-enabling-script/', '2010-09-08 19:44:35', '2010-09-08 23:44:35', '', 0, 'http://blog.reybango.com/?p=1273', 0, 'post', '', 5),
(1274, 3, '2010-09-08 16:39:03', '2010-09-08 20:39:03', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth; we still have older browsers to support. So while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\n\nInternet Explorer is definitely one of those that needs special attention which is where a new library called Selectivizr comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8.\n\nThe inclusion of Selectivizr is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, include the library. Makes sense since IE9 should include many of these pseudo-selectors.\n\n[code language="html"]\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\n&lt;!--[if lt IE 9]&gt;\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\n&lt;![endif]--&gt; 	\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \n[/code]\n\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to highlight every odd member of my unordered list like this:\n\n[code language="css"]\nli:nth-child(odd) { color: #ff0000; }\n[/code]\n\n\n\n[code language="html"]\n&lt;ul&gt;\n	&lt;li&gt;Test 1&lt;/li&gt;\n	&lt;li&gt;Test 2&lt;/li&gt;\n	&lt;li&gt;Test 3&lt;/li&gt;\n	&lt;li&gt;Test 4&lt;/li&gt;\n	&lt;li&gt;Test 5&lt;/li&gt;\n&lt;/ul&gt;\n[/code]', 'CSS3 Selectors for Internet Explorer', 0, '', 'inherit', 'open', 'open', '', '1273-revision', '', '', '2010-09-08 16:39:03', '2010-09-08 20:39:03', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision/', 0, 'revision', '', 0),
(1275, 3, '2010-09-08 16:48:46', '2010-09-08 20:48:46', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\n\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8.\n\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, include the library. Makes sense since IE9 should include many of these pseudo-selectors.\n\n[code language="html"]\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\n&lt;!--[if lt IE 9]&gt;\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\n&lt;![endif]--&gt; 	\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \n[/code]\n\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\n\n[code language="css"]\n#container p:nth-child(odd) { color: #ff0000; }\n[/code]\n\nand it will render correctly in Internet Explorer versions 6-8. <a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out</a>.\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-2', '', '', '2010-09-08 16:48:46', '2010-09-08 20:48:46', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-2/', 0, 'revision', '', 0),
(1276, 3, '2010-09-08 16:55:34', '2010-09-08 20:55:34', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\n\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\n\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\n\n[code language="html"]\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\n&lt;!--[if lt IE 9]&gt;\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\n&lt;![endif]--&gt; 	\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \n[/code]\n\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\n\n[code language="css"]\n#container p:nth-child(odd) { color: #ff0000; }\n[/code]\n\nand it will render correctly in Internet Explorer versions 6-8. <a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out</a>.\n\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\n\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-3', '', '', '2010-09-08 16:55:34', '2010-09-08 20:55:34', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-3/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1277, 3, '2010-09-08 16:55:59', '2010-09-08 20:55:59', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. <a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out</a>.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-4', '', '', '2010-09-08 16:55:59', '2010-09-08 20:55:59', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-4/', 0, 'revision', '', 0),
(1278, 3, '2010-09-08 16:57:23', '2010-09-08 20:57:23', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. <a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out</a>.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-5', '', '', '2010-09-08 16:57:23', '2010-09-08 20:57:23', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-5/', 0, 'revision', '', 0),
(1279, 3, '2010-09-08 16:57:30', '2010-09-08 20:57:30', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. <a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out</a>.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-6', '', '', '2010-09-08 16:57:30', '2010-09-08 20:57:30', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-6/', 0, 'revision', '', 0),
(1280, 3, '2010-09-08 17:01:50', '2010-09-08 21:01:50', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-7', '', '', '2010-09-08 17:01:50', '2010-09-08 21:01:50', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-7/', 0, 'revision', '', 0),
(1281, 3, '2010-09-08 17:01:58', '2010-09-08 21:01:58', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-8', '', '', '2010-09-08 17:01:58', '2010-09-08 21:01:58', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-8/', 0, 'revision', '', 0),
(1282, 3, '2010-09-08 17:07:46', '2010-09-08 21:07:46', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-9', '', '', '2010-09-08 17:07:46', '2010-09-08 21:07:46', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-9/', 0, 'revision', '', 0),
(1283, 3, '2010-09-08 17:08:04', '2010-09-08 21:08:04', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-10', '', '', '2010-09-08 17:08:04', '2010-09-08 21:08:04', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-10/', 0, 'revision', '', 0),
(1284, 3, '2010-09-08 17:19:50', '2010-09-08 21:19:50', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n\r\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-11', '', '', '2010-09-08 17:19:50', '2010-09-08 21:19:50', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-11/', 0, 'revision', '', 0),
(1285, 3, '2010-09-08 17:20:03', '2010-09-08 21:20:03', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n\r\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-12', '', '', '2010-09-08 17:20:03', '2010-09-08 21:20:03', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-12/', 0, 'revision', '', 0),
(1286, 3, '2010-09-08 17:22:19', '2010-09-08 21:22:19', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n\r\n', 'CSS3 Selectors for Internet Explorer using Selectivizr', 0, '', 'inherit', 'open', 'open', '', '1273-revision-13', '', '', '2010-09-08 17:22:19', '2010-09-08 21:22:19', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-13/', 0, 'revision', '', 0),
(1287, 3, '2010-09-08 17:22:54', '2010-09-08 21:22:54', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-14', '', '', '2010-09-08 17:22:54', '2010-09-08 21:22:54', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-14/', 0, 'revision', '', 0),
(1288, 3, '2010-09-08 17:23:05', '2010-09-08 21:23:05', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-15', '', '', '2010-09-08 17:23:05', '2010-09-08 21:23:05', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-15/', 0, 'revision', '', 0),
(1289, 3, '2010-09-08 17:40:52', '2010-09-08 21:40:52', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\n\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\n\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\n\n[code language="html"]\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\n&lt;!--[if lt IE 9]&gt;\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\n&lt;![endif]--&gt; 	\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \n[/code]\n\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\n\n[code language="css"]\n#container p:nth-child(odd) { color: #ff0000; }\n[/code]\n\nand it will render correctly in Internet Explorer versions 6-8. \n\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\n\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\n\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\n\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\n\n<h2>How Does this Work?</h2>\n\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\n\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\n\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his more thorough explanation here\n\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-16', '', '', '2010-09-08 17:40:52', '2010-09-08 21:40:52', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-16/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1290, 3, '2010-09-08 17:41:41', '2010-09-08 21:41:41', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-17', '', '', '2010-09-08 17:41:41', '2010-09-08 21:41:41', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-17/', 0, 'revision', '', 0),
(1291, 3, '2010-09-08 17:41:42', '2010-09-08 21:41:42', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-18', '', '', '2010-09-08 17:41:42', '2010-09-08 21:41:42', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-18/', 0, 'revision', '', 0),
(1292, 3, '2010-09-08 17:42:45', '2010-09-08 21:42:45', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Know as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-19', '', '', '2010-09-08 17:42:45', '2010-09-08 21:42:45', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-19/', 0, 'revision', '', 0),
(1293, 3, '2010-09-08 17:42:50', '2010-09-08 21:42:50', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Know as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-20', '', '', '2010-09-08 17:42:50', '2010-09-08 21:42:50', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-20/', 0, 'revision', '', 0),
(1294, 3, '2010-09-08 17:44:01', '2010-09-08 21:44:01', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-21', '', '', '2010-09-08 17:44:01', '2010-09-08 21:44:01', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-21/', 0, 'revision', '', 0),
(1295, 3, '2010-09-08 17:44:07', '2010-09-08 21:44:07', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-22', '', '', '2010-09-08 17:44:07', '2010-09-08 21:44:07', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-22/', 0, 'revision', '', 0),
(1296, 3, '2010-09-08 17:44:56', '2010-09-08 21:44:56', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-23', '', '', '2010-09-08 17:44:56', '2010-09-08 21:44:56', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-23/', 0, 'revision', '', 0),
(1297, 3, '2010-09-08 18:02:53', '2010-09-08 22:02:53', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-24', '', '', '2010-09-08 18:02:53', '2010-09-08 22:02:53', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-24/', 0, 'revision', '', 0),
(1298, 3, '2010-09-08 18:08:24', '2010-09-08 22:08:24', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-25', '', '', '2010-09-08 18:08:24', '2010-09-08 22:08:24', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-25/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1299, 3, '2010-09-08 18:08:49', '2010-09-08 22:08:49', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. This is substantially easier because I can now specify my CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-26', '', '', '2010-09-08 18:08:49', '2010-09-08 22:08:49', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-26/', 0, 'revision', '', 0),
(1300, 3, '2010-09-08 18:24:43', '2010-09-08 22:24:43', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. For example:\r\n\r\n[code language="javascript"]\r\n        $(document).ready(function () {\r\n\r\n            $(&quot;#container p:nth-child(odd)&quot;).css(&quot;color&quot;, &quot;#ff0000&quot;);\r\n\r\n        });\r\n[/code]\r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr-jq.html">Check out the jQuery version in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n\r\nWhile that will style the paragraphs the way I want, it''s not a portable and reusable solution. Using Selectivizr is substantially easier because I can now specify reusable CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-27', '', '', '2010-09-08 18:24:43', '2010-09-08 22:24:43', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-27/', 0, 'revision', '', 0),
(1301, 3, '2010-09-08 18:25:03', '2010-09-08 22:25:03', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. For example:\r\n\r\n[code language="javascript"]\r\n        $(document).ready(function () {\r\n\r\n            $(&quot;#container p:nth-child(odd)&quot;).css(&quot;color&quot;, &quot;#ff0000&quot;);\r\n\r\n        });\r\n[/code]\r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr-jq.html">Check out the jQuery version in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n\r\nWhile that will style the paragraphs the way I want, it''s not a portable and reusable solution. Using Selectivizr is substantially easier because I can now specify reusable CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7. and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-28', '', '', '2010-09-08 18:25:03', '2010-09-08 22:25:03', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-28/', 0, 'revision', '', 0),
(1302, 3, '2010-09-08 18:26:52', '2010-09-08 22:26:52', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. For example:\r\n\r\n[code language="javascript"]\r\n        $(document).ready(function () {\r\n\r\n            $(&quot;#container p:nth-child(odd)&quot;).css(&quot;color&quot;, &quot;#ff0000&quot;);\r\n\r\n        });\r\n[/code]\r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr-jq.html">Check out the jQuery version in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n\r\nWhile that will style the paragraphs the way I want, it''s not a portable and reusable solution. Using Selectivizr is substantially easier because I can now specify reusable CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Selectors in Internet Explorer 6, 7, and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-29', '', '', '2010-09-08 18:26:52', '2010-09-08 22:26:52', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-29/', 0, 'revision', '', 0),
(1303, 3, '2010-09-08 18:27:41', '2010-09-08 22:27:41', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. For example:\r\n\r\n[code language="javascript"]\r\n        $(document).ready(function () {\r\n\r\n            $(&quot;#container p:nth-child(odd)&quot;).css(&quot;color&quot;, &quot;#ff0000&quot;);\r\n\r\n        });\r\n[/code]\r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr-jq.html">Check out the jQuery version in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n\r\nWhile that will style the paragraphs the way I want, it''s not a portable and reusable solution. Using Selectivizr is substantially easier because I can now specify reusable CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Pseudo-Classes in Internet Explorer 6, 7, and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-30', '', '', '2010-09-08 18:27:41', '2010-09-08 22:27:41', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-30/', 0, 'revision', '', 0),
(1304, 3, '2010-09-08 18:28:05', '2010-09-08 22:28:05', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. For example:\r\n\r\n[code language="javascript"]\r\n        $(document).ready(function () {\r\n\r\n            $(&quot;#container p:nth-child(odd)&quot;).css(&quot;color&quot;, &quot;#ff0000&quot;);\r\n\r\n        });\r\n[/code]\r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr-jq.html">Check out the jQuery version in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n\r\nWhile that will style the paragraphs the way I want, it''s not a portable and reusable solution. Using Selectivizr is substantially easier because I can now specify reusable CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the document looking for <link>''d stylesheets. Each stylesheet is the loaded via and XmlHttpRequest (or ActiveX for IE6). It is then parsed using regex''s and any rules that use css3 selectors are extracted. These rules are then parsed to a JavaScript library (like jQuery, Prototype, NMWmatcher etc) which select the matching elements. These elements are then modified using event handlers (for :hover, :checked pseudo-classes) and classNames are applied to them. The original rule is then replaced with the same className. After all rules are processed, the script replaces the orignal stylesheets content with the modifed one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Pseudo-Classes in Internet Explorer 6, 7, and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-31', '', '', '2010-09-08 18:28:05', '2010-09-08 22:28:05', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-31/', 0, 'revision', '', 0),
(1305, 3, '2010-09-08 19:44:27', '2010-09-08 23:44:27', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. For example:\r\n\r\n[code language="javascript"]\r\n        $(document).ready(function () {\r\n\r\n            $(&quot;#container p:nth-child(odd)&quot;).css(&quot;color&quot;, &quot;#ff0000&quot;);\r\n\r\n        });\r\n[/code]\r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr-jq.html">Check out the jQuery version in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n\r\nWhile that will style the paragraphs the way I want, it''s not a portable and reusable solution. Using Selectivizr is substantially easier because I can now specify reusable CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the page looking for &lt;link&gt;‘d style sheets which are downloaded using a XmlHttpRequest (or ActiveX for IE6). The style sheets are then parsed for rules containing CSS3 selectors. Any matching rules are extracted and passed to a JavaScript library (such as jQuery, Prototype, NWMatcher etc.) which selects matching elements from the page. These elements are then given a unique className and, if necessary, event handlers are added (if interactive pseudo-classes such as :hover, :focus, : checked etc. need to be emulated). The original CSS rule is then replaced with the same className and once all rules are processed, the original style sheet content is replaced with the modified one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Pseudo-Classes in Internet Explorer 6, 7, and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-autosave', '', '', '2010-09-08 19:44:27', '2010-09-08 23:44:27', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-autosave/', 0, 'revision', '', 0),
(1306, 3, '2010-09-08 19:41:54', '2010-09-08 23:41:54', 'Now that everyone is all giddy about CSS3 and all of the coolness it offers, lets get back down to earth. We still have older browsers to support so while using some of the new nifty features is definitely cool, we need to ensure we understand that at least 80% of web users won''t be on a cool new browser.\r\n\r\n<h2>Enter Selectivizr, the Library Formerly Known as ie-css3.js</h2>\r\n\r\nInternet Explorer is definitely one of those that needs special attention which is where a new library called <a href="http://selectivizr.com/">Selectivizr</a> comes in. It''s a JavaScript library that allows you to take advantage of CSS3 selectors now, even for users of Internet Explorer 6 through 8, by emulating these pseudo-selectors via JavaScript. It''s become such a hit that it was even nominated for Innovation of the Year in <a href="http://www.thenetawards.com/">.net magazine''s 2010 awards</a>.\r\n\r\nThe inclusion of <a href="http://selectivizr.com/">Selectivizr</a> is extremely easy. You add it in using a standard <em>script</em> tag just like any other JavaScript file. Notice that we''re using IE conditional statements to determine the browser version and if it''s less than IE9, the library gets included. Makes sense since IE9 should include many of these pseudo-selectors.\r\n\r\n[code language="html"]\r\n&lt;script src=&quot;jquery-1.4.2.min.js&quot;&gt;&lt;/script&gt;\r\n&lt;!--[if lt IE 9]&gt;\r\n	&lt;script src=&quot;selectivizr.js&quot;&gt;&lt;/script&gt;\r\n	&lt;noscript&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;css/ie-fallback.css&quot; media=&quot;screen, projection&quot;&gt;&lt;/noscript&gt;\r\n&lt;![endif]--&gt; 	\r\n&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot;&gt; \r\n[/code]\r\n\r\nOnce included, you''re now free to add CSS3 pseudo-classes to your style sheet. For example, I can now use the nth-child() pseudo-class to set the text to every odd numbered paragraph within my container div to red:\r\n\r\n[code language="css"]\r\n#container p:nth-child(odd) { color: #ff0000; }\r\n[/code]\r\n\r\nand it will render correctly in Internet Explorer versions 6-8. \r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr.html">Check it out in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n<a href="http://reybango.com/demos/selectivizr/selectivizr.html">Check it out in Internet Explorer with Selectivizr included.</a>\r\n\r\nIn order to have done this previously, I would''ve have to had to rely on complex JavaScript or using methods included in a JavaScript library (e.g. <a href="http://api.jquery.com/nth-child-selector/">jQuery''s nth-child method</a>) to be able to grab the DOM element and style it. For example:\r\n\r\n[code language="javascript"]\r\n        $(document).ready(function () {\r\n\r\n            $(&quot;#container p:nth-child(odd)&quot;).css(&quot;color&quot;, &quot;#ff0000&quot;);\r\n\r\n        });\r\n[/code]\r\n\r\n<a href="http://reybango.com/demos/selectivizr/noselectivizr-jq.html">Check out the jQuery version in Internet Explorer with Selectivizr <strong>NOT</strong> included.</a>\r\n\r\nWhile that will style the paragraphs the way I want, it''s not a portable and reusable solution. Using Selectivizr is substantially easier because I can now specify reusable CSS rules where they belong; in a style sheet.\r\n\r\nThe main thing that you NEED to have is a JavaScript library with a DOM selector engine. Selectivizr has support for <a href="http://jquery.com/">jQuery</a>, <a href="http://mootools.net/">MooTools</a>, <a href="http://www.dojotoolkit.org/">Dojo</a>, <a href="http://www.prototypejs.org/">Prototype</a>, <a href="http://developer.yahoo.com/yui/2/">YUI</a>, <a href="http://www.domassistant.com/">DOMAssistant</a> and the <a href="http://javascript.nwbox.com/NWMatcher/">NWMatcher</a> selector engine. Considering that most sites leverage at least one of these libs, that''s pretty good coverage.\r\n\r\nOne of the things I did notice when doing a <a href="http://selectivizr.com/js/ie.js">view source on the Selectivizr website</a> is something that I had already thought would be a good idea. The author, Keith Clark, combines his Selectivizr code with <a href="http://remysharp.com/2009/01/07/html5-enabling-script/">Remy Sharp''s html5shiv</a> which makes a lot of sense considering html5shiv allows you style HTML5 tags in non-supporting browsers. So rolling up these two libs (or Modernizr) is a good idea. One less http request to make.\r\n\r\n<h2>How Does this Work?</h2>\r\n\r\nI pinged Keith so I can get a better understanding of the magic going on under the hood and here''s what he said:\r\n\r\n<blockquote>Basically, the script scans the page looking for <link>‘d style sheets which are downloaded using a XmlHttpRequest (or ActiveX for IE6). The style sheets are then parsed for rules containing CSS3 selectors. Any matching rules are extracted and passed to a JavaScript library (such as jQuery, Prototype, NWMatcher etc.) which selects matching elements from the page. These elements are then given a unique className and, if necessary, event handlers are added (if interactive pseudo-classes such as :hover, :focus, : checked etc. need to be emulated). The original CSS rule is then replaced with the same className and once all rules are processed, the original style sheet content is replaced with the modified one.</blockquote>\r\n\r\nSo if you''re wondering why there''s a dependency on a JS lib, there ya go. For a deeper dive into the how-to''s check out his <a href="http://www.keithclark.co.uk/labs/ie-css3/">more thorough explanation here</a>.\r\n\r\n', 'Start Using CSS3 Pseudo-Classes in Internet Explorer 6, 7, and 8 using the Selectivizr JavaScript Library', 0, '', 'inherit', 'open', 'open', '', '1273-revision-32', '', '', '2010-09-08 19:41:54', '2010-09-08 23:41:54', '', 1273, 'http://blog.reybango.com/2010/09/08/1273-revision-32/', 0, 'revision', '', 0),
(1395, 3, '2010-09-28 09:58:57', '2010-09-28 13:58:57', '<a href="http://www.msdnevents.com/wp7"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/wp7train1.png" alt="" title="wp7train" width="250" height="147" class="alignleft size-full wp-image-1406" style="float:left; margin-right: 5px; margin-bottom: 5px;" /></a>I''m pretty excited about the new <a href="http://www.windowsphone7.com/">Windows Phone 7</a>. I''ve used it several times and I have to say it is a VERY hot phone and I can''t wait to get mine. I just got word that Microsoft will be putting on events nationwide to help developers learn how to build applications for this new platform. Here''s the deal:\r\n\r\n<blockquote>Experience two days of fast-paced learning and create high-demand applications with Windows Phone 7. First, you’ll go under the hood of Windows Phone 7. The next day, attend a hands-on app building workshop. Bring your best ideas and prepare to upload into the full-service Marketplace. Visit <a href="http://www.msdnevents.com/wp7">www.msdnevents.com/wp7</a>  for details.</blockquote>\r\n\r\nIf you''re a mobile developer or considering jumping into the mobile space, this is a great opportunity to get great <strong>FREE</strong> exposure to Microsoft''s newest platform and get your apps loaded up onto the marketplace quickly.\r\n ', 'Want to Build Apps for Windows Phone 7? Get Free Training at Various Locations Nationwide.', 0, '', 'publish', 'open', 'open', '', 'want-to-build-apps-for-windows-phone-7-get-free-training-at-various-locations-nationwide', '', '', '2010-09-28 09:58:57', '2010-09-28 13:58:57', '', 0, 'http://blog.reybango.com/?p=1395', 0, 'post', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1309, 3, '2010-09-15 13:44:01', '2010-09-15 17:44:01', 'Wow, I can’t believe this day has come! After so many years of developers wishing for a better browser from Microsoft, one that was more consistent with web standards and would allow them to develop cross-browser websites leveraging the same markup, today marks the day that developers finally have that browser; Internet Explorer 9 Beta. It’s an important day because this release, although just a beta, is the culmination of a lot of effort and most importantly, listening, by the Internet Explorer team. \r\n\r\nWhile the Internet Explorer browser has enjoyed widespread adoption by consumers, it hasn’t always been viewed fondly by the development community. The important work of building cross-browser compliant websites has often been cumbersome, due in part to differing interpretations of browser APIs in previous versions of Internet Explorer.  The differences forced developers, myself included, to find workarounds for functionality that, in many cases, had a clearly defined standard behavior.  \r\n\r\n<h2>HTML5, CSS3, DOM</h2>\r\n\r\nWith Internet Explorer 9, there’s been a concerted effort by Microsoft to focus on standards-based functionality that will ease cross-browser development while providing the features needed to build rich and immersive websites. Take, for example, IE9’s support for many of the features of HTML5 and CSS3, the specifications which are defining the future of the web. By including support for features such as Canvas, video, @font-face, CSS3 media queries, SVG and many others, we now have a rich base to provide more compelling experiences to end users. In addition, by ensuring that these features are conformant to the defined specifications, the sites we build should work with any browser that also supports those specifications.\r\n\r\nTo take it a step further, the IE team has enhanced the performance of many of the new HTML5 features by taking advantage of the GPU. This means that text, graphics and video will be substantially smoother and more responsive allowing websites to perform more like true applications. \r\n\r\nAnd at the DOM level, important changes have been made to be consistent with the defined specifications making it easier to whittle down browser-specific code. For example, support for the W3C DOM Events specification (addEventListener & removeEventListener) in place of the proprietary IE model (attacheEvent & detachEvent) has been one of the most welcomed changes to IE9 as has the introduction of getElementsByClassName, supported for some time in the DOM Level 2 specification and now available in IE9.\r\n\r\n<h2>JavaScript</h2>\r\n\r\nEqually important is the performance boost provided by the new Chakra JavaScript engine which basically blows away older versions of Internet Explorer and brings IE9 in line with modern browsers such as Chrome, Firefox and Opera. JavaScript development continues to become more complex and intricate so the importance of these performance enhancements can’t be understated. The Chakra engine interprets, compiles, and executes code in parallel and takes advantage of multiple CPU cores when available and the results are obvious by the greatly improved benchmark scores from the <a href="http://www2.webkit.org/perf/sunspider-0.9.1/sunspider.html">Webkit Sunspider JavaScript Benchmarks</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider-300x211.png" alt="" title="01_02_Performance_Sunspider" width="300" height="211" class="alignleft size-medium wp-image-1310" /></a>\r\n\r\n<em>Chakra JavaScript Engine – WebKit SunSpider Benchmarks</em>\r\n\r\n<h2>Updated Developer Tools</h2>\r\n\r\nSubstantial work has been done to update the Internet Explorer Developer Tools. The built-in tools, usually found by pressing F12, provided quite a bit of capabilities but were missing key components that were essential to effective testing and debugging of client-side source code. With this update, the tools now include a much anticipated network traffic inspector, Console tab, CSS editing, and an improved JavaScript profiler.\r\n\r\nThe new Console tab is a welcome addition providing the ability to inspect script easily as well as receive important page-specific error and warning messages.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab-300x198.png" alt="" title="console-tab" width="300" height="198" class="alignleft size-medium wp-image-1312" /></a>\r\n\r\n<em>IE Developer Tools – Console Tab</em>\r\n\r\nOf the new features, the one that I’m most excited about is the network traffic inspector, mainly because the bulk of my application development involves Ajax-based requests. \r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1-300x158.png" alt="" title="ie-dev-tools-1" width="300" height="158" class="alignleft size-medium wp-image-1311" /></a>\r\n\r\n<em>IE Developer Tools – Network Performance of Specific Assets</em>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2-300x158.png" alt="" title="ie-dev-tools-2" width="300" height="158" class="alignleft size-medium wp-image-1313" /></a>\r\n\r\n<em>IE Developer Tools – Network Request Information</em>\r\n\r\nI can now do such things as determine load times of specific assets or inspect my request/response headers, cookies and return values without the need for breaking out of the browser to a 3rd party application such as Fiddler or Charles.\r\n\r\n<h2>Get to Using it Today</h2>\r\n\r\nA lot of effort has gone into making Internet Explorer 9 Beta a better browser. There’s certainly more work to be done but the fact that we now have a version of IE that provides standards-based functionality and allows us to use the same markup across browsers is pretty hot. \r\n\r\nTo really appreciate what you can build with IE9, though, you need to just start digging into it. Microsoft has created the following sites to give developers the knowledge and inspiration they need to leverage IE9 to its fullest:\r\n\r\n<ul>\r\n<li><a href="http://www.beautyoftheweb.com/">Beauty of the Web</a> – Explore all of the new features of Microsoft’s latest browser and check out the cool demos built using the advanced features of Internet Explorer 9 Beta</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/">Internet Explorer 9 Test Drive</a> – This site breaks down the new, advanced features of Internet Explorer 9 Beta and lets you get a visual of what’s possible with each bit of functionality</li>\r\n<li><a href="http://msdn.microsoft.com/ie/ff468705.aspx">Internet Explorer Guide for Developers</a> – The developer documentation you’ll need to learn how about the specifics of Internet Explorer 9 Beta</li></ul>\r\n\r\nIt feels great to know that we’re on a path to being able to build truly feature-rich websites that will be easier to maintain and provide a more exciting experience to users. While we’ll still need to support older browsers for some time, the fact that all the major browser vendors are heading in the same direction is going to allow us to build some truly amazing things. I can’t wait! \r\n', 'Internet Explorer 9 Beta has Arrived! The Features that Matter to Me as a Developer.', 0, '', 'publish', 'open', 'open', '', 'internet-explorer-9-beta-has-arrived-the-features-that-matter-to-me-as-a-developer', '', '', '2010-09-15 13:44:01', '2010-09-15 17:44:01', '', 0, 'http://blog.reybango.com/?p=1309', 0, 'post', '', 7),
(1310, 3, '2010-09-15 13:20:26', '2010-09-15 17:20:26', '', '01_02_Performance_Sunspider', 0, '', 'inherit', 'open', 'open', '', '01_02_performance_sunspider', '', '', '2010-09-15 13:20:26', '2010-09-15 17:20:26', '', 1309, 'http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider.png', 0, 'attachment', 'image/png', 0),
(1311, 3, '2010-09-15 13:22:18', '2010-09-15 17:22:18', '', 'ie-dev-tools-1', 0, '', 'inherit', 'open', 'open', '', 'ie-dev-tools-1', '', '', '2010-09-15 13:22:18', '2010-09-15 17:22:18', '', 1309, 'http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1.png', 0, 'attachment', 'image/png', 0),
(1312, 3, '2010-09-15 13:22:52', '2010-09-15 17:22:52', '', 'console-tab', 0, '', 'inherit', 'open', 'open', '', 'console-tab', '', '', '2010-09-15 13:22:52', '2010-09-15 17:22:52', '', 1309, 'http://blog.reybango.com/wp-content/uploads/2010/09/console-tab.png', 0, 'attachment', 'image/png', 0),
(1313, 3, '2010-09-15 13:23:28', '2010-09-15 17:23:28', '', 'ie-dev-tools-2', 0, '', 'inherit', 'open', 'open', '', 'ie-dev-tools-2', '', '', '2010-09-15 13:23:28', '2010-09-15 17:23:28', '', 1309, 'http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2.png', 0, 'attachment', 'image/png', 0),
(1314, 3, '2010-09-15 13:25:31', '2010-09-15 17:25:31', 'Wow, I can’t believe this day has come! After so many years of developers wishing for a better browser from Microsoft, one that was more consistent with web standards and would allow them to develop cross-browser websites leveraging the same markup, today marks the day that developers finally have that browser; Internet Explorer 9 Beta. It’s an important day because this release, although just a beta, is the culmination of a lot of effort and most importantly, listening, by the Internet Explorer team. \n\nWhile the Internet Explorer browser has enjoyed widespread adoption by consumers, it hasn’t always been viewed fondly by the development community. The important work of building cross-browser compliant websites has often been cumbersome, due in part to differing interpretations of browser APIs in previous versions of Internet Explorer.  The differences forced developers, myself included, to find workarounds for functionality that, in many cases, had a clearly defined standard behavior.  \n\n<h2>HTML5, CSS3, DOM</h2>\n\nWith Internet Explorer 9, there’s been a concerted effort by Microsoft to focus on standards-based functionality that will ease cross-browser development while providing the features needed to build rich and immersive websites. Take, for example, IE9’s support for many of the features of HTML5 and CSS3, the specifications which are defining the future of the web. By including support for features such as Canvas, video, @font-face, CSS3 media queries, SVG and many others, we now have a rich base to provide more compelling experiences to end users. In addition, by ensuring that these features are conformant to the defined specifications, the sites we build should work with any browser that also supports those specifications.\n\nTo take it a step further, the IE team has enhanced the performance of many of the new HTML5 features by taking advantage of the GPU. This means that text, graphics and video will be substantially smoother and more responsive allowing websites to perform more like true applications. \n\nAnd at the DOM level, important changes have been made to be consistent with the defined specifications making it easier to whittle down browser-specific code. For example, support for the W3C DOM Events specification (addEventListener & removeEventListener) in place of the proprietary IE model (attacheEvent & detachEvent) has been one of the most welcomed changes to IE9 as has the introduction of getElementsByClassName, supported for some time in the DOM Level 2 specification and now available in IE9.\n\n<h2>JavaScript</h2>\n\nEqually important is the performance boost provided by the new Chakra JavaScript engine which basically blows away older versions of Internet Explorer and brings IE9 in line with modern browsers such as Chrome, Firefox and Opera. JavaScript development continues to become more complex and intricate so the importance of these performance enhancements can’t be understated. The Chakra engine interprets, compiles, and executes code in parallel and takes advantage of multiple CPU cores when available and the results are obvious by the greatly improved benchmark scores from the Webkit Sunspider JavaScript Benchmarks.\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider-300x211.png" alt="" title="01_02_Performance_Sunspider" width="300" height="211" class="alignleft size-medium wp-image-1310" /></a>\n\n<em>Chakra JavaScript Engine – WebKit SunSpider Benchmarks</em>\n\n<h2>Updated Developer Tools</h2>\n\nSubstantial work has been done to update the Internet Explorer Developer Tools. The built-in tools, usually found by pressing F12, provided quite a bit of capabilities but were missing key components that were essential to effective testing and debugging of client-side source code. With this update, the tools now include a much anticipated network traffic inspector, Console tab, CSS editing, and an improved JavaScript profiler.\n\nThe new Console tab is a welcome addition providing the ability to inspect script easily as well as receive important page-specific error and warning messages.\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab-300x198.png" alt="" title="console-tab" width="300" height="198" class="alignleft size-medium wp-image-1312" /></a>\n\n<em>IE Developer Tools – Console Tab</em>\n\nOf the new features, the one that I’m most excited about is the network traffic inspector, mainly because the bulk of my application development involves Ajax-based requests. \n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1-300x158.png" alt="" title="ie-dev-tools-1" width="300" height="158" class="alignleft size-medium wp-image-1311" /></a>\n\n<em>IE Developer Tools – Network Performance of Specific Assets</em>\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2-300x158.png" alt="" title="ie-dev-tools-2" width="300" height="158" class="alignleft size-medium wp-image-1313" /></a>\n\n<em>IE Developer Tools – Network Request Information</em>\n\nI can now do such things as determine load times of specific assets or inspect my request/response headers, cookies and return values without the need for breaking out of the browser to a 3rd party application such as Fiddler or Charles.\n\n<h2>Get to Using it Today</h2>\n\nA lot of effort has gone into making Internet Explorer 9 Beta a better browser. There’s certainly more work to be done but the fact that we now have a version of IE that provides standards-based functionality and allows us to use the same markup across browsers is pretty hot. \n\nTo really appreciate what you can build with IE9, though, you need to just start digging into it. Microsoft has created the following sites to give developers the knowledge and inspiration they need to leverage IE9 to its fullest:\n\n<ul>\n<li><a href="http://www.beautyoftheweb.com/">Beauty of the Web</a> – Explore all of the new features of Microsoft’s latest browser and check out the cool demos built using the advanced features of Internet Explorer 9 Beta</li>\n<li><a href="http://ie.microsoft.com/testdrive/">Internet Explorer 9 Test Drive</a> – This site breaks down the new, advanced features of Internet Explorer 9 Beta and lets you get a visual of what’s possible with each bit of functionality</li>\n<li>Internet Explorer Guide for Developers – The developer documentation you’ll need to learn how about the specifics of Internet Explorer 9 Beta</li></ul>\n\nIt feels great to know that we’re on a path to being able to build truly feature-rich websites that will be easier to maintain and provide a more exciting experience to users. While we’ll still need to support older browsers for some time, the fact that all the major browser vendors are heading in the same direction is going to allow us to build some truly amazing things. I can’t wait! \n', 'Internet Explorer 9 Beta has Arrived!', 0, '', 'inherit', 'open', 'open', '', '1309-revision', '', '', '2010-09-15 13:25:31', '2010-09-15 17:25:31', '', 1309, 'http://blog.reybango.com/2010/09/15/1309-revision/', 0, 'revision', '', 0),
(1315, 3, '2010-09-15 13:26:07', '2010-09-15 17:26:07', 'Wow, I can’t believe this day has come! After so many years of developers wishing for a better browser from Microsoft, one that was more consistent with web standards and would allow them to develop cross-browser websites leveraging the same markup, today marks the day that developers finally have that browser; Internet Explorer 9 Beta. It’s an important day because this release, although just a beta, is the culmination of a lot of effort and most importantly, listening, by the Internet Explorer team. \r\n\r\nWhile the Internet Explorer browser has enjoyed widespread adoption by consumers, it hasn’t always been viewed fondly by the development community. The important work of building cross-browser compliant websites has often been cumbersome, due in part to differing interpretations of browser APIs in previous versions of Internet Explorer.  The differences forced developers, myself included, to find workarounds for functionality that, in many cases, had a clearly defined standard behavior.  \r\n\r\n<h2>HTML5, CSS3, DOM</h2>\r\n\r\nWith Internet Explorer 9, there’s been a concerted effort by Microsoft to focus on standards-based functionality that will ease cross-browser development while providing the features needed to build rich and immersive websites. Take, for example, IE9’s support for many of the features of HTML5 and CSS3, the specifications which are defining the future of the web. By including support for features such as Canvas, video, @font-face, CSS3 media queries, SVG and many others, we now have a rich base to provide more compelling experiences to end users. In addition, by ensuring that these features are conformant to the defined specifications, the sites we build should work with any browser that also supports those specifications.\r\n\r\nTo take it a step further, the IE team has enhanced the performance of many of the new HTML5 features by taking advantage of the GPU. This means that text, graphics and video will be substantially smoother and more responsive allowing websites to perform more like true applications. \r\n\r\nAnd at the DOM level, important changes have been made to be consistent with the defined specifications making it easier to whittle down browser-specific code. For example, support for the W3C DOM Events specification (addEventListener & removeEventListener) in place of the proprietary IE model (attacheEvent & detachEvent) has been one of the most welcomed changes to IE9 as has the introduction of getElementsByClassName, supported for some time in the DOM Level 2 specification and now available in IE9.\r\n\r\n<h2>JavaScript</h2>\r\n\r\nEqually important is the performance boost provided by the new Chakra JavaScript engine which basically blows away older versions of Internet Explorer and brings IE9 in line with modern browsers such as Chrome, Firefox and Opera. JavaScript development continues to become more complex and intricate so the importance of these performance enhancements can’t be understated. The Chakra engine interprets, compiles, and executes code in parallel and takes advantage of multiple CPU cores when available and the results are obvious by the greatly improved benchmark scores from the <a href="http://www2.webkit.org/perf/sunspider-0.9.1/sunspider.html">Webkit Sunspider JavaScript Benchmarks</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider-300x211.png" alt="" title="01_02_Performance_Sunspider" width="300" height="211" class="alignleft size-medium wp-image-1310" /></a>\r\n\r\n<em>Chakra JavaScript Engine – WebKit SunSpider Benchmarks</em>\r\n\r\n<h2>Updated Developer Tools</h2>\r\n\r\nSubstantial work has been done to update the Internet Explorer Developer Tools. The built-in tools, usually found by pressing F12, provided quite a bit of capabilities but were missing key components that were essential to effective testing and debugging of client-side source code. With this update, the tools now include a much anticipated network traffic inspector, Console tab, CSS editing, and an improved JavaScript profiler.\r\n\r\nThe new Console tab is a welcome addition providing the ability to inspect script easily as well as receive important page-specific error and warning messages.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab-300x198.png" alt="" title="console-tab" width="300" height="198" class="alignleft size-medium wp-image-1312" /></a>\r\n\r\n<em>IE Developer Tools – Console Tab</em>\r\n\r\nOf the new features, the one that I’m most excited about is the network traffic inspector, mainly because the bulk of my application development involves Ajax-based requests. \r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1-300x158.png" alt="" title="ie-dev-tools-1" width="300" height="158" class="alignleft size-medium wp-image-1311" /></a>\r\n\r\n<em>IE Developer Tools – Network Performance of Specific Assets</em>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2-300x158.png" alt="" title="ie-dev-tools-2" width="300" height="158" class="alignleft size-medium wp-image-1313" /></a>\r\n\r\n<em>IE Developer Tools – Network Request Information</em>\r\n\r\nI can now do such things as determine load times of specific assets or inspect my request/response headers, cookies and return values without the need for breaking out of the browser to a 3rd party application such as Fiddler or Charles.\r\n\r\n<h2>Get to Using it Today</h2>\r\n\r\nA lot of effort has gone into making Internet Explorer 9 Beta a better browser. There’s certainly more work to be done but the fact that we now have a version of IE that provides standards-based functionality and allows us to use the same markup across browsers is pretty hot. \r\n\r\nTo really appreciate what you can build with IE9, though, you need to just start digging into it. Microsoft has created the following sites to give developers the knowledge and inspiration they need to leverage IE9 to its fullest:\r\n\r\n<ul>\r\n<li><a href="http://www.beautyoftheweb.com/">Beauty of the Web</a> – Explore all of the new features of Microsoft’s latest browser and check out the cool demos built using the advanced features of Internet Explorer 9 Beta</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/">Internet Explorer 9 Test Drive</a> – This site breaks down the new, advanced features of Internet Explorer 9 Beta and lets you get a visual of what’s possible with each bit of functionality</li>\r\n<li><a href="http://msdn.microsoft.com/ie/ff468705.aspx">Internet Explorer Guide for Developers</a> – The developer documentation you’ll need to learn how about the specifics of Internet Explorer 9 Beta</li></ul>\r\n\r\nIt feels great to know that we’re on a path to being able to build truly feature-rich websites that will be easier to maintain and provide a more exciting experience to users. While we’ll still need to support older browsers for some time, the fact that all the major browser vendors are heading in the same direction is going to allow us to build some truly amazing things. I can’t wait! \r\n', 'Internet Explorer 9 Beta has Arrived!', 0, '', 'inherit', 'open', 'open', '', '1309-revision-2', '', '', '2010-09-15 13:26:07', '2010-09-15 17:26:07', '', 1309, 'http://blog.reybango.com/2010/09/15/1309-revision-2/', 0, 'revision', '', 0),
(1316, 3, '2010-09-15 13:27:48', '2010-09-15 17:27:48', 'Wow, I can’t believe this day has come! After so many years of developers wishing for a better browser from Microsoft, one that was more consistent with web standards and would allow them to develop cross-browser websites leveraging the same markup, today marks the day that developers finally have that browser; Internet Explorer 9 Beta. It’s an important day because this release, although just a beta, is the culmination of a lot of effort and most importantly, listening, by the Internet Explorer team. \r\n\r\nWhile the Internet Explorer browser has enjoyed widespread adoption by consumers, it hasn’t always been viewed fondly by the development community. The important work of building cross-browser compliant websites has often been cumbersome, due in part to differing interpretations of browser APIs in previous versions of Internet Explorer.  The differences forced developers, myself included, to find workarounds for functionality that, in many cases, had a clearly defined standard behavior.  \r\n\r\n<h2>HTML5, CSS3, DOM</h2>\r\n\r\nWith Internet Explorer 9, there’s been a concerted effort by Microsoft to focus on standards-based functionality that will ease cross-browser development while providing the features needed to build rich and immersive websites. Take, for example, IE9’s support for many of the features of HTML5 and CSS3, the specifications which are defining the future of the web. By including support for features such as Canvas, video, @font-face, CSS3 media queries, SVG and many others, we now have a rich base to provide more compelling experiences to end users. In addition, by ensuring that these features are conformant to the defined specifications, the sites we build should work with any browser that also supports those specifications.\r\n\r\nTo take it a step further, the IE team has enhanced the performance of many of the new HTML5 features by taking advantage of the GPU. This means that text, graphics and video will be substantially smoother and more responsive allowing websites to perform more like true applications. \r\n\r\nAnd at the DOM level, important changes have been made to be consistent with the defined specifications making it easier to whittle down browser-specific code. For example, support for the W3C DOM Events specification (addEventListener & removeEventListener) in place of the proprietary IE model (attacheEvent & detachEvent) has been one of the most welcomed changes to IE9 as has the introduction of getElementsByClassName, supported for some time in the DOM Level 2 specification and now available in IE9.\r\n\r\n<h2>JavaScript</h2>\r\n\r\nEqually important is the performance boost provided by the new Chakra JavaScript engine which basically blows away older versions of Internet Explorer and brings IE9 in line with modern browsers such as Chrome, Firefox and Opera. JavaScript development continues to become more complex and intricate so the importance of these performance enhancements can’t be understated. The Chakra engine interprets, compiles, and executes code in parallel and takes advantage of multiple CPU cores when available and the results are obvious by the greatly improved benchmark scores from the <a href="http://www2.webkit.org/perf/sunspider-0.9.1/sunspider.html">Webkit Sunspider JavaScript Benchmarks</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider-300x211.png" alt="" title="01_02_Performance_Sunspider" width="300" height="211" class="alignleft size-medium wp-image-1310" /></a>\r\n\r\n<em>Chakra JavaScript Engine – WebKit SunSpider Benchmarks</em>\r\n\r\n<h2>Updated Developer Tools</h2>\r\n\r\nSubstantial work has been done to update the Internet Explorer Developer Tools. The built-in tools, usually found by pressing F12, provided quite a bit of capabilities but were missing key components that were essential to effective testing and debugging of client-side source code. With this update, the tools now include a much anticipated network traffic inspector, Console tab, CSS editing, and an improved JavaScript profiler.\r\n\r\nThe new Console tab is a welcome addition providing the ability to inspect script easily as well as receive important page-specific error and warning messages.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab-300x198.png" alt="" title="console-tab" width="300" height="198" class="alignleft size-medium wp-image-1312" /></a>\r\n\r\n<em>IE Developer Tools – Console Tab</em>\r\n\r\nOf the new features, the one that I’m most excited about is the network traffic inspector, mainly because the bulk of my application development involves Ajax-based requests. \r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1-300x158.png" alt="" title="ie-dev-tools-1" width="300" height="158" class="alignleft size-medium wp-image-1311" /></a>\r\n\r\n<em>IE Developer Tools – Network Performance of Specific Assets</em>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2-300x158.png" alt="" title="ie-dev-tools-2" width="300" height="158" class="alignleft size-medium wp-image-1313" /></a>\r\n\r\n<em>IE Developer Tools – Network Request Information</em>\r\n\r\nI can now do such things as determine load times of specific assets or inspect my request/response headers, cookies and return values without the need for breaking out of the browser to a 3rd party application such as Fiddler or Charles.\r\n\r\n<h2>Get to Using it Today</h2>\r\n\r\nA lot of effort has gone into making Internet Explorer 9 Beta a better browser. There’s certainly more work to be done but the fact that we now have a version of IE that provides standards-based functionality and allows us to use the same markup across browsers is pretty hot. \r\n\r\nTo really appreciate what you can build with IE9, though, you need to just start digging into it. Microsoft has created the following sites to give developers the knowledge and inspiration they need to leverage IE9 to its fullest:\r\n\r\n<ul>\r\n<li><a href="http://www.beautyoftheweb.com/">Beauty of the Web</a> – Explore all of the new features of Microsoft’s latest browser and check out the cool demos built using the advanced features of Internet Explorer 9 Beta</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/">Internet Explorer 9 Test Drive</a> – This site breaks down the new, advanced features of Internet Explorer 9 Beta and lets you get a visual of what’s possible with each bit of functionality</li>\r\n<li><a href="http://msdn.microsoft.com/ie/ff468705.aspx">Internet Explorer Guide for Developers</a> – The developer documentation you’ll need to learn how about the specifics of Internet Explorer 9 Beta</li></ul>\r\n\r\nIt feels great to know that we’re on a path to being able to build truly feature-rich websites that will be easier to maintain and provide a more exciting experience to users. While we’ll still need to support older browsers for some time, the fact that all the major browser vendors are heading in the same direction is going to allow us to build some truly amazing things. I can’t wait! \r\n', 'Internet Explorer 9 Beta has Arrived!', 0, '', 'inherit', 'open', 'open', '', '1309-revision-3', '', '', '2010-09-15 13:27:48', '2010-09-15 17:27:48', '', 1309, 'http://blog.reybango.com/2010/09/15/1309-revision-3/', 0, 'revision', '', 0),
(1317, 3, '2010-09-15 13:35:12', '2010-09-15 17:35:12', 'Wow, I can’t believe this day has come! After so many years of developers wishing for a better browser from Microsoft, one that was more consistent with web standards and would allow them to develop cross-browser websites leveraging the same markup, today marks the day that developers finally have that browser; Internet Explorer 9 Beta. It’s an important day because this release, although just a beta, is the culmination of a lot of effort and most importantly, listening, by the Internet Explorer team. \r\n\r\nWhile the Internet Explorer browser has enjoyed widespread adoption by consumers, it hasn’t always been viewed fondly by the development community. The important work of building cross-browser compliant websites has often been cumbersome, due in part to differing interpretations of browser APIs in previous versions of Internet Explorer.  The differences forced developers, myself included, to find workarounds for functionality that, in many cases, had a clearly defined standard behavior.  \r\n\r\n<h2>HTML5, CSS3, DOM</h2>\r\n\r\nWith Internet Explorer 9, there’s been a concerted effort by Microsoft to focus on standards-based functionality that will ease cross-browser development while providing the features needed to build rich and immersive websites. Take, for example, IE9’s support for many of the features of HTML5 and CSS3, the specifications which are defining the future of the web. By including support for features such as Canvas, video, @font-face, CSS3 media queries, SVG and many others, we now have a rich base to provide more compelling experiences to end users. In addition, by ensuring that these features are conformant to the defined specifications, the sites we build should work with any browser that also supports those specifications.\r\n\r\nTo take it a step further, the IE team has enhanced the performance of many of the new HTML5 features by taking advantage of the GPU. This means that text, graphics and video will be substantially smoother and more responsive allowing websites to perform more like true applications. \r\n\r\nAnd at the DOM level, important changes have been made to be consistent with the defined specifications making it easier to whittle down browser-specific code. For example, support for the W3C DOM Events specification (addEventListener & removeEventListener) in place of the proprietary IE model (attacheEvent & detachEvent) has been one of the most welcomed changes to IE9 as has the introduction of getElementsByClassName, supported for some time in the DOM Level 2 specification and now available in IE9.\r\n\r\n<h2>JavaScript</h2>\r\n\r\nEqually important is the performance boost provided by the new Chakra JavaScript engine which basically blows away older versions of Internet Explorer and brings IE9 in line with modern browsers such as Chrome, Firefox and Opera. JavaScript development continues to become more complex and intricate so the importance of these performance enhancements can’t be understated. The Chakra engine interprets, compiles, and executes code in parallel and takes advantage of multiple CPU cores when available and the results are obvious by the greatly improved benchmark scores from the <a href="http://www2.webkit.org/perf/sunspider-0.9.1/sunspider.html">Webkit Sunspider JavaScript Benchmarks</a>.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/01_02_Performance_Sunspider-300x211.png" alt="" title="01_02_Performance_Sunspider" width="300" height="211" class="alignleft size-medium wp-image-1310" /></a>\r\n\r\n<em>Chakra JavaScript Engine – WebKit SunSpider Benchmarks</em>\r\n\r\n<h2>Updated Developer Tools</h2>\r\n\r\nSubstantial work has been done to update the Internet Explorer Developer Tools. The built-in tools, usually found by pressing F12, provided quite a bit of capabilities but were missing key components that were essential to effective testing and debugging of client-side source code. With this update, the tools now include a much anticipated network traffic inspector, Console tab, CSS editing, and an improved JavaScript profiler.\r\n\r\nThe new Console tab is a welcome addition providing the ability to inspect script easily as well as receive important page-specific error and warning messages.\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/console-tab-300x198.png" alt="" title="console-tab" width="300" height="198" class="alignleft size-medium wp-image-1312" /></a>\r\n\r\n<em>IE Developer Tools – Console Tab</em>\r\n\r\nOf the new features, the one that I’m most excited about is the network traffic inspector, mainly because the bulk of my application development involves Ajax-based requests. \r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-1-300x158.png" alt="" title="ie-dev-tools-1" width="300" height="158" class="alignleft size-medium wp-image-1311" /></a>\r\n\r\n<em>IE Developer Tools – Network Performance of Specific Assets</em>\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/ie-dev-tools-2-300x158.png" alt="" title="ie-dev-tools-2" width="300" height="158" class="alignleft size-medium wp-image-1313" /></a>\r\n\r\n<em>IE Developer Tools – Network Request Information</em>\r\n\r\nI can now do such things as determine load times of specific assets or inspect my request/response headers, cookies and return values without the need for breaking out of the browser to a 3rd party application such as Fiddler or Charles.\r\n\r\n<h2>Get to Using it Today</h2>\r\n\r\nA lot of effort has gone into making Internet Explorer 9 Beta a better browser. There’s certainly more work to be done but the fact that we now have a version of IE that provides standards-based functionality and allows us to use the same markup across browsers is pretty hot. \r\n\r\nTo really appreciate what you can build with IE9, though, you need to just start digging into it. Microsoft has created the following sites to give developers the knowledge and inspiration they need to leverage IE9 to its fullest:\r\n\r\n<ul>\r\n<li><a href="http://www.beautyoftheweb.com/">Beauty of the Web</a> – Explore all of the new features of Microsoft’s latest browser and check out the cool demos built using the advanced features of Internet Explorer 9 Beta</li>\r\n<li><a href="http://ie.microsoft.com/testdrive/">Internet Explorer 9 Test Drive</a> – This site breaks down the new, advanced features of Internet Explorer 9 Beta and lets you get a visual of what’s possible with each bit of functionality</li>\r\n<li><a href="http://msdn.microsoft.com/ie/ff468705.aspx">Internet Explorer Guide for Developers</a> – The developer documentation you’ll need to learn how about the specifics of Internet Explorer 9 Beta</li></ul>\r\n\r\nIt feels great to know that we’re on a path to being able to build truly feature-rich websites that will be easier to maintain and provide a more exciting experience to users. While we’ll still need to support older browsers for some time, the fact that all the major browser vendors are heading in the same direction is going to allow us to build some truly amazing things. I can’t wait! \r\n', 'Internet Explorer 9 Beta has Arrived! The Features that Matter to Me as a Developer.', 0, '', 'inherit', 'open', 'open', '', '1309-revision-4', '', '', '2010-09-15 13:35:12', '2010-09-15 17:35:12', '', 1309, 'http://blog.reybango.com/2010/09/15/1309-revision-4/', 0, 'revision', '', 0),
(1318, 3, '2010-09-16 12:26:53', '2010-09-16 16:26:53', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Rey Bango Front-end Developer&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Launch Rey Bango''s Blog&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nI could further customize the pinned site shortcut with start URL, initial window size, and navigation button color using the following code:\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://blog.reybango.com/about/&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\n<h2>What About Other Browsers?</h2>\r\n\r\nUnfortunately, this feature is IE9-specific functionality and not available via other browsers or operating systems; only Windows. I really wish it was more portable because it''s a slick feature and I honestly don''t know if other browser makers could do something like this. Let''s see if they consider adopting this type of UX.\r\n\r\n<h2>Screencast</h2>\r\n\r\nTo actually see how the pinning works and how jump lists appear, I created a screencast that explains the whole process:\r\n\r\n<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/DM-Tq-EMTVg?fs=1&amp;hl=en_US"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/DM-Tq-EMTVg?fs=1&amp;hl=en_US" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="480"></embed></object>\r\n', 'How to Add Internet Explorer 9 Jump Lists to Your Site', 0, '', 'publish', 'open', 'open', '', 'how-to-add-internet-explorer-9-jump-lists-to-your-site', '', '', '2010-09-16 12:26:53', '2010-09-16 16:26:53', '', 0, 'http://blog.reybango.com/?p=1318', 0, 'post', '', 20),
(1319, 3, '2010-09-16 10:55:43', '2010-09-16 14:55:43', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website pinning allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, by itself, isn''t really all that interesting because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the\n\nThe code to make this happen is very straightforward. A new meta tag was defined called "msapplication-task" which allows you to define \n\n[code language="html"]\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\n[/code]', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision', '', '', '2010-09-16 10:55:43', '2010-09-16 14:55:43', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision/', 0, 'revision', '', 0),
(1320, 3, '2010-09-16 11:01:14', '2010-09-16 15:01:14', '', 'rey-pin', 0, '', 'inherit', 'open', 'open', '', 'rey-pin', '', '', '2010-09-16 11:01:14', '2010-09-16 15:01:14', '', 1318, 'http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png', 0, 'attachment', 'image/png', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1321, 3, '2010-09-16 11:03:24', '2010-09-16 15:03:24', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\n\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\n\nand here''s the code I added to my site to make that happen: \n\n[code language="html"]\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\n[/code]\n\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jum', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-2', '', '', '2010-09-16 11:03:24', '2010-09-16 15:03:24', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-2/', 0, 'revision', '', 0),
(1322, 3, '2010-09-16 11:08:20', '2010-09-16 15:08:20', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\n\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\n\nand here''s the code I added to my site to make that happen: \n\n[code language="html"]\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\n[/code]\n\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \n\n\n<tbody><tr><td>Name</td><td>Content</td></tr><tr><td>application-name</td><td>The name of the shortcut. If missing, the document title is used instead. </td></tr><tr><td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td></tr><tr><td>msapplication-starturl</td><td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td></tr><tr><td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td></tr><tr><td>msapplication-window</td><td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\n\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \n			</td></tr></tbody>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-3', '', '', '2010-09-16 11:08:20', '2010-09-16 15:08:20', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-3/', 0, 'revision', '', 0),
(1323, 3, '2010-09-16 11:08:48', '2010-09-16 15:08:48', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n\r\n<table>\r\n<tbody><tr><td>Name</td><td>Content</td></tr><tr><td>application-name</td><td>The name of the shortcut. If missing, the document title is used instead. </td></tr><tr><td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td></tr><tr><td>msapplication-starturl</td><td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td></tr><tr><td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td></tr><tr><td>msapplication-window</td><td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n			</td></tr></tbody></table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-4', '', '', '2010-09-16 11:08:48', '2010-09-16 15:08:48', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-4/', 0, 'revision', '', 0),
(1324, 3, '2010-09-16 11:08:55', '2010-09-16 15:08:55', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n\r\n<table>\r\n<tbody><tr><td>Name</td><td>Content</td></tr><tr><td>application-name</td><td>The name of the shortcut. If missing, the document title is used instead. </td></tr><tr><td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td></tr><tr><td>msapplication-starturl</td><td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td></tr><tr><td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td></tr><tr><td>msapplication-window</td><td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n			</td></tr></tbody></table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-5', '', '', '2010-09-16 11:08:55', '2010-09-16 15:08:55', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-5/', 0, 'revision', '', 0),
(1325, 3, '2010-09-16 11:10:57', '2010-09-16 15:10:57', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-6', '', '', '2010-09-16 11:10:57', '2010-09-16 15:10:57', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-6/', 0, 'revision', '', 0),
(1326, 3, '2010-09-16 11:11:03', '2010-09-16 15:11:03', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-7', '', '', '2010-09-16 11:11:03', '2010-09-16 15:11:03', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-7/', 0, 'revision', '', 0),
(1327, 3, '2010-09-16 11:11:31', '2010-09-16 15:11:31', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n\r\n<table style="border: 1px solid #000">\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-8', '', '', '2010-09-16 11:11:31', '2010-09-16 15:11:31', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-8/', 0, 'revision', '', 0),
(1328, 3, '2010-09-16 11:11:35', '2010-09-16 15:11:35', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n\r\n<table style="border: 1px solid #000">\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-9', '', '', '2010-09-16 11:11:35', '2010-09-16 15:11:35', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-9/', 0, 'revision', '', 0),
(1329, 3, '2010-09-16 11:13:47', '2010-09-16 15:13:47', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\n\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\n\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\n\nand here''s the code I added to my site to make that happen: \n\n[code language="html"]\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\n[/code]\n\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \n<style>\ntable, tr, th, td { \nborder: 1px solid #000; background-color:#FFFFFF;\nline-height:140%;\nmargin:1px;\npadding:4px; }\n</style>\n\n<table>\n<tbody>\n<tr>\n<td>Name</td><td>Content</td>\n</tr>\n<tr>\n<td>application-name</td>\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\n</tr>\n<tr>\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\n</tr>\n<tr>\n<td>msapplication-starturl</td>\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\n</tr>\n<tr>\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\n</tr>\n<tr>\n<td>msapplication-window</td>\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\n\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \n</td>\n</tr>\n</tbody>\n</table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-10', '', '', '2010-09-16 11:13:47', '2010-09-16 15:13:47', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-10/', 0, 'revision', '', 0),
(1330, 3, '2010-09-16 11:14:10', '2010-09-16 15:14:10', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nbackground-color:#FFFFFF;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px; }\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-11', '', '', '2010-09-16 11:14:10', '2010-09-16 15:14:10', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-11/', 0, 'revision', '', 0),
(1331, 3, '2010-09-16 11:14:14', '2010-09-16 15:14:14', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nbackground-color:#FFFFFF;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px; }\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-12', '', '', '2010-09-16 11:14:14', '2010-09-16 15:14:14', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-12/', 0, 'revision', '', 0);
INSERT INTO `wp_dyxkdh_posts` (`ID`, `post_author`, `post_date`, `post_date_gmt`, `post_content`, `post_title`, `post_category`, `post_excerpt`, `post_status`, `comment_status`, `ping_status`, `post_password`, `post_name`, `to_ping`, `pinged`, `post_modified`, `post_modified_gmt`, `post_content_filtered`, `post_parent`, `guid`, `menu_order`, `post_type`, `post_mime_type`, `comment_count`) VALUES
(1332, 3, '2010-09-16 11:14:57', '2010-09-16 15:14:57', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nbackground-color:#FFFFFF;\r\nline-height:140%;\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-13', '', '', '2010-09-16 11:14:57', '2010-09-16 15:14:57', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-13/', 0, 'revision', '', 0),
(1333, 3, '2010-09-16 11:15:01', '2010-09-16 15:15:01', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. The one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nbackground-color:#FFFFFF;\r\nline-height:140%;\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-14', '', '', '2010-09-16 11:15:01', '2010-09-16 15:15:01', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-14/', 0, 'revision', '', 0),
(1334, 3, '2010-09-16 11:16:45', '2010-09-16 15:16:45', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nbackground-color:#FFFFFF;\r\nline-height:140%;\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-15', '', '', '2010-09-16 11:16:45', '2010-09-16 15:16:45', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-15/', 0, 'revision', '', 0),
(1335, 3, '2010-09-16 11:17:03', '2010-09-16 15:17:03', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nbackground-color:#FFFFFF;\r\nline-height:140%;\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-16', '', '', '2010-09-16 11:17:03', '2010-09-16 15:17:03', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-16/', 0, 'revision', '', 0),
(1336, 3, '2010-09-16 11:21:15', '2010-09-16 15:21:15', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-17', '', '', '2010-09-16 11:21:15', '2010-09-16 15:21:15', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-17/', 0, 'revision', '', 0),
(1337, 3, '2010-09-16 11:21:24', '2010-09-16 15:21:24', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-18', '', '', '2010-09-16 11:21:24', '2010-09-16 15:21:24', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-18/', 0, 'revision', '', 0),
(1338, 3, '2010-09-16 11:22:34', '2010-09-16 15:22:34', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-19', '', '', '2010-09-16 11:22:34', '2010-09-16 15:22:34', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-19/', 0, 'revision', '', 0),
(1339, 3, '2010-09-16 11:22:38', '2010-09-16 15:22:38', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-20', '', '', '2010-09-16 11:22:38', '2010-09-16 15:22:38', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-20/', 0, 'revision', '', 0),
(1340, 3, '2010-09-16 11:24:21', '2010-09-16 15:24:21', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nSo you could use the following code to customize the pinned site shortcut with a tooltip, start URL, initial window size, and navigation button color"\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Sample Site Mode Application&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Start the page in Site Mode&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://example.com/start.html&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-21', '', '', '2010-09-16 11:24:21', '2010-09-16 15:24:21', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-21/', 0, 'revision', '', 0),
(1341, 3, '2010-09-16 11:24:28', '2010-09-16 15:24:28', 'With Internet Explorer 9 Beta is out, I''m poking around with some of the new features available. One of the new features called website <a href="http://www.beautyoftheweb.com/#/startdeveloping/pinning">pinning</a> allows you to "pin" a website to your Windows 7 taskbar for easy access later. The pinning feature, in itself, isn''t really all that interesting to me because you could create desktop shortcuts to webpages for years. What is cool, though, is the ability specify direct links to important pages from a pinned website. These are called "<a href="http://www.beautyoftheweb.com/#/productguide/clean/seamless-with-windows-7/jump-lists">Jump Lists</a>" and they provide navigation capabilities straight from a pinned website. The obvious use case for this is to allow users to immediately reach the most important pages on a site without having to open the browser, type in the web address and click on several links to get to a page.\r\n\r\nThe code to make jump lists available is very straightforward. A new meta tag called "msapplication-task" is available in IE9 which allows you to define the navigation for your pinned website. For example, I added the following jump list to my blog:\r\n\r\n<a href="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png"><img src="http://blog.reybango.com/wp-content/uploads/2010/09/rey-pin.png" alt="" title="rey-pin" width="263" height="274" class="alignleft size-full wp-image-1320" /></a>\r\n\r\nand here''s the code I added to my site to make that happen: \r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=About;action-uri=/about/;icon-uri=/images/about.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico&quot; /&gt;\r\n&lt;meta name=&quot;msapplication-task&quot; content=&quot;name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico&quot; /&gt;\r\n&lt;link rel=&quot;shortcut icon&quot; href=&quot;/images/favicon.ico&quot; /&gt;\r\n[/code]\r\n\r\nThe <em>content</em> attribute allows you to specify the name, action and icon that you''d like to use for your jump list nav entry. Here''s a list of the available meta elements that you can use to format your jump lists:\r\n\r\n<style>\r\ntable, td { \r\nborder: 1px solid #000; \r\nborder-collapse:collapse;\r\nline-height:140%;\r\nmargin:1px;\r\npadding:4px\r\n}\r\n</style>\r\n\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td>Name</td><td>Content</td>\r\n</tr>\r\n<tr>\r\n<td>application-name</td>\r\n<td>The name of the shortcut. If missing, the document title is used instead. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-tooltip</td><td>Optional text that is displayed as a tooltip when the mouse pointer hovers over the pinned site shortcut icon in the Windows Start menu or desktop. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-starturl</td>\r\n<td>The root URL of the application. If missing, the address of the current page is used instead. Only HTTP, HTTPS, or FTP protocols are allowed. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-navbutton-color</td><td>The color of the <strong>Back</strong> and <strong>Forward</strong> buttons in the pinned site browser window. Any named color, or hex color value as defined by Cascading Style Sheets (CSS), Level 3 (CSS3) is valid. For more information, see <a href="http://msdn.microsoft.com/en-us/library/ms531197%28VS.85%29.aspx">Color Table</a>. If this <strong>meta</strong> element is absent, the color is based on the shortcut icon. </td>\r\n</tr>\r\n<tr>\r\n<td>msapplication-window</td>\r\n<td>The initial size of the pinned site browser window. Content sub-elements provide size as number <em>N</em>, separated by a semicolon.\r\n				<ul><li>width=<em>N</em> (minimum 800)</li><li>height=<em>N</em> (minimum 600)</li></ul>\r\n\r\n				Note that user action overwrites this value. Windows preserves the user-generated window size when the user changes the size of the window and then closes the instance. \r\n</td>\r\n</tr>\r\n</tbody>\r\n</table>\r\n\r\nSo you could use the following code to customize the pinned site shortcut with a tooltip, start URL, initial window size, and navigation button color"\r\n\r\n[code language="html"]\r\n&lt;meta name=&quot;application-name&quot; content=&quot;Sample Site Mode Application&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-tooltip&quot; content=&quot;Start the page in Site Mode&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-starturl&quot; content=&quot;http://example.com/start.html&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-window&quot; content=&quot;width=800;height=600&quot;/&gt;\r\n&lt;meta name=&quot;msapplication-navbutton-color&quot; content=&quot;red&quot;/&gt;\r\n[/code]\r\n\r\nThe one caveat is that your image needs to be a true icon, not a .png, .gif or .jpg. \r\n', 'Adding Internet Explorer 9 Jump Lists to Your Site', 0, '', 'inherit', 'open', 'open', '', '1318-revision-22', '', '', '2010-09-16 11:24:28', '2010-09-16 15:24:28', '', 1318, 'http://blog.reybango.com/2010/09/16/1318-revision-22/', 0, 'revision', '', 0);
