diff --git a/htmlcssguide.html b/htmlcssguide.html index 58e6c12..3c823e5 100644 --- a/htmlcssguide.html +++ b/htmlcssguide.html @@ -31,25 +31,25 @@ quality is maintained.

files, style sheets, and scripts, unless the respective files are not available over HTTPS.

-
<!-- Not recommended: omits the protocol -->
+
<!-- Not recommended: omits the protocol -->
 <script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 
 <!-- Not recommended: uses HTTP -->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
 

 
-
/* Not recommended: omits the protocol */
+
/* Not recommended: omits the protocol */
 @import '//fonts.googleapis.com/css?family=Open+Sans';
 
 /* Not recommended: uses HTTP */
 @import 'http://fonts.googleapis.com/css?family=Open+Sans';
 

 
-
/* Recommended */
+
/* Recommended */
 @import 'https://fonts.googleapis.com/css?family=Open+Sans';
 

 
@@ -61,13 +61,13 @@ over HTTPS.

 
 
Don’t use tabs or mix tabs and spaces for indentation.

 
-
<ul>
+
<ul>
   <li>Fantastic
   <li>Great
 </ul>
 

 
-
.example {
+
.example {
   color: blue;
 }
 

@@ -80,19 +80,19 @@ over HTTPS.

 attribute values (unless text/CDATA), CSS selectors, properties, and property
 values (with the exception of strings).

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <A HREF="/">Home</A>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <img src="google.png" alt="Google">
 

 
-
/* Not recommended */
+
/* Not recommended */
 color: #E5E5E5;
 

 
-
/* Recommended */
+
/* Recommended */
 color: #e5e5e5;
 

 
@@ -102,11 +102,11 @@ color: #e5e5e5;
 
 
Trailing white spaces are unnecessary and can complicate diffs.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <p>What?_
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <p>Yes please.
 

 
@@ -149,11 +149,11 @@ depends on the project’s complexity.)

 
 
Append action items after a colon as in TODO: action item.

 
-
{# TODO(john.doe): revisit centering #}
+
{# TODO(john.doe): revisit centering #}
 <center>Test</center>
 

 
-
<!-- TODO: remove optional tags -->
+
<!-- TODO: remove optional tags -->
 <ul>
   <li>Apples</li>
   <li>Oranges</li>
@@ -194,12 +194,12 @@ to test.
 learning about technical requirements and constraints, and that ensures proper
 HTML usage.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <title>Test</title>
 <article>This is only a test.
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <!DOCTYPE html>
 <meta charset="utf-8">
 <title>Test</title>
@@ -217,11 +217,11 @@ paragraphs, a elements for anchors, etc.

 
Using HTML according to its purpose is important for accessibility, reuse, and
 code efficiency reasons.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <div onclick="goToRecommendations();">All recommendations</div>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <a href="recommendations/">All recommendations</a>
 

 
@@ -241,11 +241,11 @@ may have no way of understanding what video or audio contents are about either.<
 whose purpose is purely decorative which you cannot immediately use CSS for, use
 no alternative text, as in alt="".)

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <img src="spreadsheet.png">
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
 

 
@@ -268,7 +268,7 @@ sheets and scripts as possible from documents and templates.

 maintenance reasons. It is always more expensive to change HTML documents and
 templates than it is to update style sheets and scripts.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <!DOCTYPE html>
 <title>HTML sucks</title>
 <link rel="stylesheet" href="base.css" media="screen">
@@ -281,7 +281,7 @@ templates than it is to update style sheets and scripts.

   my website without doing everything all over again!</center>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <!DOCTYPE html>
 <title>My first CSS-only redesign</title>
 <link rel="stylesheet" href="default.css">
@@ -303,11 +303,11 @@ as well as among teams.

 
The only exceptions apply to characters with special meaning in HTML (like <
 and &) as well as control or “invisible” characters (like no-break spaces).

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 The currency symbol for the Euro is &ldquo;&eur;&rdquo;.
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 The currency symbol for the Euro is “€”.
 

 
@@ -324,7 +324,7 @@ as it’s significantly different from what web developers are typically tau
 For consistency and simplicity reasons it’s best served omitting all optional
 tags, not just a selection.)

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <!DOCTYPE html>
 <html>
   <head>
@@ -336,7 +336,7 @@ tags, not just a selection.)

 </html>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <!DOCTYPE html>
 <title>Saving money, saving bytes</title>
 <p>Qed.
@@ -354,21 +354,21 @@ tags, not just a selection.)

 and text/javascript
 as defaults. This can be safely done even for older browsers.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <link rel="stylesheet" href="https://www.google.com/css/maia.css"
     type="text/css">
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <link rel="stylesheet" href="https://www.google.com/css/maia.css">
 

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <script src="https://www.google.com/js/gweb/analytics/autotrack.js"
     type="text/javascript"></script>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
 

 
@@ -389,19 +389,19 @@ on a new line.

 put all li elements in one line. A linter is encouraged to throw a warning
 instead of an error.)

 
-
<blockquote>
+
<blockquote>
   <p><em>Space</em>, the final frontier.</p>
 </blockquote>
 

 
-
<ul>
+
<ul>
   <li>Moe
   <li>Larry
   <li>Curly
 </ul>
 

 
-
<table>
+
<table>
   <thead>
     <tr>
       <th scope="col">Income
@@ -423,12 +423,12 @@ wrapping long lines if it significantly improves readability.

 
When line-wrapping, each continuation line should be indented at least 4
 additional spaces from the original line.

 
-
<md-progress-circular md-mode="indeterminate" class="md-accent"
+
<md-progress-circular md-mode="indeterminate" class="md-accent"
     ng-show="ctrl.loading" md-diameter="35">
 </md-progress-circular>
 

 
-
<md-progress-circular
+
<md-progress-circular
     md-mode="indeterminate"
     class="md-accent"
     ng-show="ctrl.loading"
@@ -436,7 +436,7 @@ additional spaces from the original line.

 </md-progress-circular>
 

 
-
<md-progress-circular md-mode="indeterminate"
+
<md-progress-circular md-mode="indeterminate"
                       class="md-accent"
                       ng-show="ctrl.loading"
                       md-diameter="35">
@@ -450,11 +450,11 @@ additional spaces from the original line.

 
Use double ("") rather than single quotation marks ('') around attribute
 values.

 
-
<!-- Not recommended -->
+
<!-- Not recommended -->
 <a class='maia-button maia-button-secondary'>Sign in</a>
 

 
-
<!-- Recommended -->
+
<!-- Recommended -->
 <a class="maia-button maia-button-secondary">Sign in</a>
 

 
@@ -495,7 +495,7 @@ meaning different from their siblings. They are typically needed as “helpe
 
Using functional or generic names reduces the probability of unnecessary
 document or template changes.

 
-
/* Not recommended: meaningless */
+
/* Not recommended: meaningless */
 #yee-1901 {}
 
 /* Not recommended: presentational */
@@ -503,7 +503,7 @@ document or template changes.

 .clear {}
 

 
-
/* Recommended: specific */
+
/* Recommended: specific */
 #gallery {}
 #login {}
 .video {}
@@ -522,12 +522,12 @@ document or template changes.

 
Using ID and class names this way contributes to acceptable levels of
 understandability and code efficiency.

 
-
/* Not recommended */
+
/* Not recommended */
 #navigation {}
 .atr {}
 

 
-
/* Recommended */
+
/* Recommended */
 #nav {}
 .author {}
 

@@ -541,12 +541,12 @@ conjunction with IDs or classes.

 
 
Avoiding unnecessary ancestor selectors is useful for performance reasons.

 
-
/* Not recommended */
+
/* Not recommended */
 ul#example {}
 div.error {}
 

 
-
/* Recommended */
+
/* Recommended */
 #example {}
 .error {}
 

@@ -561,7 +561,7 @@ where only one value is explicitly set.

 
 
Using shorthand properties is useful for code efficiency and understandability.

 
-
/* Not recommended */
+
/* Not recommended */
 border-top-style: none;
 font-family: palatino, georgia, serif;
 font-size: 100%;
@@ -572,7 +572,7 @@ padding-right: 1em;
 padding-top: 0;
 

 
-
/* Recommended */
+
/* Recommended */
 border-top: 0;
 font: 100%/1.6 palatino, georgia, serif;
 padding: 0 1em 2em;
@@ -584,7 +584,7 @@ padding: 0 1em 2em;
 
 
Do not use units after 0 values unless they are required.

 
-
flex: 0px; /* This flex-basis component requires a unit. */
+
flex: 0px; /* This flex-basis component requires a unit. */
 flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */
 margin: 0;
 padding: 0;
@@ -596,7 +596,7 @@ padding: 0;
 
 
Do not put 0s in front of values or lengths between -1 and 1.

 
-
font-size: .8em;
+
font-size: .8em;
 

 
 
4.1.8 Hexadecimal Notation

@@ -606,11 +606,11 @@ padding: 0;
 
For color values that permit it, 3 character hexadecimal notation is shorter and
 more succinct.

 
-
/* Not recommended */
+
/* Not recommended */
 color: #eebbcc;
 

 
-
/* Recommended */
+
/* Recommended */
 color: #ebc;
 

 
@@ -625,7 +625,7 @@ unique identifiers followed by a dash.

 
Using namespaces helps preventing naming conflicts and can make maintenance
 easier, for example in search and replace operations.

 
-
.adw-help {} /* AdWords */
+
.adw-help {} /* AdWords */
 #maia-note {} /* Maia */
 

 
@@ -637,14 +637,14 @@ easier, for example in search and replace operations.

 (including none at all) other than hyphens, in order to improve understanding
 and scannability.

 
-
/* Not recommended: does not separate the words “demo” and “image” */
+
/* Not recommended: does not separate the words “demo” and “image” */
 .demoimage {}
 
 /* Not recommended: uses underscore instead of hyphen */
 .error_status {}
 

 
-
/* Recommended */
+
/* Recommended */
 #video-id {}
 .ads-sample {}
 

@@ -676,7 +676,7 @@ way that is easy to remember and maintain.

 vendor-specific prefixes for a certain CSS property should be kept sorted (e.g.
 -moz prefix comes before -webkit).

 
-
background: fuchsia;
+
background: fuchsia;
 border: 1px solid;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
@@ -694,7 +694,7 @@ text-indent: 2em;
 that is rules within rules as well as declarations, so to reflect hierarchy and
 improve understanding.

 
-
@media screen, projection {
+
@media screen, projection {
 
   html {
     background: #fff;
@@ -711,14 +711,14 @@ improve understanding.

 
End every declaration with a semicolon for consistency and extensibility
 reasons.

 
-
/* Not recommended */
+
/* Not recommended */
 .test {
   display: block;
   height: 100px
 }
 

 
-
/* Recommended */
+
/* Recommended */
 .test {
   display: block;
   height: 100px;
@@ -732,13 +732,13 @@ reasons.

 
Always use a single space between property and value (but no space between
 property and colon) for consistency reasons.

 
-
/* Not recommended */
+
/* Not recommended */
 h3 {
   font-weight:bold;
 }
 

 
-
/* Recommended */
+
/* Recommended */
 h3 {
   font-weight: bold;
 }
@@ -754,7 +754,7 @@ begins the declarat
 
The opening brace should be on the same line as the last selector in a given
 rule.

 
-
/* Not recommended: missing space */
+
/* Not recommended: missing space */
 #video{
   margin-top: 1em;
 }
@@ -766,7 +766,7 @@ rule.

 }
 

 
-
/* Recommended */
+
/* Recommended */
 #video {
   margin-top: 1em;
 }
@@ -778,13 +778,13 @@ rule.

 
 
Always start a new line for each selector and declaration.

 
-
/* Not recommended */
+
/* Not recommended */
 a:focus, a:active {
   position: relative; top: 1px;
 }
 

 
-
/* Recommended */
+
/* Recommended */
 h1,
 h2,
 h3 {
@@ -799,7 +799,7 @@ h3 {
 
 
Always put a blank line (two line breaks) between rules.

 
-
html {
+
html {
   background: #fff;
 }
 
@@ -819,7 +819,7 @@ selectors and property values.

 
Exception: If you do need to use the @charset rule, use double quotation
 marks—single quotation marks are not permitted.

 
-
/* Not recommended */
+
/* Not recommended */
 @import url("https://www.google.com/css/maia.css");
 
 html {
@@ -827,7 +827,7 @@ html {
 }
 

 
-
/* Recommended */
+
/* Recommended */
 @import url(https://www.google.com/css/maia.css);
 
 html {
@@ -844,7 +844,7 @@ html {
 
If possible, group style sheet sections together by using comments. Separate
 sections with new lines.

 
-
/* Header */
+
/* Header */
 
 #adw-header {}
 
diff --git a/include/jsguide.js b/include/jsguide.js
index 7a5dcf9..c5eea05 100644
--- a/include/jsguide.js
+++ b/include/jsguide.js
@@ -41,9 +41,12 @@ window.initStyleGuide = function(init) {
   // properly. Fix it by moving the code directly into the pre.
   find('pre > code', function(code) {
     var pre = code.parentElement;
-    // internal TS style guide does not want prettyprint
-    if (code.classList.contains("language-ts")) {
-      code.classList.add("prettyprint");
+    // Internal HTML/CSS & TS style guides do not use prettyprint.
+    if (code.classList.contains('language-css') ||
+        code.classList.contains('language-django') ||
+        code.classList.contains('language-html') ||
+        code.classList.contains('language-ts')) {
+      code.classList.add('prettyprint');
     }
     pre.className = code.className;
     pre.innerHTML = code.innerHTML;