{"id":13921,"date":"2011-08-31T19:45:14","date_gmt":"2011-09-01T02:45:14","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=13921"},"modified":"2011-11-30T20:34:04","modified_gmt":"2011-12-01T03:34:04","slug":"f","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/","title":{"rendered":"F"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":1036,"featured_media":0,"parent":13710,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-group.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":13573,"url":"https:\/\/css-tricks.com\/snippets\/css\/slide-in-image-boxes\/","url_meta":{"origin":13921,"position":0},"title":"Slide In Image Boxes","date":"August 13, 2011","format":false,"excerpt":"From the footer of the v8 design of CSS-Tricks. View Demo footer { clear:both; overflow:hidden; font-size:16px; line-height:1.3; } #footer-boxes { -moz-column-count:2; -moz-column-gap:10px; -webkit-column-count:2; -webkit-column-gap:10px; column-count:4; column-gap:10px; } .footer-box { margin:0 0 10px 0; display:inline-block; width:262px; height:140px; padding:15px; background:#e6e2df; color:#b2aaa4; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; background-position:320px 50%; background-repeat:no-repeat; text-decoration: none;\u2026","rel":"","context":"With 30 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14182,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/","url_meta":{"origin":13921,"position":1},"title":"F","date":"September 6, 2011","format":false,"excerpt":"","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":19750,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/strip-whitespace-from-string\/","url_meta":{"origin":13921,"position":2},"title":"Strip Whitespace From String","date":"January 5, 2013","format":false,"excerpt":"Whitespace, meaning tabs and spaces. Vanilla JavaScript (Trim Leading and Trailing) var str = \" a b c d e f g \"; var newStr = str.trim(); \/\/ \"a b c d e f g\" That method is ES 5, so just in case you could polyfill it (IE 8\u2026","rel":"","context":"With 6 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":7202,"url":"https:\/\/css-tricks.com\/snippets\/php\/english-time-to-seconds\/","url_meta":{"origin":13921,"position":3},"title":"English Time to Seconds","date":"August 18, 2010","format":false,"excerpt":"Just type in the time you want converted to seconds in english (e.g. \"1 hour and 30 minutes\") and it will be converted to an integer of seconds (e.g. 5400). Thanks to Baylor Rae. function time2seconds($time) { preg_match_all('\/(\\d+ [a-z]+)\/', $time, $matches); $matches = $matches[0]; $formats = array(); foreach ($matches as\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":196692,"url":"https:\/\/css-tricks.com\/snippets\/javascript\/cross-browser-dependency-free-dom-ready\/","url_meta":{"origin":13921,"position":4},"title":"Cross-Browser Dependency-Free DOM Ready","date":"February 24, 2015","format":false,"excerpt":"Denis Ciccale's version: var DOMReady = function(a, b, c) { b = document c = 'addEventListener' b[c] ? b[c]('DocumentContentLoaded', a) : window.attachEvent('onload', a) } DOMReady(function () { alert('The DOM is Ready!'); }); Minimized: var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)} Dustin Diaz's version: function r(f){\/in\/.test(document.readyState)?setTimeout('r('+f+')',9):f()} He also had a repo for it where\u2026","rel":"","context":"With 3 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14188,"url":"https:\/\/css-tricks.com\/almanac\/selectors\/f\/focus\/","url_meta":{"origin":13921,"position":5},"title":":focus","date":"September 6, 2011","format":false,"excerpt":"The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse. Here is an example: textarea:focus { background: pink; } CodePen Embed Fallback Any element (most commonly\u00a0<input>s and\u00a0<textarea>s) are in \"focus\" when they are selected and ready\u2026","rel":"","context":"With 33 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/1036"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13921"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921\/revisions"}],"predecessor-version":[{"id":15305,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921\/revisions\/15305"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13710"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13921"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}