CINXE.COM

<!DOCTYPE html>     <html lang="en-US">  <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://make.wordpress.org/core/handbook/coding-standards/css/","20130123191817","https://web.archive.org/","web","/_static/", "1358968697"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width"/> <title>CSS Coding Standards | Core Contributor Handbook</title> <link rel="profile" href="http://gmpg.org/xfn/11"/> <link rel="stylesheet" type="text/css" media="all" href="https://web.archive.org/web/20130123191817cs_/http://make.wordpress.org/core/handbook/wp-content/themes/make-twentyeleven/style.css"/> <link rel="pingback" href="http://make.wordpress.org/core/handbook/xmlrpc.php"/>  <link rel="alternate" type="application/rss+xml" title="Core Contributor Handbook » Feed" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/feed/"/> <link rel="alternate" type="application/rss+xml" title="Core Contributor Handbook » Comments Feed" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/comments/feed/"/> <link rel="alternate" type="application/rss+xml" title="Core Contributor Handbook » CSS Coding Standards Comments Feed" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/feed/"/> <link rel="stylesheet" id="admin-bar-css" href="https://web.archive.org/web/20130123191817cs_/http://make.wordpress.org/core/handbook/wp-includes/css/admin-bar.min.css?ver=3.6-alpha-23334" type="text/css" media="all"/> <link rel="stylesheet" id="jetpack-widgets-css" href="https://web.archive.org/web/20130123191817cs_/http://make.wordpress.org/core/handbook/wp-content/plugins/jetpack/modules/widgets/widgets.css?ver=20121003" type="text/css" media="all"/> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-includes/js/comment-reply.min.js?ver=3.6-alpha-23334"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-includes/js/jquery/jquery.js?ver=1.9.0"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-includes/js/jquery/jquery-migrate.js?ver=1.0.0"></script> <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://make.wordpress.org/core/handbook/xmlrpc.php?rsd"/> <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://make.wordpress.org/core/handbook/wp-includes/wlwmanifest.xml"/> <link rel="prev" title="Researching Code History with SVN Annotate" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/svn/code-history/"/> <link rel="next" title="Automated Testing" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/automated-testing/"/> <meta name="generator" content="WordPress 3.6-alpha-23334"/> <link rel="canonical" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/"/> <link rel="shortlink" href="https://web.archive.org/web/20130123191817/http://wp.me/P2ABLO-13Q"/>  <meta property="og:type" content="article"/> <meta property="og:title" content="CSS Coding Standards"/> <meta property="og:url" content="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/"/> <meta property="og:description" content="ContentsStructure Selectors Properties Property Ordering Vendor Prefixes Values Media Queries Commenting Best Practices Related Links Like any coding standard, the purpose of the WordPress CSS Codi..."/> <meta property="og:site_name" content="Core Contributor Handbook"/> <style type="text/css" media="print">#wpadminbar { display:none; }</style> <style type="text/css" media="screen"> html { margin-top: 28px !important; } * html body { margin-top: 28px !important; } </style> <style type="text/css" id="custom-background-css"> body.custom-background { background-color: #003366; } </style> <meta id="syntaxhighlighteranchor" name="syntaxhighlighter-version" content="3.1.3"/> <link rel="stylesheet" type="text/css" href="https://web.archive.org/web/20130123191817cs_/http://make.wordpress.org/core/handbook/?custom-css=1&csblog=22&cscache=6&csrev=16"/> <script type="text/javascript"> /* <![CDATA[ */ var wpNotesIsJetpackClient = true; /* ]]> */ </script> </head> <body class="page page-id-4082 page-child parent-pageid-3856 page-template page-template-sidebar-page-php admin-bar no-customize-support custom-background single-author two-column left-sidebar"> <div id="page" class="hfeed"> <header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/" title="Core Contributor Handbook" rel="home">Core Contributor Handbook</a></span></h1> <h2 id="site-description">Making WordPress</h2> </hgroup> <form method="get" id="searchform" action="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/"> <label for="s" class="assistive-text">Search</label> <input type="text" class="field" name="s" id="s" placeholder="Search"/> <input type="submit" class="submit" name="submit" id="searchsubmit" value="Search"/> </form> <nav id="access" role="navigation"> <h3 class="assistive-text">Main menu</h3> <div class="skip-link"><a class="assistive-text" href="#content" title="Skip to primary content">Skip to primary content</a></div> <div class="skip-link"><a class="assistive-text" href="#secondary" title="Skip to secondary content">Skip to secondary content</a></div> <div class="menu-main-menu-container"><ul id="menu-main-menu" class="menu"><li id="menu-item-3873" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3873"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/">Handbook Home</a></li> <li id="menu-item-3874" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-3874"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/">WordPress Development Blog</a></li> <li id="menu-item-4311" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4311"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/project-organization/">Project Organization</a></li> <li id="menu-item-4312" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4312"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/our-philosophies/">Our Philosophies</a></li> </ul></div> </nav> </header> <div id="main"> <div id="primary"> <div id="content" role="main"> <article id="post-4082" class="post-4082 page type-page status-publish hentry"> <header class="entry-header"> <h1 class="entry-title">CSS Coding Standards</h1> </header> <div class="entry-content"> <style> .toc-jump { text-align: right; font-size: 12px; } .page .toc-heading { margin-top: -50px; padding-top: 50px !important; }</style><div class="table-of-contents"><h2>Contents</h2><ul class="items"><li><a href="#structure">Structure</a></li> <li><a href="#selectors">Selectors</a></li> <li><a href="#properties">Properties</a> <ul> <li><a href="#property-ordering">Property Ordering</a></li> <li><a href="#vendor-prefixes">Vendor Prefixes</a> </ul></li> <li><a href="#values">Values</a></li> <li><a href="#media-queries">Media Queries</a></li> <li><a href="#commenting">Commenting</a></li> <li><a href="#best-practices">Best Practices</a></li> <li><a href="#related-links">Related Links</a></ul> </div> <p>Like any coding standard, the purpose of the WordPress CSS Coding Standards is to create a baseline for collaboration and review within various aspects of the WordPress open source project and community, from Core code to themes to plugins. Files within a project should appear as though created by a single entity. Above all else, create code that is readable, meaningful, consistent, and beautiful.</p> <p>Within core stylesheets, inconsistencies will often be found. We are working on addressing these and make every effort to have patches and commits from this point forward follow the CSS coding standards. More information on the above and contributing to UI/front-end development will be forthcoming in a separate set of guidelines.</p> <h2 class="toc-heading" id="structure">Structure <a href="#structure" class="anchor">#</a></h2> <p>There are plenty of different methods for structuring a stylesheet. With the CSS in core, it is important to retain a high degree of legibility. This enables subsequent contributors to have a clear understanding of the flow of the document.</p> <ul> <li>Use tabs, not spaces, to indent each property.</li> <li>Add two blank lines between sections and one blank line between blocks in a section.</li> <li>Each selector should be on its own line, ending in either a comma or an opening curly brace. Property-value pairs should be on their own line, with one tab of indentation and an ending semicolon. The closing brace should be flush left, using the same level of indentation as the opening selector.</li> </ul> <p>Correct:</p> <pre class="brush: css; title: ; notranslate" title=""> #selector-1, #selector-2, #selector-3 { background: #fff; color: #000; } </pre> <p>Incorrect:</p> <pre class="brush: css; title: ; notranslate" title=""> #selector-1, #selector-2, #selector-3 { background: #fff; color: #000; } #selector-1 { background: #fff; color: #000; } </pre> <p class="toc-jump"><a href="#top">Top ↑</a></p><h2 class="toc-heading" id="selectors">Selectors <a href="#selectors" class="anchor">#</a></h2> <p>With specificity, comes great responsibility. Broad selectors allow us to be efficient, yet can have adverse consequences if not tested. Location-specific selectors can save us time, but will quickly lead to a cluttered stylesheet. Exercise your best judgement to create selectors that find the right balance between contributing to the overall style and layout of the DOM.</p> <ul> <li>As in the<a href="https://web.archive.org/web/20130123191817/http://codex.wordpress.org/WordPress_Coding_Standards"> WordPress Coding Standards</a>, use lowercase and separate words with hyphens when naming selectors. Avoid camelcase and underscores.</li> <li>Use human readable selectors that describe what element(s) they style.</li> <li>Attribute selectors should use double quotes around values</li> <li>Refrain from using over-qualified selectors, <code>div.container</code> can simply be stated as <code>.container</code></li> </ul> <p>Correct:</p> <pre class="brush: css; title: ; notranslate" title=""> #comment-form { margin: 1em 0; } input[type="text"] { line-height: 1.1; } </pre> <p>Incorrect:</p> <pre class="brush: css; title: ; notranslate" title=""> #commentForm { /* Avoid camelcase. */ margin: 0; } #comment_form { /* Avoid underscores. */ margin: 0; } div#comment_form { /* Avoid over-qualification. */ margin: 0; } #c1-xr { /* What is a c1-xr?! Use a better name. */ margin: 0; } input[type=text] { /* Should be [type="text"] */ line-height: 110% /* Also doubly incorrect */ } </pre> <p class="toc-jump"><a href="#top">Top ↑</a></p><h2 class="toc-heading" id="properties">Properties <a href="#properties" class="anchor">#</a></h2> <p>Similar to selectors, properties that are too specific will hinder the flexibility of the design. Less is more. Make sure you are not repeating styling or introducing fixed dimensions (when a fluid solution is more acceptable).</p> <ul> <li>Properties should be followed by a colon and a space.</li> <li>All properties and values should be lowercase, except for font names and vendor-specific properties.</li> <li>Use hex code for colors, or rgba() if opacity is needed. Avoid RGB format and uppercase, and shorten values when possible: #fff instead of #FFFFFF.</li> <li>Use shorthand (except when overriding styles) for background, border, font, list-style, margin, and padding values as much as possible. (For a shorthand reference, see<a href="https://web.archive.org/web/20130123191817/http://codex.wordpress.org/CSS_Shorthand"> CSS Shorthand</a>.)</li> </ul> <h3 class="toc-heading" id="property-ordering">Property Ordering <a href="#property-ordering" class="anchor">#</a></h3> <blockquote><p>“Group like properties together, especially if you have a lot of them.”<br/> – Nacin</p></blockquote> <p>Above all else, choose something that is meaningful to you and semantic in some way. Random ordering is chaos, not poetry. In WordPress Core, our choice is logical or grouped ordering, wherein properties are grouped by meaning and ordered specifically within those groups. The properties within groups are also strategically ordered to create transitions between sections, such as background directly before color. The baseline for ordering is:</p> <ul> <li>Display</li> <li>Positioning</li> <li>Box model</li> <li>Colors and Typography</li> <li>Other</li> </ul> <p>Things that are not yet used in core itself, such as CSS3 animations, may not have a prescribed place above but likely would fit into one of the above in a logical manner. Just as CSS is evolving, so our standards will evolve with it.</p> <p>Top/Right/Bottom/Left (TRBL/trouble) should be the order for any relevant properties (e.g. margin), much as the order goes in values. Corner specifiers (e.g. border-radius-*-*) should be top-left, top-right, bottom-right, bottom-left. This is derived from how shorthand values would be ordered.</p> <p>Another method that is often used, including by the Automattic/WordPress.com Themes Team, is to order properties alphabetically, with or without certain exceptions.</p> <p>Example:</p> <pre class="brush: css; title: ; notranslate" title=""> #overlay { position: absolute; z-index: 1; padding: 10px; background: #fff; color: #777; } </pre> <p class="toc-jump"><a href="#top">Top ↑</a></p><h3 class="toc-heading" id="vendor-prefixes">Vendor Prefixes <a href="#vendor-prefixes" class="anchor">#</a></h3> <p>Vendor prefixes should go longest (-webkit-) to shortest (unprefixed). Values should be right aligned with spaces after the colon provided that all the values are the same across all prefixes.</p> <p>Preferred method:</p> <pre class="brush: css; title: ; notranslate" title=""> .koop-shiny { -webkit-box-shadow: inset 0 0 1px 1px #eee; -moz-box-shadow: inset 0 0 1px 1px #eee; box-shadow: inset 0 0 1px 1px #eee; -webkit-transition: border-color 0.1s; -moz-transition: border-color 0.1s; -ms-transition: border-color 0.1s; -o-transition: border-color 0.1s; transition: border-color 0.1s; } </pre> <p>Not preferred:</p> <pre class="brush: css; title: ; notranslate" title=""> .okay { -webkit-box-shadow: inset 0 0 1px 1px #eee; -moz-box-shadow: inset 0 0 1px 1px #eee; box-shadow: inset 0 0 1px 1px #eee; } .bad { -webkit-box-shadow: inset 0 0 1px 1px #eee; -moz-box-shadow: inset 0 0 1px 1px #eee; box-shadow: inset 0 0 1px 1px #eee; } </pre> <p><a href="https://web.archive.org/web/20130123191817/http://core.trac.wordpress.org/ticket/16461#comment:43">Special case</a> for CSS gradients:</p> <pre class="brush: css; title: ; notranslate" title=""> .gradient { background: #fff; background-image: -webkit-gradient(linear, left bottom, left top, from(#fff), to(#000)); background-image: -webkit-linear-gradient(bottom, #fff, #000); background-image: -moz-linear-gradient(bottom, #fff, #000); background-image: -o-linear-gradient(bottom, #fff, #000); background-image: linear-gradient(to top, #fff, #000); } </pre> <p class="toc-jump"><a href="#top">Top ↑</a></p><h2 class="toc-heading" id="values">Values <a href="#values" class="anchor">#</a></h2> <p>There are numerous ways to input values for properties. Follow the guidelines below to help us retain a high degree of consistency.</p> <ul> <li>Space before the value, after the colon</li> <li>Do not pad parentheses with spaces</li> <li>Always end in a semicolon</li> <li>Use double quotes rather than single quotes (regardless if there is a space or not).</li> <li>0 values should not have units unless necessary, such as with transition-duration.</li> <li>Line height should also be unit-less, unless necessary to be defined as a specific pixel value. This is more than just a style convention, but is worth mentioning here. More information: <a href="https://web.archive.org/web/20130123191817/http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/">http://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/</a></li> <li>Use a leading zero for decimal values, including in rgba().</li> <li>Multiple comma-separated values for one property should be separated by either a space or a newline, including within rgba(). Newlines should be used for lengthier multi-part values such as those for shorthand properties like box-shadow and text-shadow. Each subsequent value after the first should then be on a new line, indented to the same level as the selector and then spaced over to left-align with the previous value.</li> </ul> <p>Correct:</p> <pre class="brush: css; title: ; notranslate" title=""> .class { /* Correct usage of quotes */ background-image: url("images/bg.png"); font-family: "Helvetica Neue", sans-serif; } </pre> <pre class="brush: css; title: ; notranslate" title=""> .class { /* Correct usage of zero values */ font-family: Georgia, serif; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5), 0 1px 0 #fff; } </pre> <p>Incorrect:</p> <pre class="brush: css; title: ; notranslate" title=""> .class { /* Avoid missing space and semicolon */ background:#fff } .class { /* Avoid adding a unit on a zero value */ margin: 0px 0px 20px 0px; } </pre> <p class="toc-jump"><a href="#top">Top ↑</a></p><h2 class="toc-heading" id="media-queries">Media Queries <a href="#media-queries" class="anchor">#</a></h2> <p>Media queries allow us to gracefully degrade the DOM for different screen sizes. If you are adding any, be sure to test above and below the break-point you are targeting.</p> <ul> <li>It is generally advisable to keep media queries grouped by media at the bottom of the stylesheet. <ul> <li>An exception is made for the wp-admin.css file in core, as it is very large and each section essentially represents a stylesheet of its own. Media queries are therefore added at the bottom of sections as applicable.</li> </ul> </li> <li>Rule sets for media queries should be indented one level in.</li> </ul> <p>Example:</p> <pre class="brush: css; title: ; notranslate" title=""> @media all and (max-width: 699px) and (min-width: 520px) { /* Your selectors */ } </pre> <p class="toc-jump"><a href="#top">Top ↑</a></p><h2 class="toc-heading" id="commenting">Commenting <a href="#commenting" class="anchor">#</a></h2> <ul> <li>Comment, and comment liberally. If there are concerns about file size, utilize minified files and the SCRIPT_DEBUG constant. Long comments should manually break the line length at 80 characters.</li> <li>A table of contents should be utilized for longer stylesheets, especially those that are highly sectioned. Using an index number (1.0, 1.1, 2.0, etc.) aids in searching and jumping to a location.</li> <li>Comments should be formatted much as PHPDoc is. The <a href="https://web.archive.org/web/20130123191817/http://cssdoc.net/">CSSDoc</a> standard is not necessarily widely accepted or used but some aspects of it may be adopted over time. Section/subsection headers should have newlines before and after. Inline comments should not have empty newlines separating the comment from the item to which it relates.</li> </ul> <p>For sections and subsections:</p> <pre class="brush: css; title: ; notranslate" title=""> /** * #.# Section title * * Description of section, whether or not it has media queries, etc. */ .selector { float: left; } </pre> <p>For inline:</p> <pre class="brush: css; title: ; notranslate" title=""> /* This is a comment about this selector */ .another-selector { position: absolute; top: 0 !important; /* I should explain why this is so !important */ } </pre> <p class="toc-jump"><a href="#top">Top ↑</a></p><h2 class="toc-heading" id="best-practices">Best Practices <a href="#best-practices" class="anchor">#</a></h2> <p>Stylesheets tend to get long in length. Focus slowly gets lost whilst intended goals start repeating and overlapping. Writing smart code from the outset helps us retain the overview whilst remaining flexible throughout change.</p> <ul> <li>If you are attempting to fix an issue, attempt to remove code before adding more.</li> <li>Magic Numbers are unlucky. These are numbers that are used as quick fixes on a one-off basis. Example: <code>.box { margin-top: 37px }</code>.</li> <li>DOM will change over time, target the element you want to use as opposed to “finding it” through its parents. Example: Use <code>.highlight</code> on the element as opposed to <code>.highlight a</code> (where the selector is on the parent)</li> <li>Know when to use the height property. It should be used when you are including outside elements (such as images). Otherwise use line-height for more flexibility.</li> <li>Do not restate default property & value combinations (for instance <code>display: block;</code> on block-level elements).</li> </ul> <p class="toc-jump"><a href="#top">Top ↑</a></p><h2 class="toc-heading" id="related-links">Related Links <a href="#related-links" class="anchor">#</a></h2> <ul> <li>Principles of writing consistent, idiomatic CSS: <a href="https://web.archive.org/web/20130123191817/https://github.com/necolas/idiomatic-css">https://github.com/necolas/idiomatic-css</a></li> </ul> </div> <footer class="entry-meta"> </footer> </article> <div id="comments"> <h2 id="comments-title"> 15 thoughts on “<span>CSS Coding Standards</span>” </h2> <ol class="commentlist"> <li class="comment byuser comment-author-dwenaus even thread-even depth-1" id="li-comment-20"> <article id="comment-20" class="comment"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt="" src="https://web.archive.org/web/20130123191817im_/http://0.gravatar.com/avatar/81bb7a65bc5b36126bfae0507239c10e?s=68&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&r=G" class="avatar avatar-68 photo" height="68" width="68"/><span class="fn"><a href="https://web.archive.org/web/20130123191817/http://bluemandala.com/" rel="external nofollow" class="url">Dwenaus</a></span> on <a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/#comment-20"><time pubdate datetime="2012-07-30T20:02:53+00:00">July 30, 2012 at 8:02 pm</time></a> <span class="says">said:</span> </div> </footer> <div class="comment-content"><p>wow, there is some really trippy CSS going on here:</p> <p>#selector-3 {<br/> background: #fff;<br/> color:<a href="https://web.archive.org/web/20130123191817/http://core.trac.wordpress.org/ticket/000" rel="nofollow"> #000</a>;<br/> }</p> <p>then I realized it’s just auto-trac ticket replacement!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-login" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fcore%2Fhandbook%2Fcoding-standards%2Fcss%2F">Log in to Reply</a> </div> </article> <ul class="children"> <li class="comment byuser comment-author-nacin odd alt depth-2" id="li-comment-21"> <article id="comment-21" class="comment"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt="" src="https://web.archive.org/web/20130123191817im_/http://0.gravatar.com/avatar/01cfe9feaafb068590891bbd1f6a7f5a?s=39&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D39&r=G" class="avatar avatar-39 photo" height="39" width="39"/><span class="fn"><a href="https://web.archive.org/web/20130123191817/http://profiles.wordpress.org/users/nacin/" rel="external nofollow" class="url">Andrew Nacin</a></span> on <a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/#comment-21"><time pubdate datetime="2012-07-30T22:04:14+00:00">July 30, 2012 at 10:04 pm</time></a> <span class="says">said:</span> </div> </footer> <div class="comment-content"><p>I went ahead and updated that plugin to only touch ticket numbers that were 4 or 5 characters long. Should avoid messing with 3- and 6-character color hex codes!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-login" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fcore%2Fhandbook%2Fcoding-standards%2Fcss%2F">Log in to Reply</a> </div> </article> </li> </ul> </li> <li class="comment byuser comment-author-lancewillett even thread-odd thread-alt depth-1" id="li-comment-23"> <article id="comment-23" class="comment"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt="" src="https://web.archive.org/web/20130123191817im_/http://1.gravatar.com/avatar/ddc339d9565077190a08a9e5da7a5f44?s=68&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&r=G" class="avatar avatar-68 photo" height="68" width="68"/><span class="fn"><a href="https://web.archive.org/web/20130123191817/http://simpledream.net/" rel="external nofollow" class="url">Lance Willett</a></span> on <a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/#comment-23"><time pubdate datetime="2012-08-02T20:42:10+00:00">August 2, 2012 at 8:42 pm</time></a> <span class="says">said:</span> </div> </footer> <div class="comment-content"><p>This is super cool.</p> <p>Once it’s finalized could you merge it with the pre-existing <a href="https://web.archive.org/web/20130123191817/http://codex.wordpress.org/CSS_Coding_Standards" rel="nofollow">CSS Coding Standards</a> on the Codex? I added that over 2 years ago and we’ve been using it for default themes since.</p> <p>Biggest differences are ordering of properties, comment format (standard on Codex is more strict), and the one line between rule blocks (no line in the Codex standard when in a grouping of similar rules).</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-login" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fcore%2Fhandbook%2Fcoding-standards%2Fcss%2F">Log in to Reply</a> </div> </article> </li> <li class="comment byuser comment-author-noel_tock odd alt thread-even depth-1" id="li-comment-30"> <article id="comment-30" class="comment"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt="" src="https://web.archive.org/web/20130123191817im_/http://0.gravatar.com/avatar/885c9f48988bfd9f008bbc1d13572510?s=68&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&r=G" class="avatar avatar-68 photo" height="68" width="68"/><span class="fn"><a href="https://web.archive.org/web/20130123191817/http://www.noeltock.com/" rel="external nofollow" class="url">Noel Tock</a></span> on <a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/#comment-30"><time pubdate datetime="2012-08-06T01:13:17+00:00">August 6, 2012 at 1:13 am</time></a> <span class="says">said:</span> </div> </footer> <div class="comment-content"><p>Updated!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-login" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fcore%2Fhandbook%2Fcoding-standards%2Fcss%2F">Log in to Reply</a> </div> </article> </li> <li class="comment byuser comment-author-rolandinsh even thread-odd thread-alt depth-1" id="li-comment-85"> <article id="comment-85" class="comment"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt="" src="https://web.archive.org/web/20130123191817im_/http://1.gravatar.com/avatar/99386ad4da1fa2ce7e64591ab74138f2?s=68&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&r=G" class="avatar avatar-68 photo" height="68" width="68"/><span class="fn"><a href="https://web.archive.org/web/20130123191817/http://umbrovskis.com/?utm_source=wordpress.org&utm_content=profileinfo&utm_campaign=profi" rel="external nofollow" class="url">Umbrovskis.com</a></span> on <a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/#comment-85"><time pubdate datetime="2012-10-11T16:32:24+00:00">October 11, 2012 at 4:32 pm</time></a> <span class="says">said:</span> </div> </footer> <div class="comment-content"><p>is there any reason to “Avoid underscores”? As far as I can find answers in Google, there is no reason, unless we care about very,very old browsers before 2002.</p> <p>If there is, please refer to some source!</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-login" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fcore%2Fhandbook%2Fcoding-standards%2Fcss%2F">Log in to Reply</a> </div> </article> <ul class="children"> <li class="comment byuser comment-author-helen bypostauthor odd alt depth-2" id="li-comment-86"> <article id="comment-86" class="comment"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt="" src="https://web.archive.org/web/20130123191817im_/http://0.gravatar.com/avatar/6506162ada6b700b151ad8a187f65842?s=39&d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D39&r=G" class="avatar avatar-39 photo" height="39" width="39"/><span class="fn"><a href="https://web.archive.org/web/20130123191817/http://profiles.wordpress.org/users/helenyhou/" rel="external nofollow" class="url">Helen Hou-Sandi</a></span> on <a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/#comment-86"><time pubdate datetime="2012-10-11T16:47:36+00:00">October 11, 2012 at 4:47 pm</time></a> <span class="says">said:</span> </div> </footer> <div class="comment-content"><p>Because that’s our particular style <img src="https://web.archive.org/web/20130123191817im_/http://make.wordpress.org/core/handbook/wp-includes/images/smilies/icon_smile.gif" alt=":)" class="wp-smiley"/> </p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-login" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fcore%2Fhandbook%2Fcoding-standards%2Fcss%2F">Log in to Reply</a> </div> </article> </li> </ul> </li> <li class="comment byuser comment-author-wpcustom even thread-even depth-1" id="li-comment-93"> <article id="comment-93" class="comment"> <footer class="comment-meta"> <div class="comment-author vcard"> <img alt="" src="https://web.archive.org/web/20130123191817im_/http://1.gravatar.com/avatar/7b11a7249b184432511380e502634582?s=68&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D68&r=G" class="avatar avatar-68 photo" height="68" width="68"/><span class="fn">wpcustom</span> on <a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/#comment-93"><time pubdate datetime="2012-11-08T03:04:58+00:00">November 8, 2012 at 3:04 am</time></a> <span class="says">said:</span> </div> </footer> <div class="comment-content"><p>Hi, Phil here, I’m doing my first review of a wp theme. The css will not validate after the second test. The 6 errors are below, can these be fixed? there are also 71 warnings(due to the 6 errors i suppose), also, does the css have to pass validation for a wp theme? Thanks wpcustom</p> <p>294 Unknown pseudo-element or pseudo-class ::-webkit-search-decoration [-webkit-search-decoration]</p> <p>297 Unknown pseudo-element or pseudo-class ::-moz-focus-inner [-moz-focus-inner]</p> <p>298 Unknown pseudo-element or pseudo-class ::-moz-focus-inner [-moz-focus-inner]</p> <p>382 .assistive-text Value Error : clip Invalid separator in shape definition. It must be a comma. : rect(1px 1px 1px 1px)</p> <p>674 .page-links a, .more-link Value Error : background-image linear-gradient(rgba(240,240,240,0.8),rgba(210,210,210,0.8)) is not a background-image value : linear-gradient(rgba(240,240,240,0.8),rgba(210,210,210,0.8))</p> <p>1176 .widget ul li Value Error : background-image linear-gradient(rgba(240,240,240,0.8),rgba(210,210,210,0.8)) is not a background-image value : linear-gradient(rgba(240,240,240,0.8),rgba(210,210,210,0.8))</p> </div> <div class="reply"> <a rel="nofollow" class="comment-reply-login" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fcore%2Fhandbook%2Fcoding-standards%2Fcss%2F">Log in to Reply</a> </div> </article> </li> <li class="post pingback"> <p>Pingback: <a href="https://web.archive.org/web/20130123191817/http://blog.teamtreehouse.com/10-tips-for-selling-premium-wordpress-theme" rel="external nofollow" class="url">10 Tips for Building and Selling a Premium WordPress Theme - Treehouse Blog</a></p> </li> <li class="post pingback"> <p>Pingback: <a href="https://web.archive.org/web/20130123191817/http://webdesignadmin.tk/2012/12/12/10-tips-for-building-and-selling-a-premium-wordpress-theme/" rel="external nofollow" class="url">10 Tips for Building and Selling a Premium WordPress Theme | WebDesignAdmin.tk</a></p> </li> <li class="post pingback"> <p>Pingback: <a href="https://web.archive.org/web/20130123191817/http://www.html5tutorials.biz/html5/10-tips-for-building-and-selling-a-premium-wordpress-theme/" rel="external nofollow" class="url">10 Tips for Building and Selling a Premium WordPress Theme | Html5 Tutorials</a></p> </li> <li class="post pingback"> <p>Pingback: <a href="https://web.archive.org/web/20130123191817/http://1stbride.com/2012/12/17/10-tips-for-building-and-selling-a-premium-wordpress-theme/" rel="external nofollow" class="url">10 Tips for Building and Selling a Premium WordPress Theme - 1stbride</a></p> </li> <li class="post pingback"> <p>Pingback: <a href="https://web.archive.org/web/20130123191817/http://ec202.classicinformatics.com/techarticles/wordpress-plugin-code-guidelines/" rel="external nofollow" class="url">Wordpress Plugin code guidelines | Code Guidelines</a></p> </li> <li class="post pingback"> <p>Pingback: <a href="https://web.archive.org/web/20130123191817/http://code.garyjones.co.uk/style-sheet-header-improvements/" rel="external nofollow" class="url">Style Sheet Header Improvements: Tidy up your WordPress Theme Details — Gary's Code</a></p> </li> <li class="post pingback"> <p>Pingback: <a href="https://web.archive.org/web/20130123191817/http://code.garyjones.co.uk/understanding-css-shorthand-property-values/" rel="external nofollow" class="url">Understanding CSS Shorthand Property Values — Gary's Code</a></p> </li> <li class="post pingback"> <p>Pingback: <a href="https://web.archive.org/web/20130123191817/http://code.garyjones.co.uk/discussion-of-the-wordpress-css-coding-standards/" rel="external nofollow" class="url">Discussion of the WordPress CSS Coding Standards — Gary's Code</a></p> </li> </ol> <div id="respond"> <h3 id="reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/#respond" style="display:none;">Cancel reply</a></small></h3> <p class="must-log-in">You must be <a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-login.php?redirect_to=http%3A%2F%2Fmake.wordpress.org%2Fcore%2Fhandbook%2Fcoding-standards%2Fcss%2F">logged in</a> to post a comment.</p> </div> </div> </div> </div> <div id="secondary" class="widget-area" role="complementary"> <aside id="nav_menu-2" class="widget widget_nav_menu"><h3 class="widget-title">Contents</h3><div class="menu-table-of-contents-container"><ul id="menu-table-of-contents" class="menu"><li id="menu-item-4320" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4320"><a href="#">Learn About WordPress</a> <ul class="sub-menu"> <li id="menu-item-4432" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4432"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/project-organization/">Project Organization</a></li> <li id="menu-item-4433" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4433"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/our-philosophies/">Our Philosophies</a></li> <li id="menu-item-4324" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4324"><a href="https://web.archive.org/web/20130123191817/http://codex.wordpress.org/">Codex</a></li> <li id="menu-item-4326" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4326"><a href="https://web.archive.org/web/20130123191817/http://wordpress.tv/">WordPress.TV</a></li> </ul> </li> <li id="menu-item-4335" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4335"><a href="#">Contributing With Words</a> <ul class="sub-menu"> <li id="menu-item-4359" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4359"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/translating-wordpress/">Translating WordPress</a> <ul class="sub-menu"> <li id="menu-item-4345" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4345"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/translating-wordpress/files-and-tools/">Files and Tools</a></li> <li id="menu-item-4336" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4336"><a href="https://web.archive.org/web/20130123191817/http://glotpress.org/">GlotPress</a></li> </ul> </li> <li id="menu-item-4351" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4351"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/evangelize-and-organize/">Evangelize and Organize</a></li> </ul> </li> <li id="menu-item-4322" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4322"><a href="#">Learn About Code</a> <ul class="sub-menu"> <li id="menu-item-4146" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4146"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/the-wordpress-codebase/">The WordPress Codebase</a></li> <li id="menu-item-4138" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4138"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/following-the-development-process/">Following the Development Process</a></li> <li id="menu-item-4144" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4144"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/svn/">Code Repository (SVN)</a> <ul class="sub-menu"> <li id="menu-item-4145" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4145"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/svn/code-history/">Researching Code History</a></li> </ul> </li> <li id="menu-item-4143" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4143"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/trac/">The Bug Tracker (Trac)</a> <ul class="sub-menu"> <li id="menu-item-4185" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4185"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/trac/keywords/">Trac Workflow Keywords</a></li> </ul> </li> </ul> </li> <li id="menu-item-4340" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4340"><a href="#">Contribute With Testing</a> <ul class="sub-menu"> <li id="menu-item-4142" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4142"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/beta-testing/">Beta Testing</a></li> <li id="menu-item-4139" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4139"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/reporting-bugs/">Reporting Bugs</a></li> <li id="menu-item-4141" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4141"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/reporting-security-vulnerabilities/">Reporting Security Vulnerabilities (FAQ)</a></li> <li id="menu-item-4480" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4480"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/bug-gardening/">Bug Gardening</a></li> </ul> </li> <li id="menu-item-4323" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-ancestor current-menu-parent menu-item-4323"><a href="#">Contribute With Code</a> <ul class="sub-menu"> <li id="menu-item-4149" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-page-parent menu-item-4149"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/">Coding Standards</a></li> <li id="menu-item-4147" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4147"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/design-decisions/">Design Decisions</a></li> <li id="menu-item-4150" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-4082 current_page_item menu-item-4150"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/coding-standards/css/">CSS Standards</a></li> <li id="menu-item-4172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4172"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/fixing-bugs/">Fixing Bugs</a></li> <li id="menu-item-4140" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4140"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/submitting-a-patch/">Submitting a Patch</a></li> <li id="menu-item-4154" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4154"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/automated-testing/">Automated Testing</a></li> <li id="menu-item-4434" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4434"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/licensing-and-copyright/">Licensing and Copyright</a></li> </ul> </li> <li id="menu-item-4276" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4276"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/suggestions/">Suggestions</a></li> <li id="menu-item-4431" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4431"><a href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/glossary/">Glossary</a></li> </ul></div></aside> </div> </div> <footer id="colophon" role="contentinfo"> <div id="site-generator"> <a href="https://web.archive.org/web/20130123191817/http://wordpress.org/" title="Semantic Personal Publishing Platform" rel="generator">Proudly powered by WordPress</a> </div> </footer> </div> <div style="display:none"> <div class="grofile-hash-map-81bb7a65bc5b36126bfae0507239c10e"> </div> <div class="grofile-hash-map-01cfe9feaafb068590891bbd1f6a7f5a"> </div> <div class="grofile-hash-map-ddc339d9565077190a08a9e5da7a5f44"> </div> <div class="grofile-hash-map-885c9f48988bfd9f008bbc1d13572510"> </div> <div class="grofile-hash-map-99386ad4da1fa2ce7e64591ab74138f2"> </div> <div class="grofile-hash-map-6506162ada6b700b151ad8a187f65842"> </div> <div class="grofile-hash-map-7b11a7249b184432511380e502634582"> </div> </div> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/shCore.js?ver=2.1.364"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/shBrushCss.js?ver=2.1.364"></script> <script type="text/javascript"> (function(){ var corecss = document.createElement('link'); var themecss = document.createElement('link'); var corecssurl = "https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles/shCore.css?ver=2.1.364"; if ( corecss.setAttribute ) { corecss.setAttribute( "rel", "stylesheet" ); corecss.setAttribute( "type", "text/css" ); corecss.setAttribute( "href", corecssurl ); } else { corecss.rel = "stylesheet"; corecss.href = corecssurl; } document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") ); var themecssurl = "https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles/shThemeDefault.css?ver=2.1.364"; if ( themecss.setAttribute ) { themecss.setAttribute( "rel", "stylesheet" ); themecss.setAttribute( "type", "text/css" ); themecss.setAttribute( "href", themecssurl ); } else { themecss.rel = "stylesheet"; themecss.href = themecssurl; } //document.getElementById("syntaxhighlighteranchor").appendChild(themecss); document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") ); })(); SyntaxHighlighter.config.clipboardSwf = 'https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/scripts/clipboard.swf'; SyntaxHighlighter.config.strings.expandSource = 'show source'; SyntaxHighlighter.config.strings.viewSource = 'view source'; SyntaxHighlighter.config.strings.copyToClipboard = 'copy to clipboard'; SyntaxHighlighter.config.strings.copyToClipboardConfirmation = 'The code is in your clipboard now'; SyntaxHighlighter.config.strings.print = 'print'; SyntaxHighlighter.config.strings.help = '?'; SyntaxHighlighter.config.strings.alert = 'SyntaxHighlighter\n\n'; SyntaxHighlighter.config.strings.noBrush = 'Can\'t find brush for: '; SyntaxHighlighter.config.strings.brushNotHtmlScript = 'Brush wasn\'t configured for html-script option: '; SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.defaults['gutter'] = false; SyntaxHighlighter.defaults['pad-line-numbers'] = false; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.defaults['wrap-lines'] = false; SyntaxHighlighter.all(); </script> <link rel="stylesheet" id="notes-admin-bar-rest-css" href="https://web.archive.org/web/20130123191817cs_/http://s0.wp.com/wp-content/mu-plugins/notes/admin-bar-rest.css?ver=2.0.2-201304" type="text/css" media="all"/> <link rel="stylesheet" id="noticons-css" href="https://web.archive.org/web/20130123191817cs_/http://s0.wp.com/i/noticons/noticons.css?ver=2.0.2-201304" type="text/css" media="all"/> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-includes/js/admin-bar.min.js?ver=3.6-alpha-23334"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://s0.wp.com/wp-content/js/devicepx-jetpack.js?ver=201304"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://s.gravatar.com/js/gprofiles.js?ver=2013Janaa"></script> <script type="text/javascript"> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-content/plugins/jetpack/modules/wpgroho.js?ver=3.6-alpha-23334"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://s1.wp.com/wp-content/js/mustache.js?ver=2.0.2-201304"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-includes/js/underscore.min.js?ver=1.4.1"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-includes/js/backbone.min.js?ver=0.9.2"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://s0.wp.com/wp-content/js/postmessage.js?ver=2.0.2-201304"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-content/plugins/jetpack/_inc/spin.js?ver=1.2.4"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://make.wordpress.org/core/handbook/wp-content/plugins/jetpack/_inc/jquery.spin.js?ver=3.6-alpha-23334"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://s0.wp.com/wp-content/mu-plugins/notes/notes-rest-common.js?ver=2.0.2-201304"></script> <script type="text/javascript" src="https://web.archive.org/web/20130123191817js_/http://s0.wp.com/wp-content/mu-plugins/notes/admin-bar-rest.js?ver=2.0.2-201304"></script> <script src="https://web.archive.org/web/20130123191817js_/http://stats.wordpress.com/e-201304.js" type="text/javascript"></script> <script type="text/javascript"> st_go({v:'ext',j:'1:2.0.2',blog:'38277672',post:'4082'}); var load_cmc = function(){linktracker_init(38277672,4082,2);}; if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc); else load_cmc(); </script> <div id="wpadminbar" class="nojq nojs" role="navigation"> <a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a> <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0"> <ul id="wp-admin-bar-root-default" class="ab-top-menu"> <li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" aria-haspopup="true" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-admin/about.php" title="About WordPress"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu"> <li id="wp-admin-bar-wporg"><a class="ab-item" href="https://web.archive.org/web/20130123191817/http://wordpress.org/">WordPress.org</a> </li> <li id="wp-admin-bar-documentation"><a class="ab-item" href="https://web.archive.org/web/20130123191817/http://codex.wordpress.org/">Documentation</a> </li> <li id="wp-admin-bar-support-forums"><a class="ab-item" href="https://web.archive.org/web/20130123191817/http://wordpress.org/support/">Support Forums</a> </li> <li id="wp-admin-bar-feedback"><a class="ab-item" href="https://web.archive.org/web/20130123191817/http://wordpress.org/support/forum/requests-and-feedback">Feedback</a> </li></ul></div> </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu"> <li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150"/><input type="submit" class="adminbar-button" value="Search"/></form></div> </li> <li id="wp-admin-bar-log-in"><a class="ab-item" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-login.php">Log In</a> </li> <li id="wp-admin-bar-notes" class="menupop"><div class="ab-item ab-empty-item"><span id="wpnt-notes-unread-count" class="wpnt-loading wpn-read"> <span class="noticon noticon-notification"/></span> </span></div><div id="wpnt-notes-panel" style="display:none"><div class="wpnt-notes-panel-header"><span class="wpnt-notes-header">Notifications</span><span class="wpnt-notes-panel-link"></span></div></div> </li></ul> </div> <a class="screen-reader-shortcut" href="https://web.archive.org/web/20130123191817/http://make.wordpress.org/core/handbook/wp-login.php?action=logout&_wpnonce=ac4704da14">Log Out</a> </div> </body> </html>