StarMirror/styleguide
1
0
Fork 0
mirror of https://github.com/google/styleguide.git synced 2024-03-22 13:11:43 +08:00
Code Issues Projects Releases Wiki Activity

Merge pull request #667 from tonyruscoe/gh-pages

Browse Source 
Update format for numbered sections and whitespace
This commit is contained in:
Tony Ruscoe 2022-01-12 16:59:40 +00:00 committed by GitHub
commit 4f848da9f3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 105 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

151
htmlcssguide.html
View File

@ -11,7 +11,7 @@
<body onload="initStyleGuide();"> <body onload="initStyleGuide();">
<div id="content"> <div id="content">
<h1>Google HTML/CSS Style Guide</h1> <h1>Google HTML/CSS Style Guide</h1>
<h2 id="Background">1 Background</h2> <h2 id="Background" class="numbered">Background</h2>
<p>This document defines formatting and style rules for HTML and CSS. It aims at <p>This document defines formatting and style rules for HTML and CSS. It aims at
improving collaboration, code quality, and enabling supporting infrastructure. improving collaboration, code quality, and enabling supporting infrastructure.
@ -19,17 +19,16 @@ It applies to raw, working files that use HTML and CSS, including GSS files.
Tools are free to obfuscate, minify, and compile as long as the general code Tools are free to obfuscate, minify, and compile as long as the general code
quality is maintained.</p> quality is maintained.</p>
<h2 id="General">2 General</h2> <h2 id="General" class="numbered">General</h2>
<h3 id="General_Style_Rules">2.1 General Style Rules</h3> <h3 id="General_Style_Rules" class="numbered">General Style Rules</h3>
<h4 id="Protocol">2.1.1 Protocol</h4> <h4 id="Protocol" class="numbered">Protocol</h4>
<p>Use HTTPS for embedded resources where possible.</p> <p>Use HTTPS for embedded resources where possible.</p>
<p>Always use HTTPS (<code>https:</code>) for images and other media <p>Always use HTTPS (<code>https:</code>) for images and other media files, style sheets, and
files, style sheets, and scripts, unless the respective files are not available scripts, unless the respective files are not available over HTTPS.</p>
over HTTPS.</p>
<pre><code class="language-html bad">&lt;!-- Not recommended: omits the protocol --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended: omits the protocol --&gt;
&lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"&gt;&lt;/script&gt;
@ -53,9 +52,9 @@ over HTTPS.</p>
@import 'https://fonts.googleapis.com/css?family=Open+Sans'; @import 'https://fonts.googleapis.com/css?family=Open+Sans';
</code></pre> </code></pre>
<h3 id="General_Formatting_Rules">2.2 General Formatting Rules</h3> <h3 id="General_Formatting_Rules" class="numbered">General Formatting Rules</h3>
<h4 id="Indentation">2.2.1 Indentation</h4> <h4 id="Indentation" class="numbered">Indentation</h4>
<p>Indent by 2 spaces at a time.</p> <p>Indent by 2 spaces at a time.</p>
@ -72,7 +71,7 @@ over HTTPS.</p>
} }
</code></pre> </code></pre>
<h4 id="Capitalization">2.2.2 Capitalization</h4> <h4 id="Capitalization" class="numbered">Capitalization</h4>
<p>Use only lowercase.</p> <p>Use only lowercase.</p>
@ -96,7 +95,7 @@ color: #E5E5E5;
color: #e5e5e5; color: #e5e5e5;
</code></pre> </code></pre>
<h4 id="Trailing_Whitespace">2.2.3 Trailing Whitespace</h4> <h4 id="Trailing_Whitespace" class="numbered">Trailing Whitespace</h4>
<p>Remove trailing white spaces.</p> <p>Remove trailing white spaces.</p>
@ -110,9 +109,9 @@ color: #e5e5e5;
&lt;p&gt;Yes please. &lt;p&gt;Yes please.
</code></pre> </code></pre>
<h3 id="General_Meta_Rules">2.3 General Meta Rules</h3> <h3 id="General_Meta_Rules" class="numbered">General Meta Rules</h3>
<h4 id="Encoding">2.3.1 Encoding</h4> <h4 id="Encoding" class="numbered">Encoding</h4>
<p>Use UTF-8 (no BOM).</p> <p>Use UTF-8 (no BOM).</p>
@ -123,10 +122,10 @@ mark.</p>
charset="utf-8"&gt;</code>. Do not specify the encoding of style sheets as these assume charset="utf-8"&gt;</code>. Do not specify the encoding of style sheets as these assume
UTF-8.</p> UTF-8.</p>
<p>(More on encodings and when and how to specify them can be found in <a href="https://www.w3.org/International/tutorials/tutorial-char-enc/">Handling <p>(More on encodings and when and how to specify them can be found in
character encodings in HTML and CSS</a>.)</p> <a href="https://www.w3.org/International/tutorials/tutorial-char-enc/">Handling character encodings in HTML and CSS</a>.)</p>
<h4 id="Comments">2.3.2 Comments</h4> <h4 id="Comments" class="numbered">Comments</h4>
<p>Explain code as needed, where possible.</p> <p>Explain code as needed, where possible.</p>
@ -137,7 +136,7 @@ why is respective solution used or preferred?</p>
demand fully documented code. Mileage may vary heavily for HTML and CSS code and demand fully documented code. Mileage may vary heavily for HTML and CSS code and
depends on the project’s complexity.)</p> depends on the project’s complexity.)</p>
<h4 id="Action_Items">2.3.3 Action Items</h4> <h4 id="Action_Items" class="numbered">Action Items</h4>
<p>Mark todos and action items with <code>TODO</code>.</p> <p>Mark todos and action items with <code>TODO</code>.</p>
@ -160,11 +159,11 @@ depends on the project’s complexity.)</p>
&lt;/ul&gt; &lt;/ul&gt;
</code></pre> </code></pre>
<h2 id="HTML">3 HTML</h2> <h2 id="HTML" class="numbered">HTML</h2>
<h3 id="HTML_Style_Rules">3.1 HTML Style Rules</h3> <h3 id="HTML_Style_Rules" class="numbered">HTML Style Rules</h3>
<h4 id="Document_Type">3.1.1 Document Type</h4> <h4 id="Document_Type" class="numbered">Document Type</h4>
<p>Use HTML5.</p> <p>Use HTML5.</p>
@ -174,21 +173,19 @@ depends on the project’s complexity.)</p>
<a href="https://hixie.ch/advocacy/xhtml"><code>application/xhtml+xml</code></a>, lacks both browser <a href="https://hixie.ch/advocacy/xhtml"><code>application/xhtml+xml</code></a>, lacks both browser
and infrastructure support and offers less room for optimization than HTML.)</p> and infrastructure support and offers less room for optimization than HTML.)</p>
<p>Although fine with HTML, do not close void elements, i.e. write <code>&lt;br&gt;</code>, not <p>Although fine with HTML, do not close void elements, i.e. write <code>&lt;br&gt;</code>, not <code>&lt;br
<code>&lt;br /&gt;</code>.</p> /&gt;</code>.</p>
<h4 id="HTML_Validity">3.1.2 HTML Validity</h4> <h4 id="HTML_Validity" class="numbered">HTML Validity</h4>
<p>Use valid HTML where possible.</p> <p>Use valid HTML where possible.</p>
<p>Use valid HTML code unless that is not possible due to otherwise unattainable <p>Use valid HTML code unless that is not possible due to otherwise unattainable
performance goals regarding file size.</p> performance goals regarding file size.</p>
<p> <p> Use tools such as the
<a href="https://validator.w3.org/nu/">W3C HTML validator</a>
Use tools such as the <a href="https://validator.w3.org/nu/">W3C HTML validator</a> to test.</p>
to test.
</p>
<p>Using valid HTML is a measurable baseline quality attribute that contributes to <p>Using valid HTML is a measurable baseline quality attribute that contributes to
learning about technical requirements and constraints, and that ensures proper learning about technical requirements and constraints, and that ensures proper
@ -206,7 +203,7 @@ HTML usage.</p>
&lt;article&gt;This is only a test.&lt;/article&gt; &lt;article&gt;This is only a test.&lt;/article&gt;
</code></pre> </code></pre>
<h4 id="Semantics">3.1.3 Semantics</h4> <h4 id="Semantics" class="numbered">Semantics</h4>
<p>Use HTML according to its purpose.</p> <p>Use HTML according to its purpose.</p>
@ -225,7 +222,7 @@ code efficiency reasons.</p>
&lt;a href="recommendations/"&gt;All recommendations&lt;/a&gt; &lt;a href="recommendations/"&gt;All recommendations&lt;/a&gt;
</code></pre> </code></pre>
<h4 id="Multimedia_Fallback">3.1.4 Multimedia Fallback</h4> <h4 id="Multimedia_Fallback" class="numbered">Multimedia Fallback</h4>
<p>Provide alternative contents for multimedia.</p> <p>Provide alternative contents for multimedia.</p>
@ -249,7 +246,7 @@ no alternative text, as in <code>alt=""</code>.)</p>
&lt;img src="spreadsheet.png" alt="Spreadsheet screenshot."&gt; &lt;img src="spreadsheet.png" alt="Spreadsheet screenshot."&gt;
</code></pre> </code></pre>
<h4 id="Separation_of_Concerns">3.1.5 Separation of Concerns</h4> <h4 id="Separation_of_Concerns" class="numbered">Separation of Concerns</h4>
<p>Separate structure from presentation from behavior.</p> <p>Separate structure from presentation from behavior.</p>
@ -292,13 +289,13 @@ templates than it is to update style sheets and scripts.</p>
&lt;p&gt;It’s awesome! &lt;p&gt;It’s awesome!
</code></pre> </code></pre>
<h4 id="Entity_References">3.1.6 Entity References</h4> <h4 id="Entity_References" class="numbered">Entity References</h4>
<p>Do not use entity references.</p> <p>Do not use entity references.</p>
<p>There is no need to use entity references like <code>&amp;mdash;</code>, <code>&amp;rdquo;</code>, or <p>There is no need to use entity references like <code>&amp;mdash;</code>, <code>&amp;rdquo;</code>, or
<code>&amp;#x263a;</code>, assuming the same encoding (UTF-8) is used for files and editors <code>&amp;#x263a;</code>, assuming the same encoding (UTF-8) is used for files and editors as
as well as among teams.</p> well as among teams.</p>
<p>The only exceptions apply to characters with special meaning in HTML (like <code>&lt;</code> <p>The only exceptions apply to characters with special meaning in HTML (like <code>&lt;</code>
and <code>&amp;</code>) as well as control or “invisible” characters (like no-break spaces).</p> and <code>&amp;</code>) as well as control or “invisible” characters (like no-break spaces).</p>
@ -311,12 +308,13 @@ The currency symbol for the Euro is &amp;ldquo;&amp;eur;&amp;rdquo;.
The currency symbol for the Euro is “€”. The currency symbol for the Euro is “€”.
</code></pre> </code></pre>
<h4 id="Optional_Tags">3.1.7 Optional Tags</h4> <h4 id="Optional_Tags" class="numbered">Optional Tags</h4>
<p>Omit optional tags (optional).</p> <p>Omit optional tags (optional).</p>
<p>For file size optimization and scannability purposes, consider omitting optional <p>For file size optimization and scannability purposes, consider omitting optional
tags. The <a href="https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission">HTML5 specification</a> tags. The
<a href="https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission">HTML5 specification</a>
defines what tags can be omitted.</p> defines what tags can be omitted.</p>
<p>(This approach may require a grace period to be established as a wider guideline <p>(This approach may require a grace period to be established as a wider guideline
@ -342,7 +340,7 @@ tags, not just a selection.)</p>
&lt;p&gt;Qed. &lt;p&gt;Qed.
</code></pre> </code></pre>
<h4 id="type_Attributes">3.1.8 <code>type</code> Attributes</h4> <h4 id="type_Attributes" class="numbered"><code>type</code> Attributes</h4>
<p>Omit <code>type</code> attributes for style sheets and scripts.</p> <p>Omit <code>type</code> attributes for style sheets and scripts.</p>
@ -351,7 +349,8 @@ tags, not just a selection.)</p>
<p>Specifying <code>type</code> attributes in these contexts is not necessary as HTML5 implies <p>Specifying <code>type</code> attributes in these contexts is not necessary as HTML5 implies
<a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-style-type"><code>text/css</code></a> <a href="https://html.spec.whatwg.org/multipage/obsolete.html#attr-style-type"><code>text/css</code></a>
and <a href="https://html.spec.whatwg.org/multipage/scripting.html#attr-script-type"><code>text/javascript</code></a> and
<a href="https://html.spec.whatwg.org/multipage/scripting.html#attr-script-type"><code>text/javascript</code></a>
as defaults. This can be safely done even for older browsers.</p> as defaults. This can be safely done even for older browsers.</p>
<pre><code class="language-html bad">&lt;!-- Not recommended --&gt; <pre><code class="language-html bad">&lt;!-- Not recommended --&gt;
@ -372,9 +371,9 @@ as defaults. This can be safely done even for older browsers.</p>
&lt;script src="https://www.google.com/js/gweb/analytics/autotrack.js"&gt;&lt;/script&gt; &lt;script src="https://www.google.com/js/gweb/analytics/autotrack.js"&gt;&lt;/script&gt;
</code></pre> </code></pre>
<h3 id="HTML_Formatting_Rules">3.2 HTML Formatting Rules</h3> <h3 id="HTML_Formatting_Rules" class="numbered">HTML Formatting Rules</h3>
<h4 id="General_Formatting">3.2.1 General Formatting</h4> <h4 id="General_Formatting" class="numbered">General Formatting</h4>
<p>Use a new line for every block, list, or table element, and indent every such <p>Use a new line for every block, list, or table element, and indent every such
child element.</p> child element.</p>
@ -413,7 +412,7 @@ instead of an error.)</p>
&lt;/table&gt; &lt;/table&gt;
</code></pre> </code></pre>
<h4 id="HTML_Line-Wrapping">3.2.2 HTML Line-Wrapping</h4> <h4 id="HTML_Line-Wrapping" class="numbered">HTML Line-Wrapping</h4>
<p>Break long lines (optional).</p> <p>Break long lines (optional).</p>
@ -443,7 +442,7 @@ additional spaces from the original line.</p>
&lt;/md-progress-circular&gt; &lt;/md-progress-circular&gt;
</code></pre> </code></pre>
<h4 id="HTML_Quotation_Marks">3.2.3 HTML Quotation Marks</h4> <h4 id="HTML_Quotation_Marks" class="numbered">HTML Quotation Marks</h4>
<p>When quoting attributes values, use double quotation marks.</p> <p>When quoting attributes values, use double quotation marks.</p>
@ -458,28 +457,26 @@ values.</p>
&lt;a class="maia-button maia-button-secondary"&gt;Sign in&lt;/a&gt; &lt;a class="maia-button maia-button-secondary"&gt;Sign in&lt;/a&gt;
</code></pre> </code></pre>
<h2 id="CSS">4 CSS</h2> <h2 id="CSS" class="numbered">CSS</h2>
<h3 id="CSS_Style_Rules">4.1 CSS Style Rules</h3> <h3 id="CSS_Style_Rules" class="numbered">CSS Style Rules</h3>
<h4 id="CSS_Validity">4.1.1 CSS Validity</h4> <h4 id="CSS_Validity" class="numbered">CSS Validity</h4>
<p>Use valid CSS where possible.</p> <p>Use valid CSS where possible.</p>
<p>Unless dealing with CSS validator bugs or requiring proprietary syntax, use <p>Unless dealing with CSS validator bugs or requiring proprietary syntax, use
valid CSS code.</p> valid CSS code.</p>
<p> <p> Use tools such as the
<a href="https://jigsaw.w3.org/css-validator/">W3C CSS validator</a>
Use tools such as the <a href="https://jigsaw.w3.org/css-validator/">W3C CSS validator</a> to test.</p>
to test.
</p>
<p>Using valid CSS is a measurable baseline quality attribute that allows to spot <p>Using valid CSS is a measurable baseline quality attribute that allows to spot
CSS code that may not have any effect and can be removed, and that ensures CSS code that may not have any effect and can be removed, and that ensures
proper CSS usage.</p> proper CSS usage.</p>
<h4 id="ID_and_Class_Naming">4.1.2 ID and Class Naming</h4> <h4 id="ID_and_Class_Naming" class="numbered">ID and Class Naming</h4>
<p>Use meaningful or generic ID and class names.</p> <p>Use meaningful or generic ID and class names.</p>
@ -513,7 +510,7 @@ document or template changes.</p>
.alt {} .alt {}
</code></pre> </code></pre>
<h4 id="ID_and_Class_Name_Style">4.1.3 ID and Class Name Style</h4> <h4 id="ID_and_Class_Name_Style" class="numbered">ID and Class Name Style</h4>
<p>Use ID and class names that are as short as possible but as long as necessary.</p> <p>Use ID and class names that are as short as possible but as long as necessary.</p>
@ -532,14 +529,15 @@ understandability and code efficiency.</p>
.author {} .author {}
</code></pre> </code></pre>
<h4 id="Type_Selectors">4.1.4 Type Selectors</h4> <h4 id="Type_Selectors" class="numbered">Type Selectors</h4>
<p>Avoid qualifying ID and class names with type selectors.</p> <p>Avoid qualifying ID and class names with type selectors.</p>
<p>Unless necessary (for example with helper classes), do not use element names in <p>Unless necessary (for example with helper classes), do not use element names in
conjunction with IDs or classes.</p> conjunction with IDs or classes.</p>
<p>Avoiding unnecessary ancestor selectors is useful for <a href="http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/">performance reasons</a>.</p> <p>Avoiding unnecessary ancestor selectors is useful for
<a href="http://www.stevesouders.com/blog/2009/06/18/simplifying-css-selectors/">performance reasons</a>.</p>
<pre><code class="language-css bad">/* Not recommended */ <pre><code class="language-css bad">/* Not recommended */
ul#example {} ul#example {}
@ -551,11 +549,12 @@ div.error {}
.error {} .error {}
</code></pre> </code></pre>
<h4 id="Shorthand_Properties">4.1.5 Shorthand Properties</h4> <h4 id="Shorthand_Properties" class="numbered">Shorthand Properties</h4>
<p>Use shorthand properties where possible.</p> <p>Use shorthand properties where possible.</p>
<p>CSS offers a variety of <a href="https://www.w3.org/TR/CSS21/about.html#shorthand">shorthand</a> <p>CSS offers a variety of
<a href="https://www.w3.org/TR/CSS21/about.html#shorthand">shorthand</a>
properties (like <code>font</code>) that should be used whenever possible, even in cases properties (like <code>font</code>) that should be used whenever possible, even in cases
where only one value is explicitly set.</p> where only one value is explicitly set.</p>
@ -578,7 +577,7 @@ font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em; padding: 0 1em 2em;
</code></pre> </code></pre>
<h4 id="0_and_Units">4.1.6 0 and Units</h4> <h4 id="0_and_Units" class="numbered">0 and Units</h4>
<p>Omit unit specification after “0” values, unless required.</p> <p>Omit unit specification after “0” values, unless required.</p>
@ -590,7 +589,7 @@ margin: 0;
padding: 0; padding: 0;
</code></pre> </code></pre>
<h4 id="Leading_0s">4.1.7 Leading 0s</h4> <h4 id="Leading_0s" class="numbered">Leading 0s</h4>
<p>Omit leading “0”s in values.</p> <p>Omit leading “0”s in values.</p>
@ -599,7 +598,7 @@ padding: 0;
<pre><code class="language-css good">font-size: .8em; <pre><code class="language-css good">font-size: .8em;
</code></pre> </code></pre>
<h4 id="Hexadecimal_Notation">4.1.8 Hexadecimal Notation</h4> <h4 id="Hexadecimal_Notation" class="numbered">Hexadecimal Notation</h4>
<p>Use 3 character hexadecimal notation where possible.</p> <p>Use 3 character hexadecimal notation where possible.</p>
@ -614,7 +613,7 @@ color: #eebbcc;
color: #ebc; color: #ebc;
</code></pre> </code></pre>
<h4 id="Prefixes">4.1.9 Prefixes</h4> <h4 id="Prefixes" class="numbered">Prefixes</h4>
<p>Prefix selectors with an application-specific prefix (optional).</p> <p>Prefix selectors with an application-specific prefix (optional).</p>
@ -629,7 +628,7 @@ easier, for example in search and replace operations.</p>
#maia-note {} /* Maia */ #maia-note {} /* Maia */
</code></pre> </code></pre>
<h4 id="ID_and_Class_Name_Delimiters">4.1.10 ID and Class Name Delimiters</h4> <h4 id="ID_and_Class_Name_Delimiters" class="numbered">ID and Class Name Delimiters</h4>
<p>Separate words in ID and class names by a hyphen.</p> <p>Separate words in ID and class names by a hyphen.</p>
@ -649,7 +648,7 @@ and scannability.</p>
.ads-sample {} .ads-sample {}
</code></pre> </code></pre>
<h4 id="Hacks">4.1.11 Hacks</h4> <h4 id="Hacks" class="numbered">Hacks</h4>
<p>Avoid user agent detection as well as CSS “hacks”—try a different approach <p>Avoid user agent detection as well as CSS “hacks”—try a different approach
first.</p> first.</p>
@ -663,9 +662,9 @@ resistance. That is, allowing and making it easy to use detection and hacks
means using detection and hacks more frequently—and more frequently is too means using detection and hacks more frequently—and more frequently is too
frequently.</p> frequently.</p>
<h3 id="CSS_Formatting_Rules">4.2 CSS Formatting Rules</h3> <h3 id="CSS_Formatting_Rules" class="numbered">CSS Formatting Rules</h3>
<h4 id="Declaration_Order">4.2.1 Declaration Order</h4> <h4 id="Declaration_Order" class="numbered">Declaration Order</h4>
<p>Alphabetize declarations.</p> <p>Alphabetize declarations.</p>
@ -686,11 +685,12 @@ text-align: center;
text-indent: 2em; text-indent: 2em;
</code></pre> </code></pre>
<h4 id="Block_Content_Indentation">4.2.2 Block Content Indentation</h4> <h4 id="Block_Content_Indentation" class="numbered">Block Content Indentation</h4>
<p>Indent all block content.</p> <p>Indent all block content.</p>
<p>Indent all <a href="https://www.w3.org/TR/CSS21/syndata.html#block">block content</a>, <p>Indent all
<a href="https://www.w3.org/TR/CSS21/syndata.html#block">block content</a>,
that is rules within rules as well as declarations, so to reflect hierarchy and that is rules within rules as well as declarations, so to reflect hierarchy and
improve understanding.</p> improve understanding.</p>
@ -704,7 +704,7 @@ improve understanding.</p>
} }
</code></pre> </code></pre>
<h4 id="Declaration_Stops">4.2.3 Declaration Stops</h4> <h4 id="Declaration_Stops" class="numbered">Declaration Stops</h4>
<p>Use a semicolon after every declaration.</p> <p>Use a semicolon after every declaration.</p>
@ -725,7 +725,7 @@ reasons.</p>
} }
</code></pre> </code></pre>
<h4 id="Property_Name_Stops">4.2.4 Property Name Stops</h4> <h4 id="Property_Name_Stops" class="numbered">Property Name Stops</h4>
<p>Use a space after a property name’s colon.</p> <p>Use a space after a property name’s colon.</p>
@ -744,12 +744,13 @@ h3 {
} }
</code></pre> </code></pre>
<h4 id="Declaration_Block_Separation">4.2.5 Declaration Block Separation</h4> <h4 id="Declaration_Block_Separation" class="numbered">Declaration Block Separation</h4>
<p>Use a space between the last selector and the declaration block.</p> <p>Use a space between the last selector and the declaration block.</p>
<p>Always use a single space between the last selector and the opening brace that <p>Always use a single space between the last selector and the opening brace that
begins the <a href="https://www.w3.org/TR/CSS21/syndata.html#rule-sets">declaration block</a>.</p> begins the
<a href="https://www.w3.org/TR/CSS21/syndata.html#rule-sets">declaration block</a>.</p>
<p>The opening brace should be on the same line as the last selector in a given <p>The opening brace should be on the same line as the last selector in a given
rule.</p> rule.</p>
@ -772,7 +773,7 @@ rule.</p>
} }
</code></pre> </code></pre>
<h4 id="Selector_and_Declaration_Separation">4.2.6 Selector and Declaration Separation</h4> <h4 id="Selector_and_Declaration_Separation" class="numbered">Selector and Declaration Separation</h4>
<p>Separate selectors and declarations by new lines.</p> <p>Separate selectors and declarations by new lines.</p>
@ -793,7 +794,7 @@ h3 {
} }
</code></pre> </code></pre>
<h4 id="Rule_Separation">4.2.7 Rule Separation</h4> <h4 id="Rule_Separation" class="numbered">Rule Separation</h4>
<p>Separate rules by new lines.</p> <p>Separate rules by new lines.</p>
@ -809,7 +810,7 @@ body {
} }
</code></pre> </code></pre>
<h4 id="CSS_Quotation_Marks">4.2.8 CSS Quotation Marks</h4> <h4 id="CSS_Quotation_Marks" class="numbered">CSS Quotation Marks</h4>
<p>Use single (<code>''</code>) rather than double (<code>""</code>) quotation marks for attribute <p>Use single (<code>''</code>) rather than double (<code>""</code>) quotation marks for attribute
selectors and property values.</p> selectors and property values.</p>
@ -835,9 +836,9 @@ html {
} }
</code></pre> </code></pre>
<h3 id="CSS_Meta_Rules">4.3 CSS Meta Rules</h3> <h3 id="CSS_Meta_Rules" class="numbered">CSS Meta Rules</h3>
<h4 id="Section_Comments">4.3.1 Section Comments</h4> <h4 id="Section_Comments" class="numbered">Section Comments</h4>
<p>Group sections by a section comment (optional).</p> <p>Group sections by a section comment (optional).</p>

29
javaguide.css
View File

@ -570,3 +570,32 @@ li.toc_entry a {
.toc td.two_columns { .toc td.two_columns {
border-width: 0px; border-width: 0px;
} }
/* Numbered sections */
h1 {
counter-reset: h2;
}
h2.numbered {
counter-reset: h3;
}
h3.numbered {
counter-reset: h4;
}
h2.numbered::before {
content: counter(h2) ' ';
counter-increment: h2;
}
h3.numbered::before {
content: counter(h2) '.' counter(h3) ' ';
counter-increment: h3;
}
h4.numbered::before {
content: counter(h2) '.' counter(h3) '.' counter(h4) ' ';
counter-increment: h4;
}