Guide to classes and styles used in MDN content - The MDN project 编辑

Example syntax

<a href="https://github.com/mdn/simple-web-worker/archive/gh-pages.zip" class="button">Download source code</a>

Example syntax

<a href="/">Link to MDN</a>
<a href="http://wikipedia.org">Link away from MDN</a>
<a href="http://wikipedia.org" class="ignore-external">Link away from MDN with <code>ignore-external</code></a>

Example macro syntax

{{Glossary("HTML")}}

Example syntax

<h4 id="Hidden_Code_Sample" name="Hidden_Code_Sample">Hidden code Sample</h4>

<div class="hidden">
<h5 id="HTML">HTML</h5>

<pre class="brush: html;">
&lt;button id="test"&gt; Click me &lt;/button&gt;

<h5 id="CSS">CSS</h5>

<pre class="brush: css;">
button {
    background-color: #a00;
    color:#fff;
    font-size: 20px;
}
</pre>
</div>

<h5 id="JavaScript_Content">JavaScript Content</h5>

<pre class="brush: js;">
document.getElementById("test").addEventListener("click", works);
function works() {
    window.alert("you clicked it!");
}
</pre>

<p>{{EmbedLiveSample("Hidden_Code_Sample")}}</p>

Hidden code Sample

HTML

<button id="test">Click Me</button>

CSS

button{
    background-color: #a00;
    color:#fff;
    font-size: 20px;
}

JavaScript

document.getElementById("test").addEventListener("click", works);
function works(){
    window.alert("you clicked it!");
}

Note: If .seoSummary is not explicitly specified on a page, the first paragraph is automatically set as the SEO summary: there is no need to use this on most pages.

The final page display won't show any styling change, but in the editor the text that is set as the SEO summary will be marked with a dotted outline and a "SEO Summary" label", as shown below:

The below examples are taken from the Mozilla Add-ons page.

Example syntax

<p>
  <span class="seoSummary">Add-ons add new functionality to <a href="/en-US/docs/Mozilla/Gecko">Gecko</a>-based applications such as Firefox, SeaMonkey, and Thunderbird.</span>
  There are two main types of add-on: <a href="#Extensions">Extensions</a> add new features to the application, while <a href="#Themes">Themes</a> modify the application's user interface.
</p>

Example of the generated <meta> elements

<meta property="og:description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird.">
<meta name="description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird.">
<meta name="twitter:description" content="Add-ons add new functionality to Gecko -based applications such as Firefox, SeaMonkey, and Thunderbird.">

Example of how Facebook uses it

Example syntax

<div class="callout-box">
  <p>This is an exciting callout</p>
</div>
<p>Example content to float around</p>
<p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

Example syntax

<div class="column-container">
  <div class="column-4">
    <p>My first equal width column.</p>
  </div>
  <div class="column-4">
    <p>My second equal width column.</p>
  </div>
  <div class="column-4">
    <p>My third equal width column.</p>
  </div>
</div>

Example syntax

<div class="column-container">
  <div class="column-1" style="background-color: yellow;">1/12</div>
  <div class="column-11" style="background-color: lime;">11/12</div>
</div>

<div class="column-container">
  <div class="column-5" style="background-color: yellow;">5/12</div>
  <div class="column-7" style="background-color: lime;">7/12</div>
</div>

<div class="column-container">
  <div class="column-6" style="background-color: yellow;">6/12</div>
  <div class="column-4" style="background-color: lime;">4/12</div>
  <div class="column-2" style="background-color: pink;">2/12</div>
</div>

These classes are equivalents of commonly-used numerical width classes, as follows:

• .column-quarter — equivalent to .column-3
• .column-third — equivalent to .column-4
• .column-half — equivalent to .column-6

Example syntax

<div class="column-container">
  <div class="column-half" style="background-color: yellow;">Half</div>
  <div class="column-half" style="background-color: lime;">Half</div>
</div>

<div class="column-container">
  <div class="column-third" style="background-color: yellow;">Third</div>
  <div class="column-third" style="background-color: lime;">Third</div>
  <div class="column-third" style="background-color: pink;">Third</div>
</div>
<div class="column-container">
  <div class="column-quarter" style="background-color: yellow;">Quarter</div>
  <div class="column-quarter" style="background-color: lime;">Quarter</div>
  <div class="column-quarter" style="background-color: pink;">Quarter</div>
  <div class="column-quarter" style="background-color: cyan;">Quarter</div>
</div>

Example syntax

This is an example syntax section for <details> that was hidden with <details>. Ooooooh, how meta.

<details>
<h4>Example syntax</h4>
<p>This is an example syntax section for <code>.detail</code> that was hidden with <code>.detail</code>. Ooooooh, how meta.</p>
</details>

You should always use headings with these classes, as shown below — CSS is unable to add localized language to the page identifying whether they're good or bad so this is important for people who rely on screen readers, and people with different cultural backgrounds (green and red are not universally good and bad.)

Example syntax

<h5 id="Good_code_example">Good code example</h5>

<pre class="brush: html example-good">
  &lt;label for="test"&gt;Form label:&lt;/label&gt;
  &lt;input type="text" id="test"&gt;
</pre>

<h5 id="Bad_code_example">Bad code example</h5>

<pre class="brush: html example-bad">
  &lt;input type="text"&gt;
</pre>

Example syntax

<div class="moreinfo">
  <!-- content goes here -->
</div>

This is available via the "Note box" option in the MDN editor WYSIWYG styles dropdown.

Example syntax

<div class="notecard note" role="complementary">
  <p><strong>Note</strong>: This is how we usually present a note in an MDN article.</p>
</div>

Example Syntax

<div class="pull-right">Some content that goes off to the side.</div>
<p>Some content that does not go off to the side.</p>

Other uses

Some content that does not go off to the side.

<div class="pull-aside"><div class="moreinfo">Some content that goes off to the side.</div></div>
<p>Some content that does not go off to the side.</p>
<p>Some content that does not go off to the side.</p>

This is available via the "Article Summary" option in the MDN editor WYSIWYG styles dropdown.

Example syntax

<p class="summary">This is the start of this article. Below we will talk about puppies, giraffes, and dugongs.</p>

Example syntax

<div class="topicpage-table">
  <div class="section">Column 1</div>
  <div class="section">Column 2</div>
</div>

This is available via the "Three columns" option in the MDN editor WYSIWYG styles dropdown.

Note: If you want to apply this to a list, then you should apply it to an outer wrapper <div> — if not, it gets applied to the <ul> element, which causes the list bullets to not display in Chrome.

Example syntax

<div class="threecolumns">
  <p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

  <p>Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.</p>
</div>

This is available via the "Two columns" option in the MDN editor WYSIWYG styles dropdown.

Note: If you want to apply this to a list, then you should apply it to an outer wrapper <div> — if not, it gets applied to the <ul> element, which causes the list bullets to not display in Chrome.

Example syntax

<div class="twocolumns">
  <p>Mixtape distillery biodiesel pop-up Austin chambray. Fingerstache YOLO tousled, meditation four loko squid brunch single-origin coffee stumptown ethical asymmetrical polaroid Neutra hashtag beard. Mustache Godard Bushwick, Tumblr salvia +1 fixie cornhole beard wayfarers stumptown aesthetic keffiyeh lomo. Meggings lumbersexual keytar Shoreditch.</p>

  <p>Street art PBR YOLO pug, before they sold out fixie artisan blog bicycle rights beard direct trade chillwave. Fanny pack cornhole whatever, Austin single-origin coffee ethical church-key distillery fashion axe tofu farm-to-table irony tattooed Tumblr. Craft beer Thundercats Austin gentrify, wolf Echo Park asymmetrical hella sartorial.</p>
</div>

This is available via the "Warning box" option in the MDN editor WYSIWYG styles dropdown.

Example syntax

<div class="notecard warning">
  <p><strong>Warning</strong>:Here be dragons!</p>
</div>

A standard table can be created using the Table button in the MDN editor WYSIWYG toolbar. Pressing this brings up the Table Properties dialog box, which contains a number of functions. Generally you'll just want to use it to set the number of rows and columns, which cells are table headers (<th>), and a visible <caption> and summary attribute to provide more information for screenreaders, if desired.

Style notes

• Note the different styling applied to the headers (<th>), and the fact that they have scope attributes applied for accessibility purposes.
• By default, alternating rows have zebra stripes applied, but these can be removed by adding the .no-stripe class to them.
• You can force a table to span the full width of the content area (or other immediate containing box, if it is not the content area) by adding the .fullwidth class to the <table> element.

Example syntax

<table class="standard-table" summary="This table details what tea we liked to drink back in the heady month of December 2015">
 <caption>Favorite teas, December 2015</caption>
 <thead>
  <tr>
   <th scope="row">Variety</th>
   <th scope="col">Caffeine</th>
   <th scope="col">Steeping Time</th>
   <th scope="col">Water Temperature</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Black</th>
   <td>High</td>
   <td>2-3 minutes</td>
   <td>99&nbsp;°C</td>
  </tr>
  <tr>
   <th scope="row">Green</th>
   <td>Low to Medium</td>
   <td>1-2 minutes</td>
   <td>75 to 80&nbsp;°C</td>
  </tr>
  <tr>
   <th scope="row">Herbal</th>
   <td>None</td>
   <td>3-6 minutes</td>
   <td>99&nbsp;°C</td>
  </tr>
 </tbody>
</table>