Geekly Articles each Day

Google HTML / CSS設計ガイド

翻訳者から


これらの推奨事項を喜んで読み、翻訳を提供します。

はじめに


このガイドでは、HTMLおよびCSSコードのフォーマットとフォーマットのルールについて説明します。 その目標は、コードの品質を改善し、コラボレーションとインフラストラクチャサポートを促進することです。

これは、 HTML 、 CSS 、およびGSSを使用するファイルの作業バージョンに適用されます。

コードの全体的な品質が保持されている場合、任意のツールを使用してコードのコンパイルまたは難読化を最小限に抑えることができます。


一般的な設計ルール


プロトコル

ページにリソースを含めるときにプロトコルを指定しないでください。

もちろん、これらのファイルが両方のプロトコルでアクセス可能な場合、画像または他のメディアリソース、スタイルファイル、またはスクリプトへのリンクでは、プロトコルの名前（ http：、 https :)を省略します。

プロトコルが存在しないため、リンクが相対的になり、異なるプロトコルからのリソースの混合が防止され、ファイルサイズがわずかに小さくなります。

非推奨：
  <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

:
  <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

:
  .example {
    background: url(http://www.google.com/images/example);
  }

:
  .example {
    background: url(//www.google.com/images/example);
  }




.

.

:
  <ul>
    <li>
    <li>
  </ul>

:
  .example {
    color: blue;
  }



.

: , , ( /CDATA), , ( ).

:
  <A HREF="/"></A>

:
  <img src="google.png" alt="Google">



.

diff.

:
  <p>?_

:
  <p> .




UTF-8 ( BOM).

, UTF-8 (BOM).

HTML <meta charset="utf-8">. ss-: UTF-8 .

( , , , : XHTML, HTML CSS (.).)


, .

, : , , .

( , , . HTML CSS . )


TODO.

TODO. , @@.

( ) : TODO().

, : TODO: .

:
  {# TODO(Ivan Ivanov):    #}
  <center></center>

:
  <!-- TODO:    -->
  <ul>
    <li></li>
    <li></li>
  </ul>



HTML


HTML5.

HTML5 (HTML ) html-: <!DOCTYPE html>.

( HTML text/html. XHTML, application/xhtml+xml (.), . )


HTML

HTML.

HTML , , , .

W3C HTML validator (.) .

— . HTML HTML.

:
  <title></title>
  <article>

:
  <!DOCTYPE html>
  <meta charset="utf-8">
  <title></title>
  <article> .</article>


HTML , .

( “”) : , p , a ..

, .

:
  <div onclick="goToRecommendations();">All recommendations</div>

:
  <a href="recommendations/">All recommendations</a>



.

: , , canvas. (alt), .

. , @alt. .

( alt , , CSS, alt="")

:
    <img src="spreadsheet.png">

:
    <img src="spreadsheet.png" alt="Spreadsheet screenshot.">



, .

(), () () .

, HTML, HTML . , , , — .

, .

. HTML- .

:
  <!DOCTYPE html>
  <title>HTML sucks</title>
  <link rel="stylesheet" href="base.css" media="screen">
  <link rel="stylesheet" href="grid.css" media="screen">
  <link rel="stylesheet" href="print.css" media="print">
  <h1 style="font-size: 1em;">HTML </h1>
  <p>     - ,     :
    <u>HTML -  !!1</u>
  <center>  ,      ,
       . </center>

:
  <!DOCTYPE html>
  <title>My first CSS-only redesign</title>
  <link rel="stylesheet" href="default.css">
  <h1>  CSS </h1>
  <p>     ,  -  :
             HTML
  <p> !



-

-.

-, &mdash;, &rdquo;, &#x263a;, , (UTF-8)

— HTML ( < &) “” ( ).

:
    : &ldquo;&eur;&rdquo;.

:
    : “€”.



. ( )

. HTML5 (.) .

( , , , -. , , , ).

:
  <!DOCTYPE html>
  <html>
    <head>
      <title>  -  .</title>
    </head>
    <body>
      <p>.</p>
    </body>
  </html>

:
  <!DOCTYPE html>
  <title>-!</title>
  <p>-



'type'

type .

type ( - CSS) ( JavaScript).

type HTML5 text/css (.) text/javascript (.) . .

:
  <link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">

:
  <link rel="stylesheet" href="//www.google.com/css/maia.css">

:
  <script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>

:
  <script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>



HTML


, .

(CSS display), .

.

( - , li . [ . .] .

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

:
  <ul>
    <li>
    <li>
    <li>
  </ul>

:
  <table>
    <thead>
      <tr>
        <th scope="col">
        <th scope="col">
    <tbody>
      <tr>
        <td>$ 5.00
        <td>$ 4.50
  </table>



CSS


CSS

CSS-.

, - , , CSS .

W3C CSS (.) .

— . CSS …


.

, , , …

, , , , .

— , . “.”

.

:
  /*  :    */
  #yee-1901 {}
  
  /*  :    */
  .button-green {}
  .clear {}

:
  /* :     */
  #gallery {}
  #login {}
  .video {}
  
  /* :   */
  .aux {}
  .alt {}



, , , .

, , .

.

:
  /*   */
  #navigation {}
  .atr {}

:
  /*  */
  #nav {}
  .author {}



() .

( -), .

(.).

:
  /*   */
  ul#example {}
  div.error {}

:
  /*  */
  #example {}
  .error {}



, .

CSS (.) ( font), , .

.

:
  /*   */
  border-top-style: none;
  font-family: palatino, georgia, serif;
  font-size: 100%;
  line-height: 1.6;
  padding-bottom: 2em;
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 0;

:
  /*  */
  border-top: 0;
  font: 100%/1.6 palatino, georgia, serif;
  padding: 0 1em 2em;



0



.

:
  margin: 0;
  padding: 0;



0

“0” .

0 -1 1.

:
  font-size: .8em;





("", '') url().

:
  @import url(//www.google.com/css/go.css);



.

.

:
  /*   */
  color: #eebbcc;

:
  /*  */
  color: #ebc;



. ( )

, , , ( ) . .

. .

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



.

, , , .

:
  /*  :  “demo”  “image”   */
  .demoimage {}
  
  /*  :     */
  .error_status {}

:
  /*  */
  #video-id {}
  .ads-sample {}



, CSS “”— .

CSS-, . , . , , , . , .




CSS


.

, , .

. , , ( -moz --webkit)

:
  background: fuchsia;
  border: 1px solid;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: black;
  text-align: center;
  text-indent: 2em;



.

.

(.), , .

:
  @media screen, projection {
  
    html {
      background: #fff;
      color: #444;
    }
  
  }



.

.

:
  .test {
    display: block;
    height: 100px
  }

:
  .test {
    display: block;
    height: 100px;
  }



.

( ) , .

:
  h3 {
    font-weight:bold;
  }

:
  h3 {
    font-weight: bold;
  }



.

.

:
  a:focus, a:active {
    position: relative; top: 1px;
  }

:
  h1,
  h2,
  h3 {
    font-weight: normal;
    line-height: 1.2;
  }



.

.

:
  html {
    background: #fff;
  }
  
  body {
    margin: auto;
    width: 50%;
  }



CSS


. ( )

. .

:
  /* Header */
  
  #adw-header {}
  
  /* Footer */
  
  #adw-footer {}
  
  /* Gallery */
  
  .adw-gallery {}






, , , . , . , .

, , , , .

, , , .

, . .



, Google , , , , , , .

.

Source: https://habr.com/ru/post/J143452/

More articles:


All Articles