Skip to content
Browse files

Site updated at 2012-12-13 04:19:37 UTC

  • Loading branch information...
1 parent 5241e2f commit 16c174b1dd5a832c182d85fe50c3cf797ad31467 @tjvantoll committed
Showing with 938 additions and 821 deletions.
  1. +4 −4 2012/02/20/CSS3-Color-Animations/index.html
  2. +4 −4 2012/02/27/Making-a-3D-Picture-Cube-with-CSS3/index.html
  3. +4 −4 2012/03/08/IE7-Attribute-Selector-Bugs/index.html
  4. +4 −4 2012/03/17/Styling-Disabled-Form-Fields/index.html
  5. +4 −4 2012/03/21/javascript-for-the-java-developer/index.html
  6. +4 −4 2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/index.html
  7. +4 −4 2012/06/10/browser-css-parsing-discrepancies/index.html
  8. +4 −4 2012/06/15/detecting-print-requests-with-javascript/index.html
  9. +4 −4 2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/index.html
  10. +4 −4 2012/07/07/the-ideal-less-workflow-with-git/index.html
  11. +4 −4 2012/07/10/default-browser-handling-of-the-css-text-transform-property/index.html
  12. +4 −4 2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/index.html
  13. +4 −4 2012/07/19/dom-element-references-as-global-variables/index.html
  14. +4 −4 2012/08/05/html5-form-validation-showing-all-error-messages/index.html
  15. +4 −4 2012/08/10/less-101-the-basics-of-the-css-preprocessor/index.html
  16. +4 −4 2012/08/16/subpixel-animation-issues-in-ie-less-than-9/index.html
  17. +4 −4 2012/08/19/onscroll-event-issues-on-mobile-browsers/index.html
  18. +4 −4 2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/index.html
  19. +4 −4 2012/08/28/google-analytics-excluding-visits-in-development-and-production/index.html
  20. +4 −4 2012/08/30/html5-form-validation-start-using-it-in-production-applications/index.html
  21. +4 −4 2012/09/14/using-jquery-ui-slider-to-polyfill-html5-input-type-range/index.html
  22. +4 −4 2012/09/19/using-the-attribute-selector-with-numeric-values/index.html
  23. +4 −4 2012/10/17/maxlength-constraint-validation-oddities/index.html
  24. +4 −4 2012/10/23/front-end-efficiency-the-top-ten/index.html
  25. +4 −4 2012/10/24/adding-pointers-to-jquery-ui-tooltips/index.html
  26. +4 −4 2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/index.html
  27. +6 −4 2012/11/10/creating-cross-browser-scrollable-tbody/index.html
  28. +371 −0 2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/index.html
  29. +72 −342 atom.xml
  30. +20 −6 blog/archives/index.html
  31. +1 −1 blog/categories/browsers/atom.xml
  32. +4 −4 blog/categories/browsers/index.html
  33. +71 −149 blog/categories/css/atom.xml
  34. +18 −4 blog/categories/css/index.html
  35. +1 −1 blog/categories/efficiency/atom.xml
  36. +4 −4 blog/categories/efficiency/index.html
  37. +1 −1 blog/categories/forms/atom.xml
  38. +4 −4 blog/categories/forms/index.html
  39. +1 −1 blog/categories/git/atom.xml
  40. +4 −4 blog/categories/git/index.html
  41. +1 −1 blog/categories/html/atom.xml
  42. +4 −4 blog/categories/html/index.html
  43. +1 −1 blog/categories/html5/atom.xml
  44. +4 −4 blog/categories/html5/index.html
  45. +1 −1 blog/categories/java/atom.xml
  46. +4 −4 blog/categories/java/index.html
  47. +1 −1 blog/categories/javascript/atom.xml
  48. +4 −4 blog/categories/javascript/index.html
  49. +1 −1 blog/categories/jquery-ui/atom.xml
  50. +4 −4 blog/categories/jquery-ui/index.html
  51. +1 −1 blog/categories/less/atom.xml
  52. +4 −4 blog/categories/less/index.html
  53. +1 −1 blog/categories/mobile/atom.xml
  54. +4 −4 blog/categories/mobile/index.html
  55. +1 −1 blog/categories/qunit/atom.xml
  56. +4 −4 blog/categories/qunit/index.html
  57. +1 −1 blog/categories/speaking/atom.xml
  58. +4 −4 blog/categories/speaking/index.html
  59. +1 −1 blog/categories/unit-testing/atom.xml
  60. +4 −4 blog/categories/unit-testing/index.html
  61. +63 −76 blog/index.html
  62. +76 −50 blog/page/2/index.html
  63. +50 −5 blog/page/3/index.html
  64. BIN images/posts/2012-12-12/DevTools_1.png
  65. BIN images/posts/2012-12-12/DevTools_2.png
  66. BIN images/posts/2012-12-12/Web_Developer.png
  67. BIN images/posts/2012-12-12/trees.jpg
  68. +4 −4 index.html
  69. +9 −3 sitemap.xml
  70. +4 −4 speaking/index.html
View
8 2012/02/20/CSS3-Color-Animations/index.html
@@ -455,6 +455,10 @@ <h1 class="entry-title">CSS3 Color Animations</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -490,10 +494,6 @@ <h1 class="entry-title">CSS3 Color Animations</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/02/27/Making-a-3D-Picture-Cube-with-CSS3/index.html
@@ -531,6 +531,10 @@ <h1 class="entry-title">Making a 3D Picture Cube with CSS3</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -566,10 +570,6 @@ <h1 class="entry-title">Making a 3D Picture Cube with CSS3</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/03/08/IE7-Attribute-Selector-Bugs/index.html
@@ -392,6 +392,10 @@ <h1 class="entry-title">IE7 Attribute Selector Bugs</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -427,10 +431,6 @@ <h1 class="entry-title">IE7 Attribute Selector Bugs</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/03/17/Styling-Disabled-Form-Fields/index.html
@@ -493,6 +493,10 @@ <h1 class="entry-title">Styling Disabled Form Fields</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -528,10 +532,6 @@ <h1 class="entry-title">Styling Disabled Form Fields</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/03/21/javascript-for-the-java-developer/index.html
@@ -196,6 +196,10 @@ <h1 class="entry-title">JavaScript for the Java Developer</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -231,10 +235,6 @@ <h1 class="entry-title">JavaScript for the Java Developer</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/05/02/showmodaldialog-what-it-is-and-why-you-should-never-use-it/index.html
@@ -396,6 +396,10 @@ <h1 class="entry-title">window.showModalDialog: What It is and Why You Should Ne
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -431,10 +435,6 @@ <h1 class="entry-title">window.showModalDialog: What It is and Why You Should Ne
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/06/10/browser-css-parsing-discrepancies/index.html
@@ -411,6 +411,10 @@ <h1 class="entry-title">Browser CSS Parsing Discrepancies</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -446,10 +450,6 @@ <h1 class="entry-title">Browser CSS Parsing Discrepancies</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/06/15/detecting-print-requests-with-javascript/index.html
@@ -528,6 +528,10 @@ <h1 class="entry-title">Detecting Print Requests with JavaScript</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -563,10 +567,6 @@ <h1 class="entry-title">Detecting Print Requests with JavaScript</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/index.html
@@ -314,6 +314,10 @@ <h1 class="entry-title">Creating a Native HTML 5 Datepicker with a Fallback to j
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -349,10 +353,6 @@ <h1 class="entry-title">Creating a Native HTML 5 Datepicker with a Fallback to j
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/07/07/the-ideal-less-workflow-with-git/index.html
@@ -503,6 +503,10 @@ <h1 class="entry-title">The Ideal LESS Workflow with git</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -538,10 +542,6 @@ <h1 class="entry-title">The Ideal LESS Workflow with git</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/07/10/default-browser-handling-of-the-css-text-transform-property/index.html
@@ -364,6 +364,10 @@ <h1 class="entry-title">Default Browser Handling of the CSS text-transform Prope
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -399,10 +403,6 @@ <h1 class="entry-title">Default Browser Handling of the CSS text-transform Prope
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/07/15/native-html5-number-picker-vs-jquery-uis-spinner-which-to-use/index.html
@@ -514,6 +514,10 @@ <h1 class="entry-title">Native HTML5 Number Picker and jQuery UI's Spinner - Whi
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -549,10 +553,6 @@ <h1 class="entry-title">Native HTML5 Number Picker and jQuery UI's Spinner - Whi
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/07/19/dom-element-references-as-global-variables/index.html
@@ -568,6 +568,10 @@ <h1 class="entry-title">DOM Element References as Global Variables</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -603,10 +607,6 @@ <h1 class="entry-title">DOM Element References as Global Variables</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/08/05/html5-form-validation-showing-all-error-messages/index.html
@@ -395,6 +395,10 @@ <h1 class="entry-title">HTML5 Form Validation - Showing All Error Messages</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -430,10 +434,6 @@ <h1 class="entry-title">HTML5 Form Validation - Showing All Error Messages</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/08/10/less-101-the-basics-of-the-css-preprocessor/index.html
@@ -196,6 +196,10 @@ <h1 class="entry-title">LESS 101 - The Basics of the CSS Preprocessor</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -231,10 +235,6 @@ <h1 class="entry-title">LESS 101 - The Basics of the CSS Preprocessor</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/08/16/subpixel-animation-issues-in-ie-less-than-9/index.html
@@ -278,6 +278,10 @@ <h1 class="entry-title">Subpixel Animation Issues in IE < 9</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -313,10 +317,6 @@ <h1 class="entry-title">Subpixel Animation Issues in IE < 9</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/08/19/onscroll-event-issues-on-mobile-browsers/index.html
@@ -331,6 +331,10 @@ <h1 class="entry-title">onscroll Event Issues on Mobile Browsers</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -366,10 +370,6 @@ <h1 class="entry-title">onscroll Event Issues on Mobile Browsers</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/index.html
@@ -544,6 +544,10 @@ <h1 class="entry-title">Logging Test Failures in a PhantomJS QUnit Runner</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -579,10 +583,6 @@ <h1 class="entry-title">Logging Test Failures in a PhantomJS QUnit Runner</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/08/28/google-analytics-excluding-visits-in-development-and-production/index.html
@@ -408,6 +408,10 @@ <h1 class="entry-title">Google Analytics - Excluding Your Own Visits in Developm
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -443,10 +447,6 @@ <h1 class="entry-title">Google Analytics - Excluding Your Own Visits in Developm
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/08/30/html5-form-validation-start-using-it-in-production-applications/index.html
@@ -255,6 +255,10 @@ <h1 class="entry-title">HTML5 Form Validation - Start Using it in Production App
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -290,10 +294,6 @@ <h1 class="entry-title">HTML5 Form Validation - Start Using it in Production App
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/09/14/using-jquery-ui-slider-to-polyfill-html5-input-type-range/index.html
@@ -282,6 +282,10 @@ <h1 class="entry-title">Using jQuery UI's Slider to Polyfill HTML5's input[type=
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -317,10 +321,6 @@ <h1 class="entry-title">Using jQuery UI's Slider to Polyfill HTML5's input[type=
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/09/19/using-the-attribute-selector-with-numeric-values/index.html
@@ -273,6 +273,10 @@ <h1 class="entry-title">Using the Attribute Selector with Numeric Values</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -308,10 +312,6 @@ <h1 class="entry-title">Using the Attribute Selector with Numeric Values</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/10/17/maxlength-constraint-validation-oddities/index.html
@@ -243,6 +243,10 @@ <h1 class="entry-title">maxlength Constraint Validation Oddities in Major Browse
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -278,10 +282,6 @@ <h1 class="entry-title">maxlength Constraint Validation Oddities in Major Browse
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/10/23/front-end-efficiency-the-top-ten/index.html
@@ -196,6 +196,10 @@ <h1 class="entry-title">Front End Efficiency - The Top Ten</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -231,10 +235,6 @@ <h1 class="entry-title">Front End Efficiency - The Top Ten</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/10/24/adding-pointers-to-jquery-ui-tooltips/index.html
@@ -213,6 +213,10 @@ <h1 class="entry-title">Adding Pointers to jQuery UI Tooltips</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -248,10 +252,6 @@ <h1 class="entry-title">Adding Pointers to jQuery UI Tooltips</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
8 2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/index.html
@@ -206,6 +206,10 @@ <h1 class="entry-title">Creating a Polished Vertical Tabs Interaction with jQuer
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -241,10 +245,6 @@ <h1 class="entry-title">Creating a Polished Vertical Tabs Interaction with jQuer
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
10 2012/11/10/creating-cross-browser-scrollable-tbody/index.html
@@ -271,6 +271,8 @@ <h1 class="entry-title">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS
<a class="basic-alignment left" href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/" title="Previous Post: Creating a Polished Vertical Tabs Interaction with jQuery UI">&laquo; Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
+ <a class="basic-alignment right" href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/" title="Next Post: Debugging Print Stylesheets: Now Significantly Easier in Chrome">Debugging Print Stylesheets: Now Significantly Easier in Chrome &raquo;</a>
+
</p>
</footer>
</article>
@@ -290,6 +292,10 @@ <h1 class="entry-title">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -325,10 +331,6 @@ <h1 class="entry-title">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
371 2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/index.html
@@ -0,0 +1,371 @@
+
+<!DOCTYPE html>
+<!--[if IEMobile 7 ]><html class="no-js iem7"><![endif]-->
+<!--[if lt IE 9]><html class="no-js lte-ie8"><![endif]-->
+<!--[if (gt IE 8)|(gt IEMobile 7)|!(IEMobile)|!(IE)]><!--><html class="no-js" lang="en"><!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <title>Debugging Print Stylesheets: Now Significantly Easier in Chrome - TJ VanToll - Tutorials, Thoughts, and Ramblings on Front End Development</title>
+ <meta name="author" content="TJ VanToll">
+
+
+ <meta name="description" content="Debugging print stylesheets has always been a bit of a pain. The traditional way of doing so was to simply change the media attribute of all link &hellip;">
+
+
+ <!-- http://t.co/dKP3o1e -->
+ <meta name="HandheldFriendly" content="True">
+ <meta name="MobileOptimized" content="320">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+
+ <link rel="canonical" href="http://tjvantoll.com/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome">
+ <!-- Use custom favicon -->
+ <!--<link href="/favicon.png" rel="icon">-->
+ <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
+
+
+ <!--Custom script concatenation
+ <script src="/javascripts/modernizr-2.5.3.js"></script>
+
+ <script src="/javascripts/ender.js"></script>
+ <script src="/javascripts/octopress.js"></script>
+ <script src="/javascripts/PictureCube.js"></script>
+ <script src="/javascripts/ender.tipsy.js"></script>
+ <script src="/javascripts/blog.js"></script>
+ -->
+ <script src="/javascripts/build/scripts.js"></script>
+
+ <link href="/atom.xml" rel="alternate" title="TJ VanToll" type="application/atom+xml">
+ <style>
+ /* Fonts from Google"s Web font directory at http://google.com/webfonts */
+ @import url(http://fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic);
+ @import url(http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic);
+</style>
+
+
+ <script type="text/javascript">
+ if (window.location.host.indexOf('local') == -1) {
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-29179796-1']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+ }
+ </script>
+
+
+</head>
+
+<body >
+ <header role="banner"><hgroup>
+ <div id="picture-cube"></div>
+ <h1><a href="/">TJ VanToll</a></h1>
+
+ <h2>Tutorials, Thoughts, and Ramblings on Front End Development</h2>
+
+</hgroup>
+
+</header>
+ <nav role="navigation"><ul class="subscription" data-subscription="rss">
+ <li><a href="/atom.xml" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
+
+</ul>
+
+<form action="http://google.com/search" method="get">
+ <fieldset role="search">
+ <input type="hidden" name="q" value="site:tjvantoll.com" />
+ <input class="search" type="text" name="q" results="0" placeholder="Search"/>
+ </fieldset>
+</form>
+
+<ul class="main-navigation">
+ <li><a href="/blog">Blog</a></li>
+ <li><a href="/">About</a></li>
+ <li><a href="/blog/archives">Archives</a></li>
+ <li><a href="/speaking">Speaking</a></li>
+</ul>
+
+</nav>
+ <div id="main">
+ <div id="content">
+ <div>
+<article class="hentry" role="article">
+
+ <header>
+
+ <h1 class="entry-title">Debugging Print Stylesheets: Now Significantly Easier in Chrome</h1>
+
+
+ <p class="meta">
+
+
+
+
+
+
+
+
+
+
+
+
+<time datetime="2012-12-12T21:55:00-05:00" pubdate data-updated="true">Dec 12<span>th</span>, 2012</time>
+
+ | <a href="#disqus_thread">Comments</a>
+
+ </p>
+
+ </header>
+
+
+<div class="entry-content"><p>Debugging print stylesheets has always been a bit of a pain. The traditional way of doing so was to simply change the <code>media</code> attribute of all <code>link</code> tags from <code>print</code> to <code>screen</code> or <code>all</code> while testing.</p>
+
+<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c">&lt;!-- Before --&gt;</span>
+</span><span class='line'><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;print.css&quot;</span> <span class="na">media=</span><span class="s">&quot;print&quot;</span> <span class="nt">/&gt;</span>
+</span><span class='line'>
+</span><span class='line'><span class="c">&lt;!-- After --&gt;</span>
+</span><span class='line'><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;print.css&quot;</span> <span class="na">media=</span><span class="s">&quot;screen&quot;</span> <span class="nt">/&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>The popular <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer Extension</a> for Firefox even has an option to do this for you automatically.</p>
+
+<!--more-->
+
+
+<p><img src="/images/posts/2012-12-12/Web_Developer.png" title="Web Developer Extension" alt="Web Developer Extension" /></p>
+
+<p>Then something changed.</p>
+
+<p>We found out that <a href="https://developers.google.com/speed/docs/best-practices/rtt">unnecessary HTTP requests are bad</a>. We also found out that there are some <a href="http://www.phpied.com/5-years-later-print-css-still-sucks/">serious performance issues with print stylesheets</a>.</p>
+
+<p>Therefore, behind the lead of projects like the <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a> we all switched to writing our print styles inline with the rest of our CSS.</p>
+
+<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="k">@media</span> <span class="nt">print</span> <span class="p">{</span>
+</span><span class='line'> <span class="nt">body</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="k">larger</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'> <span class="nf">#ads</span><span class="o">,</span> <span class="nf">#junk</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Inline print styles save HTTP requests and are easier to maintain, but they unfortunately make testing a bit harder. They don&#8217;t work with Firefox&#8217;s Web Developer Extension and a simple find and replace is now quite a bit harder.</p>
+
+<h3>Good News!</h3>
+
+<p>A means to emulate the <code>print</code> media type <a href="https://plus.google.com/115133653231679625609/posts/MgpioU84JPe">just landed in Chrome Canary</a>.</p>
+
+<p>To use it first open up the settings by clicking on the gear in the bottom right corner of the DevTools:</p>
+
+<p><img src="/images/posts/2012-12-12/DevTools_1.png" title="How to open the DevTools settings" alt="How to open the DevTools settings" /></p>
+
+<p>Next, select the Overrides menu, check the &#8220;Emulate CSS media&#8221; checkbox, and select &#8220;print&#8221;.</p>
+
+<p><img src="/images/posts/2012-12-12/DevTools_2.png" title="How to emulate CSS media in Chrome's DevTools" alt="How to emulate CSS media in Chrome's DevTools" /></p>
+
+<p>That&#8217;s it! It will apply both rules applied in external <code>media="print"</code> stylesheets as well as rules within inline <code>@media print {}</code> blocks. Combine this with a CSS preprocessor that can watch for changes and you have a quick and easy way to debug print styles.</p>
+
+<p>This feature is in version 25 of Chrome Canary so it hopefully it will make it into Chrome stable around Chrome 27. If you don&#8217;t have Canary yet you should consider <a href="http://paulirish.com/2012/chrome-canary-for-developers/">installing it side by side</a> with the stable release.</p>
+
+<h3>WON&#8217;T SOMEONE THINK ABOUT THE TREES</h3>
+
+<p>Of course the definitive way of testing print stylesheets is to physically print a web page on physical paper. I&#8217;ve done this plenty of times. And if you&#8217;ve read this far you likely have to. Hopefully the next time you have to debug printing you can save a bit of paper.</p>
+
+<p><img src="/images/posts/2012-12-12/trees.jpg" title="The less pages you print the more of my type get to live" alt="The less pages you print the more of my type get to live" />
+<a href="http://www.flickr.com/photos/cransell/5119828609/" style="display: block; font-size: 0.8em;">Photo Credit</a></p>
+</div>
+
+
+ <footer>
+ <p class="meta">
+
+
+
+<span class="byline author vcard">Posted by <span class="fn">TJ VanToll</span></span>
+
+
+
+
+
+
+
+
+
+
+
+
+
+<time datetime="2012-12-12T21:55:00-05:00" pubdate data-updated="true">Dec 12<span>th</span>, 2012</time>
+
+
+<span class="categories">
+
+ <a class='category' href='/blog/categories/css/'>CSS</a>
+
+</span>
+
+
+ </p>
+ <p class="author_card meta">
+ <img src="/images/me/1.jpg" alt="Me!" id="post_me" />
+ TJ VanToll is an avid web developer working for <a href="http://liquidweb.com">Liquid Web</a> and living in Lansing, MI. He is an open source advocate who publishes this blog <a href="https://github.com/tjvantoll/tjvantoll.github.com/tree/source">open source</a> and contributes to <a href="http://jqueryui.com">jQuery UI</a>. When not on the internet he is generally found <a href="/images/kids/2.jpg">brainwashing his children</a>, debating CSS with his girlfriend, or talking about himself in the third person. If you like hearing TJ talk about himself you should consider <a href="http://twitter.com/tjvantoll">following him on Twitter</a>.
+ </p>
+
+ <div class="sharing">
+
+ <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://tjvantoll.com/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/" data-via="tjvantoll" data-counturl="http://tjvantoll.com/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/" >Tweet</a>
+
+
+
+</div>
+
+
+ <p class="meta">
+
+ <a class="basic-alignment left" href="/2012/11/10/creating-cross-browser-scrollable-tbody/" title="Previous Post: Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach">&laquo; Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+
+
+ </p>
+ </footer>
+</article>
+
+ <section>
+ <h1>Comments</h1>
+ <div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
+</div>
+ </section>
+
+</div>
+
+<aside class="sidebar">
+
+ <section>
+ <h1>Recent Posts</h1>
+ <ul id="recent_posts">
+
+ <li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/11/08/creating-a-polished-vertical-tabs-interaction-with-jquery-ui/">Creating a Polished Vertical Tabs Interaction with jQuery UI</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/10/24/adding-pointers-to-jquery-ui-tooltips/">Adding Pointers to jQuery UI Tooltips</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/10/23/front-end-efficiency-the-top-ten/">Front End Efficiency - The Top Ten</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/10/17/maxlength-constraint-validation-oddities/">maxlength Constraint Validation Oddities in Major Browsers</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/09/19/using-the-attribute-selector-with-numeric-values/">Using the Attribute Selector with Numeric Values</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/09/14/using-jquery-ui-slider-to-polyfill-html5-input-type-range/">Using jQuery UI's Slider to Polyfill HTML5's input[type=range]</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/08/30/html5-form-validation-start-using-it-in-production-applications/">HTML5 Form Validation - Start Using it in Production Applications</a>
+ </li>
+
+ <li class="post">
+ <a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
+ </li>
+
+ </ul>
+</section>
+
+<section>
+ <h1>Latest Tweets</h1>
+ <ul id="tweets">
+ <li class="loading">Status updating...</li>
+ </ul>
+ <script type="text/javascript">
+ $.domReady(function(){
+ getTwitterFeed("tjvantoll", 4, false);
+ });
+ </script>
+ <script src="/javascripts/twitter.js" type="text/javascript"> </script>
+
+ <a href="http://twitter.com/tjvantoll" class="twitter-follow-button" data-show-count="false">Follow @tjvantoll</a>
+
+</section>
+
+<section class="jsdocs">
+ <h1><a href="http://promotejs.com">Promote JS!</a></h1>
+ <a href="https://developer.mozilla.org/en/JavaScript/Guide" title="JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript"><img src="http://static.jsconf.us/promotejshs.png" height="150" alt="JS Tutorial, JavaScript Tutorial, JavaScript Guide, Learn JavaScript JS, How To Learn JS, Learning JavaScript" width="180"></a></section>
+
+</aside>
+
+
+ </div>
+ </div>
+ <footer role="contentinfo"><p>
+ Copyright &copy; 2012 - <a href="/">TJ VanToll</a> -
+ <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
+</p>
+
+</footer>
+
+
+<script type="text/javascript">
+ var disqus_shortname = 'tjvantoll';
+
+
+ // var disqus_developer = 1;
+ var disqus_identifier = 'http://tjvantoll.com/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/';
+ var disqus_url = 'http://tjvantoll.com/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/';
+ var disqus_script = 'embed.js';
+
+ (function () {
+ var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
+ dsq.src = 'http://' + disqus_shortname + '.disqus.com/' + disqus_script;
+ (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
+ }());
+</script>
+
+
+
+
+
+
+
+ <script type="text/javascript">
+ (function(){
+ var twitterWidgets = document.createElement('script');
+ twitterWidgets.type = 'text/javascript';
+ twitterWidgets.async = true;
+ twitterWidgets.src = 'http://platform.twitter.com/widgets.js';
+ document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
+ })();
+ </script>
+
+
+
+
+
+</body>
+</html>
View
414 atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[TJ VanToll]]></title>
<link href="http://tjvantoll.com/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
- <updated>2012-12-04T21:48:22-05:00</updated>
+ <updated>2012-12-12T23:19:22-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
@@ -14,6 +14,77 @@
<entry>
+ <title type="html"><![CDATA[Debugging Print Stylesheets: Now Significantly Easier in Chrome]]></title>
+ <link href="http://tjvantoll.com/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/"/>
+ <updated>2012-12-12T21:55:00-05:00</updated>
+ <id>http://tjvantoll.com/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome</id>
+ <content type="html"><![CDATA[<p>Debugging print stylesheets has always been a bit of a pain. The traditional way of doing so was to simply change the <code>media</code> attribute of all <code>link</code> tags from <code>print</code> to <code>screen</code> or <code>all</code> while testing.</p>
+
+<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+<span class='line-number'>5</span>
+</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="c">&lt;!-- Before --&gt;</span>
+</span><span class='line'><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;print.css&quot;</span> <span class="na">media=</span><span class="s">&quot;print&quot;</span> <span class="nt">/&gt;</span>
+</span><span class='line'>
+</span><span class='line'><span class="c">&lt;!-- After --&gt;</span>
+</span><span class='line'><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href=</span><span class="s">&quot;print.css&quot;</span> <span class="na">media=</span><span class="s">&quot;screen&quot;</span> <span class="nt">/&gt;</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>The popular <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer Extension</a> for Firefox even has an option to do this for you automatically.</p>
+
+<!--more-->
+
+
+<p><img src="http://tjvantoll.com/images/posts/2012-12-12/Web_Developer.png" title="Web Developer Extension" alt="Web Developer Extension" /></p>
+
+<p>Then something changed.</p>
+
+<p>We found out that <a href="https://developers.google.com/speed/docs/best-practices/rtt">unnecessary HTTP requests are bad</a>. We also found out that there are some <a href="http://www.phpied.com/5-years-later-print-css-still-sucks/">serious performance issues with print stylesheets</a>.</p>
+
+<p>Therefore, behind the lead of projects like the <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a> we all switched to writing our print styles inline with the rest of our CSS.</p>
+
+<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
+<span class='line-number'>2</span>
+<span class='line-number'>3</span>
+<span class='line-number'>4</span>
+</pre></td><td class='code'><pre><code class='css'><span class='line'><span class="k">@media</span> <span class="nt">print</span> <span class="p">{</span>
+</span><span class='line'> <span class="nt">body</span> <span class="p">{</span> <span class="k">font-size</span><span class="o">:</span> <span class="k">larger</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'> <span class="nf">#ads</span><span class="o">,</span> <span class="nf">#junk</span> <span class="p">{</span> <span class="k">display</span><span class="o">:</span> <span class="k">none</span><span class="p">;</span> <span class="p">}</span>
+</span><span class='line'><span class="p">}</span>
+</span></code></pre></td></tr></table></div></figure>
+
+
+<p>Inline print styles save HTTP requests and are easier to maintain, but they unfortunately make testing a bit harder. They don&#8217;t work with Firefox&#8217;s Web Developer Extension and a simple find and replace is now quite a bit harder.</p>
+
+<h3>Good News!</h3>
+
+<p>A means to emulate the <code>print</code> media type <a href="https://plus.google.com/115133653231679625609/posts/MgpioU84JPe">just landed in Chrome Canary</a>.</p>
+
+<p>To use it first open up the settings by clicking on the gear in the bottom right corner of the DevTools:</p>
+
+<p><img src="http://tjvantoll.com/images/posts/2012-12-12/DevTools_1.png" title="How to open the DevTools settings" alt="How to open the DevTools settings" /></p>
+
+<p>Next, select the Overrides menu, check the &#8220;Emulate CSS media&#8221; checkbox, and select &#8220;print&#8221;.</p>
+
+<p><img src="http://tjvantoll.com/images/posts/2012-12-12/DevTools_2.png" title="How to emulate CSS media in Chrome's DevTools" alt="How to emulate CSS media in Chrome's DevTools" /></p>
+
+<p>That&#8217;s it! It will apply both rules applied in external <code>media="print"</code> stylesheets as well as rules within inline <code>@media print {}</code> blocks. Combine this with a CSS preprocessor that can watch for changes and you have a quick and easy way to debug print styles.</p>
+
+<p>This feature is in version 25 of Chrome Canary so it hopefully it will make it into Chrome stable around Chrome 27. If you don&#8217;t have Canary yet you should consider <a href="http://paulirish.com/2012/chrome-canary-for-developers/">installing it side by side</a> with the stable release.</p>
+
+<h3>WON&#8217;T SOMEONE THINK ABOUT THE TREES</h3>
+
+<p>Of course the definitive way of testing print stylesheets is to physically print a web page on physical paper. I&#8217;ve done this plenty of times. And if you&#8217;ve read this far you likely have to. Hopefully the next time you have to debug printing you can save a bit of paper.</p>
+
+<p><img src="http://tjvantoll.com/images/posts/2012-12-12/trees.jpg" title="The less pages you print the more of my type get to live" alt="The less pages you print the more of my type get to live" />
+<a href="http://www.flickr.com/photos/cransell/5119828609/" style="display: block; font-size: 0.8em;">Photo Credit</a></p>
+]]></content>
+ </entry>
+
+ <entry>
<title type="html"><![CDATA[Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach]]></title>
<link href="http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/"/>
<updated>2012-11-10T15:44:00-05:00</updated>
@@ -2806,345 +2877,4 @@
]]></content>
</entry>
- <entry>
- <title type="html"><![CDATA[Detecting Print Requests with JavaScript]]></title>
- <link href="http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/"/>
- <updated>2012-06-15T00:00:00-04:00</updated>
- <id>http://tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript</id>
- <content type="html"><![CDATA[<p>CSS has a well supported mechanism for applying changes only when the user is printing a document, <a href="http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/">print stylesheets</a>. They allow you to alter the presentation of a web page for the printer by applying rules that will only be interpreted for printing. This is great for common tasks like hiding non-essential content, using more print friendly typography, and adjusting the layout to better suit the size and shape of paper.</p>
-
-<p>Print stylesheets are great for making presentational changes for printing, but sometimes you need the full power of JavaScript. And in order to do respond to print requests in JavaScript you need the browser to notify you that a print request occurred.</p>
-
-<!--more-->
-
-
-<h3>onbeforeprint and onafterprint</h3>
-
-<p>IE5+ fires <code>onbeforeprint</code> and <code>onafterprint</code> events before and after the user requests the page to be printed.</p>
-
-<figure class='code'><figcaption class='not_empty'><span>onbeforeprint and onaferprint</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="nb">window</span><span class="p">.</span><span class="nx">onbeforeprint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;This will be called before the user prints.&#39;</span><span class="p">);</span>
-</span><span class='line'><span class="p">};</span>
-</span><span class='line'><span class="nb">window</span><span class="p">.</span><span class="nx">onafterprint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;This will be called after the user prints&#39;</span><span class="p">);</span>
-</span><span class='line'><span class="p">};</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>These events are not part of any specification but they are very convenient. Because of this <a href="https://developer.mozilla.org/en/DOM/window.onbeforeprint#Browser_compatibility">Firefox added support for both events in version 6</a>. However, WebKit and Opera do not support the events. Therefore, for cross browser compatibility these events aren&#8217;t going to cut it.</p>
-
-<h3>WebKit&#8217;s Solution</h3>
-
-<p>WebKit has a bug (#<a href="https://bugs.webkit.org/show_bug.cgi?id=19937">19937</a>) out there to implement these events, but progress has stopped because the implementation of another API made this functionality possible already - <code>window.matchMedia</code>.</p>
-
-<h3>window.matchMedia</h3>
-
-<p>The <code>window.matchMedia</code> <a href="https://developer.mozilla.org/en/DOM/window.matchMedia">API</a> provides a means of determining whether the current <code>document</code> matches a given <a href="https://developer.mozilla.org/En/CSS/Media_queries">media query</a>. For example:</p>
-
-<figure class='code'><figcaption class='not_empty'><span>window.matchMedia</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">&#39; (min-width: 600px) &#39;</span><span class="p">).</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;The viewport is at least 600 pixels wide&#39;</span><span class="p">);</span>
-</span><span class='line'><span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;The viewport is less than 600 pixels wide&#39;</span><span class="p">);</span>
-</span><span class='line'><span class="p">}</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>You can also use this API to add listeners that will be fired whenever the result of the media query changes. In the above example the <code>matches</code> criteria will be met whenever the viewport is at least 600px wide. If you wanted to receive notifications whenever the viewport crossed the 600px threshold you could use the following.</p>
-
-<figure class='code'><figcaption class='not_empty'><span>window.matchMedia with notifications</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">&#39; (min-width: 600px) &#39;</span><span class="p">);</span>
-</span><span class='line'><span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">mql</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">mql</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;The viewport is at least 600 pixels wide&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;The viewport is less than 600 pixels wide&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="p">}</span>
-</span><span class='line'><span class="p">});</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p><a href="http://caniuse.com/#feat=matchmedia">If your browser supports window.matchMedia</a> you can see this behavior live below by resizing your browser window under 600px and checking your browser&#8217;s JavaScript console.</p>
-
-<iframe style="width: 100%; height: 200px;" src="http://jsfiddle.net/tj_vantoll/uYJxy/2/embedded/result,js,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-
-<p>Interestingly, it turns out you can also use this same technique to listen for the <code>print</code> media being applied when the user requests the document to be printed (<a href="http://code.google.com/p/chromium/issues/detail?id=105743">hat tip to Ben Wells</a>):</p>
-
-<figure class='code'><figcaption class='not_empty'><span>Using window.matchMedia to detecting print requests</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">&#39;print&#39;</span><span class="p">);</span>
-</span><span class='line'><span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">mql</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">mql</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;onbeforeprint equivalent&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;onafterprint equivalent&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="p">}</span>
-</span><span class='line'><span class="p">});</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>This works great in Chrome 9+ and Safari 5.1 (with the exception of the fact that the <a href="http://code.google.com/p/chromium/issues/detail?id=105743">listeners fire twice in Chrome</a>). However, it doesn&#8217;t work in Firefox or IE10, even though they both support <code>window.matchMedia</code>.</p>
-
-<h4>Update (July 16th, 2012)</h4>
-
-<p>I created a bug on Firefox&#8217;s issue tracker for this defect - <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=774398">https://bugzilla.mozilla.org/show_bug.cgi?id=774398</a>. I&#8217;ll update this post when I hear back.</p>
-
-<h3>Combining the Approaches</h3>
-
-<p>If you combine the two approaches you can detect print requests in IE 5+, Firefox 6+, Chrome 9+, and Safari 5.1+ (unfortunately Opera doesn&#8217;t support either approach).</p>
-
-<figure class='code'><figcaption class='not_empty'><span>Cross browser print request detection</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-<span class='line-number'>11</span>
-<span class='line-number'>12</span>
-<span class='line-number'>13</span>
-<span class='line-number'>14</span>
-<span class='line-number'>15</span>
-<span class='line-number'>16</span>
-<span class='line-number'>17</span>
-<span class='line-number'>18</span>
-<span class='line-number'>19</span>
-<span class='line-number'>20</span>
-<span class='line-number'>21</span>
-<span class='line-number'>22</span>
-</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">beforePrint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Functionality to run before printing.&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="p">};</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">afterPrint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">&#39;Functionality to run after printing&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="p">};</span>
-</span><span class='line'>
-</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">&#39;print&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">mql</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">mql</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">beforePrint</span><span class="p">();</span>
-</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">afterPrint</span><span class="p">();</span>
-</span><span class='line'> <span class="p">}</span>
-</span><span class='line'> <span class="p">});</span>
-</span><span class='line'> <span class="p">}</span>
-</span><span class='line'>
-</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onbeforeprint</span> <span class="o">=</span> <span class="nx">beforePrint</span><span class="p">;</span>
-</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onafterprint</span> <span class="o">=</span> <span class="nx">afterPrint</span><span class="p">;</span>
-</span><span class='line'><span class="p">}());</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>Note that your event handlers might potentially have to deal with the fact that they&#8217;re going to be called twice per print request in Chrome.</p>
-
-<h3>Why Would I Use This?</h3>
-
-<p>For most situations print stylesheets are all you need to prepare the document for printing. But I can think of a couple practical uses of the JavaScript event.</p>
-
-<h3>Responsive Print Images</h3>
-
-<p>One use is substituting a higher quality image for the purposes of printing. Traditionally <a href="http://www.cssnewbie.com/print-friendly-images/">web browsers have displayed images at 72dpi and most printers can handle 300dpi+</a>. While some newer devices are able to display images at much higher resolutions, most users are still using a screen that will show web images at much lower resolutions than their printer can handle.</p>
-
-<p>Therefore an image that might look just fine on the user&#8217;s screen might look fuzzy and grainy when printed out. For most images this is acceptable, but it might be an issue for prominent images on regularly printed documents, like a company logo. You probably want that to look crisp when printed out.</p>
-
-<p>The <a href="http://www.alistapart.com/articles/hiresprinting">technique to work around this</a> involves loading both images, showing only the lower quality one by default, then hiding the low quality image and showing the high quality one in the print stylesheet. The main downfall of this approach is that the end user has to download both images regardless of whether they&#8217;re going to print the page. Users on 3G devices that have no intention or capability of printing the document will still have to download your high resolution logo.</p>
-
-<p>With the ability to detect print requests in JavaScript you can substitute the higher quality image on the fly when the user requests the page to be printed.</p>
-
-<figure class='code'><figcaption class='not_empty'><span>Substituting higher quality images when printing</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-<span class='line-number'>11</span>
-<span class='line-number'>12</span>
-<span class='line-number'>13</span>
-<span class='line-number'>14</span>
-<span class='line-number'>15</span>
-<span class='line-number'>16</span>
-<span class='line-number'>17</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="nt">&lt;img</span> <span class="na">src=</span><span class="s">&quot;low-quality.jpg&quot;</span> <span class="na">id=</span><span class="s">&quot;company_logo&quot;</span> <span class="na">alt=</span><span class="s">&quot;My Company&quot;</span> <span class="nt">/&gt;</span>
-</span><span class='line'>
-</span><span class='line'><span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">upgradeImage</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;company_logo&#39;</span><span class="p">)</span>
-</span><span class='line'> <span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">&#39;src&#39;</span><span class="p">,</span> <span class="s1">&#39;high-quality.png&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="p">};</span>
-</span><span class='line'>
-</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">&#39;print&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="nx">upgradeImage</span><span class="p">);</span>
-</span><span class='line'> <span class="p">}</span>
-</span><span class='line'>
-</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onbeforeprint</span> <span class="o">=</span> <span class="nx">upgradeImage</span><span class="p">;</span>
-</span><span class='line'> <span class="p">});</span>
-</span><span class='line'><span class="nt">&lt;/script&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>The nice thing about this approach is that users that never print will not have to download the high quality image. This technique also degrades nicely; users with browsers that don&#8217;t support the print events will simply print the lower quality image.</p>
-
-<h3>Tracking Print Requests</h3>
-
-<p>Print events can also be used to track the number of times users print pages within a site or application. Because of the lack of total browser support you wouldn&#8217;t capture every print request, but this would be sufficient for getting a rough idea of how often people are printing.</p>
-
-<figure class='code'><figcaption class='not_empty'><span>Tracking Print Requests</span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-<span class='line-number'>11</span>
-<span class='line-number'>12</span>
-<span class='line-number'>13</span>
-<span class='line-number'>14</span>
-<span class='line-number'>15</span>
-<span class='line-number'>16</span>
-<span class='line-number'>17</span>
-<span class='line-number'>18</span>
-</pre></td><td class='code'><pre><code class='javascript'><span class='line'><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">afterPrint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="c1">// Here you would send an AJAX request to the server to track that a page</span>
-</span><span class='line'> <span class="c1">// has been printed. You could additionally pass the URL if you wanted to</span>
-</span><span class='line'> <span class="c1">// track printing across an entire site or application.</span>
-</span><span class='line'> <span class="p">};</span>
-</span><span class='line'>
-</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">&#39;print&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">mql</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">mql</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">afterPrint</span><span class="p">();</span>
-</span><span class='line'> <span class="p">}</span>
-</span><span class='line'> <span class="p">});</span>
-</span><span class='line'> <span class="p">}</span>
-</span><span class='line'>
-</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onafterprint</span> <span class="o">=</span> <span class="nx">afterPrint</span><span class="p">;</span>
-</span><span class='line'><span class="p">}());</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<h3>So can I use this in a &#8220;real&#8221; application?</h3>
-
-<p>Sure, just make sure what you&#8217;re doing degrades nicely for users using a browser in which the event will not be fired.</p>
-
-<p>Can you think of any other practical uses of detecting print requests in JavaScript? If so let me know in the comments.</p>
-
-<h4>Update (July 16th, 2012)</h4>
-
-<p>Per the comments I&#8217;ve found that in addition to all the bugs mentioned above, certain browsers trigger the after print event early (with either <code>onafterprint</code> or the <code>window.matchMedia</code> handler implementation).</p>
-
-<figure class='code'><figcaption class='empty'><span></span></figcaption><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
-<span class='line-number'>2</span>
-<span class='line-number'>3</span>
-<span class='line-number'>4</span>
-<span class='line-number'>5</span>
-<span class='line-number'>6</span>
-<span class='line-number'>7</span>
-<span class='line-number'>8</span>
-<span class='line-number'>9</span>
-<span class='line-number'>10</span>
-<span class='line-number'>11</span>
-<span class='line-number'>12</span>
-<span class='line-number'>13</span>
-<span class='line-number'>14</span>
-<span class='line-number'>15</span>
-<span class='line-number'>16</span>
-<span class='line-number'>17</span>
-<span class='line-number'>18</span>
-<span class='line-number'>19</span>
-<span class='line-number'>20</span>
-<span class='line-number'>21</span>
-<span class='line-number'>22</span>
-<span class='line-number'>23</span>
-<span class='line-number'>24</span>
-<span class='line-number'>25</span>
-<span class='line-number'>26</span>
-<span class='line-number'>27</span>
-<span class='line-number'>28</span>
-<span class='line-number'>29</span>
-<span class='line-number'>30</span>
-<span class='line-number'>31</span>
-<span class='line-number'>32</span>
-</pre></td><td class='code'><pre><code class='html'><span class='line'><span class="cp">&lt;!DOCTYPE html&gt;</span>
-</span><span class='line'><span class="nt">&lt;html&gt;</span>
-</span><span class='line'> <span class="nt">&lt;head&gt;</span>
-</span><span class='line'> <span class="nt">&lt;script&gt;</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">beforePrint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;printImage&#39;</span><span class="p">).</span><span class="nx">src</span> <span class="o">=</span>
-</span><span class='line'> <span class="s1">&#39;http://stackoverflow.com/favicon.ico&#39;</span><span class="p">;</span>
-</span><span class='line'> <span class="p">};</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">afterPrint</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
-</span><span class='line'> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;printImage&#39;</span><span class="p">).</span><span class="nx">src</span> <span class="o">=</span>
-</span><span class='line'> <span class="s1">&#39;http://google.com/favicon.ico&#39;</span><span class="p">;</span>
-</span><span class='line'> <span class="p">};</span>
-</span><span class='line'>
-</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="kd">var</span> <span class="nx">mediaQueryList</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">matchMedia</span><span class="p">(</span><span class="s1">&#39;print&#39;</span><span class="p">);</span>
-</span><span class='line'> <span class="nx">mediaQueryList</span><span class="p">.</span><span class="nx">addListener</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">mql</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="k">if</span> <span class="p">(</span><span class="nx">mql</span><span class="p">.</span><span class="nx">matches</span><span class="p">)</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">beforePrint</span><span class="p">();</span>
-</span><span class='line'> <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
-</span><span class='line'> <span class="nx">afterPrint</span><span class="p">();</span>
-</span><span class='line'> <span class="p">}</span>
-</span><span class='line'> <span class="p">});</span>
-</span><span class='line'> <span class="p">}</span>
-</span><span class='line'>
-</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onbeforeprint</span> <span class="o">=</span> <span class="nx">beforePrint</span><span class="p">;</span>
-</span><span class='line'> <span class="nb">window</span><span class="p">.</span><span class="nx">onafterprint</span> <span class="o">=</span> <span class="nx">afterPrint</span><span class="p">;</span>
-</span><span class='line'> <span class="nt">&lt;/script&gt;</span>
-</span><span class='line'> <span class="nt">&lt;/head&gt;</span>
-</span><span class='line'> <span class="nt">&lt;body&gt;</span>
-</span><span class='line'> <span class="nt">&lt;img</span> <span class="na">id=</span><span class="s">&quot;printImage&quot;</span> <span class="na">src=</span><span class="s">&quot;http://google.com/favicon.ico&quot;</span> <span class="nt">/&gt;</span>
-</span><span class='line'> <span class="nt">&lt;/body&gt;</span>
-</span><span class='line'><span class="nt">&lt;/html&gt;</span>
-</span></code></pre></td></tr></table></div></figure>
-
-
-<p>When printing the above document you would expect Stack Overflow&#8217;s favicon to print, when in actuality Google&#8217;s favicon prints. Both events fire, but the after print event fires before the printing actually occurs, which in this case reverts the changes made in the before print event.</p>
-
-<p>I was able to recreate this problem in Chrome and Firefox.</p>
-
-<p>Therefore do not do anything that relies on the after print event to fix what the before print event did. For responsive print images this shouldn&#8217;t be an issue because there should be no harm leaving the higher quality image in place; the user has already downloaded it.</p>
-]]></content>
- </entry>
-
</feed>
View
26 blog/archives/index.html
@@ -9,8 +9,8 @@
<meta name="author" content="TJ VanToll">
- <meta name="description" content="Blog Archive 2012 Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach
-Nov 10 2012 posted in Browsers, CSS, HTML Creating a &hellip;">
+ <meta name="description" content="Blog Archive 2012 Debugging Print Stylesheets: Now Significantly Easier in Chrome
+Dec 12 2012 posted in CSS Creating Cross Browser Scrollable &lt; &hellip;">
<!-- http://t.co/dKP3o1e -->
@@ -110,6 +110,20 @@ <h1 class="entry-title">Blog Archive</h1>
<article>
+<h1><a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a></h1>
+<time datetime="2012-12-12T21:55:00-05:00" pubdate><span class='month'>Dec</span> <span class='day'>12</span> <span class='year'>2012</span></time>
+
+<footer>
+ <span class="categories">posted in <a class='category' href='/blog/categories/css/'>CSS</a></span>
+</footer>
+
+
+</article>
+
+
+
+<article>
+
<h1><a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a></h1>
<time datetime="2012-11-10T15:44:00-05:00" pubdate><span class='month'>Nov</span> <span class='day'>10</span> <span class='year'>2012</span></time>
@@ -498,6 +512,10 @@ <h1 class="entry-title">Blog Archive</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -533,10 +551,6 @@ <h1 class="entry-title">Blog Archive</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
2 blog/categories/browsers/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: Browsers | TJ VanToll]]></title>
<link href="http://tjvantoll.com/blog/categories/browsers/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
- <updated>2012-12-04T21:48:22-05:00</updated>
+ <updated>2012-12-12T23:19:22-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
View
8 blog/categories/browsers/index.html
@@ -315,6 +315,10 @@ <h1 class="entry-title">Category: Browsers</h1>
<ul id="recent_posts">
<li class="post">
+ <a href="/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/">Debugging Print Stylesheets: Now Significantly Easier in Chrome</a>
+ </li>
+
+ <li class="post">
<a href="/2012/11/10/creating-cross-browser-scrollable-tbody/">Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach</a>
</li>
@@ -350,10 +354,6 @@ <h1 class="entry-title">Category: Browsers</h1>
<a href="/2012/08/28/google-analytics-excluding-visits-in-development-and-production/">Google Analytics - Excluding Your Own Visits in Development and Production</a>
</li>
- <li class="post">
- <a href="/2012/08/22/logging-test-failures-in-a-phantomjs-qunit-runner/">Logging Test Failures in a PhantomJS QUnit Runner</a>
- </li>
-
</ul>
</section>
View
220 blog/categories/css/atom.xml
@@ -4,7 +4,7 @@
<title><![CDATA[Category: CSS | TJ VanToll]]></title>
<link href="http://tjvantoll.com/blog/categories/css/atom.xml" rel="self"/>
<link href="http://tjvantoll.com/"/>
- <updated>2012-12-04T21:48:22-05:00</updated>
+ <updated>2012-12-12T23:19:22-05:00</updated>
<id>http://tjvantoll.com/</id>
<author>
<name><![CDATA[TJ VanToll]]></name>
@@ -14,6 +14,76 @@
<entry>
+ <title type="html"><![CDATA[Debugging Print Stylesheets: Now Significantly Easier in Chrome]]></title>
+ <link href="http://tjvantoll.com/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome/"/>
+ <updated>2012-12-12T21:55:00-05:00</updated>
+ <id>http://tjvantoll.com/2012/12/12/debugging-print-stylesheets-now-significantly-easier-in-chrome</id>
+ <content type="html"><![CDATA[<p>Debugging print stylesheets has always been a bit of a pain. The traditional way of doing so was to simply change the <code>media</code> attribute of all <code>link</code> tags from <code>print</code> to <code>screen</code> or <code>all</code> while testing.</p>
+
+<p>``` html</p>
+
+<!-- Before -->
+
+
+<p><link rel="stylesheet" href="print.css" media="print" /></p>
+
+<!-- After -->
+
+
+<p><link rel="stylesheet" href="print.css" media="screen" />
+```</p>
+
+<p>The popular <a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer Extension</a> for Firefox even has an option to do this for you automatically.</p>
+
+<!--more-->
+
+
+<p><img src="/images/posts/2012-12-12/Web_Developer.png" title="Web Developer Extension" alt="Web Developer Extension" /></p>
+
+<p>Then something changed.</p>
+
+<p>We found out that <a href="https://developers.google.com/speed/docs/best-practices/rtt">unnecessary HTTP requests are bad</a>. We also found out that there are some <a href="http://www.phpied.com/5-years-later-print-css-still-sucks/">serious performance issues with print stylesheets</a>.</p>
+
+<p>Therefore, behind the lead of projects like the <a href="http://html5boilerplate.com/">HTML5 Boilerplate</a> we all switched to writing our print styles inline with the rest of our CSS.</p>
+
+<p>``` css
+@media print {</p>
+
+<pre><code>body { font-size: larger; }
+#ads, #junk { display: none; }
+</code></pre>
+
+<p>}
+```</p>
+
+<p>Inline print styles save HTTP requests and are easier to maintain, but they unfortunately make testing a bit harder. They don't work with Firefox's Web Developer Extension and a simple find and replace is now quite a bit harder.</p>
+
+<h3>Good News!</h3>
+
+<p>A means to emulate the <code>print</code> media type <a href="https://plus.google.com/115133653231679625609/posts/MgpioU84JPe">just landed in Chrome Canary</a>.</p>
+
+<p>To use it first open up the settings by clicking on the gear in the bottom right corner of the DevTools:</p>
+
+<p><img src="/images/posts/2012-12-12/DevTools_1.png" title="How to open the DevTools settings" alt="How to open the DevTools settings" /></p>
+
+<p>Next, select the Overrides menu, check the "Emulate CSS media" checkbox, and select "print".</p>
+
+<p><img src="/images/posts/2012-12-12/DevTools_2.png" title="How to emulate CSS media in Chrome's DevTools" alt="How to emulate CSS media in Chrome's DevTools" /></p>
+
+<p>That's it! It will apply both rules applied in external <code>media="print"</code> stylesheets as well as rules within inline <code>@media print {}</code> blocks. Combine this with a CSS preprocessor that can watch for changes and you have a quick and easy way to debug print styles.</p>
+
+<p>This feature is in version 25 of Chrome Canary so it hopefully it will make it into Chrome stable around Chrome 27. If you don't have Canary yet you should consider <a href="http://paulirish.com/2012/chrome-canary-for-developers/">installing it side by side</a> with the stable release.</p>
+
+<h3>WON'T SOMEONE THINK ABOUT THE TREES</h3>
+
+<p>Of course the definitive way of testing print stylesheets is to physically print a web page on physical paper. I've done this plenty of times. And if you've read this far you likely have to. Hopefully the next time you have to debug printing you can save a bit of paper.</p>
+
+<p><img src="/images/posts/2012-12-12/trees.jpg" title="The less pages you print the more of my type get to live" alt="The less pages you print the more of my type get to live" />
+<a href="http://www.flickr.com/photos/cransell/5119828609/" style="display: block; font-size: 0.8em;">Photo Credit</a></p>
+]]></content>
+ </entry>
+
+ <entry>
<title type="html"><![CDATA[Creating Cross Browser Scrollable &lt;tbody&gt;s - A CSS Only Approach]]></title>
<link href="http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/"/>
<updated>2012-11-10T15:44:00-05:00</updated>
@@ -205,152 +275,4 @@ td:nth-child(3), th:nth-child(3) { width: 100px; }
]]></content>
</entry>
- <entry>
- <title type="html"><![CDATA[Default Browser Handling of the CSS text-transform Property]]></title>
- <link href="http://tjvantoll.com/2012/07/10/default-browser-handling-of-the-css-text-transform-property/"/>
- <updated>2012-07-10T21:05:00-04:00</updated>
- <id>http://tjvantoll.com/2012/07/10/default-browser-handling-of-the-css-text-transform-property</id>
- <content type="html"><![CDATA[<p>The <code>text-transform</code> CSS property is most frequently used to uppercase and lowercase text. According to the <a href="http://www.w3.org/TR/CSS21/text.html#caps-prop">CSS 2.1 specification</a> it is also an inherited property, meaning, when no value is specified on a given element, it should inherit its parent's <code>text-transform</code> value.</p>
-
-<p>If no parents have a <code>text-transform</code> property defined, the element will take on the default value of <code>none</code>.</p>
-
-<p>Where it gets interesting is that all browsers define default <code>text-transform</code> properties for certain form elements. What does this mean? <!--more-->Let's say you have the following markup:</p>
-
-<p>``` html</p>
-
-
-
-
-
-<div>
- <input type="text" value="foo" />
- <input type="submit" value="bar" />
-</div>
-
-
-<p>```</p>
-
-<p>Both <code>foo</code> and <code>bar</code> will appear lowercased in all major browsers. You can see this for yourself below:</p>
-
-<iframe style="width: 100%; height: 120px;" src="http://jsfiddle.net/tj_vantoll/DxANv/1/embedded/result,html,css/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
-
-
-<p>This happens because all browser vendors include <code>text-transform: none</code> in their user agent stylesheet for those elements. Therefore the <code>text-transform: uppercase</code> rule declared on the parent node is not inherited.</p>
-
-<p>Unfortunately, but not surprisingly, browsers are not consistent about their default values for all elements.</p>
-
-<h3>What the Browsers Do</h3>
-
-<p>The following chart shows popular browser rendering engines and whether their user agent stylesheet includes <code>text-transform: none</code> for the listed elements.</p>
-
-<table>
- <thead>
- <tr>
- <th>Rendering Engine</th>
- <th>input[type=submit]</th>
- <th>input[type=text]</th>
- <th>select</th>
- <th>textarea</th>
- <th>button</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Trident (Internet Explorer)</td>
- <td>Yes</td>
- <td>Yes</td>
- <td>Yes</td>
- <td>Yes</td>
- <td><strong>No</strong></td>
- </tr>
- <tr>
- <td>Gecko (Firefox)</td>
- <td>Yes</td>
- <td>Yes</td>
- <td><strong>No</strong></td>
- <td>Yes</td>